feat: first submit

.eslintrc.js

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

.gitignore

@@ -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

.husky/commit-msg

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

.husky/pre-commit

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

.lintstagedrc

@@ -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"
+  ]
+}

.npmrc

@@ -0,0 +1,2 @@
+registry=https://registry.npmmirror.com/
+

.prettierignore

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

.prettierrc

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

.stylelintrc.js

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

.umirc.ts

@@ -0,0 +1,29 @@
+import { defineConfig } from '@umijs/max';
+
+export default defineConfig({
+  antd: {},
+  access: {},
+  model: {},
+  initialState: {},
+  request: {},
+  layout: false,
+  dva: {},
+  valtio: {},
+  routes: [
+    {
+      path: '/',
+      id: 0,
+      component: '@/layouts/index',
+      redirect: '/home',
+      routes: [],
+    },
+  ],
+  proxy: {
+    '/api': {
+      target: 'http://127.0.0.1:3008',
+      changeOrigin: true,
+      pathRewrite: { '^/api': '' },
+    },
+  },
+  npmClient: 'pnpm',
+});

README.md

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

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.json

@@ -0,0 +1,33 @@
+{
+  "private": true,
+  "author": "guofei <guofeichu@gmail.com>",
+  "scripts": {
+    "build": "max build",
+    "dev": "max dev",
+    "format": "prettier --cache --write .",
+    "postinstall": "max setup",
+    "prepare": "husky",
+    "setup": "max setup",
+    "start": "npm run dev"
+  },
+  "dependencies": {
+    "@ant-design/icons": "^5.0.1",
+    "@ant-design/pro-components": "^2.7.9",
+    "@umijs/max": "^4.2.8",
+    "antd": "^5.18.0",
+    "antd-style": "^3.6.2",
+    "axios": "^1.7.2",
+    "qs": "^6.12.1"
+  },
+  "devDependencies": {
+    "@types/qs": "^6.9.15",
+    "@types/react": "^18.0.33",
+    "@types/react-dom": "^18.0.11",
+    "husky": "^9",
+    "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"
+  }
+}

src/access.ts

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

src/app.tsx

@@ -0,0 +1,28 @@
+import { routes as appRouters, loopMenuItem, type MenuItem } from './utils/router';
+
+export function patchClientRoutes({ routes }: any) {
+  const routerIndex = routes.findIndex((item: MenuItem) => item.path === '/');
+  const routers = loopMenuItem(appRouters);
+  routes[routerIndex]['routes'].push(...routers);
+}
+
+export function render(oldRender: any) {
+  oldRender();
+}
+
+// 全局初始化数据配置，用于 Layout 用户信息和权限初始化
+// 更多信息见文档：https://umijs.org/docs/api/runtime-config#getinitialstate
+export async function getInitialState(): Promise<{ name: string }> {
+  return {
+    name: 'xx',
+  };
+}
+
+// export const layout = () => {
+//   return {
+//     logo: 'https://img.alicdn.com/tfs/TB1YHEpwUT1gK0jSZFhXXaAtVXa-28-27.svg',
+//     menu: {
+//       locale: false,
+//     },
+//   };
+// };

src/components/Guide/Guide.less

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

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;

src/components/Guide/index.ts

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

src/constants/index.ts

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

src/layouts/index.tsx

@@ -0,0 +1,47 @@
+import { PageContainer, ProLayout } from '@ant-design/pro-components';
+import { Link, Outlet, useAppData, useRouteProps } from '@umijs/max';
+import { App, ConfigProvider } from 'antd';
+import zh_CN from 'antd/locale/zh_CN';
+import React from 'react';
+
+export const BasicLayout: React.FC = () => {
+  const { clientRoutes } = useAppData();
+  const { useContainer } = useRouteProps();
+
+  return (
+    <ConfigProvider locale={zh_CN}>
+      <App>
+        <ProLayout
+          title="Adseed 管理系统"
+          logo={null}
+          layout="mix"
+          avatarProps={{
+            src: 'https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png',
+            size: 'small',
+            title: 'xxx',
+          }}
+          route={clientRoutes.find((e) => e.path === '/')}
+          contentStyle={{
+            padding: '0',
+            overflow: 'hidden',
+          }}
+          menuItemRender={(item, dom) => (
+            <Link key={item.path} to={item.path ?? '/'}>
+              {dom}
+            </Link>
+          )}
+        >
+          {useContainer ? (
+            <PageContainer>
+              <Outlet />
+            </PageContainer>
+          ) : (
+            <Outlet />
+          )}
+        </ProLayout>
+      </App>
+    </ConfigProvider>
+  );
+};
+
+export default BasicLayout;

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;

src/models/user.ts

@@ -0,0 +1,53 @@
+import type { ConnectProps, Reducer } from '@umijs/max';
+
+type UserModelState = {
+  loading: boolean;
+  userId: string | null;
+  isLogin: boolean;
+  loginLoading: boolean;
+};
+
+type UserModelType = {
+  namespace: 'user';
+  state: UserModelState;
+  effects: {
+    // login: Effect;
+    // setLogin: Effect;
+    // setKey: Effect;
+  };
+  reducers: {
+    save: Reducer<UserModelState>;
+  };
+};
+
+export type UserConnectedProps = { user: UserModelState } & ConnectProps;
+
+const UserModel: UserModelType = {
+  namespace: 'user',
+  state: {
+    loading: false,
+    userId: null,
+    isLogin: false,
+    loginLoading: false,
+  },
+  effects: {
+    // 登录
+    // *login({ payload }, { call, put }) {},
+    // *setLogin({ payload }, { put }) {
+    //   yield put({ type: 'save', payload: { loading: payload } });
+    // },
+    // *setKey({ payload }, { put }) {
+    //   yield put({ type: 'save', payload: { ...payload } });
+    // },
+  },
+  reducers: {
+    save(state, action) {
+      return {
+        ...state,
+        ...action.payload,
+      };
+    },
+  },
+};
+
+export default UserModel;

src/pages/404.tsx

@@ -0,0 +1,3 @@
+export default () => {
+  return <>404</>;
+};

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;

src/pages/Home/index.less

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

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;

src/pages/System/SuperAdmin/AddSupderAdmin.tsx

@@ -0,0 +1,115 @@
+import { addSupderAdminAPI } from '@/services/system/supderAdmin';
+import { ActionType, ProFormRadio, ProFormText } from '@ant-design/pro-components';
+import { App, Form, Modal } from 'antd';
+import { useEffect, useState } from 'react';
+
+type PropTypes = {
+  visible: boolean;
+  onCancel: () => void;
+  tableRef: React.RefObject<ActionType | undefined>;
+  editRow: EditRow<SuperAdmin.SuperAdminItem>;
+};
+
+const AddSupderAdmin = (props: PropTypes) => {
+  const { message } = App.useApp();
+  const [form] = Form.useForm();
+
+  const { visible, editRow, tableRef, onCancel } = props;
+  const [title, setTitle] = useState<string>();
+
+  const handleOnCancel = () => {
+    form.resetFields();
+    onCancel();
+  };
+
+  const handleAddNewSuperAdmin = async () => {
+    const values = await form.validateFields();
+    const result = await addSupderAdminAPI(values);
+    if (result.code === 200) {
+      message.success(`套餐${editRow?.id ? '修改' : '添加'}成功`);
+      handleOnCancel();
+      tableRef.current?.reload();
+    }
+  };
+
+  useEffect(() => {
+    setTitle(editRow?.id ? '修改管理员' : '添加管理员');
+  });
+
+  useEffect(() => {
+    form.resetFields();
+    if (visible) {
+      if (editRow?.id) {
+        form.setFieldsValue(editRow);
+      }
+    }
+  }, [visible]);
+
+  return (
+    <Modal
+      destroyOnClose
+      forceRender
+      title={title}
+      width={800}
+      open={visible}
+      afterClose={handleOnCancel}
+      onCancel={handleOnCancel}
+      onOk={handleAddNewSuperAdmin}
+    >
+      <Form form={form} labelCol={{ span: 4 }}>
+        <ProFormText name="id" hidden></ProFormText>
+        <ProFormText
+          initialValue={''}
+          width="md"
+          name="userName"
+          required
+          label="管理员账户"
+          placeholder="请输入管理员账户"
+          rules={[{ required: true, message: '请输入管理员账户' }]}
+        />
+        <ProFormText initialValue={''} width="md" name="email" label="邮箱" placeholder="请输入邮箱" />
+        <ProFormText initialValue={''} width="md" name="phone" label="手机号" placeholder="请输入手机号" />
+        <ProFormRadio.Group
+          width="md"
+          required
+          initialValue={1}
+          name="status"
+          label="状态"
+          options={[
+            {
+              label: '正常',
+              value: 1,
+            },
+            {
+              label: '禁用',
+              value: 2,
+            },
+          ]}
+        ></ProFormRadio.Group>
+        <ProFormRadio.Group
+          width="md"
+          required
+          initialValue={1}
+          name="role"
+          label="角色"
+          options={[
+            {
+              label: '基础用户',
+              value: 1,
+            },
+            {
+              label: '管理员',
+              value: 2,
+            },
+            {
+              label: '超级管理员',
+              value: 3,
+            },
+          ]}
+        ></ProFormRadio.Group>
+      </Form>
+    </Modal>
+  );
+};
+
+export default AddSupderAdmin;

src/pages/System/SuperAdmin/index.tsx

@@ -0,0 +1,103 @@
+import { getSupderAdminListAPI } from '@/services/system/supderAdmin';
+import { ActionType, ProColumns, ProTable } from '@ant-design/pro-components';
+import { Button } from 'antd';
+import { useRef, useState } from 'react';
+import AddSupderAdmin from './AddSupderAdmin';
+
+const Page = () => {
+  const tableRef = useRef<ActionType>();
+
+  const [createModalVisible, setCreateModalVisible] = useState<boolean>(false);
+  const [editRow] = useState<EditRow<SuperAdmin.SuperAdminItem>>();
+
+  const columns: ProColumns[] = [
+    {
+      title: '管理员名称',
+      dataIndex: 'userName',
+      align: 'center',
+      hideInSearch: true,
+    },
+    {
+      title: '邮箱',
+      dataIndex: 'email',
+      align: 'center',
+      hideInSearch: true,
+    },
+    {
+      title: '电话号',
+      dataIndex: 'phone',
+      align: 'center',
+      hideInSearch: true,
+    },
+    {
+      title: '角色',
+      dataIndex: 'role',
+      align: 'center',
+      hideInSearch: true,
+      render: (_, record: SuperAdmin.SuperAdminItem) => {
+        if (record.role === 1) return '用户';
+        if (record.role === 2) return '管理员';
+        if (record.role === 3) return '超级管理员';
+        return record.role;
+      },
+    },
+    {
+      title: '创建时间',
+      dataIndex: 'createTime',
+      align: 'center',
+      hideInSearch: true,
+    },
+    {
+      title: '最后登录时间',
+      dataIndex: 'lastLoginTime',
+      align: 'center',
+      hideInSearch: true,
+    },
+  ];
+
+  return (
+    <>
+      <ProTable
+        actionRef={tableRef}
+        columns={columns}
+        rowKey={'id'}
+        search={{
+          labelWidth: 140,
+          span: { xs: 24, sm: 24, md: 12, lg: 12, xl: 6, xxl: 6 },
+        }}
+        toolBarRender={() => [
+          <Button
+            key="addSuperAdmin"
+            type="primary"
+            onClick={() => {
+              setCreateModalVisible(true);
+            }}
+          >
+            新建管理员
+          </Button>,
+        ]}
+        request={async (params) => {
+          const { current, pageSize } = params;
+          const _params = { current, pageSize };
+          const { meta, code, data } = await getSupderAdminListAPI(_params);
+          return {
+            data: data ?? [],
+            total: meta.total,
+            success: code === 200,
+          };
+        }}
+      ></ProTable>
+
+      <AddSupderAdmin
+        visible={createModalVisible}
+        onCancel={() => {
+          setCreateModalVisible(false);
+        }}
+        tableRef={tableRef}
+        editRow={editRow}
+      />
+    </>
+  );
+};
+
+export default Page;

src/pages/Table/components/CreateForm.tsx

@@ -0,0 +1,19 @@
+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;

src/pages/Table/components/UpdateForm.tsx

@@ -0,0 +1,127 @@
+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;

src/pages/Table/index.tsx

@@ -0,0 +1,259 @@
+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}
+        open={!!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;

src/pages/User/index.tsx

@@ -0,0 +1,5 @@
+const UserPage = () => {
+  return <>1231</>;
+};
+
+export default UserPage;

src/services/demo/UserController.ts

@@ -0,0 +1,93 @@
+/* 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 || {}),
+  });
+}

src/services/demo/index.ts

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

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;
+}

src/services/global.d.ts

@@ -0,0 +1,23 @@
+declare namespace API {
+  /**
+   * 分页
+   */
+  type RequestPage<T = Record<string, any>> = {
+    current?: number;
+    size?: number;
+  } & T;
+
+  /**
+   * 响应体
+   * @description data 数据
+   * @description code 返回码: 0 成功, 其他 失败
+   * @description message 消息: 返回的消息
+   */
+  type ResponstBody<T = unknown> = { data: T; code: number; message: string };
+
+  type ResponstList<T = unknown> = ResponstBody<T> & {
+    meta: {
+      total: number;
+    };
+  };
+}

src/services/system/supderAdmin/index.ts

@@ -0,0 +1,12 @@
+import request from '@/utils/request';
+import qs from 'qs';
+
+export const getSupderAdminListAPI = (
+  params: Record<string, any>,
+): Promise<API.ResponstList<SuperAdmin.SuperAdminItem[]>> => {
+  return request.get(`/system/superAdmin?` + qs.stringify(params));
+};
+
+export const addSupderAdminAPI = (data: Record<string, any>): Promise<API.ResponstBody> => {
+  return request.post(`/system/superAdmin`, data);
+};

src/services/system/supderAdmin/typings.d.ts

@@ -0,0 +1,16 @@
+declare namespace SuperAdmin {
+  type SuperAdminItem = {
+    id: string;
+    userName: string;
+    email?: string;
+    password: string;
+    phone?: string;
+    picture?: string;
+    isFirstLogin: boolean;
+    status: number;
+    createTime: string;
+    updateTime: string;
+    lastLoginTime?: string;
+    role: number;
+  };
+}

src/utils/format.ts

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

src/utils/request.ts

@@ -0,0 +1,75 @@
+import { notification } from 'antd';
+import axios, { AxiosRequestHeaders } from 'axios';
+
+const instance = axios.create({ baseURL: 'http://127.0.0.1:3008/backend/' });
+
+instance.interceptors.request.use(
+  (config) => {
+    config.headers = {
+      ...config.headers,
+      Authorization: 'Bearer ' + localStorage.getItem('Authorization'),
+    } as AxiosRequestHeaders;
+    return config;
+  },
+  (error) => Promise.reject(error),
+);
+
+instance.interceptors.response.use(
+  (response) => {
+    const { data } = response;
+    const { code } = data;
+
+    if (code === 401 || code === 403) {
+      localStorage.removeItem('Authorization');
+    }
+
+    if (code === 500) {
+      notification.error({
+        message: data.message,
+      });
+    }
+
+    return data;
+  },
+  //状态码不为2xx的时候执行
+  (error) => {
+    const { response } = error;
+    const { status } = response;
+
+    enum CodeMessage {
+      '发出的请求有错误，服务器没有进行新建或修改数据的操作。' = 400,
+      '用户未登录。' = 401,
+      '用户得到授权，但是访问是被禁止的。' = 403,
+      '发出的请求针对的是不存在的记录，服务器没有进行操作。' = 404,
+      '请求的格式不可得。' = 406,
+      '请求的资源被永久删除，且不会再得到的。' = 410,
+      '当创建一个对象时，发生一个验证错误。' = 422,
+      '服务器发生错误，请检查服务器。' = 500,
+      '网关错误。' = 502,
+      '服务不可用，服务器暂时过载或维护。' = 503,
+      '网关超时。' = 504,
+    }
+    notification.error({
+      message: response.data.message || CodeMessage[status],
+    });
+    if (status === 401) {
+      //   const {
+      //     _store: { dispatch },
+      //   } = getDvaApp();
+      //   dispatch({
+      //     type: 'user/resetLoginStatus',
+      //   });
+    }
+    if (status === 504) {
+      const el = document.getElementById('root');
+      const div = document.createElement('div');
+      div.className = 'text-red';
+      div.textContent = '后台挂了';
+      el?.appendChild(div);
+    }
+
+    return Promise.reject(error);
+  },
+);
+
+export default instance;

src/utils/router.tsx

@@ -0,0 +1,93 @@
+import { Navigate } from '@umijs/max';
+import React from 'react';
+
+export const routes: any[] = [
+  {
+    path: '/',
+    redirect: '/home',
+  },
+  {
+    name: '首页',
+    path: '/home',
+    component: '/Home',
+    useContainer: false,
+  },
+  {
+    name: '用户管理',
+    path: '/user',
+    component: '/User',
+  },
+  {
+    name: '系统管理',
+    path: '/system',
+    children: [
+      {
+        name: '管理员设置',
+        path: '/system/superAdmin',
+        component: '/System/SuperAdmin',
+      },
+    ],
+  },
+  // {
+  //   name: '权限演示',
+  //   path: '/access',
+  //   component: '/Access',
+  // },
+  // {
+  //   name: ' CRUD 示例',
+  //   path: '/table',
+  //   component: '/Table',
+  // },
+];
+
+export type MenuItem = {
+  useContainer: boolean;
+  path: string;
+  name: string;
+  component?: string;
+  element?: JSX.Element;
+  children?: MenuItem[];
+};
+
+export const loopMenuItem = (menus: MenuItem[]): MenuItem[] => {
+  return menus.flatMap((item) => {
+    let Component: React.ComponentType<any> | null = null;
+
+    if (item.component && item.component?.length > 0) {
+      Component = React.lazy(
+        () =>
+          new Promise((resolve) => {
+            import(`@/pages${item.component}`)
+              .then((module) => resolve(module))
+              .catch(() => resolve(import('@/pages/404.tsx') as any));
+          }),
+      );
+    }
+
+    if (item.children && item.children.length > 0) {
+      return [
+        {
+          useContainer: item.useContainer ?? true,
+          path: item.path,
+          name: item.name,
+          children: [
+            {
+              path: item.path,
+              element: <Navigate to={item.children[0].path} replace />,
+            },
+            ...loopMenuItem(item.children),
+          ],
+        },
+      ] as MenuItem[];
+    } else {
+      return [
+        {
+          useContainer: item.useContainer ?? true,
+          path: item.path,
+          name: item.name,
+          element: <React.Suspense fallback={<div> Loading...</div>}>{Component && <Component />} </React.Suspense>,
+        },
+      ] as MenuItem[];
+    }
+  });
+};

tsconfig.json

@@ -0,0 +1,43 @@
+{
+  "compilerOptions": {
+    "outDir": "build/dist",
+    "module": "esnext",
+    "target": "esnext",
+    "lib": ["esnext", "dom"],
+    "sourceMap": true,
+    "baseUrl": ".",
+    "jsx": "react-jsx",
+    "resolveJsonModule": true,
+    "allowSyntheticDefaultImports": true,
+    "moduleResolution": "node",
+    "forceConsistentCasingInFileNames": true,
+    "noImplicitReturns": true,
+    "noUnusedLocals": true,
+    "allowJs": true,
+    "skipLibCheck": true,
+    "experimentalDecorators": true,
+    "strict": true,
+    "allowImportingTsExtensions": true,
+    "paths": {
+      "@/*": ["src/*"],
+      "@@/*": ["./src/.umi/*"]
+    }
+  },
+  "include": [
+    "mock/**/*",
+    "src/**/*",
+    "playwright.config.ts",
+    "tests/**/*",
+    "test/**/*",
+    "__test__/**/*",
+    "typings/**/*",
+    "config/**/*",
+    ".eslintrc.js",
+    ".stylelintrc.js",
+    ".prettierrc.js",
+    "jest.config.js",
+    "mock/*",
+    "typings.d.ts"
+  ],
+  "extends": "./src/.umi/tsconfig.json"
+}

typings.d.ts

@@ -0,0 +1,5 @@
+import '@umijs/max/typings';
+
+declare global {
+  declare type EditRow<T> = T | undefined;
+}