@talknote/create-talknote-h5 0.0.1

package/README.md

@@ -0,0 +1,54 @@
+# create-talknote-h5
+
+用于创建 Talknote Alita H5 项目的脚手架。
+
+## 使用方式
+
+发布到 npm 后执行：
+
+```bash
+yarn create talknote-h5 my-project
+```
+
+其中 `my-project` 是必填的项目名称。项目名称只允许小写字母、数字、点号、下划线和连字符，并且必须以小写字母或数字开头。
+
+生成完成后执行：
+
+```bash
+cd my-project
+yarn
+yarn start
+```
+
+脚手架不会自动安装依赖，也不会初始化 Git 仓库。
+
+## 本地验证
+
+在脚手架根目录执行：
+
+```bash
+npm test
+```
+
+也可以在脚手架根目录直接执行命令入口：
+
+```bash
+node bin/create-talknote-h5.js my-project
+```
+
+## 模板维护
+
+生成项目的全部内容位于 `template/`。修改模板时，不要把 `node_modules`、构建产物或 Git 数据放入该目录。
+
+模板中的 `_gitignore` 和 `_npmrc` 会在生成项目时分别恢复为 `.gitignore` 和 `.npmrc`。
+
+## 发布
+
+确认包名和版本后，由维护者自行登录 npm 并发布：
+
+```bash
+npm login
+npm publish
+```
+
+发布完成后即可使用 `yarn create talknote-h5 my-project`。

package/bin/create-talknote-h5.js

@@ -0,0 +1,124 @@
+#!/usr/bin/env node
+'use strict';
+
+const fs = require('fs');
+const path = require('path');
+
+const USAGE = 'Usage: yarn create talknote-h5 <project-name>';
+const PROJECT_NAME_PATTERN = /^[a-z0-9][a-z0-9._-]*$/;
+const SPECIAL_FILE_NAMES = {
+  _gitignore: '.gitignore',
+  _npmrc: '.npmrc',
+};
+
+function printUsageError(message) {
+  process.stderr.write(`Error: ${message}\n${USAGE}\n`);
+  return 1;
+}
+
+function removeTree(targetPath) {
+  if (!fs.existsSync(targetPath)) {
+    return;
+  }
+
+  const targetStat = fs.lstatSync(targetPath);
+  if (!targetStat.isDirectory() || targetStat.isSymbolicLink()) {
+    fs.unlinkSync(targetPath);
+    return;
+  }
+
+  for (const entryName of fs.readdirSync(targetPath)) {
+    removeTree(path.join(targetPath, entryName));
+  }
+  fs.rmdirSync(targetPath);
+}
+
+function copyTemplateEntries(sourceDirectory, targetDirectory) {
+  for (const entry of fs.readdirSync(sourceDirectory, { withFileTypes: true })) {
+    const targetName = SPECIAL_FILE_NAMES[entry.name] || entry.name;
+    const sourcePath = path.join(sourceDirectory, entry.name);
+    const targetPath = path.join(targetDirectory, targetName);
+
+    if (entry.isDirectory()) {
+      fs.mkdirSync(targetPath);
+      copyTemplateEntries(sourcePath, targetPath);
+      continue;
+    }
+
+    if (entry.isSymbolicLink()) {
+      fs.symlinkSync(fs.readlinkSync(sourcePath), targetPath);
+      continue;
+    }
+
+    fs.copyFileSync(sourcePath, targetPath);
+  }
+}
+
+function updateGeneratedPackageName(targetDirectory, projectName) {
+  const packagePath = path.join(targetDirectory, 'package.json');
+  const packageJson = JSON.parse(fs.readFileSync(packagePath, 'utf8'));
+  packageJson.name = projectName;
+  fs.writeFileSync(packagePath, `${JSON.stringify(packageJson, null, 2)}\n`);
+}
+
+function main(argumentsList) {
+  if (argumentsList.length !== 1) {
+    return printUsageError(
+      'Project name is required and must be the only argument.',
+    );
+  }
+
+  const projectName = argumentsList[0];
+  if (!PROJECT_NAME_PATTERN.test(projectName)) {
+    return printUsageError(
+      `Invalid project name "${projectName}". Use lowercase letters, numbers, dots, underscores, and hyphens.`,
+    );
+  }
+
+  const targetDirectory = path.resolve(process.cwd(), projectName);
+  if (fs.existsSync(targetDirectory)) {
+    process.stderr.write(
+      `Error: Target directory already exists: ${targetDirectory}\n`,
+    );
+    return 1;
+  }
+
+  const templateDirectory = path.resolve(__dirname, '..', 'template');
+  let targetCreated = false;
+
+  try {
+    fs.mkdirSync(targetDirectory);
+    targetCreated = true;
+    copyTemplateEntries(templateDirectory, targetDirectory);
+    updateGeneratedPackageName(targetDirectory, projectName);
+  } catch (error) {
+    if (targetCreated) {
+      try {
+        removeTree(targetDirectory);
+      } catch (cleanupError) {
+        process.stderr.write(
+          `Error: Could not clean up ${targetDirectory}: ${cleanupError.message}\n`,
+        );
+      }
+    }
+
+    process.stderr.write(`Error: Could not create project: ${error.message}\n`);
+    return 1;
+  }
+
+  process.stdout.write(
+    `✓ Created ${projectName}\n\nNext steps:\n  cd ${projectName}\n  yarn\n  yarn start\n`,
+  );
+  return 0;
+}
+
+if (require.main === module) {
+  process.exitCode = main(process.argv.slice(2));
+}
+
+module.exports = {
+  copyTemplateEntries,
+  main,
+  removeTree,
+  updateGeneratedPackageName,
+};

package/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "@talknote/create-talknote-h5",
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "version": "0.0.1",
+  "description": "Create a Talknote Alita H5 project.",
+  "license": "MIT",
+  "private": false,
+  "bin": {
+    "create-talknote-h5": "bin/create-talknote-h5.js"
+  },
+  "files": [
+    "bin",
+    "template",
+    "README.md"
+  ],
+  "scripts": {
+    "test": "node tests/create-talknote-h5.test.js"
+  },
+  "engines": {
+    "node": ">=14.0.1"
+  }
+}

package/template/.editorconfig

@@ -0,0 +1,16 @@
+# http://editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false
+
+[Makefile]
+indent_style = tab

package/template/.eslintignore

@@ -0,0 +1,6 @@
+/scripts
+.history
+public
+dist
+.umi
+mock

package/template/.eslintrc.js

@@ -0,0 +1,6 @@
+module.exports = {
+  extends: require.resolve('alita/eslint'),
+  rules: {
+    'selector-class-pattern': 0,
+  },
+};

package/template/.prettierignore

@@ -0,0 +1,14 @@
+node_modules
+.umi
+.umi-production
+*.png
+*.jpg
+*.svg
+.editorconfig
+.env
+.prettierignore
+.gitkeep
+.DS_Store
+.npmrc
+.eslintignore
+.gitignore

package/template/.prettierrc.js

@@ -0,0 +1,5 @@
+const prettier = require('alita/prettier');
+
+module.exports = {
+  ...prettier,
+};

package/template/.stylelintrc.js

@@ -0,0 +1,3 @@
+module.exports = {
+  extends: require.resolve('alita/stylelint'),
+};

package/template/README.md

@@ -0,0 +1,153 @@
+<h1 align="center">Alita Pro</h1>
+
+帮助你快速使用 alita
+
+```
+pnpm i
+pnpm start
+```
+
+### 首页
+
+![image](https://user-images.githubusercontent.com/11746742/179654827-2ca22b45-0ec9-471e-8238-9bfa56d864a0.png)
+
+### 列表页
+
+列表页支持滚动加载更多，固定头部，状态保持
+
+![image](https://user-images.githubusercontent.com/11746742/179654907-585061f1-02cc-464e-ac75-c6ae12b2c666.png)
+
+
+### 关于尺寸标注
+
+100% 宽为 750px，可在蓝湖等工具中将标准改为 750px，这样可以直接使用标注的尺寸用于 caa class 中的尺寸，最终运行会根据手机适配，将 px 自动转为对应的 rem 值。
+
+值得注意的是，写在内联样式 style 中的 px 值不会被转化，需要手动写明 rem 单位，直接将 px 值除于 100 即可，如 750px，在 style 中应该写为 7.5rem
+
+### 关于路由
+
+采用约定式路由，只有 `src/pages/**/index.tsx` 会被识别成路由，可使用 npx alita g pages name 来新增页面。
+
+> Q: 为什么仅 index.tsx 会被识别成路由？如果我想要嵌套的路由，如 hello/hero 我该怎么办？
+> A: 仅 index.tsx 被识别成路由，会让整个文件结构变得很干净，在移动端上不需要嵌套路由，一般短位链接优势更大
+
+### 自带头部
+
+可在 `src/app.tsx#L24` 中配置
+
+```tsx
+const titleList: TitleListItem[] = [
+  {
+    pagePath: '/',
+    title: '首页',
+  },
+  {
+    pagePath: '/list',
+    title: '列表',
+  },
+];
+```
+
+也可以在页面中独立配置
+
+```tsx
+import { setPageNavBar, useLocation } from 'alita';
+import { LeftOutline } from 'antd-mobile-icons';
+import { useEffect } from 'react';
+
+const location = useLocation();
+useEffect(() => {
+  setPageNavBar({
+    pagePath: location.pathname,
+    navBar: {
+      mode: 'dark',
+      pageTitle: '首页动态标题',
+      pageBackground: '#fff',
+      back: '返回',
+      icon: <LeftOutline />,
+      leftContent: <div>首页</div>,
+      rightContent: <div>详情</div>,
+      onLeftClick: (navigate) => {
+        navigate(-1);
+      },
+      hideNavBar: false,
+    },
+  });
+}, []);
+```
+
+> 关闭默认 NavBar 上述 hideNavBar 配置改为 hideNavBar: true
+
+### 底部 Tabs
+
+可在 `src/app.tsx#L42` 中配置
+
+```tsx
+const tabList: TabBarListItem[] = [
+  {
+    pagePath: '/',
+    text: '首页',
+    iconPath: HomeGary,
+    selectedIconPath: HomeBlue,
+    title: '首页',
+    iconSize: '',
+    badge: '',
+  },
+  {
+    pagePath: '/list',
+    text: '列表',
+    iconPath: ListGary,
+    selectedIconPath: ListBlue,
+    title: '列表',
+    iconSize: '',
+    badge: '',
+  },
+];
+```
+
+也可以在页面中独立配置
+
+```tsx
+import { setTabBarList, useLocation } from 'alita';
+import { useEffect } from 'react';
+
+const location = useLocation();
+useEffect(() => {
+  setTabBarList({
+    pagePath: location.pathname,
+    text: '首页',
+    iconSize: '18px',
+    badge: '12',
+    onPress: () => {
+      navigate(location.pathname, { replace: true });
+      return '';
+    },
+    remove: false,
+  });
+}, []);
+```
+
+> 关闭 app.ts 中已经配置好的 Tab ，上述 remove 配置改为 remove: true
+
+### 格式化
+
+```
+pnpm format
+```
+
+### 构建
+
+```
+pnpm build
+```
+
+### 调试工具
+
+在 `config/config.ts` 中增加配置
+
+```
+aconsole: {
+    console: {},
+    inspx: {},
+},
+```

package/template/_gitignore

@@ -0,0 +1,42 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+**/node_modules
+
+# production
+/dist
+.mfsu
+# misc
+.DS_Store
+npm-debug.log*
+yarn-error.log
+
+/coverage
+.idea
+yarn.lock
+package-lock.json
+pnpm-lock.yaml
+*bak
+
+
+# visual studio code
+.history
+*.log
+functions/*
+.temp/**
+
+# umi
+.umi
+.umi-production
+/.env.local
+/.umirc.local.ts
+/.umirc.local.js
+/config/config.local.ts
+/config/config.local.js
+
+# screenshot
+screenshot
+.firebase
+.eslintcache
+
+build

package/template/_npmrc

@@ -0,0 +1 @@
+registry=https://registry.npmjs.org/

package/template/config/config.ts

@@ -0,0 +1,14 @@
+import { defineConfig } from 'alita';
+
+export default defineConfig({
+  appType: 'h5',
+  keepalive: [/list/],
+  aconsole: {
+    console: {},
+    inspx: {},
+  },
+  mobileLayout: 'mobile5',
+  mfsu: {},
+  hash: false,
+  npmClient: ''
+});

package/template/jest-setup.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/template/jest.config.ts

@@ -0,0 +1,15 @@
+import { Config, configUmiAlias, createConfig } from 'alita/test';
+
+export default async () => {
+  return (await configUmiAlias({
+    ...createConfig({
+      target: 'browser',
+    }),
+    setupFilesAfterEnv: ['<rootDir>/jest-setup.ts'],
+    // if you require some es-module npm package, please uncomment below line and insert your package name
+    // transformIgnorePatterns: ['node_modules/(?!.*(lodash-es|your-es-pkg-name)/)']
+    transformIgnorePatterns: [
+      'node_modules/(?!.*(@umijs/renderer-react|umi/client/client/|@umijs/plugins/libs|antd-mobile/es/))',
+    ],
+  })) as Config.InitialOptions;
+};

package/template/mock/app.ts

@@ -0,0 +1,5 @@
+export default {
+  'POST /api/hello': {
+    text: 'Antd Mobile',
+  },
+};

package/template/mock/user.ts

@@ -0,0 +1,33 @@
+import { Request, Response } from 'express';
+
+const waitTime = (time: number = 100) => {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve(true);
+    }, time);
+  });
+};
+
+export default {
+  'POST /api/login/account': async (req: Request, res: Response) => {
+    const { password, username } = req.body;
+    await waitTime(2000);
+    if (password === 'xiaohuoni' && username === 'antd.mobile') {
+      res.send({
+        message: 'ok',
+        success: true,
+      });
+      return;
+    }
+    res.send({
+      message: 'login error',
+      success: false,
+    });
+  },
+  'POST /api/login/outLogin': (req: Request, res: Response) => {
+    res.send({ data: {}, success: true });
+  },
+  'POST /api/register': (req: Request, res: Response) => {
+    res.send({ status: 'ok', currentAuthority: 'user', success: true });
+  },
+};

package/template/package.json

@@ -0,0 +1,49 @@
+{
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "build": "alita build",
+    "dev": "alita dev",
+    "format": "prettier --write .",
+    "lint-staged": "lint-staged",
+    "lint-staged:js": "eslint --ext .ts,.tsx",
+    "plugin": "alita plugin list",
+    "start": "alita dev",
+    "test": "jest"
+  },
+  "lint-staged": {
+    "**/*.less": "stylelint --syntax less",
+    "**/*.css": "stylelint --syntax css",
+    "**/*.{ts,tsx}": "npm run lint-staged:js",
+    "**/*.{ts,tsx,json,jsx,less}": [
+      "git add",
+      "prettier --write"
+    ]
+  },
+  "dependencies": {
+    "@alita/flow": "^3.1.1",
+    "alita": "^3.2.27",
+    "antd-mobile": "^5.15.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^5.16.4",
+    "@testing-library/react": "^13.4.0",
+    "@types/jest": "^27.5.2",
+    "@types/react": "^18.0.15",
+    "@types/react-dom": "^18.0.6",
+    "@types/testing-library__jest-dom": "^5.14.5",
+    "jest": "^27.5.1",
+    "prettier": "^2.8.8",
+    "ts-node": "^10.9.1",
+    "typescript": "^5.2.2"
+  },
+  "engines": {
+    "node": ">=14.0.1"
+  },
+  "gitHooks": {
+    "pre-commit": "lint-staged",
+    "commit-msg": "alita verify-commit"
+  }
+}

package/template/plugin.ts

@@ -0,0 +1,10 @@
+import { IApi } from 'alita';
+
+export default (api: IApi) => {
+  api.onDevCompileDone((opts) => {
+    // console.log('> onDevCompileDone', opts.isFirstCompile);
+  });
+  api.onBuildComplete((opts) => {
+    // console.log('> onBuildComplete', opts.isFirstCompile);
+  });
+};

package/template/src/app.tsx

@@ -0,0 +1,76 @@
+import HomeGary from '@/assets/demoIcon/home.png';
+import HomeBlue from '@/assets/demoIcon/home1.png';
+import ListGary from '@/assets/demoIcon/list.png';
+import ListBlue from '@/assets/demoIcon/list1.png';
+import type {
+  NavBarListItem,
+  NavBarProps,
+  ResponseError,
+  TabBarListItem,
+  TabBarProps,
+  TitleListItem,
+} from 'alita';
+
+export const request = {
+  prefix: '/api',
+  method: 'get',
+  errorHandler: (error: ResponseError) => {
+    // 集中处理错误
+    console.log(11111111);
+    console.log(error);
+  },
+};
+
+const titleList: TitleListItem[] = [
+  {
+    pagePath: '/',
+    title: '首页',
+  },
+  {
+    pagePath: '/list',
+    title: '列表',
+  },
+];
+const navList: NavBarListItem[] = [];
+const navBar: NavBarProps = {
+  navList,
+  fixed: false,
+  onLeftClick: () => {
+    // router.goBack();
+  },
+};
+const tabList: TabBarListItem[] = [
+  {
+    pagePath: '/',
+    text: '首页',
+    iconPath: HomeGary,
+    selectedIconPath: HomeBlue,
+    title: '首页',
+    iconSize: '',
+    badge: '',
+  },
+  {
+    pagePath: '/list',
+    text: '列表',
+    iconPath: ListGary,
+    selectedIconPath: ListBlue,
+    title: '列表',
+    iconSize: '',
+    badge: '',
+  },
+];
+
+const tabBar: TabBarProps = {
+  color: `#999999`,
+  selectedColor: '#00A0FF',
+  borderStyle: 'white',
+  position: 'bottom',
+  list: tabList,
+};
+
+export const mobileLayout = {
+  documentTitle: '默认标题',
+  navBar,
+  tabBar,
+  titleList,
+};

package/template/src/components/SearchBar/__tests__/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,143 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[` 1`] = `
+<div>
+  <div
+    class="search-bar-wrap"
+  >
+    <div
+      class="adm-search-bar"
+    >
+      <div
+        class="adm-search-bar-input-box"
+      >
+        <div
+          class="adm-search-bar-input-box-icon"
+        >
+          <svg
+            class="antd-mobile-icon"
+            height="1em"
+            style="vertical-align: -0.125em;"
+            viewBox="0 0 48 48"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+            xmlns:xlink="http://www.w3.org/1999/xlink"
+          >
+            <title>
+              1A7F0A7E-6023-4A8C-9C26-4DD5452D0C85@2x
+            </title>
+            <g
+              fill="none"
+              fill-rule="evenodd"
+              id="SearchOutline-SearchOutline"
+              stroke="none"
+              stroke-width="1"
+            >
+              <g
+                id="SearchOutline-编组"
+              >
+                <rect
+                  fill="#FFFFFF"
+                  height="48"
+                  id="SearchOutline-矩形"
+                  opacity="0"
+                  width="48"
+                  x="0"
+                  y="0"
+                />
+                <path
+                  d="M10.2434135,10.1505371 C17.2346315,3.28315429 28.5696354,3.28315429 35.5608534,10.1505371 C42.3159331,16.7859644 42.5440954,27.4048667 36.2453405,34.3093889 L43.7095294,41.6422249 C43.8671196,41.7970419 43.8693677,42.0502979 43.7145508,42.2078881 C43.7128864,42.2095822 43.7112069,42.2112616 43.7095126,42.2129259 L42.1705322,43.7246464 C42.014915,43.8775072 41.7655181,43.8775006 41.6099089,43.7246316 L34.0775268,36.3248916 L34.0775268,36.3248916 C27.0485579,41.8551751 16.7593545,41.4200547 10.2434135,35.0195303 C3.25219551,28.1521474 3.25219551,17.0179199 10.2434135,10.1505371 Z M12.3532001,12.2229532 C6.52718516,17.9457722 6.52718516,27.2242951 12.3532001,32.9471142 C18.1792151,38.6699332 27.6250517,38.6699332 33.4510667,32.9471142 C39.2770817,27.2242951 39.2770817,17.9457722 33.4510667,12.2229532 C27.6250517,6.50013419 18.1792151,6.50013419 12.3532001,12.2229532 Z"
+                  fill="currentColor"
+                  fill-rule="nonzero"
+                  id="SearchOutline-形状"
+                />
+              </g>
+            </g>
+          </svg>
+        </div>
+        <div
+          class="adm-input adm-search-bar-input"
+        >
+          <input
+            class="adm-input-element"
+            enterkeyhint="search"
+            type="search"
+            value=""
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`SearchBar Render correctly 1`] = `
+<div>
+  <div
+    class="search-bar-wrap"
+  >
+    <div
+      class="adm-search-bar"
+    >
+      <div
+        class="adm-search-bar-input-box"
+      >
+        <div
+          class="adm-search-bar-input-box-icon"
+        >
+          <svg
+            class="antd-mobile-icon"
+            height="1em"
+            style="vertical-align: -0.125em;"
+            viewBox="0 0 48 48"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+            xmlns:xlink="http://www.w3.org/1999/xlink"
+          >
+            <title>
+              1A7F0A7E-6023-4A8C-9C26-4DD5452D0C85@2x
+            </title>
+            <g
+              fill="none"
+              fill-rule="evenodd"
+              id="SearchOutline-SearchOutline"
+              stroke="none"
+              stroke-width="1"
+            >
+              <g
+                id="SearchOutline-编组"
+              >
+                <rect
+                  fill="#FFFFFF"
+                  height="48"
+                  id="SearchOutline-矩形"
+                  opacity="0"
+                  width="48"
+                  x="0"
+                  y="0"
+                />
+                <path
+                  d="M10.2434135,10.1505371 C17.2346315,3.28315429 28.5696354,3.28315429 35.5608534,10.1505371 C42.3159331,16.7859644 42.5440954,27.4048667 36.2453405,34.3093889 L43.7095294,41.6422249 C43.8671196,41.7970419 43.8693677,42.0502979 43.7145508,42.2078881 C43.7128864,42.2095822 43.7112069,42.2112616 43.7095126,42.2129259 L42.1705322,43.7246464 C42.014915,43.8775072 41.7655181,43.8775006 41.6099089,43.7246316 L34.0775268,36.3248916 L34.0775268,36.3248916 C27.0485579,41.8551751 16.7593545,41.4200547 10.2434135,35.0195303 C3.25219551,28.1521474 3.25219551,17.0179199 10.2434135,10.1505371 Z M12.3532001,12.2229532 C6.52718516,17.9457722 6.52718516,27.2242951 12.3532001,32.9471142 C18.1792151,38.6699332 27.6250517,38.6699332 33.4510667,32.9471142 C39.2770817,27.2242951 39.2770817,17.9457722 33.4510667,12.2229532 C27.6250517,6.50013419 18.1792151,6.50013419 12.3532001,12.2229532 Z"
+                  fill="currentColor"
+                  fill-rule="nonzero"
+                  id="SearchOutline-形状"
+                />
+              </g>
+            </g>
+          </svg>
+        </div>
+        <div
+          class="adm-input adm-search-bar-input"
+        >
+          <input
+            class="adm-input-element"
+            enterkeyhint="search"
+            type="search"
+            value=""
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;

package/template/src/components/SearchBar/__tests__/index.test.tsx

@@ -0,0 +1,9 @@
+import { render } from '@testing-library/react';
+import SearchBar from '..';
+
+describe('SearchBar', () => {
+  it('Render correctly', () => {
+    const { container } = render(<SearchBar />);
+    expect(container).toMatchSnapshot();
+  });
+});

package/template/src/components/SearchBar/index.less

@@ -0,0 +1,3 @@
+.search-bar-wrap {
+  padding: 24px;
+}

package/template/src/components/SearchBar/index.tsx

@@ -0,0 +1,8 @@
+import { SearchBar } from 'antd-mobile';
+import './index.less';
+
+export default () => (
+  <div className="search-bar-wrap">
+    <SearchBar />
+  </div>
+);

package/template/src/global.css

@@ -0,0 +1,9 @@
+html,
+body,
+#root {
+  height: 100%;
+}
+
+body {
+  margin: 0;
+}

package/template/src/models/index.ts

@@ -0,0 +1,34 @@
+import { query } from '@/services/api';
+import type { DvaModel } from 'alita';
+
+export interface IndexModelState {
+  name: string;
+}
+
+const IndexModel: DvaModel<IndexModelState> = {
+  namespace: 'index',
+
+  state: {
+    name: 'Hello Alita',
+  },
+
+  effects: {
+    *query({ payload }, { call, put }) {
+      const data = yield call(query, payload);
+      yield put({
+        type: 'save',
+        payload: { name: data.text },
+      });
+    },
+  },
+  reducers: {
+    save(state, action) {
+      return {
+        ...state,
+        ...action.payload,
+      };
+    },
+  },
+};
+
+export default IndexModel;

package/template/src/models/todo.ts

@@ -0,0 +1,9 @@
+import { useState } from 'react';
+
+export default function () {
+  const [todos, setTodos] = useState(['foo', 'bar']);
+  return {
+    todos,
+    setTodos,
+  };
+}

package/template/src/pages/index/index.css

@@ -0,0 +1,20 @@
+.normal {
+  font-family: Georgia, sans-serif;
+  margin-top: 4em;
+  text-align: center;
+}
+
+.welcome {
+  height: 512px;
+  background: url('~@/assets/yay.jpg') no-repeat center 0;
+  background-size: 512px 512px;
+}
+
+.description {
+  font-size: 35px;
+  margin: 18px 0 0;
+}
+
+.description code {
+  background: #f7f7f7;
+}

package/template/src/pages/index/index.tsx

@@ -0,0 +1,24 @@
+import { useNavigate } from 'alita';
+import { Button } from 'antd-mobile';
+import styles from './index.css';
+
+export default function ({}) {
+  const navigate = useNavigate();
+  return (
+    <div className={styles.normal}>
+      <div className={styles.welcome} />
+      <p className={styles.description}>
+        To get started, edit <code>src/pages/index.js</code> and save to reload.
+      </p>
+      <Button
+        size="large"
+        color="primary"
+        fill="solid"
+        block
+        onClick={() => navigate('/list')}
+      >
+        Go to List
+      </Button>
+    </div>
+  );
+}

package/template/src/pages/list/index.less

@@ -0,0 +1,4 @@
+.list-icon {
+  width: 150px !important;
+  height: 150px !important;
+}

package/template/src/pages/list/index.tsx

@@ -0,0 +1,65 @@
+import { Content, Header, Page } from '@alita/flow';
+import { useNavigate } from 'alita';
+import { InfiniteScroll, List } from 'antd-mobile';
+import { useEffect, useState } from 'react';
+import SearchBar from '../../components/SearchBar';
+
+let count = 0;
+
+async function mockRequest() {
+  console.log('mockRequest');
+  if (count >= 5) {
+    return [];
+  }
+  count++;
+  return [
+    'A',
+    'B',
+    'C',
+    'D',
+    'E',
+    'F',
+    'G',
+    'H',
+    'I',
+    'J',
+    'K',
+    'L',
+    'M',
+    'N',
+    'O',
+    'P',
+    'Q',
+  ];
+}
+
+export default () => {
+  const [data, setData] = useState<string[]>([]);
+  const [hasMore, setHasMore] = useState(true);
+  const navigate = useNavigate();
+  async function loadMore() {
+    const append = await mockRequest();
+    setData((val) => [...val, ...append]);
+    setHasMore(append.length > 0);
+  }
+  useEffect(() => {
+    loadMore();
+  }, []);
+  return (
+    <Page>
+      <Header>
+        <SearchBar placeholder="请输入内容" />
+      </Header>
+      <Content>
+        <List>
+          {data.map((item, index) => (
+            <List.Item key={index} onClick={() => navigate(-1)}>
+              {item}
+            </List.Item>
+          ))}
+        </List>
+        <InfiniteScroll loadMore={loadMore} hasMore={hasMore} />
+      </Content>
+    </Page>
+  );
+};

package/template/src/services/api.ts

@@ -0,0 +1,5 @@
+import { request } from 'alita';
+
+export async function query(): Promise<any> {
+  return request('/api/hello', { method: 'POST' });
+}

package/template/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "./src/.umi/tsconfig.json"
+}

package/template/typings.d.ts

@@ -0,0 +1 @@
+import 'alita/typings';