feat: 项目框架搭建

.editorconfig

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

.env

@@ -0,0 +1,6 @@
+# 平台本地运行端口号
+REACT_APP_ENV = dev
+API_SERVER = 127.0.0.1:8888
+SERVER_HOST = http://localhost:8888/
+FILE_SERVER_HOST = http://192.168.10.28:8088
+WEBRTC_SERVER_HOST = http://192.168.10.96:9005

.env.development

@@ -0,0 +1,6 @@
+# 平台本地运行端口号
+REACT_APP_ENV = dev
+API_SERVER = 127.0.0.1:8888
+SERVER_HOST = http://localhost:8888/
+FILE_SERVER_HOST = http://192.168.10.28:8088
+WEBRTC_SERVER_HOST = http://192.168.10.96:9005

.env.production

@@ -0,0 +1,5 @@
+REACT_APP_ENV = prod
+API_SERVER = 127.0.0.1:8888
+SERVER_HOST = /
+FILE_SERVER_HOST = http://192.168.10.96
+WEBRTC_SERVER_HOST = http://192.168.10.96:9005

.eslintignore

@@ -0,0 +1,8 @@
+/lambda/
+/scripts
+/config
+.history
+public
+dist
+.umi
+mock

.eslintrc.js

@@ -0,0 +1,8 @@
+module.exports = {
+  extends: [require.resolve('@umijs/lint/dist/config/eslint')],
+  globals: {
+    page: true,
+    REACT_APP_ENV: true,
+    SERVER_HOST: true,
+  },
+};

.gitignore

@@ -0,0 +1,43 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+**/node_modules
+# roadhog-api-doc ignore
+/src/utils/request-temp.js
+_roadhog-api-doc
+
+# production
+/dist
+/taskDoc
+/src/pages/Demo
+
+# misc
+.DS_Store
+npm-debug.log*
+yarn-error.log
+
+/coverage
+.idea
+yarn.lock
+package-lock.json
+*bak
+.vscode
+
+
+# visual studio code
+.history
+*.log
+functions/*
+.temp/**
+
+# umi
+.umi
+.umi-production
+.umi-test
+
+# screenshot
+screenshot
+.firebase
+.eslintcache
+
+build

.prettierignore

@@ -0,0 +1,22 @@
+**/*.svg
+.umi
+.umi-production
+/dist
+.dockerignore
+.DS_Store
+.eslintignore
+*.png
+*.toml
+docker
+.editorconfig
+Dockerfile*
+.gitignore
+.prettierignore
+LICENSE
+.eslintcache
+*.lock
+yarn-error.log
+.history
+CNAME
+/build
+/public

.prettierrc.js

@@ -0,0 +1,21 @@
+module.exports = {
+  singleQuote: true,
+  trailingComma: 'all',
+  printWidth: 100,
+  proseWrap: 'never',
+  endOfLine: 'lf',
+  overrides: [
+    {
+      files: '.prettierrc',
+      options: {
+        parser: 'json',
+      },
+    },
+    {
+      files: 'document.ejs',
+      options: {
+        parser: 'html',
+      },
+    },
+  ],
+};

Dockerfile

@@ -0,0 +1,13 @@
+FROM circleci/node:latest-browsers
+
+WORKDIR /usr/src/app
+
+RUN npm config set registry https://registry.npmmirror.com
+
+USER root
+COPY package.json ./
+RUN yarn
+COPY ./ ./
+RUN npm run test:all
+
+CMD ["npm", "run", "build"]

README.md

@@ -1 +1,53 @@
-<h1>Uighur-Recognition-Web</h1>
+# General-AI-Platform-Web
+重点人群识别前端仓库  develop
+
+### 生成代码调整
+* ProFormSelect 选择控件 对应文案使用 common.please_select 默认可以使用 common.please_input
+
+### remark
+* 列表筛选表单配置统一使用renderFormItem配置，方便个性化处理
+* 删除按钮颜色配色 统一将a标签换成Button  设置属性{ type="text" danger}
+* 展示抽屉内容时需要有关闭按钮，排版需和谐
+* 使用stepForm的时候，最后的提交写在最后一步的onfinish里面而不是总的stepForm里
+* table操作栏按钮统一使用button，合理间距
+
+
+### 具体实现
+1. 筛选表单区： 列表在columns配置初始数据时，需要筛选的表单项统一使用renderFormItem属性，基于renderFormItem去配置表单项field, 【searchFormItemProps】属性统一配置自定义业务
+{ 
+    width="md" // 表单项宽度可以是数字 
+    labelCol={{span: 4}} // 标签布局
+    wrapperCol={{span: 22}} // 输入控件布局
+}
+
+2. 列表action区按钮个性化和操作确认调整为 统一将a标签换成Button  设置属性【actionInnerDeleteBtnProps】 
+{ type="text" danger}
+
+3. 列表action有多个按钮显示更多
+暂时使用默认超过3个显示更多，如需统一处理或者权限控制下的按钮显示隐藏导致的按钮数量不一致，可根据需要独立封装TableActionComp
+
+4. 列表多选固定在顶部
+使用表格内容固定高度，溢出垂直方向可滚动
+
+5. 列表可选时，首列需要固定
+新增首列index栏位，设置{fixed: 'left'}可实现固定
+
+6. 列表固定表头  scroll={{ y: 500 }}
+批量选择确认按钮固定，列表头内容固定
+
+7. 列表批量选择 tableAlertOptionRender
+配置多选操作选项区
+
+
+### git提交修饰
+feat: 新功能
+fix: bug修复
+docs: 仅文档更改
+style: 不影响代码含义的更改（空白、格式设置、缺失 分号等）
+refactor: 既不修复bug也不添加特性的代码更改
+perf: 改进性能的代码更改
+test: 添加缺少的测试或更正现有测试
+chore: 对构建过程或辅助工具和库（如文档）的更改（无法确认内容可使用）
+
+### bug汇总
+* 新增路由页面，默认该角色拥有查看权限，实际配置并没有（重新配置权限，又能正常访问该新增页面）

config/config.ts

@@ -0,0 +1,187 @@
+// https://umijs.org/config/
+import { defineConfig } from '@umijs/max';
+import { join } from 'path';
+import defaultSettings from './defaultSettings';
+import proxy from './proxy';
+import routes from './routes';
+
+const { REACT_APP_ENV,
+  API_SERVER,
+  SERVER_HOST,
+  FILE_SERVER_HOST,
+  WEBRTC_SERVER_HOST
+} = process.env;
+console.log(REACT_APP_ENV)
+export default defineConfig({
+  /**
+   * @name 开启 hash 模式
+   * @description 让 build 之后的产物包含 hash 后缀。通常用于增量发布和避免浏览器加载缓存。
+   * @doc https://umijs.org/docs/api/config#hash
+   */
+  hash: true,
+  define: {
+    API_SERVER: API_SERVER,
+    SERVER_HOST: SERVER_HOST,
+    FILE_SERVER_HOST: FILE_SERVER_HOST,
+    WEBRTC_SERVER_HOST: WEBRTC_SERVER_HOST,
+  },
+  /**
+   * @name 兼容性设置
+   * @description 设置 ie11 不一定完美兼容，需要检查自己使用的所有依赖
+   * @doc https://umijs.org/docs/api/config#targets
+   */
+  // targets: {
+  //   ie: 11,
+  // },
+  /**
+   * @name 路由的配置，不在路由中引入的文件不会编译
+   * @description 只支持 path，components，routes，redirect，wrappers，title 的配置
+   * @doc https://umijs.org/docs/guides/routes
+   */
+  // umi routes: https://umijs.org/docs/routing
+  routes,
+  /**
+   * @name 主题的配置
+   * @description 虽然叫主题，但是其实只是 less 的变量设置
+   * @doc antd的主题设置 https://ant.design/docs/react/customize-theme-cn
+   * @doc umi 的theme 配置 https://umijs.org/docs/api/config#theme
+   */
+  theme: {
+    // 如果不想要 configProvide 动态设置主题需要把这个设置为 default
+    // 只有设置为 variable， 才能使用 configProvide 动态设置主色调
+    'root-entry-name': 'variable',
+
+  },
+  /**
+   * @name moment 的国际化配置
+   * @description 如果对国际化没有要求，打开之后能减少js的包大小
+   * @doc https://umijs.org/docs/api/config#ignoremomentlocale
+   */
+  ignoreMomentLocale: true,
+  /**
+   * @name 代理配置
+   * @description 可以让你的本地服务器代理到你的服务器上，这样你就可以访问服务器的数据了
+   * @see 要注意以下 代理只能在本地开发时使用，build 之后就无法使用了。
+   * @doc 代理介绍 https://umijs.org/docs/guides/proxy
+   * @doc 代理配置 https://umijs.org/docs/api/config#proxy
+   */
+  proxy: proxy[REACT_APP_ENV as keyof typeof proxy],
+  /**
+   * @name 快速热更新配置
+   * @description 一个不错的热更新组件，更新时可以保留 state
+   */
+  fastRefresh: true,
+  //============== 以下都是max的插件配置 ===============
+  /**
+   * @name 数据流插件
+   * @@doc https://umijs.org/docs/max/data-flow
+   */
+  model: {},
+  /**
+   * 一个全局的初始数据流，可以用它在插件之间共享数据
+   * @description 可以用来存放一些全局的数据，比如用户信息，或者一些全局的状态，全局初始状态在整个 Umi 项目的最开始创建。
+   * @doc https://umijs.org/docs/max/data-flow#%E5%85%A8%E5%B1%80%E5%88%9D%E5%A7%8B%E7%8A%B6%E6%80%81
+   */
+  initialState: {},
+  /**
+   * @name layout 插件
+   * @doc https://umijs.org/docs/max/layout-menu
+   */
+  title: 'Ant Design Pro',
+  layout: {
+    locale: true,
+    ...defaultSettings,
+  },
+  /**
+   * @name moment2dayjs 插件
+   * @description 将项目中的 moment 替换为 dayjs
+   * @doc https://umijs.org/docs/max/moment2dayjs
+   */
+  moment2dayjs: {
+    preset: 'antd',
+    plugins: ['duration'],
+  },
+  /**
+   * @name 国际化插件
+   * @doc https://umijs.org/docs/max/i18n
+   */
+  locale: {
+    // default zh-CN
+    default: 'zh-CN',
+    antd: true,
+    // default true, when it is true, will use `navigator.language` overwrite default
+    baseNavigator: true,
+  },
+  /**
+   * @name antd 插件
+   * @description 内置了 babel import 插件
+   * @doc https://umijs.org/docs/max/antd#antd
+   */
+  antd: {},
+  /**
+   * @name 网络请求配置
+   * @description 它基于 axios 和 ahooks 的 useRequest 提供了一套统一的网络请求和错误处理方案。
+   * @doc https://umijs.org/docs/max/request
+   */
+  request: {},
+  /**
+   * @name 权限插件
+   * @description 基于 initialState 的权限插件，必须先打开 initialState
+   * @doc https://umijs.org/docs/max/access
+   */
+  access: {},
+
+  /**
+   * @name <head> 中额外的 script
+   * @description 配置 <head> 中额外的 script
+   */
+  headScripts: [
+    // 解决首次加载时白屏的问题
+    { src: '/scripts/loading.js', async: true },
+  ],
+  //================ pro 插件配置 =================
+  presets: ['umi-presets-pro'],
+  /**
+   * @name openAPI 插件的配置
+   * @description 基于 openapi 的规范生成serve 和mock，能减少很多样板代码
+   * @doc https://pro.ant.design/zh-cn/docs/openapi/
+   */
+  openAPI: [
+    // {
+    //   requestLibPath: "import { request } from '@umijs/max'",
+    //   // 或者使用在线的版本
+    //   // schemaPath: "https://gw.alipayobjects.com/os/antfincdn/M%24jrzTTYJN/oneapi.json"
+    //   schemaPath: join(__dirname, 'oneapi.json'),
+    //   mock: false,
+    // },
+    // {
+    //   requestLibPath: "import { request } from '@umijs/max'",
+    //   schemaPath: 'https://gw.alipayobjects.com/os/antfincdn/CA1dOm%2631B/openapi.json',
+    //   projectName: 'swagger',
+    // },
+    // {
+    //   requestLibPath: "import { request } from '@umijs/max'",
+    //   // 或者使用在线的版本
+    //   // schemaPath: "https://gw.alipayobjects.com/os/antfincdn/M%24jrzTTYJN/oneapi.json"
+    //   // schemaPath: join(__dirname, 'oneapi.json'),
+    //   schemaPath: 'http://localhost:8888/api/v1/swagger/doc.json',
+    //   mock: false,
+    //   apiPrefix: "'/api/v1'",
+    //   projectName: 'device1',
+    // },
+    // {
+    //   requestLibPath: "import { request } from '@umijs/max'",
+    //   // 或者使用在线的版本
+    //   // schemaPath: "https://gw.alipayobjects.com/os/antfincdn/M%24jrzTTYJN/oneapi.json"
+    //   // schemaPath: join(__dirname, 'oneapi.json'),
+    //   schemaPath: 'http://127.0.0.1:9000/swagger.json',
+    //   mock: false,
+    //   apiPrefix: "'/api/v1'",
+    //   projectName: 'staff',
+    // },
+  ],
+  mfsu: {
+    strategy: 'normal',
+  },
+  requestRecord: {},
+});

config/defaultDrawer.ts

@@ -0,0 +1 @@
+// 待启用 抽屉全局配置

config/defaultForm.ts

@@ -0,0 +1,92 @@
+/*
+ * @Author: zhoux zhouxia@supervision.ltd
+ * @Date: 2023-11-13 14:19:57
+ * @LastEditors: zhoux zhouxia@supervision.ltd
+ * @LastEditTime: 2023-12-27 16:09:07
+ * @FilePath: \general-ai-platform-web\config\defaultForm.ts
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE2
+ */
+
+import { CloseCircleOutlined, CopyOutlined, DeleteOutlined } from "@ant-design/icons";
+import { StepsFormProps } from "@ant-design/pro-components";
+import { ReactNode } from "react";
+
+export type IconConfig = {
+  /**
+   * 新的icon的组件，我们会将其实例化
+   * Icon: ()=> <div/>
+   */
+  Icon?: React.FC<any>;
+  /**
+   * tooltip 的提示文案
+   */
+  tooltipText?: string;
+};
+// 通用表单配置
+export const proFormCommonOptions: Record<string,any> = {
+}
+
+const formBoxMargin = 2 * 24
+const formItemGap = 16
+// Small 560
+export const proFormSmallModelWidth: number = 560;
+export const proFormSmallItemStyleProps: Record<string, any> = {
+  width: proFormSmallModelWidth - formBoxMargin,  // 一列
+  // column2Width: (proFormSmallModelWidth -  2 * formBoxMargin)/2 , // 两列
+
+  
+};
+
+// normal 804
+export const proFormModelWidth: number = 804;
+export const proFormItemStyleProps: Record<string, any> = {
+  width: proFormModelWidth - formBoxMargin,  // 一列
+  column2Width: (proFormModelWidth - formBoxMargin - formItemGap)/2 , // 两列
+};
+
+// max 968
+export const proFormMaxModelWidth: number = 968;
+export const proFormMaxItemStyleProps: Record<string, any> = {
+  width: proFormMaxModelWidth - formBoxMargin,
+  column2Width: (proFormMaxModelWidth - formBoxMargin - formItemGap)/2 , // 两列
+};
+
+
+/**表单具体单项配置 */
+
+
+// proFormList 新增一项按钮配置
+export const proFormListCreatorButtonProps : {
+  creatorButtonText?: ReactNode;
+  position?: 'top' | 'bottom';
+  deleteIconProps?: IconConfig | false;
+} = {
+  position: 'bottom',
+  creatorButtonText: '添加参数字段', // 设置新增一项数据的文案
+  deleteIconProps: {
+    Icon: CloseCircleOutlined,
+    tooltipText: '不需要这行了',
+  }
+}
+
+export const proFormListActionButtonProps : {
+  CopyableIconProps?: IconConfig | false;
+  deleteIconProps?: IconConfig | false;
+} = {
+  CopyableIconProps: {
+    Icon: CopyOutlined,
+    tooltipText: '复制',
+  },
+  deleteIconProps: {
+    Icon: DeleteOutlined,
+    tooltipText: '删除',
+  }
+}
+
+
+// 分步表单统一配置
+export const proFormStepsFormProps: StepsFormProps = {
+  stepsProps: {
+    labelPlacement: 'vertical',
+  }
+}

config/defaultIcon.ts

@@ -0,0 +1,38 @@
+/*
+ * @Author: zhoux zhouxia@supervision.ltd
+ * @Date: 2023-11-28 14:13:05
+ * @LastEditors: zhoux zhouxia@supervision.ltd
+ * @LastEditTime: 2023-12-22 16:17:35
+ * @FilePath: \general-ai-platform-web\config\defaultIcon.ts
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%A
+ */
+
+import { proFormItemStyleProps } from './defaultForm';
+
+// 分步表单统一配置
+export const proIconSelectWrapStyle: React.CSSProperties = {
+  position: 'relative',
+  width: proFormItemStyleProps.width + 48,
+  background: 'red',
+  left: 0,
+};
+
+export const proIconSelectStyle: React.CSSProperties = {
+  position: 'absolute',
+  left: '0',
+  padding: 16,
+  top: '5%',
+  width: '94%',
+  height: 500,
+  zIndex: 9,
+  boxShadow: '0px 4px 12px 0px rgba(0, 0, 0, 0.30)',
+  background: '#fff',
+  borderRadius: 4,
+  overflowY: 'scroll',
+};
+
+// 列表图标统一样式
+
+export const proIconForTableActionStyle : React.CSSProperties = {
+  fontSize: 16,
+}

config/defaultSettings.ts

@@ -0,0 +1,35 @@
+/*
+ * @Author: zhoux zhouxia@supervision.ltd
+ * @Date: 2023-11-01 13:56:33
+ * @LastEditors: zhoux zhouxia@supervision.ltd
+ * @LastEditTime: 2023-11-30 17:10:05
+ * @FilePath: \general-ai-platform-web\config\defaultSettings.ts
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
+import { ProLayoutProps } from '@ant-design/pro-components';
+
+/**
+ * @name
+ */
+const Settings: ProLayoutProps & {
+  pwa?: boolean;
+  logo?: string;
+} = {
+  navTheme: 'light',
+  // 拂晓蓝
+  colorPrimary: '#155BD4',
+  layout: 'mix',
+  contentWidth: 'Fluid',
+  fixedHeader: false,
+  fixSiderbar: true,
+  colorWeak: false,
+  title: ' ',
+  pwa: true,
+  logo: '/logo.svg',
+  iconfontUrl: '',
+  token: {
+    // 参见ts声明，demo 见文档，通过token 修改样式
+    //https://procomponents.ant.design/components/layout#%E9%80%9A%E8%BF%87-token-%E4%BF%AE%E6%94%B9%E6%A0%B7%E5%BC%8F
+  },
+};
+export default Settings;

config/defaultStyle.ts

@@ -0,0 +1,16 @@
+/*
+ * @Author: zhoux zhouxia@supervision.ltd
+ * @Date: 2023-12-26 15:51:09
+ * @LastEditors: zhoux zhouxia@supervision.ltd
+ * @LastEditTime: 2023-12-26 15:51:18
+ * @FilePath: \general-ai-platform-web\config\defaultStyle.ts
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE 
+ */
+export const flex: React.CSSProperties = {
+    display: 'flex'
+}
+
+export const flexRA: React.CSSProperties = {
+    ...flex,
+    
+}

config/defaultTable.ts

@@ -0,0 +1,46 @@
+/*
+ * @Author: zhoux zhouxia@supervision.ltd
+ * @Date: 2023-11-13 11:32:26
+ * @LastEditors: zhoux zhouxia@supervision.ltd
+ * @LastEditTime: 2023-11-21 13:36:39
+ * @FilePath: \general-ai-platform-web\config\defaultTable.ts
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
+import { ProColumns } from "@ant-design/pro-components";
+import { PaginationProps } from "antd";
+// 通用列表配置
+export const proTableCommonOptions: Record<string,any> = {
+    scrollX: 'max-content', // 保证左右侧列的固定，并能保证没列标题不换行
+    scrollY: 500, // 保证列表高度固定
+    commscrollX: 1300,
+    commscrollY: 500, // 保证列表高度固定
+    searchLabelWidth: 'auto', // 整体对齐，label根据实际字数自适应
+}
+
+// 操作栏位配置
+export const proTableActionColumnOptions: Record<string,any> = {
+    dataIndex: 'option',
+    valueType: 'option',
+    align: 'center',
+    fixed: 'right',
+}
+
+// 分页器配置
+export const proTablePaginationOptions: PaginationProps = {
+    showSizeChanger: true,
+    // showQuickJumper: true,
+    showTotal: (total) => `共${total}条`,
+}
+
+
+
+
+// 默认索引列配置
+// export const proTableIndexColumnOptions : ProColumns = {
+//     title: '序号',
+//     dataIndex: 'index',
+//     valueType: 'index', // 增加该属性以添加边框
+//     fixed: 'left', // 将该列固定在左侧
+//     width: 70,
+//     align:'center'
+// }

config/oneapi.json

@@ -0,0 +1,593 @@
+{
+  "openapi": "3.0.1",
+  "info": {
+    "title": "Ant Design Pro",
+    "version": "1.0.0"
+  },
+  "servers": [
+    {
+      "url": "http://localhost:8000/"
+    },
+    {
+      "url": "https://localhost:8000/"
+    }
+  ],
+  "paths": {
+    "/api/currentUser": {
+      "get": {
+        "tags": ["api"],
+        "description": "获取当前的用户",
+        "operationId": "currentUser",
+        "responses": {
+          "200": {
+            "description": "Success",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/CurrentUser"
+                }
+              }
+            }
+          },
+          "401": {
+            "description": "Error",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/ErrorResponse"
+                }
+              }
+            }
+          }
+        }
+      },
+      "x-swagger-router-controller": "api"
+    },
+    "/api/login/captcha": {
+      "post": {
+        "description": "发送验证码",
+        "operationId": "getFakeCaptcha",
+        "tags": ["login"],
+        "parameters": [
+          {
+            "name": "phone",
+            "in": "query",
+            "description": "手机号",
+            "schema": {
+              "type": "string"
+            }
+          }
+        ],
+        "responses": {
+          "200": {
+            "description": "Success",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/FakeCaptcha"
+                }
+              }
+            }
+          }
+        }
+      }
+    },
+    "/api/login/outLogin": {
+      "post": {
+        "description": "登录接口",
+        "operationId": "outLogin",
+        "tags": ["login"],
+        "responses": {
+          "200": {
+            "description": "Success",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "type": "object"
+                }
+              }
+            }
+          },
+          "401": {
+            "description": "Error",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/ErrorResponse"
+                }
+              }
+            }
+          }
+        }
+      },
+      "x-swagger-router-controller": "api"
+    },
+    "/api/login/account": {
+      "post": {
+        "tags": ["login"],
+        "description": "登录接口",
+        "operationId": "login",
+        "requestBody": {
+          "description": "登录系统",
+          "content": {
+            "application/json": {
+              "schema": {
+                "$ref": "#/components/schemas/LoginParams"
+              }
+            }
+          },
+          "required": true
+        },
+        "responses": {
+          "200": {
+            "description": "Success",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/LoginResult"
+                }
+              }
+            }
+          },
+          "401": {
+            "description": "Error",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/ErrorResponse"
+                }
+              }
+            }
+          }
+        },
+        "x-codegen-request-body-name": "body"
+      },
+      "x-swagger-router-controller": "api"
+    },
+    "/api/notices": {
+      "summary": "getNotices",
+      "description": "NoticeIconItem",
+      "get": {
+        "tags": ["api"],
+        "operationId": "getNotices",
+        "responses": {
+          "200": {
+            "description": "Success",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/NoticeIconList"
+                }
+              }
+            }
+          }
+        }
+      }
+    },
+    "/api/rule": {
+      "get": {
+        "tags": ["rule"],
+        "description": "获取规则列表",
+        "operationId": "rule",
+        "parameters": [
+          {
+            "name": "current",
+            "in": "query",
+            "description": "当前的页码",
+            "schema": {
+              "type": "number"
+            }
+          },
+          {
+            "name": "pageSize",
+            "in": "query",
+            "description": "页面的容量",
+            "schema": {
+              "type": "number"
+            }
+          }
+        ],
+        "responses": {
+          "200": {
+            "description": "Success",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/RuleList"
+                }
+              }
+            }
+          },
+          "401": {
+            "description": "Error",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/ErrorResponse"
+                }
+              }
+            }
+          }
+        }
+      },
+      "post": {
+        "tags": ["rule"],
+        "description": "新建规则",
+        "operationId": "addRule",
+        "responses": {
+          "200": {
+            "description": "Success",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/RuleListItem"
+                }
+              }
+            }
+          },
+          "401": {
+            "description": "Error",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/ErrorResponse"
+                }
+              }
+            }
+          }
+        }
+      },
+      "put": {
+        "tags": ["rule"],
+        "description": "新建规则",
+        "operationId": "updateRule",
+        "responses": {
+          "200": {
+            "description": "Success",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/RuleListItem"
+                }
+              }
+            }
+          },
+          "401": {
+            "description": "Error",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/ErrorResponse"
+                }
+              }
+            }
+          }
+        }
+      },
+      "delete": {
+        "tags": ["rule"],
+        "description": "删除规则",
+        "operationId": "removeRule",
+        "responses": {
+          "200": {
+            "description": "Success",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "type": "object"
+                }
+              }
+            }
+          },
+          "401": {
+            "description": "Error",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/ErrorResponse"
+                }
+              }
+            }
+          }
+        }
+      },
+      "x-swagger-router-controller": "api"
+    },
+    "/swagger": {
+      "x-swagger-pipe": "swagger_raw"
+    }
+  },
+  "components": {
+    "schemas": {
+      "CurrentUser": {
+        "type": "object",
+        "properties": {
+          "name": {
+            "type": "string"
+          },
+          "avatar": {
+            "type": "string"
+          },
+          "userid": {
+            "type": "string"
+          },
+          "email": {
+            "type": "string"
+          },
+          "signature": {
+            "type": "string"
+          },
+          "title": {
+            "type": "string"
+          },
+          "group": {
+            "type": "string"
+          },
+          "tags": {
+            "type": "array",
+            "items": {
+              "type": "object",
+              "properties": {
+                "key": {
+                  "type": "string"
+                },
+                "label": {
+                  "type": "string"
+                }
+              }
+            }
+          },
+          "notifyCount": {
+            "type": "integer",
+            "format": "int32"
+          },
+          "unreadCount": {
+            "type": "integer",
+            "format": "int32"
+          },
+          "country": {
+            "type": "string"
+          },
+          "access": {
+            "type": "string"
+          },
+          "geographic": {
+            "type": "object",
+            "properties": {
+              "province": {
+                "type": "object",
+                "properties": {
+                  "label": {
+                    "type": "string"
+                  },
+                  "key": {
+                    "type": "string"
+                  }
+                }
+              },
+              "city": {
+                "type": "object",
+                "properties": {
+                  "label": {
+                    "type": "string"
+                  },
+                  "key": {
+                    "type": "string"
+                  }
+                }
+              }
+            }
+          },
+          "address": {
+            "type": "string"
+          },
+          "phone": {
+            "type": "string"
+          }
+        }
+      },
+      "LoginResult": {
+        "type": "object",
+        "properties": {
+          "status": {
+            "type": "string"
+          },
+          "type": {
+            "type": "string"
+          },
+          "currentAuthority": {
+            "type": "string"
+          }
+        }
+      },
+      "PageParams": {
+        "type": "object",
+        "properties": {
+          "current": {
+            "type": "number"
+          },
+          "pageSize": {
+            "type": "number"
+          }
+        }
+      },
+      "RuleListItem": {
+        "type": "object",
+        "properties": {
+          "key": {
+            "type": "integer",
+            "format": "int32"
+          },
+          "disabled": {
+            "type": "boolean"
+          },
+          "href": {
+            "type": "string"
+          },
+          "avatar": {
+            "type": "string"
+          },
+          "name": {
+            "type": "string"
+          },
+          "owner": {
+            "type": "string"
+          },
+          "desc": {
+            "type": "string"
+          },
+          "callNo": {
+            "type": "integer",
+            "format": "int32"
+          },
+          "status": {
+            "type": "integer",
+            "format": "int32"
+          },
+          "updatedAt": {
+            "type": "string",
+            "format": "datetime"
+          },
+          "createdAt": {
+            "type": "string",
+            "format": "datetime"
+          },
+          "progress": {
+            "type": "integer",
+            "format": "int32"
+          }
+        }
+      },
+      "RuleList": {
+        "type": "object",
+        "properties": {
+          "data": {
+            "type": "array",
+            "items": {
+              "$ref": "#/components/schemas/RuleListItem"
+            }
+          },
+          "total": {
+            "type": "integer",
+            "description": "列表的内容总数",
+            "format": "int32"
+          },
+          "success": {
+            "type": "boolean"
+          }
+        }
+      },
+      "FakeCaptcha": {
+        "type": "object",
+        "properties": {
+          "code": {
+            "type": "integer",
+            "format": "int32"
+          },
+          "status": {
+            "type": "string"
+          }
+        }
+      },
+      "LoginParams": {
+        "type": "object",
+        "properties": {
+          "username": {
+            "type": "string"
+          },
+          "password": {
+            "type": "string"
+          },
+          "autoLogin": {
+            "type": "boolean"
+          },
+          "type": {
+            "type": "string"
+          }
+        }
+      },
+      "ErrorResponse": {
+        "required": ["errorCode"],
+        "type": "object",
+        "properties": {
+          "errorCode": {
+            "type": "string",
+            "description": "业务约定的错误码"
+          },
+          "errorMessage": {
+            "type": "string",
+            "description": "业务上的错误信息"
+          },
+          "success": {
+            "type": "boolean",
+            "description": "业务上的请求是否成功"
+          }
+        }
+      },
+      "NoticeIconList": {
+        "type": "object",
+        "properties": {
+          "data": {
+            "type": "array",
+            "items": {
+              "$ref": "#/components/schemas/NoticeIconItem"
+            }
+          },
+          "total": {
+            "type": "integer",
+            "description": "列表的内容总数",
+            "format": "int32"
+          },
+          "success": {
+            "type": "boolean"
+          }
+        }
+      },
+      "NoticeIconItemType": {
+        "title": "NoticeIconItemType",
+        "description": "已读未读列表的枚举",
+        "type": "string",
+        "properties": {},
+        "enum": ["notification", "message", "event"]
+      },
+      "NoticeIconItem": {
+        "type": "object",
+        "properties": {
+          "id": {
+            "type": "string"
+          },
+          "extra": {
+            "type": "string",
+            "format": "any"
+          },
+          "key": { "type": "string" },
+          "read": {
+            "type": "boolean"
+          },
+          "avatar": {
+            "type": "string"
+          },
+          "title": {
+            "type": "string"
+          },
+          "status": {
+            "type": "string"
+          },
+          "datetime": {
+            "type": "string",
+            "format": "date"
+          },
+          "description": {
+            "type": "string"
+          },
+          "type": {
+            "extensions": {
+              "x-is-enum": true
+            },
+            "$ref": "#/components/schemas/NoticeIconItemType"
+          }
+        }
+      }
+    }
+  }
+}

config/proxy.ts

@@ -0,0 +1,64 @@
+/**
+ * @name 代理的配置
+ * @see 在生产环境 代理是无法生效的，所以这里没有生产环境的配置
+ * -------------------------------
+ * The agent cannot take effect in the production environment
+ * so there is no configuration of the production environment
+ * For details, please see
+ * https://pro.ant.design/docs/deploy
+ *
+ * @doc https://umijs.org/docs/guides/proxy
+ */
+export default {
+  // 如果需要自定义本地开发服务器  请取消注释按需调整
+  // dev: {
+  //   // localhost:8000/api/** -> https://preview.pro.ant.design/api/**
+  //   '/api/': {
+  //     // 要代理的地址
+  //     target: 'https://preview.pro.ant.design',
+  //     // 配置了这个可以从 http 代理到 https
+  //     // 依赖 origin 的功能可能需要这个，比如 cookie
+  //     changeOrigin: true,
+  //   },
+  // },
+  dev: {
+    // localhost:8000/api/** -> https://preview.pro.ant.design/api/**
+    '/api/v1/': {
+      // 要代理的地址
+      target: 'http://192.168.10.96:8888/',
+      // target: 'https://www.baidu.com',
+      // 配置了这个可以从 http 代理到 https
+      // 依赖 origin 的功能可能需要这个，比如 cookie
+      changeOrigin: true,
+      secure: false,
+    },
+    // '/video_save_path/': {
+    //   // 要代理的地址
+    //   target: 'http://192.168.10.96/',
+    //   // target: 'https://www.baidu.com',
+    //   // 配置了这个可以从 http 代理到 https
+    //   // 依赖 origin 的功能可能需要这个，比如 cookie
+    //   changeOrigin: true,
+    //   secure: false,
+    // },
+  },
+  /**
+   * @name 详细的代理配置
+   * @doc https://github.com/chimurai/http-proxy-middleware
+   */
+  test: {
+    // localhost:8000/api/** -> https://preview.pro.ant.design/api/**
+    '/api/': {
+      target: 'https://proapi.azurewebsites.net',
+      changeOrigin: true,
+      pathRewrite: { '^': '' },
+    },
+  },
+  pre: {
+    '/api/': {
+      target: 'your pre url',
+      changeOrigin: true,
+      pathRewrite: { '^': '' },
+    },
+  },
+};

config/routes copy.ts

@@ -0,0 +1,332 @@
+/**
+ * @name umi 的路由配置
+ * @description 只支持 path,components,routes,redirect,wrappers,name,icon 的配置
+ * @param path  path 只支持两种占位符配置，第一种是动态参数 :id 的形式，第二种是 * 通配符，通配符只能出现路由字符串的最后。
+ * @param components 配置 location 和 path 匹配后用于渲染的 React 组件路径。可以是绝对路径，也可以是相对路径，如果是相对路径，会从 src/pages 开始找起。
+ * @param routes 配置子路由，通常在需要为多个路径增加 layout 组件时使用。
+ * @param redirect 配置路由跳转
+ * @param wrappers 配置路由组件的包装组件，通过包装组件可以为当前的路由组件组合进更多的功能。 比如，可以用于路由级别的权限校验
+ * @param name 配置路由的标题，默认读取国际化文件 menu.ts 中 menu.xxxx 的值，如配置 name 为 login，则读取 menu.ts 中 menu.login 的取值作为标题
+ * @param icon 配置路由的图标，取值参考 https://ant.design/components/icon-cn， 注意去除风格后缀和大小写，如想要配置图标为 <StepBackwardOutlined /> 则取值应为 stepBackward 或 StepBackward，如想要配置图标为 <UserOutlined /> 则取值应为 user 或者 User
+ * @doc https://umijs.org/docs/guides/routes
+ */
+export default [
+  {
+    path: '/user',
+    layout: false,
+    routes: [
+      {
+        name: 'login',
+        path: '/user/login',
+        component: './User/Login/index1',
+      },
+    ],
+  },
+  {
+    path: '/welcome',
+    name: 'welcome',
+    component: 'Welcome/Welcome',
+  },
+  {
+    path: '/admin',
+    name: 'admin',
+
+    access: 'canAdmin',
+    routes: [
+      {
+        path: '/admin',
+        redirect: '/admin/sub-page',
+      },
+      {
+        path: '/admin/sub-page',
+        name: 'sub-page',
+        component: './Admin',
+      },
+    ],
+  },
+
+  {
+    path: '/system',
+
+    name: 'system',
+
+    routes: [
+      {
+        name: 'api-list',
+        path: '/system/api-list',
+        component: 'System/ApiList',
+        access: 'canReadMenu',
+      },
+      {
+        name: 'menu-list',
+        path: '/system/menu-list',
+        component: 'System/MenuList',
+        access: 'canReadMenu',
+      },
+      {
+        name: 'role-list',
+        path: '/system/role-list',
+        component: 'System/RoleList',
+        access: 'canReadMenu',
+      },
+      {
+        name: 'user-list',
+        path: '/system/user-list',
+        component: 'System/UserList',
+        access: 'canReadMenu',
+      },
+      {
+        name: 'post-list',
+        path: '/system/post-list',
+        component: 'System/PostList',
+        access: 'canReadMenu',
+      },
+      {
+        name: 'department-list',
+        path: '/system/department-list',
+        component: 'System/DepartmentList',
+        access: 'canReadMenu',
+      },
+      {
+        name: 'operation_record-list',
+        path: '/system/operation_record-list',
+        component: 'System/OperationRecordList',
+        access: 'canReadMenu',
+      },
+    ],
+  },
+  {
+    name: 'device',
+    path: '/device',
+    routes: [
+      {
+        name: 'device-list',
+        path: '/device/device-list',
+        component: 'Device/DeviceList',
+        access: 'canReadMenu',
+      },
+      {
+        name: 'device-category-list',
+        path: '/device/device-category-list',
+        component: 'Device/DeviceCategoryList',
+        access: 'canReadMenu',
+      },
+      {
+        name: 'device-group-list',
+        path: '/device/device-group-list',
+        component: 'Device/DeviceGroupList',
+        access: 'canReadMenu',
+      },
+      {
+        name: 'device-relation-list',
+        path: '/device/device-relation-list',
+        component: 'Device/DeviceRelationList',
+        access: 'canReadMenu',
+      },
+    ],
+  },
+  {
+    name: 'DCSDevice',
+    path: '/DCSDevice',
+    routes: [
+      {
+        name: 'DCSDevice-device-group-list',
+        path: '/DCSDevice/device-group-list',
+        component: 'DCSDevice/DeviceGroupList',
+        access: 'canReadMenu',
+      },
+      {
+        name: 'DCSDevice-device-category-list',
+        path: '/DCSDevice/device-category-list',
+        component: 'DCSDevice/DeviceCategoryList',
+        access: 'canReadMenu',
+      },
+      {
+        name: 'DCSDevice-device-list',
+        path: '/DCSDevice/device-list',
+        component: 'DCSDevice/DeviceList',
+        access: 'canReadMenu',
+      },
+      {
+        name: 'DCSDevice-device-status',
+        path: '/DCSDevice/device-status',
+        component: 'DCSDevice/DeviceStatus',
+        access: 'canReadMenu',
+      },
+    ],
+  },
+  {
+    name: 'resource',
+    path: '/resource',
+    routes: [
+      {
+        name: 'algorithm-model-list',
+
+        path: '/resource/algorithm-model-list',
+        component: 'Resource/AlgorithmModelList',
+        access: 'canReadMenu',
+      },
+      {
+        name: 'algorithm-model-detail',
+        path: '/resource/algorithm-model-detail/:id',
+        component: 'Resource/AlgorithmModelList/detail',
+        access: 'canReadMenu',
+        isHideTab: true,
+      },
+      {
+        name: 'business-image-list',
+
+        path: '/resource/business-image-list',
+        component: 'Resource/BusinessImageList',
+        access: 'canReadMenu',
+      },
+      {
+        name: 'model-category-list',
+
+        path: '/resource/model-category-list',
+        component: 'Resource/ModelCategoryList',
+        access: 'canReadMenu',
+      },
+      {
+        name: 'model-image-list',
+        path: '/resource/model-image-list',
+        component: 'Resource/ModelImageList',
+        access: 'canReadMenu',
+      },
+      {
+        name: 'model-version-list',
+        path: '/resource/model-version-list',
+        component: 'Resource/ModelVersionList',
+        access: 'canReadMenu',
+      },
+      {
+        name: 'resource-device-status',
+        path: '/resource/resource-device-status',
+        component: 'Resource/ResourceDeviceStatus',
+        access: 'canReadMenu',
+      },
+    ],
+  },
+  {
+    name: 'analysis',
+    path: '/analysis',
+    routes: [
+      {
+        name: 'action-detection-list',
+        path: '/analysis/action-detection-list',
+        component: 'Analysis/ActionDetectionList',
+        access: 'canReadMenu',
+      },
+    ],
+  },
+  {
+    name: 'project',
+    path: '/project',
+    routes: [
+      {
+        name: 'project-list',
+
+        path: '/project/project-list',
+        component: 'Project/ProjectList',
+        access: 'canReadMenu',
+      },
+    ],
+  },
+  {
+    name: 'Contact',
+    path: '/Contact',
+    routes: [
+      {
+        name: 'Contact-contact-list',
+        path: '/Contact/contact-list',
+        component: 'Contact/ContactList',
+        access: 'canReadMenu',
+      },
+    ],
+  },
+  {
+    name: 'task',
+    path: '/task',
+    component: 'Hidden',
+  },
+  {
+    name: 'compute_power',
+    path: '/compute_power',
+    component: 'ComputePowerAllocation/ComputePowerAllocation',
+  },
+  {
+    name: 'data_screen',
+    path: '/data_screen',
+  },
+  {
+    name: 'algorithm_setting',
+    path: '/algorithm_setting',
+    component: 'Setting/AlgorithmSetting',
+  },
+  {
+    name: 'alarm',
+    path: '/alarm',
+    routes: [
+      {
+        name: 'alarm-list',
+        path: '/alarm/alarm-list',
+        component: 'Alarm/AlarmList',
+        access: 'canReadMenu',
+      },
+      {
+        name: 'alarm-setting',
+        path: '/alarm/alarm-setting',
+        component: 'Alarm/AlarmSetting',
+        access: 'canReadMenu',
+      },
+      {
+        name: 'alarm-ways',
+        path: '/alarm/alarm-ways',
+        component: 'Alarm/AlarmWays',
+        access: 'canReadMenu',
+      },
+    ],
+  },
+  {
+    name: 'logging',
+    path: 'http://192.168.10.96:5601/app/r/s/uDpRg',
+  },
+  {
+    path: '/',
+    redirect: '/welcome',
+  },
+  {
+    path: '*',
+    layout: false,
+    component: './404',
+  },
+  {
+    name: 'fabricView',
+    path: '/fabricView',
+    routes: [
+      {
+        name: 'fabricView-room',
+        path: '/fabricView/room',
+        component: 'FabricView/Room',
+        access: 'canReadMenu',
+      },
+    ],
+  },
+  {
+    name: 'notice',
+    path: '/notice',
+    component: 'Notice',
+  },
+  {
+    name: 'account',
+    path: '/account',
+    routes: [
+      {
+        name: 'center',
+        path: '/account/center',
+        component: 'Account/Center',
+        access: 'canReadMenu',
+      },
+    ],
+  },
+];

config/routes.ts

@@ -0,0 +1,351 @@
+/**
+ * @name umi 的路由配置
+ * @description 只支持 path,components,routes,redirect,wrappers,name,icon 的配置
+ * @param path  path 只支持两种占位符配置，第一种是动态参数 :id 的形式，第二种是 * 通配符，通配符只能出现路由字符串的最后。
+ * @param components 配置 location 和 path 匹配后用于渲染的 React 组件路径。可以是绝对路径，也可以是相对路径，如果是相对路径，会从 src/pages 开始找起。
+ * @param routes 配置子路由，通常在需要为多个路径增加 layout 组件时使用。
+ * @param redirect 配置路由跳转
+ * @param wrappers 配置路由组件的包装组件，通过包装组件可以为当前的路由组件组合进更多的功能。 比如，可以用于路由级别的权限校验
+ * @param name 配置路由的标题，默认读取国际化文件 menu.ts 中 menu.xxxx 的值，如配置 name 为 login，则读取 menu.ts 中 menu.login 的取值作为标题
+ * @param icon 配置路由的图标，取值参考 https://ant.design/components/icon-cn， 注意去除风格后缀和大小写，如想要配置图标为 <StepBackwardOutlined /> 则取值应为 stepBackward 或 StepBackward，如想要配置图标为 <UserOutlined /> 则取值应为 user 或者 User
+ * @doc https://umijs.org/docs/guides/routes
+ */
+export default [
+  {
+    path: '/user',
+    layout: false,
+    routes: [
+      {
+        name: 'login',
+        path: '/user/login',
+        component: './User/Login/index1',
+      },
+    ],
+  },
+  {
+    path: '/welcome',
+    name: 'welcome',
+    component: 'Welcome/Welcome',
+  },
+  {
+    path: '/admin',
+    name: 'admin',
+
+    access: 'canAdmin',
+    routes: [
+      {
+        path: '/admin',
+        redirect: '/admin/sub-page',
+      },
+      {
+        path: '/admin/sub-page',
+        name: 'sub-page',
+        component: './Admin',
+      },
+    ],
+  },
+
+  {
+    path: '/system',
+
+    name: 'system',
+
+    routes: [
+      {
+        name: 'api-list',
+        path: '/system/api-list',
+        component: 'System/ApiList',
+        access: 'canReadMenu',
+      },
+      {
+        name: 'menu-list',
+        path: '/system/menu-list',
+        component: 'System/MenuList',
+        access: 'canReadMenu',
+      },
+      {
+        name: 'role-list',
+        path: '/system/role-list',
+        component: 'System/RoleList',
+        access: 'canReadMenu',
+      },
+      {
+        name: 'user-list',
+        path: '/system/user-list',
+        component: 'System/UserList',
+        access: 'canReadMenu',
+      },
+      {
+        name: 'post-list',
+        path: '/system/post-list',
+        component: 'System/PostList',
+        access: 'canReadMenu',
+      },
+      {
+        name: 'department-list',
+        path: '/system/department-list',
+        component: 'System/DepartmentList',
+        access: 'canReadMenu',
+      },
+      {
+        name: 'operation_record-list',
+        path: '/system/operation_record-list',
+        component: 'System/OperationRecordList',
+        access: 'canReadMenu',
+      },
+      {
+        name: 'parameter-setting',
+        path: '/system/parameter-setting',
+        component: 'System/ParameterSetting',
+        access: 'canReadMenu',
+      },
+    ],
+  },
+  {
+    name: 'device',
+    path: '/device',
+    routes: [
+      {
+        name: 'device-list',
+        path: '/device/device-list',
+        component: 'Device/DeviceList',
+        access: 'canReadMenu',
+      },
+      {
+        name: 'device-category-list',
+        path: '/device/device-category-list',
+        component: 'Device/DeviceCategoryList',
+        access: 'canReadMenu',
+      },
+      {
+        name: 'device-group-list',
+        path: '/device/device-group-list',
+        component: 'Device/DeviceGroupList',
+        access: 'canReadMenu',
+      },
+      {
+        name: 'device-relation-list',
+        path: '/device/device-relation-list',
+        component: 'Device/DeviceRelationList',
+        access: 'canReadMenu',
+      },
+    ],
+  },
+  {
+    name: 'DCSDevice',
+    path: '/DCSDevice',
+    routes: [
+      {
+        name: 'DCSDevice-device-group-list',
+        path: '/DCSDevice/device-group-list',
+        component: 'DCSDevice/DeviceGroupList',
+        access: 'canReadMenu',
+      },
+      {
+        name: 'DCSDevice-device-category-list',
+        path: '/DCSDevice/device-category-list',
+        component: 'DCSDevice/DeviceCategoryList',
+        access: 'canReadMenu',
+      },
+      {
+        name: 'DCSDevice-device-list',
+        path: '/DCSDevice/device-list',
+        component: 'DCSDevice/DeviceList',
+        access: 'canReadMenu',
+      },
+      {
+        name: 'DCSDevice-device-status',
+        path: '/DCSDevice/device-status',
+        component: 'DCSDevice/DeviceStatus',
+        access: 'canReadMenu',
+      },
+    ],
+  },
+  {
+    name: 'resource',
+    path: '/resource',
+    routes: [
+      {
+        name: 'algorithm-model-list',
+
+        path: '/resource/algorithm-model-list',
+        component: 'Resource/AlgorithmModelList',
+        access: 'canReadMenu',
+      },
+      {
+        name: 'algorithm-model-detail',
+        path: '/resource/algorithm-model-detail/:id',
+        component: 'Resource/AlgorithmModelList/detail',
+        access: 'canReadMenu',
+        isHideTab: true,
+      },
+      {
+        name: 'business-image-list',
+
+        path: '/resource/business-image-list',
+        component: 'Resource/BusinessImageList',
+        access: 'canReadMenu',
+      },
+      {
+        name: 'model-category-list',
+
+        path: '/resource/model-category-list',
+        component: 'Resource/ModelCategoryList',
+        access: 'canReadMenu',
+      },
+      {
+        name: 'model-image-list',
+        path: '/resource/model-image-list',
+        component: 'Resource/ModelImageList',
+        access: 'canReadMenu',
+      },
+      {
+        name: 'model-version-list',
+        path: '/resource/model-version-list',
+        component: 'Resource/ModelVersionList',
+        access: 'canReadMenu',
+      },
+      {
+        name: 'resource-device-status',
+        path: '/resource/resource-device-status',
+        component: 'Resource/ResourceDeviceStatus',
+        access: 'canReadMenu',
+      },
+      {
+        name: 'server-status',
+        path: '/resource/server-status',
+        component: 'Resource/ServerStatus',
+        access: 'canReadMenu',
+      },
+    ],
+  },
+  {
+    name: 'analysis',
+    path: '/analysis',
+    routes: [
+      {
+        name: 'action-detection-list',
+        path: '/analysis/action-detection-list',
+        component: 'Analysis/ActionDetectionList',
+        access: 'canReadMenu',
+      },
+    ],
+  },
+  {
+    name: 'project',
+    path: '/project',
+    routes: [
+      {
+        name: 'project-list',
+
+        path: '/project/project-list',
+        component: 'Project/ProjectList',
+        access: 'canReadMenu',
+      },
+    ],
+  },
+  {
+    name: 'Contact',
+    path: '/Contact',
+    routes: [
+      {
+        name: 'Contact-contact-list',
+        path: '/Contact/contact-list',
+        component: 'Contact/ContactList',
+        access: 'canReadMenu',
+      },
+    ],
+  },
+  {
+    name: 'task',
+    path: '/task',
+    routes: [
+      {
+        name: 'task-list',
+        path: '/task/task-list',
+        component: 'Task/TaskList',
+        access: 'canReadMenu',
+      },
+    ],
+  },
+  {
+    name: 'compute_power',
+    path: '/compute_power',
+    component: 'ComputePowerAllocation/ComputePowerAllocation',
+  },
+  {
+    name: 'data_screen',
+    path: '/data_screen',
+  },
+  {
+    name: 'algorithm_setting',
+    path: '/algorithm_setting',
+    component: 'Setting/AlgorithmSetting',
+  },
+  {
+    name: 'alarm',
+    path: '/alarm',
+    routes: [
+      {
+        name: 'alarm-list',
+        path: '/alarm/alarm-list',
+        component: 'Alarm/AlarmList',
+        access: 'canReadMenu',
+      },
+      {
+        name: 'alarm-setting',
+        path: '/alarm/alarm-setting',
+        component: 'Alarm/AlarmSetting',
+        access: 'canReadMenu',
+      },
+      {
+        name: 'alarm-ways',
+        path: '/alarm/alarm-ways',
+        component: 'Alarm/AlarmWays',
+        access: 'canReadMenu',
+      },
+    ],
+  },
+  {
+    name: 'logging',
+    path: 'http://192.168.10.96:5601/app/r/s/uDpRg',
+  },
+  {
+    path: '/',
+    redirect: '/welcome',
+  },
+  {
+    path: '*',
+    layout: false,
+    component: './404',
+  },
+  {
+    name: 'fabricView',
+    path: '/fabricView',
+    routes: [
+      {
+        name: 'fabricView-room',
+        path: '/fabricView/room',
+        component: 'FabricView/Room',
+        access: 'canReadMenu',
+      },
+    ],
+  },
+  {
+    name: 'notice',
+    path: '/notice',
+    component: 'Notice',
+  },
+  {
+    name: 'account',
+    path: '/account',
+    routes: [
+      {
+        name: 'center',
+        path: '/account/center',
+        component: 'Account/Center',
+        access: 'canReadMenu',
+      },
+    ],
+  },
+];

jest.config.ts

@@ -0,0 +1,23 @@
+import { configUmiAlias, createConfig } from '@umijs/max/test';
+
+export default async () => {
+  const config = await configUmiAlias({
+    ...createConfig({
+      target: 'browser',
+    }),
+  });
+  console.log(JSON.stringify(config));
+
+  return {
+    ...config,
+    testEnvironmentOptions: {
+      ...(config?.testEnvironmentOptions || {}),
+      url: 'http://localhost:8000',
+    },
+    setupFiles: [...(config.setupFiles || []), './tests/setupTests.jsx'],
+    globals: {
+      ...config.globals,
+      localStorage: null,
+    },
+  };
+};

jsconfig.json

@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}

mock/DCSDevice.ts

@@ -0,0 +1,111 @@
+import { Request, Response } from 'express';
+import moment from 'moment';
+import { parse } from 'url';
+
+// mock tableListDataSource
+const genList = (current: number, pageSize: number) => {
+  const tableListDataSource: API.RuleListItem[] = [];
+
+  for (let i = 0; i < pageSize; i += 1) {
+    const index = (current - 1) * 10 + i;
+    tableListDataSource.push({
+      key: index,
+      disabled: i % 6 === 0,
+      href: 'https://ant.design',
+      avatar: [
+        'https://gw.alipayobjects.com/zos/rmsportal/eeHMaZBwmTvLdIwMfBpg.png',
+        'https://gw.alipayobjects.com/zos/rmsportal/udxAbMEhpwthVVcjLXik.png',
+      ][i % 2],
+      name: `TradeCode ${index}`,
+      owner: '曲丽丽',
+      desc: '这是一段描述',
+      callNo: Math.floor(Math.random() * 1000),
+      status: Math.floor(Math.random() * 10) % 4,
+      updatedAt: moment().format('YYYY-MM-DD'),
+      createdAt: moment().format('YYYY-MM-DD'),
+      progress: Math.ceil(Math.random() * 100),
+    });
+  }
+  tableListDataSource.reverse();
+  return tableListDataSource;
+};
+
+let tableListDataSource = genList(1, 100);
+
+function getDCSDeviceStatusList(req: Request, res: Response, u: string) {
+  let realUrl = u;
+  if (!realUrl || Object.prototype.toString.call(realUrl) !== '[object String]') {
+    realUrl = req.url;
+  }
+  const { current = 1, pageSize = 10 } = req.query;
+  const params = parse(realUrl, true).query as unknown as API.PageParams &
+    API.RuleListItem & {
+      sorter: any;
+      filter: any;
+    };
+
+  let dataSource = [...tableListDataSource].slice(
+    ((current as number) - 1) * (pageSize as number),
+    (current as number) * (pageSize as number),
+  );
+  if (params.sorter) {
+    const sorter = JSON.parse(params.sorter);
+    dataSource = dataSource.sort((prev, next) => {
+      let sortNumber = 0;
+      (Object.keys(sorter) as Array<keyof API.RuleListItem>).forEach((key) => {
+        let nextSort = next?.[key] as number;
+        let preSort = prev?.[key] as number;
+        if (sorter[key] === 'descend') {
+          if (preSort - nextSort > 0) {
+            sortNumber += -1;
+          } else {
+            sortNumber += 1;
+          }
+          return;
+        }
+        if (preSort - nextSort > 0) {
+          sortNumber += 1;
+        } else {
+          sortNumber += -1;
+        }
+      });
+      return sortNumber;
+    });
+  }
+  if (params.filter) {
+    const filter = JSON.parse(params.filter as any) as {
+      [key: string]: string[];
+    };
+    if (Object.keys(filter).length > 0) {
+      dataSource = dataSource.filter((item) => {
+        return (Object.keys(filter) as Array<keyof API.RuleListItem>).some((key) => {
+          if (!filter[key]) {
+            return true;
+          }
+          if (filter[key].includes(`${item[key]}`)) {
+            return true;
+          }
+          return false;
+        });
+      });
+    }
+  }
+
+  if (params.name) {
+    dataSource = dataSource.filter((data) => data?.name?.includes(params.name || ''));
+  }
+  const result = {
+    data: dataSource,
+    total: tableListDataSource.length,
+    success: true,
+    pageSize,
+    current: parseInt(`${params.current}`, 10) || 1,
+  };
+
+  return res.json(result);
+}
+
+
+export default {
+  'GET /api/mock/getDCSDeviceStatusList': getDCSDeviceStatusList,
+};

mock/StaffEmployee.mock.ts

@@ -0,0 +1,23 @@
+// @ts-ignore
+import { Request, Response } from 'express';
+
+export default {
+  'POST /employee/createEmployee': (req: Request, res: Response) => {
+    res.status(200).send({});
+  },
+  'DELETE /employee/deleteEmployee': (req: Request, res: Response) => {
+    res.status(200).send({});
+  },
+  'DELETE /employee/deleteEmployeeByIds': (req: Request, res: Response) => {
+    res.status(200).send({});
+  },
+  'POST /employee/getEmployeeById': (req: Request, res: Response) => {
+    res.status(200).send({});
+  },
+  'POST /employee/getEmployeeList': (req: Request, res: Response) => {
+    res.status(200).send({});
+  },
+  'PUT /employee/updateEmployee': (req: Request, res: Response) => {
+    res.status(200).send({});
+  },
+};

mock/listTableList.ts

@@ -0,0 +1,176 @@
+import { Request, Response } from 'express';
+import moment from 'moment';
+import { parse } from 'url';
+
+// mock tableListDataSource
+const genList = (current: number, pageSize: number) => {
+  const tableListDataSource: API.RuleListItem[] = [];
+
+  for (let i = 0; i < pageSize; i += 1) {
+    const index = (current - 1) * 10 + i;
+    tableListDataSource.push({
+      key: index,
+      disabled: i % 6 === 0,
+      href: 'https://ant.design',
+      avatar: [
+        'https://gw.alipayobjects.com/zos/rmsportal/eeHMaZBwmTvLdIwMfBpg.png',
+        'https://gw.alipayobjects.com/zos/rmsportal/udxAbMEhpwthVVcjLXik.png',
+      ][i % 2],
+      name: `TradeCode ${index}`,
+      owner: '曲丽丽',
+      desc: '这是一段描述',
+      callNo: Math.floor(Math.random() * 1000),
+      status: Math.floor(Math.random() * 10) % 4,
+      updatedAt: moment().format('YYYY-MM-DD'),
+      createdAt: moment().format('YYYY-MM-DD'),
+      progress: Math.ceil(Math.random() * 100),
+    });
+  }
+  tableListDataSource.reverse();
+  return tableListDataSource;
+};
+
+let tableListDataSource = genList(1, 100);
+
+function getRule(req: Request, res: Response, u: string) {
+  let realUrl = u;
+  if (!realUrl || Object.prototype.toString.call(realUrl) !== '[object String]') {
+    realUrl = req.url;
+  }
+  const { current = 1, pageSize = 10 } = req.query;
+  const params = parse(realUrl, true).query as unknown as API.PageParams &
+    API.RuleListItem & {
+      sorter: any;
+      filter: any;
+    };
+
+  let dataSource = [...tableListDataSource].slice(
+    ((current as number) - 1) * (pageSize as number),
+    (current as number) * (pageSize as number),
+  );
+  if (params.sorter) {
+    const sorter = JSON.parse(params.sorter);
+    dataSource = dataSource.sort((prev, next) => {
+      let sortNumber = 0;
+      (Object.keys(sorter) as Array<keyof API.RuleListItem>).forEach((key) => {
+        let nextSort = next?.[key] as number;
+        let preSort = prev?.[key] as number;
+        if (sorter[key] === 'descend') {
+          if (preSort - nextSort > 0) {
+            sortNumber += -1;
+          } else {
+            sortNumber += 1;
+          }
+          return;
+        }
+        if (preSort - nextSort > 0) {
+          sortNumber += 1;
+        } else {
+          sortNumber += -1;
+        }
+      });
+      return sortNumber;
+    });
+  }
+  if (params.filter) {
+    const filter = JSON.parse(params.filter as any) as {
+      [key: string]: string[];
+    };
+    if (Object.keys(filter).length > 0) {
+      dataSource = dataSource.filter((item) => {
+        return (Object.keys(filter) as Array<keyof API.RuleListItem>).some((key) => {
+          if (!filter[key]) {
+            return true;
+          }
+          if (filter[key].includes(`${item[key]}`)) {
+            return true;
+          }
+          return false;
+        });
+      });
+    }
+  }
+
+  if (params.name) {
+    dataSource = dataSource.filter((data) => data?.name?.includes(params.name || ''));
+  }
+  const result = {
+    data: dataSource,
+    total: tableListDataSource.length,
+    success: true,
+    pageSize,
+    current: parseInt(`${params.current}`, 10) || 1,
+  };
+
+  return res.json(result);
+}
+
+function postRule(req: Request, res: Response, u: string, b: Request) {
+  let realUrl = u;
+  if (!realUrl || Object.prototype.toString.call(realUrl) !== '[object String]') {
+    realUrl = req.url;
+  }
+
+  const body = (b && b.body) || req.body;
+  const { method, name, desc, key } = body;
+
+  switch (method) {
+    /* eslint no-case-declarations:0 */
+    case 'delete':
+      tableListDataSource = tableListDataSource.filter((item) => key.indexOf(item.key) === -1);
+      break;
+    case 'post':
+      (() => {
+        const i = Math.ceil(Math.random() * 10000);
+        const newRule: API.RuleListItem = {
+          key: tableListDataSource.length,
+          href: 'https://ant.design',
+          avatar: [
+            'https://gw.alipayobjects.com/zos/rmsportal/eeHMaZBwmTvLdIwMfBpg.png',
+            'https://gw.alipayobjects.com/zos/rmsportal/udxAbMEhpwthVVcjLXik.png',
+          ][i % 2],
+          name,
+          owner: '曲丽丽',
+          desc,
+          callNo: Math.floor(Math.random() * 1000),
+          status: Math.floor(Math.random() * 10) % 2,
+          updatedAt: moment().format('YYYY-MM-DD'),
+          createdAt: moment().format('YYYY-MM-DD'),
+          progress: Math.ceil(Math.random() * 100),
+        };
+        tableListDataSource.unshift(newRule);
+        return res.json(newRule);
+      })();
+      return;
+
+    case 'update':
+      (() => {
+        let newRule = {};
+        tableListDataSource = tableListDataSource.map((item) => {
+          if (item.key === key) {
+            newRule = { ...item, desc, name };
+            return { ...item, desc, name };
+          }
+          return item;
+        });
+        return res.json(newRule);
+      })();
+      return;
+    default:
+      break;
+  }
+
+  const result = {
+    list: tableListDataSource,
+    pagination: {
+      total: tableListDataSource.length,
+    },
+  };
+
+  res.json(result);
+}
+
+export default {
+  'GET /api/rule': getRule,
+  'POST /api/rule': postRule,
+};

mock/modelDetail.ts

@@ -0,0 +1,68 @@
+/*
+ * @Author: zhoux zhouxia@supervision.ltd
+ * @Date: 2023-11-09 14:29:49
+ * @LastEditors: zhoux zhouxia@supervision.ltd
+ * @LastEditTime: 2023-11-09 15:34:50
+ * @FilePath: \general-ai-platform-web\mock\modelDetail.ts
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
+import { Request, Response } from 'express';
+import { parse } from 'url';
+
+// mock tableListDataSource
+const genData = (params: Record<string, any>): Record<string, any> => {
+  const data: Record<string, any> = {
+    categoryFkId: 2,
+    createTime: '2023-10-20T06:23:56.158622Z',
+    defaultVersionFkId: null,
+    id: params.id,
+    name: '离岗',
+    remark: '',
+    updateTime: '2023-10-20T06:23:56.158622Z',
+  };
+
+  //   key: index,
+  //   disabled: i % 6 === 0,
+  //   href: 'https://ant.design',
+  //   avatar: [
+  //     'https://gw.alipayobjects.com/zos/rmsportal/eeHMaZBwmTvLdIwMfBpg.png',
+  //     'https://gw.alipayobjects.com/zos/rmsportal/udxAbMEhpwthVVcjLXik.png',
+  //   ][i % 2],
+  //   name: `TradeCode ${index}`,
+  //   owner: '曲丽丽',
+  //   desc: '这是一段描述',
+  //   callNo: Math.floor(Math.random() * 1000),
+  //   status: Math.floor(Math.random() * 10) % 4,
+  //   updatedAt: moment().format('YYYY-MM-DD'),
+  //   createdAt: moment().format('YYYY-MM-DD'),
+  //   progress: Math.ceil(Math.random() * 100),
+
+  return data;
+};
+
+function getModelDetail(req: Request, res: Response, u: string, b: Request) {
+//   let realUrl = u;
+//   if (!realUrl || Object.prototype.toString.call(realUrl) !== '[object String]') {
+//     realUrl = req.url;
+//   }
+
+//   const body = (b && b.body) || req.body;
+//   const { method, name, desc, key } = body;
+//   const params = parse(realUrl, true).query as unknown as API.PageParams &
+//     API.RuleListItem & {
+//       sorter: any;
+//       filter: any;
+//     };
+//   console.log(req, 'getModelDetailApi');
+  const result = {
+    data: genData({id: 2}),
+    success: true,
+    msg: '获取成功',
+  };
+
+  return res.json(result);
+}
+
+export default {
+  'GET /api/v1/mock/model/detail': getModelDetail,
+};

mock/notices.ts

@@ -0,0 +1,115 @@
+import { Request, Response } from 'express';
+
+const getNotices = (req: Request, res: Response) => {
+  res.json({
+    data: [
+      {
+        id: '000000001',
+        avatar:
+          'https://mdn.alipayobjects.com/yuyan_qk0oxh/afts/img/MSbDR4FR2MUAAAAAAAAAAAAAFl94AQBr',
+        title: '你收到了 14 份新周报',
+        datetime: '2017-08-09',
+        type: 'notification',
+      },
+      {
+        id: '000000002',
+        avatar:
+          'https://mdn.alipayobjects.com/yuyan_qk0oxh/afts/img/hX-PTavYIq4AAAAAAAAAAAAAFl94AQBr',
+        title: '你推荐的 曲妮妮 已通过第三轮面试',
+        datetime: '2017-08-08',
+        type: 'notification',
+      },
+      {
+        id: '000000003',
+        avatar:
+          'https://mdn.alipayobjects.com/yuyan_qk0oxh/afts/img/jHX5R5l3QjQAAAAAAAAAAAAAFl94AQBr',
+        title: '这种模板可以区分多种通知类型',
+        datetime: '2017-08-07',
+        read: true,
+        type: 'notification',
+      },
+      {
+        id: '000000004',
+        avatar:
+          'https://mdn.alipayobjects.com/yuyan_qk0oxh/afts/img/Wr4mQqx6jfwAAAAAAAAAAAAAFl94AQBr',
+        title: '左侧图标用于区分不同的类型',
+        datetime: '2017-08-07',
+        type: 'notification',
+      },
+      {
+        id: '000000005',
+        avatar:
+          'https://mdn.alipayobjects.com/yuyan_qk0oxh/afts/img/Mzj_TbcWUj4AAAAAAAAAAAAAFl94AQBr',
+        title: '内容不要超过两行字，超出时自动截断',
+        datetime: '2017-08-07',
+        type: 'notification',
+      },
+      {
+        id: '000000006',
+        avatar:
+          'https://mdn.alipayobjects.com/yuyan_qk0oxh/afts/img/eXLzRbPqQE4AAAAAAAAAAAAAFl94AQBr',
+        title: '曲丽丽 评论了你',
+        description: '描述信息描述信息描述信息',
+        datetime: '2017-08-07',
+        type: 'message',
+        clickClose: true,
+      },
+      {
+        id: '000000007',
+        avatar:
+          'https://mdn.alipayobjects.com/yuyan_qk0oxh/afts/img/w5mRQY2AmEEAAAAAAAAAAAAAFl94AQBr',
+        title: '朱偏右 回复了你',
+        description: '这种模板用于提醒谁与你发生了互动，左侧放『谁』的头像',
+        datetime: '2017-08-07',
+        type: 'message',
+        clickClose: true,
+      },
+      {
+        id: '000000008',
+        avatar:
+          'https://mdn.alipayobjects.com/yuyan_qk0oxh/afts/img/wPadR5M9918AAAAAAAAAAAAAFl94AQBr',
+        title: '标题',
+        description: '这种模板用于提醒谁与你发生了互动，左侧放『谁』的头像',
+        datetime: '2017-08-07',
+        type: 'message',
+        clickClose: true,
+      },
+      {
+        id: '000000009',
+        title: '任务名称',
+        description: '任务需要在 2017-01-12 20:00 前启动',
+        extra: '未开始',
+        status: 'todo',
+        type: 'event',
+      },
+      {
+        id: '000000010',
+        title: '第三方紧急代码变更',
+        description: '冠霖提交于 2017-01-06，需在 2017-01-07 前完成代码变更任务',
+        extra: '马上到期',
+        status: 'urgent',
+        type: 'event',
+      },
+      {
+        id: '000000011',
+        title: '信息安全考试',
+        description: '指派竹尔于 2017-01-09 前完成更新并发布',
+        extra: '已耗时 8 天',
+        status: 'doing',
+        type: 'event',
+      },
+      {
+        id: '000000012',
+        title: 'ABCD 版本发布',
+        description: '冠霖提交于 2017-01-06，需在 2017-01-07 前完成代码变更任务',
+        extra: '进行中',
+        status: 'processing',
+        type: 'event',
+      },
+    ],
+  });
+};
+
+export default {
+  'GET /api/notices': getNotices,
+};

mock/requestRecord.mock.js

@@ -0,0 +1,324 @@
+module.exports = {
+  'GET /api/currentUser': {
+    data: {
+      name: 'Serati Ma',
+      avatar: 'https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png',
+      userid: '00000001',
+      email: 'antdesign@alipay.com',
+      signature: '海纳百川，有容乃大',
+      title: '交互专家',
+      group: '蚂蚁金服－某某某事业群－某某平台部－某某技术部－UED',
+      tags: [
+        { key: '0', label: '很有想法的' },
+        { key: '1', label: '专注设计' },
+        { key: '2', label: '辣~' },
+        { key: '3', label: '大长腿' },
+        { key: '4', label: '川妹子' },
+        { key: '5', label: '海纳百川' },
+      ],
+      notifyCount: 12,
+      unreadCount: 11,
+      country: 'China',
+      geographic: {
+        province: { label: '浙江省', key: '330000' },
+        city: { label: '杭州市', key: '330100' },
+      },
+      address: '西湖区工专路 77 号',
+      phone: '0752-268888888',
+    },
+  },
+  'GET /api/rule': {
+    data: [
+      {
+        key: 99,
+        disabled: false,
+        href: 'https://ant.design',
+        avatar: 'https://gw.alipayobjects.com/zos/rmsportal/udxAbMEhpwthVVcjLXik.png',
+        name: 'TradeCode 99',
+        owner: '曲丽丽',
+        desc: '这是一段描述',
+        callNo: 503,
+        status: '0',
+        updatedAt: '2022-12-06T05:00:57.040Z',
+        createdAt: '2022-12-06T05:00:57.040Z',
+        progress: 81,
+      },
+      {
+        key: 98,
+        disabled: false,
+        href: 'https://ant.design',
+        avatar: 'https://gw.alipayobjects.com/zos/rmsportal/eeHMaZBwmTvLdIwMfBpg.png',
+        name: 'TradeCode 98',
+        owner: '曲丽丽',
+        desc: '这是一段描述',
+        callNo: 164,
+        status: '0',
+        updatedAt: '2022-12-06T05:00:57.040Z',
+        createdAt: '2022-12-06T05:00:57.040Z',
+        progress: 12,
+      },
+      {
+        key: 97,
+        disabled: false,
+        href: 'https://ant.design',
+        avatar: 'https://gw.alipayobjects.com/zos/rmsportal/udxAbMEhpwthVVcjLXik.png',
+        name: 'TradeCode 97',
+        owner: '曲丽丽',
+        desc: '这是一段描述',
+        callNo: 174,
+        status: '1',
+        updatedAt: '2022-12-06T05:00:57.040Z',
+        createdAt: '2022-12-06T05:00:57.040Z',
+        progress: 81,
+      },
+      {
+        key: 96,
+        disabled: true,
+        href: 'https://ant.design',
+        avatar: 'https://gw.alipayobjects.com/zos/rmsportal/eeHMaZBwmTvLdIwMfBpg.png',
+        name: 'TradeCode 96',
+        owner: '曲丽丽',
+        desc: '这是一段描述',
+        callNo: 914,
+        status: '0',
+        updatedAt: '2022-12-06T05:00:57.040Z',
+        createdAt: '2022-12-06T05:00:57.040Z',
+        progress: 7,
+      },
+      {
+        key: 95,
+        disabled: false,
+        href: 'https://ant.design',
+        avatar: 'https://gw.alipayobjects.com/zos/rmsportal/udxAbMEhpwthVVcjLXik.png',
+        name: 'TradeCode 95',
+        owner: '曲丽丽',
+        desc: '这是一段描述',
+        callNo: 698,
+        status: '2',
+        updatedAt: '2022-12-06T05:00:57.040Z',
+        createdAt: '2022-12-06T05:00:57.040Z',
+        progress: 82,
+      },
+      {
+        key: 94,
+        disabled: false,
+        href: 'https://ant.design',
+        avatar: 'https://gw.alipayobjects.com/zos/rmsportal/eeHMaZBwmTvLdIwMfBpg.png',
+        name: 'TradeCode 94',
+        owner: '曲丽丽',
+        desc: '这是一段描述',
+        callNo: 488,
+        status: '1',
+        updatedAt: '2022-12-06T05:00:57.040Z',
+        createdAt: '2022-12-06T05:00:57.040Z',
+        progress: 14,
+      },
+      {
+        key: 93,
+        disabled: false,
+        href: 'https://ant.design',
+        avatar: 'https://gw.alipayobjects.com/zos/rmsportal/udxAbMEhpwthVVcjLXik.png',
+        name: 'TradeCode 93',
+        owner: '曲丽丽',
+        desc: '这是一段描述',
+        callNo: 580,
+        status: '2',
+        updatedAt: '2022-12-06T05:00:57.040Z',
+        createdAt: '2022-12-06T05:00:57.040Z',
+        progress: 77,
+      },
+      {
+        key: 92,
+        disabled: false,
+        href: 'https://ant.design',
+        avatar: 'https://gw.alipayobjects.com/zos/rmsportal/eeHMaZBwmTvLdIwMfBpg.png',
+        name: 'TradeCode 92',
+        owner: '曲丽丽',
+        desc: '这是一段描述',
+        callNo: 244,
+        status: '3',
+        updatedAt: '2022-12-06T05:00:57.040Z',
+        createdAt: '2022-12-06T05:00:57.040Z',
+        progress: 58,
+      },
+      {
+        key: 91,
+        disabled: false,
+        href: 'https://ant.design',
+        avatar: 'https://gw.alipayobjects.com/zos/rmsportal/udxAbMEhpwthVVcjLXik.png',
+        name: 'TradeCode 91',
+        owner: '曲丽丽',
+        desc: '这是一段描述',
+        callNo: 959,
+        status: '0',
+        updatedAt: '2022-12-06T05:00:57.040Z',
+        createdAt: '2022-12-06T05:00:57.040Z',
+        progress: 66,
+      },
+      {
+        key: 90,
+        disabled: true,
+        href: 'https://ant.design',
+        avatar: 'https://gw.alipayobjects.com/zos/rmsportal/eeHMaZBwmTvLdIwMfBpg.png',
+        name: 'TradeCode 90',
+        owner: '曲丽丽',
+        desc: '这是一段描述',
+        callNo: 958,
+        status: '0',
+        updatedAt: '2022-12-06T05:00:57.040Z',
+        createdAt: '2022-12-06T05:00:57.040Z',
+        progress: 72,
+      },
+      {
+        key: 89,
+        disabled: false,
+        href: 'https://ant.design',
+        avatar: 'https://gw.alipayobjects.com/zos/rmsportal/udxAbMEhpwthVVcjLXik.png',
+        name: 'TradeCode 89',
+        owner: '曲丽丽',
+        desc: '这是一段描述',
+        callNo: 301,
+        status: '2',
+        updatedAt: '2022-12-06T05:00:57.040Z',
+        createdAt: '2022-12-06T05:00:57.040Z',
+        progress: 2,
+      },
+      {
+        key: 88,
+        disabled: false,
+        href: 'https://ant.design',
+        avatar: 'https://gw.alipayobjects.com/zos/rmsportal/eeHMaZBwmTvLdIwMfBpg.png',
+        name: 'TradeCode 88',
+        owner: '曲丽丽',
+        desc: '这是一段描述',
+        callNo: 277,
+        status: '1',
+        updatedAt: '2022-12-06T05:00:57.040Z',
+        createdAt: '2022-12-06T05:00:57.040Z',
+        progress: 12,
+      },
+      {
+        key: 87,
+        disabled: false,
+        href: 'https://ant.design',
+        avatar: 'https://gw.alipayobjects.com/zos/rmsportal/udxAbMEhpwthVVcjLXik.png',
+        name: 'TradeCode 87',
+        owner: '曲丽丽',
+        desc: '这是一段描述',
+        callNo: 810,
+        status: '1',
+        updatedAt: '2022-12-06T05:00:57.040Z',
+        createdAt: '2022-12-06T05:00:57.040Z',
+        progress: 82,
+      },
+      {
+        key: 86,
+        disabled: false,
+        href: 'https://ant.design',
+        avatar: 'https://gw.alipayobjects.com/zos/rmsportal/eeHMaZBwmTvLdIwMfBpg.png',
+        name: 'TradeCode 86',
+        owner: '曲丽丽',
+        desc: '这是一段描述',
+        callNo: 780,
+        status: '3',
+        updatedAt: '2022-12-06T05:00:57.040Z',
+        createdAt: '2022-12-06T05:00:57.040Z',
+        progress: 22,
+      },
+      {
+        key: 85,
+        disabled: false,
+        href: 'https://ant.design',
+        avatar: 'https://gw.alipayobjects.com/zos/rmsportal/udxAbMEhpwthVVcjLXik.png',
+        name: 'TradeCode 85',
+        owner: '曲丽丽',
+        desc: '这是一段描述',
+        callNo: 705,
+        status: '3',
+        updatedAt: '2022-12-06T05:00:57.040Z',
+        createdAt: '2022-12-06T05:00:57.040Z',
+        progress: 12,
+      },
+      {
+        key: 84,
+        disabled: true,
+        href: 'https://ant.design',
+        avatar: 'https://gw.alipayobjects.com/zos/rmsportal/eeHMaZBwmTvLdIwMfBpg.png',
+        name: 'TradeCode 84',
+        owner: '曲丽丽',
+        desc: '这是一段描述',
+        callNo: 203,
+        status: '0',
+        updatedAt: '2022-12-06T05:00:57.040Z',
+        createdAt: '2022-12-06T05:00:57.040Z',
+        progress: 79,
+      },
+      {
+        key: 83,
+        disabled: false,
+        href: 'https://ant.design',
+        avatar: 'https://gw.alipayobjects.com/zos/rmsportal/udxAbMEhpwthVVcjLXik.png',
+        name: 'TradeCode 83',
+        owner: '曲丽丽',
+        desc: '这是一段描述',
+        callNo: 491,
+        status: '2',
+        updatedAt: '2022-12-06T05:00:57.040Z',
+        createdAt: '2022-12-06T05:00:57.040Z',
+        progress: 59,
+      },
+      {
+        key: 82,
+        disabled: false,
+        href: 'https://ant.design',
+        avatar: 'https://gw.alipayobjects.com/zos/rmsportal/eeHMaZBwmTvLdIwMfBpg.png',
+        name: 'TradeCode 82',
+        owner: '曲丽丽',
+        desc: '这是一段描述',
+        callNo: 73,
+        status: '0',
+        updatedAt: '2022-12-06T05:00:57.040Z',
+        createdAt: '2022-12-06T05:00:57.040Z',
+        progress: 100,
+      },
+      {
+        key: 81,
+        disabled: false,
+        href: 'https://ant.design',
+        avatar: 'https://gw.alipayobjects.com/zos/rmsportal/udxAbMEhpwthVVcjLXik.png',
+        name: 'TradeCode 81',
+        owner: '曲丽丽',
+        desc: '这是一段描述',
+        callNo: 406,
+        status: '3',
+        updatedAt: '2022-12-06T05:00:57.040Z',
+        createdAt: '2022-12-06T05:00:57.040Z',
+        progress: 61,
+      },
+      {
+        key: 80,
+        disabled: false,
+        href: 'https://ant.design',
+        avatar: 'https://gw.alipayobjects.com/zos/rmsportal/eeHMaZBwmTvLdIwMfBpg.png',
+        name: 'TradeCode 80',
+        owner: '曲丽丽',
+        desc: '这是一段描述',
+        callNo: 112,
+        status: '2',
+        updatedAt: '2022-12-06T05:00:57.040Z',
+        createdAt: '2022-12-06T05:00:57.040Z',
+        progress: 20,
+      },
+    ],
+    total: 100,
+    success: true,
+    pageSize: 20,
+    current: 1,
+  },
+  'POST /api/login/outLogin': { data: {}, success: true },
+  'POST /api/login/account': {
+    status: 'ok',
+    type: 'account',
+    currentAuthority: 'admin',
+  },
+};

mock/route.ts

@@ -0,0 +1,5 @@
+export default {
+  '/api/auth_routes': {
+    '/form/advanced-form': { authority: ['admin', 'user'] },
+  },
+};

mock/user.ts

@@ -0,0 +1,203 @@
+import { Request, Response } from 'express';
+
+const waitTime = (time: number = 100) => {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve(true);
+    }, time);
+  });
+};
+
+async function getFakeCaptcha(req: Request, res: Response) {
+  await waitTime(2000);
+  return res.json('captcha-xxx');
+}
+
+const { ANT_DESIGN_PRO_ONLY_DO_NOT_USE_IN_YOUR_PRODUCTION } = process.env;
+
+/**
+ * 当前用户的权限，如果为空代表没登录
+ * current user access， if is '', user need login
+ * 如果是 pro 的预览，默认是有权限的
+ */
+let access = ANT_DESIGN_PRO_ONLY_DO_NOT_USE_IN_YOUR_PRODUCTION === 'site' ? 'admin' : '';
+
+const getAccess = () => {
+  return access;
+};
+
+// 代码中会兼容本地 service mock 以及部署站点的静态数据
+export default {
+  // 支持值为 Object 和 Array
+  'GET /api/currentUser': (req: Request, res: Response) => {
+    if (!getAccess()) {
+      res.status(401).send({
+        data: {
+          isLogin: false,
+        },
+        errorCode: '401',
+        errorMessage: '请先登录！',
+        success: true,
+      });
+      return;
+    }
+    res.send({
+      success: true,
+      data: {
+        name: 'Serati Ma',
+        avatar: 'https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png',
+        userid: '00000001',
+        email: 'antdesign@alipay.com',
+        signature: '海纳百川，有容乃大',
+        title: '交互专家',
+        group: '蚂蚁金服－某某某事业群－某某平台部－某某技术部－UED',
+        tags: [
+          {
+            key: '0',
+            label: '很有想法的',
+          },
+          {
+            key: '1',
+            label: '专注设计',
+          },
+          {
+            key: '2',
+            label: '辣~',
+          },
+          {
+            key: '3',
+            label: '大长腿',
+          },
+          {
+            key: '4',
+            label: '川妹子',
+          },
+          {
+            key: '5',
+            label: '海纳百川',
+          },
+        ],
+        notifyCount: 12,
+        unreadCount: 11,
+        country: 'China',
+        access: getAccess(),
+        geographic: {
+          province: {
+            label: '浙江省',
+            key: '330000',
+          },
+          city: {
+            label: '杭州市',
+            key: '330100',
+          },
+        },
+        address: '西湖区工专路 77 号',
+        phone: '0752-268888888',
+      },
+    });
+  },
+  // GET POST 可省略
+  'GET /api/users': [
+    {
+      key: '1',
+      name: 'John Brown',
+      age: 32,
+      address: 'New York No. 1 Lake Park',
+    },
+    {
+      key: '2',
+      name: 'Jim Green',
+      age: 42,
+      address: 'London No. 1 Lake Park',
+    },
+    {
+      key: '3',
+      name: 'Joe Black',
+      age: 32,
+      address: 'Sidney No. 1 Lake Park',
+    },
+  ],
+  'POST /api/login/account': async (req: Request, res: Response) => {
+    const { password, username, type } = req.body;
+    await waitTime(2000);
+    if (password === 'ant.design' && username === 'admin') {
+      res.send({
+        status: 'ok',
+        type,
+        currentAuthority: 'admin',
+      });
+      access = 'admin';
+      return;
+    }
+    if (password === 'ant.design' && username === 'user') {
+      res.send({
+        status: 'ok',
+        type,
+        currentAuthority: 'user',
+      });
+      access = 'user';
+      return;
+    }
+    if (type === 'mobile') {
+      res.send({
+        status: 'ok',
+        type,
+        currentAuthority: 'admin',
+      });
+      access = 'admin';
+      return;
+    }
+
+    res.send({
+      status: 'error',
+      type,
+      currentAuthority: 'guest',
+    });
+    access = 'guest';
+  },
+  'POST /api/login/outLogin': (req: Request, res: Response) => {
+    access = '';
+    res.send({ data: {}, success: true });
+  },
+  'POST /api/register': (req: Request, res: Response) => {
+    res.send({ status: 'ok', currentAuthority: 'user', success: true });
+  },
+  'GET /api/500': (req: Request, res: Response) => {
+    res.status(500).send({
+      timestamp: 1513932555104,
+      status: 500,
+      error: 'error',
+      message: 'error',
+      path: '/base/category/list',
+    });
+  },
+  'GET /api/404': (req: Request, res: Response) => {
+    res.status(404).send({
+      timestamp: 1513932643431,
+      status: 404,
+      error: 'Not Found',
+      message: 'No message available',
+      path: '/base/category/list/2121212',
+    });
+  },
+  'GET /api/403': (req: Request, res: Response) => {
+    res.status(403).send({
+      timestamp: 1513932555104,
+      status: 403,
+      error: 'Forbidden',
+      message: 'Forbidden',
+      path: '/base/category/list',
+    });
+  },
+  'GET /api/401': (req: Request, res: Response) => {
+    res.status(401).send({
+      timestamp: 1513932555104,
+      status: 401,
+      error: 'Unauthorized',
+      message: 'Unauthorized',
+      path: '/base/category/list',
+    });
+  },
+
+  'GET  /api/login/captcha': getFakeCaptcha,
+};

package.json

@@ -0,0 +1,137 @@
+{
+  "name": "ant-design-pro",
+  "version": "6.0.0",
+  "private": true,
+  "description": "An out-of-box UI solution for enterprise applications",
+  "scripts": {
+    "analyze": "cross-env ANALYZE=1 max build",
+    "build": "cross-env API_ENV=production max build",
+    "deploy": "npm run build && npm run gh-pages",
+    "dev": "npm run start:dev",
+    "gh-pages": "gh-pages -d dist",
+    "i18n-remove": "pro i18n-remove --locale=zh-CN --write",
+    "postinstall": "max setup",
+    "jest": "jest",
+    "lint": "npm run lint:js && npm run lint:prettier && npm run tsc",
+    "lint-staged": "lint-staged",
+    "lint-staged:js": "eslint --ext .js,.jsx,.ts,.tsx ",
+    "lint:fix": "eslint --fix --cache --ext .js,.jsx,.ts,.tsx --format=pretty ./src ",
+    "lint:js": "eslint --cache --ext .js,.jsx,.ts,.tsx --format=pretty ./src",
+    "lint:prettier": "prettier -c --write \"**/**.{js,jsx,tsx,ts,less,md,json}\" --end-of-line auto",
+    "openapi": "max openapi",
+    "prepare": "husky install",
+    "prettier": "prettier -c --write \"**/**.{js,jsx,tsx,ts,less,md,json}\"",
+    "preview": "npm run build && max preview --port 8000",
+    "record": "cross-env NODE_ENV=development REACT_APP_ENV=test max record --scene=login",
+    "serve": "umi-serve",
+    "start": "cross-env UMI_ENV=dev max dev",
+    "start:dev": "cross-env REACT_APP_ENV=dev MOCK=none UMI_ENV=dev max dev",
+    "start:no-mock": "cross-env MOCK=none UMI_ENV=dev max dev",
+    "start:pre": "cross-env REACT_APP_ENV=pre UMI_ENV=dev max dev",
+    "start:test": "cross-env REACT_APP_ENV=test MOCK=none UMI_ENV=dev max dev",
+    "test": "jest",
+    "test:coverage": "npm run jest -- --coverage",
+    "test:update": "npm run jest -- -u",
+    "tsc": "tsc --noEmit"
+  },
+  "lint-staged": {
+    "**/*.{js,jsx,ts,tsx}": "npm run lint-staged:js",
+    "**/*.{js,jsx,tsx,ts,less,md,json}": [
+      "prettier --write"
+    ]
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not ie <= 10"
+  ],
+  "dependencies": {
+    "@ant-design/charts": "^1.4.2",
+    "@ant-design/icons": "^4.8.0",
+    "@ant-design/pro-components": "^2.6.29",
+    "@ant-design/use-emotion-css": "1.0.4",
+    "@umijs/route-utils": "^2.2.2",
+    "antd": "^5.5.1",
+    "classnames": "^2.3.2",
+    "echarts": "^5.4.3",
+    "echarts-for-react": "^3.0.2",
+    "fabric": "^5.3.0",
+    "js-yaml": "^4.1.0",
+    "lodash": "^4.17.21",
+    "moment": "^2.29.4",
+    "omit.js": "^2.0.2",
+    "querystring": "^0.2.1",
+    "rc-menu": "^9.9.2",
+    "rc-util": "^5.32.2",
+    "react": "^18.2.0",
+    "react-cookies": "^0.1.1",
+    "react-dev-inspector": "^1.8.4",
+    "react-dom": "^18.2.0",
+    "react-helmet-async": "^1.3.0",
+    "video.js": "^8.5.2",
+    "webrtc-streamer": "^0.8.3-4-g2d0afce"
+  },
+  "devDependencies": {
+    "@ant-design/pro-cli": "^2.1.5",
+    "@testing-library/react": "^13.4.0",
+    "@types/classnames": "^2.3.1",
+    "@types/express": "^4.17.17",
+    "@types/fabric": "^5.3.6",
+    "@types/history": "^4.7.11",
+    "@types/jest": "^29.5.1",
+    "@types/js-yaml": "^4.0.8",
+    "@types/lodash": "^4.14.195",
+    "@types/react": "^18.2.7",
+    "@types/react-dom": "^18.2.4",
+    "@types/react-helmet": "^6.1.6",
+    "@umijs/fabric": "^2.14.1",
+    "@umijs/lint": "^4.0.69",
+    "@umijs/max": "^4.0.69",
+    "cross-env": "^7.0.3",
+    "eslint": "^8.41.0",
+    "express": "^4.18.2",
+    "gh-pages": "^3.2.3",
+    "husky": "^7.0.4",
+    "jest": "^29.5.0",
+    "jest-environment-jsdom": "^29.5.0",
+    "lint-staged": "^10.5.4",
+    "mockjs": "^1.1.0",
+    "prettier": "^2.8.8",
+    "swagger-ui-dist": "^4.19.0",
+    "ts-node": "^10.9.1",
+    "typescript": "^5.0.0",
+    "umi-presets-pro": "^2.0.3"
+  },
+  "engines": {
+    "node": ">=12.0.0"
+  },
+  "create-umi": {
+    "ignoreScript": [
+      "docker*",
+      "functions*",
+      "site",
+      "generateMock"
+    ],
+    "ignoreDependencies": [
+      "netlify*",
+      "serverless"
+    ],
+    "ignore": [
+      ".dockerignore",
+      ".git",
+      ".github",
+      ".gitpod.yml",
+      "CODE_OF_CONDUCT.md",
+      "Dockerfile",
+      "Dockerfile.*",
+      "lambda",
+      "LICENSE",
+      "netlify.toml",
+      "README.*.md",
+      "azure-pipelines.yml",
+      "docker",
+      "CNAME",
+      "create-umi"
+    ]
+  }
+}

public/CNAME

@@ -0,0 +1 @@
+preview.pro.ant.design

public/icons/fault.svg

@@ -0,0 +1,12 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_3920_33855)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6 1.25L0.5 10.75H11.5L6 1.25Z" stroke="#E80D0D" stroke-linejoin="round"/>
+<path d="M6 8.75V9" stroke="#E80D0D" stroke-linecap="round"/>
+<path d="M6 4.75L6.00208 7.24988" stroke="#E80D0D" stroke-linecap="round"/>
+</g>
+<defs>
+<clipPath id="clip0_3920_33855">
+<rect width="12" height="12" fill="white"/>
+</clipPath>
+</defs>
+</svg>

public/icons/notice.svg

@@ -0,0 +1,5 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9 7.89008C8.6925 7.89008 8.4375 7.63508 8.4375 7.32758V4.83008C8.4375 4.52258 8.6925 4.26758 9 4.26758C9.3075 4.26758 9.5625 4.52258 9.5625 4.83008V7.32758C9.5625 7.64258 9.3075 7.89008 9 7.89008Z" fill="#333333"/>
+<path d="M9.01502 15.2622C7.08002 15.2622 5.15252 14.9547 3.31502 14.3397C2.63252 14.1147 2.11502 13.6272 1.89002 13.0122C1.66502 12.3972 1.74002 11.6922 2.10752 11.0772L3.06002 9.48719C3.27002 9.13469 3.45752 8.47469 3.45752 8.06219V6.48719C3.45752 3.41969 5.94752 0.929688 9.01502 0.929688C12.0825 0.929688 14.5725 3.41969 14.5725 6.48719V8.06219C14.5725 8.46719 14.76 9.13469 14.97 9.48719L15.9225 11.0772C16.275 11.6622 16.335 12.3597 16.1025 12.9972C15.87 13.6347 15.36 14.1222 14.715 14.3397C12.8775 14.9622 10.95 15.2622 9.01502 15.2622ZM9.01502 2.06219C6.57002 2.06219 4.58252 4.04969 4.58252 6.49469V8.06969C4.58252 8.67719 4.34252 9.55469 4.02752 10.0722L3.07502 11.6697C2.88002 11.9922 2.83502 12.3372 2.94752 12.6372C3.06002 12.9372 3.31502 13.1622 3.67502 13.2822C7.12502 14.4297 10.92 14.4297 14.37 13.2822C14.6925 13.1772 14.94 12.9372 15.0525 12.6222C15.1725 12.3072 15.135 11.9622 14.9625 11.6697L14.01 10.0797C13.695 9.56219 13.455 8.68469 13.455 8.07719V6.50219C13.4475 4.04969 11.46 2.06219 9.01502 2.06219Z" fill="#333333"/>
+<path d="M8.99994 17.1752C8.19744 17.1752 7.40994 16.8452 6.83994 16.2752C6.26994 15.7052 5.93994 14.9177 5.93994 14.1152H7.06494C7.06494 14.6252 7.27494 15.1202 7.63494 15.4802C7.99494 15.8402 8.48994 16.0502 8.99994 16.0502C10.0649 16.0502 10.9349 15.1802 10.9349 14.1152H12.0599C12.0599 15.8027 10.6874 17.1752 8.99994 17.1752Z" fill="#333333"/>
+</svg>

public/icons/offline.svg

@@ -0,0 +1,11 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_3920_33846)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6 11C8.76143 11 11 8.76143 11 6C11 3.23857 8.76143 1 6 1C3.23857 1 1 3.23857 1 6C1 8.76143 3.23857 11 6 11Z" fill="#CCCCCC" stroke="#CCCCCC" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M3.75 8.25L8.25 3.75" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_3920_33846">
+<rect width="12" height="12" fill="white"/>
+</clipPath>
+</defs>
+</svg>

public/icons/online.svg

@@ -0,0 +1,11 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_3924_33859)">
+<path d="M6 11C7.3807 11 8.6307 10.4404 9.53553 9.53553C10.4404 8.6307 11 7.3807 11 6C11 4.6193 10.4404 3.3693 9.53553 2.46446C8.6307 1.55964 7.3807 1 6 1C4.6193 1 3.3693 1.55964 2.46446 2.46446C1.55964 3.3693 1 4.6193 1 6C1 7.3807 1.55964 8.6307 2.46446 9.53553C3.3693 10.4404 4.6193 11 6 11Z" fill="#52C41A" stroke="#52C41A" stroke-linejoin="round"/>
+<path d="M4 6L5.5 7.5L8.5 4.5" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_3924_33859">
+<rect width="12" height="12" fill="white"/>
+</clipPath>
+</defs>
+</svg>

public/icons/running.svg

@@ -0,0 +1,11 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_3928_41280)">
+<path d="M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z" fill="#FAAD14" stroke="#FAAD14" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6 1V5.58579C6 5.851 5.89464 6.10536 5.70711 6.29289L2.5 9.5" stroke="white" stroke-linecap="round"/>
+</g>
+<defs>
+<clipPath id="clip0_3928_41280">
+<rect width="12" height="12" fill="white"/>
+</clipPath>
+</defs>
+</svg>

public/images/icons/logo.svg

@@ -0,0 +1,24 @@
+<svg width="64" height="24" viewBox="0 0 64 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_3180_54416" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="64" height="24">
+<rect width="64" height="24" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_3180_54416)">
+<path d="M14.039 4.05812L11.9366 4.49908C11.8873 4.51252 11.8707 4.57396 11.9072 4.6098L13.5648 6.2674C13.6006 6.30324 13.6627 6.28724 13.6755 6.23796L14.1203 4.1394C14.1337 4.09012 14.0883 4.04532 14.039 4.05812Z" fill="#E42F2F"/>
+<path d="M15.1781 2.93749L12.133 3.75349C12.0972 3.76309 12.0856 3.80789 12.1112 3.83413L14.3404 6.06325C14.3666 6.08949 14.4114 6.07733 14.421 6.04149L15.237 2.99637C15.2466 2.96053 15.214 2.92789 15.1781 2.93749Z" fill="#FAEC18"/>
+<path d="M21.4489 12.7755L17.8688 9.19532L16.4736 7.80013C16.3801 7.70669 16.2284 7.70669 16.1344 7.80013L10.0608 13.8737C9.9494 13.9851 9.76828 13.9851 9.65692 13.8737L8.0006 12.2174C7.88924 12.106 7.88924 11.9249 8.0006 11.8136L13.0803 6.73388C13.1737 6.64044 13.1737 6.48877 13.0803 6.39469L11.7017 5.01612C11.6083 4.92268 11.4566 4.92268 11.3625 5.01612L4.47804 11.9019C4.3846 11.9953 4.3846 12.147 4.47804 12.2411L8.10108 15.8641L9.49628 17.2593C9.58972 17.3528 9.7414 17.3528 9.83548 17.2593L16.1657 10.9291C16.2771 10.8177 16.4582 10.8177 16.5696 10.9291L18.2259 12.5854C18.3372 12.6968 18.3372 12.8779 18.2259 12.9892L11.8956 19.3195C11.8022 19.4129 11.8022 19.5646 11.8956 19.6587L13.2313 20.9944C13.3248 21.0878 13.4764 21.0878 13.5705 20.9944L21.4496 13.1153C21.5424 13.0206 21.5424 12.8689 21.4489 12.7755Z" fill="#154DDD"/>
+<path d="M33.2839 6.32767H32.0116V5.51871H29.5962V6.21951H28.3239V5.51871H26.1569L26.0596 4.41919H28.3239V3.58911H29.5962V4.41919H32.0116V3.58911H33.2839V4.41919H35.6884V5.51871H33.2839V6.32767ZM26.0596 11.0611L27.0087 8.64575H28.2164L27.3217 11.0611H26.0596ZM33.8445 11.6109C33.7581 12.441 33.2193 12.9587 32.3137 13.0125C31.785 13.0554 30.9441 12.9907 30.2433 12.8723L29.9629 11.8048C30.5882 11.9232 31.3217 11.9776 31.7633 11.945C32.281 11.9232 32.5287 11.6864 32.5613 11.2224C32.6369 10.2842 32.626 9.14111 32.5613 8.24639C32.5505 8.13887 32.5185 8.09535 32.4103 8.09535H30.5127C30.3725 10.6938 29.2621 11.977 26.5985 13.2819L26.2644 12.064C28.162 11.1046 29.0567 9.97247 29.2186 8.09599H26.8468L26.7604 7.01759H29.2404V6.30591H30.5345V7.01759H33.0144C33.5213 7.01759 33.8017 7.32991 33.8445 7.81567C33.8663 8.02047 33.8765 8.21439 33.8874 8.41983H35.0624L35.9252 11.072H34.6209L33.8983 8.65663C33.9629 9.70239 33.9412 10.727 33.8445 11.6109Z" fill="#154DDD"/>
+<path d="M39.57 9.79973V9.85349C39.57 10.8884 39.538 11.8913 39.2033 13.2391H37.8555C38.3406 11.5137 38.3515 10.4141 38.3515 9.19557V4.51589C38.3515 4.03077 38.6427 3.76133 39.1604 3.76133H40.8961C41.4139 3.76133 41.7044 4.01989 41.7044 4.51589V12.1716C41.7044 12.7649 41.2948 13.1309 40.6804 13.1745C40.3675 13.1962 40.0443 13.1527 39.8395 13.0989L39.57 11.9885C39.7428 12.0314 39.9905 12.0532 40.1736 12.0532C40.3784 12.0532 40.4865 11.9348 40.4865 11.7511V9.79973H39.57ZM40.4865 4.96902C40.4865 4.90438 40.4436 4.86086 40.379 4.86086H39.6891C39.6244 4.86086 39.5707 4.90374 39.5707 4.96902V6.32773H40.4871V4.96902H40.4865ZM40.4865 7.31973H39.57V8.80773H40.4865V7.31973ZM47.6993 11.8593V12.9805H42.082L41.9745 11.8593H44.3252V9.67046H42.5896L42.4814 8.54917H44.3252V6.53254H43.387C43.2897 6.97478 43.1713 7.39525 43.0203 7.79397H41.8343C42.2439 6.65093 42.4596 5.45413 42.4923 4.07429H43.6462C43.6353 4.53765 43.6033 4.99077 43.5598 5.41125H44.3252V3.54565H45.5867V5.41125H47.3659V6.53254H45.5867V8.54917H47.3012V9.67046H45.5867V11.8593H47.6993Z" fill="#154DDD"/>
+<path d="M59.5924 11.9886L59.2039 13.3364C56.8212 12.3335 55.3978 11.5143 54.6433 9.9617C53.8887 11.4171 52.4007 12.4846 49.9853 13.3255L49.6404 12.0315C52.3361 10.9748 53.4356 10.0692 53.8023 8.47306H49.9425L49.8241 7.33002H53.9322C53.9431 7.18986 53.9431 7.03882 53.9431 6.88778V5.19498H50.6113L50.5037 4.09546H58.8058V5.19498H55.2577V7.14634V7.32938H59.3869V8.47242H55.3325C55.9482 10.3604 57.5329 11.2231 59.5924 11.9886Z" fill="#154DDD"/>
+<path d="M25.8777 18.3961L26.5938 18.3277C26.6367 18.5632 26.7244 18.7366 26.8562 18.8467C26.9881 18.9574 27.166 19.0125 27.3894 19.0125C27.6262 19.0125 27.8054 18.9632 27.925 18.8653C28.0454 18.7667 28.1055 18.6521 28.1055 18.5203C28.1055 18.4358 28.0799 18.3641 28.0294 18.3046C27.9788 18.2451 27.8905 18.1939 27.7644 18.1498C27.678 18.1203 27.4815 18.0685 27.175 17.9936C26.7801 17.8976 26.5036 17.7798 26.3442 17.6403C26.1202 17.4438 26.0082 17.2038 26.0082 16.9209C26.0082 16.7392 26.0607 16.5689 26.1663 16.4102C26.2719 16.2515 26.423 16.1312 26.6214 16.048C26.8198 15.9654 27.0585 15.9238 27.3388 15.9238C27.7964 15.9238 28.1407 16.0224 28.3724 16.2189C28.6041 16.4153 28.725 16.6777 28.7366 17.0061L28.0006 17.0381C27.9692 16.8544 27.9014 16.7226 27.7977 16.6419C27.694 16.5613 27.5385 16.5216 27.3311 16.5216C27.1174 16.5216 26.9497 16.5645 26.8287 16.6509C26.7506 16.7059 26.7116 16.7801 26.7116 16.8729C26.7116 16.9574 26.7481 17.0298 26.821 17.0899C26.9138 17.1661 27.1391 17.2461 27.4975 17.3286C27.8559 17.4112 28.1202 17.497 28.2924 17.5859C28.4646 17.6749 28.5983 17.7958 28.695 17.9488C28.7922 18.1024 28.8402 18.2918 28.8402 18.5178C28.8402 18.7226 28.782 18.9145 28.6662 19.0931C28.5503 19.2717 28.3858 19.4048 28.174 19.4918C27.9615 19.5789 27.6972 19.6224 27.3804 19.6224C26.9196 19.6224 26.5657 19.5181 26.3186 19.3094C26.0735 19.1001 25.9263 18.7961 25.8777 18.3961Z" fill="#154DDD"/>
+<path d="M29.3547 15.9854H30.0907V17.9207C30.0907 18.2279 30.0997 18.427 30.1183 18.5178C30.1496 18.6644 30.2245 18.7815 30.3435 18.8698C30.4619 18.9582 30.6239 19.0029 30.8299 19.0029C31.0386 19.0029 31.196 18.9614 31.3023 18.8775C31.4085 18.7937 31.4725 18.6913 31.4936 18.569C31.5154 18.4474 31.5263 18.2445 31.5263 17.9623V15.9854H32.2623V17.8625C32.2623 18.2913 32.2424 18.5946 32.2027 18.7719C32.1631 18.9492 32.0895 19.0983 31.9826 19.2206C31.8757 19.3428 31.7323 19.4394 31.5538 19.5118C31.3746 19.5841 31.141 19.6199 30.8523 19.6199C30.5042 19.6199 30.2399 19.5802 30.06 19.5015C29.8802 19.4228 29.7381 19.3204 29.6338 19.1943C29.5295 19.0682 29.4603 18.9364 29.4271 18.7981C29.3791 18.5933 29.3547 18.2913 29.3547 17.8913V15.9854Z" fill="#154DDD"/>
+<path d="M32.9363 19.559V15.9858H34.1177C34.5651 15.9858 34.8569 16.0038 34.9932 16.0396C35.2019 16.0934 35.3772 16.2098 35.518 16.389C35.6588 16.5689 35.7292 16.8006 35.7292 17.0847C35.7292 17.3042 35.6889 17.4886 35.6076 17.6383C35.5264 17.7881 35.4233 17.9052 35.2979 17.9903C35.1724 18.0754 35.0457 18.1318 34.9164 18.1599C34.7404 18.1938 34.4864 18.2111 34.1529 18.2111H33.6729V19.559H32.9363ZM33.6729 16.59V17.6038H34.0755C34.3654 17.6038 34.5593 17.5852 34.6572 17.5474C34.7552 17.5103 34.832 17.4514 34.887 17.3721C34.9427 17.2927 34.9702 17.1999 34.9702 17.0943C34.9702 16.9644 34.9312 16.8569 34.8531 16.7724C34.775 16.6879 34.6764 16.6348 34.5574 16.6137C34.4697 16.5977 34.2931 16.5894 34.0275 16.5894H33.6729V16.59Z" fill="#154DDD"/>
+<path d="M36.2317 19.559V15.9858H38.935V16.5906H36.9677V17.383H38.7981V17.9852H36.9677V18.958H39.0048V19.5602H36.2317V19.559Z" fill="#154DDD"/>
+<path d="M39.5295 19.559V15.9858H41.079C41.4687 15.9858 41.7516 16.0178 41.9283 16.0818C42.1049 16.1458 42.2463 16.2604 42.3519 16.4242C42.4575 16.5881 42.5113 16.7762 42.5113 16.9874C42.5113 17.2556 42.4307 17.477 42.27 17.6518C42.1094 17.8265 41.8687 17.9366 41.5487 17.982C41.7081 18.0729 41.8393 18.1727 41.943 18.2815C42.0467 18.3903 42.1862 18.5836 42.3622 18.8614L42.8076 19.5583H41.927L41.3945 18.7807C41.2057 18.503 41.0764 18.3276 41.0067 18.2553C40.9369 18.183 40.8633 18.1337 40.7852 18.1068C40.7071 18.0799 40.5836 18.0665 40.4147 18.0665H40.2655V19.5583H39.5295V19.559ZM40.2662 17.4969H40.8108C41.1641 17.4969 41.3843 17.4822 41.4726 17.4527C41.5609 17.4233 41.6294 17.3734 41.6787 17.3017C41.7279 17.23 41.7535 17.141 41.7535 17.0335C41.7535 16.9132 41.7209 16.8159 41.655 16.7423C41.5891 16.6687 41.4969 16.6214 41.3779 16.6022C41.3183 16.5938 41.1391 16.59 40.8409 16.59H40.2662V17.4969Z" fill="#154DDD"/>
+<path d="M43.9417 19.559L42.6387 15.9858H43.4368L44.3596 18.6303L45.2524 15.9858H46.0332L44.7276 19.559H43.9417Z" fill="#154DDD"/>
+<path d="M46.2847 19.559V15.9858H47.0207V19.559H46.2847Z" fill="#154DDD"/>
+<path d="M47.4341 18.3961L48.1502 18.3277C48.1931 18.5632 48.2808 18.7366 48.4126 18.8467C48.5445 18.9574 48.7224 19.0125 48.9464 19.0125C49.1832 19.0125 49.3618 18.9632 49.4821 18.8653C49.6024 18.7667 49.6626 18.6521 49.6626 18.5203C49.6626 18.4358 49.637 18.3641 49.5864 18.3046C49.5358 18.2451 49.4475 18.1939 49.3214 18.1498C49.235 18.1203 49.0386 18.0685 48.732 17.9936C48.3371 17.8976 48.0606 17.7798 47.9013 17.6403C47.6773 17.4438 47.5653 17.2038 47.5653 16.9209C47.5653 16.7392 47.6178 16.5689 47.7234 16.4102C47.8283 16.2515 47.98 16.1312 48.1784 16.048C48.3762 15.9654 48.6155 15.9238 48.8958 15.9238C49.3534 15.9238 49.6978 16.0224 49.9294 16.2189C50.1605 16.4153 50.2821 16.6777 50.2936 17.0061L49.5576 17.0381C49.5262 16.8544 49.4584 16.7226 49.3547 16.6419C49.251 16.5613 49.0955 16.5216 48.8882 16.5216C48.6744 16.5216 48.5067 16.5645 48.3858 16.6509C48.3077 16.7059 48.2686 16.7801 48.2686 16.8729C48.2686 16.9574 48.3051 17.0298 48.3781 17.0899C48.4709 17.1661 48.6962 17.2461 49.0546 17.3286C49.413 17.4112 49.6773 17.497 49.8494 17.5859C50.0216 17.6749 50.1554 17.7958 50.252 17.9488C50.3493 18.1024 50.3973 18.2918 50.3973 18.5178C50.3973 18.7226 50.339 18.9145 50.2232 19.0931C50.1074 19.2717 49.9429 19.4048 49.731 19.4918C49.5186 19.5789 49.2542 19.6224 48.9374 19.6224C48.4766 19.6224 48.1227 19.5181 47.8757 19.3094C47.6293 19.1001 47.4821 18.7961 47.4341 18.3961Z" fill="#154DDD"/>
+<path d="M50.8933 19.559V15.9858H51.6293V19.559H50.8933Z" fill="#154DDD"/>
+<path d="M52.0798 17.7939C52.0798 17.4298 52.1355 17.1245 52.2462 16.8774C52.3288 16.6957 52.4421 16.5318 52.5854 16.3872C52.7288 16.2425 52.8862 16.135 53.0565 16.0653C53.2837 15.9712 53.5454 15.9238 53.8424 15.9238C54.3794 15.9238 54.8094 16.087 55.132 16.4141C55.4546 16.7405 55.6158 17.1949 55.6158 17.7766C55.6158 18.3533 55.4558 18.8051 55.1358 19.1309C54.8158 19.4566 54.3877 19.6198 53.8526 19.6198C53.3106 19.6198 52.8792 19.4579 52.5592 19.1334C52.2398 18.8096 52.0798 18.3629 52.0798 17.7939ZM52.8382 17.7696C52.8382 18.1741 52.9336 18.4813 53.1243 18.6899C53.315 18.8985 53.557 19.0029 53.8507 19.0029C54.1445 19.0029 54.3851 18.8992 54.5733 18.6918C54.7614 18.4845 54.8555 18.1741 54.8555 17.7593C54.8555 17.3497 54.764 17.0445 54.581 16.8429C54.3979 16.6413 54.1547 16.5408 53.8507 16.5408C53.5474 16.5408 53.3029 16.6425 53.1173 16.8467C52.931 17.0509 52.8382 17.3587 52.8382 17.7696Z" fill="#154DDD"/>
+<path d="M56.0967 19.559V15.9858H56.8128L58.3053 18.3724V15.9858H58.9895V19.559H58.2509L56.7808 17.2287V19.559H56.0967Z" fill="#154DDD"/>
+</g>
+</svg>

public/logo.svg

@@ -0,0 +1,24 @@
+<svg width="140" height="48" viewBox="0 0 140 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_3608_103296" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="140" height="48">
+<rect width="140" height="48" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_3608_103296)">
+<path d="M18.8489 7.83258L14.7344 8.70823C14.6379 8.73492 14.6054 8.85693 14.6768 8.9281L17.9208 12.2198C17.991 12.2909 18.1125 12.2592 18.1375 12.1613L19.008 7.99398C19.0343 7.89612 18.9454 7.80716 18.8489 7.83258Z" fill="#E42F2F"/>
+<path d="M21.078 5.60722L15.1185 7.22764C15.0483 7.2467 15.0258 7.33566 15.0759 7.38777L19.4384 11.8144C19.4898 11.8665 19.5775 11.8423 19.5963 11.7711L21.1932 5.72415C21.212 5.65298 21.1481 5.58816 21.078 5.60722Z" fill="#FAEC18"/>
+<path d="M33.3505 25.1437L26.3438 18.0342L23.6133 15.2636C23.4304 15.0781 23.1336 15.0781 22.9495 15.2636L11.063 27.3246C10.845 27.5457 10.4906 27.5457 10.2726 27.3246L7.03108 24.0355C6.81314 23.8143 6.81314 23.4546 7.03108 23.2335L16.9724 13.1463C17.1553 12.9607 17.1553 12.6595 16.9724 12.4727L14.2745 9.73517C14.0916 9.54962 13.7947 9.54962 13.6106 9.73517L0.137152 23.4089C-0.0457173 23.5945 -0.0457173 23.8957 0.137152 24.0825L7.22772 31.2771L9.95824 34.0477C10.1411 34.2332 10.438 34.2332 10.6221 34.0477L23.0108 21.4771C23.2288 21.256 23.5833 21.256 23.8012 21.4771L27.0427 24.7662C27.2607 24.9874 27.2607 25.347 27.0427 25.5682L14.654 38.1387C14.4711 38.3243 14.4711 38.6255 14.654 38.8123L17.268 41.4647C17.4509 41.6503 17.7477 41.6503 17.9318 41.4647L33.3517 25.8185C33.5333 25.6304 33.5334 25.3292 33.3505 25.1437Z" fill="#154DDD"/>
+<path d="M56.5121 12.3393H54.0221V10.7328H49.295V12.1245H46.805V10.7328H42.5639L42.3735 8.5494H46.805V6.90103H49.295V8.5494H54.0221V6.90103H56.5121V8.5494H61.2178V10.7328H56.5121V12.3393ZM42.3735 21.7389L44.231 16.9425H46.5946L44.8435 21.7389H42.3735ZM57.6093 22.8306C57.4402 24.479 56.3856 25.5072 54.6133 25.6139C53.5787 25.6991 51.9328 25.5707 50.5613 25.3356L50.0127 23.2157C51.2364 23.4508 52.6718 23.5589 53.5361 23.494C54.5494 23.4508 55.0341 22.9806 55.098 22.0592C55.2458 20.196 55.2245 17.9262 55.098 16.1494C55.0767 15.9359 55.0141 15.8495 54.8024 15.8495H51.0886C50.8143 21.0094 48.6412 23.5576 43.4282 26.149L42.7743 23.7304C46.4881 21.8253 48.2391 19.5771 48.556 15.8508H43.9141L43.7451 13.7093H48.5986V12.296H51.1312V13.7093H55.9848C56.9768 13.7093 57.5254 14.3295 57.6093 15.2941C57.6519 15.7008 57.6719 16.0859 57.6932 16.4939H59.9929L61.6813 21.7605H59.1286L57.7145 16.9641C57.841 19.0408 57.7984 21.0755 57.6093 22.8306Z" fill="#154DDD"/>
+<path d="M68.8145 19.2339V19.3407C68.8145 21.3958 68.7519 23.3873 68.0968 26.0638H65.459C66.4084 22.6374 66.4297 20.454 66.4297 18.0342V8.74131C66.4297 7.77796 66.9996 7.2429 68.0129 7.2429H71.4098C72.423 7.2429 72.9917 7.75635 72.9917 8.74131V23.9439C72.9917 25.1221 72.1901 25.849 70.9877 25.9355C70.3752 25.9787 69.7426 25.8922 69.3418 25.7855L68.8145 23.5805C69.1527 23.6656 69.6374 23.7088 69.9957 23.7088C70.3965 23.7088 70.6081 23.4737 70.6081 23.1089V19.2339H68.8145ZM70.6081 9.64111C70.6081 9.51275 70.5242 9.42633 70.3977 9.42633H69.0475C68.921 9.42633 68.8158 9.51148 68.8158 9.64111V12.3393H70.6094V9.64111H70.6081ZM70.6081 14.3092H68.8145V17.264H70.6081V14.3092ZM84.7241 23.3237V25.5504H73.7307L73.5203 23.3237H78.1208V18.9772H74.7239L74.5123 16.7506H78.1208V12.7459H76.2846C76.0942 13.6241 75.8625 14.4591 75.5669 15.2509H73.246C74.0476 12.9811 74.4697 10.6045 74.5336 7.86438H76.7919C76.7706 8.78452 76.708 9.68432 76.6228 10.5193H78.1208V6.81461H80.5895V10.5193H84.0716V12.7459H80.5895V16.7506H83.9451V18.9772H80.5895V23.3237H84.7241Z" fill="#154DDD"/>
+<path d="M108 23.5805L107.24 26.257C102.577 24.2655 99.7912 22.6387 98.3145 19.5555C96.8377 22.4455 93.9256 24.5654 89.1986 26.2354L88.5234 23.6656C93.7991 21.5673 95.9509 19.769 96.6686 16.5993H89.1146L88.8829 14.3295H96.9229C96.9442 14.0512 96.9442 13.7512 96.9442 13.4513V10.0897H90.4235L90.2131 7.90631H106.461V10.0897H99.5169V13.9647V14.3282H107.598V16.5981H99.6634C100.868 20.3473 103.97 22.0604 108 23.5805Z" fill="#154DDD"/>
+<path d="M42.0181 36.3048L43.4196 36.1688C43.5036 36.6365 43.6752 36.9809 43.9332 37.1995C44.1912 37.4194 44.5394 37.5287 44.9765 37.5287C45.44 37.5287 45.7907 37.4309 46.0249 37.2364C46.2604 37.0407 46.3781 36.8132 46.3781 36.5514C46.3781 36.3836 46.328 36.2413 46.2291 36.1231C46.1301 36.0049 45.9573 35.9032 45.7105 35.8155C45.5414 35.7571 45.1569 35.6541 44.5569 35.5054C43.7841 35.3148 43.243 35.0809 42.9312 34.8039C42.4928 34.4137 42.2736 33.9371 42.2736 33.3754C42.2736 33.0144 42.3763 32.6764 42.583 32.3612C42.7896 32.046 43.0852 31.8071 43.4735 31.6419C43.8618 31.4779 44.329 31.3953 44.8776 31.3953C45.7732 31.3953 46.447 31.591 46.9004 31.9812C47.3538 32.3714 47.5906 32.8924 47.6131 33.5444L46.1727 33.6079C46.1113 33.2432 45.9786 32.9814 45.7757 32.8213C45.5727 32.6611 45.2684 32.5823 44.8626 32.5823C44.4442 32.5823 44.1161 32.6675 43.8793 32.839C43.7265 32.9483 43.6501 33.0958 43.6501 33.2801C43.6501 33.4478 43.7215 33.5914 43.8643 33.7109C44.0459 33.8621 44.4868 34.021 45.1882 34.1849C45.8896 34.3489 46.4069 34.5192 46.7439 34.6959C47.0808 34.8725 47.3426 35.1127 47.5317 35.4165C47.7221 35.7215 47.816 36.0977 47.816 36.5463C47.816 36.953 47.702 37.3343 47.4753 37.6888C47.2486 38.0434 46.9267 38.3078 46.5121 38.4806C46.0963 38.6535 45.579 38.7399 44.959 38.7399C44.0572 38.7399 43.3645 38.5327 42.8811 38.1184C42.4013 37.7028 42.1133 37.0991 42.0181 36.3048Z" fill="#154DDD"/>
+<path d="M48.8232 31.5173H50.2637V35.3605C50.2637 35.9706 50.2812 36.3658 50.3175 36.5463C50.3789 36.8373 50.5254 37.0699 50.7584 37.2453C50.9901 37.4207 51.307 37.5096 51.7103 37.5096C52.1186 37.5096 52.4268 37.427 52.6347 37.2605C52.8426 37.0941 52.9679 36.8907 53.0092 36.648C53.0518 36.4065 53.0731 36.0036 53.0731 35.4431V31.5173H54.5135V35.2449C54.5135 36.0964 54.4747 36.6988 54.397 37.0508C54.3193 37.4029 54.1753 37.699 53.9661 37.9418C53.757 38.1845 53.4764 38.3764 53.1269 38.52C52.7762 38.6636 52.3191 38.7348 51.7542 38.7348C51.0728 38.7348 50.5555 38.656 50.2035 38.4997C49.8516 38.3434 49.5735 38.14 49.3693 37.8896C49.1652 37.6393 49.0299 37.3775 48.9648 37.1029C48.8708 36.6963 48.8232 36.0964 48.8232 35.3021V31.5173Z" fill="#154DDD"/>
+<path d="M55.832 38.614V31.5185H58.1442C59.0197 31.5185 59.5909 31.5541 59.8577 31.6253C60.266 31.732 60.6092 31.9633 60.8847 32.3192C61.1603 32.6763 61.2981 33.1364 61.2981 33.7007C61.2981 34.1366 61.2192 34.5026 61.0601 34.8C60.901 35.0974 60.6994 35.33 60.4539 35.499C60.2084 35.668 59.9604 35.7799 59.7074 35.8358C59.3629 35.9032 58.8657 35.9375 58.2131 35.9375H57.2737V38.614H55.832ZM57.2737 32.7183V34.7314H58.0615C58.6289 34.7314 59.0084 34.6945 59.2001 34.6195C59.3917 34.5458 59.542 34.4289 59.6497 34.2713C59.7587 34.1137 59.8126 33.9294 59.8126 33.7197C59.8126 33.4617 59.7362 33.2482 59.5834 33.0805C59.4305 32.9127 59.2377 32.8072 59.0047 32.7653C58.8331 32.7335 58.4874 32.717 57.9676 32.717H57.2737V32.7183Z" fill="#154DDD"/>
+<path d="M62.2812 38.614V31.5185H67.5719V32.7195H63.7217V34.2929H67.3039V35.4888H63.7217V37.4206H67.7085V38.6166H62.2812V38.614Z" fill="#154DDD"/>
+<path d="M68.7358 38.614V31.5185H71.7682C72.531 31.5185 73.0846 31.5821 73.4303 31.7092C73.776 31.8363 74.0528 32.0637 74.2595 32.3891C74.4662 32.7144 74.5714 33.0881 74.5714 33.5075C74.5714 34.04 74.4135 34.4797 74.0992 34.8267C73.7848 35.1737 73.3138 35.3923 72.6876 35.4825C72.9994 35.663 73.2562 35.8612 73.4591 36.0773C73.662 36.2933 73.9351 36.6771 74.2795 37.2287L75.1513 38.6127H73.4278L72.3857 37.0686C72.0162 36.517 71.7632 36.1688 71.6267 36.0252C71.4901 35.8816 71.3461 35.7837 71.1933 35.7303C71.0405 35.6769 70.7988 35.6502 70.4681 35.6502H70.1762V38.6127H68.7358V38.614ZM70.1775 34.5191H71.2434C71.9348 34.5191 72.3657 34.4899 72.5385 34.4314C72.7114 34.373 72.8454 34.2739 72.9418 34.1315C73.0383 33.9892 73.0884 33.8125 73.0884 33.599C73.0884 33.3601 73.0245 33.1669 72.8955 33.0207C72.7665 32.8746 72.5861 32.7805 72.3531 32.7424C72.2367 32.7259 71.886 32.7183 71.3023 32.7183H70.1775V34.5191Z" fill="#154DDD"/>
+<path d="M77.371 38.614L74.8208 31.5185H76.3827L78.1889 36.7699L79.9361 31.5185H81.4642L78.9091 38.614H77.371Z" fill="#154DDD"/>
+<path d="M81.9561 38.614V31.5185H83.3965V38.614H81.9561Z" fill="#154DDD"/>
+<path d="M84.2056 36.3048L85.6071 36.1688C85.6911 36.6365 85.8627 36.9809 86.1207 37.1995C86.3787 37.4194 86.7269 37.5287 87.1653 37.5287C87.6287 37.5287 87.9782 37.4309 88.2137 37.2364C88.4491 37.0407 88.5669 36.8132 88.5669 36.5514C88.5669 36.3836 88.5168 36.2413 88.4178 36.1231C88.3189 36.0049 88.146 35.9032 87.8993 35.8155C87.7302 35.7571 87.3457 35.6541 86.7457 35.5054C85.9729 35.3148 85.4318 35.0809 85.1199 34.8039C84.6815 34.4137 84.4623 33.9371 84.4623 33.3754C84.4623 33.0144 84.565 32.6764 84.7717 32.3612C84.9771 32.046 85.274 31.8071 85.6623 31.6419C86.0493 31.4779 86.5177 31.3953 87.0663 31.3953C87.9619 31.3953 88.6358 31.591 89.0892 31.9812C89.5413 32.3714 89.7793 32.8924 89.8019 33.5444L88.3615 33.6079C88.3001 33.2432 88.1673 32.9814 87.9644 32.8213C87.7615 32.6611 87.4571 32.5823 87.0513 32.5823C86.633 32.5823 86.3048 32.6675 86.0681 32.839C85.9153 32.9483 85.8389 33.0958 85.8389 33.2801C85.8389 33.4478 85.9103 33.5914 86.053 33.7109C86.2347 33.8621 86.6756 34.021 87.377 34.1849C88.0784 34.3489 88.5957 34.5192 88.9326 34.6959C89.2695 34.8725 89.5313 35.1127 89.7205 35.4165C89.9108 35.7215 90.0048 36.0977 90.0048 36.5463C90.0048 36.953 89.8908 37.3343 89.6641 37.6888C89.4374 38.0434 89.1155 38.3078 88.7009 38.4806C88.2851 38.6535 87.7678 38.7399 87.1478 38.7399C86.2459 38.7399 85.5533 38.5327 85.0698 38.1184C84.5876 37.7028 84.2995 37.0991 84.2056 36.3048Z" fill="#154DDD"/>
+<path d="M90.9756 38.614V31.5185H92.416V38.614H90.9756Z" fill="#154DDD"/>
+<path d="M93.2979 35.1089C93.2979 34.3858 93.4068 33.7795 93.6235 33.289C93.7851 32.928 94.0068 32.6027 94.2874 32.3154C94.5679 32.0282 94.876 31.8147 95.2092 31.6762C95.6539 31.4893 96.1661 31.3953 96.7473 31.3953C97.7982 31.3953 98.6399 31.7194 99.2712 32.3688C99.9024 33.017 100.218 33.9193 100.218 35.0746C100.218 36.2197 99.9049 37.1169 99.2787 37.7638C98.6524 38.4107 97.8145 38.7348 96.7674 38.7348C95.7065 38.7348 94.8623 38.4133 94.236 37.7689C93.611 37.1258 93.2979 36.2387 93.2979 35.1089ZM94.7821 35.0606C94.7821 35.8638 94.9687 36.4739 95.342 36.8882C95.7152 37.3025 96.1887 37.5096 96.7636 37.5096C97.3385 37.5096 97.8095 37.3038 98.1777 36.892C98.546 36.4802 98.7301 35.8638 98.7301 35.0403C98.7301 34.2269 98.551 33.6207 98.1927 33.2203C97.8345 32.82 97.3586 32.6205 96.7636 32.6205C96.1699 32.6205 95.6914 32.8225 95.3282 33.2279C94.9637 33.6334 94.7821 34.2447 94.7821 35.0606Z" fill="#154DDD"/>
+<path d="M101.159 38.614V31.5185H102.561L105.482 36.2577V31.5185H106.821V38.614H105.375L102.498 33.9866V38.614H101.159Z" fill="#154DDD"/>
+</g>
+</svg>

public/pro_icon.svg

@@ -0,0 +1,5 @@
+<svg width="42" height="42" xmlns="http://www.w3.org/2000/svg">
+ <g>
+  <path fill="#070707" d="m6.717392,13.773912l5.6,0c2.8,0 4.7,1.9 4.7,4.7c0,2.8 -2,4.7 -4.9,4.7l-2.5,0l0,4.3l-2.9,0l0,-13.7zm2.9,2.2l0,4.9l1.9,0c1.6,0 2.6,-0.9 2.6,-2.4c0,-1.6 -0.9,-2.4 -2.6,-2.4l-1.9,0l0,-0.1zm8.9,11.5l2.7,0l0,-5.7c0,-1.4 0.8,-2.3 2.2,-2.3c0.4,0 0.8,0.1 1,0.2l0,-2.4c-0.2,-0.1 -0.5,-0.1 -0.8,-0.1c-1.2,0 -2.1,0.7 -2.4,2l-0.1,0l0,-1.9l-2.7,0l0,10.2l0.1,0zm11.7,0.1c-3.1,0 -5,-2 -5,-5.3c0,-3.3 2,-5.3 5,-5.3s5,2 5,5.3c0,3.4 -1.9,5.3 -5,5.3zm0,-2.1c1.4,0 2.2,-1.1 2.2,-3.2c0,-2 -0.8,-3.2 -2.2,-3.2c-1.4,0 -2.2,1.2 -2.2,3.2c0,2.1 0.8,3.2 2.2,3.2z" class="st0" id="Ant-Design-Pro"/>
+ </g>
+</svg>

public/scripts/loading.js

@@ -0,0 +1,202 @@
+/**
+ * loading 占位
+ * 解决首次加载时白屏的问题
+ */
+ (function () {
+  const _root = document.querySelector('#root');
+  if (_root && _root.innerHTML === '') {
+    _root.innerHTML = `
+      <style>
+        html,
+        body,
+        #root {
+          height: 100%;
+          margin: 0;
+          padding: 0;
+        }
+        #root {
+          background-repeat: no-repeat;
+          background-size: 100% auto;
+        }
+
+        .loading-title {
+          font-size: 1.1rem;
+        }
+
+        .loading-sub-title {
+          margin-top: 20px;
+          font-size: 1rem;
+          color: #888;
+        }
+
+        .page-loading-warp {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          padding: 26px;
+        }
+        .ant-spin {
+          position: absolute;
+          display: none;
+          -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+          margin: 0;
+          padding: 0;
+          color: rgba(0, 0, 0, 0.65);
+          color: #1890ff;
+          font-size: 14px;
+          font-variant: tabular-nums;
+          line-height: 1.5;
+          text-align: center;
+          list-style: none;
+          opacity: 0;
+          -webkit-transition: -webkit-transform 0.3s
+            cubic-bezier(0.78, 0.14, 0.15, 0.86);
+          transition: -webkit-transform 0.3s
+            cubic-bezier(0.78, 0.14, 0.15, 0.86);
+          transition: transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
+          transition: transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86),
+            -webkit-transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
+          -webkit-font-feature-settings: "tnum";
+          font-feature-settings: "tnum";
+        }
+
+        .ant-spin-spinning {
+          position: static;
+          display: inline-block;
+          opacity: 1;
+        }
+
+        .ant-spin-dot {
+          position: relative;
+          display: inline-block;
+          width: 20px;
+          height: 20px;
+          font-size: 20px;
+        }
+
+        .ant-spin-dot-item {
+          position: absolute;
+          display: block;
+          width: 9px;
+          height: 9px;
+          background-color: #1890ff;
+          border-radius: 100%;
+          -webkit-transform: scale(0.75);
+          -ms-transform: scale(0.75);
+          transform: scale(0.75);
+          -webkit-transform-origin: 50% 50%;
+          -ms-transform-origin: 50% 50%;
+          transform-origin: 50% 50%;
+          opacity: 0.3;
+          -webkit-animation: antspinmove 1s infinite linear alternate;
+          animation: antSpinMove 1s infinite linear alternate;
+        }
+
+        .ant-spin-dot-item:nth-child(1) {
+          top: 0;
+          left: 0;
+        }
+
+        .ant-spin-dot-item:nth-child(2) {
+          top: 0;
+          right: 0;
+          -webkit-animation-delay: 0.4s;
+          animation-delay: 0.4s;
+        }
+
+        .ant-spin-dot-item:nth-child(3) {
+          right: 0;
+          bottom: 0;
+          -webkit-animation-delay: 0.8s;
+          animation-delay: 0.8s;
+        }
+
+        .ant-spin-dot-item:nth-child(4) {
+          bottom: 0;
+          left: 0;
+          -webkit-animation-delay: 1.2s;
+          animation-delay: 1.2s;
+        }
+
+        .ant-spin-dot-spin {
+          -webkit-transform: rotate(45deg);
+          -ms-transform: rotate(45deg);
+          transform: rotate(45deg);
+          -webkit-animation: antrotate 1.2s infinite linear;
+          animation: antRotate 1.2s infinite linear;
+        }
+
+        .ant-spin-lg .ant-spin-dot {
+          width: 32px;
+          height: 32px;
+          font-size: 32px;
+        }
+
+        .ant-spin-lg .ant-spin-dot i {
+          width: 14px;
+          height: 14px;
+        }
+
+        @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+          .ant-spin-blur {
+            background: #fff;
+            opacity: 0.5;
+          }
+        }
+
+        @-webkit-keyframes antSpinMove {
+          to {
+            opacity: 1;
+          }
+        }
+
+        @keyframes antSpinMove {
+          to {
+            opacity: 1;
+          }
+        }
+
+        @-webkit-keyframes antRotate {
+          to {
+            -webkit-transform: rotate(405deg);
+            transform: rotate(405deg);
+          }
+        }
+
+        @keyframes antRotate {
+          to {
+            -webkit-transform: rotate(405deg);
+            transform: rotate(405deg);
+          }
+        }
+      </style>
+
+      <div style="
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        height: 100%;
+        min-height: 362px;
+      ">
+        <div class="page-loading-warp">
+          <div class="ant-spin ant-spin-lg ant-spin-spinning">
+            <span class="ant-spin-dot ant-spin-dot-spin">
+              <i class="ant-spin-dot-item"></i>
+              <i class="ant-spin-dot-item"></i>
+              <i class="ant-spin-dot-item"></i>
+              <i class="ant-spin-dot-item"></i>
+            </span>
+          </div>
+        </div>
+        <div class="loading-title">
+          正在加载资源
+        </div>
+        <div class="loading-sub-title">
+          初次加载资源可能需要较多时间 请耐心等待
+        </div>
+      </div>
+    `;
+  }
+})();

src/access.ts

@@ -0,0 +1,22 @@
+import {IRoute} from "@umijs/max";
+
+/**
+ * @see https://umijs.org/zh-CN/plugins/plugin-access
+ * */
+export default function access(initialState: { currentUser?: API.CurrentUser } | undefined) {
+  // const { currentUser } = initialState ?? {};
+  // const read_paths = currentUser?.read_paths || []
+  // const update_paths = currentUser?.update_paths || []
+  return {
+    // canReadMenu: read_paths?.includes(history.location.pathname),
+    canReadMenu: (route: IRoute)=>{
+      // return read_paths?.includes(route.path)
+      return true
+    },
+    canUpdate: (path: string)=>{
+      // return update_paths?.includes(path)
+      return true
+    }
+  };
+}
+

src/app.tsx

@@ -0,0 +1,230 @@
+import { AvatarDropdown, AvatarName, Footer, Question, SelectLang, Notice } from '@/components';
+import { LinkOutlined } from '@ant-design/icons';
+import type { Settings as LayoutSettings } from '@ant-design/pro-components';
+import { SettingDrawer } from '@ant-design/pro-components';
+import { Link, RunTimeLayoutConfig, getLocale, history, useIntl } from '@umijs/max';
+import { RequestConfig } from 'umi';
+import defaultSettings from '../config/defaultSettings';
+import { errorConfig } from './requestErrorConfig';
+const isDev = process.env.NODE_ENV === 'development';
+const loginPath = '/user/login';
+// @ts-ignore
+import { SelectRole } from '@/components/RightContent';
+import zhCN from '@/locales/zh-CN';
+import { postMenuGetMenu } from '@/services/system/Menu';
+import { getUserGetUserInfo } from '@/services/system/User';
+import fixMenuItemIcon from '@/utils/FixMenuItemIcon';
+import { getAllRouteNameTile } from '@/utils/common';
+import { addLocale } from '@@/plugin-locale';
+import { MenuDataItem } from '@ant-design/pro-layout';
+import cookie from 'react-cookies';
+/**
+ * @see  https://umijs.org/zh-CN/plugins/plugin-initial-state
+ * */
+// 自定义路由路径集合
+const isCustomPageTitlePaths : string[]= ['/resource/algorithm-model-detail']
+
+
+export async function getInitialState(): Promise<{
+  settings?: Partial<LayoutSettings>;
+  currentUser?: API.UserView;
+  loading?: boolean;
+  fetchUserInfo?: any;
+  menuData?: MenuDataItem[];
+}> {
+  const fetchUserInfo = async () => {
+    try {
+      const msg = await getUserGetUserInfo();
+      return msg.data.userInfo;
+    } catch (error) {
+      history.push(loginPath);
+    }
+    return undefined;
+  };
+  // 如果不是登录页面，执行
+  const { location } = history;
+  if (location.pathname !== loginPath && localStorage.getItem('access')) {
+    const currentUser = await fetchUserInfo();
+    const menus = await postMenuGetMenu();
+    if (getLocale() === 'zh-CN') {
+      let localData = getAllRouteNameTile(menus.data.routes, '');
+      let localRes: any = {};
+      localData.forEach((v) => {
+        // console.log(v.title,'localData_v')
+        localRes[`menu${v.name}`] = v.title;
+      });
+      console.log(localRes, 'getAllRouteNameTile');
+      addLocale('zh-CN', localRes, {
+        momentLocale: 'zh-CN',
+        antd: zhCN,
+      });
+    }
+
+    return {
+      fetchUserInfo,
+      currentUser,
+      settings: defaultSettings as Partial<LayoutSettings>,
+      menuData: menus.data.routes,
+    };
+  }
+
+  return {
+    fetchUserInfo,
+    settings: defaultSettings as Partial<LayoutSettings>,
+  };
+}
+
+// ProLayout 支持的api https://procomponents.ant.design/components/layout
+export const layout: RunTimeLayoutConfig = ({ initialState, setInitialState }) => {
+
+  return {
+    actionsRender: () => [
+      <SelectRole key="selectRole" />,
+      <Question key="doc" />,
+      <SelectLang key="SelectLang" />,
+      <Notice key="Notice" />
+    ],
+    avatarProps: {
+      src: SERVER_HOST + initialState?.currentUser?.avatarUrl,
+      title: <AvatarName />,
+      render: (_, avatarChildren) => {
+        console.log(avatarChildren,'111111111')
+        return <AvatarDropdown menu={true}>{avatarChildren}</AvatarDropdown>;
+      },
+    },
+    pageTitleRender: () => {
+      console.log(history, 'pageTitleRender');
+      // TODO 目前使用路由path全匹配，后续改成从接口字段读取
+      let isCustom: boolean = false
+      for(let i=0; i<isCustomPageTitlePaths.length; i++){
+        const item = isCustomPageTitlePaths[i]
+        if(history.location.pathname.includes(item)){
+          isCustom = true
+          break;
+        } else {
+          isCustom = false
+        }
+      }
+      return isCustom ? ("") : (undefined)
+      // 默认不进行重定义 使用null即可
+    },
+    waterMarkProps: {
+      // content: initialState?.currentUser?.name,
+    },
+    menu: {
+      loading: initialState?.loading || false,
+      locale: true,
+      params: {
+        userId: initialState?.currentUser?.id,
+      },
+      request: async () => {
+        // console.log(initialState?.menuData,'initialState_menuData')
+        return initialState?.menuData || [];
+      },
+    },
+    footerRender: () => <Footer />,
+    onPageChange: () => {
+      const { location } = history;
+      // 如果没有登录，重定向到 login
+      if (!initialState?.currentUser && location.pathname !== loginPath) {
+        history.push(loginPath);
+      }
+    },
+    menuDataRender: () => {
+      if (initialState?.menuData !== undefined) {
+        return fixMenuItemIcon(initialState?.menuData || []);
+      }
+    },
+    layoutBgImgList: [
+      {
+        src: 'https://mdn.alipayobjects.com/yuyan_qk0oxh/afts/img/D2LWSqNny4sAAAAAAAAAAAAAFl94AQBr',
+        left: 85,
+        bottom: 100,
+        height: '303px',
+      },
+      {
+        src: 'https://mdn.alipayobjects.com/yuyan_qk0oxh/afts/img/C2TWRpJpiC0AAAAAAAAAAAAAFl94AQBr',
+        bottom: -68,
+        right: -45,
+        height: '303px',
+      },
+      {
+        src: 'https://mdn.alipayobjects.com/yuyan_qk0oxh/afts/img/F6vSTbj8KpYAAAAAAAAAAAAAFl94AQBr',
+        bottom: 0,
+        left: 0,
+        width: '331px',
+      },
+    ],
+    links: isDev
+      ? [
+          <Link key="openapi" to="/umi/plugin/openapi" target="_blank">
+            <LinkOutlined />
+            <span>OpenAPI 文档</span>
+          </Link>,
+        ]
+      : [],
+    menuHeaderRender: undefined,
+    // 自定义 403 页面
+    // unAccessible: <div>unAccessible</div>,
+    // 增加一个 loading 的状态
+    childrenRender: (children) => {
+      // if (initialState?.loading) return <PageLoading />;
+      return (
+        <>
+          {children}
+          {isDev && (
+            <SettingDrawer
+              disableUrlParams
+              enableDarkTheme
+              settings={initialState?.settings}
+              onSettingChange={(settings) => {
+                setInitialState((preInitialState) => ({
+                  ...preInitialState,
+                  settings,
+                }));
+              }}
+            />
+          )}
+        </>
+      );
+    },
+    ...initialState?.settings,
+  };
+};
+
+const csrfAndJwtHeaderInterceptor = (url: string, options: RequestConfig) => {
+  const csrfHeader = { 'X-CSRFToken': cookie.load('csrftoken') };
+  let bearerToken = {};
+  const access = localStorage.getItem('access');
+  if (access) {
+    bearerToken = { 'X-Token': `${access}` };
+  }
+  let locale = getLocale();
+  return {
+    url: `${url}`,
+    options: {
+      ...options,
+      interceptors: true,
+      headers: { ...csrfHeader, ...bearerToken, 'Accept-Language': locale },
+    },
+  };
+};
+
+const responseHeaderInterceptor = (response: Response) => {
+  if ('new-token' in response.headers) {
+    localStorage.setItem('access', (response.headers['new-token'] || '') as string);
+    window.location.reload();
+  }
+  return response;
+};
+
+/**
+ * @name request 配置，可以配置错误处理
+ * 它基于 axios 和 ahooks 的 useRequest 提供了一套统一的网络请求和错误处理方案。
+ * @doc https://umijs.org/docs/max/request#配置
+ */
+export const request = {
+  ...errorConfig,
+  requestInterceptors: [csrfAndJwtHeaderInterceptor],
+  responseInterceptors: [responseHeaderInterceptor],
+};

src/components/BatchOperation/isBatchDelete.tsx

@@ -0,0 +1,54 @@
+/*
+ * @Author: zhoux zhouxia@supervision.ltd
+ * @Date: 2023-11-16 14:30:15
+ * @LastEditors: zhoux zhouxia@supervision.ltd
+ * @LastEditTime: 2023-11-16 14:35:20
+ * @FilePath: \general-ai-platform-web\src\components\BatchOperation\isBatchDelete.tsx
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
+import { ExclamationCircleOutlined } from '@ant-design/icons';
+// import { useIntl } from '@ant-design/pro-components';
+import { useIntl } from '@umijs/max';
+import { Button, Modal } from 'antd';
+import { FormattedMessage } from 'react-intl';
+
+type IsBatchDeleteProps = {
+  // eslint-disable-next-line @typescript-eslint/ban-types
+  deleteApi: Function;
+};
+
+const IsBatchDelete: React.FC<IsBatchDeleteProps> = (props) => {
+  const intl = useIntl();
+
+  return (
+    <Button
+      danger
+      onClick={async () => {
+        Modal.confirm({
+          icon: <ExclamationCircleOutlined />,
+          title: intl.formatMessage({
+            id: 'common.modal.table.delete.title',
+            defaultMessage: '$$$',
+          }),
+          content: intl.formatMessage({
+            id: 'common.modal.table.delete.content',
+            defaultMessage: '$$$',
+          }),
+          okText: intl.formatMessage({ id: 'common.yes', defaultMessage: '$$$' }),
+          cancelText: intl.formatMessage({ id: 'common.no', defaultMessage: '$$$' }),
+          onOk() {
+            // TODO 未对接批量删除接口
+            props.deleteApi();
+          },
+          onCancel() {
+            console.log('Cancel');
+          },
+        });
+      }}
+    >
+      <FormattedMessage id="pages.searchTable.batchDeletion" defaultMessage="Batch deletion" />
+    </Button>
+  );
+};
+
+export default IsBatchDelete;

src/components/DictionaryBox/alarmLevel.tsx

@@ -0,0 +1,39 @@
+/*
+ * @Author: zhoux zhouxia@supervision.ltd
+ * @Date: 2023-11-15 15:01:34
+ * @LastEditors: zhoux zhouxia@supervision.ltd
+ * @LastEditTime: 2023-12-20 11:25:15
+ * @FilePath: \general-ai-platform-web\src\components\DictionaryBox\isEnable.tsx
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
+import { ArrowUpOutlined, DownOutlined } from '@ant-design/icons';
+
+type AlarmLevelBoxProps = {
+  icon?: 'ArrowUpOutlined' | 'default' | undefined;
+  color?: string;
+  size?: number;
+};
+
+const AlarmLevelBox: React.FC<AlarmLevelBoxProps> = (props) => {
+  const { icon, color, size } = props;
+  const finalSize = size || 14;
+  return (
+    <div
+      style={{
+        backgroundColor: color,
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        width: finalSize,
+        height: finalSize,
+        borderRadius: '50%',
+        color: 'white',
+        fontSize: finalSize * 0.55,
+      }}
+    >
+      {icon === 'ArrowUpOutlined' ? <ArrowUpOutlined /> : <DownOutlined />}
+    </div>
+  );
+};
+
+export default AlarmLevelBox;

src/components/DictionaryBox/isEnable.tsx

@@ -0,0 +1,32 @@
+/*
+ * @Author: zhoux zhouxia@supervision.ltd
+ * @Date: 2023-11-15 15:01:34
+ * @LastEditors: zhoux zhouxia@supervision.ltd
+ * @LastEditTime: 2023-11-22 13:24:58
+ * @FilePath: \general-ai-platform-web\src\components\DictionaryBox\isEnable.tsx
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
+import { isEnableEnum } from '@/enums/common';
+import { Badge } from 'antd';
+import { FormattedMessage } from 'react-intl';
+
+type IsEnableBoxProps = {
+  isEnable: boolean;
+};
+
+const IsEnableBox: React.FC<IsEnableBoxProps> = (props) => {
+  const { isEnable } = props;
+
+  const currentItem = isEnableEnum[isEnable ? '1' : '0']
+
+  return (
+    <div style={{ display: 'flex', alignItems: 'center'}}>
+      <Badge status={isEnable ? 'success' : 'default'}></Badge>
+      <span style={{color: currentItem.color, paddingLeft: 4 }}>
+        <FormattedMessage id={isEnable ? 'common.enable' : 'common.disable'} defaultMessage="$$$" />
+      </span>
+    </div>
+  );
+};
+
+export default IsEnableBox;

src/components/Footer/index.tsx

@@ -0,0 +1,45 @@
+import { GithubOutlined } from '@ant-design/icons';
+import { DefaultFooter } from '@ant-design/pro-components';
+import { useIntl } from '@umijs/max';
+import React from 'react';
+
+const Footer: React.FC = () => {
+  const intl = useIntl();
+  const defaultMessage = intl.formatMessage({
+    id: 'app.copyright.produced',
+    defaultMessage: '蚂蚁集团体验技术部出品',
+  });
+
+  const currentYear = new Date().getFullYear();
+
+  return (
+    <DefaultFooter
+      style={{
+        background: 'none',
+      }}
+      copyright={`${currentYear} ${defaultMessage}`}
+      links={[
+        // {
+        //   key: 'Ant Design Pro',
+        //   title: 'Ant Design Pro',
+        //   href: 'https://pro.ant.design',
+        //   blankTarget: true,
+        // },
+        // {
+        //   key: 'github',
+        //   title: <GithubOutlined />,
+        //   href: 'https://github.com/ant-design/ant-design-pro',
+        //   blankTarget: true,
+        // },
+        // {
+        //   key: 'Ant Design',
+        //   title: 'Ant Design',
+        //   href: 'https://ant.design',
+        //   blankTarget: true,
+        // },
+      ]}
+    />
+  );
+};
+
+export default Footer;

src/components/HeaderDropdown/index.tsx

@@ -0,0 +1,23 @@
+import { Dropdown } from 'antd';
+import type { DropDownProps } from 'antd/es/dropdown';
+import React from 'react';
+import { useEmotionCss } from '@ant-design/use-emotion-css';
+import classNames from 'classnames';
+
+export type HeaderDropdownProps = {
+  overlayClassName?: string;
+  placement?: 'bottomLeft' | 'bottomRight' | 'topLeft' | 'topCenter' | 'topRight' | 'bottomCenter';
+} & Omit<DropDownProps, 'overlay'>;
+
+const HeaderDropdown: React.FC<HeaderDropdownProps> = ({ overlayClassName: cls, ...restProps }) => {
+  const className = useEmotionCss(({ token }) => {
+    return {
+      [`@media screen and (max-width: ${token.screenXS}px)`]: {
+        width: '100%',
+      },
+    };
+  });
+  return <Dropdown overlayClassName={classNames(className, cls)} {...restProps} />;
+};
+
+export default HeaderDropdown;

src/components/IconSelector/Category.tsx

@@ -0,0 +1,63 @@
+import * as React from 'react';
+import CopyableIcon from './CopyableIcon';
+import type { ThemeType } from './index';
+import type { CategoriesKeys } from './fields';
+import { useIntl } from '@umijs/max';
+import styles from './style.less';
+
+interface CategoryProps {
+  title: CategoriesKeys;
+  icons: string[];
+  theme: ThemeType;
+  newIcons: string[];
+  onSelect: (type: string, name: string) => any;
+}
+
+const Category: React.FC<CategoryProps> = props => {
+
+  const { icons, title, newIcons, theme } = props;
+  const intl = useIntl();
+  const [justCopied, setJustCopied] = React.useState<string | null>(null);
+  const copyId = React.useRef<NodeJS.Timeout | null>(null);
+  const onSelect = React.useCallback((type: string, text: string) => {
+    const { onSelect } = props;
+    if (onSelect) {
+      onSelect(type, text);
+    }
+    setJustCopied(type);
+    copyId.current = setTimeout(() => {
+      setJustCopied(null);
+    }, 2000);
+  }, []);
+  React.useEffect(
+    () => () => {
+      if (copyId.current) {
+        clearTimeout(copyId.current);
+      }
+    },
+    [],
+  );
+
+  return (
+    <div>
+      <h4 style={{paddingTop: 16}}>{intl.formatMessage({
+        id: `app.docs.components.icon.category.${title}`,
+        defaultMessage: '信息',
+      })}</h4>
+      <ul className={styles.anticonsList}>
+        {icons.map(name => (
+          <CopyableIcon
+            key={name}
+            name={name}
+            theme={theme}
+            isNew={newIcons.includes(name)}
+            justCopied={justCopied}
+            onSelect={onSelect}
+          />
+        ))}
+      </ul>
+    </div>
+  );
+};
+
+export default Category;

src/components/IconSelector/CopyableIcon.tsx

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import { Tooltip } from 'antd';
+import classNames from 'classnames';
+import * as AntdIcons from '@ant-design/icons';
+import type { ThemeType } from './index';
+import styles from './style.less';
+
+const allIcons: {
+  [key: string]: any;
+} = AntdIcons;
+
+export interface CopyableIconProps {
+  name: string;
+  isNew: boolean;
+  theme: ThemeType;
+  justCopied: string | null;
+  onSelect: (type: string, text: string) => any;
+}
+
+const CopyableIcon: React.FC<CopyableIconProps> = ({
+  name,
+  justCopied,
+  onSelect,
+  theme,
+}) => {
+  const className = classNames({
+    gn: true,
+    themeBgHover: true,
+    copied: justCopied === name,
+    [theme]: !!theme,
+  });
+  return (
+    <li className={className}
+    style={{
+      lineHeight: '48px',
+    }}
+      onClick={() => {
+        if (onSelect) {
+          onSelect(theme, name);
+        }
+      }}>
+      <Tooltip title={name}>
+        {React.createElement(allIcons[name], { className: styles.anticon })}
+      </Tooltip>
+      {/* <span className={styles.anticonClass}>
+          <Badge dot={isNew}>{name}</Badge>
+        </span> */}
+    </li>
+  );
+};
+
+export default CopyableIcon;

src/components/IconSelector/IconPicSearcher.tsx

@@ -0,0 +1,233 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import { Upload, Tooltip, Popover, Modal, Progress, Spin, Result } from 'antd';
+import * as AntdIcons from '@ant-design/icons';
+import { useIntl } from '@umijs/max';
+import './style.less';
+
+const allIcons: { [key: string]: any } = AntdIcons;
+
+const { Dragger } = Upload;
+interface AntdIconClassifier {
+  load: () => void;
+  predict: (imgEl: HTMLImageElement) => void;
+}
+declare global {
+  interface Window {
+    antdIconClassifier: AntdIconClassifier;
+  }
+}
+
+interface PicSearcherState {
+  loading: boolean;
+  modalOpen: boolean;
+  popoverVisible: boolean;
+  icons: iconObject[];
+  fileList: any[];
+  error: boolean;
+  modelLoaded: boolean;
+}
+
+interface iconObject {
+  type: string;
+  score: number;
+}
+
+const PicSearcher: React.FC = () => {
+  const intl = useIntl();
+  const {formatMessage} = intl;
+  const [state, setState] = useState<PicSearcherState>({
+    loading: false,
+    modalOpen: false,
+    popoverVisible: false,
+    icons: [],
+    fileList: [],
+    error: false,
+    modelLoaded: false,
+  });
+  const predict = (imgEl: HTMLImageElement) => {
+    try {
+      let icons: any[] = window.antdIconClassifier.predict(imgEl);
+      if (gtag && icons.length) {
+        gtag('event', 'icon', {
+          event_category: 'search-by-image',
+          event_label: icons[0].className,
+        });
+      }
+      icons = icons.map(i => ({ score: i.score, type: i.className.replace(/\s/g, '-') }));
+      setState(prev => ({ ...prev, loading: false, error: false, icons }));
+    } catch {
+      setState(prev => ({ ...prev, loading: false, error: true }));
+    }
+  };
+  // eslint-disable-next-line class-methods-use-this
+  const toImage = (url: string) =>
+    new Promise(resolve => {
+      const img = new Image();
+      img.setAttribute('crossOrigin', 'anonymous');
+      img.src = url;
+      img.onload = () => {
+        resolve(img);
+      };
+    });
+
+  const uploadFile = useCallback((file: File) => {
+    setState(prev => ({ ...prev, loading: true }));
+    const reader = new FileReader();
+    reader.onload = () => {
+      toImage(reader.result as string).then(predict);
+      setState(prev => ({
+        ...prev,
+        fileList: [{ uid: 1, name: file.name, status: 'done', url: reader.result }],
+      }));
+    };
+    reader.readAsDataURL(file);
+  }, []);
+
+  const onPaste = useCallback((event: ClipboardEvent) => {
+    const items = event.clipboardData && event.clipboardData.items;
+    let file = null;
+    if (items && items.length) {
+      for (let i = 0; i < items.length; i++) {
+        if (items[i].type.includes('image')) {
+          file = items[i].getAsFile();
+          break;
+        }
+      }
+    }
+    if (file) {
+      uploadFile(file);
+    }
+  }, []);
+  const toggleModal = useCallback(() => {
+    setState(prev => ({
+      ...prev,
+      modalOpen: !prev.modalOpen,
+      popoverVisible: false,
+      fileList: [],
+      icons: [],
+    }));
+    if (!localStorage.getItem('disableIconTip')) {
+      localStorage.setItem('disableIconTip', 'true');
+    }
+  }, []);
+
+  useEffect(() => {
+    const script = document.createElement('script');
+    script.onload = async () => {
+      await window.antdIconClassifier.load();
+      setState(prev => ({ ...prev, modelLoaded: true }));
+      document.addEventListener('paste', onPaste);
+    };
+    script.src = 'https://cdn.jsdelivr.net/gh/lewis617/antd-icon-classifier@0.0/dist/main.js';
+    document.head.appendChild(script);
+    setState(prev => ({ ...prev, popoverVisible: !localStorage.getItem('disableIconTip') }));
+    return () => {
+      document.removeEventListener('paste', onPaste);
+    };
+  }, []);
+
+  return (
+    <div className="iconPicSearcher">
+      <Popover
+        content={formatMessage({id: 'app.docs.components.icon.pic-searcher.intro'})}
+        open={state.popoverVisible}
+      >
+        <AntdIcons.CameraOutlined className="icon-pic-btn" onClick={toggleModal} />
+      </Popover>
+      <Modal
+        title={intl.formatMessage({
+          id: 'app.docs.components.icon.pic-searcher.title',
+          defaultMessage: '信息',
+        })}
+        open={state.modalOpen}
+        onCancel={toggleModal}
+        footer={null}
+      >
+        {state.modelLoaded || (
+          <Spin
+            spinning={!state.modelLoaded}
+            tip={formatMessage({
+              id: 'app.docs.components.icon.pic-searcher.modelloading',
+
+            })}
+          >
+            <div style={{ height: 100 }} />
+          </Spin>
+        )}
+        {state.modelLoaded && (
+          <Dragger
+            accept="image/jpeg, image/png"
+            listType="picture"
+            customRequest={o => uploadFile(o.file as File)}
+            fileList={state.fileList}
+            showUploadList={{ showPreviewIcon: false, showRemoveIcon: false }}
+          >
+            <p className="ant-upload-drag-icon">
+              <AntdIcons.InboxOutlined />
+            </p>
+            <p className="ant-upload-text">
+              {formatMessage({id: 'app.docs.components.icon.pic-searcher.upload-text'})}
+            </p>
+            <p className="ant-upload-hint">
+              {formatMessage({id: 'app.docs.components.icon.pic-searcher.upload-hint'})}
+            </p>
+          </Dragger>
+        )}
+        <Spin
+          spinning={state.loading}
+          tip={formatMessage({id: 'app.docs.components.icon.pic-searcher.matching'})}
+        >
+          <div className="icon-pic-search-result">
+            {state.icons.length > 0 && (
+              <div className="result-tip">
+                {formatMessage({id: 'app.docs.components.icon.pic-searcher.result-tip'})}
+              </div>
+            )}
+            <table>
+              {state.icons.length > 0 && (
+                <thead>
+                  <tr>
+                    <th className="col-icon">
+                      {formatMessage({id: 'app.docs.components.icon.pic-searcher.th-icon'})}
+                    </th>
+                    <th>{formatMessage({id: 'app.docs.components.icon.pic-searcher.th-score'})}</th>
+                  </tr>
+                </thead>
+              )}
+              <tbody>
+                {state.icons.map(icon => {
+                  const { type } = icon;
+                  const iconName = `${type
+                    .split('-')
+                    .map(str => `${str[0].toUpperCase()}${str.slice(1)}`)
+                    .join('')}Outlined`;
+                  return (
+                    <tr key={iconName}>
+                      <td className="col-icon">
+                          <Tooltip title={icon.type} placement="right">
+                            {React.createElement(allIcons[iconName])}
+                          </Tooltip>
+                      </td>
+                      <td>
+                        <Progress percent={Math.ceil(icon.score * 100)} />
+                      </td>
+                    </tr>
+                  );
+                })}
+              </tbody>
+            </table>
+            {state.error && (
+              <Result
+                status="500"
+                title="503"
+                subTitle={formatMessage({id: 'app.docs.components.icon.pic-searcher.server-error'})}
+              />
+            )}
+          </div>
+        </Spin>
+      </Modal>
+    </div>
+  );
+};
+
+export default PicSearcher;

src/components/IconSelector/fields.ts

@@ -0,0 +1,223 @@
+import * as AntdIcons from '@ant-design/icons/lib/icons';
+
+const all = Object.keys(AntdIcons)
+  .map(n => n.replace(/(Outlined|Filled|TwoTone)$/, ''))
+  .filter((n, i, arr) => arr.indexOf(n) === i);
+
+const direction = [
+  'StepBackward',
+  'StepForward',
+  'FastBackward',
+  'FastForward',
+  'Shrink',
+  'ArrowsAlt',
+  'Down',
+  'Up',
+  'Left',
+  'Right',
+  'CaretUp',
+  'CaretDown',
+  'CaretLeft',
+  'CaretRight',
+  'UpCircle',
+  'DownCircle',
+  'LeftCircle',
+  'RightCircle',
+  'DoubleRight',
+  'DoubleLeft',
+  'VerticalLeft',
+  'VerticalRight',
+  'VerticalAlignTop',
+  'VerticalAlignMiddle',
+  'VerticalAlignBottom',
+  'Forward',
+  'Backward',
+  'Rollback',
+  'Enter',
+  'Retweet',
+  'Swap',
+  'SwapLeft',
+  'SwapRight',
+  'ArrowUp',
+  'ArrowDown',
+  'ArrowLeft',
+  'ArrowRight',
+  'PlayCircle',
+  'UpSquare',
+  'DownSquare',
+  'LeftSquare',
+  'RightSquare',
+  'Login',
+  'Logout',
+  'MenuFold',
+  'MenuUnfold',
+  'BorderBottom',
+  'BorderHorizontal',
+  'BorderInner',
+  'BorderOuter',
+  'BorderLeft',
+  'BorderRight',
+  'BorderTop',
+  'BorderVerticle',
+  'PicCenter',
+  'PicLeft',
+  'PicRight',
+  'RadiusBottomleft',
+  'RadiusBottomright',
+  'RadiusUpleft',
+  'RadiusUpright',
+  'Fullscreen',
+  'FullscreenExit',
+];
+
+const suggestion = [
+  'Question',
+  'QuestionCircle',
+  'Plus',
+  'PlusCircle',
+  'Pause',
+  'PauseCircle',
+  'Minus',
+  'MinusCircle',
+  'PlusSquare',
+  'MinusSquare',
+  'Info',
+  'InfoCircle',
+  'Exclamation',
+  'ExclamationCircle',
+  'Close',
+  'CloseCircle',
+  'CloseSquare',
+  'Check',
+  'CheckCircle',
+  'CheckSquare',
+  'ClockCircle',
+  'Warning',
+  'IssuesClose',
+  'Stop',
+];
+
+const editor = [
+  'Edit',
+  'Form',
+  'Copy',
+  'Scissor',
+  'Delete',
+  'Snippets',
+  'Diff',
+  'Highlight',
+  'AlignCenter',
+  'AlignLeft',
+  'AlignRight',
+  'BgColors',
+  'Bold',
+  'Italic',
+  'Underline',
+  'Strikethrough',
+  'Redo',
+  'Undo',
+  'ZoomIn',
+  'ZoomOut',
+  'FontColors',
+  'FontSize',
+  'LineHeight',
+  'Dash',
+  'SmallDash',
+  'SortAscending',
+  'SortDescending',
+  'Drag',
+  'OrderedList',
+  'UnorderedList',
+  'RadiusSetting',
+  'ColumnWidth',
+  'ColumnHeight',
+];
+
+const data = [
+  'AreaChart',
+  'PieChart',
+  'BarChart',
+  'DotChart',
+  'LineChart',
+  'RadarChart',
+  'HeatMap',
+  'Fall',
+  'Rise',
+  'Stock',
+  'BoxPlot',
+  'Fund',
+  'Sliders',
+];
+
+const logo = [
+  'Android',
+  'Apple',
+  'Windows',
+  'Ie',
+  'Chrome',
+  'Github',
+  'Aliwangwang',
+  'Dingding',
+  'WeiboSquare',
+  'WeiboCircle',
+  'TaobaoCircle',
+  'Html5',
+  'Weibo',
+  'Twitter',
+  'Wechat',
+  'Youtube',
+  'AlipayCircle',
+  'Taobao',
+  'Skype',
+  'Qq',
+  'MediumWorkmark',
+  'Gitlab',
+  'Medium',
+  'Linkedin',
+  'GooglePlus',
+  'Dropbox',
+  'Facebook',
+  'Codepen',
+  'CodeSandbox',
+  'CodeSandboxCircle',
+  'Amazon',
+  'Google',
+  'CodepenCircle',
+  'Alipay',
+  'AntDesign',
+  'AntCloud',
+  'Aliyun',
+  'Zhihu',
+  'Slack',
+  'SlackSquare',
+  'Behance',
+  'BehanceSquare',
+  'Dribbble',
+  'DribbbleSquare',
+  'Instagram',
+  'Yuque',
+  'Alibaba',
+  'Yahoo',
+  'Reddit',
+  'Sketch',
+  'WhatsApp',
+  'Dingtalk',
+];
+
+const datum = [...direction, ...suggestion, ...editor, ...data, ...logo];
+
+const other = all.filter(n => !datum.includes(n));
+
+export const categories = {
+  direction,
+  suggestion,
+  editor,
+  data,
+  logo,
+  other,
+};
+
+export default categories;
+
+export type Categories = typeof categories;
+export type CategoriesKeys = keyof Categories;

src/components/IconSelector/icon.ts

@@ -0,0 +1,11 @@
+import React from 'react'
+import * as icons from '@ant-design/icons'
+// 自定义样式style
+const Icon = (props: { icon: string, style?: object}) => {
+  const { icon, style  } = props;
+  const antIcon: { [key: string]: any } = icons;
+  return React.createElement(antIcon[icon], { style });
+
+};
+
+export default Icon

src/components/IconSelector/index.tsx

@@ -0,0 +1,147 @@
+import * as React from 'react';
+import Icon, * as AntdIcons from '@ant-design/icons';
+import { Radio, Input, Empty } from 'antd';
+import type { RadioChangeEvent } from 'antd/es/radio/interface';
+import debounce from 'lodash/debounce';
+import Category from './Category';
+import IconPicSearcher from './IconPicSearcher';
+import { FilledIcon, OutlinedIcon, TwoToneIcon } from './themeIcons';
+import type { CategoriesKeys } from './fields';
+import { categories } from './fields';
+// import { useIntl } from '@umijs/max';
+
+export enum ThemeType {
+  Filled = 'Filled',
+  Outlined = 'Outlined',
+  TwoTone = 'TwoTone',
+}
+
+const allIcons: { [key: string]: any } = AntdIcons;
+
+interface IconSelectorProps {
+  //intl: any;
+  onSelect: any;
+}
+
+interface IconSelectorState {
+  theme: ThemeType;
+  searchKey: string;
+}
+
+const IconSelector: React.FC<IconSelectorProps> = (props) => {
+  // const intl = useIntl();
+  // const { messages } = intl;
+  const { onSelect } = props;
+  const [displayState, setDisplayState] = React.useState<IconSelectorState>({
+    theme: ThemeType.Outlined,
+    searchKey: '',
+  });
+
+  const newIconNames: string[] = [];
+
+  const handleSearchIcon = React.useCallback(
+    debounce((searchKey: string) => {
+      setDisplayState(prevState => ({ ...prevState, searchKey }));
+    }),
+    [],
+  );
+
+  const handleChangeTheme = React.useCallback((e: RadioChangeEvent) => {
+    setDisplayState(prevState => ({ ...prevState, theme: e.target.value as ThemeType }));
+  }, []);
+
+  const renderCategories = React.useMemo<React.ReactNode | React.ReactNode[]>(() => {
+    const { searchKey = '', theme } = displayState;
+
+    const categoriesResult = Object.keys(categories)
+      .map((key: CategoriesKeys) => {
+        let iconList = categories[key];
+        if (searchKey) {
+          const matchKey = searchKey
+            // eslint-disable-next-line prefer-regex-literals
+            .replace(new RegExp(`^<([a-zA-Z]*)\\s/>$`, 'gi'), (_, name) => name)
+            .replace(/(Filled|Outlined|TwoTone)$/, '')
+            .toLowerCase();
+          iconList = iconList.filter((iconName:string) => iconName.toLowerCase().includes(matchKey));
+        }
+
+        // CopyrightCircle is same as Copyright, don't show it
+        iconList = iconList.filter((icon:string) => icon !== 'CopyrightCircle');
+
+        return {
+          category: key,
+          icons: iconList.map((iconName:string) => iconName + theme).filter((iconName:string) => allIcons[iconName]),
+        };
+      })
+      .filter(({ icons }) => !!icons.length)
+      .map(({ category, icons }) => (
+        <Category
+          key={category}
+          title={category as CategoriesKeys}
+          theme={theme}
+          icons={icons}
+          newIcons={newIconNames}
+          onSelect={(type, name) => {
+            if (onSelect) {
+              onSelect(name, allIcons[name]);
+            }
+          }}
+        />
+      ));
+    return categoriesResult.length === 0 ? <Empty style={{ margin: '2em 0' }} /> : categoriesResult;
+  }, [displayState.searchKey, displayState.theme]);
+  return (
+    <>
+      <div className='gn' style={{ display: 'flex', justifyContent: 'space-between' }}>
+        {/* 
+        * //TODO 二级：输入框上方提示文案悬浮会覆盖清空菜单图标项按钮
+        */}
+      <Input.Search
+          // placeholder={messages['app.docs.components.icon.search.placeholder']}
+          style={{ marginRight: 12, flex: 1 }}
+          allowClear
+          onChange={e => handleSearchIcon(e.currentTarget.value)}
+          size="large"
+          autoFocus
+          suffix={<IconPicSearcher />}
+        />
+        {/* <Icon component={OutlinedIcon} /> <Icon component={FilledIcon} TwoToneIcon /> */}
+        <Radio.Group
+          value={displayState.theme}
+          onChange={handleChangeTheme}
+          size="large"
+          optionType="button"
+          buttonStyle="solid"
+          options={[
+            {
+              label:  <>线性</> ,
+              value: ThemeType.Outlined
+            },
+            {
+              label: <>填充</> ,
+              value: ThemeType.Filled
+            },
+            {
+              label: <>彩色</>,
+              value: ThemeType.TwoTone
+            },
+          ]}
+        >
+          {/* <Radio.Button value={ThemeType.Outlined}>
+            <Icon components={OutlinedIcon} /> {messages['app.docs.components.icon.outlined']}
+          </Radio.Button>
+          <Radio.Button value={ThemeType.Filled}>
+            <Icon components={FilledIcon} /> {messages['app.docs.components.icon.filled']}
+          </Radio.Button>
+          <Radio.Button value={ThemeType.TwoTone}>
+            <Icon components={TwoToneIcon} /> {messages['app.docs.components.icon.two-tone']}
+          </Radio.Button> */}
+        </Radio.Group>
+      
+      </div>
+      {renderCategories}
+    </>
+  );
+};
+
+export default IconSelector

src/components/IconSelector/style.less

@@ -0,0 +1,137 @@
+.iconPicSearcher {
+  display: inline-block;
+  margin: 0 8px;
+
+  .icon-pic-btn {
+    color: @text-color-secondary;
+    cursor: pointer;
+    transition: all 0.3s;
+
+    &:hover {
+      color: @input-icon-hover-color;
+    }
+  }
+}
+
+.icon-pic-preview {
+  width: 30px;
+  height: 30px;
+  margin-top: 10px;
+  padding: 8px;
+  text-align: center;
+  border: 1px solid @border-color-base;
+  border-radius: 4px;
+
+  > img {
+    max-width: 50px;
+    max-height: 50px;
+  }
+}
+
+.icon-pic-search-result {
+  min-height: 50px;
+  padding: 0 10px;
+
+  > .result-tip {
+    padding: 10px 0;
+    color: @text-color-secondary;
+  }
+
+  > table {
+    width: 100%;
+
+    .col-icon {
+      width: 80px;
+      padding: 10px 0;
+
+      > .anticon {
+        font-size: 30px;
+
+        :hover {
+          color: @link-hover-color;
+        }
+      }
+    }
+  }
+}
+
+ul.anticonsList {
+  margin: 2px 0;
+  overflow: hidden;
+  direction: ltr;
+  list-style: none;
+
+  li {
+    position: relative;
+    float: left;
+    width: 48px;
+    height: 48px;
+    margin: 3px 0;
+    padding: 2px 0 0;
+    overflow: hidden;
+    color: #555;
+    text-align: center;
+    list-style: none;
+    background-color: inherit;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out;
+
+    .rtl & {
+      margin: 3px 0;
+      padding: 2px 0 0;
+    }
+
+    .anticon {
+      margin: 4px 0 2px;
+      font-size: 24px;
+      transition: transform 0.3s ease-in-out;
+      will-change: transform;
+    }
+
+    .anticonClass {
+      display: block;
+      font-family: 'Lucida Console', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+      white-space: nowrap;
+      text-align: center;
+      transform: scale(0.83);
+
+      .ant-badge {
+        transition: color 0.3s ease-in-out;
+      }
+    }
+
+    &:hover {
+      color: #fff;
+      background-color: @primary-color;
+
+      .anticon {
+        transform: scale(1.4);
+      }
+
+      .ant-badge {
+        color: #fff;
+      }
+    }
+
+    &.TwoTone:hover {
+      background-color: #8ecafe;
+    }
+
+    &.copied:hover {
+      color: rgba(255, 255, 255, 0.2);
+    }
+
+    &.copied::after {
+      top: -2px;
+      opacity: 1;
+    }
+  }
+}
+
+.copied-code {
+  padding: 2px 4px;
+  font-size: 12px;
+  background: #f5f5f5;
+  border-radius: 2px;
+}

src/components/IconSelector/themeIcons.tsx

@@ -0,0 +1,41 @@
+import * as React from 'react';
+
+
+export const FilledIcon: React.FC = props => {
+  const path =
+    'M864 64H160C107 64 64 107 64 160v' +
+    '704c0 53 43 96 96 96h704c53 0 96-43 96-96V16' +
+    '0c0-53-43-96-96-96z';
+  return (
+    <svg {...props} viewBox="0 0 1024 1024">
+      <path d={path} />
+    </svg>
+  );
+};
+
+export const OutlinedIcon: React.FC = props => {
+  const path =
+    'M864 64H160C107 64 64 107 64 160v7' +
+    '04c0 53 43 96 96 96h704c53 0 96-43 96-96V160c' +
+    '0-53-43-96-96-96z m-12 800H172c-6.6 0-12-5.4-' +
+    '12-12V172c0-6.6 5.4-12 12-12h680c6.6 0 12 5.4' +
+    ' 12 12v680c0 6.6-5.4 12-12 12z';
+  return (
+    <svg {...props} viewBox="0 0 1024 1024">
+      <path d={path} />
+    </svg>
+  );
+};
+
+export const TwoToneIcon: React.FC = props => {
+  const path =
+    'M16 512c0 273.932 222.066 496 496 49' +
+    '6s496-222.068 496-496S785.932 16 512 16 16 238.' +
+    '066 16 512z m496 368V144c203.41 0 368 164.622 3' +
+    '68 368 0 203.41-164.622 368-368 368z';
+  return (
+    <svg {...props} viewBox="0 0 1024 1024">
+      <path d={path} />
+    </svg>
+  );
+};

src/components/Loading/loadingSpin.tsx

@@ -0,0 +1,65 @@
+/*
+ * @Author: zhoux zhouxia@supervision.ltd
+ * @Date: 2023-12-29 14:19:46
+ * @LastEditors: zhoux zhouxia@supervision.ltd
+ * @LastEditTime: 2023-12-29 15:31:14
+ * @FilePath: \general-ai-platform-web\src\components\Loading\loadingSpin.tsx
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
+
+type LoadingSpinProps = {
+  spinning: boolean;
+  tip?: string | React.ReactNode;
+  indicator?: React.ReactNode;
+};
+/**
+ * @加载控件
+ * @param props
+ * @returns
+ */
+const LoadingSpin: React.FC<LoadingSpinProps> = (props) => {
+  return props.spinning ? (
+    <div
+      style={{
+        background: 'transparent',
+        position: 'fixed',
+        left: 0,
+        top: 0,
+        width: '100vw',
+        height: '100vh',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        zIndex: 999,
+        backgroundColor: 'rgba(0,0,0, 0.3)',
+        color: 'white',
+      }}
+    >
+      <div
+        style={{
+          backgroundColor: 'white',
+          borderRadius: 12,
+          width: 361,
+          height: 216,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          flexDirection: 'column',
+          color: '#154DDD'
+        }}
+      >
+        {props.indicator ? (
+          props.indicator
+        ) : (
+          <img style={{ width: 120 }} src="/loading1.gif" alt="" />
+        )}
+
+        <p style={{padding: 8, margin: 0}}>{props.tip || '请稍候...'}</p>
+      </div>
+    </div>
+  ) : (
+    <></>
+  );
+};
+
+export default LoadingSpin;

src/components/Notice/index.module.less

@@ -0,0 +1,37 @@
+.notice {
+  display: flex;
+  // float: right;
+  // padding-top: 10px;
+  // margin-right: 28px;
+  justify-content: space-between;
+}
+
+.topNotice {
+  padding: 4px 8px 0px 8px;
+  user-select: none;
+}
+
+.bottomBar {
+  text-align: center;
+  border-top: 1px solid #f0f0f0;
+  border-radius: 0 0 2px 2px;
+  transition: all 0.3s;
+}
+
+.dobtn {
+  display: inline-block;
+  width: 50%;
+  padding: 12px 0;
+  cursor: pointer;
+  &:hover {
+    background-color: #eee;
+  }
+}
+
+.doLeftBtn {
+  border-right: 1px solid #f0f0f0;
+}
+
+.tab {
+  padding: 0 12px;
+}

src/components/Notice/index.tsx

@@ -0,0 +1,178 @@
+import React, { useState, useEffect, useRef } from "react";
+import { Tabs, Badge, Spin, List, Avatar, Tag, Popover, notification } from "antd";
+import { BellOutlined, LoadingOutlined } from "@ant-design/icons";
+// svg 转组件
+import { ReactComponent as NoticeSvg } from '../../../public/icons/notice.svg';
+import type { NotificationPlacement } from 'antd/es/notification/interface';
+
+// import { getallnotices, getUidNotices } from "@/api/caravan/User";
+
+import styles from "./index.module.less";
+import { useNavigate } from "react-router-dom";
+
+enum EventStatus {
+  todo = "rgba(255,255,255,1)",
+  urgent = "#f5222d",
+  doing = "#faad14",
+  processing = "#1890ff"
+}
+
+const antIcon = <LoadingOutlined style={{ fontSize: 24 }} spin />;
+
+const { TabPane} = Tabs;
+
+const Context = React.createContext({ name: 'Default' });
+
+const Notice: React.FC = () => {
+  const [visible, setVisible] = useState(false);
+  const [noticeList, setNoticeList] = useState<any[]>([]);
+  const [loading, setLoading] = useState(false);
+  const noticeCount = 10;
+  const intervalHandle: any = useRef(null);
+  const [noticeNum, setNoticeNum] = useState(0);
+
+  const noticeListFilter = <T extends any>(type: T) => {
+    return noticeList.filter(notice => notice.type === type) as any[];
+  };
+  const navigate = useNavigate();
+  const toManagePage = () => {
+    navigate("/notice");
+  };
+  const getNotice = async () => {
+    //查看我是否有新消息 无论如何
+    // setLoading(true);
+    //无论如何，清掉定时器,使用了 ref,肯定能拿到指针。
+    //并且启动一个定时器，定时刷新我的消息
+    clearTimeout(intervalHandle.current);
+    intervalHandle.current = setTimeout(() => {
+      setNoticeNum(Math.ceil(Math.random() * 1000));
+    }, 1000 * 60 * 60);
+    // getUidNotices()
+    //   .then(result => {
+    //     setLoading(false);
+    //     if (result.status && result.data && Array.isArray(result.data.data)) {
+    //       setNoticeList(result.data.data);
+    //     }
+    //   })
+    //   .catch(() => {
+    //     setLoading(false);
+    //   });
+    // getallnotices();
+  };
+  // const [api, contextHolder] = notification.useNotification();
+
+  // const openNotification = (placement: NotificationPlacement) => {
+  //   api.info({
+  //     message: `Notification ${placement}`,
+  //     description: <Context.Consumer>{({ name }) => `Hello, ${name}!`}</Context.Consumer>,
+  //     placement,
+  //   });
+  // };
+
+  useEffect(() => {
+    getNotice();
+  }, [noticeNum]);
+  // const ws = new WebSocket("ws://localhost:3000/");
+
+  // useEffect(() => {
+
+  //    console.log(ws);
+  //   // ws.onopen = function () {
+  //   //   setInterval(function () {
+  //   //     ws.send("客户端消息");
+  //   //   }, 2000);
+  //   // };
+
+  //   ws.onmessage = function (e) {
+  //     console.log(e.data);
+  //     openNotification('topRight')
+  //   }
+  // }, []);
+  useEffect(() => {
+    return () => {
+      clearTimeout(intervalHandle.current);
+    };
+  }, []);
+
+  const onClear = () => {
+    // ws.send("客户端消息");
+  };
+  const onViewMore = () => {};
+  const tabsData = [
+    {
+      title: 'Ant Design Title 1',
+      time: '刚刚'
+    },
+    {
+      title: 'Ant Design Title 2Ant Design Title 2Ant Design Title 2Ant Design Title 2Ant Design Title 2Ant Design Title 2Ant Design Title 2',
+      time: '刚刚'
+    },
+    {
+      title: 'Ant Design Title 3',
+      time: '刚刚'
+    },
+    {
+      title: 'Ant Design Title 4',
+      time: '刚刚'
+    },
+  ];
+  const tabs = (
+    <div className={styles.topNotice}>
+      <Spin tip="Loading..." indicator={antIcon} spinning={loading}>
+        <List
+          dataSource={tabsData}
+          renderItem={item => (
+            <List.Item onClick={() => toManagePage()} style={{ cursor: "pointer" }}>
+              <List.Item.Meta
+                description={
+                  <div>
+                    <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 8, fontWeight: 600 }}>
+                      <span style={{ fontSize: "14px", color: "#333" }}>系统消息</span>
+                      <Tag bordered={false} color="error" style={{ marginInlineEnd: 0, fontWeight: 400 }}>
+                        紧急
+                      </Tag>
+                    </div>
+                    <div style={{ fontSize: "14px", color: "#333" }}>
+                      {item.title}
+                    </div>
+                    <div style={{ color: "#999" }}>{item.time}</div>
+                  </div>
+                }
+              />
+            </List.Item>
+          )}
+        />
+      </Spin>
+    </div>
+  );
+  return (
+    <div style={{display: 'flex'}}>
+    {/* {contextHolder} */}
+      <Popover
+        content={tabs}
+        overlayClassName="bg-2"
+        placement="bottomRight"
+        trigger={['click']}
+        open={visible}
+        onOpenChange={v => setVisible(v)}
+        arrow={{pointAtCenter: true}}
+        overlayStyle={{
+          width: 396,
+        }}
+      >
+        {/* <Tooltip
+          title={'消息通知'}
+        > */}
+          <Badge count={noticeList.length || noticeCount} overflowCount={999} offset={[8, -2]}>
+            <span>
+              {/* <BellOutlined style={{ fontSize: "18px" }} /> */}
+              <NoticeSvg style={{ fontSize: "18px" }} />
+            </span>
+          </Badge>
+        {/* </Tooltip> */}
+      </Popover>
+  </div>
+  );
+};
+
+export default Notice;

src/components/RightContent/AvatarDropdown.tsx

@@ -0,0 +1,140 @@
+import { LogoutOutlined, SettingOutlined, UserOutlined } from '@ant-design/icons';
+import { useEmotionCss } from '@ant-design/use-emotion-css';
+// @ts-ignore
+import { history, useModel } from '@umijs/max';
+import { Spin } from 'antd';
+import { stringify } from 'querystring';
+import type { MenuInfo } from 'rc-menu/lib/interface';
+import React, { useCallback } from 'react';
+import { flushSync } from 'react-dom';
+import HeaderDropdown from '../HeaderDropdown';
+import {postJwtJsonInBlacklist} from "@/services/system/Jwt";
+
+export type GlobalHeaderRightProps = {
+  menu?: boolean;
+  children?: React.ReactNode;
+};
+
+export const AvatarName = () => {
+  const { initialState } = useModel('@@initialState');
+  const { currentUser } = initialState || {};
+  return <span className="anticon">{currentUser?.nickName}</span>;
+};
+
+export const AvatarDropdown: React.FC<GlobalHeaderRightProps> = ({ menu, children }) => {
+  /**
+   * 退出登录，并且将当前的 url 保存
+   */
+  const loginOut = async () => {
+    await postJwtJsonInBlacklist()
+    // await UserLogOut();
+    localStorage.removeItem('access')
+    const { search, pathname } = window.location;
+    const urlParams = new URL(window.location.href).searchParams;
+    /** 此方法会跳转到 redirect 参数所在的位置 */
+    const redirect = urlParams.get('redirect');
+    // Note: There may be security issues, please note
+    if (window.location.pathname !== '/user/login' && !redirect) {
+      history.replace({
+        pathname: '/user/login',
+        search: stringify({
+          redirect: pathname + search,
+        }),
+      });
+    }
+  };
+  const actionClassName = useEmotionCss(({ token }) => {
+    return {
+      display: 'flex',
+      height: '48px',
+      marginLeft: 'auto',
+      overflow: 'hidden',
+      alignItems: 'center',
+      padding: '0 8px',
+      cursor: 'pointer',
+      borderRadius: token.borderRadius,
+      '&:hover': {
+        backgroundColor: token.colorBgTextHover,
+      },
+    };
+  });
+  const { initialState, setInitialState } = useModel('@@initialState');
+
+  const onMenuClick = useCallback(
+    (event: MenuInfo) => {
+      const { key } = event;
+      if (key === 'center') {
+        history.push(`/account/${key}`);
+        return;
+      }
+      if (key === 'logout') {
+        flushSync(() => {
+          setInitialState((s) => ({ ...s, currentUser: undefined, menuData: undefined }));
+        });
+        loginOut().then(() => {});
+        return;
+      }
+      history.push(`/account/${key}`);
+    },  
+    [setInitialState],
+  );
+
+  const loading = (
+    <span className={actionClassName}>
+      <Spin
+        size="small"
+        style={{
+          marginLeft: 8,
+          marginRight: 8,
+        }}
+      />
+    </span>
+  );
+  console.log(initialState)
+  if (!initialState) {
+    return loading;
+  }
+
+  const { currentUser } = initialState;
+
+  if (!currentUser || !currentUser.nickName) {
+    return loading;
+  }
+
+  const menuItems = [
+    ...(menu
+      ? [
+          {
+            key: 'center',
+            icon: <UserOutlined />,
+            label: '个人中心',
+          },
+          // {
+          //   key: 'settings',
+          //   icon: <SettingOutlined />,
+          //   label: '个人设置',
+          // },
+          {
+            type: 'divider' as const,
+          },
+        ]
+      : []),
+    {
+      key: 'logout',
+      icon: <LogoutOutlined />,
+      label: '退出登录',
+    },
+  ];
+  console.log(menuItems,'menuItems');
+  return (
+    <HeaderDropdown
+      menu={{
+        selectedKeys: [],
+        onClick: onMenuClick,
+        items: menuItems,
+      }}
+    >
+      {children}
+    </HeaderDropdown>
+  );
+};

src/components/RightContent/index.tsx

@@ -0,0 +1,66 @@
+/*
+ * @Author: zhoux zhouxia@supervision.ltd
+ * @Date: 2023-11-01 13:56:33
+ * @LastEditors: zhoux zhouxia@supervision.ltd
+ * @LastEditTime: 2023-11-28 11:34:00
+ * @FilePath: \general-ai-platform-web\src\components\RightContent\index.tsx
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
+import { QuestionCircleOutlined } from '@ant-design/icons';
+import { SelectLang as UmiSelectLang } from '@umijs/max';
+import React from 'react';
+import { Select } from 'antd';
+import {useModel} from "@@/exports";
+export type SiderTheme = 'light' | 'dark';
+import {postUserSetUserRole} from "@/services/system/User";
+
+export const SelectLang = () => {
+  return (
+    <UmiSelectLang
+      style={{
+        padding: 4,
+      }}
+    />
+  );
+};
+
+export const Question = () => {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        height: 26,
+      }}
+      onClick={() => {
+        window.open('https://pro.ant.design/docs/getting-started');
+      }}
+    >
+      <QuestionCircleOutlined />
+    </div>
+  );
+};
+
+export const SelectRole = () => {
+
+  const { initialState } = useModel('@@initialState');
+  const { currentUser } = initialState || {};
+
+  return (
+    <span className='gn'>
+      {
+        currentUser && (
+          <Select
+            value={currentUser.roleId}
+            options={currentUser?.roles || []}
+            onSelect={value => {
+              postUserSetUserRole({roleId: value}).then((resp) => {
+                console.log(resp)
+              })
+            }}
+          />
+        )
+      }
+    </span>
+
+  );
+};

src/components/TableActionCard/index.tsx

@@ -0,0 +1,69 @@
+/*
+ * @Author: zhoux zhouxia@supervision.ltd
+ * @Date: 2023-11-14 15:49:36
+ * @LastEditors: zhoux zhouxia@supervision.ltd
+ * @LastEditTime: 2023-12-11 10:30:54
+ * @FilePath: \general-ai-platform-web\src\components\TableActionCard\index.tsx
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
+
+import { DownOutlined } from '@ant-design/icons';
+import { Dropdown } from 'antd';
+import React from 'react';
+
+//TODO 表单的操作按钮集合 key的报错未解决
+type actionsProps = {
+  key: string;
+  renderDom: any;
+}
+
+export type TableActionItemProps = {
+  renderActions: actionsProps[];
+  listType?: 'proTable' | 'proList'
+};
+
+const TableActionCard: React.FC<TableActionItemProps> = (props) => {
+  const { renderActions } = props;
+  const maxActionCount = 3;
+  let prevActions: any[] = [];
+  const moreActions: { key: string; label: any }[] = [];
+  if (renderActions.length <= maxActionCount) {
+    prevActions = renderActions;
+  } else {
+    // eslint-disable-next-line array-callback-return
+    renderActions.map((item, index) => {
+      if (index < maxActionCount - 1) {
+        prevActions.push(item);
+      } else {
+        moreActions.push({
+          key: index + '',
+          label: item.renderDom,
+        });
+      }
+      // eslint-disable-next-line react/jsx-key
+    });
+  }
+  return (
+    <div className={`${ props?.listType ? props?.listType : 'proTable'}ActionBox`}>
+      {prevActions.map((item) => {
+        return (
+          <span style={ props?.listType === 'proList' ? { paddingLeft: 8} : { paddingRight: 8 }} key={item.key}>
+            {item.renderDom}
+          </span>
+        );
+      })}
+      {moreActions.length ? (
+        <Dropdown menu={{ items: moreActions }}>
+          <a>
+            更多
+            <DownOutlined />
+          </a>
+        </Dropdown>
+      ) : (
+        <></>
+      )}
+    </div>
+  );
+};
+
+export default TableActionCard;

src/components/TableActionCard/isConfirmAction.tsx

@@ -0,0 +1,58 @@
+/*
+ * @Author: zhoux zhouxia@supervision.ltd
+ * @Date: 2023-11-16 14:30:15
+ * @LastEditors: zhoux zhouxia@supervision.ltd
+ * @LastEditTime: 2023-12-11 15:20:25
+ * @FilePath: \general-ai-platform-web\src\components\BatchOperation\isBatchDelete.tsx
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
+// import { useIntl } from '@ant-design/pro-components';
+import { useIntl } from '@umijs/max';
+import { Button, Popconfirm } from 'antd';
+import { FormattedMessage } from 'react-intl';
+
+type isConfirmActionProps = {
+  // eslint-disable-next-line @typescript-eslint/ban-types
+  confirmAction: Function;
+  title: string;
+  description?: string;
+  buttonText?: string;
+  buttonFormatText?: string;
+  buttonType?: 'link' | 'text' | 'default' | 'primary' | 'dashed' | undefined;
+  danger?: boolean
+};
+
+const IsConfirmAction: React.FC<isConfirmActionProps> = (props) => {
+  const intl = useIntl();
+  const description = props.description || `确认${props.title}吗?`;
+  return (
+    <Popconfirm
+      title={props.title}
+      description={description}
+      onConfirm={() => {
+        props.confirmAction();
+      }}
+      onCancel={() => {}}
+      okText={intl.formatMessage({ id: 'common.yes', defaultMessage: '$$$' })}
+      cancelText={intl.formatMessage({ id: 'common.no', defaultMessage: '$$$' })}
+    >
+      <Button
+        type={props?.buttonType ? props.buttonType : 'link'}
+        danger={props?.danger}
+        size="small"
+        onClick={() => {
+          // setPublishModalOpen(true);
+        }}
+      >
+        {/* 自定义文案优先 */}
+        {props.buttonText ? (
+          props.buttonText
+        ) : (
+          <FormattedMessage id={props.buttonFormatText} defaultMessage="$$$" />
+        )}
+      </Button>
+    </Popconfirm>
+  );
+};
+
+export default IsConfirmAction;

src/components/TableActionCard/isDelete.tsx

@@ -0,0 +1,56 @@
+/*
+ * @Author: zhoux zhouxia@supervision.ltd
+ * @Date: 2023-11-16 14:30:15
+ * @LastEditors: zhoux zhouxia@supervision.ltd
+ * @LastEditTime: 2023-12-22 16:17:17
+ * @FilePath: \general-ai-platform-web\src\components\BatchOperation\isBatchDelete.tsx
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
+// import { useIntl } from '@ant-design/pro-components';
+import { DeleteOutlined } from '@ant-design/icons';
+import { useIntl } from '@umijs/max';
+import { Button, Popconfirm } from 'antd';
+import { proIconForTableActionStyle } from '../../../config/defaultIcon';
+import { FormattedMessage } from 'react-intl';
+
+type IsDeleteProps = {
+  // eslint-disable-next-line @typescript-eslint/ban-types
+  buttonType?: 'defalut' | 'deleteIcon';
+  deleteApi: () => void;
+};
+
+const IsDelete: React.FC<IsDeleteProps> = (props) => {
+  const intl = useIntl();
+
+  return (
+    <Popconfirm
+      key="destroy"
+      placement="topLeft"
+      title={intl.formatMessage({ id: 'common.tip.title', defaultMessage: '$$$' })}
+      description={intl.formatMessage({
+        id: 'common.modal.table.delete.content',
+        defaultMessage: '$$$',
+      })}
+      okText={intl.formatMessage({ id: 'common.yes', defaultMessage: '$$$' })}
+      cancelText={intl.formatMessage({ id: 'common.no', defaultMessage: '$$$' })}
+      onConfirm={() => {
+        props.deleteApi();
+      }}
+    >
+      {props.buttonType === 'deleteIcon' ? (
+        <>
+          <DeleteOutlined style={{
+            color: "rgba(232, 13, 13, 1)",
+          ...proIconForTableActionStyle
+          }} />
+        </>
+      ) : (
+        <Button type="link" size="small" danger>
+          <FormattedMessage id="pages.searchTable.destroy" defaultMessage="Destroy" />
+        </Button>
+      )}
+    </Popconfirm>
+  );
+};
+
+export default IsDelete;

src/components/TableActionCard/isModalDelete.tsx

@@ -0,0 +1,45 @@
+/*
+ * @Author: zhoux zhouxia@supervision.ltd
+ * @Date: 2023-12-27 10:30:10
+ * @LastEditors: zhoux zhouxia@supervision.ltd
+ * @LastEditTime: 2023-12-27 11:06:00
+ * @FilePath: \general-ai-platform-web\src\components\TableActionCard\isModalDelete.tsx
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
+import { ExclamationCircleOutlined } from '@ant-design/icons';
+import { useIntl } from '@umijs/max';
+import modal from 'antd/es/modal';
+
+type IsModalDeleteProps = {
+  deleteButton: React.ReactNode;
+  deleteApi: () => void;
+  titleText?: string;
+  contentText?: string;
+};
+
+const IsModalDelete: React.FC<IsModalDeleteProps> = (props) => {
+  const intl = useIntl();
+  const confirm = () => {
+    modal.confirm({
+      title: props.titleText || `确认删除吗？`,
+      icon: <ExclamationCircleOutlined />,
+      content: props.contentText || '确认删除吗？删除后将无法找回，请谨慎操作。',
+      okText: intl.formatMessage({ id: 'common.okText', defaultMessage: '$$$' }),
+      cancelText: intl.formatMessage({ id: 'common.cancelText', defaultMessage: '$$$' }),
+      onOk() {
+        props.deleteApi();
+      },
+      onCancel() {
+        console.log('Cancel');
+      },
+    });
+  };
+
+  return (
+    <>
+      <span onClick={() => confirm()}>{props.deleteButton}</span>
+    </>
+  );
+};
+
+export default IsModalDelete;

src/components/TableActionCard/stopBtn.tsx

@@ -0,0 +1,54 @@
+/**
+ * 停止按钮
+ * 
+ */
+import { DeleteOutlined } from '@ant-design/icons';
+import { useIntl } from '@umijs/max';
+import { Button, Popconfirm } from 'antd';
+import { proIconForTableActionStyle } from '../../../config/defaultIcon';
+import { FormattedMessage } from 'react-intl';
+
+type StopBtnProps = {
+  // eslint-disable-next-line @typescript-eslint/ban-types
+  buttonType?: 'defalut' | 'deleteIcon';
+  deleteApi: () => void;
+};
+
+const StopBtn: React.FC<StopBtnProps> = (props) => {
+  const intl = useIntl();
+
+  return (
+    <Popconfirm
+      key="destroy"
+      placement="topLeft"
+      title={intl.formatMessage({ id: 'common.tip.title', defaultMessage: '$$$' })}
+      description={intl.formatMessage({
+        id: 'common.modal.table.stop.content',
+        defaultMessage: '$$$',
+      })}
+      okText={intl.formatMessage({ id: 'common.yes', defaultMessage: '$$$' })}
+      cancelText={intl.formatMessage({ id: 'common.no', defaultMessage: '$$$' })}
+      onConfirm={() => {
+        props.deleteApi();
+      }}
+    >
+        {/* {props.buttonType === 'deleteIcon' ? (
+          <>
+            <DeleteOutlined style={{
+              color: "rgba(232, 13, 13, 1)",
+            ...proIconForTableActionStyle
+            }} />
+          </>
+        ) : (
+          <Button type="link" size="small" danger>
+            <FormattedMessage id="pages.searchTable.destroy" defaultMessage="Destroy" />
+          </Button>
+        )} */}
+        <Button type="link" size="small" danger>
+            <FormattedMessage id="pages.searchTable.stop" defaultMessage="Destroy" />
+        </Button>
+    </Popconfirm>
+  );
+};
+
+export default StopBtn;

src/components/TablePaginationCard/index.tsx

@@ -0,0 +1,39 @@
+/**
+ * 未使用 验证中
+ */
+import { TableDropdown } from '@ant-design/pro-components';
+import React from 'react';
+
+export type TablePaginationCardProps = {
+  total: number;
+  pageSize: number;
+  current: number;
+  // eslint-disable-next-line @typescript-eslint/ban-types
+  onChange: Function
+  
+};
+// 分页器
+const TablePaginationCard: React.FC<TablePaginationCardProps> = (props) => {
+  const { total, pageSize, current, onChange } = props;
+  const totalPage = Math.ceil(total / pageSize);
+
+  const handleChange = (page: number, pageSize: number) => {
+    onChange(page, pageSize);
+  };
+
+  return (
+    <div>
+      <span>
+        Total {total} items, {totalPage} pages
+      </span>
+      <TableDropdown
+        total={totalPage as number}
+        current={current}
+        pageSize={pageSize}
+        onClick={(e) => handleChange(e, pageSize)}
+      />
+    </div>
+  );
+};
+
+export default TablePaginationCard;

src/components/VideoPlayer/index.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import videojs from 'video.js';
+import './video.css';
+import './videojs-new-markers.js'
+
+export const VideoJS = (props) => {
+  const videoRef = React.useRef(null);
+  const playerRef = React.useRef(null);
+  const {options, onReady} = props;
+
+  React.useEffect(() => {
+
+    // Make sure Video.js player is only initialized once
+    if (!playerRef.current) {
+      // The Video.js player needs to be _inside_ the component el for React 18 Strict Mode.
+      const videoElement = document.createElement("video-js");
+
+      videoElement.classList.add('vjs-big-play-centered');
+      videoRef.current.appendChild(videoElement);
+
+      const player = playerRef.current = videojs(videoElement, options, () => {
+        videojs.log('player is ready');
+        onReady && onReady(player);
+      });
+
+      // You could update an existing player in the `else` block here
+      // on prop change, for example:
+    } else {
+      const player = playerRef.current;
+      player.autoplay(options.autoplay);
+      player.src(options.sources);
+    }
+  }, [options, videoRef]);
+
+  // Dispose the Video.js player when the functional component unmounts
+  React.useEffect(() => {
+    const player = playerRef.current;
+
+    return () => {
+      if (player && !player.isDisposed()) {
+        player.dispose();
+        playerRef.current = null;
+      }
+    };
+  }, [playerRef]);
+
+  return (
+    <div data-vjs-player={true}>
+      <div ref={videoRef} />
+    </div>
+  );
+}
+
+export default VideoJS;

src/components/VideoPlayer/videojs-new-markers.js

@@ -0,0 +1,172 @@
+import videojs from 'video.js';
+
+const Plugin = videojs.getPlugin('plugin');
+
+
+let is_jump = false;
+class Advanced extends Plugin {
+
+  constructor(player, options) {
+    super(player, options);
+
+
+    this.on(player, ['playing', 'pause'], this.updateState);
+    this.on('statechanged', this.logState);
+    player.ready(()=>{
+      player.controlBar.progressControl.on('keyup', (event) => {
+        const keyCode = event.which || event.keyCode;
+
+        // 检查是否按下左箭头键
+        if (keyCode === 37) {
+          // 处理左箭头键事件
+          console.log('左箭头键被按下');
+          // 在这里执行你的逻辑
+        }
+
+        // 检查是否按下右箭头键
+        if (keyCode === 39) {
+          // 处理右箭头键事件
+          console.log('右箭头键被按下');
+          // 在这里执行你的逻辑
+        }
+      })
+
+      player.controlBar.progressControl.on('mousemove', (event) => {
+        is_jump = false;
+      })
+
+      player.controlBar.progressControl.on('mouseup', (event) => {
+        is_jump = true;
+      })
+    })
+
+    this.player.on('loadedmetadata', () => {
+      // 获取视频的持续时间
+      let markers = []
+      if (options && 'video_config_options' in options) {
+        markers = Object.values(options['video_config_options'].result).map((v) => {
+          return {
+            time: Math.floor(v.time/options['video_config_options'].info.fps),
+            duration: Math.ceil(v.duration/options['video_config_options'].info.fps),
+          }
+        })
+      }
+      const duration = this.player.duration();
+      markers.forEach((v)=>{
+        let redBlock = document.createElement("div");
+        let tooltip = document.createElement('div');
+        let markerBlock = document.createElement('div');
+        let tooltip_text = document.createElement('div');
+
+        markerBlock.style.height= '200px'
+        markerBlock.appendChild(tooltip);
+        markerBlock.appendChild(redBlock);
+        // 将文本提示添加到红色块
+        redBlock.style.position = "absolute";
+        redBlock.style.width = "10px";
+        redBlock.style.height = "20px";
+        redBlock.style.backgroundColor = "rgba(219,55, 4, 0.6)";
+
+        // 计算红色块的位置
+        const left = (v.time / this.player.duration()) * 100;
+        const width = ((v.time + v.duration)/ this.player.duration()) * 100 - left;
+        const zIndex = 100 - Math.floor(width) || 100;
+        let progress = this.player.controlBar.progressControl.el();
+        let progressBar = progress.querySelector(".vjs-progress-holder");
+        let progressBarWidth = progressBar.offsetWidth;
+        let leftPosition = (50 / this.player.duration()) * progressBarWidth - 5;
+
+        // 设置红色块的位置
+        redBlock.style.left = left+"%";
+        redBlock.style.width =  width +'%';
+        redBlock.style.zIndex = 1;
+        redBlock.style.top = "-8px";
+        redBlock.style.borderRadius = '2px'
+        redBlock.addEventListener('click', () => {
+          // 弹出警报
+          // if (is_jump) {
+          //   this.player.currentTime(v.time);
+          // }
+
+        });
+        tooltip.className = 'tooltip';
+        tooltip.style.height = '20px'
+        tooltip.style.display = 'flex'
+        tooltip.style.justifyContent = 'center'
+        tooltip.style.alignItems = 'center'
+
+        tooltip_text.className='bubble'
+        tooltip_text.style.height = '30px'
+        tooltip_text.style.width = '80px'
+        tooltip_text.style.padding = '6px'
+        tooltip_text.style.height = '30px'
+        tooltip_text.textContent = options?.error_type
+        tooltip.appendChild(tooltip_text)
+
+        tooltip.style.position = "absolute";
+        tooltip.style.top = "-76px";
+        tooltip.style.left = left+"%";
+        tooltip.style.display = 'none';
+        redBlock.addEventListener('mouseenter', function () {
+          tooltip.style.display = 'block';
+          redBlock.style.transform = 'scale(1.1)';
+        });
+
+        // 鼠标移出红色块时隐藏文本提示
+        redBlock.addEventListener('mouseleave', function () {
+          tooltip.style.display = 'none';
+          redBlock.style.transform = 'scale(1)';
+        });
+        // 将红色块添加到进度条中
+        progressBar.appendChild(markerBlock);
+      })
+
+      // 在这里可以执行其他与视频持续时间相关的操作
+    });
+  }
+
+
+
+  updateOverlay() {
+    // console.log(22222222)
+    // const overlayPosition = 5; // 在5秒处显示红色块
+    //
+    // if (currentTime >= overlayPosition && currentTime <= overlayPosition + 5) {
+    //   // 创建一个覆盖层
+    //   const overlay = document.createElement('div');
+    //   overlay.className = 'overlay';
+    //   overlay.style.position = 'absolute';
+    //   overlay.style.left = '50%';
+    //   overlay.style.transform = 'translateX(-50%)';
+    //   overlay.style.top = '50%';
+    //   overlay.style.transform = 'translateY(-50%)';
+    //   overlay.style.width = '10px';
+    //   overlay.style.height = '10px';
+    //   overlay.style.backgroundColor = 'red';
+    //
+    //   // 将覆盖层添加到视频容器中
+    //   this.player().el().appendChild(overlay);
+    // } else {
+    //   // 如果不在5秒处，移除覆盖层
+    //   const overlay = this.player().el().querySelector('.overlay');
+    //   if (overlay) {
+    //     overlay.remove();
+    //   }
+    // }
+  }
+
+  dispose() {
+    super.dispose();
+    videojs.log('the advanced plugin is being disposed');
+  }
+
+  updateState() {
+    this.setState({playing: !this.player.paused()});
+  }
+
+  logState(changed) {
+    videojs.log(`the player is now ${this.state.playing ? 'playing' : 'paused'}`);
+  }
+}
+
+videojs.registerPlugin('advanced', Advanced);

src/components/WebRtcPlayer/index.tsx

@@ -0,0 +1,32 @@
+import React, {useEffect} from 'react';
+// @ts-ignore
+import WebRtcStreamer from 'webrtc-streamer/html/webrtcstreamer.js';
+export type Props = {
+  stream_url?: string;
+  server_url: string;
+  is_open: boolean;
+};
+const WebRTCStreamer : React.FC<Props> = (props) =>{
+  let webRtcServer: { connect: (arg0: string) => void; disconnect: () => void; } | null = null;
+
+  useEffect(() => {
+    if (props.is_open) {
+      webRtcServer = new WebRtcStreamer("video", props.server_url);
+      if (webRtcServer && props.stream_url) {
+        webRtcServer.connect(props.stream_url);
+
+      }
+    }
+    if (webRtcServer) {
+      webRtcServer.disconnect();
+    }
+  }, [props.is_open, props.server_url, props.stream_url]);
+
+  return (
+    <div style={{height: '100%', width: '100%'}}>
+      <video style={{height: '100%', width: '100%'}} id="video" muted={true} controls={true} autoPlay={true} />
+    </div>
+  );
+}
+
+export default WebRTCStreamer;

src/components/index.ts

@@ -0,0 +1,13 @@
+/**
+ * 这个文件作为组件的目录
+ * 目的是统一管理对外输出的组件，方便分类
+ */
+/**
+ * 布局组件
+ */
+import Footer from './Footer';
+import Notice from './Notice';
+import { Question, SelectLang } from './RightContent';
+import { AvatarDropdown, AvatarName } from './RightContent/AvatarDropdown';
+
+export { Footer, Question, SelectLang, AvatarDropdown, AvatarName, Notice };

src/enums/common.ts

@@ -0,0 +1,9 @@
+// 是否启用
+export const isEnableEnum = {
+    '0' : {
+        color: '#999999',
+    },
+    '1' : {
+        color: '#52C41A',
+    }
+}

src/enums/status.ts

@@ -0,0 +1,130 @@
+/*
+ * @Author: zhoux zhouxia@supervision.ltd
+ * @Date: 2023-12-08 14:50:08
+ * @LastEditors: zhoux zhouxia@supervision.ltd
+ * @LastEditTime: 2023-12-22 16:45:22
+ * @FilePath: \general-ai-platform-web\src\enums\status.ts
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
+
+import { DownOutlined } from "@ant-design/icons";
+
+// 分布式设备状态
+export const deviceStatusEnums: Record<string, any> = {
+  allStatus: {
+    miniName: '全部',
+    value: '0',
+    color: '',
+  },
+  onlineStatus: {
+    miniName: '在线',
+    value: '1',
+    color: 'success',
+  },
+  outlineStatus: {
+    miniName: '离线',
+    value: '2',
+    color: 'default',
+  },
+  processingStatus: {
+    miniName: '运行中',
+    value: '3',
+    color: 'warning',
+  },
+  errorStatus: {
+    miniName: '故障',
+    value: '4',
+    color: 'error',
+  },
+};
+// 资源设备~
+export const resourceDeviceStatusEnums: Record<string, any> = {
+  allStatus: {
+    miniName: '全部异常',
+    value: '0',
+    color: '',
+    renderType: '',
+  },
+  storageWarn: {
+    miniName: '存储告警',
+    value: '1',
+    color: 'error',
+    renderType: 'progress',
+  },
+  GPUWarn: {
+    miniName: 'GPU告警',
+    value: '2',
+    color: 'success',
+    renderType: 'progress',
+  },
+  memoryWarn: {
+    miniName: '内存告警',
+    value: '3',
+    color: 'success',
+    renderType: 'progress',
+  },
+  errorStatus: {
+    miniName: 'CPU告警',
+    value: '4',
+    color: 'warning',
+    renderType: 'progress',
+  },
+  codeError: {
+    miniName: '代码出错',
+    value: '5',
+    color: 'error',
+    renderType: 'dot',
+  },
+  serveTimeOut: {
+    miniName: '服务器超时',
+    value: '6',
+    color: 'error',
+    renderType: 'dot',
+  },
+};
+// 告警等级~
+export const alarmLevelStatusEnum: Record<string, any>[] = [
+  {
+    color: 'rgba(232, 13, 13, 1)',
+    value: '1',
+    label: '紧急',
+    isDelete: false,
+    icon: 'ArrowUpOutlined',
+    id: '1',
+  },
+  {
+    color: 'rgba(255, 136, 0, 1)',
+    value: '2',
+    label: '较高',
+    isDelete: false,
+    id: '2',
+  },
+  {
+    color: 'rgba(68, 139, 245, 1)',
+    value: '3',
+    label: '一般',
+    isDelete: false,
+    id: '3',
+  },
+  {
+    color: 'rgba(179, 214, 0, 1)',
+    value: '4',
+    label: '低',
+    isDelete: true,
+    id: '4',
+  },
+  {
+    color: 'rgba(81, 177, 6, 1)',
+    value: '5',
+    label: '较低',
+    isDelete: true,
+    id: '5',
+  },
+  {
+    color: 'rgba(43, 183, 136, 1)',
+    value: '6',
+    label: '非常低',
+    isDelete: true,
+    id: '6',
+  },
+];

src/enums/storage.ts

@@ -0,0 +1,3 @@
+export const localStorageKeyEnums = {
+  alarmSetting_model_alarmStatusSetting: 'alarmSetting_model_alarmStatusSetting_key',
+};

src/global.css

@@ -0,0 +1,399 @@
+html,
+body,
+#root {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+}
+.colorWeak {
+  filter: invert(80%);
+}
+.ant-layout {
+  min-height: 100vh;
+}
+.ant-pro-sider.ant-layout-sider.ant-pro-sider-fixed {
+  left: unset;
+}
+canvas {
+  display: block;
+}
+body {
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+ul,
+ol {
+  list-style: none;
+}
+@media (max-width: 768px) {
+  .ant-table {
+    width: 100%;
+    overflow-x: auto;
+  }
+  .ant-table-thead > tr > th,
+  .ant-table-tbody > tr > th,
+  .ant-table-thead > tr > td,
+  .ant-table-tbody > tr > td {
+    white-space: pre;
+  }
+  .ant-table-thead > tr > th > span,
+  .ant-table-tbody > tr > th > span,
+  .ant-table-thead > tr > td > span,
+  .ant-table-tbody > tr > td > span {
+    display: block;
+  }
+}
+.keep-alive-tabs .ant-tabs-nav {
+  margin: 0;
+}
+.ant-pro .ant-pro-layout .ant-pro-layout-content {
+  padding: 0;
+}
+.ant-pro-form-login-page-left {
+  max-width: none !important;
+}
+.ant-pro-card-col.ant-pro-card-split-vertical {
+  border-inline-end: none;
+}
+.ant-pro-card-col.ant-pro-card-split-horizontal {
+  border-block-end: none;
+}
+/* 1108 update 全局样式新增调整 */
+.ant-table-cell .ant-btn.ant-btn-sm {
+  padding: 0;
+}
+.ant-pro-table-search .ant-form-item .ant-form-item-label {
+  text-align: left;
+}
+.ant-btn-link {
+  color: #155BD4;
+}
+.ant-pro-card .ant-pro-card-title {
+  color: #333333;
+  font-weight: 700;
+  font-size: 16px;
+}
+.ant-modal .ant-modal-content {
+  padding: 20px 24px;
+}
+.ant-modal-header {
+  padding-bottom: 10px;
+}
+/* 单行文本溢出显示省略号 */
+.single_line {
+  white-space: nowrap;
+  /* 防止文本换行 */
+  overflow: hidden;
+  /* 隐藏溢出的文本 */
+  text-overflow: ellipsis;
+  /* 显示省略号 */
+}
+/* 多行文本溢出显示省略号 */
+.two_line {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  /* 限制显示的行数 */
+  overflow: hidden;
+  /* 隐藏溢出的文本 */
+}
+* {
+  padding: 0;
+  margin: 0;
+}
+/* 颜色 */
+.theme_color,
+.ant-table-cell > a,
+.ant-descriptions-item-content > a,
+a.ant-dropdown-trigger {
+  color: #155BD4;
+}
+.theme_bg_color {
+  background-color: #155BD4;
+}
+.ant-menu-light .ant-menu-item-selected,
+.ant-menu-light > .ant-menu .ant-menu-item-selected {
+  background-color: #e8effb;
+  border-left: 3px solid #155BD4;
+  border-radius: 0;
+}
+.ant-select-dropdown .ant-select-item-option-active:not(.ant-select-item-option-disabled) {
+  background-color: #e8effb;
+}
+.ant-tree .ant-tree-node-content-wrapper.ant-tree-node-selected,
+.ant-tree .ant-tree-checkbox + span.ant-tree-node-selected {
+  background-color: #e8effb;
+  color: #155BD4;
+}
+.ant-steps .ant-steps-item-active > .ant-steps-item-container > .ant-steps-item-content > .ant-steps-item-title {
+  color: #155BD4;
+}
+.ant-steps .ant-steps-item-active > .ant-steps-item-container > .ant-steps-item-content > .ant-steps-item-description {
+  color: #155BD4;
+}
+.ant-layout-sider-children {
+  background-color: white;
+}
+.ant-btn-link.ant-btn-dangerous,
+.ant-btn-default.ant-btn-dangerous {
+  color: #E80D0D;
+}
+.ant-btn-default.ant-btn-dangerous {
+  border-color: #E80D0D;
+}
+.ant-tree-treenode.ant-tree-treenode-switcher-open.ant-tree-treenode-selected {
+  background-color: #e8effb;
+  width: 100%;
+  border-radius: 4px;
+  padding-top: 4px ;
+}
+/* 表单 */
+.ant-form-item {
+  margin-bottom: 16px;
+}
+.ant-steps .ant-steps-item-finish .ant-steps-item-icon {
+  background-color: rgba(21, 91, 212, 0.1);
+  border-color: #155BD4;
+}
+.ant-pro-form-group-container {
+  gap: 0px 16px !important;
+}
+.ant-modal .ant-modal-title {
+  font-size: 18px;
+}
+.ant-modal-body .ant-pro-steps-form-steps-container {
+  max-width: 1900px !important;
+}
+/* 列表 ProTable && ProList */
+.ant-pro-table .ant-pro-table-list-toolbar-left {
+  flex: 0.3;
+}
+.ant-pro-table .ant-pro-table-search .ant-form .ant-pro-query-filter-row-split {
+  padding-right: 0 !important;
+}
+.ant-pro-list .ant-pro-query-filter.ant-pro-query-filter {
+  background-color: white;
+  padding: 20px;
+  border-radius: 8px;
+}
+.ant-pro-list .ant-pro-table-list-toolbar-left {
+  flex: 1;
+}
+/*表单 ProFrom */
+.ant-btn-dashed {
+  border-radius: 4px;
+  border: 1px dashed #154DDD;
+  background: rgba(21, 91, 212, 0.05);
+  color: #154DDD;
+}
+.ant-pro-form-list-action {
+  margin-block-end: 16px;
+}
+.ant-pro-form-list .ant-pro-form-list-action .action-copy {
+  color: #154DDD;
+}
+.ant-pro-form-list .ant-pro-form-list-action .action-remove {
+  color: #E80D0D;
+}
+.ant-popover .ant-popover-content {
+  min-width: 200px;
+}
+.rc-virtual-list-scrollbar-thumb {
+  display: none;
+}
+/* ant-descriptions */
+.ant-descriptions .ant-descriptions-row > th,
+.ant-descriptions .ant-descriptions-row > td {
+  padding-right: 12px;
+}
+::-webkit-scrollbar-track-piece {
+  -webkit-border-radius: 0;
+}
+::-webkit-scrollbar {
+  width: 5px;
+  height: 10px;
+}
+::-webkit-scrollbar-thumb {
+  height: 50px;
+  background-color: #CCC;
+  -webkit-border-radius: 6px;
+  outline-offset: -2px;
+  -moz-opacity: 0.5;
+  -khtml-opacity: 0.5;
+  opacity: 0.5;
+}
+::-webkit-scrollbar-thumb:hover {
+  height: 50px;
+  background-color: #878987;
+  -webkit-border-radius: 6px;
+}
+.ant-tag-default {
+  border-radius: 2px;
+  border: 1px solid #CCC;
+  background: rgba(204, 204, 204, 0.1);
+  color: #999;
+}
+.ant-tag-success {
+  border-radius: 2px;
+  border: 1px solid #52C41A;
+  background: rgba(82, 196, 26, 0.1);
+}
+.ant-tag-warning {
+  border-radius: 2px;
+  border: 1px solid var(--1, #FAAD14);
+  background: rgba(250, 173, 20, 0.1);
+}
+.ant-tag-error {
+  border-radius: 2px;
+  border: 1px solid #E80D0D;
+  color: #E80D0D;
+  background: rgba(232, 13, 13, 0.1);
+}
+.gn {
+  /* UI 规范表 // update 使用中
+  适用说明 
+  字体大小、颜色、粗细
+  页面间距
+*/
+}
+.gn .ant-pro-checkcard-content {
+  padding-inline: 0;
+  padding-block: 0;
+}
+.gn .ant-pro-checkcard {
+  margin-inline-end: 0;
+  margin-block-end: 0;
+}
+.gn .ant-pro-list-row-card {
+  margin-block: 6px;
+  margin-inline: 0;
+  padding-block: 0;
+  padding-inline: 6px;
+}
+.gn .ant-list .ant-list-pagination {
+  margin-block-start: 10px;
+}
+.gn .ant-table-wrapper table tr th.ant-table-selection-column,
+.gn .ant-table-wrapper table tr td.ant-table-selection-column,
+.gn .ant-table-wrapper .ant-table-selection-column {
+  text-align: left;
+}
+.gn .ant-transfer-customize-list .ant-table-wrapper .ant-table-small .ant-table-selection-column {
+  padding-left: 12px;
+}
+.gn .ant-tabs > .ant-tabs-nav .ant-tabs-nav-wrap .ant-tabs-nav-list {
+  margin-block-start: 0;
+}
+.gn .ant-tabs > .ant-tabs-nav .ant-tabs-nav-wrap .ant-tabs-nav-list .ant-tabs-tab-btn {
+  padding: 0 16px;
+}
+.gn .ant-tabs > .ant-tabs-nav .ant-tabs-nav-wrap .ant-tabs-nav-list .ant-tabs-tab-active {
+  font-weight: 400;
+}
+.gn .ant-tabs > .ant-tabs-nav .ant-tabs-nav-wrap .ant-tabs-tab + .ant-tabs-tab {
+  margin: 0 0 0 12px;
+}
+.gn .ant-tabs .ant-tabs-tab .anticon {
+  margin-right: 4px;
+}
+.gn .ant-pro-table-list-toolbar-container {
+  padding-block: 8px;
+}
+.gn .ant-pro-global-header-header-actions-item > * {
+  padding-block: 0;
+}
+.gn .ant-radio-group-large .ant-radio-button-wrapper {
+  height: 32px;
+  line-height: 32px;
+}
+.gn .ant-input-affix-wrapper-lg {
+  height: 32px;
+  line-height: 32px;
+  font-size: 14px;
+}
+.gn .ant-btn.ant-btn-lg {
+  font-size: 14px;
+  height: 32px;
+  border-radius: 4px;
+}
+.gn .ant-input-search .ant-input-group .ant-input-affix-wrapper:not(:last-child) {
+  border-start-start-radius: 4px;
+  border-end-start-radius: 4px;
+}
+.gn .proListActionBox .ant-btn.ant-btn-sm {
+  padding: 0;
+  font-size: 14px;
+}
+.gn.fw7 {
+  font-weight: 700;
+}
+.gn.h2 {
+  font-size: 18px;
+}
+.gn.h3 {
+  font-weight: 600;
+}
+.gn.h4 {
+  font-size: 14px;
+  font-weight: 700;
+  line-height: 18px;
+  color: #333333;
+}
+.gn.text_0 {
+  color: '#000';
+}
+.gn.text_1 {
+  color: '#333';
+}
+.gn.text_2 {
+  color: '#666';
+}
+.gn.text_3 {
+  color: '#999';
+}
+.gn.text_green {
+  color: #52C41A;
+}
+.gn.fs14 {
+  font-size: 14px;
+}
+.gn .des_1 {
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 22px;
+  color: #666666;
+}
+.gn .border_bottom_1 {
+  border-bottom: 1px solid #E0E0E0;
+}
+.gn.themeBgHover:hover {
+  background-color: #155BD4;
+}
+.gn.algorithmSetting_project_box .algorithmSetting_mode_box .active .ant-btn-default {
+  border: 1px solid #154DDD;
+  background: rgba(21, 77, 221, 0.1);
+  color: #154DDD;
+}
+.gn.tabAction_box_wrap .ant-btn-primary {
+  border: 1px solid #154DDD;
+  background: rgba(21, 77, 221, 0.1);
+  color: #154DDD;
+}
+.ant-pro-global-header-logo img {
+  height: 48px;
+}
+.rectProgress_box .ant-progress .ant-progress-inner {
+  border-radius: 2px;
+}
+.rectProgress_box .ant-progress .ant-progress-success-bg,
+.rectProgress_box .ant-progress .ant-progress-bg {
+  border-radius: 2px;
+}
+.innerFormList_box .ant-form-item {
+  margin-bottom: 12px;
+}
+.form_checkBox_wrap .ant-pro-form-group-container {
+  gap: 0 4px !important;
+}

src/global.less

@@ -0,0 +1,543 @@
+html,
+body,
+#root {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
+    'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
+    'Noto Color Emoji';
+}
+
+.colorWeak {
+  filter: invert(80%);
+}
+
+.ant-layout {
+  min-height: 100vh;
+}
+.ant-pro-sider.ant-layout-sider.ant-pro-sider-fixed {
+  left: unset;
+}
+
+canvas {
+  display: block;
+}
+
+body {
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+ul,
+ol {
+  list-style: none;
+}
+
+@media (max-width: 768px) {
+  .ant-table {
+    width: 100%;
+    overflow-x: auto;
+    &-thead > tr,
+    &-tbody > tr {
+      > th,
+      > td {
+        white-space: pre;
+        > span {
+          display: block;
+        }
+      }
+    }
+  }
+}
+
+.keep-alive-tabs {
+  .ant-tabs-nav {
+    margin: 0;
+  }
+}
+
+.ant-pro .ant-pro-layout .ant-pro-layout-content {
+  padding: 0;
+}
+
+
+.ant-pro-form-login-page-left{
+  max-width: none !important;
+}
+
+.ant-pro-card-col.ant-pro-card-split-vertical {
+  border-inline-end: none;
+}
+
+.ant-pro-card-col.ant-pro-card-split-horizontal {
+  border-block-end: none;
+}
+/* 1108 update 全局样式新增调整 */
+
+
+// TODO_update 全局小尺寸按钮，统一间距 （列表操作栏位按钮）
+.ant-table-cell .ant-btn.ant-btn-sm{
+  padding: 0;
+}
+// 更多
+.ant-pro-table-search .ant-form-item .ant-form-item-label{
+  text-align: left
+}
+
+.ant-btn-link{
+  color: #155BD4;
+}
+
+.ant-pro-card .ant-pro-card-title {
+  color: #333333;
+  font-weight: 700;
+  font-size: 16px;
+}
+
+// 弹出框
+.ant-modal .ant-modal-content{
+  padding: 20px 24px;
+}
+.ant-modal-header{
+  padding-bottom: 10px;
+}
+
+// TODO_update 自定义样式块
+
+/* 单行文本溢出显示省略号 */
+.single_line {
+  white-space: nowrap;      /* 防止文本换行 */
+  overflow: hidden;        /* 隐藏溢出的文本 */
+  text-overflow: ellipsis; /* 显示省略号 */
+}
+
+/* 多行文本溢出显示省略号 */
+.two_line {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2; /* 限制显示的行数 */
+  overflow: hidden;       /* 隐藏溢出的文本 */
+}
+
+* {
+  padding: 0;
+  margin: 0;
+}
+
+
+/* 颜色 */
+.theme_color, .ant-table-cell>a,
+.ant-descriptions-item-content>a,
+a.ant-dropdown-trigger{
+  color: #155BD4;
+}
+
+.theme_bg_color{
+  background-color: #155BD4;
+}
+
+
+
+.ant-menu-light .ant-menu-item-selected, .ant-menu-light>.ant-menu .ant-menu-item-selected {
+  background-color: #e8effb;
+  border-left: 3px solid #155BD4;
+  border-radius: 0;
+}
+
+.ant-select-dropdown .ant-select-item-option-active:not(.ant-select-item-option-disabled) {
+  background-color: #e8effb;
+}
+.ant-tree .ant-tree-node-content-wrapper.ant-tree-node-selected, .ant-tree .ant-tree-checkbox+span.ant-tree-node-selected {
+  background-color: #e8effb;
+  color: #155BD4;
+}
+
+.ant-steps .ant-steps-item-active>.ant-steps-item-container>.ant-steps-item-content{
+  &> .ant-steps-item-title{
+    color: #155BD4;
+
+  }
+  &> .ant-steps-item-description{
+    color: #155BD4;
+    // color: #155cd5;
+
+  }
+}
+.ant-layout-sider-children{
+  background-color: white;
+}
+
+.ant-btn-link.ant-btn-dangerous, .ant-btn-default.ant-btn-dangerous {
+  color: #E80D0D;
+}
+.ant-btn-default.ant-btn-dangerous{
+  border-color: #E80D0D;
+}
+
+.ant-tree-treenode.ant-tree-treenode-switcher-open.ant-tree-treenode-selected {
+  background-color: #e8effb;
+  width: 100%;
+  border-radius: 4px;
+  padding-top: 4px ;
+}
+
+/* 表单 */
+.ant-form-item {
+  margin-bottom: 16px;
+}
+// 分步表单步骤条
+.ant-steps .ant-steps-item-finish .ant-steps-item-icon{
+  background-color: rgba(#155BD4, 0.1);
+  border-color: #155BD4;
+}
+// 表单项之间间距
+.ant-pro-form-group-container{
+  gap: 0px 16px !important;
+}
+.ant-modal .ant-modal-title{
+  font-size: 18px;
+}
+
+
+.ant-modal-body .ant-pro-steps-form-steps-container{
+  max-width: 1900px !important;
+}
+/* 列表 ProTable && ProList */
+// proTable 
+.ant-pro-table{
+  // 标题栏左侧文字最大弹性占比
+  .ant-pro-table-list-toolbar-left{
+    flex: 0.3
+  }
+  // 筛选表单
+  .ant-pro-table-search{
+    .ant-form{
+      .ant-pro-query-filter-row-split{
+        padding-right: 0 !important;
+      }
+    }
+  }
+}
+
+// proList 
+.ant-pro-list{
+  .ant-pro-query-filter.ant-pro-query-filter {
+    background-color: white;
+    padding: 20px;
+    border-radius: 8px;
+  }
+
+  .ant-pro-table-list-toolbar-left{
+    flex: 1
+  }
+}
+/*表单 ProFrom */
+.ant-btn-dashed{
+  border-radius: 4px;
+  border: 1px dashed #154DDD;
+  background: rgba(21, 91, 212, 0.05);
+  color: #154DDD;
+}
+
+.ant-pro-form-list-action {
+  margin-block-end: 16px;
+}
+
+// ProFormList
+.ant-pro-form-list{
+  .ant-pro-form-list-action{
+    .action-copy{
+      color: #154DDD;
+    }
+    .action-remove {
+      color: #E80D0D;
+    }
+  }
+}
+
+// 气泡框
+.ant-popover .ant-popover-content {
+  min-width: 200px;
+}
+
+.rc-virtual-list-scrollbar-thumb{
+  display: none
+}
+/* ant-descriptions */
+.ant-descriptions{
+  .ant-descriptions-row >th,  
+  .ant-descriptions-row >td {
+    padding-right: 12px;
+  }
+}
+
+// 美化滚动条
+::-webkit-scrollbar-track-piece {
+  -webkit-border-radius: 0
+}
+::-webkit-scrollbar {
+  width: 5px;
+  height: 10px
+}
+::-webkit-scrollbar-thumb {
+  height: 50px;
+  background-color: #CCC;
+  -webkit-border-radius: 6px;
+  outline-offset: -2px;
+  -moz-opacity: 0.5;
+  -khtml-opacity: 0.5;
+  opacity: 0.5
+}
+::-webkit-scrollbar-thumb:hover {
+  height: 50px;
+  background-color: #878987;
+  -webkit-border-radius: 6px
+}
+// 动作按钮
+.ant-tag-default {
+  border-radius: 2px;
+  border: 1px solid #CCC;
+  background: rgba(204, 204, 204, 0.10);  
+  color: #999;
+}
+.ant-tag-success{
+  border-radius: 2px;
+  border: 1px solid #52C41A;
+  background: rgba(82, 196, 26, 0.10);
+}
+.ant-tag-warning {
+  border-radius: 2px;
+  border: 1px solid var(--1, #FAAD14);
+  background: rgba(250, 173, 20, 0.10);
+}
+.ant-tag-error {
+  border-radius: 2px;
+  border: 1px solid #E80D0D;
+  color: #E80D0D;
+  background: rgba(232, 13, 13, 0.10);
+}
+
+.gn {
+  // TODO_update 重置覆盖默认样式，使用统一类名gn + 需要覆盖的类名
+  .ant-pro-checkcard-content {
+    padding-inline: 0;
+    padding-block: 0;
+  }
+  .ant-pro-checkcard {
+    margin-inline-end: 0;
+    margin-block-end: 0;
+  }
+  .ant-pro-list-row-card {
+    margin-block: 6px;
+    margin-inline: 0;
+    padding-block: 0;
+    padding-inline: 6px;
+  }
+
+  .ant-list .ant-list-pagination {
+    margin-block-start: 10px;
+  }
+
+  .ant-table-wrapper table tr th.ant-table-selection-column,
+  .ant-table-wrapper table tr td.ant-table-selection-column,
+  .ant-table-wrapper .ant-table-selection-column{
+    text-align: left;
+  }
+  .ant-transfer-customize-list .ant-table-wrapper .ant-table-small .ant-table-selection-column{
+    padding-left: 12px;
+  }
+
+  .ant-tabs >.ant-tabs-nav .ant-tabs-nav-wrap{
+    .ant-tabs-nav-list{
+      .ant-tabs-tab-btn{
+        padding: 0 16px;
+
+      }
+      margin-block-start: 0;
+      .ant-tabs-tab-active{
+        font-weight: 400
+      }
+    }
+    .ant-tabs-tab+.ant-tabs-tab {
+      margin: 0 0 0 12px; 
+    }
+    
+  }
+
+  .ant-tabs .ant-tabs-tab .anticon {
+    margin-right: 4px;
+  }
+
+  .ant-pro-table-list-toolbar-container {
+    padding-block: 8px;
+  }
+
+  .ant-pro-global-header-header-actions-item >*{
+    padding-block: 0;
+  }
+
+  .ant-radio-group-large .ant-radio-button-wrapper {
+    height: 32px;
+    line-height: 32px;
+  }
+  .ant-input-affix-wrapper-lg{
+    height: 32px;
+    line-height: 32px;
+    font-size: 14px;
+  }
+  .ant-btn.ant-btn-lg {
+    font-size: 14px;
+    height: 32px;
+    border-radius: 4px;
+  }
+  .ant-input-search .ant-input-group .ant-input-affix-wrapper:not(:last-child) {
+    border-start-start-radius: 4px;
+    border-end-start-radius: 4px;
+  }
+
+  .proListActionBox{
+    .ant-btn.ant-btn-sm{
+      padding: 0;
+      font-size: 14px;
+    }
+  }
+  
+  /* UI 规范表 // update 使用中
+  适用说明 
+  字体大小、颜色、粗细
+  页面间距
+*/
+  // &.p1 {
+  // line-height: ;
+  //   font-weight: 600;
+  // }
+  &.fw7{
+    font-weight: 700;
+  }
+  &.h2{
+    font-size: 18px;
+  }
+
+  &.h3{
+    font-weight: 600;
+  }
+
+  &.h4{
+    font-size: 14px;
+    font-weight: 700;
+    line-height: 18px;
+    color: rgba(51, 51, 51, 1);
+  }
+  &.text_0{
+    color: '#000';
+  }
+  &.text_1{
+    color: '#333';
+  }
+  &.text_2{
+    color: '#666';
+  }
+  &.text_3{
+    color: '#999';
+  }
+  &.text_green{
+    color: #52C41A;
+  }
+  &.fs14{
+    font-size: 14px;
+  }
+
+  .des_1{
+    font-size: 12px;
+    font-weight: 400;
+    line-height: 22px;
+    color: rgba(102, 102, 102, 1)
+  }
+  // 边框
+  .border_bottom_1 {
+    border-bottom: 1px solid #E0E0E0
+  }
+
+  &.themeBgHover:hover{
+    background-color: #155BD4;
+  }
+
+
+  // 项目部署模块
+  &.algorithmSetting_project_box{
+
+    .algorithmSetting_mode_box{
+      .active {
+        .ant-btn-default{
+          border: 1px solid #154DDD;
+          background: rgba(21, 77, 221, 0.10);
+          color: #154DDD;
+        }
+      }
+    }
+   
+    // &.ant-tabs .ant-tabs-ink-bar{
+    //   background: transparent;
+    // }
+    // &.ant-tabs .ant-tabs-tab{
+    //   padding: 16px 0 0px;
+    // }
+    // &.ant-tabs .ant-tabs-tab+.ant-tabs-tab{
+    //   // margin: 0;
+    //   margin:0 0 0 12px;
+    // }
+    // & .ant-tabs-tab-active{
+    //   .ant-btn-default{
+    //     border: 1px solid #154DDD;
+    //     background: rgba(21, 77, 221, 0.10);
+    //     color: #154DDD;
+    //   }
+    // }
+  }
+
+  // 自定义切换按钮样式
+  &.tabAction_box_wrap{
+    .ant-btn-primary{
+      border: 1px solid #154DDD;
+      background: rgba(21, 77, 221, 0.10);
+      color: #154DDD;
+    }
+  }
+}
+.ant-pro-global-header-logo img {
+  height: 48px;
+}
+
+.rectProgress_box{
+  .ant-progress .ant-progress-inner{
+    border-radius: 2px;
+  }
+  .ant-progress .ant-progress-success-bg, .ant-progress .ant-progress-bg{
+    border-radius: 2px;
+  }
+}
+
+
+// 内部表单样式
+.innerFormList_box{
+  .ant-form-item {
+    margin-bottom: 12px;
+  }
+}
+
+.form_checkBox_wrap{
+  .ant-pro-form-group-container{
+    gap: 0 4px !important;
+  }
+}
+
+
+
+
+
+
+
+
+

src/global.tsx

@@ -0,0 +1,91 @@
+import { useIntl } from '@umijs/max';
+import { Button, message, notification } from 'antd';
+import defaultSettings from '../config/defaultSettings';
+
+const { pwa } = defaultSettings;
+const isHttps = document.location.protocol === 'https:';
+
+const clearCache = () => {
+  // remove all caches
+  if (window.caches) {
+    caches
+      .keys()
+      .then((keys) => {
+        keys.forEach((key) => {
+          caches.delete(key);
+        });
+      })
+      .catch((e) => console.log(e));
+  }
+};
+
+// if pwa is true
+if (pwa) {
+  // Notify user if offline now
+  window.addEventListener('sw.offline', () => {
+    message.warning(useIntl().formatMessage({ id: 'app.pwa.offline' }));
+  });
+
+  // Pop up a prompt on the page asking the user if they want to use the latest version
+  window.addEventListener('sw.updated', (event: Event) => {
+    const e = event as CustomEvent;
+    const reloadSW = async () => {
+      // Check if there is sw whose state is waiting in ServiceWorkerRegistration
+      // https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerRegistration
+      const worker = e.detail && e.detail.waiting;
+      if (!worker) {
+        return true;
+      }
+      // Send skip-waiting event to waiting SW with MessageChannel
+      await new Promise((resolve, reject) => {
+        const channel = new MessageChannel();
+        channel.port1.onmessage = (msgEvent) => {
+          if (msgEvent.data.error) {
+            reject(msgEvent.data.error);
+          } else {
+            resolve(msgEvent.data);
+          }
+        };
+        worker.postMessage({ type: 'skip-waiting' }, [channel.port2]);
+      });
+
+      clearCache();
+      window.location.reload();
+      return true;
+    };
+    const key = `open${Date.now()}`;
+    const btn = (
+      <Button
+        type="primary"
+        onClick={() => {
+          notification.destroy(key);
+          reloadSW();
+        }}
+      >
+        {useIntl().formatMessage({ id: 'app.pwa.serviceworker.updated.ok' })}
+      </Button>
+    );
+    notification.open({
+      message: useIntl().formatMessage({ id: 'app.pwa.serviceworker.updated' }),
+      description: useIntl().formatMessage({ id: 'app.pwa.serviceworker.updated.hint' }),
+      btn,
+      key,
+      onClose: async () => null,
+    });
+  });
+} else if ('serviceWorker' in navigator && isHttps) {
+  // unregister service worker
+  const { serviceWorker } = navigator;
+  if (serviceWorker.getRegistrations) {
+    serviceWorker.getRegistrations().then((sws) => {
+      sws.forEach((sw) => {
+        sw.unregister();
+      });
+    });
+  }
+  serviceWorker.getRegistration().then((sw) => {
+    if (sw) sw.unregister();
+  });
+
+  clearCache();
+}

src/hooks/useAlarmSettingLevel.ts

@@ -0,0 +1,52 @@
+import { alarmLevelStatusEnum } from '@/enums/status';
+import { localStorageKeyEnums } from '@/enums/storage';
+
+/*
+ * @Author: zhoux zhouxia@supervision.ltd
+ * @Date: 2023-12-22 16:39:33
+ * @LastEditors: zhoux zhouxia@supervision.ltd
+ * @LastEditTime: 2023-12-22 16:49:36
+ * @FilePath: \general-ai-platform-web\src\hooks\useAlarmSettingLevel.ts
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
+type selectAlarmLevel = {
+  label: string;
+  value: string;
+};
+
+interface useAlarmSettingLevelProps {
+  fetchAlarmSettingLevel: () => selectAlarmLevel[];
+}
+
+export const useAlarmSettingLevel = (): useAlarmSettingLevelProps => {
+  function fetchAlarmSettingLevel() {
+    const finalArr: selectAlarmLevel[] = [];
+    const currData = localStorage.getItem(
+      localStorageKeyEnums.alarmSetting_model_alarmStatusSetting,
+    );
+    if (currData) {
+      const currFormData = JSON.parse(currData) as Record<string, any>;
+      // eslint-disable-next-line guard-for-in
+      for (let key in currFormData) {
+        finalArr.push({
+          label: currFormData[key],
+          value: key,
+        });
+      }
+    } else {
+      // eslint-disable-next-line array-callback-return
+      alarmLevelStatusEnum.map((item) => {
+        if (['1', '2', '3'].includes(item.value)) {
+          finalArr.push({
+            label: item.label,
+            value: item.value,
+          });
+        }
+      });
+    }
+    return finalArr;
+  }
+  return {
+    fetchAlarmSettingLevel,
+  };
+};

src/layouts/context.tsx

@@ -0,0 +1,20 @@
+import { createContext } from 'react'
+
+interface KeepAliveTabContextType {
+  refreshTab: (path?: string) => void;
+  closeTab: (path?: string) => void;
+  closeOtherTab: (path?: string) => void;
+  onShow: (cb: () => void) => void;
+  onHidden: (cb: () => void) => void;
+}
+
+const value = {
+  refreshTab: () => { },
+  closeTab: () => { },
+  closeOtherTab: () => { },
+  onShow: () => { },
+  onHidden: () => { },
+}
+
+
+export const KeepAliveTabContext = createContext<KeepAliveTabContextType>(value);

src/layouts/index.tsx

@@ -0,0 +1,138 @@
+import { Dropdown, Tabs } from 'antd';
+import { useCallback, useMemo } from 'react';
+import { history } from '@umijs/max';
+
+import { KeepAliveTab, useKeepAliveTabs } from './useKeepAliveTabs';
+import type { ItemType, MenuInfo } from 'rc-menu/lib/interface';
+import { KeepAliveTabContext } from './context';
+enum OperationType {
+  REFRESH = 'refresh',
+  CLOSE = 'close',
+  CLOSEOTHER = 'close-other',
+}
+
+
+type MenuItemType = ItemType & { key: OperationType } | null;
+
+const KeepAliveLayout = () => {
+
+  const {
+    keepAliveTabs,
+    activeTabRoutePath,
+    closeTab,
+    refreshTab,
+    closeOtherTab,
+    onHidden,
+    onShow,
+  } = useKeepAliveTabs();
+
+  const menuItems: MenuItemType[] = useMemo(() => [
+    {
+      label: '刷新',
+      key: OperationType.REFRESH,
+    },
+    keepAliveTabs.length <= 1 ? null : {
+      label: '关闭',
+      key: OperationType.CLOSE,
+    },
+    keepAliveTabs.length <= 1 ? null : {
+      label: '关闭其他',
+      key: OperationType.CLOSEOTHER,
+    },
+  ].filter(o => o), [keepAliveTabs]);
+
+  const menuClick = useCallback(({ key, domEvent }: MenuInfo, tab: KeepAliveTab) => {
+    domEvent.stopPropagation();
+
+    if (key === OperationType.REFRESH) {
+      refreshTab(tab.routePath);
+    } else if (key === OperationType.CLOSE) {
+      closeTab(tab.routePath);
+    } else if (key === OperationType.CLOSEOTHER) {
+      closeOtherTab(tab.routePath);
+    }
+  }, [closeOtherTab, closeTab, refreshTab]);
+
+
+  const renderTabTitle = useCallback((tab: KeepAliveTab) => {
+    return (
+      <Dropdown
+        menu={{ items: menuItems, onClick: (e) => menuClick(e, tab) }}
+        trigger={['contextMenu']}
+      >
+        <div style={{ margin: '-12px 0', padding: '12px 0' }}>
+          {/*{tab.icon}*/}
+          {tab.title}
+        </div>
+      </Dropdown>
+    )
+  }, [menuItems]);
+
+  const tabItems = useMemo(() => {
+    let finalKeepAliveTabs = keepAliveTabs
+    // .filter(item => !item?.isHideTab)
+    return finalKeepAliveTabs.map(tab => {
+      console.log(tab,'tabItems')
+      // TODO 未找到合适办法只去除tab标题栏位，保留页面内容
+      return {
+        key: tab.routePath,
+        label: renderTabTitle(tab),
+        children: (
+          <div
+            key={tab.key}
+            style={{ height: 'calc(100vh - 112px)', overflow: 'auto' }}
+          >
+            {tab.children}
+          </div>
+        ),
+        // style: {display: 'none'},
+        closable: keepAliveTabs.length > 1,
+        forceRender: true
+      }
+    })
+  }, [keepAliveTabs]);
+
+  const onTabsChange = useCallback((tabRoutePath: string) => {
+    const curTab = keepAliveTabs.find(o => o.routePath === tabRoutePath);
+    if (curTab) {
+      history.push(curTab?.pathname);
+    }
+  }, [keepAliveTabs]);
+
+  const onTabEdit = (
+    targetKey: React.MouseEvent | React.KeyboardEvent | string,
+    action: 'add' | 'remove',
+  ) => {
+    if (action === 'remove') {
+      closeTab(targetKey as string);
+    }
+  };
+
+  const keepAliveContextValue = useMemo(
+    () => ({
+      closeTab,
+      closeOtherTab,
+      refreshTab,
+      onHidden,
+      onShow,
+    }),
+    [closeTab, closeOtherTab, refreshTab, onHidden, onShow]
+  );
+
+  return (
+    <KeepAliveTabContext.Provider value={keepAliveContextValue}>
+      <Tabs
+        type="editable-card"
+        items={tabItems}
+        activeKey={activeTabRoutePath}
+        onChange={onTabsChange}
+        className='keep-alive-tabs'
+        hideAdd
+        animated={false}
+        onEdit={onTabEdit}
+      />
+    </KeepAliveTabContext.Provider>
+  )
+}
+
+export default KeepAliveLayout;

src/layouts/treeAndTableList.tsx

@@ -0,0 +1,69 @@
+/*
+ * @Author: zhoux zhouxia@supervision.ltd
+ * @Date: 2023-11-21 13:42:31
+ * @LastEditors: zhoux zhouxia@supervision.ltd
+ * @LastEditTime: 2023-12-19 15:27:06
+ * @FilePath: \general-ai-platform-web\src\layouts\treeAndTableList.tsx
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
+import { ProCard } from '@ant-design/pro-components';
+import { CardProps } from 'antd';
+// 此模块使用的 ProCardType
+export interface ProCardTypeProps extends CardProps {
+  colSpan?: string;
+  headerBordered?: boolean;
+}
+
+// 当前组件类型
+type TreeAndTableListProps = {
+  leftCard?: ProCardTypeProps;
+  rightCard?: ProCardTypeProps;
+  leftDom: any;
+  rightDom: any;
+};
+
+const TreeAndTableList: React.FC<TreeAndTableListProps> = (props) => {
+  // 业务层接收
+  const { leftCard, rightCard, leftDom, rightDom } = props;
+
+  // 统一配置
+  let finalLeftCard: ProCardTypeProps = {
+    // 左侧卡片
+    headStyle: { paddingTop: 16, paddingLeft: 20, paddingRight: 20, paddingBottom: 16,borderBottom: '1px solid #E0E0E0' },
+    bodyStyle: {paddingLeft: 20, paddingRight: 20},
+    colSpan: '22%',
+  };
+  let finalRightCard: ProCardTypeProps = {
+    headStyle: { padding: 0, margin: 0, background: 'transparent' },
+    bodyStyle: { padding: 0, margin: 0 },
+    headerBordered: true,
+    // 右侧卡片
+    colSpan: '76.5%',
+  };
+  if (leftCard) {
+    Object.assign(finalLeftCard, leftCard);
+  }
+
+  if (rightCard) {
+    Object.assign(finalRightCard, rightCard);
+  }
+  return (
+    <>
+      <ProCard
+        style={{ display: 'flex', width: '100%', background: 'transparent' }}
+        bodyStyle={{
+          padding: 0,
+          margin: 0,
+          display: 'flex',
+          justifyContent: 'space-between',
+        }}
+      >
+        {/*  后续依据业务需要动态调整 */}
+        <ProCard {...finalLeftCard}>{leftDom}</ProCard>
+        <ProCard {...finalRightCard}>{rightDom}</ProCard>
+      </ProCard>
+    </>
+  );
+};
+
+export default TreeAndTableList;