create-umi 4.0.0-rc.9 → 4.0.0

package/dist/cli.js

@@ -1,8 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const utils_1 = require("@umijs/utils");
-const fs_1 = require("fs");
-const path_1 = require("path");
 const args = (0, utils_1.yParser)(process.argv.slice(2), {
     alias: {
         version: ['v'],
@@ -12,9 +10,7 @@ const args = (0, utils_1.yParser)(process.argv.slice(2), {
 });
 if (args.version && !args._[0]) {
     args._[0] = 'version';
-    const local = (0, fs_1.existsSync)((0, path_1.join)(__dirname, '../.local'))
-        ? utils_1.chalk.cyan('@local')
-        : '';
+    const local = (0, utils_1.isLocalDev)() ? utils_1.chalk.cyan('@local') : '';
     const { name, version } = require('../package.json');
     console.log(`${name}@${version}${local}`);
 }

package/dist/index.js

@@ -1,13 +1,4 @@
 "use strict";
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 const utils_1 = require("@umijs/utils");
 const path_1 = require("path");
@@ -21,13 +12,25 @@ const testData = {
     npmClient: 'pnpm',
     registry: 'https://registry.npmjs.org/',
 };
-exports.default = ({ cwd, args, }) => __awaiter(void 0, void 0, void 0, function* () {
-    const [_, name] = args._;
+exports.default = async ({ cwd, args, }) => {
+    const [name] = args._;
     let npmClient = 'pnpm';
     let registry = 'https://registry.npmjs.org/';
+    let appTemplate = 'app';
     // test ignore prompts
     if (!args.default) {
-        const response = yield (0, utils_1.prompts)([
+        const response = await (0, utils_1.prompts)([
+            {
+                type: 'select',
+                name: 'appTemplate',
+                message: 'Pick Umi App Template',
+                choices: [
+                    { title: 'Simple App', value: 'app' },
+                    { title: 'Ant Design Pro', value: 'max' },
+                    { title: 'Vue Simple App', value: 'vue-app' },
+                ],
+                initial: 0,
+            },
             {
                 type: 'select',
                 name: 'npmClient',
@@ -54,9 +57,14 @@ exports.default = ({ cwd, args, }) => __awaiter(void 0, void 0, void 0, function
                     { title: 'taobao', value: 'https://registry.npmmirror.com' },
                 ],
             },
-        ]);
+        ], {
+            onCancel() {
+                process.exit(1);
+            },
+        });
         npmClient = response.npmClient;
         registry = response.registry;
+        appTemplate = response.appTemplate;
     }
     const pluginPrompts = [
         {
@@ -86,21 +94,24 @@ exports.default = ({ cwd, args, }) => __awaiter(void 0, void 0, void 0, function
             message: `Which organization is your plugin stored under github?`,
         },
     ];
+    const target = name ? (0, path_1.join)(cwd, name) : cwd;
+    const templateName = args.plugin ? 'plugin' : appTemplate;
+    const version = require('../package').version;
     const generator = new utils_1.BaseGenerator({
-        path: (0, path_1.join)(__dirname, '..', 'templates', args.plugin ? 'plugin' : 'app'),
-        target: name ? (0, path_1.join)(cwd, name) : cwd,
+        path: (0, path_1.join)(__dirname, '..', 'templates', templateName),
+        target,
         data: args.default
             ? testData
             : {
-                version: require('../package').version,
+                version: version.includes('-canary.') ? version : `^${version}`,
                 npmClient,
                 registry,
             },
         questions: args.default ? [] : args.plugin ? pluginPrompts : [],
     });
-    yield generator.run();
+    await generator.run();
     if (!args.default) {
         // install
-        (0, utils_1.installWithNpmClient)({ npmClient });
+        (0, utils_1.installWithNpmClient)({ npmClient, cwd: target });
     }
-});
+};

package/dist/index.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/index.test.js

@@ -0,0 +1,44 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const utils_1 = require("@umijs/utils");
+const fs_1 = require("fs");
+const path_1 = require("path");
+const index_1 = __importDefault(require("./index"));
+const fixtures = (0, path_1.join)(__dirname, '..', 'fixtures');
+let oldCwd = process.cwd();
+beforeEach(() => {
+    oldCwd = process.cwd();
+});
+afterEach(() => {
+    process.chdir(oldCwd);
+});
+test('generate app', async () => {
+    const cwd = (0, path_1.join)(fixtures, 'app');
+    await (0, index_1.default)({
+        cwd,
+        args: {
+            _: [],
+            $0: '',
+            default: true,
+        },
+    });
+    expect((0, fs_1.existsSync)((0, path_1.join)(cwd, 'src', 'pages', 'index.tsx'))).toEqual(true);
+    utils_1.rimraf.sync(cwd);
+});
+test('generate plugin', async () => {
+    const cwd = (0, path_1.join)(fixtures, 'plugin');
+    await (0, index_1.default)({
+        cwd,
+        args: {
+            plugin: true,
+            _: [],
+            $0: '',
+            default: true,
+        },
+    });
+    expect((0, fs_1.existsSync)((0, path_1.join)(cwd, 'src', 'index.ts'))).toEqual(true);
+    utils_1.rimraf.sync(cwd);
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-umi",
-  "version": "4.0.0-rc.9",
+  "version": "4.0.0",
   "description": "create-umi",
   "homepage": "https://github.com/umijs/umi-next/tree/master/packages/create-umi#readme",
   "bugs": "https://github.com/umijs/umi-next/issues",
@@ -20,12 +20,12 @@
   ],
   "scripts": {
     "build": "pnpm tsc",
-    "build:deps": "pnpm esno ../../scripts/bundleDeps.ts",
+    "build:deps": "umi-scripts bundleDeps",
     "dev": "pnpm build -- --watch",
-    "test": "jest -c ../../jest.turbo.config.ts"
+    "test": "umi-scripts jest-turbo"
   },
   "dependencies": {
-    "@umijs/utils": "4.0.0-rc.9"
+    "@umijs/utils": "4.0.0"
   },
   "publishConfig": {
     "access": "public"

package/templates/app/.gitignore.tpl

@@ -6,5 +6,6 @@
 /src/.umi-production
 /.umi
 /.umi-production
+/.umi-test
 /dist
 /.mfsu

package/templates/app/package.json.tpl

@@ -7,11 +7,11 @@
     "start": "npm run dev"
   },
   "dependencies": {
-    "umi": "^{{{ version }}}"
+    "umi": "{{{ version }}}"
   },
   "devDependencies": {
-    "@types/react": "^17.0.0",
-    "@types/react-dom": "^17.0.0",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
     "typescript": "^4.1.2"
   }
 }

package/templates/app/{pages → src/pages}/index.tsx

@@ -1,11 +1,12 @@
 import React from 'react';
+import yayJpg from '../assets/yay.jpg';
 
 export default function HomePage() {
   return (
     <div>
       <h2>Yay! Welcome to umi!</h2>
       <p>
-        <img src={require('../assets/yay.jpg')} width="388" />
+        <img src={yayJpg} width="388" />
       </p>
       <p>
         To get started, edit <code>pages/index.tsx</code> and save to reload.

package/templates/app/tsconfig.json.tpl

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

package/templates/app/typings.d.ts

@@ -1,3 +1 @@
-declare module '*.less';
-declare module '*.css';
-declare module '*.png';
+import 'umi/typings';

package/templates/max/.gitignore.tpl

@@ -0,0 +1,11 @@
+/node_modules
+/.env.local
+/.umirc.local.ts
+/config/config.local.ts
+/src/.umi
+/src/.umi-production
+/.umi
+/.umi-production
+/.umi-test
+/dist
+/.mfsu

package/templates/max/.npmrc.tpl

@@ -0,0 +1 @@
+registry={{{ registry }}}

package/templates/max/.prettierignore.tpl

@@ -0,0 +1,3 @@
+node_modules
+.umi
+.umi-production

package/templates/max/.prettierrc.tpl

@@ -0,0 +1,8 @@
+{
+  "printWidth": 80,
+  "singleQuote": true,
+  "trailingComma": "all",
+  "proseWrap": "never",
+  "overrides": [{ "files": ".prettierrc", "options": { "parser": "json" } }],
+  "plugins": ["prettier-plugin-organize-imports", "prettier-plugin-packagejson"]
+}

package/templates/max/.umirc.ts.tpl

@@ -0,0 +1,35 @@
+import { defineConfig } from '@umijs/max';
+
+export default defineConfig({
+  antd: {},
+  access: {},
+  model: {},
+  initialState: {},
+  request: {},
+  layout: {
+    title: '@umijs/max',
+  },
+  routes: [
+    {
+      path: '/',
+      redirect: '/home',
+    },
+    {
+      name: '首页',
+      path: '/home',
+      component: './Home',
+    },
+    {
+      name: '权限演示',
+      path: '/access',
+      component: './Access',
+    },
+    {
+        name: ' CRUD 示例',
+        path: '/table',
+        component: './Table',
+    },
+  ],
+  npmClient: '{{{ npmClient }}}',
+});
+

package/templates/max/README.md

@@ -0,0 +1,3 @@
+# README
+
+`@umijs/max` 模板项目，更多功能参考 [Umi Max 简介](https://next.umijs.org/zh-CN/docs/max/introduce)

package/templates/max/mock/userAPI.ts

@@ -0,0 +1,20 @@
+const users = [
+  { name: 'Umi', nickName: 'U', gender: 'MALE' },
+  { name: 'Fish', nickName: 'B', gender: 'FEMALE' },
+];
+
+export default {
+  'GET /api/v1/queryUserList': (req: any, res: any) => {
+    res.json({
+      success: true,
+      data: { list: users },
+      errorCode: 0,
+    });
+  },
+  'PUT /api/v1/user/': (req: any, res: any) => {
+    res.json({
+      success: true,
+      errorCode: 0,
+    });
+  },
+};

package/templates/max/package.json.tpl

@@ -0,0 +1,23 @@
+{
+  "private": true,
+  "scripts": {
+    "dev": "max dev",
+    "build": "max build",
+    "postinstall": "max setup",
+    "start": "npm run dev"
+  },
+  "dependencies": {
+    "@ant-design/icons": "^4.7.0",
+    "@ant-design/pro-components": "^1.1.3",
+    "@umijs/max": "{{{ version }}}",
+    "antd": "^4.20.7"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "typescript": "^4.1.2",
+    "prettier": "^2",
+    "prettier-plugin-organize-imports": "^2",
+    "prettier-plugin-packagejson": "^2"
+  }
+}

package/templates/max/src/access.ts

@@ -0,0 +1,10 @@
+export default (initialState: API.UserInfo) => {
+  // 在这里按照初始化数据定义项目中的权限，统一管理
+  // 参考文档 https://next.umijs.org/docs/max/access
+  const canSeeAdmin = !!(
+    initialState && initialState.name !== 'dontHaveAccess'
+  );
+  return {
+    canSeeAdmin,
+  };
+};

package/templates/max/src/app.ts

@@ -0,0 +1,16 @@
+// 运行时配置
+
+// 全局初始化数据配置，用于 Layout 用户信息和权限初始化
+// 更多信息见文档：https://next.umijs.org/docs/api/runtime-config#getinitialstate
+export async function getInitialState(): Promise<{ name: string }> {
+  return { name: '@umijs/max' };
+}
+
+export const layout = () => {
+  return {
+    logo: 'https://img.alicdn.com/tfs/TB1YHEpwUT1gK0jSZFhXXaAtVXa-28-27.svg',
+    menu: {
+      locale: false,
+    },
+  };
+};

package/templates/max/src/components/Guide/Guide.less

@@ -0,0 +1,4 @@
+.title {
+  margin: 0 auto;
+  font-weight: 200;
+}

package/templates/max/src/components/Guide/Guide.tsx

@@ -0,0 +1,23 @@
+import { Layout, Row, Typography } from 'antd';
+import React from 'react';
+import styles from './Guide.less';
+
+interface Props {
+  name: string;
+}
+
+// 脚手架示例组件
+const Guide: React.FC<Props> = (props) => {
+  const { name } = props;
+  return (
+    <Layout>
+      <Row>
+        <Typography.Title level={3} className={styles.title}>
+          欢迎使用 <strong>{name}</strong> ！
+        </Typography.Title>
+      </Row>
+    </Layout>
+  );
+};
+
+export default Guide;

package/templates/max/src/components/Guide/index.ts

@@ -0,0 +1,2 @@
+import Guide from './Guide';
+export default Guide;

package/templates/max/src/constants/index.ts

@@ -0,0 +1 @@
+export const DEFAULT_NAME = 'Umi Max';

package/templates/max/src/models/global.ts

@@ -0,0 +1,13 @@
+// 全局共享数据示例
+import { DEFAULT_NAME } from '@/constants';
+import { useState } from 'react';
+
+const useUser = () => {
+  const [name, setName] = useState<string>(DEFAULT_NAME);
+  return {
+    name,
+    setName,
+  };
+};
+
+export default useUser;

package/templates/max/src/pages/Access/index.tsx

@@ -0,0 +1,20 @@
+import { PageContainer } from '@ant-design/pro-components';
+import { Access, useAccess } from '@umijs/max';
+import { Button } from 'antd';
+import React from 'react';
+
+export default () => {
+  const access = useAccess();
+  return (
+    <PageContainer
+      ghost
+      header={{
+        title: '权限示例',
+      }}
+    >
+      <Access accessible={access.canSeeAdmin}>
+        <Button>只有 Admin 可以看到这个按钮</Button>
+      </Access>
+    </PageContainer>
+  );
+};

package/templates/max/src/pages/Home/index.less

@@ -0,0 +1,3 @@
+.container {
+  padding-top: 80px;
+}

package/templates/max/src/pages/Home/index.tsx

@@ -0,0 +1,17 @@
+import Guide from '@/components/Guide';
+import { trim } from '@/utils/format';
+import { PageContainer } from '@ant-design/pro-components';
+import { useModel } from '@umijs/max';
+import React from 'react';
+import styles from './index.less';
+
+export default () => {
+  const { name } = useModel('global');
+  return (
+    <PageContainer ghost>
+      <div className={styles.container}>
+        <Guide name={trim(name)} />
+      </div>
+    </PageContainer>
+  );
+};

package/templates/max/src/pages/Table/components/CreateForm.tsx

@@ -0,0 +1,26 @@
+import { Modal } from 'antd';
+import React, { PropsWithChildren } from 'react';
+
+interface CreateFormProps {
+  modalVisible: boolean;
+  onCancel: () => void;
+}
+
+const CreateForm: React.FC<PropsWithChildren<CreateFormProps>> = (props) => {
+  const { modalVisible, onCancel } = props;
+
+  return (
+    <Modal
+      destroyOnClose
+      title="新建"
+      width={420}
+      visible={modalVisible}
+      onCancel={() => onCancel()}
+      footer={null}
+    >
+      {props.children}
+    </Modal>
+  );
+};
+
+export default CreateForm;

package/templates/max/src/pages/Table/components/UpdateForm.tsx

@@ -0,0 +1,138 @@
+import {
+  ProFormDateTimePicker,
+  ProFormRadio,
+  ProFormSelect,
+  ProFormText,
+  ProFormTextArea,
+  StepsForm,
+} from '@ant-design/pro-components';
+import { Modal } from 'antd';
+import React from 'react';
+
+export interface FormValueType extends Partial<API.UserInfo> {
+  target?: string;
+  template?: string;
+  type?: string;
+  time?: string;
+  frequency?: string;
+}
+
+export interface UpdateFormProps {
+  onCancel: (flag?: boolean, formVals?: FormValueType) => void;
+  onSubmit: (values: FormValueType) => Promise<void>;
+  updateModalVisible: boolean;
+  values: Partial<API.UserInfo>;
+}
+
+const UpdateForm: React.FC<UpdateFormProps> = (props) => (
+  <StepsForm
+    stepsProps={{
+      size: 'small',
+    }}
+    stepsFormRender={(dom, submitter) => {
+      return (
+        <Modal
+          width={640}
+          bodyStyle={{ padding: '32px 40px 48px' }}
+          destroyOnClose
+          title="规则配置"
+          visible={props.updateModalVisible}
+          footer={submitter}
+          onCancel={() => props.onCancel()}
+        >
+          {dom}
+        </Modal>
+      );
+    }}
+    onFinish={props.onSubmit}
+  >
+    <StepsForm.StepForm
+      initialValues={{
+        name: props.values.name,
+        nickName: props.values.nickName,
+      }}
+      title="基本信息"
+    >
+      <ProFormText
+        width="md"
+        name="name"
+        label="规则名称"
+        rules={[{ required: true, message: '请输入规则名称！' }]}
+      />
+      <ProFormTextArea
+        name="desc"
+        width="md"
+        label="规则描述"
+        placeholder="请输入至少五个字符"
+        rules={[
+          { required: true, message: '请输入至少五个字符的规则描述！', min: 5 },
+        ]}
+      />
+    </StepsForm.StepForm>
+    <StepsForm.StepForm
+      initialValues={{
+        target: '0',
+        template: '0',
+      }}
+      title="配置规则属性"
+    >
+      <ProFormSelect
+        width="md"
+        name="target"
+        label="监控对象"
+        valueEnum={{
+          0: '表一',
+          1: '表二',
+        }}
+      />
+      <ProFormSelect
+        width="md"
+        name="template"
+        label="规则模板"
+        valueEnum={{
+          0: '规则模板一',
+          1: '规则模板二',
+        }}
+      />
+      <ProFormRadio.Group
+        name="type"
+        width="md"
+        label="规则类型"
+        options={[
+          {
+            value: '0',
+            label: '强',
+          },
+          {
+            value: '1',
+            label: '弱',
+          },
+        ]}
+      />
+    </StepsForm.StepForm>
+    <StepsForm.StepForm
+      initialValues={{
+        type: '1',
+        frequency: 'month',
+      }}
+      title="设定调度周期"
+    >
+      <ProFormDateTimePicker
+        name="time"
+        label="开始时间"
+        rules={[{ required: true, message: '请选择开始时间！' }]}
+      />
+      <ProFormSelect
+        name="frequency"
+        label="监控对象"
+        width="xs"
+        valueEnum={{
+          month: '月',
+          week: '周',
+        }}
+      />
+    </StepsForm.StepForm>
+  </StepsForm>
+);
+
+export default UpdateForm;

package/templates/max/src/pages/Table/index.tsx

@@ -0,0 +1,270 @@
+import services from '@/services/demo';
+import {
+  ActionType,
+  FooterToolbar,
+  PageContainer,
+  ProDescriptions,
+  ProDescriptionsItemProps,
+  ProTable,
+} from '@ant-design/pro-components';
+import { Button, Divider, Drawer, message } from 'antd';
+import React, { useRef, useState } from 'react';
+import CreateForm from './components/CreateForm';
+import UpdateForm, { FormValueType } from './components/UpdateForm';
+
+const { addUser, queryUserList, deleteUser, modifyUser } =
+  services.UserController;
+
+/**
+ * 添加节点
+ * @param fields
+ */
+const handleAdd = async (fields: API.UserInfo) => {
+  const hide = message.loading('正在添加');
+  try {
+    await addUser({ ...fields });
+    hide();
+    message.success('添加成功');
+    return true;
+  } catch (error) {
+    hide();
+    message.error('添加失败请重试！');
+    return false;
+  }
+};
+
+/**
+ * 更新节点
+ * @param fields
+ */
+const handleUpdate = async (fields: FormValueType) => {
+  const hide = message.loading('正在配置');
+  try {
+    await modifyUser(
+      {
+        userId: fields.id || '',
+      },
+      {
+        name: fields.name || '',
+        nickName: fields.nickName || '',
+        email: fields.email || '',
+      },
+    );
+    hide();
+
+    message.success('配置成功');
+    return true;
+  } catch (error) {
+    hide();
+    message.error('配置失败请重试！');
+    return false;
+  }
+};
+
+/**
+ *  删除节点
+ * @param selectedRows
+ */
+const handleRemove = async (selectedRows: API.UserInfo[]) => {
+  const hide = message.loading('正在删除');
+  if (!selectedRows) return true;
+  try {
+    await deleteUser({
+      userId: selectedRows.find((row) => row.id)?.id || '',
+    });
+    hide();
+    message.success('删除成功，即将刷新');
+    return true;
+  } catch (error) {
+    hide();
+    message.error('删除失败，请重试');
+    return false;
+  }
+};
+
+const TableList: React.FC<unknown> = () => {
+  const [createModalVisible, handleModalVisible] = useState<boolean>(false);
+  const [updateModalVisible, handleUpdateModalVisible] =
+    useState<boolean>(false);
+  const [stepFormValues, setStepFormValues] = useState({});
+  const actionRef = useRef<ActionType>();
+  const [row, setRow] = useState<API.UserInfo>();
+  const [selectedRowsState, setSelectedRows] = useState<API.UserInfo[]>([]);
+  const columns: ProDescriptionsItemProps<API.UserInfo>[] = [
+    {
+      title: '名称',
+      dataIndex: 'name',
+      tip: '名称是唯一的 key',
+      formItemProps: {
+        rules: [
+          {
+            required: true,
+            message: '名称为必填项',
+          },
+        ],
+      },
+    },
+    {
+      title: '昵称',
+      dataIndex: 'nickName',
+      valueType: 'text',
+    },
+    {
+      title: '性别',
+      dataIndex: 'gender',
+      hideInForm: true,
+      valueEnum: {
+        0: { text: '男', status: 'MALE' },
+        1: { text: '女', status: 'FEMALE' },
+      },
+    },
+    {
+      title: '操作',
+      dataIndex: 'option',
+      valueType: 'option',
+      render: (_, record) => (
+        <>
+          <a
+            onClick={() => {
+              handleUpdateModalVisible(true);
+              setStepFormValues(record);
+            }}
+          >
+            配置
+          </a>
+          <Divider type="vertical" />
+          <a href="">订阅警报</a>
+        </>
+      ),
+    },
+  ];
+
+  return (
+    <PageContainer
+      header={{
+        title: 'CRUD 示例',
+      }}
+    >
+      <ProTable<API.UserInfo>
+        headerTitle="查询表格"
+        actionRef={actionRef}
+        rowKey="id"
+        search={{
+          labelWidth: 120,
+        }}
+        toolBarRender={() => [
+          <Button
+            key="1"
+            type="primary"
+            onClick={() => handleModalVisible(true)}
+          >
+            新建
+          </Button>,
+        ]}
+        request={async (params, sorter, filter) => {
+          const { data, success } = await queryUserList({
+            ...params,
+            // FIXME: remove @ts-ignore
+            // @ts-ignore
+            sorter,
+            filter,
+          });
+          return {
+            data: data?.list || [],
+            success,
+          };
+        }}
+        columns={columns}
+        rowSelection={{
+          onChange: (_, selectedRows) => setSelectedRows(selectedRows),
+        }}
+      />
+      {selectedRowsState?.length > 0 && (
+        <FooterToolbar
+          extra={
+            <div>
+              已选择{' '}
+              <a style={{ fontWeight: 600 }}>{selectedRowsState.length}</a>{' '}
+              项&nbsp;&nbsp;
+            </div>
+          }
+        >
+          <Button
+            onClick={async () => {
+              await handleRemove(selectedRowsState);
+              setSelectedRows([]);
+              actionRef.current?.reloadAndRest?.();
+            }}
+          >
+            批量删除
+          </Button>
+          <Button type="primary">批量审批</Button>
+        </FooterToolbar>
+      )}
+      <CreateForm
+        onCancel={() => handleModalVisible(false)}
+        modalVisible={createModalVisible}
+      >
+        <ProTable<API.UserInfo, API.UserInfo>
+          onSubmit={async (value) => {
+            const success = await handleAdd(value);
+            if (success) {
+              handleModalVisible(false);
+              if (actionRef.current) {
+                actionRef.current.reload();
+              }
+            }
+          }}
+          rowKey="id"
+          type="form"
+          columns={columns}
+        />
+      </CreateForm>
+      {stepFormValues && Object.keys(stepFormValues).length ? (
+        <UpdateForm
+          onSubmit={async (value) => {
+            const success = await handleUpdate(value);
+            if (success) {
+              handleUpdateModalVisible(false);
+              setStepFormValues({});
+              if (actionRef.current) {
+                actionRef.current.reload();
+              }
+            }
+          }}
+          onCancel={() => {
+            handleUpdateModalVisible(false);
+            setStepFormValues({});
+          }}
+          updateModalVisible={updateModalVisible}
+          values={stepFormValues}
+        />
+      ) : null}
+
+      <Drawer
+        width={600}
+        visible={!!row}
+        onClose={() => {
+          setRow(undefined);
+        }}
+        closable={false}
+      >
+        {row?.name && (
+          <ProDescriptions<API.UserInfo>
+            column={2}
+            title={row?.name}
+            request={async () => ({
+              data: row || {},
+            })}
+            params={{
+              id: row?.name,
+            }}
+            columns={columns}
+          />
+        )}
+      </Drawer>
+    </PageContainer>
+  );
+};
+
+export default TableList;

package/templates/max/src/services/demo/UserController.ts

@@ -0,0 +1,96 @@
+/* eslint-disable */
+// 该文件由 OneAPI 自动生成，请勿手动修改！
+import { request } from '@umijs/max';
+
+/** 此处后端没有提供注释 GET /api/v1/queryUserList */
+export async function queryUserList(
+  params: {
+    // query
+    /** keyword */
+    keyword?: string;
+    /** current */
+    current?: number;
+    /** pageSize */
+    pageSize?: number;
+  },
+  options?: { [key: string]: any },
+) {
+  return request<API.Result_PageInfo_UserInfo__>('/api/v1/queryUserList', {
+    method: 'GET',
+    params: {
+      ...params,
+    },
+    ...(options || {}),
+  });
+}
+
+/** 此处后端没有提供注释 POST /api/v1/user */
+export async function addUser(
+  body?: API.UserInfoVO,
+  options?: { [key: string]: any },
+) {
+  return request<API.Result_UserInfo_>('/api/v1/user', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    data: body,
+    ...(options || {}),
+  });
+}
+
+/** 此处后端没有提供注释 GET /api/v1/user/${param0} */
+export async function getUserDetail(
+  params: {
+    // path
+    /** userId */
+    userId?: string;
+  },
+  options?: { [key: string]: any },
+) {
+  const { userId: param0 } = params;
+  return request<API.Result_UserInfo_>(`/api/v1/user/${param0}`, {
+    method: 'GET',
+    params: { ...params },
+    ...(options || {}),
+  });
+}
+
+/** 此处后端没有提供注释 PUT /api/v1/user/${param0} */
+export async function modifyUser(
+  params: {
+    // path
+    /** userId */
+    userId?: string;
+  },
+  body?: API.UserInfoVO,
+  options?: { [key: string]: any },
+) {
+  const { userId: param0 } = params;
+  return request<API.Result_UserInfo_>(`/api/v1/user/${param0}`, {
+    method: 'PUT',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    params: { ...params },
+    data: body,
+    ...(options || {}),
+  });
+}
+
+/** 此处后端没有提供注释 DELETE /api/v1/user/${param0} */
+export async function deleteUser(
+  params: {
+    // path
+    /** userId */
+    userId?: string;
+  },
+  options?: { [key: string]: any },
+) {
+  const { userId: param0 } = params;
+  return request<API.Result_string_>(`/api/v1/user/${param0}`, {
+    method: 'DELETE',
+    params: { ...params },
+    ...(options || {}),
+  });
+}

package/templates/max/src/services/demo/index.ts

@@ -0,0 +1,7 @@
+/* eslint-disable */
+// 该文件由 OneAPI 自动生成，请勿手动修改！
+
+import * as UserController from './UserController';
+export default {
+  UserController,
+};

package/templates/max/src/services/demo/typings.d.ts

@@ -0,0 +1,68 @@
+/* eslint-disable */
+// 该文件由 OneAPI 自动生成，请勿手动修改！
+
+declare namespace API {
+  interface PageInfo {
+    /** 
+1 */
+    current?: number;
+    pageSize?: number;
+    total?: number;
+    list?: Array<Record<string, any>>;
+  }
+
+  interface PageInfo_UserInfo_ {
+    /** 
+1 */
+    current?: number;
+    pageSize?: number;
+    total?: number;
+    list?: Array<UserInfo>;
+  }
+
+  interface Result {
+    success?: boolean;
+    errorMessage?: string;
+    data?: Record<string, any>;
+  }
+
+  interface Result_PageInfo_UserInfo__ {
+    success?: boolean;
+    errorMessage?: string;
+    data?: PageInfo_UserInfo_;
+  }
+
+  interface Result_UserInfo_ {
+    success?: boolean;
+    errorMessage?: string;
+    data?: UserInfo;
+  }
+
+  interface Result_string_ {
+    success?: boolean;
+    errorMessage?: string;
+    data?: string;
+  }
+
+  type UserGenderEnum = 'MALE' | 'FEMALE';
+
+  interface UserInfo {
+    id?: string;
+    name?: string;
+    /** nick */
+    nickName?: string;
+    /** email */
+    email?: string;
+    gender?: UserGenderEnum;
+  }
+
+  interface UserInfoVO {
+    name?: string;
+    /** nick */
+    nickName?: string;
+    /** email */
+    email?: string;
+  }
+
+  type definitions_0 = null;
+}

package/templates/max/src/utils/format.ts

@@ -0,0 +1,4 @@
+// 示例方法，没有实际意义
+export function trim(str: string) {
+  return str.trim();
+}

package/templates/max/tsconfig.json

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

package/templates/max/typings.d.ts

@@ -0,0 +1 @@
+import '@umijs/max/typings';

package/templates/vue-app/.gitignore.tpl

@@ -0,0 +1,11 @@
+/node_modules
+/.env.local
+/.umirc.local.ts
+/config/config.local.ts
+/src/.umi
+/src/.umi-production
+/.umi
+/.umi-production
+/.umi-test
+/dist
+/.mfsu

package/templates/vue-app/.npmrc.tpl

@@ -0,0 +1 @@
+registry={{{ registry }}}

package/templates/vue-app/.umirc.ts.tpl

@@ -0,0 +1,4 @@
+export default {
+  npmClient: '{{{ npmClient }}}',
+  presets: [require.resolve('@umijs/preset-vue')],
+};

package/templates/vue-app/package.json.tpl

@@ -0,0 +1,17 @@
+{
+  "private": true,
+  "scripts": {
+    "dev": "umi dev",
+    "build": "umi build",
+    "postinstall": "umi setup",
+    "start": "npm run dev"
+  },
+  "dependencies": {
+    "vue": "^3.2.36",
+    "umi": "{{{ version }}}"
+  },
+  "devDependencies": {
+    "typescript": "^4.1.2",
+    "@umijs/preset-vue": "{{{ version }}}"
+  }
+}

package/templates/vue-app/src/layouts/index.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="navs">
+    <ul>
+      <li>
+        <router-link to="/">Home</router-link>
+      </li>
+      <li>
+        <router-link to="/docs">Docs</router-link>
+      </li>
+      <li>
+        <a href="https://github.com/umijs/umi">Github</a>
+      </li>
+    </ul>
+    <router-view></router-view>
+  </div>
+</template>
+<style lang="less">
+  .navs {
+    ul {
+      padding: 0;
+      list-style: none;
+      display: flex;
+    }
+    li {
+      margin-right: 1em;
+    }
+  }
+</style>

package/templates/vue-app/src/pages/docs.vue

@@ -0,0 +1,5 @@
+<template>
+ <div>
+    <p>This is umi docs.</p>
+  </div>
+</template>

package/templates/vue-app/src/pages/index.vue

@@ -0,0 +1,11 @@
+<template>
+  <div>
+    <h2>Yay! Welcome to umi ❤️ vue!</h2>
+    <p>
+      <img src="../assets/yay.jpg" width="388" />
+    </p>
+    <p>
+      To get started, edit <code>pages/index.vue</code> and save to reload.
+    </p>
+  </div>
+</template>

package/templates/vue-app/tsconfig.json.tpl

@@ -0,0 +1,6 @@
+{
+  "extends": "./src/.umi/tsconfig.json",
+  "compilerOptions": {
+    "jsx": "preserve"
+  }
+}

package/templates/vue-app/typings.d.ts

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

package/templates/app/tsconfig.json

@@ -1,18 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "esnext",
-    "module": "esnext",
-    "moduleResolution": "node",
-    "importHelpers": true,
-    "jsx": "react",
-    "esModuleInterop": true,
-    "sourceMap": true,
-    "baseUrl": ".",
-    "strict": true,
-    "paths": {
-      "@/*": ["*"],
-      "@@/*": [".umi/*"]
-    },
-    "allowSyntheticDefaultImports": true
-  }
-}