create-umi 4.0.0-beta.17 → 4.0.0-canary-20240513.3

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "create-umi",
-  "version": "4.0.0-beta.17",
+  "version": "4.0.0-canary-20240513.3",
   "description": "create-umi",
-  "homepage": "https://github.com/umijs/umi-next/tree/master/packages/create-umi#readme",
-  "bugs": "https://github.com/umijs/umi-next/issues",
+  "homepage": "https://github.com/umijs/umi/tree/master/packages/create-umi#readme",
+  "bugs": "https://github.com/umijs/umi/issues",
   "repository": {
     "type": "git",
-    "url": "https://github.com/umijs/umi-next"
+    "url": "https://github.com/umijs/umi"
   },
   "license": "MIT",
   "main": "dist/index.js",
@@ -18,18 +18,19 @@
     "dist",
     "templates"
   ],
-  "scripts": {
-    "build": "pnpm tsc",
-    "build:deps": "pnpm esno ../../scripts/bundleDeps.ts",
-    "dev": "pnpm build -- --watch"
-  },
   "dependencies": {
-    "@umijs/utils": "4.0.0-beta.17"
+    "@umijs/utils": "4.0.0-canary-20240513.3"
   },
   "publishConfig": {
     "access": "public"
   },
   "authors": [
     "chencheng <sorrycc@gmail.com> (https://github.com/sorrycc)"
-  ]
-}
+  ],
+  "scripts": {
+    "build": "umi-scripts father build",
+    "build:deps": "umi-scripts bundleDeps",
+    "dev": "umi-scripts father dev",
+    "test": "umi-scripts jest-turbo"
+  }
+}

package/templates/app/.gitignore.tpl

@@ -4,7 +4,6 @@
 /config/config.local.ts
 /src/.umi
 /src/.umi-production
-/.umi
-/.umi-production
+/src/.umi-test
 /dist
-/.mfsu
+.swc

package/templates/app/.npmrc.tpl

@@ -1 +1,2 @@
 registry={{{ registry }}}
+{{{ extraNpmrc }}}

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

@@ -1,3 +1,9 @@
-export default {
-  npmClient: '{{{ npmClient }}}'
-};
+import { defineConfig } from "umi";
+
+export default defineConfig({
+  routes: [
+    { path: "/", component: "index" },
+    { path: "/docs", component: "docs" },
+  ],
+  npmClient: '{{{ npmClient }}}',
+});

package/templates/app/package.json.tpl

@@ -1,17 +1,19 @@
 {
   "private": true,
+  "author": "{{{ author }}}",
   "scripts": {
     "dev": "umi dev",
     "build": "umi build",
     "postinstall": "umi setup",
+    "setup": "umi setup",
     "start": "npm run dev"
   },
   "dependencies": {
-    "umi": "^{{{ version }}}"
+    "umi": "{{{ version }}}"
   },
   "devDependencies": {
-    "@types/react": "^17.0.0",
-    "@types/react-dom": "^17.0.0",
-    "typescript": "^4.1.2"
+    "@types/react": "^18.0.33",
+    "@types/react-dom": "^18.0.11",
+    "typescript": "^5.0.3"
   }
 }

package/templates/app/{layouts → src/layouts}/index.tsx.tpl

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Link, Outlet } from 'umi';
 import styles from './index.less';
 

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

@@ -1,9 +1,9 @@
-import React from 'react';
-
-export default () => {
+const DocsPage = () => {
   return (
     <div>
       <p>This is umi docs.</p>
     </div>
   );
 };
+
+export default DocsPage;

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

@@ -1,11 +1,11 @@
-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/.eslintrc.js.tpl

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

package/templates/max/.gitignore.tpl

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

package/templates/max/.husky/commit-msg

@@ -0,0 +1 @@
+npx --no-install max verify-commit $1

package/templates/max/.husky/pre-commit

@@ -0,0 +1 @@
+npx --no-install lint-staged --quiet

package/templates/max/.lintstagedrc.tpl

@@ -0,0 +1,17 @@
+{
+  "*.{md,json}": [
+    "prettier --cache --write"
+  ],
+  "*.{js,jsx}": [
+    "max lint --fix --eslint-only",
+    "prettier --cache --write"
+  ],
+  "*.{css,less}": [
+    "max lint --fix --stylelint-only",
+    "prettier --cache --write"
+  ],
+  "*.ts?(x)": [
+    "max lint --fix --eslint-only",
+    "prettier --cache --parser=typescript --write"
+  ]
+}

package/templates/max/.npmrc.tpl

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

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/.stylelintrc.js.tpl

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

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://umijs.org/docs/max/introduce)

package/templates/max/mock/userAPI.ts

@@ -0,0 +1,20 @@
+const users = [
+  { id: 0, name: 'Umi', nickName: 'U', gender: 'MALE' },
+  { id: 1, 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,29 @@
+{
+  "private": true,
+  "author": "{{{ author }}}",
+  "scripts": {
+    "dev": "max dev",
+    "build": "max build",
+    "format": "prettier --cache --write .",{{#withHusky}}
+    "prepare": "husky",{{/withHusky}}
+    "postinstall": "max setup",
+    "setup": "max setup",
+    "start": "npm run dev"
+  },
+  "dependencies": {
+    "@ant-design/icons": "^5.0.1",
+    "@ant-design/pro-components": "^2.4.4",
+    "@umijs/max": "{{{ version }}}",
+    "antd": "^5.4.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.33",
+    "@types/react-dom": "^18.0.11",{{#withHusky}}
+    "husky": "^9",{{/withHusky}}
+    "lint-staged": "^13.2.0",
+    "prettier": "^2.8.7",
+    "prettier-plugin-organize-imports": "^3.2.2",
+    "prettier-plugin-packagejson": "^2.4.3",
+    "typescript": "^5.0.3"
+  }
+}

package/templates/max/src/access.ts

@@ -0,0 +1,10 @@
+export default (initialState: API.UserInfo) => {
+  // 在这里按照初始化数据定义项目中的权限，统一管理
+  // 参考文档 https://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://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,21 @@
+import { PageContainer } from '@ant-design/pro-components';
+import { Access, useAccess } from '@umijs/max';
+import { Button } from 'antd';
+
+const AccessPage: React.FC = () => {
+  const access = useAccess();
+  return (
+    <PageContainer
+      ghost
+      header={{
+        title: '权限示例',
+      }}
+    >
+      <Access accessible={access.canSeeAdmin}>
+        <Button>只有 Admin 可以看到这个按钮</Button>
+      </Access>
+    </PageContainer>
+  );
+};
+
+export default AccessPage;

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,18 @@
+import Guide from '@/components/Guide';
+import { trim } from '@/utils/format';
+import { PageContainer } from '@ant-design/pro-components';
+import { useModel } from '@umijs/max';
+import styles from './index.less';
+
+const HomePage: React.FC = () => {
+  const { name } = useModel('global');
+  return (
+    <PageContainer ghost>
+      <div className={styles.container}>
+        <Guide name={trim(name)} />
+      </div>
+    </PageContainer>
+  );
+};
+
+export default HomePage;

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}
+      open={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="规则配置"
+          open={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;