version: v4.6.0正式发布

CHANGELOG.md

@@ -8,8 +8,11 @@
 
 ## Feats
 
-- 更新 `vue` 版本至 `3.4.7`
+- 更新 `vue` 版本至 `3.4.14`
-- 更新 `naive-ui` 版本至 `2.37.3`
+- `naive-ui` 相关
+  - 更新 `naive-ui` 版本至 `2.37.3`
+  - 更替 `naive-ui` `cdn` 为 `https://cdnjs.cloudflare.com/ajax/libs/naive-ui/2.37.3/index.prod.js`
+  - 使用 `NFlex` 组件替换 `NSpace` 组件，查看 [官方文档](https://www.naiveui.com/zh-CN/dark/components/flex)
 - 更新最新版本 `vue` 后，更新 `createDiscreteApi` 方法注册上下文，改为函数包裹，避免 `slot default invoked outside of render` 警告
 - `menu store` 相关
   - 优化 `setupAppMenu` 方法，初始化时会拼接完整的 `fullPath`，避免 `url`, `menu value` 更新路由时重复处理 `path`，提高性能
@@ -30,6 +33,9 @@
   - 同步更新所有方法，使用 `fullPath` 代替 `path`
 - `useContextmenuCoordinate` 方法
   - 使用 `readonly` 方法包裹 `show` 属性
+  - 新增返回 `updateShow` 方法，允许手动更新 `show` 属性
+  - 新增 `options` 配置项 `clickOutside` 方法，允许配置点击元素外部区域的回调函数
+  - 更新对应 demo
   - 补充一些注释
 - 统一 `app-config` 的导入导出方式，现在统一为 `import { xxx } from '@/app-config'` 导入
 - 统一 `hooks` 包的导入导出方式，现在统一为 `import { xxx } from '@/hooks'` 导入
@@ -37,10 +43,16 @@
   - 开放 `APP_CATCH_KEY.appMenuKey` 属性，配置缓存读取字段
 - `useMaximize` 相关
   - 优化 `maximize` 方法，现在支持配置滚动位置
+- `cfg.ts` 相关
+  - `cfg.ts` 更名为 `vite.custom.config.ts`
+  - `cfg.ts` 类型包更名为 `viteCustomConfig.ts`
+- 由于 `cdn.staticfile.org` 停止服务，所以切换至 `cdnjs`
 
 ## Fixes
 
 - 修复 `RChart` 组件 `RChartInst` 类型不完整的问题
+- 修复读取默认缓存语言的时候没有正确使用 `APP_CATCH_KEY.localeLanguage` 的问题
+- 修复 `RTable` 全屏没有正确弹出提示信息问题
 
 ## 4.5.0
 

package.json

@@ -34,7 +34,7 @@
   "dependencies": {
     "@vueuse/core": "^10.7.1",
     "awesome-qr": "2.1.5-rc.0",
-    "axios": "^1.6.2",
+    "axios": "^1.6.5",
     "clipboard": "^2.0.11",
     "crypto-js": "^4.1.1",
     "currency.js": "^2.0.4",
@@ -48,7 +48,7 @@
     "pinia": "^2.1.7",
     "pinia-plugin-persistedstate": "^3.2.0",
     "print-js": "^1.6.0",
-    "vue": "^3.4.7",
+    "vue": "^3.4.14",
     "vue-hooks-plus": "1.8.5",
     "vue-i18n": "^9.9.0",
     "vue-router": "^4.2.5",

pnpm-lock.yaml

@@ -7,13 +7,13 @@ settings:
 dependencies:
   '@vueuse/core':
     specifier: ^10.7.1
-    version: 10.7.1(vue@3.4.7)
+    version: 10.7.1(vue@3.4.14)
   awesome-qr:
     specifier: 2.1.5-rc.0
     version: 2.1.5-rc.0
   axios:
-    specifier: ^1.6.2
+    specifier: ^1.6.5
-    version: 1.6.2
+    version: 1.6.5
   clipboard:
     specifier: ^2.0.11
     version: 2.0.11
@@ -43,10 +43,10 @@ dependencies:
     version: 1.1.0
   naive-ui:
     specifier: ^2.37.3
-    version: 2.37.3(vue@3.4.7)
+    version: 2.37.3(vue@3.4.14)
   pinia:
     specifier: ^2.1.7
-    version: 2.1.7(typescript@5.2.2)(vue@3.4.7)
+    version: 2.1.7(typescript@5.2.2)(vue@3.4.14)
   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.7
+    specifier: ^3.4.14
-    version: 3.4.7(typescript@5.2.2)
+    version: 3.4.14(typescript@5.2.2)
   vue-hooks-plus:
     specifier: 1.8.5
-    version: 1.8.5(vue@3.4.7)
+    version: 1.8.5(vue@3.4.14)
   vue-i18n:
     specifier: ^9.9.0
-    version: 9.9.0(vue@3.4.7)
+    version: 9.9.0(vue@3.4.14)
   vue-router:
     specifier: ^4.2.5
-    version: 4.2.5(vue@3.4.7)
+    version: 4.2.5(vue@3.4.14)
   xlsx:
     specifier: ^0.18.5
     version: 0.18.5
@@ -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.7)
+    version: 5.0.0(vite@5.0.10)(vue@3.4.14)
   '@vitejs/plugin-vue-jsx':
     specifier: ^3.1.0
-    version: 3.1.0(vite@5.0.10)(vue@3.4.7)
+    version: 3.1.0(vite@5.0.10)(vue@3.4.14)
   '@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.7.1)
   unplugin-vue-components:
     specifier: ^0.25.2
-    version: 0.25.2(vue@3.4.7)
+    version: 0.25.2(vue@3.4.14)
   vite:
     specifier: ^5.0.10
     version: 5.0.10(@types/node@20.4.7)(sass@1.69.5)
@@ -927,12 +927,12 @@ packages:
       css-render: 0.15.12
     dev: false
 
-  /@css-render/vue3-ssr@0.15.12(vue@3.4.7):
+  /@css-render/vue3-ssr@0.15.12(vue@3.4.14):
     resolution: {integrity: sha512-AQLGhhaE0F+rwybRCkKUdzBdTEM/5PZBYy+fSYe1T9z9+yxMuV/k7ZRqa4M69X+EI1W8pa4kc9Iq2VjQkZx4rg==}
     peerDependencies:
       vue: ^3.0.11
     dependencies:
-      vue: 3.4.7(typescript@5.2.2)
+      vue: 3.4.14(typescript@5.2.2)
     dev: false
 
   /@emotion/hash@0.8.0:
@@ -1430,7 +1430,7 @@ packages:
       magic-string: 0.30.5
       mlly: 1.4.1
       source-map-js: 1.0.2
-      vue-i18n: 9.9.0(vue@3.4.7)
+      vue-i18n: 9.9.0(vue@3.4.14)
       yaml-eslint-parser: 1.2.2
     dev: true
 
@@ -1492,7 +1492,7 @@ packages:
       picocolors: 1.0.0
       source-map-js: 1.0.2
       unplugin: 1.4.0
-      vue-i18n: 9.9.0(vue@3.4.7)
+      vue-i18n: 9.9.0(vue@3.4.14)
     transitivePeerDependencies:
       - rollup
       - supports-color
@@ -2111,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.7):
+  /@vitejs/plugin-vue-jsx@3.1.0(vite@5.0.10)(vue@3.4.14):
     resolution: {integrity: sha512-w9M6F3LSEU5kszVb9An2/MmXNxocAnUb3WhRr8bHlimhDrXNt6n6D2nJQR3UXpGlZHh/EsgouOHCsM8V3Ln+WA==}
     engines: {node: ^14.18.0 || >=16.0.0}
     peerDependencies:
@@ -2122,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.7(typescript@5.2.2)
+      vue: 3.4.14(typescript@5.2.2)
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /@vitejs/plugin-vue@5.0.0(vite@5.0.10)(vue@3.4.7):
+  /@vitejs/plugin-vue@5.0.0(vite@5.0.10)(vue@3.4.14):
     resolution: {integrity: sha512-7x5e8X4J1Wi4NxudGjJBd2OFerAi/0nzF80ojCzvfj347WVr0YSn82C8BSsgwSHzlk9Kw5xnZfj0/7RLnNwP5w==}
     engines: {node: ^18.0.0 || >=20.0.0}
     peerDependencies:
@@ -2135,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.7(typescript@5.2.2)
+      vue: 3.4.14(typescript@5.2.2)
     dev: true
 
   /@volar/language-core@1.10.1:
@@ -2163,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.7)
+      vue-hooks-plus: 1.8.5(vue@3.4.14)
     dev: true
 
   /@vue/babel-helper-vue-transform-on@1.1.5:
@@ -2207,11 +2207,11 @@ packages:
       source-map-js: 1.0.2
     dev: true
 
-  /@vue/compiler-core@3.4.7:
+  /@vue/compiler-core@3.4.14:
-    resolution: {integrity: sha512-hhCaE3pTMrlIJK7M/o3Xf7HV8+JoNTGOQ/coWS+V+pH6QFFyqtoXqQzpqsNp7UK17xYKua/MBiKj4e1vgZOBYw==}
+    resolution: {integrity: sha512-ro4Zzl/MPdWs7XwxT7omHRxAjMbDFRZEEjD+2m3NBf8YzAe3HuoSEZosXQo+m1GQ1G3LQ1LdmNh1RKTYe+ssEg==}
     dependencies:
       '@babel/parser': 7.23.6
-      '@vue/shared': 3.4.7
+      '@vue/shared': 3.4.14
       entities: 4.5.0
       estree-walker: 2.0.2
       source-map-js: 1.0.2
@@ -2230,11 +2230,11 @@ packages:
       '@vue/shared': 3.3.8
     dev: true
 
-  /@vue/compiler-dom@3.4.7:
+  /@vue/compiler-dom@3.4.14:
-    resolution: {integrity: sha512-qDKBAIurCTub4n/6jDYkXwgsFuriqqmmLrIq1N2QDfYJA/mwiwvxi09OGn28g+uDdERX9NaKDLji0oTjE3sScg==}
+    resolution: {integrity: sha512-nOZTY+veWNa0DKAceNWxorAbWm0INHdQq7cejFaWM1WYnoNSJbSEKYtE7Ir6lR/+mo9fttZpPVI9ZFGJ1juUEQ==}
     dependencies:
-      '@vue/compiler-core': 3.4.7
+      '@vue/compiler-core': 3.4.14
-      '@vue/shared': 3.4.7
+      '@vue/shared': 3.4.14
 
   /@vue/compiler-sfc@3.3.8:
     resolution: {integrity: sha512-WMzbUrlTjfYF8joyT84HfwwXo+8WPALuPxhy+BZ6R4Aafls+jDBnSz8PDz60uFhuqFbl3HxRfxvDzrUf3THwpA==}
@@ -2251,17 +2251,17 @@ packages:
       source-map-js: 1.0.2
     dev: true
 
-  /@vue/compiler-sfc@3.4.7:
+  /@vue/compiler-sfc@3.4.14:
-    resolution: {integrity: sha512-Gec6CLkReVswDYjQFq79O5rktri4R7TsD/VPCiUoJw40JhNNxaNJJa8mrQrWoJluW4ETy6QN0NUyC/JO77OCOw==}
+    resolution: {integrity: sha512-1vHc9Kv1jV+YBZC/RJxQJ9JCxildTI+qrhtDh6tPkR1O8S+olBUekimY0km0ZNn8nG1wjtFAe9XHij+YLR8cRQ==}
     dependencies:
       '@babel/parser': 7.23.6
-      '@vue/compiler-core': 3.4.7
+      '@vue/compiler-core': 3.4.14
-      '@vue/compiler-dom': 3.4.7
+      '@vue/compiler-dom': 3.4.14
-      '@vue/compiler-ssr': 3.4.7
+      '@vue/compiler-ssr': 3.4.14
-      '@vue/shared': 3.4.7
+      '@vue/shared': 3.4.14
       estree-walker: 2.0.2
       magic-string: 0.30.5
-      postcss: 8.4.32
+      postcss: 8.4.33
       source-map-js: 1.0.2
 
   /@vue/compiler-ssr@3.3.8:
@@ -2271,11 +2271,11 @@ packages:
       '@vue/shared': 3.3.8
     dev: true
 
-  /@vue/compiler-ssr@3.4.7:
+  /@vue/compiler-ssr@3.4.14:
-    resolution: {integrity: sha512-PvYeSOvnCkST5mGS0TLwEn5w+4GavtEn6adcq8AspbHaIr+mId5hp7cG3ASy3iy8b+LuXEG2/QaV/nj5BQ/Aww==}
+    resolution: {integrity: sha512-bXT6+oAGlFjTYVOTtFJ4l4Jab1wjsC0cfSfOe2B4Z0N2vD2zOBSQ9w694RsCfhjk+bC2DY5Gubb1rHZVii107Q==}
     dependencies:
-      '@vue/compiler-dom': 3.4.7
+      '@vue/compiler-dom': 3.4.14
-      '@vue/shared': 3.4.7
+      '@vue/shared': 3.4.14
 
   /@vue/devtools-api@6.5.1:
     resolution: {integrity: sha512-+KpckaAQyfbvshdDW5xQylLni1asvNSGme1JFs8I1+/H5pHEhqUKMEQD/qn3Nx5+/nycBq11qAEi8lk+LXI2dA==}
@@ -2350,32 +2350,32 @@ packages:
       '@vue/shared': 3.3.8
     dev: true
 
-  /@vue/reactivity@3.4.7:
+  /@vue/reactivity@3.4.14:
-    resolution: {integrity: sha512-F539DO0ogH0+L8F9Pnw7cjqibcmSOh5UTk16u5f4MKQ8fraqepI9zdh+sozPX6VmEHOcjo8qw3Or9ZcFFw4SZA==}
+    resolution: {integrity: sha512-xRYwze5Q4tK7tT2J4uy4XLhK/AIXdU5EBUu9PLnIHcOKXO0uyXpNNMzlQKuq7B+zwtq6K2wuUL39pHA6ZQzObw==}
     dependencies:
-      '@vue/shared': 3.4.7
+      '@vue/shared': 3.4.14
 
-  /@vue/runtime-core@3.4.7:
+  /@vue/runtime-core@3.4.14:
-    resolution: {integrity: sha512-QMMsWRQaD3BpGyjjChthpl4Mji4Fjx1qfdufsXlDkKU3HV+hWNor2z+29F+E1MmVcP0ZfRZUfqYgtsQoL7IGwQ==}
+    resolution: {integrity: sha512-qu+NMkfujCoZL6cfqK5NOfxgXJROSlP2ZPs4CTcVR+mLrwl4TtycF5Tgo0QupkdBL+2kigc6EsJlTcuuZC1NaQ==}
     dependencies:
-      '@vue/reactivity': 3.4.7
+      '@vue/reactivity': 3.4.14
-      '@vue/shared': 3.4.7
+      '@vue/shared': 3.4.14
 
-  /@vue/runtime-dom@3.4.7:
+  /@vue/runtime-dom@3.4.14:
-    resolution: {integrity: sha512-XwegyUY1rw8zxsX1Z36vwYcqo+uOgih5ti7y9vx+pPFhNdSQmN4LqK2RmSeAJG1oKV8NqSUmjpv92f/x6h0SeQ==}
+    resolution: {integrity: sha512-B85XmcR4E7XsirEHVqhmy4HPbRT9WLFWV9Uhie3OapV9m1MEN9+Er6hmUIE6d8/l2sUygpK9RstFM2bmHEUigA==}
     dependencies:
-      '@vue/runtime-core': 3.4.7
+      '@vue/runtime-core': 3.4.14
-      '@vue/shared': 3.4.7
+      '@vue/shared': 3.4.14
       csstype: 3.1.3
 
-  /@vue/server-renderer@3.4.7(vue@3.4.7):
+  /@vue/server-renderer@3.4.14(vue@3.4.14):
-    resolution: {integrity: sha512-3bWnYLEkLLhkDWqvNk7IvbQD4UcxvFKxELBiOO2iG3m6AniFIsBWfHOO5tLVQnjdWkODu4rq0GipmfEenVAK5Q==}
+    resolution: {integrity: sha512-pwSKXQfYdJBTpvWHGEYI+akDE18TXAiLcGn+Q/2Fj8wQSHWztoo7PSvfMNqu6NDhp309QXXbPFEGCU5p85HqkA==}
     peerDependencies:
-      vue: 3.4.7
+      vue: 3.4.14
     dependencies:
-      '@vue/compiler-ssr': 3.4.7
+      '@vue/compiler-ssr': 3.4.14
-      '@vue/shared': 3.4.7
+      '@vue/shared': 3.4.14
-      vue: 3.4.7(typescript@5.2.2)
+      vue: 3.4.14(typescript@5.2.2)
 
   /@vue/shared@3.3.13:
     resolution: {integrity: sha512-/zYUwiHD8j7gKx2argXEMCUXVST6q/21DFU0sTfNX0URJroCe3b1UF6vLJ3lQDfLNIiiRl2ONp7Nh5UVWS6QnA==}
@@ -2385,8 +2385,8 @@ packages:
     resolution: {integrity: sha512-8PGwybFwM4x8pcfgqEQFy70NaQxASvOC5DJwLQfpArw1UDfUXrJkdxD3BhVTMS+0Lef/TU7YO0Jvr0jJY8T+mw==}
     dev: true
 
-  /@vue/shared@3.4.7:
+  /@vue/shared@3.4.14:
-    resolution: {integrity: sha512-G+i4glX1dMJk88sbJEcQEGWRQnVm9eIY7CcQbO5dpdsD9SF8jka3Mr5OqZYGjczGN1+D6EUwdu6phcmcx9iuPA==}
+    resolution: {integrity: sha512-nmi3BtLpvqXAWoRZ6HQ+pFJOHBU4UnH3vD3opgmwXac7vhaHKA9nj1VeGjMggdB9eLtW83eHyPCmOU1qzdsC7Q==}
 
   /@vue/typescript@1.8.8(typescript@5.2.2):
     resolution: {integrity: sha512-jUnmMB6egu5wl342eaUH236v8tdcEPXXkPgj+eI/F6JwW/lb+yAU6U07ZbQ3MVabZRlupIlPESB7ajgAGixhow==}
@@ -2397,13 +2397,13 @@ packages:
       - typescript
     dev: true
 
-  /@vueuse/core@10.7.1(vue@3.4.7):
+  /@vueuse/core@10.7.1(vue@3.4.14):
     resolution: {integrity: sha512-74mWHlaesJSWGp1ihg76vAnfVq9NTv1YT0SYhAQ6zwFNdBkkP+CKKJmVOEHcdSnLXCXYiL5e7MaewblfiYLP7g==}
     dependencies:
       '@types/web-bluetooth': 0.0.20
       '@vueuse/metadata': 10.7.1
-      '@vueuse/shared': 10.7.1(vue@3.4.7)
+      '@vueuse/shared': 10.7.1(vue@3.4.14)
-      vue-demi: 0.14.6(vue@3.4.7)
+      vue-demi: 0.14.6(vue@3.4.14)
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
@@ -2411,10 +2411,10 @@ packages:
   /@vueuse/metadata@10.7.1:
     resolution: {integrity: sha512-jX8MbX5UX067DYVsbtrmKn6eG6KMcXxLRLlurGkZku5ZYT3vxgBjui2zajvUZ18QLIjrgBkFRsu7CqTAg18QFw==}
 
-  /@vueuse/shared@10.7.1(vue@3.4.7):
+  /@vueuse/shared@10.7.1(vue@3.4.14):
     resolution: {integrity: sha512-v0jbRR31LSgRY/C5i5X279A/WQjD6/JsMzGa+eqt658oJ75IvQXAeONmwvEMrvJQKnRElq/frzBR7fhmWY5uLw==}
     dependencies:
-      vue-demi: 0.14.6(vue@3.4.7)
+      vue-demi: 0.14.6(vue@3.4.14)
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
@@ -2810,10 +2810,10 @@ packages:
       - supports-color
     dev: false
 
-  /axios@1.6.2:
+  /axios@1.6.5:
-    resolution: {integrity: sha512-7i24Ri4pmDRfJTR7LDBhsOTtcm+9kjX5WiY1X3wIisx6G9So3pfMkEiU7emUBe46oceVImccTEM3k6C5dbVW8A==}
+    resolution: {integrity: sha512-Ii012v05KEVuUoFWmMW/UQv9aRIc3ZwkWDcM+h5Il8izZCtRVpDUfwpoFf7eOtajT3QiGR4yDUx7lPqHJULgbg==}
     dependencies:
-      follow-redirects: 1.15.3
+      follow-redirects: 1.15.5
       form-data: 4.0.0
       proxy-from-env: 1.1.0
     transitivePeerDependencies:
@@ -4555,8 +4555,8 @@ packages:
     resolution: {integrity: sha512-36yxDn5H7OFZQla0/jFJmbIKTdZAQHngCedGxiMmpNfEZM0sdEeT+WczLQrjK6D7o2aiyLYDnkw0R3JK0Qv1RQ==}
     dev: true
 
-  /follow-redirects@1.15.3:
+  /follow-redirects@1.15.5:
-    resolution: {integrity: sha512-1VzOtuEM8pC9SFU1E+8KfTjZyMztRsgEfwQl44z8A25uy13jSzTj6dyK2Df52iV0vgHCfBwLhDWevLn95w5v6Q==}
+    resolution: {integrity: sha512-vSFWUON1B+yAw1VN4xMfxgn5fTUiaOzAJCKBwIIgT/+7CuGy9+r+5gITvP62j3RmaD5Ph65UaERdOSRGUzZtgw==}
     engines: {node: '>=4.0'}
     peerDependencies:
       debug: '*'
@@ -5978,13 +5978,13 @@ packages:
       minimatch: 3.1.2
     dev: true
 
-  /naive-ui@2.37.3(vue@3.4.7):
+  /naive-ui@2.37.3(vue@3.4.14):
     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.7)
+      '@css-render/vue3-ssr': 0.15.12(vue@3.4.14)
       '@types/katex': 0.16.7
       '@types/lodash': 4.14.202
       '@types/lodash-es': 4.17.11
@@ -5999,10 +5999,10 @@ packages:
       lodash-es: 4.17.21
       seemly: 0.3.8
       treemate: 0.3.11
-      vdirs: 0.1.8(vue@3.4.7)
+      vdirs: 0.1.8(vue@3.4.14)
-      vooks: 0.2.12(vue@3.4.7)
+      vooks: 0.2.12(vue@3.4.14)
-      vue: 3.4.7(typescript@5.2.2)
+      vue: 3.4.14(typescript@5.2.2)
-      vueuc: 0.4.58(vue@3.4.7)
+      vueuc: 0.4.58(vue@3.4.14)
     dev: false
 
   /nan@2.17.0:
@@ -6389,10 +6389,10 @@ packages:
     peerDependencies:
       pinia: ^2.0.0
     dependencies:
-      pinia: 2.1.7(typescript@5.2.2)(vue@3.4.7)
+      pinia: 2.1.7(typescript@5.2.2)(vue@3.4.14)
     dev: false
 
-  /pinia@2.1.7(typescript@5.2.2)(vue@3.4.7):
+  /pinia@2.1.7(typescript@5.2.2)(vue@3.4.14):
     resolution: {integrity: sha512-+C2AHFtcFqjPih0zpYuvof37SFxMQ7OEG2zV9jRI12i9BOy3YQVAHwdKtyyc8pDcDyIc33WCIsZaCFWU7WWxGQ==}
     peerDependencies:
       '@vue/composition-api': ^1.4.0
@@ -6406,8 +6406,8 @@ packages:
     dependencies:
       '@vue/devtools-api': 6.5.1
       typescript: 5.2.2
-      vue: 3.4.7(typescript@5.2.2)
+      vue: 3.4.14(typescript@5.2.2)
-      vue-demi: 0.14.6(vue@3.4.7)
+      vue-demi: 0.14.6(vue@3.4.14)
     dev: false
 
   /pkg-types@1.0.3:
@@ -6481,6 +6481,15 @@ packages:
       nanoid: 3.3.7
       picocolors: 1.0.0
       source-map-js: 1.0.2
+    dev: true
+
+  /postcss@8.4.33:
+    resolution: {integrity: sha512-Kkpbhhdjw2qQs2O2DGX+8m5OVqEcbB9HRBvuYM9pgrjEFUg30A9LmXNlTAUj4S9kgtGyrMbTzVjH7E+s5Re2yg==}
+    engines: {node: ^10 || ^12 || >=14}
+    dependencies:
+      nanoid: 3.3.7
+      picocolors: 1.0.0
+      source-map-js: 1.0.2
 
   /posthtml-parser@0.2.1:
     resolution: {integrity: sha512-nPC53YMqJnc/+1x4fRYFfm81KV2V+G9NZY+hTohpYg64Ay7NemWWcV4UWuy/SgMupqQ3kJ88M/iRfZmSnxT+pw==}
@@ -7680,7 +7689,7 @@ packages:
     dependencies:
       '@antfu/utils': 0.7.6
       '@rollup/pluginutils': 5.0.4
-      '@vueuse/core': 10.7.1(vue@3.4.7)
+      '@vueuse/core': 10.7.1(vue@3.4.14)
       fast-glob: 3.3.1
       local-pkg: 0.4.3
       magic-string: 0.30.5
@@ -7691,7 +7700,7 @@ packages:
       - rollup
     dev: true
 
-  /unplugin-vue-components@0.25.2(vue@3.4.7):
+  /unplugin-vue-components@0.25.2(vue@3.4.14):
     resolution: {integrity: sha512-OVmLFqILH6w+eM8fyt/d/eoJT9A6WO51NZLf1vC5c1FZ4rmq2bbGxTy8WP2Jm7xwFdukaIdv819+UI7RClPyCA==}
     engines: {node: '>=14'}
     peerDependencies:
@@ -7714,7 +7723,7 @@ packages:
       minimatch: 9.0.3
       resolve: 1.22.5
       unplugin: 1.4.0
-      vue: 3.4.7(typescript@5.2.2)
+      vue: 3.4.14(typescript@5.2.2)
     transitivePeerDependencies:
       - rollup
       - supports-color
@@ -7805,13 +7814,13 @@ packages:
     engines: {node: '>= 0.8'}
     dev: true
 
-  /vdirs@0.1.8(vue@3.4.7):
+  /vdirs@0.1.8(vue@3.4.14):
     resolution: {integrity: sha512-H9V1zGRLQZg9b+GdMk8MXDN2Lva0zx72MPahDKc30v+DtwKjfyOSXWRIX4t2mhDubM1H09gPhWeth/BJWPHGUw==}
     peerDependencies:
       vue: ^3.0.11
     dependencies:
       evtd: 0.2.4
-      vue: 3.4.7(typescript@5.2.2)
+      vue: 3.4.14(typescript@5.2.2)
     dev: false
 
   /vite-plugin-cdn2@0.15.2:
@@ -7994,16 +8003,16 @@ packages:
       fsevents: 2.3.3
     dev: true
 
-  /vooks@0.2.12(vue@3.4.7):
+  /vooks@0.2.12(vue@3.4.14):
     resolution: {integrity: sha512-iox0I3RZzxtKlcgYaStQYKEzWWGAduMmq+jS7OrNdQo1FgGfPMubGL3uGHOU9n97NIvfFDBGnpSvkWyb/NSn/Q==}
     peerDependencies:
       vue: ^3.0.0
     dependencies:
       evtd: 0.2.4
-      vue: 3.4.7(typescript@5.2.2)
+      vue: 3.4.14(typescript@5.2.2)
     dev: false
 
-  /vue-demi@0.14.6(vue@3.4.7):
+  /vue-demi@0.14.6(vue@3.4.14):
     resolution: {integrity: sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==}
     engines: {node: '>=12'}
     hasBin: true
@@ -8015,7 +8024,7 @@ packages:
       '@vue/composition-api':
         optional: true
     dependencies:
-      vue: 3.4.7(typescript@5.2.2)
+      vue: 3.4.14(typescript@5.2.2)
 
   /vue-eslint-parser@9.3.1(eslint@8.52.0):
     resolution: {integrity: sha512-Clr85iD2XFZ3lJ52/ppmUDG/spxQu6+MAeHXjjyI4I1NUYZ9xmenQp4N0oaHJhrA8OOxltCVxMRfANGa70vU0g==}
@@ -8035,7 +8044,7 @@ packages:
       - supports-color
     dev: true
 
-  /vue-hooks-plus@1.8.5(vue@3.4.7):
+  /vue-hooks-plus@1.8.5(vue@3.4.14):
     resolution: {integrity: sha512-cIatTWz6QQcoSCDn7jadQ3zMr799FmNiHyb59yUvR7Ws5KDJ/KdIMHHx/b0XDKzbGhQ61kcJ78zJKAKhOV0pWw==}
     peerDependencies:
       vue: ^3.2.25
@@ -8047,9 +8056,9 @@ packages:
       qs: 6.11.2
       query-string: 7.1.3
       screenfull: 5.2.0
-      vue: 3.4.7(typescript@5.2.2)
+      vue: 3.4.14(typescript@5.2.2)
 
-  /vue-i18n@9.9.0(vue@3.4.7):
+  /vue-i18n@9.9.0(vue@3.4.14):
     resolution: {integrity: sha512-xQ5SxszUAqK5n84N+uUyHH/PiQl9xZ24FOxyAaNonmOQgXeN+rD9z/6DStOpOxNFQn4Cgcquot05gZc+CdOujA==}
     engines: {node: '>= 16'}
     peerDependencies:
@@ -8058,15 +8067,15 @@ packages:
       '@intlify/core-base': 9.9.0
       '@intlify/shared': 9.9.0
       '@vue/devtools-api': 6.5.1
-      vue: 3.4.7(typescript@5.2.2)
+      vue: 3.4.14(typescript@5.2.2)
 
-  /vue-router@4.2.5(vue@3.4.7):
+  /vue-router@4.2.5(vue@3.4.14):
     resolution: {integrity: sha512-DIUpKcyg4+PTQKfFPX88UWhlagBEBEfJ5A8XDXRJLUnZOvcpMF8o/dnL90vpVkGaPbjvXazV/rC1qBKrZlFugw==}
     peerDependencies:
       vue: ^3.2.0
     dependencies:
       '@vue/devtools-api': 6.5.1
-      vue: 3.4.7(typescript@5.2.2)
+      vue: 3.4.14(typescript@5.2.2)
     dev: false
 
   /vue-template-compiler@2.7.14:
@@ -8088,34 +8097,34 @@ packages:
       typescript: 5.2.2
     dev: true
 
-  /vue@3.4.7(typescript@5.2.2):
+  /vue@3.4.14(typescript@5.2.2):
-    resolution: {integrity: sha512-4urmkWpudekq0CPNMO7p6mBGa9qmTXwJMO2r6CT4EzIJVG7WoSReiysiNb7OSi/WI113oX0Srn9Rz1k/DCXKFQ==}
+    resolution: {integrity: sha512-Rop5Al/ZcBbBz+KjPZaZDgHDX0kUP4duEzDbm+1o91uxYUNmJrZSBuegsNIJvUGy+epLevNRNhLjm08VKTgGyw==}
     peerDependencies:
       typescript: '*'
     peerDependenciesMeta:
       typescript:
         optional: true
     dependencies:
-      '@vue/compiler-dom': 3.4.7
+      '@vue/compiler-dom': 3.4.14
-      '@vue/compiler-sfc': 3.4.7
+      '@vue/compiler-sfc': 3.4.14
-      '@vue/runtime-dom': 3.4.7
+      '@vue/runtime-dom': 3.4.14
-      '@vue/server-renderer': 3.4.7(vue@3.4.7)
+      '@vue/server-renderer': 3.4.14(vue@3.4.14)
-      '@vue/shared': 3.4.7
+      '@vue/shared': 3.4.14
       typescript: 5.2.2
 
-  /vueuc@0.4.58(vue@3.4.7):
+  /vueuc@0.4.58(vue@3.4.14):
     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.7)
+      '@css-render/vue3-ssr': 0.15.12(vue@3.4.14)
       '@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.7)
+      vdirs: 0.1.8(vue@3.4.14)
-      vooks: 0.2.12(vue@3.4.7)
+      vooks: 0.2.12(vue@3.4.14)
-      vue: 3.4.7(typescript@5.2.2)
+      vue: 3.4.14(typescript@5.2.2)
     dev: false
 
   /webidl-conversions@3.0.1:

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

@@ -19,9 +19,9 @@
 
 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'
 import { getStorage } from '@/utils'
 
@@ -33,7 +33,7 @@ const AppAvatar = defineComponent({
   name: 'AppAvatar',
   props: {
     ...avatarProps,
-    ...spaceProps,
+    ...flexProps,
     cursor: {
       type: String,
       default: 'auto',
@@ -64,12 +64,11 @@ const AppAvatar = defineComponent({
   },
   render() {
     return (
-      <NSpace
+      <NFlex
         class="app-avatar"
         {...this.$props}
         style={this.cssVars}
         size={this.spaceSize}
-        wrapItem={false}
       >
         <NAvatar
           // eslint-disable-next-line prettier/prettier, @typescript-eslint/no-explicit-any
@@ -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,7 +11,7 @@
 
 /** 解锁界面 */
 
-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'
@@ -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

@@ -3,7 +3,7 @@
  * 友情链接组件，无实际项目意义
  */
 
-import { NAvatar, NTooltip, NSpace } from 'naive-ui'
+import { NAvatar, NTooltip, NFlex } from 'naive-ui'
 
 interface AvatarOptions {
   key: string
@@ -65,7 +65,7 @@ export default defineComponent({
   },
   render() {
     return (
-      <NSpace>
+      <NFlex>
         {this.avatarOptions.map((curr) => (
           <NTooltip key={curr.key}>
             {{
@@ -85,7 +85,7 @@ export default defineComponent({
             }}
           </NTooltip>
         ))}
-      </NSpace>
+      </NFlex>
     )
   },
 })

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 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'
@@ -97,6 +97,8 @@ const findSiblingsAndIndex = (
   return [null, null]
 }
 
+const R_TABLE_C_TOOL_ICON_ACTIVE = 'r-table__c-tool-icon--active'
+
 export default defineComponent({
   name: 'TableC',
   props: {
@@ -129,12 +131,12 @@ export default defineComponent({
           return {
             ...attr,
             suffix: () => (
-              <NSpace style="padding-left: 32px;">
+              <NFlex style="padding-left: 32px;">
                 <RowIconRender
                   icon="row_head"
                   title="固定在列首"
                   customClassName={
-                    isLeftFixedActivated ? 'r-table__c-tool-icon--active' : ''
+                    isLeftFixedActivated ? R_TABLE_C_TOOL_ICON_ACTIVE : ''
                   }
                   onClick={fixedClick.bind(this, 'left', attr, idx)}
                 />
@@ -146,7 +148,7 @@ export default defineComponent({
                         size={config.tableIconSize}
                         cursor="pointer"
                         customClassName={
-                          isResizable ? 'r-table__c-tool-icon--active' : ''
+                          isResizable ? R_TABLE_C_TOOL_ICON_ACTIVE : ''
                         }
                         onClick={resizableClick.bind(this, attr, idx)}
                       />
@@ -158,11 +160,11 @@ export default defineComponent({
                   icon="row_end"
                   title="固定在列尾"
                   customClassName={
-                    isRightFixedActivated ? 'r-table__c-tool-icon--active' : ''
+                    isRightFixedActivated ? R_TABLE_C_TOOL_ICON_ACTIVE : ''
                   }
                   onClick={fixedClick.bind(this, 'right', attr, idx)}
                 />
-              </NSpace>
+              </NFlex>
             ),
           }
         }) as C[]

src/components/RTable/src/components/Fullscreen.tsx

@@ -46,7 +46,9 @@ export default defineComponent({
               cursor="pointer"
               onClick={() => {
                 if (!isEnabled) {
-                  $t('globalMessage.isEnabledFullscreen')
+                  window.$message.warning(
+                    $t('globalMessage.isEnabledFullscreen'),
+                  )
                 }
 
                 toggleFullscreen()

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

@@ -16,8 +16,20 @@ import type {
   MaybeElementRef,
   MaybeElement,
   MaybeRefOrGetter,
+  OnClickOutsideHandler,
 } from '@vueuse/core'
 
+export interface UseContextmenuCoordinateOptions {
+  /**
+   *
+   * 自定义点击元素外部时的回调函数。
+   * 但是值得注意的事，该方法的优先级很高，可能会优先于其他方法执行
+   *
+   * @default null
+   */
+  clickOutside?: OnClickOutsideHandler
+}
+
 /**
  *
  * @param target 绑定元素
@@ -35,11 +47,17 @@ import type {
  */
 export const useContextmenuCoordinate = (
   target: BasicTarget,
-  options?: MaybeRefOrGetter<boolean | AddEventListenerOptions>,
+  options?: UseContextmenuCoordinateOptions &
+    MaybeRefOrGetter<boolean | AddEventListenerOptions>,
 ) => {
   const x = ref(0) // 鼠标 x 坐标
   const y = ref(0) // 鼠标 y 坐标
   const show = ref(false) // 是否显示右键菜单
+  const { clickOutside } = options ?? {}
+
+  const updateShow = (value: boolean) => {
+    show.value = value
+  }
 
   /**
    *
@@ -51,24 +69,27 @@ export const useContextmenuCoordinate = (
   const bindContextMenuEvent = (evt: Event) => {
     evt.preventDefault()
 
-    show.value = false
+    updateShow(false)
 
     nextTick().then(() => {
       const { clientX, clientY } = evt as MouseEvent
 
       x.value = clientX
       y.value = clientY
-      show.value = true
+
+      updateShow(true)
     })
   }
 
-  /**
+  if (clickOutside) {
-   *
+    /**
-   * 点击元素外部时，隐藏右键菜单
+     *
-   */
+     * 自定义点击元素外部时的回调函数
-  onClickOutside(target as MaybeElementRef<MaybeElement>, () => {
+     */
-    show.value = false
+    onClickOutside(target as MaybeElementRef<MaybeElement>, (detectIframe) => {
-  })
+      clickOutside(detectIframe)
+    })
+  }
 
   /**
    *
@@ -85,7 +106,7 @@ export const useContextmenuCoordinate = (
    * 为传递 ref dom 绑定点击事件
    */
   const cleanupClick = useEventListener(target, 'click', () => {
-    show.value = false
+    updateShow(false)
   })
 
   /**
@@ -103,6 +124,7 @@ export const useContextmenuCoordinate = (
     x: readonly(x),
     y: readonly(y),
     show: readonly(show),
+    updateShow,
   }
 }
 

src/layout/components/MenuTag/index.tsx

@@ -33,7 +33,7 @@ import './index.scss'
 
 import {
   NScrollbar,
-  NSpace,
+  NFlex,
   NLayoutHeader,
   NDropdown,
   NButton,
@@ -456,13 +456,12 @@ export default defineComponent({
               this.actionState.actionDropdownShow = false
             }}
           />
-          <NSpace
+          <NFlex
             class="menu-tag-space"
             wrap={false}
             align="center"
             justify="space-between"
             inline
-            wrapItem={false}
           >
             <RIcon
               name="expanded"
@@ -478,7 +477,7 @@ export default defineComponent({
                 id: uuidScrollBar,
               }}
             >
-              <NSpace
+              <NFlex
                 ref="menuTagSpaceRef"
                 class="menu-tag-wrapper"
                 wrap={false}
@@ -545,9 +544,9 @@ export default defineComponent({
                     }}
                   </NButton>
                 ))}
-              </NSpace>
+              </NFlex>
             </NScrollbar>
-            <NSpace
+            <NFlex
               class="menu-tag__right-wrapper"
               align="center"
               inline
@@ -586,8 +585,8 @@ export default defineComponent({
                   onClick={this.setCurrentContextmenuIndex.bind(this)}
                 />
               </RMoreDropdown>
-            </NSpace>
+            </NFlex>
-          </NSpace>
+          </NFlex>
         </div>
       </NLayoutHeader>
     )

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

@@ -20,7 +20,7 @@
 
 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'
@@ -255,7 +255,7 @@ export default defineComponent({
     }
 
     const SearchItem = ({ menuOption }: { menuOption: AppMenuOption }) => (
-      <NSpace
+      <NFlex
         align="center"
         class="content-item"
         {...{
@@ -265,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(() => {
@@ -320,30 +320,30 @@ export default defineComponent({
               </div>
               <NScrollbar class="global-search__card-content">
                 {searchOptions.length ? (
-                  <NSpace vertical size={[8, 8]}>
+                  <NFlex vertical size={[8, 8]}>
                     {searchOptions.map((curr) => (
                       <SearchItem menuOption={curr} key={curr.fullPath} />
                     ))}
-                  </NSpace>
+                  </NFlex>
                 ) : (
                   <NResult size="large" class="global-search__empty">
                     {{
                       icon: () => null,
                       default: () => (
-                        <NSpace
+                        <NFlex
                           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"
                   size={[24, 8]}
@@ -360,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,7 +9,7 @@
  * @remark 今天也是元气满满撸代码的一天
  */
 
-import { NSpace, NSwitch, NTooltip } from 'naive-ui'
+import { NFlex, NSwitch, NTooltip } from 'naive-ui'
 import { RIcon } from '@/components'
 
 import { useSettingGetters } from '@/store'
@@ -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,
@@ -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'
@@ -128,12 +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 align="center">
+          <NFlex align="center">
             {this.leftIconOptions.map((curr) => (
               <TooltipIcon
                 key={curr.name}
@@ -146,8 +146,8 @@ export default defineComponent({
               />
             ))}
             {this.getBreadcrumbSwitch ? <Breadcrumb /> : null}
-          </NSpace>
+          </NFlex>
-          <NSpace align="center">
+          <NFlex align="center">
             {this.rightTooltipIconOptions.map((curr) => (
               <TooltipIcon
                 key={curr.name}
@@ -180,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/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 size={[0, 0]} wrapItem={false}>
+      <NFlex size={[0, 0]}>
         <SiderBar />
-      </NSpace>
+      </NFlex>
     )
   },
 })

src/locales/lang/en-US/views/login/index.json

@@ -6,5 +6,6 @@
   "PasswordPlaceholder": "please enter password",
   "Login": "Login",
   "Name": "User Name",
-  "Password": "User Password"
+  "Password": "User Password",
+  "RayTemplate": "Fast Background Template"
 }

src/locales/lang/zh-CN/views/login/index.json

@@ -6,5 +6,6 @@
   "PasswordPlaceholder": "请输入密码",
   "Login": "登 陆",
   "Name": "用户名",
-  "Password": "密码"
+  "Password": "密码",
+  "RayTemplate": "开箱即用的中后台管理系统"
 }

src/store/modules/setting/index.ts

@@ -3,6 +3,7 @@ import { set } from 'lodash-es'
 import { colorToRgba, setStorage } from '@/utils'
 import { useI18n, useDayjs } from '@/hooks'
 import { APP_THEME } from '@/app-config'
+import { APP_CATCH_KEY } from '@/app-config'
 
 import type { SettingState } from '@/store/modules/setting/type'
 import type { LocalKey } from '@/hooks'
@@ -57,7 +58,7 @@ export const piniaSettingStore = defineStore(
 
       settingState.localeLanguage = key
 
-      setStorage('localeLanguage', key, 'localStorage')
+      setStorage(APP_CATCH_KEY.localeLanguage, key, 'localStorage')
     }
 
     /** 切换主题色 */

src/types/global.d.ts

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 export {}
 
-import type { AppConfig } from './modules/cfg'
+import type { AppConfig } from './modules/viteCustomConfig'
 import type {
   MessageApi,
   DialogApi,

src/types/index.ts

@@ -1,7 +1,7 @@
 export type * from './modules/app'
 export type * from './modules/appConfig'
 export type * from './modules/axios'
-export type * from './modules/cfg'
+export type * from './modules/viteCustomConfig'
 export type * from './modules/component'
 export type * from './modules/helper'
 export type * from './modules/utils'

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,7 +9,7 @@
  * @remark 今天也是元气满满撸代码的一天
  */
 
-import { NSpace, NCard, NDropdown } from 'naive-ui'
+import { NFlex, NCard, NDropdown } from 'naive-ui'
 
 import { useContextmenuCoordinate } from '@/hooks'
 
@@ -33,11 +33,17 @@ export default defineComponent({
       },
       {
         label: '尼克·卡拉威',
-        key: 'nick carraway',
+        key: 'nick caraway',
       },
     ])
 
-    const { x, y, show } = useContextmenuCoordinate(demoOneRef)
+    const { x, y, show, updateShow } = useContextmenuCoordinate(demoOneRef)
+
+    const clickOutside = (e: MouseEvent) => {
+      e.preventDefault()
+
+      updateShow(false)
+    }
 
     return {
       demoOneRef,
@@ -46,15 +52,18 @@ export default defineComponent({
       y,
       show,
       options,
+      clickOutside,
+      updateShow,
     }
   },
   render() {
     const { x, y, show } = this
+    const { clickOutside, updateShow } = this
 
     return (
-      <NSpace vertical>
+      <NFlex vertical>
         <NCard title="useContextmenuCoordinate + NDropdown 实现右键菜单">
-          <NSpace vertical>
+          <NFlex vertical>
             <h3>默认点击元素外部会关闭菜单。</h3>
             <div
               ref="demoOneRef"
@@ -62,7 +71,7 @@ export default defineComponent({
             >
               右击
             </div>
-          </NSpace>
+          </NFlex>
         </NCard>
         <NDropdown
           show={show}
@@ -71,8 +80,14 @@ export default defineComponent({
           options={this.options}
           trigger="manual"
           placement="bottom-start"
+          onSelect={(value, option) => {
+            window.$message.info(`选中了 ${option.label}`)
+
+            updateShow(false)
+          }}
+          onClickoutside={clickOutside.bind(this)}
         />
-      </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 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 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>
+      <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>
+      <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>
+                <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>
+      <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>
+            <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 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 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,
@@ -79,7 +79,7 @@ export default defineComponent({
     } = this
 
     return (
-      <NSpace 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>
@@ -167,7 +167,7 @@ export default defineComponent({
             跳转至多级菜单
           </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,7 +59,7 @@ const SSOSigning = defineComponent({
   },
   render() {
     return (
-      <NSpace class="sso-signing" align="center">
+      <NFlex class="sso-signing" align="center">
         {this.ssoSigningOptions.map((curr) => (
           <NPopover key={curr.key}>
             {{
@@ -75,7 +75,7 @@ const SSOSigning = defineComponent({
             }}
           </NPopover>
         ))}
-      </NSpace>
+      </NFlex>
     )
   },
 })

src/views/login/index.tsx

@@ -1,7 +1,7 @@
 import './index.scss'
 
 import {
-  NSpace,
+  NFlex,
   NCard,
   NTabs,
   NTabPane,
@@ -63,13 +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 align="center" class="login-action__wrapper">
+            <NFlex align="center" class="login-action__wrapper">
               <ThemeSwitch />
               <NDropdown
                 options={LOCAL_OPTIONS}
@@ -83,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}
@@ -93,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}>
-                    开箱即用的中后台管理系统
+                    {$t('views.login.index.RayTemplate')}
                   </NGradientText>
-                </NSpace>
+                </NFlex>
               </NGridItem>
               <NGridItem span={1} class="login__right-wrapper">
                 <NCard
@@ -144,13 +144,13 @@ const Login = defineComponent({
                 </NCard>
               </NGridItem>
             </NGrid>
-            <NSpace
+            <NFlex
               align="center"
               justify="center"
               class="login-copyright__wrapper"
             >
               {this.copyright}
-            </NSpace>
+            </NFlex>
           </div>
         </div>
       </div>

tsconfig.json

@@ -35,7 +35,7 @@
     "vite.config.ts",
     "vite-plugins/index.ts",
     "vite-plugins/type.ts",
-    "cfg.ts",
+    "vite.custom.config.ts",
     "package.json",
     "vite-env.d.ts",
     "./unplugin/**/*",

vite.config.ts

@@ -1,6 +1,6 @@
 import { defineConfig } from 'vite'
 
-import config from './cfg'
+import config from './vite.custom.config'
 import pkg from './package.json'
 import vitePlugins from './vite.plugin.config'
 

vite.custom.config.ts

@@ -18,7 +18,7 @@
  *   - 系统: 根路由、标题、浏览器标题、别名等
  *   - 请求: 代理配置
  *
- * 如果需要新增相关内容, 需要在 src/types/modules/cfg.ts 中进行类型配置
+ * 如果需要新增相关内容, 需要在 src/types/modules/viteCustomConfig.ts 中进行类型配置
  * ```
  * interface Config // config 内容类型配置
  *

vite.plugin.config.ts

@@ -29,7 +29,7 @@ import { cdn as viteCDNPlugin } from 'vite-plugin-cdn2'
 
 import { NaiveUiResolver } from 'unplugin-vue-components/resolvers'
 
-import config from './cfg'
+import config from './vite.custom.config'
 
 import type { PluginOption } from 'vite'
 
@@ -50,56 +50,61 @@ function onlyReportOptions(mode: string) {
 function onlyBuildOptions(mode: string) {
   return [
     viteCDNPlugin({
-      url: 'https://www.staticfile.org/',
       // modules 顺序 vue, vue-demi 必须保持当前顺序加载，否则会出现加载错误问题
       modules: [
         {
           name: 'vue',
           global: 'Vue',
-          resolve: 'https://cdn.staticfile.org/vue/3.4.7/vue.global.min.js',
+          resolve:
+            'https://cdnjs.cloudflare.com/ajax/libs/vue/3.4.14/vue.global.min.js',
         },
         {
           name: 'vue-demi',
           global: 'VueDemi',
           resolve:
-            'https://cdn.staticfile.org/vue-demi/0.14.6/index.iife.min.js',
+            'https://cdnjs.cloudflare.com/ajax/libs/vue-demi/0.14.6/index.iife.min.js',
         },
         {
           name: 'naive-ui',
           global: 'naive',
-          resolve: 'https://cdn.staticfile.org/naive-ui/2.35.0/index.min.js',
+          resolve:
+            'https://cdnjs.cloudflare.com/ajax/libs/naive-ui/2.37.3/index.prod.js',
         },
         {
           name: 'pinia',
           global: 'Pinia',
-          resolve: 'https://cdn.staticfile.org/pinia/2.1.7/pinia.iife.min.js',
+          resolve:
+            'https://cdnjs.cloudflare.com/ajax/libs/pinia/2.1.7/pinia.iife.min.js',
         },
         {
           name: 'vue-router',
           global: 'VueRouter',
           resolve:
-            'https://cdn.staticfile.org/vue-router/4.2.5/vue-router.global.min.js',
+            'https://cdnjs.cloudflare.com/ajax/libs/vue-router/4.2.5/vue-router.global.min.js',
         },
         {
           name: 'vue-i18n',
           global: 'VueI18n',
           resolve:
-            'https://cdn.staticfile.org/vue-i18n/9.9.0/vue-i18n.global.min.js',
+            'https://cdnjs.cloudflare.com/ajax/libs/vue-i18n/9.9.0/vue-i18n.global.min.js',
         },
         {
           name: 'echarts',
           global: 'echarts',
-          resolve: 'https://cdn.staticfile.org/echarts/5.4.3/echarts.min.js',
+          resolve:
+            'https://cdnjs.cloudflare.com/ajax/libs/echarts/5.4.3/echarts.min.js',
         },
         {
           name: 'xlsx',
           global: 'XLSX',
-          resolve: 'https://cdn.staticfile.org/xlsx/0.18.5/xlsx.full.min.js',
+          resolve:
+            'https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js',
         },
         {
           name: 'axios',
           global: 'axios',
-          resolve: 'https://cdn.staticfile.org/axios/1.6.2/axios.min.js',
+          resolve:
+            'https://cdnjs.cloudflare.com/ajax/libs/axios/1.6.5/axios.min.js',
         },
       ],
     }),