refactor: upgrade to umi4

.eslintrc.js

@@ -1,8 +1,6 @@
 module.exports = {
-  extends: [require.resolve('@umijs/fabric/dist/eslint')],
+  extends: require.resolve('@umijs/max/eslint'),
   globals: {
-    ANT_DESIGN_PRO_ONLY_DO_NOT_USE_IN_YOUR_PRODUCTION: true,
-    page: true,
     REACT_APP_ENV: true
   },
   rules: {

.stylelintrc.js

@@ -1,5 +1,5 @@
 module.exports = {
-  extends: [require.resolve('@umijs/fabric/dist/stylelint')],
+  extends: require.resolve('@umijs/max/stylelint'),
   rules: {
     indentation: 2,
     'block-no-empty': null,

config/config.js

@@ -1,76 +1,45 @@
 // https://umijs.org/config/
 
-import CompressionWebpackPlugin from 'compression-webpack-plugin'
 const prodGzipList = ['js', 'css', 'html']
 
-import { defineConfig } from 'umi'
+import { defineConfig } from '@umijs/max'
 import defaultSettings from './defaultSettings'
 import proxy from './proxy'
 import routes from './routes'
 const { REACT_APP_ENV } = process.env
 export default defineConfig({
+  plugins: [require.resolve('@umijs/plugins/dist/unocss')],
+  npmClient: 'pnpm',
   hash: true,
-  antd: {},
-  define: {
-    REACT_APP_ENV: REACT_APP_ENV || false
-  },
-  layout: {
-    // https://umijs.org/zh-CN/plugins/plugin-layout
-    locale: true,
-    siderWidth: 208,
-    ...defaultSettings
-  },
-  dva: {
-    hmr: true,
-    disableModelsReExport: true,
-    lazyLoad: true
-  },
-  history: {
-    type: 'browser'
+  antd: { import: true },
+  model: {},
+  moment2dayjs: {},
+  request: {},
+  initialState: {},
+  access: {},
+  dva: {},
+  mfsu: {},
+  srcTranspiler: 'esbuild',
+  fastRefresh: true,
+  unocss: {
+    watch: ['src/pages/**/*.{jsx,tsx,less}', 'src/components/**/*.{jsx,tsx,less}'] // 添加其他包含 unocss 的 classname 的文件目录
   },
+  // Fast Refresh 热更新
+  theme: { 'primary-color': '#886ab5' },
+  layout: {},
   locale: {
-    // default zh-CN
     default: 'zh-CN',
     antd: false,
-    // default true, when it is true, will use `navigator.language` overwrite default
     baseNavigator: false
   },
-  dynamicImport: {
-    loading: '@/components/PageLoading/index'
-  },
-  targets: {
-    ie: 11
-  },
-  externals: {
-    react: 'React',
-    'react-dom': 'ReactDOM'
-  },
-  scripts:
-    process.env.NODE_ENV === 'development'
-      ? [
-          'https://d2.smartcost.com.cn/cach/cld/react.development.js',
-          'https://d2.smartcost.com.cn/cach/cld/react-dom.development.js'
-        ]
-      : [
-          'https://d2.smartcost.com.cn/cach/cld/react.production.min.js',
-          'https://d2.smartcost.com.cn/cach/cld/react-dom.production.min.js'
-        ],
+  define: { REACT_APP_ENV: REACT_APP_ENV || false },
+  history: { type: 'browser' },
+  targets: { ie: 11 },
   routes,
-  theme: {
-    'primary-color': defaultSettings.primaryColor
-  },
   title: false,
   ignoreMomentLocale: true,
   proxy: proxy[REACT_APP_ENV || 'dev'],
-  manifest: {
-    basePath: '/'
-  },
-  exportStatic: {},
-  esbuild: {},
-  fastRefresh: {},
-  nodeModulesTransform: {
-    type: 'none' // 提升编译速度加速，加速
-  },
+  manifest: { basePath: '/' },
   extraBabelPlugins: [
     '@babel/plugin-proposal-nullish-coalescing-operator',
     '@babel/plugin-proposal-optional-chaining',
@@ -83,47 +52,54 @@ export default defineConfig({
       },
       '@icon-park/react'
     ]
-  ],
-  chainWebpack(config, { env }) {
-    config.plugin('windicss').use('windicss-webpack-plugin')
-    config.plugin('moment2dayjs').use('antd-dayjs-webpack-plugin')
+  ]
+  // externals: {
+  //   react: 'React',
+  //   'react-dom': 'ReactDOM'
+  // },
+  // scripts:
+  //   process.env.NODE_ENV === 'development'
+  //     ? [
+  //         'https://d2.smartcost.com.cn/cach/cld/react.development.js',
+  //         'https://d2.smartcost.com.cn/cach/cld/react-dom.development.js'
+  //       ]
+  //     : [
+  //         'https://d2.smartcost.com.cn/cach/cld/react.production.min.js',
+  //         'https://d2.smartcost.com.cn/cach/cld/react-dom.production.min.js'
+  //       ],
+  // chainWebpack(config, { env }) {
+  //   config.plugin('windicss').use('windicss-webpack-plugin')
+  //   config.plugin('moment2dayjs').use('antd-dayjs-webpack-plugin')
 
-    if (env === 'production') {
-      config.merge({
-        optimization: {
-          minimize: true,
-          splitChunks: {
-            chunks: 'all',
-            minSize: 30000,
-            minChunks: 2,
-            automaticNameDelimiter: '.',
-            cacheGroups: {
-              vendor: {
-                name: 'vendors',
-                test: ({ resource }) => /^.(?=react).$/.test(resource),
-                chunks: 'all',
-                priority: 20
-              }
-            }
-          }
-        }
-      })
-      config.plugin('compression-webpack-plugin').use(
-        new CompressionWebpackPlugin({
-          // filename: 文件名称，这里我们不设置，让它保持和未压缩的文件同一个名称
-          algorithm: 'gzip', // 指定生成gzip格式
-          test: new RegExp('\\.(' + prodGzipList.join('|') + ')$'), // 匹配哪些格式文件需要压缩
-          threshold: 10000, //对超过10k的数据进行压缩
-          minRatio: 0.6 // 压缩比例，值为0 ~ 1
-        })
-      )
-    }
-    //过滤掉momnet的那些不使用的国际化文件
-    // config
-    //   .plugin('replace')
-    //   .use(require('webpack').ContextReplacementPlugin)
-    //   .tap(() => {
-    //     return [/moment[/\\]locale$/, /zh-cn/]
-    //   })
-  }
+  //   if (env === 'production') {
+  //     config.merge({
+  //       optimization: {
+  //         minimize: true,
+  //         splitChunks: {
+  //           chunks: 'all',
+  //           minSize: 30000,
+  //           minChunks: 2,
+  //           automaticNameDelimiter: '.',
+  //           cacheGroups: {
+  //             vendor: {
+  //               name: 'vendors',
+  //               test: ({ resource }) => /^.(?=react).$/.test(resource),
+  //               chunks: 'all',
+  //               priority: 20
+  //             }
+  //           }
+  //         }
+  //       }
+  //     })
+  //     config.plugin('compression-webpack-plugin').use(
+  //       new CompressionWebpackPlugin({
+  //         // filename: 文件名称，这里我们不设置，让它保持和未压缩的文件同一个名称
+  //         algorithm: 'gzip', // 指定生成gzip格式
+  //         test: new RegExp('\\.(' + prodGzipList.join('|') + ')$'), // 匹配哪些格式文件需要压缩
+  //         threshold: 10000, //对超过10k的数据进行压缩
+  //         minRatio: 0.6 // 压缩比例，值为0 ~ 1
+  //       })
+  //     )
+  //   }
+  // }
 })

package.json

@@ -4,42 +4,20 @@
   "private": true,
   "description": "An out-of-box UI solution for enterprise applications",
   "scripts": {
-    "analyze": "cross-env ANALYZE=1 umi build",
-    "build": "umi build",
+    "analyze": "cross-env ANALYZE=1 max build",
+    "build": "max build",
     "deploy:qa": "cross-env REACT_APP_ENV=dev auto-deploy build -t qa",
     "deploy:prod": "cross-env REACT_APP_ENV=prod auto-deploy build -t prod",
-    "deploy-gh-pages": "npm run site && npm run gh-pages",
     "dev": "npm run start:dev",
-    "fetch:blocks": "pro fetch-blocks && npm run prettier",
-    "gh-pages": "gh-pages -d dist",
-    "i18n-remove": "pro i18n-remove --locale=zh-CN --write",
-    "postinstall": "umi g tmp",
-    "lint": "umi g tmp && npm run lint:js && npm run lint:style && npm run lint:prettier",
-    "lint-staged:js": "eslint --ext .js,.jsx,.ts,.tsx ",
-    "lint:fix": "eslint --fix --cache --ext .js,.jsx,.ts,.tsx --format=pretty ./src && npm run lint:style",
-    "lint:js": "eslint --cache --ext .js,.jsx,.ts,.tsx --format=pretty ./src",
-    "lint:prettier": "prettier --check \"src/**/*\" --end-of-line auto",
-    "lint:style": "stylelint --fix \"src/**/*.less\" --syntax less",
+    "postinstall": "max setup",
     "precommit": "lint-staged",
-    "prettier": "prettier -c --write \"src/**/*\"",
-    "start": "umi dev",
-    "start:dev": "cross-env PORT=8080 REACT_APP_ENV=dev MOCK=none umi dev",
-    "start:org": "cross-env PORT=8080 REACT_APP_ENV=org MOCK=none umi dev",
-    "start:no-mock": "cross-env MOCK=none umi dev",
-    "start:no-ui": "cross-env UMI_UI=none umi dev",
-    "start:pre": "cross-env REACT_APP_ENV=pre umi dev",
-    "start:test": "cross-env REACT_APP_ENV=test MOCK=none umi dev",
-    "pretest": "node ./tests/beforeTest",
-    "test": "umi test",
-    "test:all": "node ./tests/run-tests.js",
-    "test:component": "umi test ./src/components",
-    "tsc": "tsc --noEmit"
+    "start": "max dev",
+    "start:dev": "cross-env REACT_APP_ENV=dev MOCK=none max dev",
+    "start:org": "cross-env REACT_APP_ENV=org MOCK=none max dev"
   },
   "lint-staged": {
-    "**/*.less": "stylelint --syntax less",
-    "**/*.{js,jsx,ts,tsx}": "npm run lint-staged:js",
     "**/*.{js,jsx,tsx,ts,less,md,json}": [
-      "prettier --write"
+      "max lint"
     ]
   },
   "browserslist": [
@@ -51,11 +29,12 @@
     "@ant-design/charts": "^1.3.2",
     "@ant-design/icons": "^4.0.0",
     "@ant-design/pro-form": "1.66.0",
-    "@ant-design/pro-layout": "6.19.3",
+    "@ant-design/pro-layout": "6.38.8",
     "@ant-design/pro-table": "2.76.3",
     "@icon-park/react": "^1.3.3",
-    "@umijs/route-utils": "^2.0.5",
-    "ahooks": "^2.10.0",
+    "@umijs/max": "4.0.0-rc.22",
+    "@umijs/plugins": "4.0.0-rc.22",
+    "ahooks": "^3.4.1",
     "antd": "4.21.0",
     "antd-img-crop": "^3.16.0",
     "classnames": "^2.2.6",
@@ -67,61 +46,35 @@
     "qs": "^6.9.4",
     "rc-util": "^5.16.1",
     "rc-virtual-list": "^3.4.8",
-    "react": "17.0.2",
+    "react": "18.1.0",
     "react-copy-to-clipboard": "^5.0.4",
-    "react-dom": "17.0.2",
+    "react-dom": "18.1.0",
     "react-infinite-scroll-component": "^6.1.0",
     "react-markdown": "^7.1.0",
-    "umi": "3.5.4",
+    "unocss": "^0.38.2",
     "vditor": "3.8.14",
     "virtuallist-antd": "^0.7.2"
   },
   "devDependencies": {
     "@babel/plugin-proposal-class-properties": "^7.16.7",
     "@babel/plugin-proposal-decorators": "^7.17.2",
+    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.17.12",
     "@babel/plugin-proposal-optional-chaining": "^7.13.12",
-    "@babel/preset-env": "^7.16.11",
-    "@babel/preset-react": "^7.16.7",
-    "@babel/preset-typescript": "^7.16.7",
-    "@types/express": "^4.17.0",
-    "@types/history": "^4.7.2",
     "@types/jest": "^26.0.0",
     "@types/lodash": "^4.14.144",
     "@types/qs": "^6.5.3",
     "@types/react": "^16.9.17",
     "@types/react-dom": "^16.8.4",
-    "@types/react-helmet": "^6.1.0",
-    "@umijs/fabric": "^2.11.1",
-    "@umijs/plugin-blocks": "^2.0.5",
-    "@umijs/plugin-esbuild": "^1.4.1",
-    "@umijs/preset-ant-design-pro": "^1.2.0",
-    "@umijs/preset-react": "1.8.12",
-    "@umijs/yorkie": "^2.0.3",
-    "antd-dayjs-webpack-plugin": "^1.0.6",
+    "@unocss/cli": "^0.38.2",
     "babel-plugin-import": "^1.13.5",
-    "carlo": "^0.9.46",
-    "compression-webpack-plugin": "4.0.1",
     "cross-env": "^7.0.0",
-    "cross-port-killer": "^1.1.1",
-    "detect-installer": "^1.0.1",
-    "eslint": "^7.18.0",
-    "eslint-plugin-javascript": "^1.3.4",
-    "eslint-plugin-jsx": "^0.1.0",
-    "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-typescript": "^0.14.0",
-    "express": "^4.17.1",
-    "gh-pages": "^3.0.0",
+    "eslint": "^8.17.0",
     "lint-staged": "^10.0.0",
-    "prettier": "^2.2.1",
-    "puppeteer-core": "^5.0.0",
-    "stylelint": "^13.9.0",
-    "typescript": "^4.0.3",
-    "webpack": "5.69.1",
-    "windicss": "3.1.7",
-    "windicss-webpack-plugin": "1.7.3"
+    "prettier": "^2.6.1",
+    "stylelint": "^14.9.0",
+    "typescript": "^4.7.3"
   },
   "engines": {
     "node": ">=10.0.0"
-  },
-  "packageManager": "pnpm@6.32.4"
+  }
 }

src/access.ts

@@ -1,4 +1,4 @@
-import { TagDataTypeEnum } from './pages/Customer/Company/components/PersonLabel/const'
+import { TagDataType } from './pages/Customer/Company/components/PersonLabel/const'
 
 // eslint-disable-next-line func-names
 export default function (initialState) {
@@ -8,7 +8,7 @@ export default function (initialState) {
     if (currentUser.isAdmin) {
       return true
     }
-    const name = route.path?.match(/\/(\w*)\//)[1]
+    const name = route.path?.match(/\/(\w*)\//)?.[1]
     if (name && permData[name] && permData[name]?.length) {
       return true
     }
@@ -30,8 +30,8 @@ export default function (initialState) {
 
   /** 协作标签 */
   const canEditTag = (type: 0 | 1): boolean => {
-    if (type === TagDataTypeEnum.CLIENT) return roles.includes('client_edit_team_tags')
-    if (type === TagDataTypeEnum.COMPANY) return roles.includes('company_edit_team_tags')
+    if (type === TagDataType.CLIENT) return roles.includes('client_edit_team_tags')
+    if (type === TagDataType.COMPANY) return roles.includes('company_edit_team_tags')
     return false
   }
 

src/app.tsx

@@ -1,7 +1,6 @@
 import { queryCurrentUser, queryPermData } from './services/user'
-import type { RequestConfig } from 'umi'
-import { ErrorShowType } from 'umi'
-import { history } from 'umi'
+import type { ErrorShowType, RequestConfig } from '@umijs/max'
+import { history } from '@umijs/max'
 import RightContent from '@/components/RightContent'
 import { message, notification } from 'antd'
 import logo from '../public/logo.svg'
@@ -10,10 +9,9 @@ import { tryChangeWorkStatus } from './components/RightContent/Book'
 import { getAuthCache, setAuthCache } from './utils/auth'
 import { LAYOUT_COLLAPSED_KEY } from './utils/cache/cacheEnum'
 import consts from './consts'
-import ModalStore from './components/ModalStore/import'
-import { stringify } from 'qs'
+import ModalStore from './components/ModalStore'
 import MessageDetail from './pages/Hr/Notification/components/MessageDetail'
-
+import defaultSettings from '../config/defaultSettings'
 const loginPath = '/user/login'
 
 export async function getInitialState() {
@@ -47,13 +45,13 @@ export async function getInitialState() {
       fetchPermData,
       permData,
       ...userInfo,
-      settings: { collapsed, defaultCollapsed: collapsed }
+      settings: { ...defaultSettings, collapsed, defaultCollapsed: collapsed }
     }
   }
   return {
     fetchUserInfo,
     fetchPermData,
-    settings: {}
+    settings: { ...defaultSettings }
   }
 }
 
@@ -157,10 +155,9 @@ const authHeaderInterceptor = (url, options) => {
 
 export const request: RequestConfig = {
   errorHandler,
-  prefix: '/api',
+  baseURL: consts.PREFIX_URL,
   // 默认错误处理
   credentials: 'include', // 默认请求是否带上cookie
-  prefix: consts.PREFIX_URL,
   cache: 'no-cache',
   errorConfig: {
     adaptor: resData => {

src/components/EditableForm/src/editableFormItem.tsx

@@ -3,7 +3,7 @@ import { editFormApi } from '@/services/common'
 import { Input, Row, Col } from 'antd'
 import React, { useState, useEffect, useRef } from 'react'
 import LazyCascader from '../../LazyCascader'
-import { useDispatch } from 'umi'
+import { useDispatch } from '@umijs/max'
 import useOptions from './useOptions'
 import ChangeSelect from './components/ChangeSelect'
 import ChangeTreeSelect from './components/ChangeTreeSelect'

src/components/LazyCascader/LazyCascader.tsx

@@ -4,8 +4,8 @@ import { isUnDef } from '@/utils/is'
 import type { CascaderProps } from 'antd'
 import { Cascader, Divider, Tag } from 'antd'
 import React, { forwardRef, useEffect, useState, useLayoutEffect } from 'react'
-import { connect } from 'umi'
-import type { Dispatch } from 'umi'
+import { connect } from '@umijs/max'
+import type { Dispatch } from '@umijs/max'
 import styles from './index.less'
 import { saveRecordToAuth } from './util'
 import type { CascaderRef } from 'antd/lib/cascader'

src/components/ModalStore/import.ts

@@ -1,9 +0,0 @@
-import { dynamic } from 'umi'
-
-export default dynamic({
-  loader: async function () {
-    // 这里的注释 webpackChunkName 可以指导 webpack 将该组件 HugeA 以这个名字单独拆出去
-    const { default: ModalStore } = await import(/* webpackChunkName: "external_modal_store" */ './index.tsx')
-    return ModalStore
-  }
-})

src/components/ModalStore/src/CreateProvider.tsx

@@ -3,7 +3,7 @@ import type { CSSProperties } from 'react'
 import { useState } from 'react'
 import React from 'react'
 import { ModalContext } from './context'
-import { useDispatch } from 'umi'
+import { useDispatch } from '@umijs/max'
 export interface ModalFullConfig<T = any> {
   destroyOnClose?: boolean | string
   visiblePropName?: string

src/components/RightContent/AvatarDropdown.tsx

@@ -2,7 +2,7 @@
 import React, { useCallback } from 'react'
 import { InfoCircleFilled, LogoutOutlined, SettingOutlined, UserOutlined } from '@ant-design/icons'
 import { Avatar, Menu, Spin, Modal } from 'antd'
-import { history, useModel } from 'umi'
+import { history, useModel } from '@umijs/max'
 import { stringify } from 'querystring'
 import HeaderDropdown from '../HeaderDropdown'
 import styles from './index.less'

src/components/RightContent/Book/components/UserList/index.less

@@ -148,7 +148,7 @@
   z-index: -1;
   width: 15px;
   height: 95px;
-  background: url('/sideBg.png') no-repeat -14px 0;
+  background: url('/public/sideBg.png') no-repeat -14px 0;
   cursor: pointer;
 }
 .side-bg:hover {
@@ -161,7 +161,7 @@
   z-index: -1;
   width: 15px;
   height: 95px;
-  background: url('/sideBg-current.png') no-repeat -1px 0;
+  background: url('/public/sideBg-current.png') no-repeat -1px 0;
   transition: all 0.5s cubic-bezier(0.34, 1.25, 0.3, 1);
   transition-delay: 0.3s;
 }

src/components/RightContent/Book/components/UserList/index.tsx

@@ -1,7 +1,7 @@
 import { isDevMode } from '@/utils/env'
 import classNames from 'classnames'
 import { useState, useRef } from 'react'
-import { useIntl } from 'umi'
+import { useIntl } from '@umijs/max'
 import './index.less'
 
 export type StaffItem = {

src/components/RightContent/Book/index.tsx

@@ -2,7 +2,7 @@ import { useState, useEffect } from 'react'
 import ws, { CmdType, onMessage } from '@/utils/ws'
 import { debounce } from 'lodash-es'
 import UesrList from './components/UserList'
-import { useModel } from 'umi'
+import { useModel } from '@umijs/max'
 // import { isDevMode } from '@/utils/env'
 
 const Book = () => {

src/components/RightContent/NoticeIcon/index.tsx

@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useState } from 'react'
 import { Tag, message } from 'antd'
 import { groupBy } from 'lodash-es'
-import { useModel, history } from 'umi'
+import { useModel, history } from '@umijs/max'
 import NoticeIcon from './NoticeIcon'
 import styles from './index.less'
 import dayjs from 'dayjs'

src/components/RightContent/index.tsx

@@ -2,7 +2,7 @@
 import { Tag, Space } from 'antd'
 // import { QuestionCircleOutlined } from '@ant-design/icons'
 import React from 'react'
-import { useModel, SelectLang } from 'umi'
+import { useModel, SelectLang } from '@umijs/max'
 import Avatar from './AvatarDropdown'
 import Notify from './NoticeIcon'
 // import HeaderSearch from '../HeaderSearch'

src/components/Table/src/BasicTable.tsx

@@ -5,7 +5,7 @@ import PermSelect from '@/pages/Customer/Company/components/PermSelect'
 import { TABLE_COLUMNS_MAP, ColumnStateEnum } from '@/utils/cache/cacheEnum'
 import { isBoolean, isMobile, isNullOrUnDef, isObject, isUnDef } from '@/utils/is'
 import ProTable from '@ant-design/pro-table'
-import { useModel } from 'umi'
+import { useModel } from '@umijs/max'
 import { getAuthCache, getPermAuthCache, setAuthCache } from '@/utils/auth'
 import { useTableScroll } from './hooks/useTableScroll'
 import type { ColumnsState } from '@ant-design/pro-table'

src/components/TimeLineList/index.less

@@ -1,36 +1,55 @@
 .time-list-container {
   .time-item-content {
-    @apply w-full w-full;
+    // width: 100%;
+    // height: 100%;
     .time-item-label {
       .time-item-label-forward {
-        @apply text-xl text-black text-opacity-80 font-medium;
+        font-size: 20px;
+        line-height: 28px;
+        color: rgba(0, 0, 0, 0.8);
+        font-weight: 500;
       }
       .time-item-label-base {
-        @apply flex items-center;
+        display: flex;
+        align-items: center;
         .year {
-          @apply text-xs text-opacity-40 text-hex-000;
+          font-size: 12px;
+          line-height: 16px;
+          color: rgba(0, 0, 0, 0.4);
         }
         .date {
-          @apply text-sm font-medium text-opacity-80;
+          font-size: 14px;
+          line-height: 20px;
+          font-weight: 500;
+          color: rgba(0, 0, 0, 0.8);
         }
       }
       .time-item-label-square {
-        @apply w-2.5 h-2.5 bg-black opacity-15 rounded-1/2;
+        width: 10px;
+        height: 10px;
+        background-color: rgba(0, 0, 0, 0.15);
+        border-radius: 50%;
       }
     }
     .time-item-render {
-      @apply w-full w-full ml-3;
+      width: 100%;
+      height: 100%;
+      margin-left: 12px;
     }
   }
   .time-item-has-line {
-    @apply flex flex-nowrap relative;
+    display: flex;
+    flex-wrap: nowrap;
+    position: relative;
     .time-item-label-has-line {
+      display: flex;
+      justify-content: center;
+      align-items: center;
       height: 40px;
       min-width: 120px;
-      @apply flex justify-center items-center;
     }
     .time-item-render-has-line {
-      @apply min-h-22;
+      min-height: 88px;
     }
     &:not(:last-child)::after {
       content: ' ';
@@ -43,12 +62,16 @@
     }
   }
   .time-item-has-card {
-    @apply flex flex-col relative;
+    display: flex;
+    flex-direction: column;
+    position: relative;
     .time-item-label-has-card {
-      @apply flex justify-start items-center;
+      display: flex;
+      justify-content: start;
+      align-items: center;
     }
     &.time-item-last {
-      @apply mb-8;
+      margin-bottom: 32px;
     }
     .time-item-label-tail {
       position: absolute;
@@ -58,7 +81,8 @@
       border-bottom: 2px solid rgba(0, 0, 0, 0.1);
     }
     .time-item-render-has-card {
-      @apply mt-4 ml-0;
+      margin-top: 16px;
+      margin-left: 0;
     }
   }
 }

src/global.jsx

@@ -1,8 +1,7 @@
 import { Button, message, notification } from 'antd'
 import React from 'react'
-import { useIntl } from 'umi'
+import { useIntl } from '@umijs/max'
 import defaultSettings from '../config/defaultSettings'
-import 'windi.css'
 import '@icon-park/react/styles/index.less'
 
 const { pwa } = defaultSettings

src/global.less

@@ -83,6 +83,14 @@ body {
 ul,
 ol {
   list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+/* stylelint-disable-next-line selector-pseudo-element-colon-notation */
+*, :after, :before {
+  box-sizing: border-box;
+  border: 0 solid #e4e4e7;
 }
 
 .vditor-reset ul,
@@ -125,7 +133,7 @@ input:-webkit-autofill:active {
   width: 100%;
 }
 .ant-drawer-body {
-  padding: 0;
+  padding: 0 !important;
 }
 
 .ant-skeleton-element {
@@ -166,14 +174,17 @@ input:-webkit-autofill:active {
       & .ant-card, & .ant-table {
         background: #fafafa;
       }
-      // .ant-table-tbody {
-      //   & > tr.ant-table-placeholder > td {
-      //     border-bottom: none;
-      //   }
-      //   & > tr.ant-table-placeholder:hover > td {
-      //     background: none !important;
-      //   }
-      // }
+      // 空数据时tbody样式
+      .ant-table-tbody {
+        /* stylelint-disable-next-line selector-max-compound-selectors */
+        & > tr.ant-table-placeholder > td {
+          border-bottom: none;
+        }
+        /* stylelint-disable-next-line selector-max-compound-selectors */
+        & > tr.ant-table-placeholder:hover > td {
+          background: none !important;
+        }
+      }
     }
   }
 }

src/manifest.json

@@ -1,22 +0,0 @@
-{
-  "name": "Ant Design Pro",
-  "short_name": "Ant Design Pro",
-  "display": "standalone",
-  "start_url": "./?utm_source=homescreen",
-  "theme_color": "#002140",
-  "background_color": "#001529",
-  "icons": [
-    {
-      "src": "icons/icon-192x192.png",
-      "sizes": "192x192"
-    },
-    {
-      "src": "icons/icon-128x128.png",
-      "sizes": "128x128"
-    },
-    {
-      "src": "icons/icon-512x512.png",
-      "sizes": "512x512"
-    }
-  ]
-}

src/pages/404.jsx

@@ -1,6 +1,6 @@
 import { Button, Result } from 'antd'
 import React from 'react'
-import { history } from 'umi'
+import { history } from '@umijs/max'
 
 const NoFoundPage = () => (
   <Result

src/pages/Customer/Business/components/AddBusiness.jsx

@@ -1,6 +1,6 @@
 import { ProFormDatePicker, ProFormSelect, ProFormText } from '@ant-design/pro-form'
 import { Button, Row, Col, Modal, Form } from 'antd'
-import { connect } from 'umi'
+import { connect } from '@umijs/max'
 import { addBusiness } from '@/services/customer'
 import { isNullOrUnDef } from '@/utils/is'
 import consts from '@/consts'

src/pages/Customer/Business/components/BusinessDetail/Step/index.jsx

@@ -2,7 +2,7 @@
 import { Modal, Tooltip, Menu, Dropdown, message } from 'antd'
 import React, { useMemo } from 'react'
 import styles from './index.less'
-import { useRequest, useDispatch } from 'umi'
+import { useRequest, useDispatch } from '@umijs/max'
 import { changeGroupStatus } from '@/services/customer'
 import { CloseOne, SmilingFaceWithSquintingEyes } from '@icon-park/react'
 import { MinusCircleOutlined, DownOutlined } from '@ant-design/icons'

src/pages/Customer/Business/components/BusinessDetail/TabList.jsx

@@ -2,7 +2,7 @@ import { Button, message, Tabs } from 'antd'
 import React, { useEffect, useState } from 'react'
 import consts from '@/consts'
 import { apiAddBusiService } from '@/services/customer'
-import { useDispatch } from 'umi'
+import { useDispatch } from '@umijs/max'
 import { Plus } from '@icon-park/react'
 import ProTable from '@ant-design/pro-table'
 import AddRecord from '@/pages/Customer/Client/components/ClientDetail/AddRecord'

src/pages/Customer/Business/components/BusinessDetail/index.jsx

@@ -5,7 +5,7 @@ import TabList from './TabList'
 import LowerList from './LowerList'
 import { getBusinessDetailById } from '@/services/customer'
 import consts from '@/consts'
-import { connect, useModel } from 'umi'
+import { connect, useModel } from '@umijs/max'
 import { Up, Down } from '@icon-park/react'
 import { FlipOverEnum, useFlipOver } from '@/hooks/web/useFlipOver'
 import './index.less'

src/pages/Customer/Business/index.jsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useRef, useMemo } from 'react'
-import { connect, useAccess, useModel } from 'umi'
+import { connect, useAccess, useModel } from '@umijs/max'
 import { getBusinessList } from '@/services/customer'
 import consts from '@/consts'
 import { Select, Tooltip, Input, Button } from 'antd'

src/pages/Customer/Client/components/AddClient/index.jsx

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react'
 import { Form, Row, Col, Button, Modal } from 'antd'
 import LazyCascader from '@/components/LazyCascader'
 import { ProFormSelect, ProFormText, ProFormTextArea } from '@ant-design/pro-form'
-import { useDispatch, connect } from 'umi'
+import { useDispatch, connect } from '@umijs/max'
 import { ChangeCompMap } from '@/pages/Customer/Company/components/ChangeCompany'
 import { isNullOrUnDef } from '@/utils/is'
 import TelephoneFormItem from './TelephoneFormItem'

src/pages/Customer/Client/components/ClientDetail/Form.jsx

@@ -2,12 +2,12 @@ import { Row, Col, Tooltip } from 'antd'
 import React, { useEffect, useMemo } from 'react'
 import EditableForm from '@/components/EditableForm'
 import ChangeCompanyInput from '@/pages/Customer/Company/components/ChangeCompany'
-import { connect } from 'umi'
+import { connect } from '@umijs/max'
 import PersonLabel from '@/pages/Customer/Company/components/PersonLabel'
 import { Add } from '@icon-park/react'
 import {
-  TagTypeEnum,
-  TagDataTypeEnum,
+  TagType,
+  TagDataType,
   LabelModeType
 } from '@/pages/Customer/Company/components/PersonLabel/const'
 
@@ -40,13 +40,13 @@ const ClientForm = props => {
     if (!personTags.length) {
       dispatch({
         type: 'client/fetchPersonTags',
-        payload: { tagType: TagTypeEnum.PERSONTAG, tagColumn: TagDataTypeEnum.CLIENT }
+        payload: { tagType: TagType.PERSONTAG, tagColumn: TagDataType.CLIENT }
       })
     }
     if (!teamTags.length) {
       dispatch({
         type: 'client/fetchTeamTags',
-        payload: { tagType: TagTypeEnum.TEAMTAG, tagColumn: TagDataTypeEnum.CLIENT }
+        payload: { tagType: TagType.TEAMTAG, tagColumn: TagDataType.CLIENT }
       })
     }
   }, [])
@@ -175,8 +175,8 @@ const ClientForm = props => {
               <PersonLabel
                 dataId={client.id}
                 tagIds={client.tagIds}
-                tagType={TagTypeEnum.PERSONTAG}
-                tagColumn={TagDataTypeEnum.CLIENT}
+                tagType={TagType.PERSONTAG}
+                tagColumn={TagDataType.CLIENT}
                 checkCallBack={refreshClient}
                 modeType={LabelModeType.column}>
                 <Add theme="filled" size="20" fill="#868e96" className="cursor-pointer" />
@@ -202,8 +202,8 @@ const ClientForm = props => {
               <PersonLabel
                 dataId={client.id}
                 tagIds={client.tagCooperationIds}
-                tagType={TagTypeEnum.TEAMTAG}
-                tagColumn={TagDataTypeEnum.CLIENT}
+                tagType={TagType.TEAMTAG}
+                tagColumn={TagDataType.CLIENT}
                 checkCallBack={refreshClient}
                 modeType={LabelModeType.column}>
                 <Add theme="filled" size="20" fill="#868e96" className="cursor-pointer" />

src/pages/Customer/Client/components/ClientDetail/LowerList.tsx

@@ -14,7 +14,7 @@ import {
   delClientService
 } from '@/services/customer'
 import { useModal } from '@/components/ModalStore'
-import { useDispatch, useRequest } from 'umi'
+import { useDispatch, useRequest } from '@umijs/max'
 const { TabPane } = Tabs
 
 export enum Servicelog {

src/pages/Customer/Client/components/ClientDetail/TabList.jsx

@@ -2,7 +2,7 @@ import { Button, message, Table, Tabs, Tag, Typography } from 'antd'
 import React, { useEffect, useState, useRef } from 'react'
 import consts from '@/consts'
 import { apiAddService } from '@/services/customer'
-import { useDispatch } from 'umi'
+import { useDispatch } from '@umijs/max'
 import ProTable from '@ant-design/pro-table'
 import { renderBadge } from '@/pages/Workbench/Dashboard/components/RatioPanels'
 import { longleSellStatusNum, longlePreserveStatusNum } from '@/pages/Product/Lock/LockStore/index'
@@ -210,7 +210,7 @@ const ClientTabList = ({ clientId, software, updatePayload }) => {
           </TabPane>
           <TabPane tab="云版" key="2">
             <Table
-              className="sheet-right-panel"
+              className="sheet-right-panel sheet-panel-has-btn"
               loading={state.loading}
               size="small"
               columns={cloudColumns}

src/pages/Customer/Client/components/ClientDetail/index.jsx

@@ -5,7 +5,7 @@ import ClientTabList from './TabList'
 import ClientLowerList from './LowerList'
 import { apiClientDetail } from '@/services/customer'
 import consts from '@/consts'
-import { connect, useModel } from 'umi'
+import { connect, useModel } from '@umijs/max'
 import { Up, Down } from '@icon-park/react'
 import { FlipOverEnum, useFlipOver } from '@/hooks/web/useFlipOver'
 import { WaterMark } from '@ant-design/pro-layout'

src/pages/Customer/Client/index.jsx

@@ -1,10 +1,10 @@
 import { Input, Button, message, Tooltip } from 'antd'
-import { connect, useAccess, useModel } from 'umi'
+import { connect, useAccess, useModel } from '@umijs/max'
 import React, { useEffect, useState, useRef, useMemo } from 'react'
 import consts from '@/consts'
 import LazyCascader, { formatValues } from '@/components/LazyCascader'
 import PersonLabel from '../Company/components/PersonLabel'
-import { TagTypeEnum, TagDataTypeEnum, LabelModeType } from '../Company/components/PersonLabel/const'
+import { TagType, TagDataType, LabelModeType } from '../Company/components/PersonLabel/const'
 import { Add, Down, Check } from '@icon-park/react'
 import { apiAddClient, queryClient } from '@/services/customer'
 import { apiBatchLink } from '@/services/customer'
@@ -92,13 +92,13 @@ const Client = props => {
     if (!personTags.length) {
       dispatch({
         type: 'client/fetchPersonTags',
-        payload: { tagType: TagTypeEnum.PERSONTAG, tagColumn: TagDataTypeEnum.CLIENT }
+        payload: { tagType: TagType.PERSONTAG, tagColumn: TagDataType.CLIENT }
       })
     }
     if (!teamTags.length) {
       dispatch({
         type: 'client/fetchTeamTags',
-        payload: { tagType: TagTypeEnum.TEAMTAG, tagColumn: TagDataTypeEnum.CLIENT }
+        payload: { tagType: TagType.TEAMTAG, tagColumn: TagDataType.CLIENT }
       })
     }
     if (shouldUpdate) {
@@ -275,8 +275,8 @@ const Client = props => {
           <PersonLabel
             dataId={record.id}
             tagIds={record.tagIds}
-            tagType={TagTypeEnum.PERSONTAG}
-            tagColumn={TagDataTypeEnum.CLIENT}
+            tagType={TagType.PERSONTAG}
+            tagColumn={TagDataType.CLIENT}
             checkCallBack={refreshData}
             modeType={LabelModeType.column}>
             <Add theme="filled" size="20" fill="#868e96" className="cursor-pointer" />
@@ -312,8 +312,8 @@ const Client = props => {
           <PersonLabel
             dataId={record.id}
             tagIds={record.tagCooperationIds}
-            tagType={TagTypeEnum.TEAMTAG}
-            tagColumn={TagDataTypeEnum.CLIENT}
+            tagType={TagType.TEAMTAG}
+            tagColumn={TagDataType.CLIENT}
             checkCallBack={refreshData}
             modeType={LabelModeType.column}>
             <Add theme="filled" size="20" fill="#868e96" className="cursor-pointer" />
@@ -454,8 +454,8 @@ const Client = props => {
       const { code = -1 } = await apiBatchLink({
         tagIds: tagState.tagIds,
         dataIds: clientIds,
-        dataType: TagDataTypeEnum.CLIENT,
-        tagType: TagTypeEnum.PERSONTAG
+        dataType: TagDataType.CLIENT,
+        tagType: TagType.PERSONTAG
       })
       if (code !== consts.RET_CODE.SUCCESS) {
         requestSuccess = false
@@ -465,8 +465,8 @@ const Client = props => {
       const { code = -1 } = await apiBatchLink({
         tagIds: tagState.tagCooperationIds,
         dataIds: clientIds,
-        dataType: TagDataTypeEnum.CLIENT,
-        tagType: TagTypeEnum.TEAMTAG
+        dataType: TagDataType.CLIENT,
+        tagType: TagType.TEAMTAG
       })
       if (code !== consts.RET_CODE.SUCCESS) {
         requestSuccess = false
@@ -481,8 +481,8 @@ const Client = props => {
       <div className="flex flex-row">
         <div className="mr-5px">
           <PersonLabel
-            tagType={TagTypeEnum.PERSONTAG}
-            tagColumn={TagDataTypeEnum.CLIENT}
+            tagType={TagType.PERSONTAG}
+            tagColumn={TagDataType.CLIENT}
             checkCallBack={toolbarOptionsChange}
             modeType={LabelModeType.toolbar}>
             {tagState.tagIds.length ? (
@@ -506,8 +506,8 @@ const Client = props => {
         </div>
         <div className="mr-5">
           <PersonLabel
-            tagType={TagTypeEnum.TEAMTAG}
-            tagColumn={TagDataTypeEnum.CLIENT}
+            tagType={TagType.TEAMTAG}
+            tagColumn={TagDataType.CLIENT}
             checkCallBack={toolbarOptionsChange}
             modeType={LabelModeType.toolbar}>
             {tagState.tagCooperationIds.length ? (

src/pages/Customer/Company/components/AddCompany/index.jsx

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react'
 import { Form, Row, Col, Button, Modal } from 'antd'
 import LazyCascader from '@/components/LazyCascader'
 import { ProFormText, ProFormCheckbox, ProFormTextArea } from '@ant-design/pro-form'
-import { connect } from 'umi'
+import { connect } from '@umijs/max'
 import { ChangeCompMap } from '../ChangeCompany'
 import { isNullOrUnDef } from '@/utils/is'
 import CompanyFormItem from './CompanyFormItem'

src/pages/Customer/Company/components/CompanyDetail/Form.jsx

@@ -2,9 +2,9 @@ import React, { useEffect } from 'react'
 import { Row, Col, Tooltip } from 'antd'
 import EditableForm from '@/components/EditableForm'
 import PersonLabel from '../PersonLabel'
-import { TagTypeEnum, TagDataTypeEnum, LabelModeType } from '../PersonLabel/const'
+import { TagType, TagDataType, LabelModeType } from '../PersonLabel/const'
 import { Add } from '@icon-park/react'
-import { connect } from 'umi'
+import { connect } from '@umijs/max'
 
 const CompanyForm = props => {
   const {
@@ -21,13 +21,13 @@ const CompanyForm = props => {
     if (!personTags.length) {
       dispatch({
         type: 'company/fetchPersonTags',
-        payload: { tagType: TagTypeEnum.PERSONTAG, tagColumn: TagDataTypeEnum.COMPANY }
+        payload: { tagType: TagType.PERSONTAG, tagColumn: TagDataType.COMPANY }
       })
     }
     if (!teamTags.length) {
       dispatch({
         type: 'company/fetchTeamTags',
-        payload: { tagType: TagTypeEnum.TEAMTAG, tagColumn: TagDataTypeEnum.COMPANY }
+        payload: { tagType: TagType.TEAMTAG, tagColumn: TagDataType.COMPANY }
       })
     }
   }, [])
@@ -124,8 +124,8 @@ const CompanyForm = props => {
           <PersonLabel
             dataId={customer.id}
             tagIds={customer.tagIds}
-            tagType={TagTypeEnum.PERSONTAG}
-            tagColumn={TagDataTypeEnum.COMPANY}
+            tagType={TagType.PERSONTAG}
+            tagColumn={TagDataType.COMPANY}
             checkCallBack={refreshCompany}
             modeType={LabelModeType.column}
           >
@@ -152,8 +152,8 @@ const CompanyForm = props => {
           <PersonLabel
             dataId={customer.id}
             tagIds={customer.tagCooperationIds}
-            tagType={TagTypeEnum.TEAMTAG}
-            tagColumn={TagDataTypeEnum.COMPANY}
+            tagType={TagType.TEAMTAG}
+            tagColumn={TagDataType.COMPANY}
             checkCallBack={refreshCompany}
             modeType={LabelModeType.column}
           >

src/pages/Customer/Company/components/CompanyDetail/SyncClient.tsx

@@ -3,7 +3,7 @@ import { syncToClient } from '@/services/customer'
 import { Copy } from '@icon-park/react'
 import { Button, Checkbox, message, Modal, Table } from 'antd'
 import { useState, useMemo } from 'react'
-import { useDispatch } from 'umi'
+import { useDispatch } from '@umijs/max'
 import { VList } from 'virtuallist-antd'
 
 type SyncClientProps = {

src/pages/Customer/Company/components/CompanyDetail/TabList.jsx

@@ -4,7 +4,7 @@ import { apiAddClient, apiAddCustomerService, updateClient } from '@/services/cu
 import { formatValues } from '@/components/LazyCascader'
 import consts from '@/consts'
 import ProTable from '@ant-design/pro-table'
-import { useDispatch } from 'umi'
+import { useDispatch } from '@umijs/max'
 import AddRecord from '@/pages/Customer/Client/components/ClientDetail/AddRecord'
 import SyncClient from './SyncClient'
 import { longleSellStatusNum, longlePreserveStatusNum } from '@/pages/Product/Lock/LockStore/index'

src/pages/Customer/Company/components/CompanyDetail/index.jsx

@@ -5,7 +5,7 @@ import { apiCompanyDetail } from '@/services/customer'
 import CompanyForm from './Form'
 import CompanyLowerList from './LowerList'
 import CompanyTabList from './TabList'
-import { connect, useModel } from 'umi'
+import { connect, useModel } from '@umijs/max'
 import { Up, Down } from '@icon-park/react'
 import { FlipOverEnum, useFlipOver } from '@/hooks/web/useFlipOver'
 import { WaterMark } from '@ant-design/pro-layout'

src/pages/Customer/Company/components/ConnectCompany/index.jsx

@@ -3,7 +3,7 @@ import React, { useState, useEffect, useRef } from 'react'
 import styles from './index.less'
 import { SearchOutlined } from '@ant-design/icons'
 import { useDebounceFn } from 'ahooks'
-import { useAccess } from 'umi'
+import { useAccess } from '@umijs/max'
 import AddCompany from '@/pages/Customer/Company/components/AddCompany'
 import { createCustomer, queryCustomers } from '@/services/customer'
 import consts from '@/basic/consts'

src/pages/Customer/Company/components/PermSelect.tsx

@@ -1,4 +1,4 @@
-import { useModel } from 'umi'
+import { useModel } from '@umijs/max'
 import { Button, Dropdown, Menu } from 'antd'
 import { getPermAuthCache, setAuthCache } from '@/utils/auth'
 import { PERMISSION_SELECT_KEY } from '@/utils/cache/cacheEnum'

src/pages/Customer/Company/components/PersonLabel/const.js

@@ -1,41 +0,0 @@
-export const DropdownTypeEnum = {
-  check: 0,
-  edit: 1
-}
-// 数据类型
-export const TagDataTypeEnum = {
-  CLIENT: 1, // 客户
-  COMPANY: 2 // 单位
-}
-// 标签类型
-export const TagTypeEnum = {
-  PERSONTAG: 0, // 个人
-  TEAMTAG: 1 // 协作
-}
-export const LabelModeType = {
-  column: 0, // 列操作
-  toolbar: 1 // 常用于表格批量操作
-}
-
-export const LabelStatusColorMap = {
-  [TagTypeEnum.PERSONTAG]: [
-    '#16A085',
-    '#2980B9',
-    '#8E44AD',
-    '#f90000',
-    '#B8651B',
-    '#2C3E50',
-    '#efd200',
-    '#f47300'
-  ],
-  [TagTypeEnum.TEAMTAG]: [
-    '#F8AC59',
-    '#FF69B4',
-    '#999999',
-    '#7186ab',
-    '#778b72',
-    '#c292ca',
-    '#a14751',
-    '#57ECCC'
-  ]
-}

src/pages/Customer/Company/components/PersonLabel/const.ts

@@ -0,0 +1,41 @@
+export enum DropdownType  {
+  check = 0,
+  edit = 1
+}
+// 数据类型
+export enum TagDataType  {
+  CLIENT = 1, // 客户
+  COMPANY = 2 // 单位
+}
+// 标签类型
+export enum TagType  {
+  PERSONTAG = 0, // 个人
+  TEAMTAG = 1 // 协作
+}
+export enum LabelModeType {
+  column = 0, // 列操作
+  toolbar = 1 // 常用于表格批量操作
+}
+
+export const LabelStatusColorMap = {
+  [TagType.PERSONTAG]: [
+    '#16A085',
+    '#2980B9',
+    '#8E44AD',
+    '#f90000',
+    '#B8651B',
+    '#2C3E50',
+    '#efd200',
+    '#f47300'
+  ],
+  [TagType.TEAMTAG]: [
+    '#F8AC59',
+    '#FF69B4',
+    '#999999',
+    '#7186ab',
+    '#778b72',
+    '#c292ca',
+    '#a14751',
+    '#57ECCC'
+  ]
+}

src/pages/Customer/Company/components/PersonLabel/index.less

@@ -56,8 +56,9 @@
       }
     }
     .statusIcon {
-      @apply w-12px h-12px inline-block;
-
+      height: 12px;
+      width: 12px;
+      display: inline-block;
       margin-right: 0.5rem;
       line-height: 12px;
       &::after {

src/pages/Customer/Company/components/PersonLabel/index.jsx

@@ -1,15 +1,15 @@
 import { Button, Checkbox, Popover, Input, message, Spin } from 'antd'
 import React, { useState, useRef, useEffect, useMemo } from 'react'
-import { connect, useAccess } from 'umi'
+import { connect, useAccess } from '@umijs/max'
 import styles from './index.less'
 import { apiConnOrDelTag, apiUpdateTag } from '@/services/customer'
 import consts from '@/basic/consts'
 import {
-  DropdownTypeEnum,
+  DropdownType,
   LabelModeType,
   LabelStatusColorMap,
-  TagDataTypeEnum,
-  TagTypeEnum
+  TagDataType,
+  TagType
 } from './const'
 
 const DropDownMenu = props => {
@@ -50,7 +50,7 @@ const DropDownMenu = props => {
       checkCallBack()
     } else {
       checkCallBack &&
-        checkCallBack(tagType === TagTypeEnum.PERSONTAG ? 'tagIds' : 'tagCooperationIds', ids)
+        checkCallBack(tagType === TagType.PERSONTAG ? 'tagIds' : 'tagCooperationIds', ids)
     }
     if (canRender) {
       setCheckedIds(ids)
@@ -84,7 +84,7 @@ const DropDownMenu = props => {
 
   return (
     <ul className={styles.labelContent}>
-      {menuType === DropdownTypeEnum.check
+      {menuType === DropdownType.check
         ? tags.map((item, idx) => {
             return (
               <li
@@ -97,7 +97,7 @@ const DropDownMenu = props => {
                   <div
                     className={[
                       styles.statusIcon,
-                      tagType === TagTypeEnum.PERSONTAG ? styles.suqare : ''
+                      tagType === TagType.PERSONTAG ? styles.suqare : ''
                     ].join(' ')}
                     style={{ backgroundColor: LabelStatusColorMap[tagType][idx] }}
                   />
@@ -113,7 +113,7 @@ const DropDownMenu = props => {
             )
           })
         : null}
-      {menuType === DropdownTypeEnum.edit
+      {menuType === DropdownType.edit
         ? tags.map((item, idx) => (
             <Spin
               key={item.id}
@@ -130,7 +130,7 @@ const DropDownMenu = props => {
                   <div
                     className={[
                       styles.statusIcon,
-                      tagType === TagTypeEnum.PERSONTAG ? styles.suqare : ''
+                      tagType === TagType.PERSONTAG ? styles.suqare : ''
                     ].join(' ')}
                     style={{ backgroundColor: LabelStatusColorMap[tagType][idx] }}
                   />
@@ -169,27 +169,27 @@ const PersonLabel = props => {
     loadingClient,
     loadingCompany
   } = props
-  const [dropdownType, setDropdownType] = useState(DropdownTypeEnum.check)
+  const [dropdownType, setDropdownType] = useState(DropdownType.check)
 
   const hasPermEdit = useAccess()?.canEditTag(tagColumn)
 
   const tags = useMemo(() => {
-    if (tagColumn === TagDataTypeEnum.CLIENT) {
+    if (tagColumn === TagDataType.CLIENT) {
       // 客户
-      if (tagType === TagTypeEnum.PERSONTAG) {
+      if (tagType === TagType.PERSONTAG) {
         return props.clientPersonTags
       }
       return props.clientTeamTags
     }
-    if (tagColumn === TagDataTypeEnum.COMPANY) {
+    if (tagColumn === TagDataType.COMPANY) {
       // 单位
-      if (tagType === TagTypeEnum.PERSONTAG) {
+      if (tagType === TagType.PERSONTAG) {
         return props.companyPersonTags
       }
       return props.companyTeamTags
     }
     return []
-  }, [tagType, tagColumn, tagColumn === TagDataTypeEnum.CLIENT ? loadingClient : loadingCompany])
+  }, [tagType, tagColumn, tagColumn === TagDataType.CLIENT ? loadingClient : loadingCompany])
 
   const [checkedIds, setCheckedIds] = useState([])
   useEffect(() => {
@@ -201,8 +201,8 @@ const PersonLabel = props => {
   const [showOkBtn, setShowOkBtn] = useState(false)
   const initData = () => {
     dispatch({
-      type: `${tagColumn === TagDataTypeEnum.COMPANY ? 'company' : 'client'}/${
-        tagType === TagTypeEnum.PERSONTAG ? 'fetchPersonTags' : 'fetchTeamTags'
+      type: `${tagColumn === TagDataType.COMPANY ? 'company' : 'client'}/${
+        tagType === TagType.PERSONTAG ? 'fetchPersonTags' : 'fetchTeamTags'
       }`,
       payload: { tagType, tagColumn }
     })
@@ -236,11 +236,11 @@ const PersonLabel = props => {
         initCallBack={initData}
       />
       <div className="mt-5px">
-        {dropdownType === DropdownTypeEnum.check ? (
+        {dropdownType === DropdownType.check ? (
           <div className="flex justify-between">
-            {tagType === TagTypeEnum.PERSONTAG || hasPermEdit ? (
+            {tagType === TagType.PERSONTAG || hasPermEdit ? (
               <span
-                onClick={() => setDropdownType(DropdownTypeEnum.edit)}
+                onClick={() => setDropdownType(DropdownType.edit)}
                 className="text-primary cursor-pointer ml-3"
               >
                 编辑标签
@@ -257,7 +257,7 @@ const PersonLabel = props => {
           <Button
             size="small"
             className="ml-5px"
-            onClick={() => setDropdownType(DropdownTypeEnum.check)}
+            onClick={() => setDropdownType(DropdownType.check)}
           >
             返回
           </Button>

src/pages/Customer/Company/index.jsx

@@ -1,11 +1,11 @@
 import React, { useState, useEffect, useRef, useMemo } from 'react'
 import { Input, Button, message, Tooltip } from 'antd'
-import { connect, useModel, useAccess } from 'umi'
+import { connect, useModel, useAccess } from '@umijs/max'
 import consts from '@/consts'
 import { queryCompany, apiAddCompany } from '@/services/customer'
 import LazyCascader, { formatValues } from '@/components/LazyCascader'
 import PersonLabel from './components/PersonLabel'
-import { TagTypeEnum, TagDataTypeEnum, LabelModeType } from './components/PersonLabel/const'
+import { TagType, TagDataType, LabelModeType } from './components/PersonLabel/const'
 import { Add, Down, Check, Plus } from '@icon-park/react'
 import { apiBatchLink } from '@/services/customer'
 import { generateFilterField, generateSortField } from '@/utils/utils'
@@ -51,13 +51,13 @@ const Company = props => {
     if (!personTags.length) {
       dispatch({
         type: 'company/fetchPersonTags',
-        payload: { tagType: TagTypeEnum.PERSONTAG, tagColumn: TagDataTypeEnum.COMPANY }
+        payload: { tagType: TagType.PERSONTAG, tagColumn: TagDataType.COMPANY }
       })
     }
     if (!teamTags.length) {
       dispatch({
         type: 'company/fetchTeamTags',
-        payload: { tagType: TagTypeEnum.TEAMTAG, tagColumn: TagDataTypeEnum.COMPANY }
+        payload: { tagType: TagType.TEAMTAG, tagColumn: TagDataType.COMPANY }
       })
     }
     if (!natures.length) {
@@ -201,8 +201,8 @@ const Company = props => {
           <PersonLabel
             dataId={record.id}
             tagIds={record.tagIds}
-            tagType={TagTypeEnum.PERSONTAG}
-            tagColumn={TagDataTypeEnum.COMPANY}
+            tagType={TagType.PERSONTAG}
+            tagColumn={TagDataType.COMPANY}
             checkCallBack={refreshData}
             modeType={LabelModeType.column}>
             <Add theme="filled" size="20" fill="#868e96" className="cursor-pointer" />
@@ -232,8 +232,8 @@ const Company = props => {
           <PersonLabel
             dataId={record.id}
             tagIds={record.tagCooperationIds}
-            tagType={TagTypeEnum.TEAMTAG}
-            tagColumn={TagDataTypeEnum.COMPANY}
+            tagType={TagType.TEAMTAG}
+            tagColumn={TagDataType.COMPANY}
             checkCallBack={refreshData}
             modeType={LabelModeType.column}>
             <Add theme="filled" size="20" fill="#868e96" className="cursor-pointer" />
@@ -375,8 +375,8 @@ const Company = props => {
       const { code = -1 } = await apiBatchLink({
         tagIds: tagState.tagIds,
         dataIds: clientIds,
-        dataType: TagDataTypeEnum.COMPANY,
-        tagType: TagTypeEnum.PERSONTAG
+        dataType: TagDataType.COMPANY,
+        tagType: TagType.PERSONTAG
       })
       if (code !== consts.RET_CODE.SUCCESS) {
         requestSuccess = false
@@ -386,8 +386,8 @@ const Company = props => {
       const { code = -1 } = await apiBatchLink({
         tagIds: tagState.tagCooperationIds,
         dataIds: clientIds,
-        dataType: TagDataTypeEnum.COMPANY,
-        tagType: TagTypeEnum.TEAMTAG
+        dataType: TagDataType.COMPANY,
+        tagType: TagType.TEAMTAG
       })
       if (code !== consts.RET_CODE.SUCCESS) {
         requestSuccess = false
@@ -402,8 +402,8 @@ const Company = props => {
       <div className="flex flex-row">
         <div className="mr-5px">
           <PersonLabel
-            tagType={TagTypeEnum.PERSONTAG}
-            tagColumn={TagDataTypeEnum.COMPANY}
+            tagType={TagType.PERSONTAG}
+            tagColumn={TagDataType.COMPANY}
             checkCallBack={toolbarOptionsChange}
             modeType={LabelModeType.toolbar}>
             {tagState.tagIds.length ? (
@@ -427,8 +427,8 @@ const Company = props => {
         </div>
         <div className="mr-5px">
           <PersonLabel
-            tagType={TagTypeEnum.TEAMTAG}
-            tagColumn={TagDataTypeEnum.COMPANY}
+            tagType={TagType.TEAMTAG}
+            tagColumn={TagDataType.COMPANY}
             checkCallBack={toolbarOptionsChange}
             modeType={LabelModeType.toolbar}>
             {tagState.tagCooperationIds.length ? (

src/pages/Hr/Contacts/components/Organization/index.less

@@ -1,13 +0,0 @@
-.department-node {
-  @apply flex justify-between items-center;
-  .extra {
-    display: none;
-    @apply mr-1 hover:cursor-pointer;
-  }
-
-  &:hover {
-    .extra {
-      display: block;
-    }
-  }
-}

src/pages/Hr/Contacts/components/Organization/index.tsx

@@ -1,7 +1,6 @@
 import { Tree } from 'antd'
 import React, { useEffect } from 'react'
-import { connect } from 'umi'
-import './index.less'
+import { connect } from '@umijs/max'
 const { DirectoryTree } = Tree
 
 const Organization = props => {
@@ -25,7 +24,7 @@ const Organization = props => {
       const newItem = {
         ...item,
         title: (
-          <div className="department-node">
+          <div className="flex justify-between items-center">
             <div>{item.title}</div>
           </div>
         )

src/pages/Hr/Contacts/index.tsx

@@ -3,7 +3,7 @@ import { PageContainer } from '@ant-design/pro-layout'
 import { Input, List, Popover, Space, Tag } from 'antd'
 import type { ColumnsType } from 'antd/lib/table'
 import React, { useEffect, useMemo, useState } from 'react'
-import { connect } from 'umi'
+import { connect } from '@umijs/max'
 import Organization from './components/Organization'
 
 export type ContactsProps = {

src/pages/Hr/Employee/components/DepartmentMenu/index.jsx

@@ -3,7 +3,7 @@ import { Button, message, Tree, TreeSelect, Form, Popconfirm } from 'antd'
 import { DeleteOutlined, PlusOutlined } from '@ant-design/icons'
 import consts from '@/consts'
 import { addDepartment, delDepartment } from '@/services/hr'
-import { connect, useAccess } from 'umi'
+import { connect, useAccess } from '@umijs/max'
 import { ModalForm, ProFormText } from '@ant-design/pro-form'
 import './index.less'
 const { DirectoryTree } = Tree

src/pages/Hr/Employee/components/DepartmentMenu/index.less

@@ -11,8 +11,3 @@
     }
   }
 }
-// .ant-tree-node-selected {
-//   .department-node > .extra {
-//     display: block;
-//   }
-// }

src/pages/Hr/Employee/components/EmployeeDetail/index.jsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react'
 import { Col, Drawer, Row } from 'antd'
 import consts from '@/consts'
-import { connect, useModel } from 'umi'
+import { connect, useModel } from '@umijs/max'
 import EmployeeForm from './Form.jsx'
 import EmployeeLowerList from './LowerList.jsx'
 import EmployeeTabList from './TabList.jsx'

src/pages/Hr/Notification/components/MarkDown/index.js

@@ -1,4 +1,4 @@
-import { dynamic } from 'umi'
+import { dynamic } from '@umijs/max'
 
 export default dynamic({
   loader: async function () {

src/pages/Hr/Notification/components/MessageDetail.jsx

@@ -1,6 +1,6 @@
 import styles from '@/pages/Hr/Notification/index.less'
 import { Drawer, Tag, Typography } from 'antd'
-import { useIntl } from 'umi'
+import { useIntl } from '@umijs/max'
 import MarkDown from 'react-markdown'
 
 const MessageDetail = props => {

src/pages/Hr/Notification/index.jsx

@@ -4,7 +4,7 @@ import InfiniteScroll from 'react-infinite-scroll-component'
 import { queryMessageList, sendMessage } from '@/services/staff'
 import AddMessage from './components/AddMessage'
 import consts from '@/consts'
-import { useRequest, useIntl, useAccess } from 'umi'
+import { useRequest, useIntl, useAccess } from '@umijs/max'
 import ws, { CmdType } from '@/utils/ws'
 import { useModal } from '@/components/ModalStore'
 import MarkDown from 'react-markdown'

src/pages/Product/Cloud/components/Detail/UpgradeModal.jsx

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react'
 import { Modal, Form, Switch, DatePicker } from 'antd'
 // import dayjs from 'dayjs'
 import { dayjsFormat } from '@/utils/utils'
-import { useDispatch } from 'umi'
+import { useDispatch } from '@umijs/max'
 import dayjs from 'dayjs'
 
 export const upgradeTypeEnum = {

src/pages/Product/Cloud/components/Detail/index.jsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react'
 import { Row, Col, Button, Tooltip, Spin, Modal, Drawer } from 'antd'
 import { LinkOne, LinkInterrupt } from '@icon-park/react'
-import { connect, useModel } from 'umi'
+import { connect, useModel } from '@umijs/max'
 import consts from '@/consts'
 import Form from './Form'
 import ClientDetail from '@/pages/Customer/Client/components/ClientDetail/Form'

src/pages/Product/Cloud/index.jsx

@@ -5,7 +5,7 @@ import { dayjsFormat, generateSortField } from '@/utils/utils'
 import { queryRoadpricingList } from '@/services/product'
 import { Input, Tag, Tooltip } from 'antd'
 import consts from '@/consts'
-import { useLocation, useSelector, useDispatch } from 'umi'
+import { useLocation, useSelector, useDispatch } from '@umijs/max'
 import { useModal } from '@/components/ModalStore'
 import { PageContainer } from '@ant-design/pro-layout'
 

src/pages/Product/Lock/LockStore/components/LockDetail/OpreateLock.tsx

@@ -6,7 +6,7 @@ import { apiUpdateLonglelog, queryLock } from '@/services/product'
 import consts from '@/basic/consts'
 import { useDebounceFn } from 'ahooks'
 import { apiSoftwareAddLonglelog, apiReceiveLock } from '@/services/product'
-import { useDispatch, connect } from 'umi'
+import { useDispatch, connect } from '@umijs/max'
 import { ProFormText, ProFormTextArea } from '@ant-design/pro-form'
 import styles from '@/pages/Customer/Company/components/ConnectCompany/index.less'
 

src/pages/Product/Lock/LockStore/components/LockDetail/TabList.tsx

@@ -7,7 +7,7 @@ import { apiSoftwareAddLonglelog, apiDelLonglelog } from '@/services/product'
 import { ProductLabel } from '@/pages/Product/Lock/LockStore'
 import { lockTypeEnum } from './OpreateLock'
 import { servicelogEnum, showProductsStatus, showNewLongleStatus, showMarkStatus } from './consts'
-import { useDispatch } from 'umi'
+import { useDispatch } from '@umijs/max'
 import { useModal } from '@/components/ModalStore'
 import TimeLineList from '@/components/TimeLineList'
 

src/pages/Product/Lock/LockStore/components/LockDetail/index.jsx

@@ -5,7 +5,7 @@ import { apiSoftwareDetail } from '@/services/product'
 import LockForm from './Form'
 import LockLowerList from './LowerList'
 import LockTabList from './TabList'
-import { connect, useModel } from 'umi'
+import { connect, useModel } from '@umijs/max'
 import { Down, Up } from '@icon-park/react'
 import { FlipOverEnum, useFlipOver } from '@/hooks/web/useFlipOver'
 import { WaterMark } from '@ant-design/pro-layout'

src/pages/Product/Lock/LockStore/index.jsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState, useRef } from 'react'
 import { Tag, Tooltip, Input, Button } from 'antd'
 import consts from '@/consts'
-import { connect, useModel } from 'umi'
+import { connect, useModel } from '@umijs/max'
 import { queryLock } from '@/services/product'
 import { generateSortField } from '@/utils/utils'
 import { PermDataTypeEunm } from '@/pages/Customer/Company/components/PermSelect'

src/pages/Product/Road/Enterprise/components/AddEnterprise/EnterpriseSelect.jsx

@@ -1,6 +1,6 @@
 import { Select, Space } from 'antd'
 import React, { useState, useEffect } from 'react'
-import { useDispatch, connect } from 'umi'
+import { useDispatch, connect } from '@umijs/max'
 
 const EnterpriseSelect = ({ compilationv2, disabled, ...otherProps }) => {
   const dispatch = useDispatch()

src/pages/Product/Road/Enterprise/components/AddEnterprise/index.jsx

@@ -1,7 +1,7 @@
 import { ProFormText } from '@ant-design/pro-form'
 import { Button, Form, Input, InputNumber, Modal, Select, Space } from 'antd'
 import React, { useState, useEffect } from 'react'
-import { useDispatch, connect } from 'umi'
+import { useDispatch, connect } from '@umijs/max'
 import EnterpriseSearchSelect from './EnterpriseSearchSelect'
 import { validateEnum } from '@/pages/Customer/Company/components/AddCompany/CompanyFormItem'
 import SearchCompanyInput from './SearchCompanyInput'

src/pages/Product/Road/Enterprise/components/Detail/DeadlineModal.jsx

@@ -3,7 +3,7 @@ import { dayjsFormat } from '@/utils/utils'
 import { DatePicker, Form, Modal } from 'antd'
 import dayjs from 'dayjs'
 import React, { useEffect, useState } from 'react'
-import { useDispatch } from 'umi'
+import { useDispatch } from '@umijs/max'
 
 const DeadlineModal = props => {
   const {

src/pages/Product/Road/Enterprise/components/Detail/index.jsx

@@ -1,7 +1,7 @@
 import { apiRoadcompanyDetail, apiRoadPricingUnLinkCustomer } from '@/services/product'
 import { Button, Col, Drawer, Row, Spin, Tooltip, Modal } from 'antd'
 import React, { useState, useEffect } from 'react'
-import { connect, useModel } from 'umi'
+import { connect, useModel } from '@umijs/max'
 import consts from '@/consts'
 import EnterpriseForm from './Form'
 import EnterpriseLowerList from './LowerList'

src/pages/Product/Road/Enterprise/index.jsx

@@ -4,7 +4,7 @@ import { Button, Input, message, Tag } from 'antd'
 import React, { useState, useRef, useEffect } from 'react'
 import { dayjsFormat, generateSortField } from '@/utils/utils'
 import consts from '@/consts'
-import { connect, useAccess, useDispatch } from 'umi'
+import { connect, useAccess, useDispatch } from '@umijs/max'
 import { useModal } from '@/components/ModalStore'
 import { PageContainer } from '@ant-design/pro-layout'
 

src/pages/Product/Road/Personal/components/Detail/UpgradeModal.jsx

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react'
 import { Modal, Form, Switch, DatePicker } from 'antd'
 // import dayjs from 'dayjs'
 import { dayjsFormat } from '@/utils/utils'
-import { useDispatch } from 'umi'
+import { useDispatch } from '@umijs/max'
 import dayjs from 'dayjs'
 import {
   upgradeTypeEnum,

src/pages/Product/Road/Personal/components/Detail/index.jsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react'
 import { LinkOne, LinkInterrupt } from '@icon-park/react'
 import { Row, Col, Button, Tooltip, Spin, Modal, Drawer } from 'antd'
-import { connect, useModel } from 'umi'
+import { connect, useModel } from '@umijs/max'
 import consts from '@/consts'
 import { apiRoadpricingDetailV2, apiRoadPricingUnLinkClientV2 } from '@/services/product'
 import Form from './Form'

src/pages/Product/Road/Personal/index.jsx

@@ -3,7 +3,7 @@ import BasicTable from '@/components/Table'
 import { dayjsFormat, generateSortField } from '@/utils/utils'
 import { queryRoadpricingListV2 } from '@/services/product'
 import consts from '@/consts'
-import { useLocation, useSelector, useDispatch, connect } from 'umi'
+import { useLocation, useSelector, useDispatch, connect } from '@umijs/max'
 import { Input, Tooltip, Tag } from 'antd'
 import { useModal } from '@/components/ModalStore'
 import { PageContainer } from '@ant-design/pro-layout'

src/pages/User/Login/index.jsx

@@ -1,8 +1,8 @@
 import { LockOutlined, UserOutlined } from '@ant-design/icons'
-import { Alert, message, notification, Tabs } from 'antd'
+import { Alert, notification, Tabs } from 'antd'
 import React, { useState } from 'react'
 import ProForm, { ProFormCheckbox, ProFormText } from '@ant-design/pro-form'
-import { useIntl, history, FormattedMessage, useModel } from 'umi'
+import { useIntl, history, FormattedMessage, useModel } from '@umijs/max'
 
 import styles from './index.less'
 import { apiLogin } from '@/services/login'
@@ -45,8 +45,9 @@ const Login = () => {
   /** 此方法会跳转到 redirect 参数所在的位置 */
   const goto = username => {
     if (!history) return
-    const { query } = history.location
-    const { redirect } = query
+    const searchParams = new URLSearchParams(history.location.search)
+    const redirect = searchParams.get('redirect')
+    console.log(redirect)
     // 清除所有notification
     notification.destroy()
     notification.success({

src/pages/Workbench/Dashboard/components/BusinessChar.jsx

@@ -1,6 +1,6 @@
 import { DualAxes } from '@ant-design/charts'
 import { Card, Select } from 'antd'
-import { connect } from 'umi'
+import { connect } from '@umijs/max'
 import React, { useEffect } from 'react'
 
 const BusinessChar = props => {

src/pages/Workbench/Dashboard/index.tsx

@@ -3,7 +3,7 @@ import ProTable from '@ant-design/pro-table'
 import { Row, Col, Select, Card, Skeleton, TreeSelect } from 'antd'
 import { AddressBook, City, Comment } from '@icon-park/react'
 import consts from '@/consts'
-import { connect, useModel } from 'umi'
+import { connect, useModel } from '@umijs/max'
 import { queryDashboard } from '@/services/dashboard'
 import { queryStaff } from '@/services/staff'
 import LeaderBoard from './components/LeaderBoard'

src/service-worker.js

@@ -1,69 +0,0 @@
-/* eslint-disable no-restricted-globals */
-/* eslint-disable no-underscore-dangle */
-/* globals workbox */
-workbox.core.setCacheNameDetails({
-  prefix: 'antd-pro',
-  suffix: 'v1'
-})
-// Control all opened tabs ASAP
-workbox.clientsClaim()
-
-/**
- * Use precaching list generated by workbox in build process.
- * https://developers.google.com/web/tools/workbox/reference-docs/latest/workbox.precaching
- */
-workbox.precaching.precacheAndRoute(self.__precacheManifest || [])
-
-/**
- * Register a navigation route.
- * https://developers.google.com/web/tools/workbox/modules/workbox-routing#how_to_register_a_navigation_route
- */
-workbox.routing.registerNavigationRoute('/index.html')
-
-/**
- * Use runtime cache:
- * https://developers.google.com/web/tools/workbox/reference-docs/latest/workbox.routing#.registerRoute
- *
- * Workbox provides all common caching strategies including CacheFirst, NetworkFirst etc.
- * https://developers.google.com/web/tools/workbox/reference-docs/latest/workbox.strategies
- */
-
-/**
- * Handle API requests
- */
-workbox.routing.registerRoute(/\/api\//, workbox.strategies.networkFirst())
-
-/**
- * Handle third party requests
- */
-workbox.routing.registerRoute(
-  /^https:\/\/gw\.alipayobjects\.com\//,
-  workbox.strategies.networkFirst()
-)
-workbox.routing.registerRoute(
-  /^https:\/\/cdnjs\.cloudflare\.com\//,
-  workbox.strategies.networkFirst()
-)
-workbox.routing.registerRoute(/\/color.less/, workbox.strategies.networkFirst())
-
-/**
- * Response to client after skipping waiting with MessageChannel
- */
-addEventListener('message', event => {
-  const replyPort = event.ports[0]
-  const message = event.data
-  if (replyPort && message && message.type === 'skip-waiting') {
-    event.waitUntil(
-      self.skipWaiting().then(
-        () =>
-          replyPort.postMessage({
-            error: null
-          }),
-        error =>
-          replyPort.postMessage({
-            error
-          })
-      )
-    )
-  }
-})

src/services/common.ts

@@ -1,4 +1,4 @@
-import { request } from 'umi'
+import { request } from '@umijs/max'
 
 /**
  * 编辑表单提交

src/services/customer.ts

@@ -1,4 +1,4 @@
-import { request } from 'umi'
+import { request } from '@umijs/max'
 
 /**
  * 获取单位列表

src/services/dashboard.ts

@@ -1,4 +1,4 @@
-import { request } from 'umi'
+import { request } from '@umijs/max'
 
 /**
  * 获取仪表盘数据

src/services/hr.ts

@@ -1,4 +1,4 @@
-import { request } from 'umi'
+import { request } from '@umijs/max'
 
 /**
  * @description 获取部门列表

src/services/login.ts

@@ -1,4 +1,4 @@
-import { request } from 'umi'
+import { request } from '@umijs/max'
 
 /**
  * 请求登录

src/services/product.ts

@@ -1,4 +1,4 @@
-import { request } from 'umi'
+import { request } from '@umijs/max'
 
 /** 请求单位列表 */
 export async function queryLock(params) {

src/services/staff.ts

@@ -1,4 +1,4 @@
-import { request } from 'umi'
+import { request } from '@umijs/max'
 
 /**
  * 获取员工列表

src/services/statistic.ts

@@ -1,4 +1,4 @@
-import { request } from 'umi'
+import { request } from '@umijs/max'
 
 /** 获取软件锁统计选项部门/员工下的列表 */
 export async function queryUsageSelectOptions() {

src/services/user.ts

@@ -1,4 +1,4 @@
-import { request } from 'umi'
+import { request } from '@umijs/max'
 
 /**
  * 获取当前用户信息

tests/PuppeteerEnvironment.js

@@ -1,41 +0,0 @@
-// eslint-disable-next-line
-const NodeEnvironment = require('jest-environment-node');
-const getBrowser = require('./getBrowser');
-
-class PuppeteerEnvironment extends NodeEnvironment {
-  // Jest is not available here, so we have to reverse engineer
-  // the setTimeout function, see https://github.com/facebook/jest/blob/v23.1.0/packages/jest-runtime/src/index.js#L823
-  setTimeout(timeout) {
-    if (this.global.jasmine) {
-      // eslint-disable-next-line no-underscore-dangle
-      this.global.jasmine.DEFAULT_TIMEOUT_INTERVAL = timeout;
-    } else {
-      this.global[Symbol.for('TEST_TIMEOUT_SYMBOL')] = timeout;
-    }
-  }
-
-  async setup() {
-    const browser = await getBrowser();
-    const page = await browser.newPage();
-    this.global.browser = browser;
-    this.global.page = page;
-  }
-
-  async teardown() {
-    const { page, browser } = this.global;
-
-    if (page) {
-      await page.close();
-    }
-
-    if (browser) {
-      await browser.disconnect();
-    }
-
-    if (browser) {
-      await browser.close();
-    }
-  }
-}
-
-module.exports = PuppeteerEnvironment;

tests/beforeTest.js

@@ -1,39 +0,0 @@
-/* eslint-disable global-require */
-/* eslint-disable import/no-extraneous-dependencies */
-const { execSync } = require('child_process');
-const { join } = require('path');
-const findChrome = require('carlo/lib/find_chrome');
-const detectInstaller = require('detect-installer');
-
-const installPuppeteer = () => {
-  // find can use package manger
-  const packages = detectInstaller(join(__dirname, '../../'));
-  // get installed package manger
-  const packageName = packages.find(detectInstaller.hasPackageCommand) || 'npm';
-  console.log(`🤖 will use ${packageName} install puppeteer`);
-  const command = `${packageName} ${packageName.includes('yarn') ? 'add' : 'i'} puppeteer`;
-  execSync(command, {
-    stdio: 'inherit',
-  });
-};
-
-const initPuppeteer = async () => {
-  try {
-    // eslint-disable-next-line import/no-unresolved
-    const findChromePath = await findChrome({});
-    const { executablePath } = findChromePath;
-    console.log(`🧲 find you browser in ${executablePath}`);
-    return;
-  } catch (error) {
-    console.log('🧲 no find chrome');
-  }
-
-  try {
-    require.resolve('puppeteer');
-  } catch (error) {
-    // need install puppeteer
-    await installPuppeteer();
-  }
-};
-
-initPuppeteer();

tests/getBrowser.js

@@ -1,45 +0,0 @@
-/* eslint-disable global-require */
-/* eslint-disable import/no-extraneous-dependencies */
-const findChrome = require('carlo/lib/find_chrome');
-
-const getBrowser = async () => {
-  try {
-    // eslint-disable-next-line import/no-unresolved
-    const puppeteer = require('puppeteer');
-    const browser = await puppeteer.launch({
-      args: [
-        '--disable-gpu',
-        '--disable-dev-shm-usage',
-        '--no-first-run',
-        '--no-zygote',
-        '--no-sandbox',
-      ],
-    });
-    return browser;
-  } catch (error) {
-    // console.log(error)
-  }
-
-  try {
-    // eslint-disable-next-line import/no-unresolved
-    const puppeteer = require('puppeteer-core');
-    const findChromePath = await findChrome({});
-    const { executablePath } = findChromePath;
-    const browser = await puppeteer.launch({
-      executablePath,
-      args: [
-        '--disable-gpu',
-        '--disable-dev-shm-usage',
-        '--no-first-run',
-        '--no-zygote',
-        '--no-sandbox',
-      ],
-    });
-    return browser;
-  } catch (error) {
-    console.log('🧲 no find chrome');
-  }
-  throw new Error('no find puppeteer');
-};
-
-module.exports = getBrowser;

tests/run-tests.js

@@ -1,52 +0,0 @@
-/* eslint-disable eslint-comments/disable-enable-pair */
-/* eslint-disable @typescript-eslint/no-var-requires */
-/* eslint-disable eslint-comments/no-unlimited-disable */
-const { spawn } = require('child_process');
-// eslint-disable-next-line import/no-extraneous-dependencies
-const { kill } = require('cross-port-killer');
-
-const env = Object.create(process.env);
-env.BROWSER = 'none';
-env.TEST = true;
-env.UMI_UI = 'none';
-env.PROGRESS = 'none';
-// flag to prevent multiple test
-let once = false;
-
-const startServer = spawn(/^win/.test(process.platform) ? 'npm.cmd' : 'npm', ['start'], {
-  env,
-});
-
-startServer.stderr.on('data', (data) => {
-  // eslint-disable-next-line
-  console.log(data.toString());
-});
-
-startServer.on('exit', () => {
-  kill(process.env.PORT || 8000);
-});
-
-console.log('Starting development server for e2e tests...');
-startServer.stdout.on('data', (data) => {
-  console.log(data.toString());
-  // hack code , wait umi
-  if (
-    (!once && data.toString().indexOf('Compiled successfully') >= 0) ||
-    data.toString().indexOf('Theme generated successfully') >= 0
-  ) {
-    // eslint-disable-next-line
-    once = true;
-    console.log('Development server is started, ready to run tests.');
-    const testCmd = spawn(
-      /^win/.test(process.platform) ? 'npm.cmd' : 'npm',
-      ['test', '--', '--maxWorkers=1', '--runInBand'],
-      {
-        stdio: 'inherit',
-      },
-    );
-    testCmd.on('exit', (code) => {
-      startServer.kill();
-      process.exit(code);
-    });
-  }
-});

unocss.config.ts

@@ -0,0 +1,77 @@
+import { defineConfig, presetWind } from 'unocss'
+import proSettings from './config/defaultSettings'
+export function createConfig({ dev = true } = {}) {
+  return defineConfig({
+    envMode: dev ? 'dev' : 'build',
+    presets: [presetWind()],
+    theme: {
+      colors: {
+        primary: proSettings.primaryColor
+      },
+      screens: {
+        sm: '576px',
+        md: '768px',
+        lg: '992px',
+        xl: '1200px',
+        '2xl': '1600px'
+      },
+      boxShadow: {
+        card: '0 0 13px 0 rgba(74, 53, 107, 0.08)'
+      }
+    }
+    // transformers: [transformerDirectives()]
+    // rules: [createEnterPlugin()]
+    // variants: [createEnterPlugin()]
+  })
+}
+
+export default createConfig()
+/**
+ * Used for animation when the element is displayed
+ * @param maxOutput The larger the maxOutput output, the larger the generated css volume
+ */
+function createEnterPlugin(maxOutput = 10) {
+  const createCss = (index: number, d = 'x') => {
+    const upd = d.toUpperCase()
+    return {
+      [`*> .enter-${d}:nth-child(${index})`]: {
+        transform: `translate${upd}(50px)`
+      },
+      [`*> .-enter-${d}:nth-child(${index})`]: {
+        transform: `translate${upd}(-50px)`
+      },
+      [`* > .enter-${d}:nth-child(${index}),* > .-enter-${d}:nth-child(${index})`]: {
+        'z-index': `${10 - index}`,
+        opacity: '0',
+        animation: `enter-${d}-animation 0.4s ease-in-out 0.3s`,
+        'animation-fill-mode': 'forwards',
+        'animation-delay': `${(index * 1) / 10}s`
+      }
+    }
+  }
+  const handler = () => {
+    const addRawCss = {}
+    for (let index = 1; index < maxOutput; index++) {
+      Object.assign(m, {
+        ...createCss(index, 'x'),
+        ...createCss(index, 'y')
+      })
+    }
+    return {
+      ...addRawCss,
+      [`@keyframes enter-x-animation`]: {
+        to: {
+          opacity: '1',
+          transform: 'translateX(0)'
+        }
+      },
+      [`@keyframes enter-y-animation`]: {
+        to: {
+          opacity: '1',
+          transform: 'translateY(0)'
+        }
+      }
+    }
+  }
+  return [/^enter-(x|y)/, () => handler()]
+}