feats

jsconfig.json

+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}

package.json

     "@ant-design/pro-components": "^2.3.13",
     "@zjxpcyc/react-tiny-store": "^2.0.1",
     "antd": "^4.23.4",
+    "classnames": "^2.3.2",
     "echarts": "^5.4.0",
     "react": "18.1.0",
     "react-dom": "18.1.0",
     "react-helmet": "^6.1.0",
-    "react-router-dom": "6",
+    "react-router-dom": "^6.4.2",
     "react-transition-group": "^4.4.5"
   },
   "devDependencies": {

pnpm-lock.yaml

   '@vitejs/plugin-react': ^2.0.0
   '@zjxpcyc/react-tiny-store': ^2.0.1
   antd: ^4.23.4
+  classnames: ^2.3.2
   echarts: ^5.4.0
   less: ^4.1.3
   react: 18.1.0
   react-dom: 18.1.0
   react-helmet: ^6.1.0
-  react-router-dom: '6'
+  react-router-dom: ^6.4.2
   react-transition-group: ^4.4.5
   vite: ^3.0.0
   vite-plugin-imp: ^2.2.0
   '@ant-design/pro-components': registry.npmmirror.com/@ant-design/pro-components/2.3.13_4ahbtacxshq5zvmbq25uec6w6a
   '@zjxpcyc/react-tiny-store': registry.npmmirror.com/@zjxpcyc/react-tiny-store/2.0.1
   antd: registry.npmmirror.com/antd/4.23.4_ef5jwxihqo6n7gxfmzogljlgcm
+  classnames: registry.npmmirror.com/classnames/2.3.2
   echarts: registry.npmmirror.com/echarts/5.4.0
   react: registry.npmmirror.com/react/18.1.0
   react-dom: registry.npmmirror.com/react-dom/18.1.0_react@18.1.0
   react-helmet: registry.npmmirror.com/react-helmet/6.1.0_react@18.1.0
-  react-router-dom: registry.npmmirror.com/react-router-dom/6.3.0_ef5jwxihqo6n7gxfmzogljlgcm
+  react-router-dom: registry.npmmirror.com/react-router-dom/6.4.2_ef5jwxihqo6n7gxfmzogljlgcm
   react-transition-group: registry.npmmirror.com/react-transition-group/4.4.5_ef5jwxihqo6n7gxfmzogljlgcm
 
 devDependencies:
       '@ant-design/colors': registry.npmmirror.com/@ant-design/colors/6.0.0
       '@ant-design/icons-svg': registry.npmmirror.com/@ant-design/icons-svg/4.2.1
       '@babel/runtime': registry.npmmirror.com/@babel/runtime/7.18.9
-      classnames: registry.npmmirror.com/classnames/2.3.1
+      classnames: registry.npmmirror.com/classnames/2.3.2
       rc-util: registry.npmmirror.com/rc-util/5.23.0_ef5jwxihqo6n7gxfmzogljlgcm
       react: registry.npmmirror.com/react/18.1.0
       react-dom: registry.npmmirror.com/react-dom/18.1.0_react@18.1.0
       react: '>=16.9.0'
     dependencies:
       '@babel/runtime': registry.npmmirror.com/@babel/runtime/7.18.9
-      classnames: registry.npmmirror.com/classnames/2.3.1
+      classnames: registry.npmmirror.com/classnames/2.3.2
       json2mq: registry.npmmirror.com/json2mq/0.2.0
       lodash: registry.npmmirror.com/lodash/4.17.21
       react: registry.npmmirror.com/react/18.1.0
     version: 6.1.0
     dev: false
 
+  registry.npmmirror.com/@remix-run/router/1.0.2:
+    resolution: {integrity: sha512-GRSOFhJzjGN+d4sKHTMSvNeUPoZiDHWmRnXfzaxrqe7dE/Nzlc8BiMSJdLDESZlndM7jIUrZ/F4yWqVYlI0rwQ==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@remix-run/router/-/router-1.0.2.tgz}
+    name: '@remix-run/router'
+    version: 1.0.2
+    engines: {node: '>=14'}
+    dev: false
+
   registry.npmmirror.com/@types/prop-types/15.7.5:
     resolution: {integrity: sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@types/prop-types/-/prop-types-15.7.5.tgz}
     name: '@types/prop-types'
       '@ant-design/react-slick': registry.npmmirror.com/@ant-design/react-slick/0.29.2_react@18.1.0
       '@babel/runtime': registry.npmmirror.com/@babel/runtime/7.18.9
       '@ctrl/tinycolor': registry.npmmirror.com/@ctrl/tinycolor/3.4.1
-      classnames: registry.npmmirror.com/classnames/2.3.1
+      classnames: registry.npmmirror.com/classnames/2.3.2
       copy-to-clipboard: registry.npmmirror.com/copy-to-clipboard/3.3.2
       lodash: registry.npmmirror.com/lodash/4.17.21
       memoize-one: registry.npmmirror.com/memoize-one/6.0.0
       supports-color: registry.npmmirror.com/supports-color/7.2.0
     dev: true
 
-  registry.npmmirror.com/classnames/2.3.1:
-    resolution: {integrity: sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/classnames/-/classnames-2.3.1.tgz}
-    name: classnames
-    version: 2.3.1
-    dev: false
-
   registry.npmmirror.com/classnames/2.3.2:
     resolution: {integrity: sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/classnames/-/classnames-2.3.2.tgz}
     name: classnames
       function-bind: registry.npmmirror.com/function-bind/1.1.1
     dev: true
 
-  registry.npmmirror.com/history/5.3.0:
-    resolution: {integrity: sha512-ZqaKwjjrAYUYfLG+htGaIIZ4nioX2L70ZUMIFysS3xvBsSG4x/n1V6TXV3N8ZYNuFGlDirFg32T7B6WOUPDYcQ==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/history/-/history-5.3.0.tgz}
-    name: history
-    version: 5.3.0
-    dependencies:
-      '@babel/runtime': registry.npmmirror.com/@babel/runtime/7.18.9
-    dev: false
-
   registry.npmmirror.com/iconv-lite/0.6.3:
     resolution: {integrity: sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/iconv-lite/-/iconv-lite-0.6.3.tgz}
     name: iconv-lite
       react-dom: '>=16.9.0'
     dependencies:
       '@babel/runtime': registry.npmmirror.com/@babel/runtime/7.18.9
-      classnames: registry.npmmirror.com/classnames/2.3.1
+      classnames: registry.npmmirror.com/classnames/2.3.2
       dom-align: registry.npmmirror.com/dom-align/1.12.3
       lodash: registry.npmmirror.com/lodash/4.17.21
       rc-util: registry.npmmirror.com/rc-util/5.24.4_ef5jwxihqo6n7gxfmzogljlgcm
     dependencies:
       '@babel/runtime': registry.npmmirror.com/@babel/runtime/7.18.9
       array-tree-filter: registry.npmmirror.com/array-tree-filter/2.1.0
-      classnames: registry.npmmirror.com/classnames/2.3.1
+      classnames: registry.npmmirror.com/classnames/2.3.2
       rc-select: registry.npmmirror.com/rc-select/14.1.13_ef5jwxihqo6n7gxfmzogljlgcm
       rc-tree: registry.npmmirror.com/rc-tree/5.7.0_ef5jwxihqo6n7gxfmzogljlgcm
       rc-util: registry.npmmirror.com/rc-util/5.23.0_ef5jwxihqo6n7gxfmzogljlgcm
       react-dom: '>=16.9.0'
     dependencies:
       '@babel/runtime': registry.npmmirror.com/@babel/runtime/7.18.9
-      classnames: registry.npmmirror.com/classnames/2.3.1
+      classnames: registry.npmmirror.com/classnames/2.3.2
       react: registry.npmmirror.com/react/18.1.0
       react-dom: registry.npmmirror.com/react-dom/18.1.0_react@18.1.0
     dev: false
       react-dom: '>=16.9.0'
     dependencies:
       '@babel/runtime': registry.npmmirror.com/@babel/runtime/7.18.9
-      classnames: registry.npmmirror.com/classnames/2.3.1
+      classnames: registry.npmmirror.com/classnames/2.3.2
       rc-motion: registry.npmmirror.com/rc-motion/2.6.2_ef5jwxihqo6n7gxfmzogljlgcm
       rc-util: registry.npmmirror.com/rc-util/5.24.4_ef5jwxihqo6n7gxfmzogljlgcm
       react: registry.npmmirror.com/react/18.1.0
       react-dom: '>=16.9.0'
     dependencies:
       '@babel/runtime': registry.npmmirror.com/@babel/runtime/7.18.9
-      classnames: registry.npmmirror.com/classnames/2.3.1
+      classnames: registry.npmmirror.com/classnames/2.3.2
       rc-motion: registry.npmmirror.com/rc-motion/2.6.2_ef5jwxihqo6n7gxfmzogljlgcm
       rc-util: registry.npmmirror.com/rc-util/5.24.4_ef5jwxihqo6n7gxfmzogljlgcm
       react: registry.npmmirror.com/react/18.1.0
       react-dom: '>=16.9.0'
     dependencies:
       '@babel/runtime': registry.npmmirror.com/@babel/runtime/7.18.9
-      classnames: registry.npmmirror.com/classnames/2.3.1
+      classnames: registry.npmmirror.com/classnames/2.3.2
       rc-motion: registry.npmmirror.com/rc-motion/2.6.2_ef5jwxihqo6n7gxfmzogljlgcm
       rc-util: registry.npmmirror.com/rc-util/5.23.0_ef5jwxihqo6n7gxfmzogljlgcm
       react: registry.npmmirror.com/react/18.1.0
       react-dom: '>=16.11.0'
     dependencies:
       '@babel/runtime': registry.npmmirror.com/@babel/runtime/7.18.9
-      classnames: registry.npmmirror.com/classnames/2.3.1
+      classnames: registry.npmmirror.com/classnames/2.3.2
       rc-trigger: registry.npmmirror.com/rc-trigger/5.3.1_ef5jwxihqo6n7gxfmzogljlgcm
       rc-util: registry.npmmirror.com/rc-util/5.24.4_ef5jwxihqo6n7gxfmzogljlgcm
       react: registry.npmmirror.com/react/18.1.0
       react-dom: '>=16.9.0'
     dependencies:
       '@babel/runtime': registry.npmmirror.com/@babel/runtime/7.18.9
-      classnames: registry.npmmirror.com/classnames/2.3.1
+      classnames: registry.npmmirror.com/classnames/2.3.2
       rc-dialog: registry.npmmirror.com/rc-dialog/8.9.0_ef5jwxihqo6n7gxfmzogljlgcm
       rc-util: registry.npmmirror.com/rc-util/5.24.4_ef5jwxihqo6n7gxfmzogljlgcm
       react: registry.npmmirror.com/react/18.1.0
       react-dom: '>=16.9.0'
     dependencies:
       '@babel/runtime': registry.npmmirror.com/@babel/runtime/7.18.9
-      classnames: registry.npmmirror.com/classnames/2.3.1
+      classnames: registry.npmmirror.com/classnames/2.3.2
       rc-util: registry.npmmirror.com/rc-util/5.23.0_ef5jwxihqo6n7gxfmzogljlgcm
       react: registry.npmmirror.com/react/18.1.0
       react-dom: registry.npmmirror.com/react-dom/18.1.0_react@18.1.0
       react-dom: '>=16.0.0'
     dependencies:
       '@babel/runtime': registry.npmmirror.com/@babel/runtime/7.18.9
-      classnames: registry.npmmirror.com/classnames/2.3.1
+      classnames: registry.npmmirror.com/classnames/2.3.2
       rc-util: registry.npmmirror.com/rc-util/5.23.0_ef5jwxihqo6n7gxfmzogljlgcm
       react: registry.npmmirror.com/react/18.1.0
       react-dom: registry.npmmirror.com/react-dom/18.1.0_react@18.1.0
       react-dom: '>=16.9.0'
     dependencies:
       '@babel/runtime': registry.npmmirror.com/@babel/runtime/7.18.9
-      classnames: registry.npmmirror.com/classnames/2.3.1
+      classnames: registry.npmmirror.com/classnames/2.3.2
       rc-menu: registry.npmmirror.com/rc-menu/9.6.4_ef5jwxihqo6n7gxfmzogljlgcm
       rc-textarea: registry.npmmirror.com/rc-textarea/0.3.7_ef5jwxihqo6n7gxfmzogljlgcm
       rc-trigger: registry.npmmirror.com/rc-trigger/5.3.1_ef5jwxihqo6n7gxfmzogljlgcm
       react-dom: '>=16.9.0'
     dependencies:
       '@babel/runtime': registry.npmmirror.com/@babel/runtime/7.18.9
-      classnames: registry.npmmirror.com/classnames/2.3.1
+      classnames: registry.npmmirror.com/classnames/2.3.2
       rc-motion: registry.npmmirror.com/rc-motion/2.6.2_ef5jwxihqo6n7gxfmzogljlgcm
       rc-overflow: registry.npmmirror.com/rc-overflow/1.2.8_ef5jwxihqo6n7gxfmzogljlgcm
       rc-trigger: registry.npmmirror.com/rc-trigger/5.3.1_ef5jwxihqo6n7gxfmzogljlgcm
       react-dom: '>=16.9.0'
     dependencies:
       '@babel/runtime': registry.npmmirror.com/@babel/runtime/7.18.9
-      classnames: registry.npmmirror.com/classnames/2.3.1
+      classnames: registry.npmmirror.com/classnames/2.3.2
       rc-util: registry.npmmirror.com/rc-util/5.24.4_ef5jwxihqo6n7gxfmzogljlgcm
       react: registry.npmmirror.com/react/18.1.0
       react-dom: registry.npmmirror.com/react-dom/18.1.0_react@18.1.0
       react-dom: '>=16.9.0'
     dependencies:
       '@babel/runtime': registry.npmmirror.com/@babel/runtime/7.18.9
-      classnames: registry.npmmirror.com/classnames/2.3.1
+      classnames: registry.npmmirror.com/classnames/2.3.2
       rc-motion: registry.npmmirror.com/rc-motion/2.6.2_ef5jwxihqo6n7gxfmzogljlgcm
       rc-util: registry.npmmirror.com/rc-util/5.24.4_ef5jwxihqo6n7gxfmzogljlgcm
       react: registry.npmmirror.com/react/18.1.0
       react-dom: '>=16.9.0'
     dependencies:
       '@babel/runtime': registry.npmmirror.com/@babel/runtime/7.18.9
-      classnames: registry.npmmirror.com/classnames/2.3.1
+      classnames: registry.npmmirror.com/classnames/2.3.2
       rc-resize-observer: registry.npmmirror.com/rc-resize-observer/1.2.0_ef5jwxihqo6n7gxfmzogljlgcm
       rc-util: registry.npmmirror.com/rc-util/5.23.0_ef5jwxihqo6n7gxfmzogljlgcm
       react: registry.npmmirror.com/react/18.1.0
       react-dom: '>=16.9.0'
     dependencies:
       '@babel/runtime': registry.npmmirror.com/@babel/runtime/7.18.9
-      classnames: registry.npmmirror.com/classnames/2.3.1
+      classnames: registry.npmmirror.com/classnames/2.3.2
       react: registry.npmmirror.com/react/18.1.0
       react-dom: registry.npmmirror.com/react-dom/18.1.0_react@18.1.0
     dev: false
       react-dom: '>=16.9.0'
     dependencies:
       '@babel/runtime': registry.npmmirror.com/@babel/runtime/7.18.9
-      classnames: registry.npmmirror.com/classnames/2.3.1
+      classnames: registry.npmmirror.com/classnames/2.3.2
       date-fns: registry.npmmirror.com/date-fns/2.29.1
       dayjs: registry.npmmirror.com/dayjs/1.11.4
       moment: registry.npmmirror.com/moment/2.29.4
       react-dom: '>=16.9.0'
     dependencies:
       '@babel/runtime': registry.npmmirror.com/@babel/runtime/7.18.9
-      classnames: registry.npmmirror.com/classnames/2.3.1
+      classnames: registry.npmmirror.com/classnames/2.3.2
       rc-util: registry.npmmirror.com/rc-util/5.24.4_ef5jwxihqo6n7gxfmzogljlgcm
       react: registry.npmmirror.com/react/18.1.0
       react-dom: registry.npmmirror.com/react-dom/18.1.0_react@18.1.0
       react-dom: '>=16.9.0'
     dependencies:
       '@babel/runtime': registry.npmmirror.com/@babel/runtime/7.18.9
-      classnames: registry.npmmirror.com/classnames/2.3.1
+      classnames: registry.npmmirror.com/classnames/2.3.2
       rc-util: registry.npmmirror.com/rc-util/5.24.4_ef5jwxihqo6n7gxfmzogljlgcm
       react: registry.npmmirror.com/react/18.1.0
       react-dom: registry.npmmirror.com/react-dom/18.1.0_react@18.1.0
       react-dom: '>=16.9.0'
     dependencies:
       '@babel/runtime': registry.npmmirror.com/@babel/runtime/7.18.9
-      classnames: registry.npmmirror.com/classnames/2.3.1
+      classnames: registry.npmmirror.com/classnames/2.3.2
       rc-util: registry.npmmirror.com/rc-util/5.23.0_ef5jwxihqo6n7gxfmzogljlgcm
       react: registry.npmmirror.com/react/18.1.0
       react-dom: registry.npmmirror.com/react-dom/18.1.0_react@18.1.0
       react-dom: '>=16.0.0'
     dependencies:
       '@babel/runtime': registry.npmmirror.com/@babel/runtime/7.18.9
-      classnames: registry.npmmirror.com/classnames/2.3.1
+      classnames: registry.npmmirror.com/classnames/2.3.2
       rc-motion: registry.npmmirror.com/rc-motion/2.6.2_ef5jwxihqo6n7gxfmzogljlgcm
       rc-util: registry.npmmirror.com/rc-util/5.24.4_ef5jwxihqo6n7gxfmzogljlgcm
       react: registry.npmmirror.com/react/18.1.0
       react-dom: '*'
     dependencies:
       '@babel/runtime': registry.npmmirror.com/@babel/runtime/7.18.9
-      classnames: registry.npmmirror.com/classnames/2.3.1
+      classnames: registry.npmmirror.com/classnames/2.3.2
       rc-motion: registry.npmmirror.com/rc-motion/2.6.2_ef5jwxihqo6n7gxfmzogljlgcm
       rc-overflow: registry.npmmirror.com/rc-overflow/1.2.8_ef5jwxihqo6n7gxfmzogljlgcm
       rc-trigger: registry.npmmirror.com/rc-trigger/5.3.1_ef5jwxihqo6n7gxfmzogljlgcm
       react-dom: '>=16.9.0'
     dependencies:
       '@babel/runtime': registry.npmmirror.com/@babel/runtime/7.18.9
-      classnames: registry.npmmirror.com/classnames/2.3.1
+      classnames: registry.npmmirror.com/classnames/2.3.2
       rc-util: registry.npmmirror.com/rc-util/5.24.4_ef5jwxihqo6n7gxfmzogljlgcm
       react: registry.npmmirror.com/react/18.1.0
       react-dom: registry.npmmirror.com/react-dom/18.1.0_react@18.1.0
       react-dom: '>=16.9.0'
     dependencies:
       '@babel/runtime': registry.npmmirror.com/@babel/runtime/7.18.9
-      classnames: registry.npmmirror.com/classnames/2.3.1
+      classnames: registry.npmmirror.com/classnames/2.3.2
       rc-util: registry.npmmirror.com/rc-util/5.24.4_ef5jwxihqo6n7gxfmzogljlgcm
       react: registry.npmmirror.com/react/18.1.0
       react-dom: registry.npmmirror.com/react-dom/18.1.0_react@18.1.0
       react-dom: '>=16.9.0'
     dependencies:
       '@babel/runtime': registry.npmmirror.com/@babel/runtime/7.18.9
-      classnames: registry.npmmirror.com/classnames/2.3.1
+      classnames: registry.npmmirror.com/classnames/2.3.2
       rc-util: registry.npmmirror.com/rc-util/5.24.4_ef5jwxihqo6n7gxfmzogljlgcm
       react: registry.npmmirror.com/react/18.1.0
       react-dom: registry.npmmirror.com/react-dom/18.1.0_react@18.1.0
       react-dom: '>=16.9.0'
     dependencies:
       '@babel/runtime': registry.npmmirror.com/@babel/runtime/7.18.9
-      classnames: registry.npmmirror.com/classnames/2.3.1
+      classnames: registry.npmmirror.com/classnames/2.3.2
       rc-resize-observer: registry.npmmirror.com/rc-resize-observer/1.2.0_ef5jwxihqo6n7gxfmzogljlgcm
       rc-util: registry.npmmirror.com/rc-util/5.23.0_ef5jwxihqo6n7gxfmzogljlgcm
       react: registry.npmmirror.com/react/18.1.0
       react-dom: '>=16.9.0'
     dependencies:
       '@babel/runtime': registry.npmmirror.com/@babel/runtime/7.18.9
-      classnames: registry.npmmirror.com/classnames/2.3.1
+      classnames: registry.npmmirror.com/classnames/2.3.2
       rc-dropdown: registry.npmmirror.com/rc-dropdown/4.0.1_ef5jwxihqo6n7gxfmzogljlgcm
       rc-menu: registry.npmmirror.com/rc-menu/9.6.4_ef5jwxihqo6n7gxfmzogljlgcm
       rc-motion: registry.npmmirror.com/rc-motion/2.6.2_ef5jwxihqo6n7gxfmzogljlgcm
       react-dom: '>=16.9.0'
     dependencies:
       '@babel/runtime': registry.npmmirror.com/@babel/runtime/7.18.9
-      classnames: registry.npmmirror.com/classnames/2.3.1
+      classnames: registry.npmmirror.com/classnames/2.3.2
       rc-resize-observer: registry.npmmirror.com/rc-resize-observer/1.2.0_ef5jwxihqo6n7gxfmzogljlgcm
       rc-util: registry.npmmirror.com/rc-util/5.24.4_ef5jwxihqo6n7gxfmzogljlgcm
       react: registry.npmmirror.com/react/18.1.0
       react-dom: '>=16.9.0'
     dependencies:
       '@babel/runtime': registry.npmmirror.com/@babel/runtime/7.18.9
-      classnames: registry.npmmirror.com/classnames/2.3.1
+      classnames: registry.npmmirror.com/classnames/2.3.2
       rc-trigger: registry.npmmirror.com/rc-trigger/5.3.1_ef5jwxihqo6n7gxfmzogljlgcm
       react: registry.npmmirror.com/react/18.1.0
       react-dom: registry.npmmirror.com/react-dom/18.1.0_react@18.1.0
       react-dom: '*'
     dependencies:
       '@babel/runtime': registry.npmmirror.com/@babel/runtime/7.18.9
-      classnames: registry.npmmirror.com/classnames/2.3.1
+      classnames: registry.npmmirror.com/classnames/2.3.2
       rc-select: registry.npmmirror.com/rc-select/14.1.13_ef5jwxihqo6n7gxfmzogljlgcm
       rc-tree: registry.npmmirror.com/rc-tree/5.7.0_ef5jwxihqo6n7gxfmzogljlgcm
       rc-util: registry.npmmirror.com/rc-util/5.23.0_ef5jwxihqo6n7gxfmzogljlgcm
       react-dom: '*'
     dependencies:
       '@babel/runtime': registry.npmmirror.com/@babel/runtime/7.18.9
-      classnames: registry.npmmirror.com/classnames/2.3.1
+      classnames: registry.npmmirror.com/classnames/2.3.2
       rc-motion: registry.npmmirror.com/rc-motion/2.6.2_ef5jwxihqo6n7gxfmzogljlgcm
       rc-util: registry.npmmirror.com/rc-util/5.23.0_ef5jwxihqo6n7gxfmzogljlgcm
       rc-virtual-list: registry.npmmirror.com/rc-virtual-list/3.4.8_ef5jwxihqo6n7gxfmzogljlgcm
       react-dom: '>=16.9.0'
     dependencies:
       '@babel/runtime': registry.npmmirror.com/@babel/runtime/7.18.9
-      classnames: registry.npmmirror.com/classnames/2.3.1
+      classnames: registry.npmmirror.com/classnames/2.3.2
       rc-align: registry.npmmirror.com/rc-align/4.0.12_ef5jwxihqo6n7gxfmzogljlgcm
       rc-motion: registry.npmmirror.com/rc-motion/2.6.2_ef5jwxihqo6n7gxfmzogljlgcm
       rc-util: registry.npmmirror.com/rc-util/5.24.4_ef5jwxihqo6n7gxfmzogljlgcm
       react-dom: '>=16.9.0'
     dependencies:
       '@babel/runtime': registry.npmmirror.com/@babel/runtime/7.18.9
-      classnames: registry.npmmirror.com/classnames/2.3.1
+      classnames: registry.npmmirror.com/classnames/2.3.2
       rc-util: registry.npmmirror.com/rc-util/5.24.4_ef5jwxihqo6n7gxfmzogljlgcm
       react: registry.npmmirror.com/react/18.1.0
       react-dom: registry.npmmirror.com/react-dom/18.1.0_react@18.1.0
       react: '*'
       react-dom: '*'
     dependencies:
-      classnames: registry.npmmirror.com/classnames/2.3.1
+      classnames: registry.npmmirror.com/classnames/2.3.2
       rc-resize-observer: registry.npmmirror.com/rc-resize-observer/1.2.0_ef5jwxihqo6n7gxfmzogljlgcm
       rc-util: registry.npmmirror.com/rc-util/5.23.0_ef5jwxihqo6n7gxfmzogljlgcm
       react: registry.npmmirror.com/react/18.1.0
     engines: {node: '>=0.10.0'}
     dev: true
 
-  registry.npmmirror.com/react-router-dom/6.3.0_ef5jwxihqo6n7gxfmzogljlgcm:
-    resolution: {integrity: sha512-uaJj7LKytRxZNQV8+RbzJWnJ8K2nPsOOEuX7aQstlMZKQT0164C+X2w6bnkqU3sjtLvpd5ojrezAyfZ1+0sStw==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/react-router-dom/-/react-router-dom-6.3.0.tgz}
-    id: registry.npmmirror.com/react-router-dom/6.3.0
+  registry.npmmirror.com/react-router-dom/6.4.2_ef5jwxihqo6n7gxfmzogljlgcm:
+    resolution: {integrity: sha512-yM1kjoTkpfjgczPrcyWrp+OuQMyB1WleICiiGfstnQYo/S8hPEEnVjr/RdmlH6yKK4Tnj1UGXFSa7uwAtmDoLQ==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/react-router-dom/-/react-router-dom-6.4.2.tgz}
+    id: registry.npmmirror.com/react-router-dom/6.4.2
     name: react-router-dom
-    version: 6.3.0
+    version: 6.4.2
+    engines: {node: '>=14'}
     peerDependencies:
       react: '>=16.8'
       react-dom: '>=16.8'
     dependencies:
-      history: registry.npmmirror.com/history/5.3.0
+      '@remix-run/router': registry.npmmirror.com/@remix-run/router/1.0.2
       react: registry.npmmirror.com/react/18.1.0
       react-dom: registry.npmmirror.com/react-dom/18.1.0_react@18.1.0
-      react-router: registry.npmmirror.com/react-router/6.3.0_react@18.1.0
+      react-router: registry.npmmirror.com/react-router/6.4.2_react@18.1.0
     dev: false
 
-  registry.npmmirror.com/react-router/6.3.0_react@18.1.0:
-    resolution: {integrity: sha512-7Wh1DzVQ+tlFjkeo+ujvjSqSJmkt1+8JO+T5xklPlgrh70y7ogx75ODRW0ThWhY7S+6yEDks8TYrtQe/aoboBQ==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/react-router/-/react-router-6.3.0.tgz}
-    id: registry.npmmirror.com/react-router/6.3.0
+  registry.npmmirror.com/react-router/6.4.2_react@18.1.0:
+    resolution: {integrity: sha512-Rb0BAX9KHhVzT1OKhMvCDMw776aTYM0DtkxqUBP8dNBom3mPXlfNs76JNGK8wKJ1IZEY1+WGj+cvZxHVk/GiKw==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/react-router/-/react-router-6.4.2.tgz}
+    id: registry.npmmirror.com/react-router/6.4.2
     name: react-router
-    version: 6.3.0
+    version: 6.4.2
+    engines: {node: '>=14'}
     peerDependencies:
       react: '>=16.8'
     dependencies:
-      history: registry.npmmirror.com/history/5.3.0
+      '@remix-run/router': registry.npmmirror.com/@remix-run/router/1.0.2
       react: registry.npmmirror.com/react/18.1.0
     dev: false
 

src/App.jsx

 import { useState } from 'react'
-import { Button } from 'antd'
-import reactLogo from './assets/react.svg'
-import './App.css'
+
 
 function App() {
   const [count, setCount] = useState(0)
 
-  return (
-    <div className="App">
-      <div>
-        <a href="https://vitejs.dev" target="_blank">
-          <img src="/vite.svg" className="logo" alt="Vite logo" />
-        </a>
-        <a href="https://reactjs.org" target="_blank">
-          <img src={reactLogo} className="logo react" alt="React logo" />
-        </a>
-      </div>
-      <h1>Vite + React</h1>
-      <div className="card">
-        <Button type='primary' onClick={() => setCount((count) => count + 1)}>
-          count is {count}
-        </Button>
-        <p>
-          Edit <code>src/App.jsx</code> and save to test HMR
-        </p>
-      </div>
-      <p className="read-the-docs">
-        Click on the Vite and React logos to learn more
-      </p>
-    </div>
-  )
+  return null;
 }
 
 export default App

src/components/page/index.jsx

 import React from 'react';
-import { PageHeader } from 'antd';
-import useRoute from '@/routes/useRoute';
+// import { PageHeader } from 'antd';
+// import useRoute from '@/routes/useRoute';
 import Container from './Container';
 
 export default (props) => {
-  const { children, ...headerProps } = props;
+  // const { children, ...headerProps } = props;
 
-  const currentRoute = useRoute() || {};
-  const { title } = currentRoute.meta || {};
+  // const currentRoute = useRoute() || {};
+  // const { title } = currentRoute.meta || {};
 
   return (
-    <>
-      <PageHeader
-        ghost={false}
-        title={title}
-        {...headerProps}
-      />
-      <Container>
-        {children}
-      </Container>
-    </>
+    <Container>
+      {props.children}
+    </Container>
   )
 }

src/index.less

 :root {
   --theme-color: #fff;
   --theme-front: #000;
-  --header-height: 64px;
+  --header-height: 48px;
+  --siderbar-width: 240px;
 }
 
 .main-layout {
   background-color: #f0f2f5;
 }
 
+.ant-layout-header {
+  line-height: var(--header-height);
+  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
+  z-index: 10;
+}
+
 .layout-sidebar {
+  width: var(--siderbar-width);
   background-color: var(--theme-color);
   color: var(--theme-front);
-  box-shadow: 2px 0 8px 0 rgba(29,35,41,.05);
+  box-shadow: 1px 0 4px 0 rgba(0, 21, 41, 0.04);
 }
 
 
   padding: 16px;
 }
 
+.ant-pro .ant-pro-query-filter .ant-form-item {
+  margin: 0;
+}
+
 .ant-pro-page-container .ant-pro-page-container-warp-page-header ~ .ant-pro-grid-content .ant-pro-page-container-children-content {
   margin: 8px 40px 40px 40px;
 }
 
 .ant-pro-card .ant-pro-card-body {
   padding: 16px 24px;
-}
+}

src/layouts/AuthLayout/components/Header/Logo.jsx

 import React from 'react';
+import { Typography } from 'antd';
 import { NavLink } from "react-router-dom";
 import { useModel } from '@/store';
 
-export default (props) => {
+const { Title } = Typography;
 
-  const { config } = useModel('system');
+export default (props) => {
+  const { app } = useModel('system');
 
   return (
     <NavLink className='logo'  to="/">
       <img src="./logo.png" alt="" />
-      <h3>{config.shorName}</h3>
+      <Title level={5}>{app.shorName}</Title>
     </NavLink>
   )
 }

src/layouts/AuthLayout/components/Header/Title.jsx

+import { Typography } from 'antd';
+import { useModel } from '@/store';
+
+const { Title } = Typography;
+
+const titleStyle = {
+  margin: 0,
+}
+
+const spanStyle = {
+  display: 'inline-block',
+  width: '24px',
+  textAlign: 'center'
+}
+
+export default (props) => {
+  const { title } = useModel('system');
+
+  return (
+    <Title level={5} style={titleStyle}>
+      <span style={spanStyle}>&raquo;</span>
+      <span>{title}</span>    
+    </Title>
+  );
+}

src/layouts/AuthLayout/components/Header/index.jsx

-import React from 'react';
+import React, { useMemo } from 'react';
 import { Layout, Space } from 'antd';
+import classNames from 'classnames';
 import Logo from './Logo';
+import Title from './Title';
 import User from './User';
 import Exit from './Exit';
 
 const { Header } = Layout;
 
 export default (props) => {
+
+  const className = useMemo(() => classNames({
+    'layout-header': true,
+    'light': props.theme === 'light',
+  }), [props.theme]);
+
+
   return (
-    <Header className='layout-header'>
+    <Header className={className}>
       <Logo />
+      <div className="header-content">
+        <Title />
+      </div>
       <Space>
         <User />
         <Exit />

src/layouts/AuthLayout/components/HtmlTitle.jsx

+
+import { Helmet } from "react-helmet";
+import { useModel } from '@/store';
+
+export default (props) => {
+  const { app } = useModel('system');
+  const { title } = useModel('route');
+  
+  const titleTemplate = `%s - ${app.fullName}`;
+  const defaultTitle = app.fullName;
+
+  return (
+    <Helmet titleTemplate={titleTemplate} defaultTitle={defaultTitle}>
+      <title>{title}</title>
+    </Helmet>
+  );
+}

src/layouts/AuthLayout/components/Menus.jsx

   a.click();
 }
 
+const menuStyle = { height: '100%' };
+
 export default (props) => {
   const { theme } = props;
 
   }
 
   return (
-    <Menu theme={theme} items={items} onClick={onClick} />
+    <Menu style={menuStyle} theme={theme} items={items} onClick={onClick} />
   )
 }

src/layouts/AuthLayout/components/SiderBar.jsx

-import React from 'react';
+import React, { useMemo } from 'react';
 import { Layout, Spin } from 'antd';
 import { useModel } from '@/store'
+import { getPropertyValue } from '@/utils/css';
 import Menus from './Menus';
 
 const { Sider } = Layout;
 
+
 export default (props) => {
+
+  const width = useMemo(() => {
+    return /\d+/.exec(getPropertyValue('--siderbar-width'))[0] - 0;
+  }, []);
+
   const { theme } = useModel('system');
 
   return (
-    <Sider className='layout-sidebar' theme={theme} collapsible width={240} >
+    <Sider className='layout-sidebar' theme={theme} collapsible width={width}>
       <Menus theme={theme}/>
     </Sider>
   )

src/layouts/AuthLayout/index.jsx

 import React, { useEffect, useRef, useMemo, useState } from 'react';
 import { Layout, Spin } from 'antd';
-import { Helmet } from "react-helmet";
+import { useLocation } from "react-router-dom";
 import { useModel } from '@/store';
-import useRoute from '@/routes/useRoute';
 import RequireLogin from './components/RequireLogin';
 import SiderBar from './components/SiderBar';
 import Header from './components/Header';
 import Container from './components/Container';
+import HtmlTitle from './components/HtmlTitle';
 import useReady from './useReady';
 
 import './style.less';
 
 export default (props) => {
-  const { config } = useModel('system');
+  const { theme } = useModel('system');
+  const { setLocation } = useModel('route');
   const { user, getCurrent } = useModel('user');
+
   // const isReady = useReady(user)
   // const isReady = true
 
-  const currentRoute = useRoute();
-  const titleTemplate = `%s - ${config.appName}`
-  const pageTitle = currentRoute && currentRoute.meta ? currentRoute.meta.title : undefined;
+  const location = useLocation();
 
   useEffect(() => {
     if (!user) {
     }
   }, []);
 
+  useEffect(() => setLocation(location), [location]);
+
   return (
     <Spin spinning={!user} size="large">
-      <Helmet titleTemplate={titleTemplate} defaultTitle={config.appName}>
-        <title>{pageTitle}</title>
-      </Helmet>
+      <HtmlTitle />
       <RequireLogin>
         <div className='main-layout'>
-          <Header />
+          <Header theme={theme} />
           <Layout>
-            <SiderBar />
+            <SiderBar theme={theme} />
             <Container />
           </Layout>
         </div>

src/layouts/AuthLayout/style.less

 .layout-header {
-  height: 48px;
+  height: var(--header-height);
   box-sizing: border-box;
   padding: 0;
   display: flex;
   align-items: center;
   justify-content: space-between;
+  color: #fff;
+
+  &.light {
+    background-color: #fff;
+    color: #000;
+  }
+
+  .header-content {
+    flex: 1;
+  }
 
   .logo {
-    width: 200px; // 200 是 side-bar 宽度
+    width: var(--siderbar-width);
     display: flex;
     align-items: center;
     box-sizing: border-box;
     padding-left: 1em;
+    color: inherit;
 
     & > * {
-      color: #fff;
+      color: inherit;
+      margin: 0;
     }
 
     img {
   }
 
   .font {
-    color: #fff;
+    color: inherit;
     display: inline-block;
   }
 

src/pages/404/index.jsx

 }
 
 export default (props) => {
-  const { config } = useModel('system');
+  const { app } = useModel('system');
 
   return (
     <div style={style}>
       <Helmet>
-        <title>{config.appName}</title>
+        <title>{app.fullName}</title>
       </Helmet>
       <Result
         status="404"

src/pages/login/index.jsx

 const year = new Date().getFullYear();
 
 export default (props) => {
-  const { config } = useModel('system');
+  const { app } = useModel('system');
 
   const baseUrl = import.meta.env.BASE_URL;
-  const title = `欢迎使用${config.appName}`;
-  const copyright = `${config.company} @ ${year}`;
+  const title = `欢迎使用${app.fullName}`;
+  const copyright = `${app.company} @ ${year}`;
 
   useEffect(() => {
     const oScript = document.createElement("script");
   return (
     <div className='login-page'>
       <Helmet>
-        <title>{config.appName}</title>
+        <title>{app.fullName}</title>
       </Helmet>
       <div id="particles-js"></div>
       <div className="login-page-container">

src/routes/Router.jsx

-import { HashRouter, useRoutes } from "react-router-dom";
+import { createHashRouter, RouterProvider } from "react-router-dom";
 import routes from './routes'
 
-const Routes = () => useRoutes(routes);
-
+const router = createHashRouter(routes);
 export default (props) => {
-  return (
-    <HashRouter>
-      <Routes />
-    </HashRouter>
-  )
+  return <RouterProvider router={router} />
 }

src/store/index.js

 import { createStore } from "@zjxpcyc/react-tiny-store";
 import useSystem from "./models/system";
+import useRoute from "./models/route";
 import useUser from "./models/user";
 
 const store = createStore({
   system: useSystem,
+  route: useRoute,
   user: useUser,
 });
 

src/store/models/route.js

+import { useState, useRef, useEffect } from "react";
+import { getRouteArr } from '@/routes/menus';
+
+export default function useRoute() {
+  const routesRef = useRef();
+  const [location, setLocation] = useState({});
+  const [route, setRoute] = useState();
+  const [title, setTitle] = useState();
+
+  const { pathname, search } = location;
+
+  // 监控 route 改变
+  useEffect(() => {
+    // 获取当前路由
+    if (!routesRef.current || !routesRef.current.length) {
+      routesRef.current = getRouteArr();
+    }
+    const current = (routesRef.current || []).filter(x => x.path === pathname)[0];
+    setRoute(current);
+
+    //
+    const { title } = current && current.meta || {}
+    setTitle(title);
+  }, [pathname, search]);
+
+  return {
+    route,
+    title,
+    setLocation,
+  }
+}

src/store/models/system.js

-import { useCallback } from "react";
-import { useState } from "react";
-
-const setRootCssVar = (key, val) => {
-  document.documentElement.style.setProperty(key, val);
-}
+import { useState, useCallback } from "react";
 
 export default function useSystem() {
-  const [theme, setTheme] = useState('light');
-  const [config, setConfig] = useState({
-    appName: '云致科技信息管理系统',
+  // 主题
+  const [theme, updateTheme] = useState('light');
+
+  // 其他配置
+  const [app, setApp] = useState({
+    fullName: '云致科技信息管理系统',
     shorName: '云致科技',
     company: '云致科技'
   });
 
-  const updateTheme = useCallback((t) => {
-    setTheme(t);
-    switch (t) {
-      case 'dark':
-        setRootCssVar('--theme-color', '#001529');
-        setRootCssVar('--theme-front', '#fff');
-        break;
-      case 'light':
-      default:
-        setRootCssVar('--theme-color', '#fff');
-        setRootCssVar('--theme-front', '#000');
-        break;
-    }
-  }, [])
+  // 页面标题
+  const [title, setTitle] = useState();
 
   return {
     theme,
     updateTheme,
-    config,
-    setConfig,
+    app,
+    title,
+    setTitle,
   }
 }

src/utils/css.js

+
+export function setProperty(...args) {
+  document.documentElement.style.setProperty(...args);
+}
+
+export function getPropertyValue(...args) {
+  return getComputedStyle(document.documentElement).getPropertyValue(...args);
+}

src/utils/hooks/usePrompt.jsx

+import React from "react";
+import { UNSAFE_NavigationContext } from "react-router-dom";
+
+// 估计在 react-router v6 的后续某个版本 usePrompt 会回归
+export function usePrompt(message, when = true) {
+  let blocker = React.useCallback(
+    tx => {
+      if (window.confirm(message)) tx.retry();
+    },
+    [message]
+  );
+
+  useBlocker(blocker, when);
+}
+
+function useBlocker(blocker, when = true) {
+  let { navigator } = React.useContext(UNSAFE_NavigationContext);
+
+  React.useEffect(() => {
+    if (!when) return;
+
+    let unblock = navigator.block((tx) => {
+      let autoUnblockingTx = {
+        ...tx,
+        retry() {
+          unblock();
+          tx.retry();
+        }
+      };
+
+      blocker(autoUnblockingTx);
+    });
+
+    return unblock;
+  }, [navigator, blocker, when]);
+}

src/routes/useRoute.jsx → src/utils/hooks/useRoute.jsx

 import { useLocation } from "react-router-dom";
-import { getRouteArr } from './menus';
+import { getRouteArr } from '@/routes/menus';
 
+// 获取当前的 route 信息
 export default function useRoute() {
   const location = useLocation();
   const routeArr = getRouteArr();

src/utils/hooks/useTitle.jsx

+
+import { useEffect } from "react";
+import { useLocation } from "react-router-dom";
+import { useModel } from '@/store';
+import useRoute from './useRoute';
+
+export default function useTitle(newTitle) {
+  
+  const { app, title, setTitle} = useModel('system');
+  const currentRoute = useRoute();
+
+  const { pathname, search } = useLocation();
+  const titleTemplate = `%s - ${app.fullName}`
+  const pageTitle = currentRoute && currentRoute.meta ? currentRoute.meta.title : undefined;
+
+  // route change, reset title
+  useEffect(() => {
+    setTitle();
+  }, [pathname, search]);
+  
+  useEffect(() => {
+    setTitle(newTitle || pageTitle);
+  }, [newTitle, pageTitle]);
+
+  return [title, titleTemplate, app.fullName];
+}

src/utils/observe.js

+
+export default function observe() {
+  const listeners = [];
+
+  const subscribe = (fn) => {
+    listeners.push(fn);
+
+    return () => listeners.splice(listeners.indexOf(fn), 1)
+  }
+
+  const notify = (...args) => {
+    listeners.forEach(fn => fn(...args))
+  }
+
+  return {
+    subscribe,
+    notify,
+  }
+}