fix: 初始化

.env

@@ -0,0 +1,6 @@
+# 默认配置
+API_URL=http://10.0.0.120
+SOCKET_URL=ws://10.0.0.120
+DID_YOU_KNOW=none
+# 是否压缩js css
+COMPRESS=none

.eslintrc.js

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

.gitignore

@@ -0,0 +1,14 @@
+/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
+/temp

.husky/commit-msg

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npx --no-install max verify-commit $1

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npx --no-install lint-staged --quiet

.lintstagedrc

@@ -0,0 +1,12 @@
+{
+  "*.{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,3 @@
+registry=https://registry.npmmirror.com/
+@zhst:registry="http://10.0.0.77:4874"
+

.prettierignore

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

.prettierrc

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

.stylelintrc.js

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

.vscode/settings.json

@@ -0,0 +1,4 @@
+{
+  "cSpell.words": ["antd", "favicons", "zhst"],
+  "editor.formatOnSave": true
+}

README.md

@@ -0,0 +1,39 @@
+# 智能文件柜使用手册
+
+## 快速上手
+
+### 1. 安装依赖
+
+```js
+pnpm i
+```
+
+### 2. 生成页面模板
+
+```js
+pnpm run page
+```
+
+### 3. 生成组件模板
+
+```js
+pnpm run comp
+```
+
+### 4. 开发环境
+
+```js
+pnpm run start
+```
+
+### 5. 打包
+
+```js
+// UMI_ENV= dev、test、prod
+pnpm run build:{{UMI_ENV}}
+```
+
+## 目录结构
+
+. ├── publlic // 公共静态文件 ├── package.json  
+├── pnpm-lock.yaml ├── src │ ├── assets │ │ └── logo.jpg │ ├── constants // 公共静态变量 │ ├── layouts // 布局 │ │ ├── BaseLayout │ │ ├── LoadingLayout │ │ ├── AuthLayout │ │ ├── ... │ ├── services // 接口服务 │ ├── pages │ │ ├── Home.tsx │ │ └── index.tsx │ └── wrapper // │ └── utils // 工具页面 │ │ └── index.tsx // 工具页入口 │ └── 404.tsx // 报错页 │ └── app.ts // 入口页面 │ └── access.ts // 权限校验页面 │ └── global.less // 全局样式 ├── tsconfig.json └── typings.d.ts

config/config.ts

@@ -0,0 +1,22 @@
+import { defineConfig } from '@umijs/max';
+import routes from './routes';
+
+const config = defineConfig({
+  favicons: ['/assets/logo.jpg'],
+  antd: {},
+  access: {},
+  model: {},
+  initialState: {},
+  request: {},
+  layout: {
+    layout: 'side',
+    title: null,
+    contentWidth: 'Fluid',
+    fixedHeader: false,
+    fixSiderbar: false,
+  },
+  routes,
+  npmClient: 'pnpm',
+});
+
+export default config;

config/routes/index.ts

@@ -0,0 +1,5 @@
+import BaseRoutes from './routes.base';
+
+const routes = [...BaseRoutes];
+
+export default routes;

config/routes/routes.base.ts

@@ -0,0 +1,34 @@
+const routes = [
+  {
+    path: '/',
+    redirect: '/home',
+  },
+  {
+    name: '首页',
+    path: '/home',
+    component: '@/pages/Home',
+  },
+  {
+    name: '权限演示',
+    path: '/access',
+    component: '@/pages/Access',
+  },
+  {
+    name: '性能测试',
+    path: '/performance',
+    component: '@/pages/Performance',
+  },
+  {
+    name: ' CRUD 示例',
+    path: '/table',
+    component: '@/pages/Table',
+  },
+  {
+    name: '未找到页面',
+    path: '/*',
+    hideInMenu: true,
+    component: '@/pages/404',
+  },
+];
+
+export default routes;

config/routes/types.d.ts

@@ -0,0 +1,67 @@
+interface RouteProps {
+  icon: string;
+  // https://beta-pro.ant.design/docs/advanced-menu
+  // ---
+  // 新页面打开
+  target: '_blank';
+  // 不展示顶栏
+  headerRender: boolean;
+  // 不展示页脚
+  footerRender: boolean;
+  // 不展示菜单
+  menuRender: boolean;
+  // 不展示菜单顶栏
+  menuHeaderRender: boolean;
+  // 权限配置，需要与 plugin-access 插件配合使用
+  access: 'canRead';
+  // 隐藏子菜单
+  hideChildrenInMenu: boolean;
+  // 隐藏自己和子菜单
+  hideInMenu: boolean;
+  // 在面包屑中隐藏
+  hideInBreadcrumb: boolean;
+  // 子项往上提，仍旧展示,
+  flatMenu: boolean;
+  /**
+   * @name false 时不展示顶栏
+   */
+  headerRender?: boolean;
+  /**
+   * @name false 时不展示页脚
+   */
+  footerRender?: boolean;
+  /**
+   * @name false 时不展示菜单
+   */
+  menuRender?: boolean;
+  /**
+   * @name false 时不展示菜单顶栏
+   */
+  menuHeaderRender?: boolean;
+
+  /**
+   * @name 固定顶栏
+   **/
+  fixedHeader: boolean;
+
+  /**
+   * @name 固定菜单
+   */
+  fixSiderbar: boolean;
+
+  /**
+   * @name theme for nav menu
+   * @name 导航菜单的主题
+   */
+  navTheme: 'dark' | 'light' | 'realDark' | undefined;
+  /**
+   * @name nav menu position: `side` or `top`
+   * @name 导航菜单的位置
+   * @description side 为正常模式，top菜单显示在顶部，mix 两种兼有
+   */
+  layout: 'side' | 'top' | 'mix';
+  /**
+   * @name 顶部导航的主题，mix 模式生效
+   */
+  headerTheme: 'dark' | 'light';
+}

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,43 @@
+{
+  "private": true,
+  "author": "dev <jiangzhixiong@smartvision.cn>",
+  "scripts": {
+    "build:dev": "cross-env UMI_ENV=dev max build",
+    "build:prod": "cross-env UMI_ENV=prod max build",
+    "build:test": "cross-env UMI_ENV=test max build",
+    "comp": "cross-env max g component",
+    "dev": "cross-env max dev",
+    "format": "prettier --cache --write .",
+    "postinstall": "cross-env max setup",
+    "page": "cross-env max g page",
+    "prod": "cross-env max dev",
+    "setup": "cross-env max setup",
+    "start": "cross-env npm run dev",
+    "test": "cross-env max dev"
+  },
+  "dependencies": {
+    "@ant-design/icons": "^5.3.0",
+    "@ant-design/pro-components": "^2.6.49",
+    "@ant-design/pro-layout": "^7.17.19",
+    "@nicecode/meta": "^0.5.0",
+    "@umijs/max": "^4.1.1",
+    "@zhst/func": "^0.5.0",
+    "@zhst/hooks": "^0.5.0",
+    "@zhst/meta": "^0.7.0",
+    "antd": "^5.13.3",
+    "flv.js": "^1.6.2",
+    "rc-util": "^5.38.1"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.51",
+    "@types/react-dom": "^18.2.18",
+    "cross-env": "^7.0.3",
+    "husky": "^9.0.7",
+    "lint-staged": "^15.2.1",
+    "merge": "^2.1.1",
+    "prettier": "^3.2.4",
+    "prettier-plugin-organize-imports": "^3.2.4",
+    "prettier-plugin-packagejson": "^2.4.10",
+    "typescript": "^5.3.3"
+  }
+}

src/access.ts

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

src/app.tsx

@@ -0,0 +1,183 @@
+// 运行时配置
+import RightContent from '@/components/RightContent';
+import type { RequestConfig, RunTimeLayoutConfig } from '@umijs/max';
+import React from 'react';
+import logo from './assets/logo.jpg';
+
+/**
+ * 获取页面初始数据
+ * @returns
+ */
+export async function getInitialState(): Promise<{
+  name: string; // 用户名称
+  avatar: string; // 用户头像
+  menu: object[]; // 菜单
+}> {
+  return {
+    name: 'zhst',
+    avatar: '',
+    menu: [],
+  };
+}
+
+const menuExtraRender = () => {
+  return (
+    <p style={{ margin: '16px 0', textAlign: 'center', fontSize: '24px' }}>
+      AI 算法仓平台
+    </p>
+  );
+};
+
+// TODO: 通过 initialState 获取用户信息和路由菜单渲染 menu
+// @ts-ignore
+export const layout: RunTimeLayoutConfig = (props) => {
+  const { initialState } = props;
+  const getMenu = () => {
+    return [
+      {
+        path: '/home',
+        name: '首页',
+      },
+      {
+        path: '/table',
+        name: '表单',
+      },
+      {
+        path: '/access',
+        name: '权限测试',
+      },
+      {
+        path: '/performance',
+        name: '性能测试',
+      },
+    ];
+  };
+
+  return {
+    rightContentRender: false,
+    disableContentMargin: false,
+    childrenRender: (dom) => {
+      console.log('_props', props);
+      return (
+        <div>
+          <div
+            style={{
+              height: '54px',
+              lineHeight: '54px',
+              borderBottom: '1px solid rgba(0,0,0,0.06)',
+            }}
+          >
+            <RightContent />
+          </div>
+          {dom}
+        </div>
+      );
+    },
+    waterMarkProps: {
+      content: initialState?.name,
+    },
+    menuExtraRender,
+    onPageChange: () => {
+      console.log('页面跳转');
+      // TODO: 如果没有登录，重定向到 login
+      // if (!initialState?.currentUser && location.pathname !== loginPath) {
+      //   history.push(loginPath);
+      // }
+    },
+    layout: 'side',
+    // 自定义 404 页面
+    logo,
+    title: () => null,
+    iconfontUrl: '',
+    logout: () => {},
+    // rightContentRender
+    menu: {
+      request: getMenu,
+    },
+  };
+};
+
+export const request: RequestConfig = {
+  timeout: 1000,
+  // other axios options you want
+  errorConfig: {
+    // @ts-ignore
+    errorHandler(error: any, opts: any) {
+      console.log('first', error, opts);
+      // if (opts?.skipErrorHandler) throw error
+      // try {
+      //   const { res } = ctx;
+      //   const d = await res.text();
+
+      //   if (res.status === 401 && store.user.isLogin) {
+      //     store.user.resetLoginState();
+      //     message.warning('登录过期，请重新登录!');
+      //     return;
+      //   }
+      //   const isEmptyRes = d === '' || d.replace(/\s/g,"")=== 'tokenisinvalid'; //有些后端接口成功会返回空 做下兼容
+      //   const body = !isEmptyRes ? JSON.parse(d || '{}') : d;
+      //   const sessionCode = sessionStorage.getItem('zhst_errcode') || '{}'
+      //   const ERROR_CODE = JSON.parse(sessionCode);
+
+      //   if (Number(res.status) === 200) {
+      //     ctx.res = body;
+      //   } else {
+      //     // 先判断Grpc-Metadata-Errorx-Message
+      //     let errMsg = ERROR_CODE[body.code]?.value || body.message || '您的网络发生异常，无法连接服务器'
+      //     toast && message.error(errMsg || body);
+      //     ctx.res = {
+      //       code: body.code,
+      //       message: errMsg
+      //     };
+      //   }
+
+      // } catch (error) {
+      //   if (get(error, 'type') !== 'CustomError') {
+      //     toast && message.error('您的网络发生异常，无法连接服务器');
+      //   }
+      //   throw error;
+      // }
+    },
+    // @ts-ignore
+    errorThrower(res) {
+      console.log('res', res);
+    },
+  },
+  // 请求
+  requestInterceptors: [
+    // 一个二元组，第一个元素是 request 拦截器，第二个元素是错误处理
+    [
+      (url, options) => {
+        console.log('options', options);
+        return {
+          url,
+          options: {
+            ...options,
+            headers: {
+              authorization: 'test',
+              // ...(refererSuffix ? { zhst_referer: `${baseUrl}${refererSuffix}` } : {}),
+            },
+          },
+        };
+      },
+      (error) => {
+        return Promise.reject(error);
+      },
+    ],
+  ],
+  // 返回
+  responseInterceptors: [
+    // 一个二元组，第一个元素是 request 拦截器，第二个元素是错误处理
+    [
+      (response) => {
+        if (response.status === 200) {
+          throw Error(JSON.stringify(response.data));
+        }
+        return response;
+      },
+      (error) => {
+        return Promise.reject(error);
+      },
+    ],
+  ],
+};

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/components/HeaderContent/index.tsx

@@ -0,0 +1,35 @@
+import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons';
+import useMergedState from 'rc-util/es/hooks/useMergedState';
+import React from 'react';
+
+export type HeaderContent = {
+  collapse?: boolean;
+  onCollapse?: (collapsed: boolean) => void;
+};
+
+// eslint-disable-next-line @typescript-eslint/no-redeclare
+const HeaderContent: React.FC<HeaderContent> = (props) => {
+  const [collapsed, setCollapsed] = useMergedState<boolean>(
+    props.collapse ?? false,
+    {
+      value: props.collapse,
+      onChange: props.onCollapse,
+    },
+  );
+
+  return (
+    <>
+      <div
+        onClick={() => setCollapsed(!collapsed)}
+        style={{
+          cursor: 'pointer',
+          fontSize: '16px',
+        }}
+      >
+        {collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
+      </div>
+    </>
+  );
+};
+
+export default HeaderContent;

src/components/HeaderDropdown/index.less

@@ -0,0 +1,17 @@
+@import '~antd/es/style/themes/default.less';
+
+.container > * {
+  background-color: @popover-bg;
+  border-radius: 4px;
+  box-shadow: @shadow-1-down;
+}
+
+@media screen and (max-width: @screen-xs) {
+  .container {
+    width: 100% !important;
+  }
+
+  .container > * {
+    border-radius: 0 !important;
+  }
+}

src/components/HeaderDropdown/index.tsx

@@ -0,0 +1,21 @@
+import { Dropdown } from 'antd';
+import type { DropDownProps } from 'antd/es/dropdown';
+import React from 'react';
+
+export type HeaderDropdownProps = {
+  overlayClassName?: string;
+  overlay: React.ReactNode | (() => React.ReactNode) | any;
+  placement?:
+    | 'bottomLeft'
+    | 'bottomRight'
+    | 'topLeft'
+    | 'topCenter'
+    | 'topRight'
+    | 'bottomCenter';
+} & Omit<DropDownProps, 'overlay'>;
+
+const HeaderDropdown: React.FC<HeaderDropdownProps> = ({ ...restProps }) => (
+  <Dropdown {...restProps} />
+);
+
+export default HeaderDropdown;

src/components/RightContent/AvatarDropdown.tsx

@@ -0,0 +1,85 @@
+import { useModel } from '@umijs/max';
+import { Avatar, Dropdown, MenuProps, Spin } from 'antd';
+import React from 'react';
+import styles from './index.less';
+
+export type GlobalHeaderRightProps = {
+  menu?: boolean;
+};
+
+const AvatarDropdown: React.FC<GlobalHeaderRightProps> = () => {
+  const { initialState } = useModel('@@initialState');
+
+  const loading = (
+    <span className={`${styles.action} ${styles.account}`}>
+      <Spin
+        size="small"
+        style={{
+          marginLeft: 8,
+          marginRight: 8,
+        }}
+      />
+    </span>
+  );
+
+  if (!initialState) {
+    return loading;
+  }
+
+  const items: MenuProps['items'] = [
+    {
+      key: '1',
+      label: (
+        <a
+          target="_blank"
+          rel="noopener noreferrer"
+          href="https://www.antgroup.com"
+        >
+          1st menu item
+        </a>
+      ),
+    },
+    {
+      key: '2',
+      label: (
+        <a
+          target="_blank"
+          rel="noopener noreferrer"
+          href="https://www.aliyun.com"
+        >
+          2nd menu item (disabled)
+        </a>
+      ),
+      disabled: true,
+    },
+    {
+      key: '3',
+      label: (
+        <a
+          target="_blank"
+          rel="noopener noreferrer"
+          href="https://www.luohanacademy.com"
+        >
+          3rd menu item (disabled)
+        </a>
+      ),
+      disabled: true,
+    },
+    {
+      key: '4',
+      danger: true,
+      label: '退出登录',
+    },
+  ];
+
+  return (
+    <Dropdown menu={{ items }}>
+      <span className={`${styles.action}`}>
+        <Avatar size="small" className={styles.avatar} src={1} alt="avatar" />
+        <span className={`${styles.name}`}>{initialState.name}</span>
+      </span>
+    </Dropdown>
+  );
+};
+
+export default AvatarDropdown;

src/components/RightContent/index.less

@@ -0,0 +1,95 @@
+@pro-header-hover-bg: rgba(0, 0, 0, 0.025);
+
+.menu {
+  :global(.anticon) {
+    margin-right: 8px;
+  }
+
+  :global(.ant-dropdown-menu-item) {
+    min-width: 160px;
+  }
+}
+
+.right {
+  display: flex;
+  float: right;
+  height: 48px;
+  margin-left: auto;
+  overflow: hidden;
+
+  .action {
+    display: flex;
+    align-items: center;
+    height: 48px;
+    padding: 0 12px;
+    cursor: pointer;
+    transition: all 0.3s;
+
+    > span {
+      vertical-align: middle;
+    }
+
+    &:hover {
+      background: @pro-header-hover-bg;
+    }
+
+    &:global(.opened) {
+      background: @pro-header-hover-bg;
+    }
+  }
+
+  .search {
+    padding: 0 12px;
+
+    &:hover {
+      background: transparent;
+    }
+  }
+
+  .account {
+    .avatar {
+      margin-right: 8px;
+      color: @primary-color;
+      vertical-align: top;
+      background: rgba(255, 255, 255, 85%);
+    }
+  }
+}
+
+.dark {
+  .action {
+    &:hover {
+      background: #252a3d;
+    }
+
+    &:global(.opened) {
+      background: #252a3d;
+    }
+  }
+}
+
+@media only screen and (max-width: @screen-md) {
+  :global(.ant-divider-vertical) {
+    vertical-align: unset;
+  }
+
+  .name {
+    display: none;
+  }
+
+  .right {
+    position: absolute;
+    top: 0;
+    right: 12px;
+
+    .account {
+      .avatar {
+        margin-right: 0;
+      }
+    }
+
+    .search {
+      display: none;
+    }
+  }
+}

src/components/RightContent/index.tsx

@@ -0,0 +1,18 @@
+import { Space } from 'antd';
+import React from 'react';
+import Avatar from './AvatarDropdown';
+import styles from './index.less';
+
+export type SiderTheme = 'light' | 'dark';
+
+const GlobalHeaderRight: React.FC = () => {
+  let className = styles.right;
+
+  return (
+    <Space className={className}>
+      其它拓展
+      <Avatar />
+    </Space>
+  );
+};
+export default GlobalHeaderRight;

src/components/VideoPlayer/component.tsx

@@ -0,0 +1,40 @@
+import { Button, Col, InputNumber, Row, Space, VideoPlayer } from '@zhst/meta';
+import React, { FC, useState } from 'react';
+
+interface VideoPlayerProps {
+  url?: string; // 视频链接
+}
+
+const Player: FC<VideoPlayerProps> = () => {
+  const [urls, setUrls] = useState<string[]>([]);
+  const [num, setNum] = useState(2);
+
+  const handlePlay = () => {
+    let arr = [];
+    for (let i = 0; i < num; i++) {
+      arr.push(
+        `ws://10.0.0.7:9033/flv/File/test/test_h264_${Math.floor(Math.random() * 6) + 1}.mp4.flv?ip=127.0.0.1`,
+      );
+    }
+    setUrls(arr);
+  };
+
+  return (
+    <div>
+      <Space>
+        <InputNumber value={num} onChange={(_num: number) => setNum(_num)} />
+        <Button onClick={() => handlePlay()}>播放</Button>
+        <Button onClick={() => setUrls([])}>停止</Button>
+      </Space>
+      <Row gutter={[16, 16]}>
+        {urls.map((url) => (
+          <Col key={url} span={8}>
+            <VideoPlayer url={url} />
+          </Col>
+        ))}
+      </Row>
+    </div>
+  );
+};
+
+export default Player;

src/components/VideoPlayer/index.ts

@@ -0,0 +1,4 @@
+import VideoPlayer from './component';
+
+export default VideoPlayer;
+export * from './component';

src/constants/index.ts

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

src/global.less

@@ -0,0 +1,3 @@
+#logo {
+  justify-content: center;
+}

src/layouts/BaseLayout/index.tsx

@@ -0,0 +1,76 @@
+import { ProLayoutProps } from '@ant-design/pro-components';
+import type { MenuDataItem, Settings } from '@ant-design/pro-layout';
+import ProLayout, { DefaultFooter } from '@ant-design/pro-layout';
+import { Link, history } from '@umijs/max';
+import React from 'react';
+import logo from '../../assets/logo.jpg';
+
+export type BasicLayoutProps = {
+  breadcrumbNameMap: Record<string, MenuDataItem>;
+  route: ProLayoutProps['route'] & {
+    authority: string[];
+  };
+  settings: Settings;
+} & ProLayoutProps;
+
+const menuDataRender = (menuList: MenuDataItem[]): MenuDataItem[] =>
+  menuList.map((item) => {
+    return {
+      ...item,
+      children: item.children ? menuDataRender(item.children) : undefined,
+    };
+  });
+
+const defaultFooterDom = (
+  <DefaultFooter copyright={`${new Date().getFullYear()} 杭州智慧视通出品`} />
+);
+
+const BasicLayout: React.FC<BasicLayoutProps> = (props) => {
+  const {
+    children,
+    location = {
+      pathname: '/',
+    },
+  } = props;
+  console.log('props', props);
+
+  return (
+    <ProLayout
+      logo={logo}
+      {...props}
+      // onCollapse={handleMenuCollapse}
+      onMenuHeaderClick={() => history.push('/')}
+      menuItemRender={(menuItemProps, defaultDom) => {
+        if (
+          menuItemProps.isUrl ||
+          !menuItemProps.path ||
+          location.pathname === menuItemProps.path
+        ) {
+          return defaultDom;
+        }
+        return <Link to={menuItemProps.path}>{defaultDom}</Link>;
+      }}
+      breadcrumbRender={(routers = []) => [
+        {
+          path: '/',
+          breadcrumbName: '首页',
+        },
+        ...routers,
+      ]}
+      itemRender={(route, params, routes) => {
+        const first = routes.indexOf(route) === 0;
+        return first ? (
+          <Link to="/">{route.breadcrumbName}</Link>
+        ) : (
+          <span>{route.breadcrumbName}</span>
+        );
+      }}
+      footerRender={() => defaultFooterDom}
+      menuDataRender={menuDataRender}
+    >
+      {children}
+    </ProLayout>
+  );
+};
+
+export default BasicLayout;

src/models/global.ts

@@ -0,0 +1,21 @@
+// 全局共享数据
+import { DEFAULT_NAME } from '@/constants';
+import { useState } from 'react';
+// import { useRequest } from '@umijs/max'
+// import api from '@/services/demo'
+
+const useUser = () => {
+  const [name, setName] = useState<string>(DEFAULT_NAME);
+
+  // @ts-ignore
+  // const { data, error, loading } = useRequest(() => {
+  //   return api.UserController.addUser()
+  // });
+
+  return {
+    name,
+    setName,
+  };
+};
+
+export default useUser;

src/pages/404/index.less

@@ -0,0 +1,4 @@
+.title {
+  margin-top: 200px;
+  text-align: center;
+}

src/pages/404/index.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import styles from './index.less';
+
+const index = () => {
+  return (
+    <div>
+      <h1 className={styles.title}>找不到页面！</h1>
+    </div>
+  );
+};
+
+export default index;

src/pages/Access/index.tsx

@@ -0,0 +1,22 @@
+import { PageContainer } from '@ant-design/pro-components';
+import { Access, useAccess } from '@umijs/max';
+import { Button } from '@zhst/meta';
+import React from 'react';
+
+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,19 @@
+import Guide from '@/components/Guide';
+import { PageContainer } from '@ant-design/pro-components';
+import { useModel } from '@umijs/max';
+import React from 'react';
+import styles from './index.less';
+
+const HomePage: React.FC = () => {
+  const { name } = useModel('global');
+
+  return (
+    <PageContainer ghost>
+      <div className={styles.container}>
+        <Guide name={name} />
+      </div>
+    </PageContainer>
+  );
+};
+
+export default HomePage;

src/pages/Performance/index.tsx

@@ -0,0 +1,18 @@
+import VideoPlayer from '@/components/VideoPlayer';
+import { PageContainer } from '@ant-design/pro-components';
+import React from 'react';
+
+const Performance: React.FC = () => {
+  return (
+    <PageContainer
+      ghost
+      header={{
+        title: '性能测试',
+      }}
+    >
+      <VideoPlayer />
+    </PageContainer>
+  );
+};
+
+export default Performance;

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;

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;

src/pages/Table/index.tsx

@@ -0,0 +1,269 @@
+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: '表单',
+      }}
+    >
+      <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,
+            // @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/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 || {}),
+  });
+}

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

templates/component/component.tsx.tpl

@@ -0,0 +1,10 @@
+import React from 'react'
+import styles from './index.less';
+
+const {{{compName}}} = () => {
+  return (
+    <div>{{{compName}}} is a awesome component</div>
+  )
+}
+
+export default {{{compName}}}

templates/component/index.less.tpl

@@ -0,0 +1,2 @@
+.title {
+}

templates/component/index.ts.tpl

@@ -0,0 +1,4 @@
+import {{{compName}}} from './component'
+
+export default {{{compName}}}
+export * from './component'

templates/page/index.less.tpl

@@ -0,0 +1,3 @@
+.title {
+  background: {{{ color }}};
+}

templates/page/index.tsx.tpl

@@ -0,0 +1,12 @@
+import React from 'react';
+import styles from './index{{{ cssExt }}}';
+
+const {{{ name }}} = () => {
+  return (
+    <div>
+      <h1 className={styles.title}>Page {{{ name }}}</h1>
+    </div>
+  );
+}
+
+export default {{{ name }}}

tsconfig.json

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

typings.d.ts

@@ -0,0 +1,2 @@
+import '@umijs/max/typings';
+declare module '@zhst/meta';