version: 4.6.0

.vscode/settings.json

@@ -21,6 +21,7 @@
   "cSpell.words": [
     "Clickoutside",
     "commitmsg",
+    "datetimerange",
     "domtoimage",
     "EDITMSG",
     "macarons",

CHANGELOG.md

@@ -1,5 +1,48 @@
 # CHANGE LOG
 
+## 4.6.0
+
+破坏性更新，请谨慎更新。
+
+提升了模板整体性能。
+
+## Feats
+
+- 更新 `vue` 版本至 `3.4.7`
+- 更新 `naive-ui` 版本至 `2.37.3`
+- 更新最新版本 `vue` 后，更新 `createDiscreteApi` 方法注册上下文，改为函数包裹，避免 `slot default invoked outside of render` 警告
+- 使用 [`NFlex`](https://www.naiveui.com/zh-CN/dark/components/flex) 组件替换 `NSpace` 组件，根据官方建议，尽量使用该组件
+- `menu store` 相关
+  - 优化 `setupAppMenu` 方法，初始化时会拼接完整的 `fullPath`，避免 `url`, `menu value` 更新路由时重复处理 `path`，提高性能
+  - 优化 `updateMenuKeyWhenRouteUpdate` 方法，减少 `path` 处理操作
+  - 优化 `changeMenuModelValue` 方法，减少 `path` 处理操作
+  - 移除 `emptyMenuTagOptions` 方法，使用 `spliceMenTagOptions` 方法替代
+- 由于更新了 `path` 逻辑，所以 `menu store`, `AppMenu` 等相关也同步更新
+  - `AppMenu` 更新 `key` 绑定字段为 `fullPath`
+  - `menu store` 更新 `menuKey` 绑定字段为 `fullPath`
+  - 更新 `parseAndFindMatchingNodes` 绑定字段为 `fullPath`
+- `useAppNavigation` 相关
+  - `navigationTo` 相关
+    - 重构该方法
+    - 支持传递完整路径跳转
+    - 支持传递参数 `vue-router query` 对象
+    - 支持配置项，详情请看 `NavigationToOptions`
+- `useSiderBar` 相关
+  - 同步更新所有方法，使用 `fullPath` 代替 `path`
+- `useContextmenuCoordinate` 方法
+  - 使用 `readonly` 方法包裹 `show` 属性
+  - 补充一些注释
+- 统一 `app-config` 的导入导出方式，现在统一为 `import { xxx } from '@/app-config'` 导入
+- 统一 `hooks` 包的导入导出方式，现在统一为 `import { xxx } from '@/hooks'` 导入
+- `app-config` 相关
+  - 开放 `APP_CATCH_KEY.appMenuKey` 属性，配置缓存读取字段
+- `useMaximize` 相关
+  - 优化 `maximize` 方法，现在支持配置滚动位置
+
+## Fixes
+
+- 修复 `RChart` 组件 `RChartInst` 类型不完整的问题
+
 ## 4.5.0
 
 破坏性更新。

package.json

@@ -1,7 +1,7 @@
 {
   "name": "ray-template",
   "private": false,
-  "version": "4.5.0",
+  "version": "4.6.0",
   "type": "module",
   "engines": {
     "node": "^18.0.0 || >=20.0.0",
@@ -44,13 +44,13 @@
     "interactjs": "1.10.26",
     "lodash-es": "^4.17.21",
     "mockjs": "1.1.0",
-    "naive-ui": "^2.36.0",
+    "naive-ui": "^2.37.3",
     "pinia": "^2.1.7",
     "pinia-plugin-persistedstate": "^3.2.0",
     "print-js": "^1.6.0",
-    "vue": "^3.4.0",
+    "vue": "^3.4.7",
     "vue-hooks-plus": "1.8.5",
-    "vue-i18n": "^9.8.0",
+    "vue-i18n": "^9.9.0",
     "vue-router": "^4.2.5",
     "xlsx": "^0.18.5"
   },

pnpm-lock.yaml

@@ -7,7 +7,7 @@ settings:
 dependencies:
   '@vueuse/core':
     specifier: ^10.6.1
-    version: 10.6.1(vue@3.4.0)
+    version: 10.6.1(vue@3.4.7)
   awesome-qr:
     specifier: 2.1.5-rc.0
     version: 2.1.5-rc.0
@@ -42,11 +42,11 @@ dependencies:
     specifier: 1.1.0
     version: 1.1.0
   naive-ui:
-    specifier: ^2.36.0
+    specifier: ^2.37.3
-    version: 2.36.0(vue@3.4.0)
+    version: 2.37.3(vue@3.4.7)
   pinia:
     specifier: ^2.1.7
-    version: 2.1.7(typescript@5.2.2)(vue@3.4.0)
+    version: 2.1.7(typescript@5.2.2)(vue@3.4.7)
   pinia-plugin-persistedstate:
     specifier: ^3.2.0
     version: 3.2.0(pinia@2.1.7)
@@ -54,17 +54,17 @@ dependencies:
     specifier: ^1.6.0
     version: 1.6.0
   vue:
-    specifier: ^3.4.0
+    specifier: ^3.4.7
-    version: 3.4.0(typescript@5.2.2)
+    version: 3.4.7(typescript@5.2.2)
   vue-hooks-plus:
     specifier: 1.8.5
-    version: 1.8.5(vue@3.4.0)
+    version: 1.8.5(vue@3.4.7)
   vue-i18n:
-    specifier: ^9.8.0
+    specifier: ^9.9.0
-    version: 9.8.0(vue@3.4.0)
+    version: 9.9.0(vue@3.4.7)
   vue-router:
     specifier: ^4.2.5
-    version: 4.2.5(vue@3.4.0)
+    version: 4.2.5(vue@3.4.7)
   xlsx:
     specifier: ^0.18.5
     version: 0.18.5
@@ -87,7 +87,7 @@ devDependencies:
     version: 1.10.21
   '@intlify/unplugin-vue-i18n':
     specifier: ^1.5.0
-    version: 1.5.0(vue-i18n@9.8.0)
+    version: 1.5.0(vue-i18n@9.9.0)
   '@types/crypto-js':
     specifier: ^4.1.1
     version: 4.1.1
@@ -108,10 +108,10 @@ devDependencies:
     version: 6.5.0(eslint@8.52.0)(typescript@5.2.2)
   '@vitejs/plugin-vue':
     specifier: ^5.0.0
-    version: 5.0.0(vite@5.0.10)(vue@3.4.0)
+    version: 5.0.0(vite@5.0.10)(vue@3.4.7)
   '@vitejs/plugin-vue-jsx':
     specifier: ^3.1.0
-    version: 3.1.0(vite@5.0.10)(vue@3.4.0)
+    version: 3.1.0(vite@5.0.10)(vue@3.4.7)
   '@vue-hooks-plus/resolvers':
     specifier: 1.2.4
     version: 1.2.4(vue-hooks-plus@1.8.5)
@@ -183,7 +183,7 @@ devDependencies:
     version: 0.16.6(@vueuse/core@10.6.1)
   unplugin-vue-components:
     specifier: ^0.25.2
-    version: 0.25.2(vue@3.4.0)
+    version: 0.25.2(vue@3.4.7)
   vite:
     specifier: ^5.0.10
     version: 5.0.10(@types/node@20.4.7)(sass@1.69.5)
@@ -387,9 +387,6 @@ packages:
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0
-    peerDependenciesMeta:
-      '@babel/core':
-        optional: true
     dependencies:
       '@babel/core': 7.23.6
       '@babel/helper-annotate-as-pure': 7.22.5
@@ -495,9 +492,6 @@ packages:
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0
-    peerDependenciesMeta:
-      '@babel/core':
-        optional: true
     dependencies:
       '@babel/core': 7.23.6
       '@babel/helper-environment-visitor': 7.22.20
@@ -933,12 +927,12 @@ packages:
       css-render: 0.15.12
     dev: false
 
-  /@css-render/vue3-ssr@0.15.12(vue@3.4.0):
+  /@css-render/vue3-ssr@0.15.12(vue@3.4.7):
     resolution: {integrity: sha512-AQLGhhaE0F+rwybRCkKUdzBdTEM/5PZBYy+fSYe1T9z9+yxMuV/k7ZRqa4M69X+EI1W8pa4kc9Iq2VjQkZx4rg==}
     peerDependencies:
       vue: ^3.0.11
     dependencies:
-      vue: 3.4.0(typescript@5.2.2)
+      vue: 3.4.7(typescript@5.2.2)
     dev: false
 
   /@emotion/hash@0.8.0:
@@ -1415,7 +1409,7 @@ packages:
     resolution: {integrity: sha512-DekYpdkMV3XJVd/0k3f4pJluZAsCiG86yEtVXvGLK0lS/Fj0+OzYEv7HoMpcBZSkQ8s7//yaeEBgnxy2tV81lA==}
     dev: false
 
-  /@intlify/bundle-utils@7.4.0(vue-i18n@9.8.0):
+  /@intlify/bundle-utils@7.4.0(vue-i18n@9.9.0):
     resolution: {integrity: sha512-AQfjBe2HUxzyN8ignIk3WhhSuVcSuirgzOzkd17nb337rCbI4Gv/t1R60UUyIqFoFdviLb/wLcDUzTD/xXjv9w==}
     engines: {node: '>= 14.16'}
     peerDependencies:
@@ -1436,16 +1430,16 @@ packages:
       magic-string: 0.30.5
       mlly: 1.4.1
       source-map-js: 1.0.2
-      vue-i18n: 9.8.0(vue@3.4.0)
+      vue-i18n: 9.9.0(vue@3.4.7)
       yaml-eslint-parser: 1.2.2
     dev: true
 
-  /@intlify/core-base@9.8.0:
+  /@intlify/core-base@9.9.0:
-    resolution: {integrity: sha512-UxaSZVZ1DwqC/CltUZrWZNaWNhfmKtfyV4BJSt/Zt4Or/fZs1iFj0B+OekYk1+MRHfIOe3+x00uXGQI4PbO/9g==}
+    resolution: {integrity: sha512-C7UXPymDIOlMGSNjAhNLtKgzITc/8BjINK5gNKXg8GiWCTwL6n3MWr55czksxn8RM5wTMz0qcLOFT+adtaVQaA==}
     engines: {node: '>= 16'}
     dependencies:
-      '@intlify/message-compiler': 9.8.0
+      '@intlify/message-compiler': 9.9.0
-      '@intlify/shared': 9.8.0
+      '@intlify/shared': 9.9.0
 
   /@intlify/message-compiler@9.7.0:
     resolution: {integrity: sha512-/YdZCio2L2tCM5bZ2eMHbSEIQNPh1QqvZIOLI/yCVKXLscis7O0SsR2nmuU/DfCJ3iSeI8juw82C2wLvfsAeww==}
@@ -1455,11 +1449,11 @@ packages:
       source-map-js: 1.0.2
     dev: true
 
-  /@intlify/message-compiler@9.8.0:
+  /@intlify/message-compiler@9.9.0:
-    resolution: {integrity: sha512-McnYWhcoYmDJvssVu6QGR0shqlkJuL1HHdi5lK7fNqvQqRYaQ4lSLjYmZxwc8tRNMdIe9/KUKfyPxU9M6yCtNQ==}
+    resolution: {integrity: sha512-yDU/jdUm9KuhEzYfS+wuyja209yXgdl1XFhMlKtXEgSFTxz4COZQCRXXbbH8JrAjMsaJ7bdoPSLsKlY6mXG2iA==}
     engines: {node: '>= 16'}
     dependencies:
-      '@intlify/shared': 9.8.0
+      '@intlify/shared': 9.9.0
       source-map-js: 1.0.2
 
   /@intlify/shared@9.7.0:
@@ -1467,11 +1461,11 @@ packages:
     engines: {node: '>= 16'}
     dev: true
 
-  /@intlify/shared@9.8.0:
+  /@intlify/shared@9.9.0:
-    resolution: {integrity: sha512-TmgR0RCLjzrSo+W3wT0ALf9851iFMlVI9EYNGeWvZFUQTAJx0bvfsMlPdgVtV1tDNRiAfhkFsMKu6jtUY1ZLKQ==}
+    resolution: {integrity: sha512-1ECUyAHRrzOJbOizyGufYP2yukqGrWXtkmTu4PcswVnWbkcjzk3YQGmJ0bLkM7JZ0ZYAaohLGdYvBYnTOGYJ9g==}
     engines: {node: '>= 16'}
 
-  /@intlify/unplugin-vue-i18n@1.5.0(vue-i18n@9.8.0):
+  /@intlify/unplugin-vue-i18n@1.5.0(vue-i18n@9.9.0):
     resolution: {integrity: sha512-jW0MCCdwxybxcwjEfCunAcKjVoxyO3i+cnLL6v+MNGRLUHqrpELF6zQAJUhgAK2afhY7mCliy8RxTFWKdXm26w==}
     engines: {node: '>= 14.16'}
     peerDependencies:
@@ -1486,7 +1480,7 @@ packages:
       vue-i18n-bridge:
         optional: true
     dependencies:
-      '@intlify/bundle-utils': 7.4.0(vue-i18n@9.8.0)
+      '@intlify/bundle-utils': 7.4.0(vue-i18n@9.9.0)
       '@intlify/shared': 9.7.0
       '@rollup/pluginutils': 5.0.4
       '@vue/compiler-sfc': 3.3.8
@@ -1498,7 +1492,7 @@ packages:
       picocolors: 1.0.0
       source-map-js: 1.0.2
       unplugin: 1.4.0
-      vue-i18n: 9.8.0(vue@3.4.0)
+      vue-i18n: 9.9.0(vue@3.4.7)
     transitivePeerDependencies:
       - rollup
       - supports-color
@@ -2117,7 +2111,7 @@ packages:
     resolution: {integrity: sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==}
     dev: true
 
-  /@vitejs/plugin-vue-jsx@3.1.0(vite@5.0.10)(vue@3.4.0):
+  /@vitejs/plugin-vue-jsx@3.1.0(vite@5.0.10)(vue@3.4.7):
     resolution: {integrity: sha512-w9M6F3LSEU5kszVb9An2/MmXNxocAnUb3WhRr8bHlimhDrXNt6n6D2nJQR3UXpGlZHh/EsgouOHCsM8V3Ln+WA==}
     engines: {node: ^14.18.0 || >=16.0.0}
     peerDependencies:
@@ -2128,12 +2122,12 @@ packages:
       '@babel/plugin-transform-typescript': 7.23.6(@babel/core@7.23.6)
       '@vue/babel-plugin-jsx': 1.1.5(@babel/core@7.23.6)
       vite: 5.0.10(@types/node@20.4.7)(sass@1.69.5)
-      vue: 3.4.0(typescript@5.2.2)
+      vue: 3.4.7(typescript@5.2.2)
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /@vitejs/plugin-vue@5.0.0(vite@5.0.10)(vue@3.4.0):
+  /@vitejs/plugin-vue@5.0.0(vite@5.0.10)(vue@3.4.7):
     resolution: {integrity: sha512-7x5e8X4J1Wi4NxudGjJBd2OFerAi/0nzF80ojCzvfj347WVr0YSn82C8BSsgwSHzlk9Kw5xnZfj0/7RLnNwP5w==}
     engines: {node: ^18.0.0 || >=20.0.0}
     peerDependencies:
@@ -2141,7 +2135,7 @@ packages:
       vue: ^3.2.25
     dependencies:
       vite: 5.0.10(@types/node@20.4.7)(sass@1.69.5)
-      vue: 3.4.0(typescript@5.2.2)
+      vue: 3.4.7(typescript@5.2.2)
     dev: true
 
   /@volar/language-core@1.10.1:
@@ -2169,7 +2163,7 @@ packages:
       vue-hooks-plus: ^1.5.2
     dependencies:
       local-pkg: 0.4.3
-      vue-hooks-plus: 1.8.5(vue@3.4.0)
+      vue-hooks-plus: 1.8.5(vue@3.4.7)
     dev: true
 
   /@vue/babel-helper-vue-transform-on@1.1.5:
@@ -2213,11 +2207,11 @@ packages:
       source-map-js: 1.0.2
     dev: true
 
-  /@vue/compiler-core@3.4.0:
+  /@vue/compiler-core@3.4.7:
-    resolution: {integrity: sha512-cw4S15PkNGTKkP9OFFl4wnQoJJk+HqaYBafgrpDnSukiQGpcYJeRpzmqnCVCIkl6V6Eqsv58E0OAdl6b592vuA==}
+    resolution: {integrity: sha512-hhCaE3pTMrlIJK7M/o3Xf7HV8+JoNTGOQ/coWS+V+pH6QFFyqtoXqQzpqsNp7UK17xYKua/MBiKj4e1vgZOBYw==}
     dependencies:
       '@babel/parser': 7.23.6
-      '@vue/shared': 3.4.0
+      '@vue/shared': 3.4.7
       entities: 4.5.0
       estree-walker: 2.0.2
       source-map-js: 1.0.2
@@ -2236,11 +2230,11 @@ packages:
       '@vue/shared': 3.3.8
     dev: true
 
-  /@vue/compiler-dom@3.4.0:
+  /@vue/compiler-dom@3.4.7:
-    resolution: {integrity: sha512-E957uOhpoE48YjZGWeAoLmNYd3UeU4oIP8kJi8Rcsb9l2tV8Z48Jn07Zgq1aW0v3vuhlmydEKkKKbhLpADHXEA==}
+    resolution: {integrity: sha512-qDKBAIurCTub4n/6jDYkXwgsFuriqqmmLrIq1N2QDfYJA/mwiwvxi09OGn28g+uDdERX9NaKDLji0oTjE3sScg==}
     dependencies:
-      '@vue/compiler-core': 3.4.0
+      '@vue/compiler-core': 3.4.7
-      '@vue/shared': 3.4.0
+      '@vue/shared': 3.4.7
 
   /@vue/compiler-sfc@3.3.8:
     resolution: {integrity: sha512-WMzbUrlTjfYF8joyT84HfwwXo+8WPALuPxhy+BZ6R4Aafls+jDBnSz8PDz60uFhuqFbl3HxRfxvDzrUf3THwpA==}
@@ -2257,14 +2251,14 @@ packages:
       source-map-js: 1.0.2
     dev: true
 
-  /@vue/compiler-sfc@3.4.0:
+  /@vue/compiler-sfc@3.4.7:
-    resolution: {integrity: sha512-PWE0mE2yW7bJS7PmaCrVDEG6KPaDJo0pb4AKnCxJ5lRRDO4IwL/fswBGhCpov+v/c+N/e+hQHpXNwvqU9BtUXg==}
+    resolution: {integrity: sha512-Gec6CLkReVswDYjQFq79O5rktri4R7TsD/VPCiUoJw40JhNNxaNJJa8mrQrWoJluW4ETy6QN0NUyC/JO77OCOw==}
     dependencies:
       '@babel/parser': 7.23.6
-      '@vue/compiler-core': 3.4.0
+      '@vue/compiler-core': 3.4.7
-      '@vue/compiler-dom': 3.4.0
+      '@vue/compiler-dom': 3.4.7
-      '@vue/compiler-ssr': 3.4.0
+      '@vue/compiler-ssr': 3.4.7
-      '@vue/shared': 3.4.0
+      '@vue/shared': 3.4.7
       estree-walker: 2.0.2
       magic-string: 0.30.5
       postcss: 8.4.32
@@ -2277,11 +2271,11 @@ packages:
       '@vue/shared': 3.3.8
     dev: true
 
-  /@vue/compiler-ssr@3.4.0:
+  /@vue/compiler-ssr@3.4.7:
-    resolution: {integrity: sha512-+oXKy105g9DIYQKDi3Gwung0xqQX5gJHr0GR+Vf7yK/WkNDM6q61ummcKmKAB85EIst8y3vj2PA9z9YU5Oc4DQ==}
+    resolution: {integrity: sha512-PvYeSOvnCkST5mGS0TLwEn5w+4GavtEn6adcq8AspbHaIr+mId5hp7cG3ASy3iy8b+LuXEG2/QaV/nj5BQ/Aww==}
     dependencies:
-      '@vue/compiler-dom': 3.4.0
+      '@vue/compiler-dom': 3.4.7
-      '@vue/shared': 3.4.0
+      '@vue/shared': 3.4.7
 
   /@vue/devtools-api@6.5.1:
     resolution: {integrity: sha512-+KpckaAQyfbvshdDW5xQylLni1asvNSGme1JFs8I1+/H5pHEhqUKMEQD/qn3Nx5+/nycBq11qAEi8lk+LXI2dA==}
@@ -2356,32 +2350,32 @@ packages:
       '@vue/shared': 3.3.8
     dev: true
 
-  /@vue/reactivity@3.4.0:
+  /@vue/reactivity@3.4.7:
-    resolution: {integrity: sha512-X6BvQjNcgKKHWPQzlRJjZvIu72Kkn8xJSv6VNptqWh8dToMknD0Hch1l4N7llKgVt6Diq4lMeUnErbZFvuGlAA==}
+    resolution: {integrity: sha512-F539DO0ogH0+L8F9Pnw7cjqibcmSOh5UTk16u5f4MKQ8fraqepI9zdh+sozPX6VmEHOcjo8qw3Or9ZcFFw4SZA==}
     dependencies:
-      '@vue/shared': 3.4.0
+      '@vue/shared': 3.4.7
 
-  /@vue/runtime-core@3.4.0:
+  /@vue/runtime-core@3.4.7:
-    resolution: {integrity: sha512-NYrj/JgMMqnSWcIud8lLzDQrBLu+EVEeQ56QE9DYJeKG2eFrnQy8o/h57R9nCprafHs0uImKL3xsdXjHseYVxw==}
+    resolution: {integrity: sha512-QMMsWRQaD3BpGyjjChthpl4Mji4Fjx1qfdufsXlDkKU3HV+hWNor2z+29F+E1MmVcP0ZfRZUfqYgtsQoL7IGwQ==}
     dependencies:
-      '@vue/reactivity': 3.4.0
+      '@vue/reactivity': 3.4.7
-      '@vue/shared': 3.4.0
+      '@vue/shared': 3.4.7
 
-  /@vue/runtime-dom@3.4.0:
+  /@vue/runtime-dom@3.4.7:
-    resolution: {integrity: sha512-1ZoHEsA5l77qbx2F+SWo/hQdBksPuOmww1t/jznidDG+xMB/iidafEFvo2ZTtZii0JfTIrlDhjshfYUvQC17wQ==}
+    resolution: {integrity: sha512-XwegyUY1rw8zxsX1Z36vwYcqo+uOgih5ti7y9vx+pPFhNdSQmN4LqK2RmSeAJG1oKV8NqSUmjpv92f/x6h0SeQ==}
     dependencies:
-      '@vue/runtime-core': 3.4.0
+      '@vue/runtime-core': 3.4.7
-      '@vue/shared': 3.4.0
+      '@vue/shared': 3.4.7
       csstype: 3.1.3
 
-  /@vue/server-renderer@3.4.0(vue@3.4.0):
+  /@vue/server-renderer@3.4.7(vue@3.4.7):
-    resolution: {integrity: sha512-GuOVCyLDlWPu8nKo5AUxb8B+iB/Ik4I1WwqAlBqf5+y48z6D6rvKshp7KR3cJea+pte1tdTsb0+Ja82KizMZOw==}
+    resolution: {integrity: sha512-3bWnYLEkLLhkDWqvNk7IvbQD4UcxvFKxELBiOO2iG3m6AniFIsBWfHOO5tLVQnjdWkODu4rq0GipmfEenVAK5Q==}
     peerDependencies:
-      vue: 3.4.0
+      vue: 3.4.7
     dependencies:
-      '@vue/compiler-ssr': 3.4.0
+      '@vue/compiler-ssr': 3.4.7
-      '@vue/shared': 3.4.0
+      '@vue/shared': 3.4.7
-      vue: 3.4.0(typescript@5.2.2)
+      vue: 3.4.7(typescript@5.2.2)
 
   /@vue/shared@3.3.13:
     resolution: {integrity: sha512-/zYUwiHD8j7gKx2argXEMCUXVST6q/21DFU0sTfNX0URJroCe3b1UF6vLJ3lQDfLNIiiRl2ONp7Nh5UVWS6QnA==}
@@ -2391,8 +2385,8 @@ packages:
     resolution: {integrity: sha512-8PGwybFwM4x8pcfgqEQFy70NaQxASvOC5DJwLQfpArw1UDfUXrJkdxD3BhVTMS+0Lef/TU7YO0Jvr0jJY8T+mw==}
     dev: true
 
-  /@vue/shared@3.4.0:
+  /@vue/shared@3.4.7:
-    resolution: {integrity: sha512-Nhh3ed3G1R6HDAWiG6YYFt0Zmq/To6u5vjzwa9TIquGheCXPY6nEdIAO8ZdlwXsWqC2yNLj700FOvShpYt5CEA==}
+    resolution: {integrity: sha512-G+i4glX1dMJk88sbJEcQEGWRQnVm9eIY7CcQbO5dpdsD9SF8jka3Mr5OqZYGjczGN1+D6EUwdu6phcmcx9iuPA==}
 
   /@vue/typescript@1.8.8(typescript@5.2.2):
     resolution: {integrity: sha512-jUnmMB6egu5wl342eaUH236v8tdcEPXXkPgj+eI/F6JwW/lb+yAU6U07ZbQ3MVabZRlupIlPESB7ajgAGixhow==}
@@ -2403,13 +2397,13 @@ packages:
       - typescript
     dev: true
 
-  /@vueuse/core@10.6.1(vue@3.4.0):
+  /@vueuse/core@10.6.1(vue@3.4.7):
     resolution: {integrity: sha512-Pc26IJbqgC9VG1u6VY/xrXXfxD33hnvxBnKrLlA2LJlyHII+BSrRoTPJgGYq7qZOu61itITFUnm6QbacwZ4H8Q==}
     dependencies:
       '@types/web-bluetooth': 0.0.20
       '@vueuse/metadata': 10.6.1
-      '@vueuse/shared': 10.6.1(vue@3.4.0)
+      '@vueuse/shared': 10.6.1(vue@3.4.7)
-      vue-demi: 0.14.6(vue@3.4.0)
+      vue-demi: 0.14.6(vue@3.4.7)
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
@@ -2417,10 +2411,10 @@ packages:
   /@vueuse/metadata@10.6.1:
     resolution: {integrity: sha512-qhdwPI65Bgcj23e5lpGfQsxcy0bMjCAsUGoXkJ7DsoeDUdasbZ2DBa4dinFCOER3lF4gwUv+UD2AlA11zdzMFw==}
 
-  /@vueuse/shared@10.6.1(vue@3.4.0):
+  /@vueuse/shared@10.6.1(vue@3.4.7):
     resolution: {integrity: sha512-TECVDTIedFlL0NUfHWncf3zF9Gc4VfdxfQc8JFwoVZQmxpONhLxFrlm0eHQeidHj4rdTPL3KXJa0TZCk1wnc5Q==}
     dependencies:
-      vue-demi: 0.14.6(vue@3.4.0)
+      vue-demi: 0.14.6(vue@3.4.7)
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
@@ -5984,18 +5978,19 @@ packages:
       minimatch: 3.1.2
     dev: true
 
-  /naive-ui@2.36.0(vue@3.4.0):
+  /naive-ui@2.37.3(vue@3.4.7):
-    resolution: {integrity: sha512-r1ydtEm1Ryf/aWpbLCf32mQAGK99jd1eXgpkCtIomcBRZeAtusfy6zCtIpCppoCuIKM3BW5DMafhVxilubk/lQ==}
+    resolution: {integrity: sha512-aUkHFXVIluSi8Me+npbcsdv1NYhVMj5t9YaruoCESlqmfqspj+R2QHEVXkTtUI1kQwVrABMCtAGq/wountqjZA==}
     peerDependencies:
       vue: ^3.0.0
     dependencies:
       '@css-render/plugin-bem': 0.15.12(css-render@0.15.12)
-      '@css-render/vue3-ssr': 0.15.12(vue@3.4.0)
+      '@css-render/vue3-ssr': 0.15.12(vue@3.4.7)
       '@types/katex': 0.16.7
       '@types/lodash': 4.14.202
       '@types/lodash-es': 4.17.11
       async-validator: 4.2.5
       css-render: 0.15.12
+      csstype: 3.1.3
       date-fns: 2.30.0
       date-fns-tz: 2.0.0(date-fns@2.30.0)
       evtd: 0.2.4
@@ -6004,10 +5999,10 @@ packages:
       lodash-es: 4.17.21
       seemly: 0.3.8
       treemate: 0.3.11
-      vdirs: 0.1.8(vue@3.4.0)
+      vdirs: 0.1.8(vue@3.4.7)
-      vooks: 0.2.12(vue@3.4.0)
+      vooks: 0.2.12(vue@3.4.7)
-      vue: 3.4.0(typescript@5.2.2)
+      vue: 3.4.7(typescript@5.2.2)
-      vueuc: 0.4.54(vue@3.4.0)
+      vueuc: 0.4.58(vue@3.4.7)
     dev: false
 
   /nan@2.17.0:
@@ -6394,10 +6389,10 @@ packages:
     peerDependencies:
       pinia: ^2.0.0
     dependencies:
-      pinia: 2.1.7(typescript@5.2.2)(vue@3.4.0)
+      pinia: 2.1.7(typescript@5.2.2)(vue@3.4.7)
     dev: false
 
-  /pinia@2.1.7(typescript@5.2.2)(vue@3.4.0):
+  /pinia@2.1.7(typescript@5.2.2)(vue@3.4.7):
     resolution: {integrity: sha512-+C2AHFtcFqjPih0zpYuvof37SFxMQ7OEG2zV9jRI12i9BOy3YQVAHwdKtyyc8pDcDyIc33WCIsZaCFWU7WWxGQ==}
     peerDependencies:
       '@vue/composition-api': ^1.4.0
@@ -6411,8 +6406,8 @@ packages:
     dependencies:
       '@vue/devtools-api': 6.5.1
       typescript: 5.2.2
-      vue: 3.4.0(typescript@5.2.2)
+      vue: 3.4.7(typescript@5.2.2)
-      vue-demi: 0.14.6(vue@3.4.0)
+      vue-demi: 0.14.6(vue@3.4.7)
     dev: false
 
   /pkg-types@1.0.3:
@@ -7685,7 +7680,7 @@ packages:
     dependencies:
       '@antfu/utils': 0.7.6
       '@rollup/pluginutils': 5.0.4
-      '@vueuse/core': 10.6.1(vue@3.4.0)
+      '@vueuse/core': 10.6.1(vue@3.4.7)
       fast-glob: 3.3.1
       local-pkg: 0.4.3
       magic-string: 0.30.5
@@ -7696,7 +7691,7 @@ packages:
       - rollup
     dev: true
 
-  /unplugin-vue-components@0.25.2(vue@3.4.0):
+  /unplugin-vue-components@0.25.2(vue@3.4.7):
     resolution: {integrity: sha512-OVmLFqILH6w+eM8fyt/d/eoJT9A6WO51NZLf1vC5c1FZ4rmq2bbGxTy8WP2Jm7xwFdukaIdv819+UI7RClPyCA==}
     engines: {node: '>=14'}
     peerDependencies:
@@ -7719,7 +7714,7 @@ packages:
       minimatch: 9.0.3
       resolve: 1.22.5
       unplugin: 1.4.0
-      vue: 3.4.0(typescript@5.2.2)
+      vue: 3.4.7(typescript@5.2.2)
     transitivePeerDependencies:
       - rollup
       - supports-color
@@ -7810,13 +7805,13 @@ packages:
     engines: {node: '>= 0.8'}
     dev: true
 
-  /vdirs@0.1.8(vue@3.4.0):
+  /vdirs@0.1.8(vue@3.4.7):
     resolution: {integrity: sha512-H9V1zGRLQZg9b+GdMk8MXDN2Lva0zx72MPahDKc30v+DtwKjfyOSXWRIX4t2mhDubM1H09gPhWeth/BJWPHGUw==}
     peerDependencies:
       vue: ^3.0.11
     dependencies:
       evtd: 0.2.4
-      vue: 3.4.0(typescript@5.2.2)
+      vue: 3.4.7(typescript@5.2.2)
     dev: false
 
   /vite-plugin-cdn2@0.15.2:
@@ -7999,16 +7994,16 @@ packages:
       fsevents: 2.3.3
     dev: true
 
-  /vooks@0.2.12(vue@3.4.0):
+  /vooks@0.2.12(vue@3.4.7):
     resolution: {integrity: sha512-iox0I3RZzxtKlcgYaStQYKEzWWGAduMmq+jS7OrNdQo1FgGfPMubGL3uGHOU9n97NIvfFDBGnpSvkWyb/NSn/Q==}
     peerDependencies:
       vue: ^3.0.0
     dependencies:
       evtd: 0.2.4
-      vue: 3.4.0(typescript@5.2.2)
+      vue: 3.4.7(typescript@5.2.2)
     dev: false
 
-  /vue-demi@0.14.6(vue@3.4.0):
+  /vue-demi@0.14.6(vue@3.4.7):
     resolution: {integrity: sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==}
     engines: {node: '>=12'}
     hasBin: true
@@ -8020,7 +8015,7 @@ packages:
       '@vue/composition-api':
         optional: true
     dependencies:
-      vue: 3.4.0(typescript@5.2.2)
+      vue: 3.4.7(typescript@5.2.2)
 
   /vue-eslint-parser@9.3.1(eslint@8.52.0):
     resolution: {integrity: sha512-Clr85iD2XFZ3lJ52/ppmUDG/spxQu6+MAeHXjjyI4I1NUYZ9xmenQp4N0oaHJhrA8OOxltCVxMRfANGa70vU0g==}
@@ -8040,7 +8035,7 @@ packages:
       - supports-color
     dev: true
 
-  /vue-hooks-plus@1.8.5(vue@3.4.0):
+  /vue-hooks-plus@1.8.5(vue@3.4.7):
     resolution: {integrity: sha512-cIatTWz6QQcoSCDn7jadQ3zMr799FmNiHyb59yUvR7Ws5KDJ/KdIMHHx/b0XDKzbGhQ61kcJ78zJKAKhOV0pWw==}
     peerDependencies:
       vue: ^3.2.25
@@ -8052,26 +8047,26 @@ packages:
       qs: 6.11.2
       query-string: 7.1.3
       screenfull: 5.2.0
-      vue: 3.4.0(typescript@5.2.2)
+      vue: 3.4.7(typescript@5.2.2)
 
-  /vue-i18n@9.8.0(vue@3.4.0):
+  /vue-i18n@9.9.0(vue@3.4.7):
-    resolution: {integrity: sha512-Izho+6PYjejsTq2mzjcRdBZ5VLRQoSuuexvR8029h5CpN03FYqiqBrShMyf2I1DKkN6kw/xmujcbvC+4QybpsQ==}
+    resolution: {integrity: sha512-xQ5SxszUAqK5n84N+uUyHH/PiQl9xZ24FOxyAaNonmOQgXeN+rD9z/6DStOpOxNFQn4Cgcquot05gZc+CdOujA==}
     engines: {node: '>= 16'}
     peerDependencies:
       vue: ^3.0.0
     dependencies:
-      '@intlify/core-base': 9.8.0
+      '@intlify/core-base': 9.9.0
-      '@intlify/shared': 9.8.0
+      '@intlify/shared': 9.9.0
       '@vue/devtools-api': 6.5.1
-      vue: 3.4.0(typescript@5.2.2)
+      vue: 3.4.7(typescript@5.2.2)
 
-  /vue-router@4.2.5(vue@3.4.0):
+  /vue-router@4.2.5(vue@3.4.7):
     resolution: {integrity: sha512-DIUpKcyg4+PTQKfFPX88UWhlagBEBEfJ5A8XDXRJLUnZOvcpMF8o/dnL90vpVkGaPbjvXazV/rC1qBKrZlFugw==}
     peerDependencies:
       vue: ^3.2.0
     dependencies:
       '@vue/devtools-api': 6.5.1
-      vue: 3.4.0(typescript@5.2.2)
+      vue: 3.4.7(typescript@5.2.2)
     dev: false
 
   /vue-template-compiler@2.7.14:
@@ -8093,34 +8088,34 @@ packages:
       typescript: 5.2.2
     dev: true
 
-  /vue@3.4.0(typescript@5.2.2):
+  /vue@3.4.7(typescript@5.2.2):
-    resolution: {integrity: sha512-iTE9Ve/7DO/H39+gXHrNkRdnh1jDwPe/fap4brbPKkp1APMkS03OiZ+UY0dwpqtRX0iPWQTkh8Fu3hKgLtaxfA==}
+    resolution: {integrity: sha512-4urmkWpudekq0CPNMO7p6mBGa9qmTXwJMO2r6CT4EzIJVG7WoSReiysiNb7OSi/WI113oX0Srn9Rz1k/DCXKFQ==}
     peerDependencies:
       typescript: '*'
     peerDependenciesMeta:
       typescript:
         optional: true
     dependencies:
-      '@vue/compiler-dom': 3.4.0
+      '@vue/compiler-dom': 3.4.7
-      '@vue/compiler-sfc': 3.4.0
+      '@vue/compiler-sfc': 3.4.7
-      '@vue/runtime-dom': 3.4.0
+      '@vue/runtime-dom': 3.4.7
-      '@vue/server-renderer': 3.4.0(vue@3.4.0)
+      '@vue/server-renderer': 3.4.7(vue@3.4.7)
-      '@vue/shared': 3.4.0
+      '@vue/shared': 3.4.7
       typescript: 5.2.2
 
-  /vueuc@0.4.54(vue@3.4.0):
+  /vueuc@0.4.58(vue@3.4.7):
-    resolution: {integrity: sha512-2LED7h1BSnCRPBI6AlSIf+1Yte1shN+Vb2gpspO5wHI7zWzbcq4bAu2f9nFh5yXIUKdzqmLvzRsOXDl4TrDyCw==}
+    resolution: {integrity: sha512-Wnj/N8WbPRSxSt+9ji1jtDHPzda5h2OH/0sFBhvdxDRuyCZbjGg3/cKMaKqEoe+dErTexG2R+i6Q8S/Toq1MYg==}
     peerDependencies:
       vue: ^3.0.11
     dependencies:
-      '@css-render/vue3-ssr': 0.15.12(vue@3.4.0)
+      '@css-render/vue3-ssr': 0.15.12(vue@3.4.7)
       '@juggle/resize-observer': 3.4.0
       css-render: 0.15.12
       evtd: 0.2.4
       seemly: 0.3.8
-      vdirs: 0.1.8(vue@3.4.0)
+      vdirs: 0.1.8(vue@3.4.7)
-      vooks: 0.2.12(vue@3.4.0)
+      vooks: 0.2.12(vue@3.4.7)
-      vue: 3.4.0(typescript@5.2.2)
+      vue: 3.4.7(typescript@5.2.2)
     dev: false
 
   /webidl-conversions@3.0.1:

src/app-components/app/AppAvatar/index.tsx

@@ -19,10 +19,10 @@
 
 import './index.scss'
 
-import { NAvatar, NSpace } from 'naive-ui'
+import { NAvatar, NFlex } from 'naive-ui'
 
-import { avatarProps, spaceProps } from 'naive-ui'
+import { avatarProps, flexProps } from 'naive-ui'
-import { APP_CATCH_KEY } from '@/app-config/appConfig'
+import { APP_CATCH_KEY } from '@/app-config'
 import { getStorage } from '@/utils'
 
 import type { PropType } from 'vue'
@@ -33,7 +33,7 @@ const AppAvatar = defineComponent({
   name: 'AppAvatar',
   props: {
     ...avatarProps,
-    ...spaceProps,
+    ...flexProps,
     cursor: {
       type: String,
       default: 'auto',
@@ -64,10 +64,9 @@ const AppAvatar = defineComponent({
   },
   render() {
     return (
-      <NSpace
+      <NFlex
         class="app-avatar"
         {...this.$props}
-        wrapItem={false}
         style={this.cssVars}
         size={this.spaceSize}
       >
@@ -80,7 +79,7 @@ const AppAvatar = defineComponent({
           size={this.avatarSize}
         />
         <div class="app-avatar__name">{this.signing?.name}</div>
-      </NSpace>
+      </NFlex>
     )
   },
 })

src/app-components/app/AppLockScreen/components/UnlockScreen/index.tsx

@@ -11,14 +11,14 @@
 
 /** 解锁界面 */
 
-import { NInput, NForm, NFormItem, NButton, NSpace } from 'naive-ui'
+import { NInput, NForm, NFormItem, NButton, NFlex } from 'naive-ui'
 import AppAvatar from '@/app-components/app/AppAvatar'
 
 import dayjs from 'dayjs'
 import { useSigningActions, useSettingActions } from '@/store'
 import { rules, useCondition } from '@/app-components/app/AppLockScreen/shared'
 import useAppLockScreen from '@/app-components/app/AppLockScreen/appLockVar'
-import { useDevice } from '@/hooks/web'
+import { useDevice } from '@/hooks'
 
 import type { FormInst, InputInst } from 'naive-ui'
 
@@ -137,14 +137,14 @@ export default defineComponent({
                   }}
                 />
               </NFormItem>
-              <NSpace justify="space-between">
+              <NFlex justify="space-between">
                 <NButton type="primary" text onClick={backToSigning.bind(this)}>
                   返回登陆
                 </NButton>
                 <NButton type="primary" text onClick={unlockScreen.bind(this)}>
                   进入系统
                 </NButton>
-              </NSpace>
+              </NFlex>
             </NForm>
           </div>
           <div class="app-lock-screen__unlock__content-date">

src/app-components/app/RayLink/index.tsx

@@ -1,4 +1,9 @@
-import { NAvatar, NTooltip, NSpace } from 'naive-ui'
+/**
+ *
+ * 友情链接组件，无实际项目意义
+ */
+
+import { NAvatar, NTooltip, NFlex } from 'naive-ui'
 
 interface AvatarOptions {
   key: string
@@ -7,7 +12,7 @@ interface AvatarOptions {
   icon: string
 }
 
-const RayLink = defineComponent({
+export default defineComponent({
   name: 'RayLink',
   setup() {
     const avatarOptions: AvatarOptions[] = [
@@ -60,7 +65,7 @@ const RayLink = defineComponent({
   },
   render() {
     return (
-      <NSpace>
+      <NFlex>
         {this.avatarOptions.map((curr) => (
           <NTooltip key={curr.key}>
             {{
@@ -80,16 +85,7 @@ const RayLink = defineComponent({
             }}
           </NTooltip>
         ))}
-      </NSpace>
+      </NFlex>
     )
   },
 })
-
-export default RayLink
-
-/**
- *
- * 友链组件
- *
- * 这个组件用作初试模板中, 不喜欢自行删除
- */

src/app-components/provider/AppNaiveGlobalProvider/index.tsx

@@ -43,20 +43,29 @@ export default defineComponent({
       return naiveLocales(key)
     })
 
-    const { message, notification, dialog, loadingBar } = createDiscreteApi(
+    /**
-      ['message', 'dialog', 'notification', 'loadingBar'],
+     *
-      {
+     * 使用 createDiscreteApi 脱离上下文 api 注入一些常用的组件
-        configProviderProps: computed(() => ({
+     * 通过 window.$message、window.$notification、window.$dialog、window.$loadingBar 访问
-          theme: getAppTheme.value ? darkTheme : null,
+     * 但是，使用该组件注册后，使用 window.$notification 组件时不能更改 placement 位置（只能默认右上角弹出）
-        })),
+     *
-        notificationProviderProps: {},
+     * 改为函数包裹，避免 `slot default invoked outside of render` 警告
-      },
+     */
-    )
+    const discreteApi = () => {
+      const { message, notification, dialog, loadingBar } = createDiscreteApi(
+        ['message', 'dialog', 'notification', 'loadingBar'],
+        {
+          configProviderProps: computed(() => ({
+            theme: getAppTheme.value ? darkTheme : null,
+          })),
+        },
+      )
 
-    window.$dialog = dialog // 注入 `dialog`
+      window.$dialog = dialog // 注入 `dialog`
-    window.$message = message // 注入 `message`
+      window.$message = message // 注入 `message`
-    window.$loadingBar = loadingBar // 注入 `loadingBar`
+      window.$loadingBar = loadingBar // 注入 `loadingBar`
-    window.$notification = notification // 注入 `notification`
+      window.$notification = notification // 注入 `notification`
+    }
 
     expose()
 
@@ -64,22 +73,30 @@ export default defineComponent({
       getPrimaryColorOverride,
       localePackage,
       getAppTheme,
+      discreteApi,
     }
   },
   render() {
+    const {
+      $slots: { default: slotDefault },
+      discreteApi,
+    } = this
+    const { getPrimaryColorOverride, getAppTheme, localePackage } = this
+
     return (
       <NConfigProvider
-        themeOverrides={this.getPrimaryColorOverride}
+        themeOverrides={getPrimaryColorOverride}
-        theme={this.getAppTheme ? darkTheme : null}
+        theme={getAppTheme ? darkTheme : null}
-        locale={this.localePackage.locale}
+        locale={localePackage.locale}
-        dateLocale={this.localePackage.dateLocal}
+        dateLocale={localePackage.dateLocal}
       >
         <NLoadingBarProvider>
           <NMessageProvider>
             <NDialogProvider>
               <NNotificationProvider>
                 <NGlobalStyle />
-                {this.$slots.default?.()}
+                {slotDefault?.()}
+                {discreteApi()}
               </NNotificationProvider>
             </NDialogProvider>
           </NMessageProvider>

src/app-config/appConfig.ts

@@ -86,9 +86,11 @@ export const APP_MENU_CONFIG: Readonly<AppMenuConfig> = {
  *   - signing: 登陆信息缓存 key
  *   - localeLanguage: 国际化默认缓存 key
  *   - token: token key
+ *   - appMenuKey: 菜单缓存 key
  */
 export const APP_CATCH_KEY = {
   signing: 'signing',
   localeLanguage: 'localeLanguage',
   token: 'token',
+  appMenuKey: 'menuKey',
 } as const

src/app-config/index.ts

@@ -0,0 +1,6 @@
+export * from './appConfig'
+export * from './designConfig'
+export * from './localConfig'
+export * from './regexConfig'
+export * from './requestConfig'
+export * from './routerConfig'

src/axios/inject/request/provider.ts

@@ -22,7 +22,7 @@
 
 import { axiosCanceler } from '@/axios/helper/interceptor'
 import { appendRequestHeaders } from '@/axios/helper/axiosCopilot'
-import { APP_CATCH_KEY } from '@/app-config/appConfig'
+import { APP_CATCH_KEY } from '@/app-config'
 import { getStorage } from '@/utils'
 
 import type {

src/axios/instance.ts

@@ -17,7 +17,7 @@
  */
 
 import axios from 'axios'
-import { AXIOS_CONFIG } from '@/app-config/requestConfig'
+import { AXIOS_CONFIG } from '@/app-config'
 import { useAxiosInterceptor } from '@/axios/helper/interceptor'
 import {
   setupResponseInterceptor,

src/components/RChart/src/index.tsx

@@ -43,7 +43,7 @@ import props from './props'
 import { throttle } from 'lodash-es'
 import { completeSize, downloadBase64File, call, renderNode } from '@/utils'
 import { setupChartTheme } from './helper'
-import { APP_THEME } from '@/app-config/designConfig'
+import { APP_THEME } from '@/app-config'
 import { useResizeObserver } from '@vueuse/core'
 import { RMoreDropdown } from '@/components'
 import { useSettingGetters } from '@/store'

src/components/RChart/src/type.ts

@@ -75,6 +75,13 @@ export interface RChartInst {
    * @default () => void
    */
   render: () => void
+  /**
+   *
+   * 判断图表是否已经卸载
+   *
+   * @returns 图表是否已经卸载
+   */
+  isDispose: () => boolean
 }
 
 export type EChartsExtensionInstallRegisters = typeof CanvasRenderer

src/components/RCollapseGrid/src/index.tsx

@@ -21,7 +21,7 @@
 
 import './index.scss'
 
-import { NCard, NGrid, NGridItem, NSpace } from 'naive-ui'
+import { NCard, NGrid, NGridItem, NFlex } from 'naive-ui'
 import { RIcon } from '@/components'
 
 import { call } from '@/utils'
@@ -85,10 +85,10 @@ export default defineComponent({
             >
               {this.$slots.default?.()}
               <NGridItem suffix class="ray-collapse-grid__suffix--btn">
-                <NSpace justify="end">
+                <NFlex justify="end">
                   {this.$slots.action?.()}
                   {this.CollapseIcon()}
-                </NSpace>
+                </NFlex>
               </NGridItem>
             </NGrid>
           ),

src/components/RTable/src/Table.tsx

@@ -11,7 +11,7 @@
 
 import './index.scss'
 
-import { NCard, NDataTable, NDropdown, NSpace } from 'naive-ui'
+import { NCard, NDataTable, NDropdown, NFlex } from 'naive-ui'
 import Size from './components/Size'
 import Fullscreen from './components/Fullscreen'
 import C from './components/C'
@@ -238,10 +238,10 @@ export default defineComponent({
             defaultElement: <div style="display: none;"></div>,
           }),
           'header-extra': () => (
-            <NSpace wrapItem={false} align="center">
+            <NFlex align="center">
               {/* eslint-disable @typescript-eslint/no-explicit-any */}
               {tool(this.$props as any)}
-            </NSpace>
+            </NFlex>
           ),
           footer: () => this.$slots.tableFooter?.(),
           action: () => this.$slots.tableAction?.(),

src/components/RTable/src/components/C.tsx

@@ -18,7 +18,7 @@
  * 2. 大量数据的时候，可能会出现性能问题
  */
 
-import { NPopover, NSpace, NTree } from 'naive-ui'
+import { NPopover, NFlex, NTree } from 'naive-ui'
 import { RIcon } from '@/components'
 
 import config from '../config'
@@ -65,6 +65,13 @@ const RowIconRender = ({
   )
 }
 
+/**
+ * 查找节点的兄弟节点和索引
+ *
+ * @param node 要查找的节点
+ * @param nodes 节点列表
+ * @returns 如果找到节点，则返回包含兄弟节点列表和索引的元组，否则返回 [null, null]
+ */
 const findSiblingsAndIndex = (
   node: TreeOption,
   nodes?: TreeOption[],
@@ -122,7 +129,7 @@ export default defineComponent({
           return {
             ...attr,
             suffix: () => (
-              <NSpace wrapItem={false} style="padding-left: 32px;">
+              <NFlex style="padding-left: 32px;">
                 <RowIconRender
                   icon="row_head"
                   title="固定在列首"
@@ -155,7 +162,7 @@ export default defineComponent({
                   }
                   onClick={fixedClick.bind(this, 'right', attr, idx)}
                 />
-              </NSpace>
+              </NFlex>
             ),
           }
         }) as C[]
@@ -192,6 +199,7 @@ export default defineComponent({
       event(treeDataSource.value)
     }
 
+    // 拖拽节点的处理函数
     const treeDrop = ({ node, dragNode, dropPosition }: TreeDropInfo) => {
       const [dragNodeSiblings, dragNodeIndex] = findSiblingsAndIndex(
         dragNode,
@@ -202,6 +210,7 @@ export default defineComponent({
         return
       }
 
+      // 从兄弟节点中移除拖拽节点
       dragNodeSiblings.splice(dragNodeIndex, 1)
 
       const [nodeSiblings, nodeIndex] = findSiblingsAndIndex(
@@ -213,10 +222,12 @@ export default defineComponent({
         return
       }
 
+      // 根据拖拽位置将拖拽节点插入到目标节点的前面或后面
       dropPosition === 'before'
         ? nodeSiblings.splice(nodeIndex, 0, dragNode)
         : nodeSiblings.splice(nodeIndex + 1, 0, dragNode)
 
+      // 触发事件，更新树形数据源
       event(nodeSiblings as C[])
     }
 

src/components/RTransitionComponent/src/index.vue

@@ -24,7 +24,7 @@
 </template>
 <script lang="ts" setup>
 import { useKeepAliveGetters } from '@/store'
-import { APP_KEEP_ALIVE } from '@/app-config/appConfig'
+import { APP_KEEP_ALIVE } from '@/app-config'
 import props from './props'
 
 import type { TransitionProps } from './type'

src/dayjs/index.ts

@@ -10,7 +10,7 @@
  */
 
 import dayjs from 'dayjs'
-import { DEFAULT_DAYJS_LOCAL } from '@/app-config/localConfig'
+import { DEFAULT_DAYJS_LOCAL } from '@/app-config'
 import 'dayjs/locale/zh-cn'
 
 export const setupDayjs = () => {

src/directives/README_DIR.md

@@ -8,7 +8,7 @@
 #### 示例
 
 ```tsx
-import { NSpace, NCard, NInput, NInputGroup, NButton, NSwitch } from 'naive-ui'
+import { NFlex, NCard, NInput, NInputGroup, NButton, NSwitch } from 'naive-ui'
 
 const Demo = defineComponent({
   name: 'Demo',
@@ -46,7 +46,7 @@ const Demo = defineComponent({
 #### 示例
 
 ```tsx
-import { NSpace, NCard, NInput, NInputGroup, NButton, NSwitch } from 'naive-ui'
+import { NFlex, NCard, NInput, NInputGroup, NButton, NSwitch } from 'naive-ui'
 
 const Demo = defineComponent({
   name: 'Demo',
@@ -64,7 +64,7 @@ const Demo = defineComponent({
   },
   render() {
     return (
-      <NSpace wrapItem={true} vertical>
+      <NFlex wrapItem={true} vertical>
         <NButton
           v-debounce={{
             func: this.updateDemoValue,
@@ -77,7 +77,7 @@ const Demo = defineComponent({
         </NButton>
         <p>我执行了{this.demoValue}次</p>
         <p>该方法将延迟 1s 执行</p>
-      </NSpace>
+      </NFlex>
     )
   },
 })
@@ -99,7 +99,7 @@ const Demo = defineComponent({
 #### 示例
 
 ```tsx
-import { NSpace, NCard, NInput, NInputGroup, NButton, NSwitch } from 'naive-ui'
+import { NFlex, NCard, NInput, NInputGroup, NButton, NSwitch } from 'naive-ui'
 
 const Demo = defineComponent({
   name: 'Demo',
@@ -117,7 +117,7 @@ const Demo = defineComponent({
   },
   render() {
     return (
-      <NSpace wrapItem={true} vertical>
+      <NFlex wrapItem={true} vertical>
         <NButton
           v-throttle={{
             func: this.updateDemoValue,
@@ -130,7 +130,7 @@ const Demo = defineComponent({
         </NButton>
         <p>我执行了{this.demoValue}次</p>
         <p>该方法 1s 内仅会执行一次</p>
-      </NSpace>
+      </NFlex>
     )
   },
 })
@@ -149,7 +149,7 @@ const Demo = defineComponent({
 
 ```tsx
 import {
-  NSpace,
+  NFlex,
   NCard,
   NInput,
   NInputGroup,
@@ -170,7 +170,7 @@ const Demo = defineComponent({
   },
   render() {
     return (
-      <NSpace vertical>
+      <NFlex vertical>
         <NSwitch v-model:value={this.disabledValue}>
           {{
             checked: () => '取消',
@@ -182,22 +182,22 @@ const Demo = defineComponent({
           组件提供了完整的 disabled
           属性，所以在组件库有禁用需求时，直接调用组件库 disabled 属性即可
         </p>
-        <NSpace vertical wrapItem={false}>
+        <NFlex vertical wrapItem={false}>
           <NCard title="原生表单" bordered={false}>
-            <NSpace vertical wrapItem={false}>
+            <NFlex vertical wrapItem={false}>
               <form v-disabled={this.disabledValue}>
                 <input type="text" placeholder="请输入" />
                 <button>提交</button>
               </form>
-            </NSpace>
+            </NFlex>
           </NCard>
           <NCard title="文本内容" bordered={false}>
-            <NSpace vertical wrapItem={false}>
+            <NFlex vertical wrapItem={false}>
               <p v-disabled={this.disabledValue}>我是可以被禁用的文本内容</p>
-            </NSpace>
+            </NFlex>
           </NCard>
           <NCard title="naive 组件" bordered={false}>
-            <NSpace vertical wrapItem={false} justify="start">
+            <NFlex vertical wrapItem={false} justify="start">
               <NButton v-disabled={this.disabledValue}>按钮</NButton>
               <NForm v-disabled={this.disabledValue}>
                 <NFormItem label="名称">
@@ -205,10 +205,10 @@ const Demo = defineComponent({
                 </NFormItem>
               </NForm>
               <NSwitch v-disabled={this.disabledValue}></NSwitch>
-            </NSpace>
+            </NFlex>
           </NCard>
-        </NSpace>
+        </NFlex>
-      </NSpace>
+      </NFlex>
     )
   },
 })

src/hooks/components/useContextmenuCoordinate.ts

@@ -62,20 +62,37 @@ export const useContextmenuCoordinate = (
     })
   }
 
+  /**
+   *
+   * 点击元素外部时，隐藏右键菜单
+   */
   onClickOutside(target as MaybeElementRef<MaybeElement>, () => {
     show.value = false
   })
 
+  /**
+   *
+   * 为传递 ref dom 绑定右键菜单事件
+   */
   const cleanupContextmenu = useEventListener(
     target,
     'contextmenu',
     bindContextMenuEvent,
     options,
   )
+  /**
+   *
+   * 为传递 ref dom 绑定点击事件
+   */
   const cleanupClick = useEventListener(target, 'click', () => {
     show.value = false
   })
 
+  /**
+   *
+   * 注销绑定的右键菜单事件、点击事件
+   * 仅注销该方法绑定的事件
+   */
   const stop = () => {
     cleanupContextmenu()
     cleanupClick()
@@ -85,7 +102,7 @@ export const useContextmenuCoordinate = (
     stop,
     x: readonly(x),
     y: readonly(y),
-    show,
+    show: readonly(show),
   }
 }
 

src/hooks/index.ts

@@ -0,0 +1,3 @@
+export * from './components'
+export * from './template'
+export * from './web'

src/hooks/template/useAppNavigation.ts

@@ -9,11 +9,31 @@
  * @remark 今天也是元气满满撸代码的一天
  */
 
-import { useMenuGetters, useMenuActions } from '@/store'
+import { useMenuGetters } from '@/store'
+import { useVueRouter } from '@/hooks'
 
 import type { AppMenuOption } from '@/types'
+import type { LocationQuery } from 'vue-router'
 
-export type Target = number | AppMenuOption
+export type Target = number | AppMenuOption | string
+
+export interface NavigationToOptions {
+  /**
+   *
+   * 是否为 push 模式
+   * 如果设置为 true， 则会使用 vue-router 的 push 方法进行导航，否则使用 replace 方法进行导航
+   *
+   * @default true
+   */
+  isPush?: boolean
+  /**
+   *
+   * 跳转参数
+   *
+   * @default undefined
+   */
+  query?: LocationQuery
+}
 
 /**
  *
@@ -21,8 +41,6 @@ export type Target = number | AppMenuOption
  * 但是该方法仅限于在登入后调用
  */
 export function useAppNavigation() {
-  const { changeMenuModelValue } = useMenuActions()
-
   /**
    *
    * @param target 需要导航的目标地址
@@ -36,8 +54,25 @@ export function useAppNavigation() {
    * @example
    * navigationTo(1) // 导航至第二个菜单项，如果为根菜单项，会自动的递归导航至第一个子菜单项
    * navigationTo({ AppMenuOption }) // 导航至目标菜单项
+   * navigationTo('path') // 导航至目标路由
    */
-  const navigationTo = (target: Target) => {
+  const navigationTo = (target: Target, option?: NavigationToOptions) => {
+    const {
+      router: { getRoutes, push, replace },
+    } = useVueRouter()
+    const { isPush = true, query } = option || {}
+
+    const isPushNavigation = (path: string) =>
+      isPush
+        ? push({
+            path,
+            query,
+          })
+        : replace({
+            path,
+            query,
+          })
+
     if (typeof target === 'number') {
       // 校验是否为 NaN
       if (isNaN(target)) {
@@ -71,12 +106,20 @@ export function useAppNavigation() {
           return
         }
 
-        changeMenuModelValue(routes.key, routes)
+        isPushNavigation(routes.fullPath)
       }
 
       deepNavigation(option)
+    } else if (typeof target === 'string') {
+      const fd = getRoutes().find((curr) => curr.path === target)
+
+      if (fd) {
+        isPushNavigation(fd.path)
+      } else {
+        console.warn(`navigationTo: The path "${target}" is not found.`)
+      }
     } else {
-      changeMenuModelValue(target.key, target)
+      isPushNavigation(target.fullPath)
     }
   }
 

src/hooks/template/useMaximize.ts

@@ -10,12 +10,27 @@
  */
 
 import { setVariable, getVariableToRefs } from '@/global-variable'
-import { LAYOUT_CONTENT_REF } from '@/app-config/routerConfig'
+import { LAYOUT_CONTENT_REF } from '@/app-config'
 import { unrefElement } from '@/utils'
 import { useElementFullscreen } from '../web'
 
 import type { UseElementFullscreenOptions } from '../web'
 
+export interface ScrollToOptions {
+  left?: number
+  top?: number
+  behavior?: 'auto' | 'smooth' | 'instant'
+}
+
+export interface MaximizeOptions extends UseElementFullscreenOptions {
+  /**
+   *
+   * 配置全屏后滚动的位置，left、top、behavior
+   * 基于 LAYOUT_CONTENT_REF 实现
+   */
+  scrollToOptions?: ScrollToOptions
+}
+
 export const useMaximize = () => {
   /**
    *
@@ -37,15 +52,20 @@ export const useMaximize = () => {
    * 该方法仅针对于 LayoutContent 区域，并且依赖全局属性 layoutContentMaximize
    *
    * @example
-   * maximize(true, { UseElementFullscreenOptions }) 全屏内容区域
+   * maximize(true, { MaximizeOptions }) 全屏内容区域
-   * maximize(false, { UseElementFullscreenOptions }) 取消全屏内容区域
+   * maximize(false, { MaximizeOptions }) 取消全屏内容区域
    */
-  const maximize = (full: boolean, options?: UseElementFullscreenOptions) => {
+  const maximize = (full: boolean, options?: MaximizeOptions) => {
+    const { scrollToOptions } = options ?? {}
     const contentEl = unrefElement(LAYOUT_CONTENT_REF as Ref<HTMLElement>)
     const { toggleFullscreen } = useElementFullscreen(contentEl, options)
 
     setVariable('layoutContentMaximize', full)
     toggleFullscreen()
+
+    if (scrollToOptions) {
+      LAYOUT_CONTENT_REF?.value?.scrollTo(scrollToOptions)
+    }
   }
 
   return {

src/hooks/template/useSiderBar.ts

@@ -50,7 +50,7 @@ const normalMenuTagOption = (target: CloseMenuTag, fc: string) => {
   } else if (typeof target === 'string') {
     // 查找符合条件的 key
     const index = getMenuTagOptions.value.findIndex(
-      (curr) => curr.key === target,
+      (curr) => curr.fullPath === target,
     )
 
     return index > -1
@@ -62,12 +62,14 @@ const normalMenuTagOption = (target: CloseMenuTag, fc: string) => {
           `${fc}: The incoming key ${target} did not match the corresponding item.`,
         )
   } else {
-    const { key } = target
+    const { fullPath } = target
-    const index = getMenuTagOptions.value.findIndex((curr) => curr.key === key)
+    const index = getMenuTagOptions.value.findIndex(
+      (curr) => curr.fullPath === fullPath,
+    )
 
     if (index === -1) {
       console.warn(
-        `${fc}: The incoming menuTag option ${target.key} did not match the corresponding item.`,
+        `${fc}: The incoming menuTag option ${target.fullPath} did not match the corresponding item.`,
       )
 
       return
@@ -82,12 +84,8 @@ const normalMenuTagOption = (target: CloseMenuTag, fc: string) => {
 
 export function useSiderBar() {
   const { getMenuTagOptions, getMenuKey } = useMenuGetters()
-  const {
+  const { changeMenuModelValue, spliceMenTagOptions, setMenuTagOptions } =
-    changeMenuModelValue,
+    useMenuActions()
-    spliceMenTagOptions,
-    emptyMenuTagOptions,
-    setMenuTagOptions,
-  } = useMenuActions()
 
   /**
    *
@@ -95,7 +93,7 @@ export function useSiderBar() {
    */
   const getCurrentTagIndex = () => {
     return getMenuTagOptions.value.findIndex(
-      (curr) => curr.key === getMenuKey.value,
+      (curr) => curr.fullPath === getMenuKey.value,
     )
   }
 
@@ -172,11 +170,11 @@ export function useSiderBar() {
 
       spliceMenTagOptions(index)
 
-      if (option.key === getMenuKey.value) {
+      if (option.fullPath === getMenuKey.value) {
         const tag = getMenuTagOptions.value[index - 1]
 
         if (tag) {
-          changeMenuModelValue(tag.key, tag)
+          changeMenuModelValue(tag.fullPath, tag)
         }
       }
     }
@@ -187,8 +185,8 @@ export function useSiderBar() {
    * 关闭所有标签并且导航至 root path
    */
   const closeAll = () => {
-    emptyMenuTagOptions()
+    spliceMenTagOptions(0, getMenuTagOptions.value.length)
-    redirectRouterToDashboard()
+    nextTick(redirectRouterToDashboard)
   }
 
   /**
@@ -214,8 +212,8 @@ export function useSiderBar() {
       spliceMenTagOptions(index + 1, spliceLength)
 
       if (index <= currentIndex) {
-        if (getMenuKey.value !== option.key) {
+        if (getMenuKey.value !== option.fullPath) {
-          changeMenuModelValue(option.key, option)
+          changeMenuModelValue(option.fullPath, option)
         }
       }
     }
@@ -243,8 +241,8 @@ export function useSiderBar() {
       spliceMenTagOptions(0, index)
 
       if (currentIndex <= index) {
-        if (getMenuKey.value !== option.key) {
+        if (getMenuKey.value !== option.fullPath) {
-          changeMenuModelValue(option.key, option)
+          changeMenuModelValue(option.fullPath, option)
         }
       }
     }
@@ -267,9 +265,9 @@ export function useSiderBar() {
     if (normal) {
       const { option } = normal
 
-      if (getMenuKey.value !== option.key) {
+      if (getMenuKey.value !== option.fullPath) {
-        emptyMenuTagOptions()
+        spliceMenTagOptions(0, getMenuTagOptions.value.length)
-        changeMenuModelValue(option.key, option)
+        changeMenuModelValue(option.fullPath, option)
       } else {
         setMenuTagOptions(option, false)
       }

src/hooks/template/useTheme.ts

@@ -10,7 +10,7 @@
  */
 
 import { useSettingActions, useSettingGetters } from '@/store'
-import { useI18n } from '@/hooks/web'
+import { useI18n } from '@/hooks'
 
 export const useTheme = () => {
   /**

src/hooks/web/useDayjs.ts

@@ -10,7 +10,7 @@
  */
 
 import dayjs from 'dayjs'
-import { DEFAULT_DAYJS_LOCAL, DAYJS_LOCAL_MAP } from '@/app-config/localConfig'
+import { DEFAULT_DAYJS_LOCAL, DAYJS_LOCAL_MAP } from '@/app-config'
 
 export interface FormatOption {
   format?: string

src/hooks/web/useElementFullscreen.ts

@@ -15,9 +15,39 @@ import { useWindowSize } from '@vueuse/core'
 import type { BasicTarget } from '@/types'
 
 export interface UseElementFullscreenOptions {
+  /**
+   *
+   * 进入全屏前的回调
+   */
   beforeEnter?: () => void
+  /**
+   *
+   * 进入全屏后的回调
+   */
+  enter?: () => void
+  /**
+   *
+   * 退出全屏前的回调
+   */
   beforeExit?: () => void
+  /**
+   *
+   * 退出全屏后的回调
+   */
+  exit?: () => void
+  /**
+   *
+   * 全屏时的 z-index
+   *
+   * @default 999
+   */
   zIndex?: number
+  /**
+   *
+   * 全屏时的背景色
+   *
+   * @default null
+   */
   backgroundColor?: string
 }
 
@@ -54,7 +84,14 @@ export const useElementFullscreen = (
   target: BasicTarget,
   options?: UseElementFullscreenOptions,
 ) => {
-  const { beforeEnter, beforeExit, backgroundColor, zIndex } = options ?? {}
+  const {
+    beforeEnter,
+    beforeExit,
+    enter: _enter,
+    exit: _exit,
+    backgroundColor,
+    zIndex,
+  } = options ?? {}
   const cacheStyle: Partial<CSSStyleDeclaration> = {} // 缓存一些需要被覆盖的样式，例如: transition
   let isSetup = false
 
@@ -114,6 +151,8 @@ export const useElementFullscreen = (
 
       cacheStyle.transition = element.style.transition
       element.style.transition = 'all 0.3s var(--r-bezier)'
+
+      _enter?.()
     }
   }
 
@@ -125,6 +164,8 @@ export const useElementFullscreen = (
     if (element) {
       element.removeAttribute(ID_TAG)
     }
+
+    _exit?.()
   }
 
   const toggleFullscreen = () => {

src/layout/components/Menu/index.tsx

@@ -14,8 +14,8 @@ import './index.scss'
 import { NMenu, NLayoutSider, NDrawer } from 'naive-ui'
 import SiderBarLogo from './components/SiderBarLogo'
 
-import { APP_MENU_CONFIG } from '@/app-config/appConfig'
+import { APP_MENU_CONFIG } from '@/app-config'
-import { useDevice } from '@/hooks/web'
+import { useDevice } from '@/hooks'
 import { getVariableToRefs, setVariable } from '@/global-variable'
 import { useMenuGetters, useMenuActions } from '@/store'
 
@@ -78,6 +78,7 @@ export default defineComponent({
         <NMenu
           ref={menuRef}
           class="r-menu--app"
+          keyField="fullPath"
           v-model:value={modelMenuKey.value}
           options={getMenuOptions.value as NaiveMenuOptions[]}
           indent={APP_MENU_CONFIG.menuCollapsedIndent}

src/layout/components/MenuTag/index.tsx

@@ -33,7 +33,7 @@ import './index.scss'
 
 import {
   NScrollbar,
-  NSpace,
+  NFlex,
   NLayoutHeader,
   NDropdown,
   NButton,
@@ -46,10 +46,8 @@ import CloseLeft from '@/icons/close_left.svg?component'
 
 import { useMenuGetters, useMenuActions } from '@/store'
 import { hasClass, uuid, queryElements } from '@/utils'
-import { useMaximize, useSpinning } from '@/hooks/template'
+import { useMaximize, useSpinning, useAppRoot, useSiderBar } from '@/hooks'
-import { useSiderBar } from '@/hooks/template'
 import { throttle } from 'lodash-es'
-import { useAppRoot } from '@/hooks/template'
 
 import type { ScrollbarInst } from 'naive-ui'
 import type { MenuTagOptions, AppMenuOption } from '@/types'
@@ -180,10 +178,10 @@ export default defineComponent({
      *
      * @param option 当前菜单值
      */
-    const handleTagClick = (option: AppMenuOption) => {
+    const menuTagClick = (option: AppMenuOption) => {
       actionState.actionDropdownShow = false
 
-      changeMenuModelValue(option.key, option)
+      changeMenuModelValue(option.fullPath, option)
     }
 
     /**
@@ -248,7 +246,7 @@ export default defineComponent({
      *
      * 缓存当前点击标签页索引值(用于关闭左或者右侧标签页操作)
      */
-    const handleContextMenu = (idx: number, e: MouseEvent) => {
+    const menuTagContextMenu = (idx: number, e: MouseEvent) => {
       e.preventDefault()
 
       actionState.actionDropdownShow = false
@@ -399,17 +397,16 @@ export default defineComponent({
 
     return {
       getMenuTagOptions,
-      changeMenuModelValue,
       closeCurrentMenuTag,
       getMenuKey,
-      handleTagClick,
+      menuTagClick,
       moreOptions,
       scrollX,
       scrollRef,
       uuidScrollBar,
       actionDropdownSelect,
       actionState,
-      handleContextMenu,
+      menuTagContextMenu,
       setCurrentContextmenuIndex,
       menuTagMouseenter,
       menuTagMouseleave,
@@ -423,8 +420,24 @@ export default defineComponent({
     }
   },
   render() {
-    const { iconConfig, getRootPath, uuidScrollBar, getMenuTagOptions } = this
+    const {
-    const { maximize, closeCurrentMenuTag, scrollX, $t } = this
+      iconConfig,
+      getRootPath,
+      uuidScrollBar,
+      getMenuTagOptions,
+      MENU_TAG_DATA,
+    } = this
+    const {
+      maximize,
+      closeCurrentMenuTag,
+      scrollX,
+      $t,
+      menuTagClick,
+      menuTagContextMenu,
+      menuTagMouseenter,
+      menuTagMouseleave,
+      actionDropdownSelect,
+    } = this
 
     return (
       <NLayoutHeader>
@@ -438,18 +451,17 @@ export default defineComponent({
             show={this.actionState.actionDropdownShow}
             trigger="manual"
             placement="bottom-start"
-            onSelect={this.actionDropdownSelect.bind(this)}
+            onSelect={actionDropdownSelect.bind(this)}
             onClickoutside={() => {
               this.actionState.actionDropdownShow = false
             }}
           />
-          <NSpace
+          <NFlex
             class="menu-tag-space"
             wrap={false}
             align="center"
             justify="space-between"
             inline
-            wrapItem={false}
           >
             <RIcon
               name="expanded"
@@ -465,7 +477,7 @@ export default defineComponent({
                 id: uuidScrollBar,
               }}
             >
-              <NSpace
+              <NFlex
                 ref="menuTagSpaceRef"
                 class="menu-tag-wrapper"
                 wrap={false}
@@ -474,17 +486,19 @@ export default defineComponent({
               >
                 {getMenuTagOptions.map((curr, idx) => (
                   <NButton
-                    key={curr.key}
+                    key={curr.fullPath}
                     class={['menu-tag__btn']}
                     strong
                     secondary
-                    type={curr.key === this.getMenuKey ? 'primary' : 'default'}
+                    type={
+                      curr.fullPath === this.getMenuKey ? 'primary' : 'default'
+                    }
                     {...{
-                      onClick: this.handleTagClick.bind(this, curr),
+                      onClick: menuTagClick.bind(this, curr),
-                      onContextmenu: this.handleContextMenu.bind(this, idx),
+                      onContextmenu: menuTagContextMenu.bind(this, idx),
-                      onMouseenter: this.menuTagMouseenter.bind(this, curr),
+                      onMouseenter: menuTagMouseenter.bind(this, curr),
-                      onMouseleave: this.menuTagMouseleave.bind(this, curr),
+                      onMouseleave: menuTagMouseleave.bind(this, curr),
-                      [this.MENU_TAG_DATA]: curr.path,
+                      [MENU_TAG_DATA]: curr.path,
                     }}
                   >
                     {{
@@ -530,11 +544,10 @@ export default defineComponent({
                     }}
                   </NButton>
                 ))}
-              </NSpace>
+              </NFlex>
             </NScrollbar>
-            <NSpace
+            <NFlex
               class="menu-tag__right-wrapper"
-              wrapItem={false}
               align="center"
               inline
               wrap={false}
@@ -572,8 +585,8 @@ export default defineComponent({
                   onClick={this.setCurrentContextmenuIndex.bind(this)}
                 />
               </RMoreDropdown>
-            </NSpace>
+            </NFlex>
-          </NSpace>
+          </NFlex>
         </div>
       </NLayoutHeader>
     )

src/layout/components/SiderBar/components/Breadcrumb/index.tsx

@@ -24,7 +24,7 @@ import { NDropdown, NBreadcrumb, NBreadcrumbItem } from 'naive-ui'
 import { TransitionGroup } from 'vue'
 
 import { useMenuGetters, useMenuActions } from '@/store'
-import { useDevice } from '@/hooks/web'
+import { useDevice } from '@/hooks'
 
 import type { DropdownOption } from 'naive-ui'
 import type { AppMenuOption } from '@/types'
@@ -51,7 +51,7 @@ export default defineComponent({
         const { meta = {} } = option
 
         if (!meta.sameLevel) {
-          changeMenuModelValue(option.key, option)
+          changeMenuModelValue(option.fullPath, option)
         }
       }
     }
@@ -74,11 +74,12 @@ export default defineComponent({
         <TransitionGroup tag="li" name="breadcrumb" appear>
           {getBreadcrumbOptions.map((curr) => (
             <NBreadcrumbItem
-              key={curr.path}
+              key={curr.fullPath}
               onClick={breadcrumbItemClick.bind(this, curr)}
             >
               <NDropdown
                 labelField="breadcrumbLabel"
+                keyField="fullPath"
                 options={
                   curr.children && curr.children?.length > 1
                     ? curr.children

src/layout/components/SiderBar/components/GlobalSearch/index.tsx

@@ -20,14 +20,14 @@
 
 import './index.scss'
 
-import { NInput, NModal, NResult, NScrollbar, NSpace } from 'naive-ui'
+import { NInput, NModal, NResult, NScrollbar, NFlex } from 'naive-ui'
 import { RIcon } from '@/components'
 
 import { queryElements, addClass, removeClass } from '@/utils'
 import { debounce } from 'lodash-es'
 import { useMenuGetters, useMenuActions } from '@/store'
 import { validMenuItemShow } from '@/router/helper/routerCopilot'
-import { useDevice } from '@/hooks/web'
+import { useDevice } from '@/hooks'
 import { useEventListener } from '@vueuse/core'
 
 import type { AppRouteMeta } from '@/router/type'
@@ -155,7 +155,7 @@ export default defineComponent({
         } else {
           modelShow.value = false
 
-          changeMenuModelValue(option.key, option)
+          changeMenuModelValue(option.fullPath, option)
         }
       }
     }
@@ -255,9 +255,8 @@ export default defineComponent({
     }
 
     const SearchItem = ({ menuOption }: { menuOption: AppMenuOption }) => (
-      <NSpace
+      <NFlex
         align="center"
-        wrapItem={false}
         class="content-item"
         {...{
           onClick: handleSearchItemClick.bind(this, menuOption),
@@ -266,7 +265,7 @@ export default defineComponent({
       >
         <div class="content-item-icon">{RenderPreIcon(menuOption.meta)}</div>
         <div class="content-item-label">{menuOption.breadcrumbLabel}</div>
-      </NSpace>
+      </NFlex>
     )
 
     watchEffect(() => {
@@ -294,7 +293,7 @@ export default defineComponent({
   },
   render() {
     const { isTabletOrSmaller, searchOptions } = this
-    const { SearchItem } = this
+    const { SearchItem, fuzzySearchMenuOptions } = this
 
     return isTabletOrSmaller ? (
       <div style="display: none;"></div>
@@ -312,7 +311,7 @@ export default defineComponent({
                   size="large"
                   v-model:value={this.searchValue}
                   clearable
-                  onInput={this.fuzzySearchMenuOptions.bind(this)}
+                  onInput={fuzzySearchMenuOptions.bind(this)}
                 >
                   {{
                     prefix: () => <RIcon name="search" size="24" />,
@@ -321,34 +320,32 @@ export default defineComponent({
               </div>
               <NScrollbar class="global-search__card-content">
                 {searchOptions.length ? (
-                  <NSpace vertical wrapItem={false} size={[8, 8]}>
+                  <NFlex vertical size={[8, 8]}>
                     {searchOptions.map((curr) => (
-                      <SearchItem menuOption={curr} key={curr.key} />
+                      <SearchItem menuOption={curr} key={curr.fullPath} />
                     ))}
-                  </NSpace>
+                  </NFlex>
                 ) : (
                   <NResult size="large" class="global-search__empty">
                     {{
                       icon: () => null,
                       default: () => (
-                        <NSpace
+                        <NFlex
-                          wrapItem={false}
                           justify="center"
                           class="global-search__empty-content"
                         >
                           <RIcon name="empty" size="24" />
                           暂无搜索结果
-                        </NSpace>
+                        </NFlex>
                       ),
                     }}
                   </NResult>
                 )}
               </NScrollbar>
               <div class="global-search__card-footer">
-                <NSpace
+                <NFlex
                   class="card-footer__tip-wrapper"
                   align="center"
-                  wrapItem={false}
                   size={[24, 8]}
                 >
                   {this.helperTipOptions.map((curr) => (
@@ -363,7 +360,7 @@ export default defineComponent({
                       <div class="item-label">{curr.label}</div>
                     </div>
                   ))}
-                </NSpace>
+                </NFlex>
               </div>
             </div>
           </div>

src/layout/components/SiderBar/components/SettingDrawer/components/ThemeSwitch/index.tsx

@@ -9,11 +9,11 @@
  * @remark 今天也是元气满满撸代码的一天
  */
 
-import { NSpace, NSwitch, NTooltip } from 'naive-ui'
+import { NFlex, NSwitch, NTooltip } from 'naive-ui'
 import { RIcon } from '@/components'
 
 import { useSettingGetters } from '@/store'
-import { useTheme } from '@/hooks/template'
+import { useTheme } from '@/hooks'
 
 export default defineComponent({
   name: 'ThemeSwitch',
@@ -44,7 +44,7 @@ export default defineComponent({
     const { $t, changeDarkTheme, changeLightTheme, railStyle } = this
 
     return (
-      <NSpace justify="center">
+      <NFlex justify="center">
         <NTooltip>
           {{
             trigger: () => (
@@ -69,7 +69,7 @@ export default defineComponent({
                 : $t('headerSettingOptions.ThemeOptions.Light'),
           }}
         </NTooltip>
-      </NSpace>
+      </NFlex>
     )
   },
 })

src/layout/components/SiderBar/components/SettingDrawer/index.tsx

@@ -14,7 +14,7 @@ import {
   NDrawer,
   NDrawerContent,
   NDivider,
-  NSpace,
+  NFlex,
   NSwitch,
   NColorPicker,
   NDescriptions,
@@ -23,7 +23,7 @@ import {
 } from 'naive-ui'
 import ThemeSwitch from '@/layout/components/SiderBar/components/SettingDrawer/components/ThemeSwitch'
 
-import { APP_THEME } from '@/app-config/designConfig'
+import { APP_THEME } from '@/app-config'
 import { useSettingGetters, useSettingActions } from '@/store'
 
 import type { PropType } from 'vue'
@@ -111,7 +111,7 @@ const SettingDrawer = defineComponent({
         width={this.width}
       >
         <NDrawerContent title={$t('headerSettingOptions.Title')}>
-          <NSpace class="setting-drawer__space" vertical>
+          <NFlex class="setting-drawer__space" vertical>
             <NDivider titlePlacement="center">
               {$t('headerSettingOptions.ThemeOptions.Title')}
             </NDivider>
@@ -171,7 +171,7 @@ const SettingDrawer = defineComponent({
                 />
               </NDescriptionsItem>
             </NDescriptions>
-          </NSpace>
+          </NFlex>
         </NDrawerContent>
       </NDrawer>
     )

src/layout/components/SiderBar/index.tsx

@@ -19,7 +19,7 @@
 
 import './index.scss'
 
-import { NLayoutHeader, NSpace, NDropdown } from 'naive-ui'
+import { NLayoutHeader, NFlex, NDropdown } from 'naive-ui'
 import { RIcon } from '@/components'
 import TooltipIcon from '@/layout/components/SiderBar/components/TooltipIcon'
 import SettingDrawer from './components/SettingDrawer'
@@ -27,18 +27,16 @@ import Breadcrumb from './components/Breadcrumb'
 import GlobalSearch from './components/GlobalSearch'
 import AppAvatar from '@/app-components/app/AppAvatar'
 
-import { LOCAL_OPTIONS } from '@/app-config/localConfig'
+import { LOCAL_OPTIONS } from '@/app-config'
 import {
   createAvatarOptions,
   avatarDropdownClick,
   createLeftIconOptions,
   createRightIconOptions,
 } from './shared'
-import { useDevice } from '@/hooks/web'
+import { useDevice, useSpinning, useI18n } from '@/hooks'
 import { getVariableToRefs, setVariable } from '@/global-variable'
 import { useFullscreen } from 'vue-hooks-plus'
-import { useI18n } from '@/hooks/web'
-import { useSpinning } from '@/hooks/template'
 import { useSettingGetters, useSettingActions } from '@/store'
 
 import type { IconEventMapOptions, IconEventMap } from './type'
@@ -55,9 +53,6 @@ export default defineComponent({
     )
     const { getDrawerPlacement, getBreadcrumbSwitch } = useSettingGetters()
     const showSettings = ref(false) // 是否显示设置抽屉
-    const spaceItemStyle = {
-      display: 'flex',
-    }
     const globalSearchShown = ref(false) // 是否展示全局搜索
     const { isTabletOrSmaller } = useDevice()
     const globalDrawerValue = getVariableToRefs('globalDrawerValue')
@@ -124,7 +119,6 @@ export default defineComponent({
       toolIconClick,
       showSettings,
       updateLocale,
-      spaceItemStyle,
       getDrawerPlacement,
       getBreadcrumbSwitch,
       globalSearchShown,
@@ -134,16 +128,12 @@ export default defineComponent({
     return (
       <NLayoutHeader class="layout-header" bordered>
         <GlobalSearch v-model:show={this.globalSearchShown} />
-        <NSpace
+        <NFlex
           class="layout-header__method"
           align="center"
           justify="space-between"
         >
-          <NSpace
+          <NFlex align="center">
-            align="center"
-            wrapItem={false}
-            itemStyle={this.spaceItemStyle}
-          >
             {this.leftIconOptions.map((curr) => (
               <TooltipIcon
                 key={curr.name}
@@ -156,12 +146,8 @@ export default defineComponent({
               />
             ))}
             {this.getBreadcrumbSwitch ? <Breadcrumb /> : null}
-          </NSpace>
+          </NFlex>
-          <NSpace
+          <NFlex align="center">
-            align="center"
-            wrapItem={false}
-            itemStyle={this.spaceItemStyle}
-          >
             {this.rightTooltipIconOptions.map((curr) => (
               <TooltipIcon
                 key={curr.name}
@@ -194,8 +180,8 @@ export default defineComponent({
             >
               <AppAvatar avatarSize="small" align="center" cursor="pointer" />
             </NDropdown>
-          </NSpace>
+          </NFlex>
-        </NSpace>
+        </NFlex>
         <SettingDrawer
           v-model:show={this.showSettings}
           placement={this.getDrawerPlacement}

src/layout/components/SiderBar/shared.ts

@@ -1,4 +1,4 @@
-import { useI18n } from '@/hooks/web'
+import { useI18n } from '@/hooks'
 import { useSigningActions, useSettingActions } from '@/store'
 
 import type { IconOptionsFC, IconOptions } from './type'

src/layout/default/ContentWrapper/index.tsx

@@ -23,7 +23,7 @@ import AppRequestCancelerProvider from '@/app-components/provider/AppRequestCanc
 
 import { getVariableToRefs } from '@/global-variable'
 import { useSettingGetters } from '@/store'
-import { useMaximize } from '@/hooks/template'
+import { useMaximize } from '@/hooks'
 
 import type { GlobalThemeOverrides } from 'naive-ui'
 

src/layout/default/HeaderWrapper/index.tsx

@@ -9,7 +9,7 @@
  * @remark 今天也是元气满满撸代码的一天
  */
 
-import { NSpace } from 'naive-ui'
+import { NFlex } from 'naive-ui'
 import SiderBar from '@/layout/components/SiderBar'
 
 export default defineComponent({
@@ -19,9 +19,9 @@ export default defineComponent({
   },
   render() {
     return (
-      <NSpace wrapItem={false} size={[0, 0]}>
+      <NFlex size={[0, 0]}>
         <SiderBar />
-      </NSpace>
+      </NFlex>
     )
   },
 })

src/layout/index.tsx

@@ -18,7 +18,7 @@ import FooterWrapper from '@/layout/default/FooterWrapper'
 import HeaderWrapper from './default/HeaderWrapper'
 import FeatureWrapper from './default/FeatureWrapper'
 
-import { LAYOUT_CONTENT_REF } from '@/app-config/routerConfig'
+import { LAYOUT_CONTENT_REF } from '@/app-config'
 import { layoutHeaderCssVars } from '@/layout/layoutResize'
 import useAppLockScreen from '@/app-components/app/AppLockScreen/appLockVar'
 import { useSettingGetters } from '@/store'

src/locales/helper.ts

@@ -19,8 +19,7 @@
 import { set } from 'lodash-es'
 import { zhCN, dateZhCN } from 'naive-ui' // 导入 `naive ui` 中文包
 import { getStorage } from '@/utils'
-import { SYSTEM_DEFAULT_LOCAL } from '@/app-config/localConfig'
+import { APP_CATCH_KEY, SYSTEM_DEFAULT_LOCAL } from '@/app-config'
-import { APP_CATCH_KEY } from '@/app-config/appConfig'
 
 import type { Recordable } from '@/types'
 import type {

src/locales/index.ts

@@ -24,9 +24,8 @@
  */
 
 import { createI18n } from 'vue-i18n'
-import { LOCAL_OPTIONS } from '@/app-config/localConfig'
 import { getAppDefaultLanguage, getAppLocalMessages } from '@/locales/helper'
-import { SYSTEM_FALLBACK_LOCALE } from '@/app-config/localConfig'
+import { SYSTEM_FALLBACK_LOCALE, LOCAL_OPTIONS } from '@/app-config'
 
 import type { App } from 'vue'
 import type { I18n, I18nOptions } from 'vue-i18n'

src/router/README.md

@@ -5,7 +5,7 @@
 > router modules 包中的路由模块会与菜单一一映射，也就是说，路由模块的配置结构会影响菜单的展示。当你有子菜单需要配置时，你需要使用该组件。
 
 ```ts
-import { t } from '@/hooks/web'
+import { t } from '@/hooks'
 import { LAYOUT } from '@/router/constant'
 
 import type { AppRouteRecordRaw } from '@/router/type'

src/router/helper/permission.ts

@@ -20,12 +20,11 @@
  * 当然, 你可以指定一个超级管理员角色, 默认获取全部路由
  */
 
-import { APP_CATCH_KEY } from '@/app-config/appConfig'
+import { WHITE_ROUTES, APP_CATCH_KEY } from '@/app-config'
 import { redirectRouterToDashboard } from '@/router/helper/routerCopilot'
-import { WHITE_ROUTES } from '@/app-config/routerConfig'
 import { validRole } from '@/router/helper/routerCopilot'
 import { isValueType, getStorage } from '@/utils'
-import { useAppRoot } from '@/hooks/template'
+import { useAppRoot } from '@/hooks'
 
 import type { Router, RouteLocationNormalized } from 'vue-router'
 import type { AppRouteMeta } from '@/router/type'
@@ -43,7 +42,7 @@ export const permissionRouter = (router: Router) => {
   beforeEach((to, from, next) => {
     const token = getStorage<string>(APP_CATCH_KEY.token)
     const catchRoutePath = getStorage(
-      'menuKey',
+      APP_CATCH_KEY.appMenuKey,
       'sessionStorage',
       getRootPath.value,
     )

src/router/helper/routerCopilot.ts

@@ -10,11 +10,10 @@
  */
 
 import { permissionRouter } from './permission'
-import { SETUP_ROUTER_ACTION, SUPER_ADMIN } from '@/app-config/routerConfig'
+import { SETUP_ROUTER_ACTION, SUPER_ADMIN, APP_CATCH_KEY } from '@/app-config'
-import { useVueRouter } from '@/hooks/web'
+import { useVueRouter, useAppRoot } from '@/hooks'
 import { getAppEnvironment, setStorage } from '@/utils'
 import { useSigningGetters } from '@/store'
-import { useAppRoot } from '@/hooks/template'
 
 import type { Router } from 'vue-router'
 import type { AppRouteMeta } from '@/router/type'
@@ -133,7 +132,7 @@ export const redirectRouterToDashboard = (isReplace = true) => {
   const { push, replace } = router
   const { getRootPath } = useAppRoot()
 
-  setStorage('menuKey', getRootPath.value)
+  setStorage(APP_CATCH_KEY.appMenuKey, getRootPath.value)
 
   isReplace ? replace(getRootPath.value) : push(getRootPath.value)
 }

src/router/helper/setupHelper.ts

@@ -18,7 +18,7 @@
  * 如果有需要查看 router 模块的全局通用辅助方法可以查看 routerCopilot 包
  */
 
-import { LAYOUT_CONTENT_REF } from '@/app-config/routerConfig'
+import { LAYOUT_CONTENT_REF } from '@/app-config'
 
 import type { RouteLocationNormalized } from 'vue-router'
 import type { AppRouteRecordRaw, RouteModules } from '@/router/type'

src/router/index.ts

@@ -1,7 +1,7 @@
 import { createRouter, createWebHashHistory } from 'vue-router'
 import { scrollViewToTop } from '@/router/helper/setupHelper'
 import { vueRouterRegister } from '@/router/helper/routerCopilot'
-import { useVueRouter } from '@/hooks/web'
+import { useVueRouter } from '@/hooks'
 
 import constantRoutes from './routes'
 

src/router/modules/dashboard.ts

@@ -1,4 +1,4 @@
-import { t } from '@/hooks/web'
+import { t } from '@/hooks'
 import { LAYOUT } from '@/router/constant'
 
 import type { AppRouteRecordRaw } from '@/router/type'

src/router/modules/demo/axios.ts

@@ -1,4 +1,4 @@
-import { t } from '@/hooks/web'
+import { t } from '@/hooks'
 import { LAYOUT } from '@/router/constant'
 
 import type { AppRouteRecordRaw } from '@/router/type'

src/router/modules/demo/context-menu.ts

@@ -1,4 +1,4 @@
-import { t } from '@/hooks/web'
+import { t } from '@/hooks'
 
 import type { AppRouteRecordRaw } from '@/router/type'
 

src/router/modules/demo/directive.ts

@@ -1,4 +1,4 @@
-import { t } from '@/hooks/web'
+import { t } from '@/hooks'
 import { LAYOUT } from '@/router/constant'
 
 import type { AppRouteRecordRaw } from '@/router/type'

src/router/modules/demo/doc.ts

@@ -1,4 +1,4 @@
-import { t } from '@/hooks/web'
+import { t } from '@/hooks'
 import { LAYOUT } from '@/router/constant'
 
 import type { AppRouteRecordRaw } from '@/router/type'

src/router/modules/demo/echart.ts

@@ -1,4 +1,4 @@
-import { t } from '@/hooks/web'
+import { t } from '@/hooks'
 import { LAYOUT } from '@/router/constant'
 
 import type { AppRouteRecordRaw } from '@/router/type'

src/router/modules/demo/iframe.ts

@@ -1,4 +1,4 @@
-import { t } from '@/hooks/web'
+import { t } from '@/hooks'
 
 import type { AppRouteRecordRaw } from '@/router/type'
 

src/router/modules/demo/mock.ts

@@ -1,4 +1,4 @@
-import { t } from '@/hooks/web'
+import { t } from '@/hooks'
 import { LAYOUT } from '@/router/constant'
 
 import type { AppRouteRecordRaw } from '@/router/type'
@@ -11,7 +11,7 @@ const mockDemo: AppRouteRecordRaw = {
     i18nKey: t('menu.Mock'),
     icon: 'other',
     order: 3,
-    keepAlive: true,
+    keepAlive: false,
   },
 }
 

src/router/modules/demo/modal.ts

@@ -1,4 +1,4 @@
-import { t } from '@/hooks/web'
+import { t } from '@/hooks'
 import { LAYOUT } from '@/router/constant'
 
 import type { AppRouteRecordRaw } from '@/router/type'

src/router/modules/demo/multi-menu.ts

@@ -1,4 +1,4 @@
-import { t } from '@/hooks/web'
+import { t } from '@/hooks'
 import { LAYOUT } from '@/router/constant'
 
 import type { AppRouteRecordRaw } from '@/router/type'

src/router/modules/demo/precision.ts

@@ -1,4 +1,4 @@
-import { t } from '@/hooks/web'
+import { t } from '@/hooks'
 import { LAYOUT } from '@/router/constant'
 
 import type { AppRouteRecordRaw } from '@/router/type'

src/router/modules/demo/qrcode.ts

@@ -1,4 +1,4 @@
-import { t } from '@/hooks/web'
+import { t } from '@/hooks'
 import { LAYOUT } from '@/router/constant'
 
 import type { AppRouteRecordRaw } from '@/router/type'

src/router/modules/demo/rely.ts

@@ -1,4 +1,4 @@
-import { t } from '@/hooks/web'
+import { t } from '@/hooks'
 import { LAYOUT } from '@/router/constant'
 
 import type { AppRouteRecordRaw } from '@/router/type'

src/router/modules/demo/router-demo.ts

@@ -1,4 +1,4 @@
-import { t } from '@/hooks/web'
+import { t } from '@/hooks'
 import { LAYOUT } from '@/router/constant'
 
 import type { AppRouteRecordRaw } from '@/router/type'

src/router/modules/demo/scroll-reveal.ts

@@ -4,7 +4,7 @@
  * 所以暂时隐藏该页面
  */
 
-import { t } from '@/hooks/web'
+import { t } from '@/hooks'
 import { LAYOUT } from '@/router/constant'
 
 import type { AppRouteRecordRaw } from '@/router/type'

src/router/modules/demo/svg-icons.ts

@@ -1,4 +1,4 @@
-import { t } from '@/hooks/web'
+import { t } from '@/hooks'
 import { LAYOUT } from '@/router/constant'
 
 import type { AppRouteRecordRaw } from '@/router/type'

src/router/modules/demo/table.ts

@@ -1,4 +1,4 @@
-import { t } from '@/hooks/web'
+import { t } from '@/hooks'
 import { LAYOUT } from '@/router/constant'
 
 import type { AppRouteRecordRaw } from '@/router/type'

src/router/modules/demo/template-hooks.ts

@@ -1,4 +1,4 @@
-import { t } from '@/hooks/web'
+import { t } from '@/hooks'
 import { LAYOUT } from '@/router/constant'
 
 import type { AppRouteRecordRaw } from '@/router/type'

src/router/modules/error404.ts

@@ -1,4 +1,4 @@
-import { t } from '@/hooks/web'
+import { t } from '@/hooks'
 import { LAYOUT } from '@/router/constant'
 
 import type { AppRouteRecordRaw } from '@/router/type'

src/router/routes.ts

@@ -1,6 +1,6 @@
 import Layout from '@/layout'
 import { appExpandRoutes } from './appRouteModules'
-import { useAppRoot } from '@/hooks/template'
+import { useAppRoot } from '@/hooks'
 
 export default async () => {
   const { getRootPath } = useAppRoot()

src/spin/index.tsx

@@ -16,7 +16,7 @@
  * 基于 Naive UI Spin 组件
  *
  * 使用方法
- *   1. import { setVariable } from '@/hooks/variable'
+ *   1. import { setVariable } from '@/hooks'
  *   2. setVariable('globalSpinning', true) | setVariable('globalSpinning', false)
  *
  * 仅需按照上述步骤实现全屏加载动画

src/store/hooks/useMenuStore.ts

@@ -10,7 +10,7 @@
  */
 
 import { piniaMenuStore } from '../modules/menu'
-import { useAppRoot } from '@/hooks/template'
+import { useAppRoot } from '@/hooks'
 
 export const useMenuGetters = () => {
   const variable = piniaMenuStore()
@@ -81,7 +81,6 @@ export const useMenuActions = () => {
     changeMenuModelValue,
     collapsedMenu,
     spliceMenTagOptions,
-    emptyMenuTagOptions,
     setMenuTagOptions,
   } = piniaMenuStore()
 
@@ -89,7 +88,6 @@ export const useMenuActions = () => {
     changeMenuModelValue,
     collapsedMenu,
     spliceMenTagOptions,
-    emptyMenuTagOptions,
     setMenuTagOptions,
   }
 }

src/store/index.ts

@@ -16,7 +16,8 @@
  * 持久化存储 pinia 数据
  * 但是不能正常持久化 function 属性
  *
- * 官网地址: https://prazdevs.github.io/pinia-plugin-persistedstate/zh/guide/
+ * 官网地址:
+ * @see https://prazdevs.github.io/pinia-plugin-persistedstate/zh/guide/
  */
 
 import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

src/store/modules/keep-alive/index.ts

@@ -18,7 +18,7 @@
  * 依赖 APP_KEEP_ALIVE 配置
  */
 
-import { APP_KEEP_ALIVE } from '@/app-config/appConfig'
+import { APP_KEEP_ALIVE } from '@/app-config'
 
 import type { KeepAliveStoreState } from './type'
 import type { AppMenuOption } from '@/types'

src/store/modules/menu/helper.ts

@@ -11,10 +11,10 @@
 
 /** 本方法感谢 <https://yunkuangao.me/> 的支持 */
 
-import { APP_MENU_CONFIG } from '@/app-config/appConfig'
+import { APP_MENU_CONFIG, APP_CATCH_KEY } from '@/app-config'
 import { RIcon } from '@/components'
 import { getStorage, isValueType } from '@/utils'
-import { useAppRoot } from '@/hooks/template'
+import { useAppRoot } from '@/hooks'
 
 import type {
   AppMenuOption,
@@ -171,7 +171,7 @@ export const hasMenuIcon = (option: AppMenuOption) => {
 export const getCatchMenuKey = () => {
   const { getRootPath } = useAppRoot()
   const cacheMenuKey = getStorage<AppMenuKey>(
-    'menuKey',
+    APP_CATCH_KEY.appMenuKey,
     'sessionStorage',
     getRootPath.value,
   )

src/store/modules/menu/index.ts

@@ -33,9 +33,10 @@ import {
   hasMenuIcon,
   getCatchMenuKey,
 } from './helper'
-import { useI18n } from '@/hooks/web'
+import { useI18n } from '@/hooks'
 import { getAppRawRoutes } from '@/router/appRouteModules'
 import { useKeepAliveActions } from '@/store'
+import { APP_CATCH_KEY } from '@/app-config'
 
 import type { AppMenuOption, MenuTagOptions } from '@/types'
 import type { MenuState } from '@/store/modules/menu/type'
@@ -58,7 +59,6 @@ export const piniaMenuStore = defineStore(
       currentMenuOption: null, // 当前激活菜单项
     })
     const isSetupAppMenuLock = ref(true)
-    const isRootPathReg = new RegExp('/', 'g')
 
     const resolveOption = (option: AppMenuOption) => {
       const { meta } = option
@@ -67,10 +67,14 @@ export const piniaMenuStore = defineStore(
       const label = computed(() =>
         meta?.i18nKey ? t(`${meta!.i18nKey}`) : meta?.noLocalTitle,
       )
-      /** 拼装菜单项 */
+      /**
+       *
+       * 拼装菜单项
+       * 容错处理，兼容以前版本 key 选取为 path 的情况
+       */
       const route = {
         ...option,
-        key: option.path,
+        key: option.fullPath,
         label: () =>
           h(NEllipsis, null, {
             default: () => label.value,
@@ -83,7 +87,7 @@ export const piniaMenuStore = defineStore(
         icon: hasMenuIcon(option),
       })
 
-      if (option.path === getCatchMenuKey()) {
+      if (option.fullPath === getCatchMenuKey()) {
         menuState.currentMenuOption = attr
       }
 
@@ -92,33 +96,18 @@ export const piniaMenuStore = defineStore(
       return attr
     }
 
-    /**
-     *
-     * @param options menu options
-     * @param key target key
-     *
-     * @remark 获取完整菜单项
-     */
-    const getCompleteRoutePath = (
-      options: AppMenuOption[],
-      key: string | number,
-    ) => {
-      const ops = parseAndFindMatchingNodes(options, 'key', key)
-
-      return ops
-    }
-
     /**
      *
      * 设置面包屑
      *
      * 如果识别到为平级模式, 则会自动追加一层面包屑
      */
-    const setBreadcrumbOptions = (
+    const setBreadcrumbOptions = (key: string | number) => {
-      key: string | number,
+      menuState.breadcrumbOptions = parseAndFindMatchingNodes(
-      option: AppMenuOption,
+        menuState.options,
-    ) => {
+        'fullPath',
-      menuState.breadcrumbOptions = getCompleteRoutePath(menuState.options, key)
+        key,
+      )
     }
 
     /**
@@ -143,7 +132,7 @@ export const piniaMenuStore = defineStore(
       key: string | number,
       option: AppMenuOption,
     ) => {
-      const tag = menuState.menuTagOptions.find((curr) => curr.path === key)
+      const tag = menuState.menuTagOptions.find((curr) => curr.fullPath === key)
 
       if (!tag) {
         menuState.menuTagOptions.push(option as MenuTagOptions)
@@ -175,38 +164,16 @@ export const piniaMenuStore = defineStore(
       option: AppMenuOption,
       query?: LocationQuery,
     ) => {
-      const { meta, path } = option
+      const { meta } = option
 
       if (meta.windowOpen) {
         window.open(meta.windowOpen)
       } else {
-        /**
+        push({
-         *
+          path: String(key),
-         * key 以 `/` 开头, 则说明为根路由, 直接跳转
+          query,
-         * key 开头未匹配到 `/`, 则需要获取到完整路由后再进行跳转
+        })
-         *
-         * 但是, 缓存 key 都以当前点击 key 为准
-         */
-        if (String(key)[0] === '/') {
-          /** 根路由直接跳转 */
-          push({
-            path,
-            query,
-          })
-        } else {
-          /** 如果不是根路由, 则拼接完整路由并跳转 */
-          const _path = getCompleteRoutePath(menuState.options, key)
-            .map((curr) => curr.key)
-            .join('/')
 
-          push({
-            path: _path,
-            query,
-          })
-        }
-
-        /** 检查是否为根路由 */
-        const count = (path.match(isRootPathReg) || []).length
         const { sameLevel } = meta
 
         /** 更新缓存队列 */
@@ -215,17 +182,17 @@ export const piniaMenuStore = defineStore(
         updateDocumentTitle(option)
 
         // 如果不为 sameLevel，则会执行更新：覆盖更新面包屑、添加标签菜单、更新缓存
-        if (!sameLevel || (sameLevel && count === 1)) {
+        if (!sameLevel) {
           /** 更新标签菜单 */
           setMenuTagOptionsWhenMenuValueChange(key, option)
           /** 更新面包屑 */
-          setBreadcrumbOptions(key, option)
+          setBreadcrumbOptions(key)
 
           menuState.menuKey = key
           menuState.currentMenuOption = option
 
           /** 缓存菜单 key(sessionStorage) */
-          setStorage('menuKey', key)
+          setStorage(APP_CATCH_KEY.appMenuKey, key)
         } else {
           // 使用 pick 提取仅需要的字段，避免 vue 抛错空引用，导致性能损耗
           const breadcrumbOption = pick(resolveOption(option), [
@@ -264,16 +231,6 @@ export const piniaMenuStore = defineStore(
       query: LocationQuery,
     ) => {
       const [routePath] = path.split('?')
-      const count = (routePath.match(new RegExp('/', 'g')) || []).length // 如果获取长度为 1，则视为根路由
-
-      let combinePath = routePath
-
-      if (count > 1) {
-        // 如果不是跟路径则取出最后一项字符
-        const splitPath = routePath.split('/').filter((curr) => curr)
-
-        combinePath = splitPath[splitPath.length - 1]
-      }
 
       // 直接使用完整 url，检查是否在 routes 中
       const findMenuOption = getRoutes().find((curr) => curr.path === routePath)
@@ -289,8 +246,11 @@ export const piniaMenuStore = defineStore(
         ]) as unknown as AppMenuOption
 
         changeMenuModelValue(
-          count > 1 ? combinePath : path,
+          routePath,
-          resolveOption(pickOption),
+          resolveOption({
+            ...pickOption,
+            fullPath: pickOption.path,
+          }),
           query,
         )
       }
@@ -298,41 +258,49 @@ export const piniaMenuStore = defineStore(
 
     /**
      *
-     * @remark 初始化菜单列表, 并且按照权限过滤
+     * 初始化系统菜单列表，该方法仅执行一次
-     * @remark 如果权限发生变动, 则会触发强制弹出页面并且重新登陆
+     * 会在初始化时拼接完整的 url 地址为 fullPath
      */
     const setupAppMenu = () => {
       return new Promise<void>((resolve) => {
-        const resolveRoutes = (routes: AppMenuOption[], index: number) => {
+        const resolveRoutes = (routes: AppMenuOption[], parentPath: string) => {
           const catchArr: AppMenuOption[] = []
 
           for (const curr of routes) {
+            let fullPath = `${
+              parentPath.endsWith('/') ? parentPath : parentPath + '/'
+            }${curr.path}`
+            // 使用正则表达式替换重复的 '/'
+            fullPath = fullPath.replace(/\/+/g, '/')
+
             if (curr.children?.length) {
-              curr.children = resolveRoutes(curr.children, index++)
+              curr.children = resolveRoutes(curr.children, fullPath)
             } else if (!validRole(curr.meta)) {
-              /** 如果校验失败, 则不会添加进 menu options */
               continue
             }
 
-            catchArr.push(resolveOption(curr))
+            catchArr.push(
+              resolveOption({
+                ...curr,
+                fullPath,
+              }),
+            )
           }
 
           return catchArr
         }
 
-        /** 缓存菜单列表 */
         menuState.options = resolveRoutes(
           getAppRawRoutes() as AppMenuOption[],
-          0,
+          '',
         )
 
-        // 初始化后更新面包屑、标签菜单
         if (menuState.currentMenuOption) {
           const { currentMenuOption } = menuState
 
-          setBreadcrumbOptions(currentMenuOption.key, currentMenuOption)
+          setBreadcrumbOptions(currentMenuOption.key)
           setMenuTagOptionsWhenMenuValueChange(
-            currentMenuOption.key,
+            currentMenuOption.fullPath,
             currentMenuOption,
           )
         }
@@ -358,17 +326,6 @@ export const piniaMenuStore = defineStore(
     const spliceMenTagOptions = (idx: number, length = 1) =>
       menuState.menuTagOptions.splice(idx, length)
 
-    /**
-     *
-     * @remark 置空 menuTagOptions
-     *
-     * Q: 为什么不直接使用 spliceMenTagOptions 方法置空菜单标签?
-     * A: 因为直接将 menuTagOptions 指向新的地址会快一点
-     */
-    const emptyMenuTagOptions = () => {
-      menuState.menuTagOptions = []
-    }
-
     /**
      *
      * 初始化系统菜单列表
@@ -404,7 +361,6 @@ export const piniaMenuStore = defineStore(
       changeMenuModelValue,
       collapsedMenu,
       spliceMenTagOptions,
-      emptyMenuTagOptions,
       setMenuTagOptions,
     }
   },

src/store/modules/setting/index.ts

@@ -1,12 +1,11 @@
 import { getAppDefaultLanguage } from '@/locales/helper'
 import { set } from 'lodash-es'
 import { colorToRgba, setStorage } from '@/utils'
-import { useI18n } from '@/hooks/web'
+import { useI18n, useDayjs } from '@/hooks'
-import { APP_THEME } from '@/app-config/designConfig'
+import { APP_THEME } from '@/app-config'
-import { useDayjs } from '@/hooks/web'
 
 import type { SettingState } from '@/store/modules/setting/type'
-import type { LocalKey } from '@/hooks/web'
+import type { LocalKey } from '@/hooks'
 import type { AnyFC } from '@/types'
 
 export const piniaSettingStore = defineStore(

src/types/modules/app.ts

@@ -12,6 +12,7 @@ export interface AppMenuOption extends AppRouteRecordRaw {
   children?: AppMenuOption[]
   meta: AppRouteMeta
   breadcrumbLabel?: string
+  fullPath: string
 }
 
 export interface MenuTagOptions extends AppMenuOption {

src/utils/dom.ts

@@ -10,9 +10,9 @@
  */
 
 import { omit } from './basic'
-import { useDomToImage, usePrint } from '@/hooks/web'
+import { useDomToImage, usePrint } from '@/hooks'
 
-import type { UsePrintOptions, UseDomToImageOptions } from '@/hooks/web'
+import type { UsePrintOptions, UseDomToImageOptions } from '@/hooks'
 import type { BasicTarget } from '@/types'
 
 export interface PrintDomOptions {

src/utils/element.ts

@@ -1,4 +1,4 @@
-import { APP_REGEX } from '@/app-config/regexConfig'
+import { APP_REGEX } from '@/app-config'
 import { effectDispose, unrefElement, isValueType } from '@/utils'
 
 import type { PartialCSSStyleDeclaration, ElementSelector } from '@/types'

src/views/dashboard/index.tsx

@@ -6,7 +6,7 @@ import {
   NDescriptions,
   NDescriptionsItem,
   NTag,
-  NSpace,
+  NFlex,
   NP,
   NH6,
 } from 'naive-ui'
@@ -20,34 +20,34 @@ const Dashboard = defineComponent({
       {
         label: '掌握搬砖框架',
         des: () => (
-          <NSpace>
+          <NFlex>
             <NTag type="success">Vue3.x</NTag>
             <NTag type="info">React</NTag>
-          </NSpace>
+          </NFlex>
         ),
       },
       {
         label: '从事搬砖时长',
         des: () => (
-          <NSpace>
+          <NFlex>
             <NTag type="success">练习时长两年半的小白前端搬砖师</NTag>
-          </NSpace>
+          </NFlex>
         ),
       },
       {
         label: '个人',
         des: () => (
-          <NSpace align="center">
+          <NFlex align="center">
             <RIcon name="ray" size="22" />
             努力搬砖、努力摸鱼, 建设美丽家园
-          </NSpace>
+          </NFlex>
         ),
         span: 2,
       },
       {
         label: '补充说明',
         des: () => (
-          <NSpace align="center">
+          <NFlex align="center">
             如果有希望补充的功能可以在
             <a
               class="dashboard-link"
@@ -56,7 +56,7 @@ const Dashboard = defineComponent({
               GitHub
             </a>
             提一个 Issues
-          </NSpace>
+          </NFlex>
         ),
         span: 2,
       },
@@ -110,13 +110,13 @@ const Dashboard = defineComponent({
         <NCard title="项目介绍">
           <NH6>技术栈</NH6>
           <NP>
-            <NSpace>
+            <NFlex>
               {this.technologyTagOptions.map((curr) => (
                 <NTag key={curr.value} type="info">
                   {curr.label}
                 </NTag>
               ))}
-            </NSpace>
+            </NFlex>
           </NP>
           <NH6>项目介绍</NH6>
           <NP>

src/views/demo/axios/index.tsx

@@ -1,6 +1,6 @@
 import './index.scss'
 
-import { NCard, NLayout, NSpace, NInput, NButton } from 'naive-ui'
+import { NCard, NLayout, NFlex, NInput, NButton } from 'naive-ui'
 import { getWeather, getTypicode } from '@/api/demo/test'
 import { useRequest, useHookPlusRequest } from '@/axios'
 
@@ -77,7 +77,7 @@ const Axios = defineComponent({
   render() {
     return (
       <NLayout>
-        <NSpace vertical>
+        <NFlex vertical>
           <h1>请求</h1>
           <NCard>
             <h2>useRequest</h2>
@@ -100,17 +100,17 @@ const Axios = defineComponent({
             <h3>3.详情请查看文档</h3>
           </NCard>
           <NCard title="useRequest示例（手动触发）">
-            <NSpace vertical>
+            <NFlex vertical>
               <NButton onClick={this.demoRun.bind(this)}>获取数据</NButton>
               <h3>
                 结果:&nbsp;
                 {this.demoLoading ? '获取中...' : this.demoData?.title}
               </h3>
-            </NSpace>
+            </NFlex>
           </NCard>
           <h1>使用 useHookPlusRequest 获取</h1>
           <NCard title="节流">
-            <NSpace vertical>
+            <NFlex vertical>
               <NInput
                 v-model:value={this.throttleDemoInputValue}
                 onUpdateValue={() => {
@@ -122,10 +122,10 @@ const Axios = defineComponent({
                 当前状态:&nbsp;
                 {this.throttleDemoLoading ? '获取中...' : '获取成功!!!'}
               </h3>
-            </NSpace>
+            </NFlex>
           </NCard>
           <NCard title="防抖">
-            <NSpace vertical>
+            <NFlex vertical>
               <NInput
                 v-model:value={this.debounceDemoInputValue}
                 onUpdateValue={() => {
@@ -137,10 +137,10 @@ const Axios = defineComponent({
                 当前状态:&nbsp;
                 {this.debounceDemoLoading ? '获取中...' : '获取成功!!!'}
               </h3>
-            </NSpace>
+            </NFlex>
           </NCard>
           <NCard title="获取气候">
-            <NSpace vertical>
+            <NFlex vertical>
               <NInput
                 v-model:value={this.weatherDemoInputValue}
                 onUpdateValue={(val) => {
@@ -152,9 +152,9 @@ const Axios = defineComponent({
                 当前状态:&nbsp;
                 {this.weatherDemoLoading ? '获取中...' : '获取成功!!!'}
               </h3>
-            </NSpace>
+            </NFlex>
           </NCard>
-        </NSpace>
+        </NFlex>
       </NLayout>
     )
   },

src/views/demo/context-menu/index.tsx

@@ -9,9 +9,9 @@
  * @remark 今天也是元气满满撸代码的一天
  */
 
-import { NSpace, NCard, NDropdown } from 'naive-ui'
+import { NFlex, NCard, NDropdown } from 'naive-ui'
 
-import { useContextmenuCoordinate } from '@/hooks/components'
+import { useContextmenuCoordinate } from '@/hooks'
 
 export default defineComponent({
   name: 'ContextMenuDemo',
@@ -52,9 +52,9 @@ export default defineComponent({
     const { x, y, show } = this
 
     return (
-      <NSpace vertical wrapItem={false}>
+      <NFlex vertical>
         <NCard title="useContextmenuCoordinate + NDropdown 实现右键菜单">
-          <NSpace vertical>
+          <NFlex vertical>
             <h3>默认点击元素外部会关闭菜单。</h3>
             <div
               ref="demoOneRef"
@@ -62,7 +62,7 @@ export default defineComponent({
             >
               右击
             </div>
-          </NSpace>
+          </NFlex>
         </NCard>
         <NDropdown
           show={show}
@@ -72,7 +72,7 @@ export default defineComponent({
           trigger="manual"
           placement="bottom-start"
         />
-      </NSpace>
+      </NFlex>
     )
   },
 })

src/views/demo/directive/index.tsx

@@ -10,7 +10,7 @@
  */
 
 import {
-  NSpace,
+  NFlex,
   NCard,
   NInput,
   NInputGroup,
@@ -50,7 +50,7 @@ const RDirective = defineComponent({
   },
   render() {
     return (
-      <NSpace wrapItem={false}>
+      <NFlex>
         <NCard title="指令">该页面展示如何使用已封装好的指令</NCard>
         <NCard title="文本复制示例一">
           <NInputGroup>
@@ -65,7 +65,7 @@ const RDirective = defineComponent({
           </NInputGroup>
         </NCard>
         <NCard title="节流">
-          <NSpace wrapItem={true} vertical>
+          <NFlex vertical>
             <NButton
               v-throttle={{
                 func: this.updateDemoValue.bind(null, 'throttleBtnClickCount'),
@@ -78,10 +78,10 @@ const RDirective = defineComponent({
             </NButton>
             <p>我执行了{this.throttleBtnClickCount}次</p>
             <p>该方法 1s 内仅会执行一次</p>
-          </NSpace>
+          </NFlex>
         </NCard>
         <NCard title="防抖">
-          <NSpace wrapItem={true} vertical>
+          <NFlex vertical>
             <NButton
               v-debounce={{
                 func: this.updateDemoValue.bind(null, 'debounceBtnClickCount'),
@@ -94,10 +94,10 @@ const RDirective = defineComponent({
             </NButton>
             <p>我执行了{this.debounceBtnClickCount}次</p>
             <p>该方法将延迟 1s 执行</p>
-          </NSpace>
+          </NFlex>
         </NCard>
         <NCard title="禁用">
-          <NSpace vertical>
+          <NFlex vertical>
             <NSwitch v-model:value={this.disabledValue}>
               {{
                 checked: () => '取消',
@@ -120,12 +120,12 @@ const RDirective = defineComponent({
               </form>
             </NCard>
             <NCard title="文本内容">
-              <NSpace vertical>
+              <NFlex vertical>
                 <p v-disabled={this.disabledValue}>我是可以被禁用的文本内容</p>
-              </NSpace>
+              </NFlex>
             </NCard>
             <NCard title="naive 组件">
-              <NSpace vertical justify="start">
+              <NFlex vertical justify="start">
                 <NForm v-disabled={this.disabledValue}>
                   <NFormItem>
                     <NInput />
@@ -133,11 +133,11 @@ const RDirective = defineComponent({
                 </NForm>
                 <NButton v-disabled={this.disabledValue}>按钮</NButton>
                 <NSwitch v-disabled={this.disabledValue}></NSwitch>
-              </NSpace>
+              </NFlex>
             </NCard>
-          </NSpace>
+          </NFlex>
         </NCard>
-      </NSpace>
+      </NFlex>
     )
   },
 })

src/views/demo/echart/index.tsx

@@ -1,6 +1,6 @@
 import './index.scss'
 
-import { NCard, NSwitch, NSpace, NH2, NButton } from 'naive-ui'
+import { NCard, NSwitch, NFlex, NH2, NButton } from 'naive-ui'
 import { RChart } from '@/components'
 
 import type { RChartType } from '@/components'
@@ -239,13 +239,13 @@ const Echart = defineComponent({
           </ul>
         </NCard>
         <NH2>强制渲染过渡动画（animation），预设 card 风格图表</NH2>
-        <NSpace style={['padding: 18px 0']}>
+        <NFlex style={['padding: 18px 0']}>
           <NButton onClick={this.mountChart.bind(this)}>渲染</NButton>
           <NButton onClick={this.unmountChart.bind(this)}>卸载</NButton>
           <NButton onClick={this.handleUpdateTitle.bind(this)}>
             更新配置项
           </NButton>
-        </NSpace>
+        </NFlex>
         <div class="chart--container">
           <RChart
             title="周销售量"

src/views/demo/iframe/index.tsx

@@ -17,7 +17,7 @@
  * 做了简单的一个组件封装, 希望有用
  */
 
-import { NCard, NSpace } from 'naive-ui'
+import { NCard, NFlex } from 'naive-ui'
 import { RIframe } from '@/components'
 
 const IframeDemo = defineComponent({
@@ -27,7 +27,7 @@ const IframeDemo = defineComponent({
   },
   render() {
     return (
-      <NSpace vertical size={[20, 20]}>
+      <NFlex vertical size={[20, 20]}>
         <NCard title="naive ui（延迟加载）">
           <RIframe
             src="https://www.naiveui.com/zh-CN/dark"
@@ -42,7 +42,7 @@ const IframeDemo = defineComponent({
             lazy={false}
           />
         </NCard>
-      </NSpace>
+      </NFlex>
     )
   },
 })

src/views/demo/mock-demo/index.tsx

@@ -9,7 +9,7 @@
  * @remark 今天也是元气满满撸代码的一天
  */
 
-import { NSpace, NCard, NButton, NFormItemGi, NInput, NForm } from 'naive-ui'
+import { NFlex, NCard, NButton, NFormItemGi, NInput, NForm } from 'naive-ui'
 import { RCollapseGrid, RTable } from '@/components'
 
 import { useHookPlusRequest } from '@/axios'
@@ -78,7 +78,7 @@ const MockDemo = defineComponent({
         key: 'action',
         render: (row: Person) => {
           return (
-            <NSpace align="center">
+            <NFlex align="center">
               <NButton
                 type="primary"
                 text
@@ -106,7 +106,7 @@ const MockDemo = defineComponent({
               >
                 删除
               </NButton>
-            </NSpace>
+            </NFlex>
           )
         },
       },
@@ -147,7 +147,7 @@ const MockDemo = defineComponent({
   },
   render() {
     return (
-      <NSpace vertical wrapItem={false}>
+      <NFlex vertical>
         <NCard title="Mock 数据">
           <h2>
             mock
@@ -187,7 +187,7 @@ const MockDemo = defineComponent({
           pagination={this.paginationRef}
           remote
         />
-      </NSpace>
+      </NFlex>
     )
   },
 })

src/views/demo/modal-demo/index.tsx

@@ -10,7 +10,7 @@
  */
 
 import { RModal } from '@/components'
-import { NButton, NCard, NSpace } from 'naive-ui'
+import { NButton, NCard, NFlex } from 'naive-ui'
 
 export default defineComponent({
   name: 'ModalDemo',
@@ -27,16 +27,16 @@ export default defineComponent({
   },
   render() {
     return (
-      <NSpace vertical wrapItem={false}>
+      <NFlex vertical>
         <NCard title="props">
-          <NSpace vertical>
+          <NFlex vertical>
             <h3>
               memoryPosition: 是否记住上一次被拖拽的位置，如果设置为
               true，那么下一次打开的时候会自动定位到上一次的位置。
             </h3>
             <h3>fullscreen: 全屏模态框。</h3>
             <h3>dad: 启用拖拽，当配置为 false 时，会禁用拖拽效果。</h3>
-          </NSpace>
+          </NFlex>
         </NCard>
         <RModal
           v-model:show={this.modal1}
@@ -67,13 +67,13 @@ export default defineComponent({
           <NButton onClick={() => (this.modal3 = true)}>对话框模态框</NButton>
         </NCard>
         <NCard title="全屏模态框">
-          <NSpace vertical>
+          <NFlex vertical>
             <h4>
               全屏模态框需要同时设置：fullscreen 为 true，并且 preset 为 card
               时才会生效。
             </h4>
             <NButton onClick={() => (this.modal1 = true)}>打开</NButton>
-          </NSpace>
+          </NFlex>
         </NCard>
         <NCard title="手动设置宽度">
           <h4>
@@ -91,7 +91,7 @@ export default defineComponent({
             所有的宽度配置属性都会注入一个对应的 `css variable`，有时候会用上。
           </h4>
         </NCard>
-      </NSpace>
+      </NFlex>
     )
   },
 })

src/views/demo/precision/index.tsx

@@ -9,7 +9,7 @@
  * @remark 今天也是元气满满撸代码的一天
  */
 
-import { NLayout, NCard, NDynamicTags, NSpace, NInputNumber } from 'naive-ui'
+import { NLayout, NCard, NDynamicTags, NFlex, NInputNumber } from 'naive-ui'
 
 import { add, subtract, multiply, divide, distribute, format } from '@/utils'
 
@@ -67,7 +67,7 @@ const CalculatePrecision = defineComponent({
           https://currency.js.org/#subtract
         </h3>
 
-        <NSpace vertical>
+        <NFlex vertical>
           <NCard title="加法">
             {{
               default: () => (
@@ -131,7 +131,7 @@ const CalculatePrecision = defineComponent({
           <NCard title="平分一个值">
             {{
               default: () => (
-                <NSpace wrapItem={false}>
+                <NFlex>
                   <NInputNumber
                     v-model:value={this.distributeValue}
                     onUpdateValue={() => {
@@ -144,14 +144,14 @@ const CalculatePrecision = defineComponent({
                       this.updateDistributeValue()
                     }}
                   />
-                </NSpace>
+                </NFlex>
               ),
               footer: () => {
                 return '结果: ' + this.distributeOutputValue.join(', ')
               },
             }}
           </NCard>
-        </NSpace>
+        </NFlex>
       </NLayout>
     )
   },

src/views/demo/qrcode/index.tsx

@@ -9,7 +9,7 @@
  * @remark 今天也是元气满满撸代码的一天
  */
 
-import { NSpace, NCard, NButton } from 'naive-ui'
+import { NFlex, NCard, NButton } from 'naive-ui'
 import { RQRCode } from '@/components'
 
 import LOGO from '@/assets/images/ray.svg'
@@ -31,7 +31,7 @@ export default defineComponent({
   },
   render() {
     return (
-      <NSpace wrapItem={false}>
+      <NFlex>
         <NCard>
           <h2>
             基于 awesome-qr 进行封装，支持 LOGO、gif、backgroundImage 等属性。
@@ -40,7 +40,7 @@ export default defineComponent({
           <h2>具体使用请参考 props 配置项</h2>
         </NCard>
         <NCard title="基础二维码">
-          <NSpace>
+          <NFlex>
             <RQRCode text="ray template yes" />
             <RQRCode text="ray template yes" logoImage={LOGO} />
             <RQRCode
@@ -49,10 +49,10 @@ export default defineComponent({
               dotScale={0.5}
               colorDark="#64d9d6"
             />
-          </NSpace>
+          </NFlex>
         </NCard>
         <NCard title="状态二维码">
-          <NSpace>
+          <NFlex>
             <RQRCode
               text="ray template yes"
               logoImage={LOGO}
@@ -66,11 +66,11 @@ export default defineComponent({
               logoImage={LOGO}
               status="loading"
             />
-          </NSpace>
+          </NFlex>
         </NCard>
         <NCard title="监听内容变化">
-          <NSpace vertical>
+          <NFlex vertical>
-            <NSpace>
+            <NFlex>
               <NButton
                 onClick={() => {
                   this.qrcodeStatus = 'loading'
@@ -90,8 +90,8 @@ export default defineComponent({
               >
                 下载二维码
               </NButton>
-            </NSpace>
+            </NFlex>
-            <NSpace>
+            <NFlex>
               <RQRCode
                 text={this.qrcodeText}
                 status={this.qrcodeStatus}
@@ -99,10 +99,10 @@ export default defineComponent({
                 ref="rayQRCodeRef"
               />
               当前二维码内容：{this.qrcodeText}
-            </NSpace>
+            </NFlex>
-          </NSpace>
+          </NFlex>
         </NCard>
-      </NSpace>
+      </NFlex>
     )
   },
 })

src/views/demo/router-demo/router-demo-detail/index.tsx

@@ -9,13 +9,13 @@
  * @remark 今天也是元气满满撸代码的一天
  */
 
-import { NCard, NSpace } from 'naive-ui'
+import { NCard, NFlex } from 'naive-ui'
 
 const RouterDemoDetail = defineComponent({
   name: 'RouterDemoDetail',
   render() {
     return (
-      <NSpace wrapItem={false}>
+      <NFlex>
         <NCard title={(this.$route.query.name as string) || 'hello'}>
           你好 {this.$route.query.name}
         </NCard>
@@ -27,7 +27,7 @@ const RouterDemoDetail = defineComponent({
             中，将所需页面配置为 sameLevel 即可。
           </h2>
         </NCard>
-      </NSpace>
+      </NFlex>
     )
   },
 })

src/views/demo/router-demo/router-demo-home/index.tsx

@@ -9,7 +9,7 @@
  * @remark 今天也是元气满满撸代码的一天
  */
 
-import { NSpace, NButton } from 'naive-ui'
+import { NFlex, NButton } from 'naive-ui'
 import { RTable } from '@/components'
 
 import type { DataTableColumns } from 'naive-ui'
@@ -44,7 +44,7 @@ const RouterDemoHome = defineComponent({
         key: '',
         render: (row) => {
           return (
-            <NSpace align="center">
+            <NFlex align="center">
               <NButton
                 type="info"
                 text
@@ -60,7 +60,7 @@ const RouterDemoHome = defineComponent({
               >
                 详情
               </NButton>
-            </NSpace>
+            </NFlex>
           )
         },
       },
@@ -83,9 +83,9 @@ const RouterDemoHome = defineComponent({
   },
   render() {
     return (
-      <NSpace wrapItem={false}>
+      <NFlex>
         <RTable v-model:columns={this.columns} data={this.dataSource} />
-      </NSpace>
+      </NFlex>
     )
   },
 })

src/views/demo/svg-icons/index.tsx

@@ -11,7 +11,7 @@
 
 import './index.scss'
 
-import { NSpace, NCard, NPopover } from 'naive-ui'
+import { NFlex, NCard, NPopover } from 'naive-ui'
 import { RIcon } from '@/components'
 
 const PreviewSVGIcons = defineComponent({
@@ -38,7 +38,7 @@ const PreviewSVGIcons = defineComponent({
         {{
           'header-extra': () => '点击图标复制代码',
           default: () => (
-            <NSpace wrapItem={false}>
+            <NFlex>
               {this.icons.map((curr) => (
                 <div
                   class="pre-view-icons__card"
@@ -55,7 +55,7 @@ const PreviewSVGIcons = defineComponent({
                   </NPopover>
                 </div>
               ))}
-            </NSpace>
+            </NFlex>
           ),
         }}
       </NCard>

src/views/demo/table/index.tsx

@@ -17,7 +17,7 @@ import {
   NInput,
   NDatePicker,
   NSwitch,
-  NSpace,
+  NFlex,
   NPopover,
   NCard,
 } from 'naive-ui'
@@ -74,7 +74,7 @@ const TableView = defineComponent({
         title: 'Action',
         key: 'actions',
         render: (row: RowData) => (
-          <NSpace wrapItem={false} align="center">
+          <NFlex align="center">
             <NButton size="tiny">查看</NButton>
             <RMoreDropdown
               options={[
@@ -91,7 +91,7 @@ const TableView = defineComponent({
                 window.$message.info(`当前选择: ${key}`)
               }}
             />
-          </NSpace>
+          </NFlex>
         ),
       },
     ]
@@ -155,7 +155,7 @@ const TableView = defineComponent({
   },
   render() {
     return (
-      <NSpace wrapItem={false} vertical>
+      <NFlex vertical>
         <NCard title="RTable">
           基于 NDataTable 封装，继承该组件所有 props 属性。查看 RTable props
           文件即可查看该组件拓展项
@@ -201,12 +201,12 @@ const TableView = defineComponent({
         <RTable
           scrollX={2000}
           title={
-            <NSpace align="center">
+            <NFlex align="center">
               <span>标题插槽:</span>
               <NSwitch
                 onUpdateValue={(value: boolean) => (this.tableLoading = value)}
               ></NSwitch>
-            </NSpace>
+            </NFlex>
           }
           data={this.tableData}
           v-model:columns={this.actionColumns}
@@ -239,7 +239,7 @@ const TableView = defineComponent({
             tableAction: () => '表格的操作区域内容插槽，有时候可能会用上',
           }}
         </RTable>
-      </NSpace>
+      </NFlex>
     )
   },
 })

src/views/demo/template-hooks/index.tsx

@@ -9,7 +9,7 @@
  * @remark 今天也是元气满满撸代码的一天
  */
 
-import { NSpace, NCard, NButton, NInput } from 'naive-ui'
+import { NFlex, NCard, NButton, NInput } from 'naive-ui'
 
 import {
   useAppNavigation,
@@ -17,7 +17,7 @@ import {
   useSpinning,
   useWatermark,
   useTheme,
-} from '@/hooks/template'
+} from '@/hooks'
 import { getVariableToRefs } from '@/global-variable'
 import { useSettingGetters } from '@/store'
 
@@ -79,7 +79,7 @@ export default defineComponent({
     } = this
 
     return (
-      <NSpace wrapItem={false} vertical>
+      <NFlex vertical>
         <NCard title="接口说明">
           <h3>
             hooks/template 包存放模板专属 hook
@@ -87,29 +87,29 @@ export default defineComponent({
           </h3>
         </NCard>
         <NCard title="useTheme 主题">
-          <NSpace vertical>
+          <NFlex vertical>
             <h3>getAppTheme 获取当前主题色: {getAppTheme().themeLabel}</h3>
-            <NSpace>
+            <NFlex>
               <NButton onClick={() => changeDarkTheme()}>切换暗黑主题</NButton>
               <NButton onClick={() => changeLightTheme()}>切换明亮主题</NButton>
               <NButton onClick={() => toggleTheme()}>切换主题</NButton>
-            </NSpace>
+            </NFlex>
-          </NSpace>
+          </NFlex>
         </NCard>
         <NCard title="useWatermark 水印">
-          <NSpace vertical>
+          <NFlex vertical>
             <NInput
               v-model:value={this.watermark}
               onInput={(val) => {
                 setWatermarkContent(val)
               }}
             />
-            <NSpace>
+            <NFlex>
               <NButton onClick={() => showWatermark()}>显示水印</NButton>
               <NButton onClick={() => hiddenWatermark()}>隐藏水印</NButton>
               <NButton onClick={() => toggleWatermark()}>切换水印</NButton>
-            </NSpace>
+            </NFlex>
-          </NSpace>
+          </NFlex>
         </NCard>
         <NCard title="useSpinning">
           <h3>
@@ -117,7 +117,7 @@ export default defineComponent({
             vue 生命周期）。默认 800ms 延迟。
           </h3>
           <br />
-          <NSpace>
+          <NFlex>
             <NButton
               onClick={() => {
                 reload()
@@ -136,7 +136,7 @@ export default defineComponent({
             >
               触发加载动画（不强制刷新）
             </NButton>
-          </NSpace>
+          </NFlex>
         </NCard>
         <NCard title="useMaximize 内容区域最大化">
           <h3>
@@ -145,21 +145,29 @@ export default defineComponent({
           </h3>
           <NButton
             onClick={() => {
-              maximize(!this.maximizeRef)
+              maximize(!this.maximizeRef, {
+                scrollToOptions: {
+                  left: 0,
+                  top: 0,
+                },
+              })
             }}
           >
-            最大化内容区域
+            最大化内容区域，并且滚动至顶部
           </NButton>
         </NCard>
         <NCard title="useAppNavigation 导航方法">
           <h3>
             navigationTo
             参数为正整数时，会更具当前的菜单顺序进行自动导航匹配。但是此方法仅能导航一级菜单。并且如果导航菜单非根菜单项，会自动递归导航至一子菜单。
+            支持传入完整的菜单路径，如：/multi/multi-menu-one。
           </h3>
           <br />
-          <NButton onClick={() => navigationTo(16)}>跳转至多级菜单</NButton>
+          <NButton onClick={() => navigationTo('/multi/multi-menu-one')}>
+            跳转至多级菜单
+          </NButton>
         </NCard>
-      </NSpace>
+      </NFlex>
     )
   },
 })

src/views/login/components/SSOSigning/index.tsx

@@ -18,7 +18,7 @@
 
 import './index.scss'
 
-import { NSpace, NPopover } from 'naive-ui'
+import { NFlex, NPopover } from 'naive-ui'
 import { RIcon } from '@/components'
 
 interface SSOSigningOptions {
@@ -59,11 +59,7 @@ const SSOSigning = defineComponent({
   },
   render() {
     return (
-      <NSpace
+      <NFlex class="sso-signing" align="center">
-        class="sso-signing"
-        align="center"
-        itemStyle={{ display: 'flex' }}
-      >
         {this.ssoSigningOptions.map((curr) => (
           <NPopover key={curr.key}>
             {{
@@ -79,7 +75,7 @@ const SSOSigning = defineComponent({
             }}
           </NPopover>
         ))}
-      </NSpace>
+      </NFlex>
     )
   },
 })

src/views/login/components/Signing/index.tsx

@@ -1,11 +1,10 @@
 import { NForm, NFormItem, NInput, NButton } from 'naive-ui'
 
 import { setStorage } from '@/utils'
-import { useI18n } from '@/hooks/web'
+import { useI18n, useAppRoot } from '@/hooks'
-import { APP_CATCH_KEY } from '@/app-config/appConfig'
+import { APP_CATCH_KEY } from '@/app-config'
 import { setVariable, getVariableToRefs } from '@/global-variable'
 import { useSigningActions } from '@/store'
-import { useAppRoot } from '@/hooks/template'
 
 import type { FormInst } from 'naive-ui'
 

src/views/login/index.tsx

@@ -1,7 +1,7 @@
 import './index.scss'
 
 import {
-  NSpace,
+  NFlex,
   NCard,
   NTabs,
   NTabPane,
@@ -19,7 +19,7 @@ import { RIcon } from '@/components'
 import RayLink from '@/app-components/app/RayLink'
 import ThemeSwitch from '@/layout/components/SiderBar/components/SettingDrawer/components/ThemeSwitch'
 
-import { LOCAL_OPTIONS } from '@/app-config/localConfig'
+import { LOCAL_OPTIONS } from '@/app-config'
 import { useWindowSize } from '@vueuse/core'
 import { useSettingActions } from '@/store'
 
@@ -63,19 +63,13 @@ const Login = defineComponent({
           ]}
         >
           <div class={['login-wrapper__content']}>
-            <NSpace align="center" class="login-title__wrapper">
+            <NFlex align="center" class="login-title__wrapper">
               <RIcon name="ray" size="48" />
               <NGradientText class="login-title" type="info" size={28}>
                 Ray Template
               </NGradientText>
-            </NSpace>
+            </NFlex>
-            <NSpace
+            <NFlex align="center" class="login-action__wrapper">
-              align="center"
-              class="login-action__wrapper"
-              itemStyle={{
-                display: 'flex',
-              }}
-            >
               <ThemeSwitch />
               <NDropdown
                 options={LOCAL_OPTIONS}
@@ -89,7 +83,7 @@ const Login = defineComponent({
                   cursor="pointer"
                 />
               </NDropdown>
-            </NSpace>
+            </NFlex>
             <NGrid
               cols={'s:1 m:1 l:2 xl:2 2xl:2'}
               itemResponsive={false}
@@ -99,12 +93,12 @@ const Login = defineComponent({
                 span={'s:0 m:0 l:1 xl:1 2xl:1'}
                 class="login__left-wrapper"
               >
-                <NSpace align="center" vertical>
+                <NFlex align="center" vertical>
                   <RIcon name="login_bg" width="368" height="368" />
                   <NGradientText class="login-title" type="info" size={36}>
                     开箱即用的中后台管理系统
                   </NGradientText>
-                </NSpace>
+                </NFlex>
               </NGridItem>
               <NGridItem span={1} class="login__right-wrapper">
                 <NCard
@@ -150,14 +144,13 @@ const Login = defineComponent({
                 </NCard>
               </NGridItem>
             </NGrid>
-            <NSpace
+            <NFlex
               align="center"
               justify="center"
               class="login-copyright__wrapper"
-              wrapItem={false}
             >
               {this.copyright}
-            </NSpace>
+            </NFlex>
           </div>
         </div>
       </div>

unplugin/.eslintrc-auto-import.json

@@ -80,6 +80,7 @@
     "watch": true,
     "watchEffect": true,
     "watchPostEffect": true,
-    "watchSyncEffect": true
+    "watchSyncEffect": true,
+    "NEllipsis": true
   }
 }

unplugin/auto-imports.d.ts

@@ -6,6 +6,7 @@
 export {}
 declare global {
   const EffectScope: typeof import('vue')['EffectScope']
+  const NEllipsis: typeof import('naive-ui')['NEllipsis']
   const acceptHMRUpdate: typeof import('pinia')['acceptHMRUpdate']
   const computed: typeof import('vue')['computed']
   const createApp: typeof import('vue')['createApp']