blackteay/ray-template
1
0
Fork 0
mirror of https://github.com/XiaoDaiGua-Ray/ray-template.git synced 2025-04-05 19:42:07 +08:00
Code Issues Packages Projects Releases Wiki Activity

version: 4.6.0

Browse Source
This commit is contained in:
XiaoDaiGua-Ray 2024-01-12 21:07:34 +08:00
parent c2041b2bb6
commit 57ed469543
96 changed files with 756 additions and 610 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.vscode/settings.json vendored
View File

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

43
CHANGELOG.md
View File

@ -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
破坏性更新。

8
package.json
View File

@ -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"
},

243
pnpm-lock.yaml generated
View File

@ -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
version: 2.36.0(vue@3.4.0)
specifier: ^2.37.3
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
version: 3.4.0(typescript@5.2.2)
specifier: ^3.4.7
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
version: 9.8.0(vue@3.4.0)
specifier: ^9.9.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:
resolution: {integrity: sha512-UxaSZVZ1DwqC/CltUZrWZNaWNhfmKtfyV4BJSt/Zt4Or/fZs1iFj0B+OekYk1+MRHfIOe3+x00uXGQI4PbO/9g==}
/@intlify/core-base@9.9.0:
resolution: {integrity: sha512-C7UXPymDIOlMGSNjAhNLtKgzITc/8BjINK5gNKXg8GiWCTwL6n3MWr55czksxn8RM5wTMz0qcLOFT+adtaVQaA==}
engines: {node: '>= 16'}
dependencies:
'@intlify/message-compiler': 9.8.0
'@intlify/shared': 9.8.0
'@intlify/message-compiler': 9.9.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:
resolution: {integrity: sha512-McnYWhcoYmDJvssVu6QGR0shqlkJuL1HHdi5lK7fNqvQqRYaQ4lSLjYmZxwc8tRNMdIe9/KUKfyPxU9M6yCtNQ==}
/@intlify/message-compiler@9.9.0:
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:
resolution: {integrity: sha512-TmgR0RCLjzrSo+W3wT0ALf9851iFMlVI9EYNGeWvZFUQTAJx0bvfsMlPdgVtV1tDNRiAfhkFsMKu6jtUY1ZLKQ==}
/@intlify/shared@9.9.0:
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:
resolution: {integrity: sha512-cw4S15PkNGTKkP9OFFl4wnQoJJk+HqaYBafgrpDnSukiQGpcYJeRpzmqnCVCIkl6V6Eqsv58E0OAdl6b592vuA==}
/@vue/compiler-core@3.4.7:
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:
resolution: {integrity: sha512-E957uOhpoE48YjZGWeAoLmNYd3UeU4oIP8kJi8Rcsb9l2tV8Z48Jn07Zgq1aW0v3vuhlmydEKkKKbhLpADHXEA==}
/@vue/compiler-dom@3.4.7:
resolution: {integrity: sha512-qDKBAIurCTub4n/6jDYkXwgsFuriqqmmLrIq1N2QDfYJA/mwiwvxi09OGn28g+uDdERX9NaKDLji0oTjE3sScg==}
dependencies:
'@vue/compiler-core': 3.4.0
'@vue/shared': 3.4.0
'@vue/compiler-core': 3.4.7
'@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:
resolution: {integrity: sha512-PWE0mE2yW7bJS7PmaCrVDEG6KPaDJo0pb4AKnCxJ5lRRDO4IwL/fswBGhCpov+v/c+N/e+hQHpXNwvqU9BtUXg==}
/@vue/compiler-sfc@3.4.7:
resolution: {integrity: sha512-Gec6CLkReVswDYjQFq79O5rktri4R7TsD/VPCiUoJw40JhNNxaNJJa8mrQrWoJluW4ETy6QN0NUyC/JO77OCOw==}
dependencies:
'@babel/parser': 7.23.6
'@vue/compiler-core': 3.4.0
'@vue/compiler-dom': 3.4.0
'@vue/compiler-ssr': 3.4.0
'@vue/shared': 3.4.0
'@vue/compiler-core': 3.4.7
'@vue/compiler-dom': 3.4.7
'@vue/compiler-ssr': 3.4.7
'@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:
resolution: {integrity: sha512-+oXKy105g9DIYQKDi3Gwung0xqQX5gJHr0GR+Vf7yK/WkNDM6q61ummcKmKAB85EIst8y3vj2PA9z9YU5Oc4DQ==}
/@vue/compiler-ssr@3.4.7:
resolution: {integrity: sha512-PvYeSOvnCkST5mGS0TLwEn5w+4GavtEn6adcq8AspbHaIr+mId5hp7cG3ASy3iy8b+LuXEG2/QaV/nj5BQ/Aww==}
dependencies:
'@vue/compiler-dom': 3.4.0
'@vue/shared': 3.4.0
'@vue/compiler-dom': 3.4.7
'@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:
resolution: {integrity: sha512-X6BvQjNcgKKHWPQzlRJjZvIu72Kkn8xJSv6VNptqWh8dToMknD0Hch1l4N7llKgVt6Diq4lMeUnErbZFvuGlAA==}
/@vue/reactivity@3.4.7:
resolution: {integrity: sha512-F539DO0ogH0+L8F9Pnw7cjqibcmSOh5UTk16u5f4MKQ8fraqepI9zdh+sozPX6VmEHOcjo8qw3Or9ZcFFw4SZA==}
dependencies:
'@vue/shared': 3.4.0
'@vue/shared': 3.4.7
/@vue/runtime-core@3.4.0:
resolution: {integrity: sha512-NYrj/JgMMqnSWcIud8lLzDQrBLu+EVEeQ56QE9DYJeKG2eFrnQy8o/h57R9nCprafHs0uImKL3xsdXjHseYVxw==}
/@vue/runtime-core@3.4.7:
resolution: {integrity: sha512-QMMsWRQaD3BpGyjjChthpl4Mji4Fjx1qfdufsXlDkKU3HV+hWNor2z+29F+E1MmVcP0ZfRZUfqYgtsQoL7IGwQ==}
dependencies:
'@vue/reactivity': 3.4.0
'@vue/shared': 3.4.0
'@vue/reactivity': 3.4.7
'@vue/shared': 3.4.7
/@vue/runtime-dom@3.4.0:
resolution: {integrity: sha512-1ZoHEsA5l77qbx2F+SWo/hQdBksPuOmww1t/jznidDG+xMB/iidafEFvo2ZTtZii0JfTIrlDhjshfYUvQC17wQ==}
/@vue/runtime-dom@3.4.7:
resolution: {integrity: sha512-XwegyUY1rw8zxsX1Z36vwYcqo+uOgih5ti7y9vx+pPFhNdSQmN4LqK2RmSeAJG1oKV8NqSUmjpv92f/x6h0SeQ==}
dependencies:
'@vue/runtime-core': 3.4.0
'@vue/shared': 3.4.0
'@vue/runtime-core': 3.4.7
'@vue/shared': 3.4.7
csstype: 3.1.3
/@vue/server-renderer@3.4.0(vue@3.4.0):
resolution: {integrity: sha512-GuOVCyLDlWPu8nKo5AUxb8B+iB/Ik4I1WwqAlBqf5+y48z6D6rvKshp7KR3cJea+pte1tdTsb0+Ja82KizMZOw==}
/@vue/server-renderer@3.4.7(vue@3.4.7):
resolution: {integrity: sha512-3bWnYLEkLLhkDWqvNk7IvbQD4UcxvFKxELBiOO2iG3m6AniFIsBWfHOO5tLVQnjdWkODu4rq0GipmfEenVAK5Q==}
peerDependencies:
vue: 3.4.0
vue: 3.4.7
dependencies:
'@vue/compiler-ssr': 3.4.0
'@vue/shared': 3.4.0
vue: 3.4.0(typescript@5.2.2)
'@vue/compiler-ssr': 3.4.7
'@vue/shared': 3.4.7
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:
resolution: {integrity: sha512-Nhh3ed3G1R6HDAWiG6YYFt0Zmq/To6u5vjzwa9TIquGheCXPY6nEdIAO8ZdlwXsWqC2yNLj700FOvShpYt5CEA==}
/@vue/shared@3.4.7:
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)
vue-demi: 0.14.6(vue@3.4.0)
'@vueuse/shared': 10.6.1(vue@3.4.7)
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):
resolution: {integrity: sha512-r1ydtEm1Ryf/aWpbLCf32mQAGK99jd1eXgpkCtIomcBRZeAtusfy6zCtIpCppoCuIKM3BW5DMafhVxilubk/lQ==}
/naive-ui@2.37.3(vue@3.4.7):
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)
vooks: 0.2.12(vue@3.4.0)
vue: 3.4.0(typescript@5.2.2)
vueuc: 0.4.54(vue@3.4.0)
vdirs: 0.1.8(vue@3.4.7)
vooks: 0.2.12(vue@3.4.7)
vue: 3.4.7(typescript@5.2.2)
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-demi: 0.14.6(vue@3.4.0)
vue: 3.4.7(typescript@5.2.2)
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):
resolution: {integrity: sha512-Izho+6PYjejsTq2mzjcRdBZ5VLRQoSuuexvR8029h5CpN03FYqiqBrShMyf2I1DKkN6kw/xmujcbvC+4QybpsQ==}
/vue-i18n@9.9.0(vue@3.4.7):
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/shared': 9.8.0
'@intlify/core-base': 9.9.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):
resolution: {integrity: sha512-iTE9Ve/7DO/H39+gXHrNkRdnh1jDwPe/fap4brbPKkp1APMkS03OiZ+UY0dwpqtRX0iPWQTkh8Fu3hKgLtaxfA==}
/vue@3.4.7(typescript@5.2.2):
resolution: {integrity: sha512-4urmkWpudekq0CPNMO7p6mBGa9qmTXwJMO2r6CT4EzIJVG7WoSReiysiNb7OSi/WI113oX0Srn9Rz1k/DCXKFQ==}
peerDependencies:
typescript: '*'
peerDependenciesMeta:
typescript:
optional: true
dependencies:
'@vue/compiler-dom': 3.4.0
'@vue/compiler-sfc': 3.4.0
'@vue/runtime-dom': 3.4.0
'@vue/server-renderer': 3.4.0(vue@3.4.0)
'@vue/shared': 3.4.0
'@vue/compiler-dom': 3.4.7
'@vue/compiler-sfc': 3.4.7
'@vue/runtime-dom': 3.4.7
'@vue/server-renderer': 3.4.7(vue@3.4.7)
'@vue/shared': 3.4.7
typescript: 5.2.2
/vueuc@0.4.54(vue@3.4.0):
resolution: {integrity: sha512-2LED7h1BSnCRPBI6AlSIf+1Yte1shN+Vb2gpspO5wHI7zWzbcq4bAu2f9nFh5yXIUKdzqmLvzRsOXDl4TrDyCw==}
/vueuc@0.4.58(vue@3.4.7):
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)
vooks: 0.2.12(vue@3.4.0)
vue: 3.4.0(typescript@5.2.2)
vdirs: 0.1.8(vue@3.4.7)
vooks: 0.2.12(vue@3.4.7)
vue: 3.4.7(typescript@5.2.2)
dev: false
/webidl-conversions@3.0.1:

13
src/app-components/app/AppAvatar/index.tsx
View File

@ -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 { APP_CATCH_KEY } from '@/app-config/appConfig'
import { avatarProps, flexProps } from 'naive-ui'
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>
)
},
})

8
src/app-components/app/AppLockScreen/components/UnlockScreen/index.tsx
View File

@ -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">

22
src/app-components/app/RayLink/index.tsx
View File

@ -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
/**
*
* 友链组件
*
* 这个组件用作初试模板中, 不喜欢自行删除
*/

53
src/app-components/provider/AppNaiveGlobalProvider/index.tsx
View File

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

2
src/app-config/appConfig.ts
View File

@ -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

6
src/app-config/index.ts Normal file
View File

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

2
src/axios/inject/request/provider.ts
View File

@ -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 {

2
src/axios/instance.ts
View File

@ -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,

2
src/components/RChart/src/index.tsx
View File

@ -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'

7
src/components/RChart/src/type.ts
View File

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

6
src/components/RCollapseGrid/src/index.tsx
View File

@ -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>
),

6
src/components/RTable/src/Table.tsx
View File

@ -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?.(),

17
src/components/RTable/src/components/C.tsx
View File

@ -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[])
}

2
src/components/RTransitionComponent/src/index.vue
View File

@ -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'

2
src/dayjs/index.ts
View File

@ -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 = () => {

36
src/directives/README_DIR.md
View File

@ -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>
</NSpace>
</NFlex>
</NFlex>
)
},
})

19
src/hooks/components/useContextmenuCoordinate.ts
View File

@ -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),
}
}

3
src/hooks/index.ts Normal file
View File

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

57
src/hooks/template/useAppNavigation.ts
View File

@ -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)
}
}

28
src/hooks/template/useMaximize.ts
View File

@ -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(false, { UseElementFullscreenOptions }) 取消全屏内容区域
* maximize(true, { MaximizeOptions }) 全屏内容区域
* 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 {

42
src/hooks/template/useSiderBar.ts
View File

@ -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 index = getMenuTagOptions.value.findIndex((curr) => curr.key === key)
const { fullPath } = target
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 {
changeMenuModelValue,
spliceMenTagOptions,
emptyMenuTagOptions,
setMenuTagOptions,
} = useMenuActions()
const { changeMenuModelValue, spliceMenTagOptions, 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()
redirectRouterToDashboard()
spliceMenTagOptions(0, getMenuTagOptions.value.length)
nextTick(redirectRouterToDashboard)
}
/**
@ -214,8 +212,8 @@ export function useSiderBar() {
spliceMenTagOptions(index + 1, spliceLength)
if (index <= currentIndex) {
if (getMenuKey.value !== option.key) {
changeMenuModelValue(option.key, option)
if (getMenuKey.value !== option.fullPath) {
changeMenuModelValue(option.fullPath, option)
}
}
}
@ -243,8 +241,8 @@ export function useSiderBar() {
spliceMenTagOptions(0, index)
if (currentIndex <= index) {
if (getMenuKey.value !== option.key) {
changeMenuModelValue(option.key, option)
if (getMenuKey.value !== option.fullPath) {
changeMenuModelValue(option.fullPath, option)
}
}
}
@ -267,9 +265,9 @@ export function useSiderBar() {
if (normal) {
const { option } = normal
if (getMenuKey.value !== option.key) {
emptyMenuTagOptions()
changeMenuModelValue(option.key, option)
if (getMenuKey.value !== option.fullPath) {
spliceMenTagOptions(0, getMenuTagOptions.value.length)
changeMenuModelValue(option.fullPath, option)
} else {
setMenuTagOptions(option, false)
}

2
src/hooks/template/useTheme.ts
View File

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

2
src/hooks/web/useDayjs.ts
View File

@ -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

43
src/hooks/web/useElementFullscreen.ts
View File

@ -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 = () => {

5
src/layout/components/Menu/index.tsx
View File

@ -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 { useDevice } from '@/hooks/web'
import { APP_MENU_CONFIG } from '@/app-config'
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}

69
src/layout/components/MenuTag/index.tsx
View File

@ -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 { useSiderBar } from '@/hooks/template'
import { useMaximize, useSpinning, useAppRoot, useSiderBar } from '@/hooks'
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 { maximize, closeCurrentMenuTag, scrollX, $t } = this
const {
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),
onContextmenu: this.handleContextMenu.bind(this, idx),
onMouseenter: this.menuTagMouseenter.bind(this, curr),
onMouseleave: this.menuTagMouseleave.bind(this, curr),
[this.MENU_TAG_DATA]: curr.path,
onClick: menuTagClick.bind(this, curr),
onContextmenu: menuTagContextMenu.bind(this, idx),
onMouseenter: menuTagMouseenter.bind(this, curr),
onMouseleave: menuTagMouseleave.bind(this, curr),
[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>
</NSpace>
</NFlex>
</NFlex>
</div>
</NLayoutHeader>
)

7
src/layout/components/SiderBar/components/Breadcrumb/index.tsx
View File

@ -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

31
src/layout/components/SiderBar/components/GlobalSearch/index.tsx
View File

@ -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
wrapItem={false}
<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"
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>

8
src/layout/components/SiderBar/components/SettingDrawer/components/ThemeSwitch/index.tsx
View File

@ -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>
)
},
})

8
src/layout/components/SiderBar/components/SettingDrawer/index.tsx
View File

@ -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>
)

32
src/layout/components/SiderBar/index.tsx
View File

@ -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
align="center"
wrapItem={false}
itemStyle={this.spaceItemStyle}
>
<NFlex align="center">
{this.leftIconOptions.map((curr) => (
<TooltipIcon
key={curr.name}
@ -156,12 +146,8 @@ export default defineComponent({
/>
))}
{this.getBreadcrumbSwitch ? <Breadcrumb /> : null}
</NSpace>
<NSpace
align="center"
wrapItem={false}
itemStyle={this.spaceItemStyle}
>
</NFlex>
<NFlex align="center">
{this.rightTooltipIconOptions.map((curr) => (
<TooltipIcon
key={curr.name}
@ -194,8 +180,8 @@ export default defineComponent({
>
<AppAvatar avatarSize="small" align="center" cursor="pointer" />
</NDropdown>
</NSpace>
</NSpace>
</NFlex>
</NFlex>
<SettingDrawer
v-model:show={this.showSettings}
placement={this.getDrawerPlacement}

2
src/layout/components/SiderBar/shared.ts
View File

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

2
src/layout/default/ContentWrapper/index.tsx
View File

@ -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'

6
src/layout/default/HeaderWrapper/index.tsx
View File

@ -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>
)
},
})

2
src/layout/index.tsx
View File

@ -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'

3
src/locales/helper.ts
View File

@ -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 } from '@/app-config/appConfig'
import { APP_CATCH_KEY, SYSTEM_DEFAULT_LOCAL } from '@/app-config'
import type { Recordable } from '@/types'
import type {

3
src/locales/index.ts
View File

@ -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'

2
src/router/README.md
View File

@ -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'

7
src/router/helper/permission.ts
View File

@ -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,
)

7
src/router/helper/routerCopilot.ts
View File

@ -10,11 +10,10 @@
*/
import { permissionRouter } from './permission'
import { SETUP_ROUTER_ACTION, SUPER_ADMIN } from '@/app-config/routerConfig'
import { useVueRouter } from '@/hooks/web'
import { SETUP_ROUTER_ACTION, SUPER_ADMIN, APP_CATCH_KEY } from '@/app-config'
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)
}

2
src/router/helper/setupHelper.ts
View File

@ -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'

2
src/router/index.ts
View File

@ -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'

2
src/router/modules/dashboard.ts
View File

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

2
src/router/modules/demo/axios.ts
View File

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

2
src/router/modules/demo/context-menu.ts
View File

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

2
src/router/modules/demo/directive.ts
View File

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

2
src/router/modules/demo/doc.ts
View File

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

2
src/router/modules/demo/echart.ts
View File

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

2
src/router/modules/demo/iframe.ts
View File

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

4
src/router/modules/demo/mock.ts
View File

@ -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,
},
}

2
src/router/modules/demo/modal.ts
View File

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

2
src/router/modules/demo/multi-menu.ts
View File

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

2
src/router/modules/demo/precision.ts
View File

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

2
src/router/modules/demo/qrcode.ts
View File

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

2
src/router/modules/demo/rely.ts
View File

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

2
src/router/modules/demo/router-demo.ts
View File

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

2
src/router/modules/demo/scroll-reveal.ts
View File

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

2
src/router/modules/demo/svg-icons.ts
View File

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

2
src/router/modules/demo/table.ts
View File

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

2
src/router/modules/demo/template-hooks.ts
View File

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

2
src/router/modules/error404.ts
View File

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

2
src/router/routes.ts
View File

@ -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()

2
src/spin/index.tsx
View File

@ -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)
*
* 仅需按照上述步骤实现全屏加载动画

4
src/store/hooks/useMenuStore.ts
View File

@ -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,
}
}

3
src/store/index.ts
View File

@ -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'

2
src/store/modules/keep-alive/index.ts
View File

@ -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'

6
src/store/modules/menu/helper.ts
View File

@ -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,
)

140
src/store/modules/menu/index.ts
View File

@ -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 = (
key: string | number,
option: AppMenuOption,
) => {
menuState.breadcrumbOptions = getCompleteRoutePath(menuState.options, key)
const setBreadcrumbOptions = (key: string | number) => {
menuState.breadcrumbOptions = parseAndFindMatchingNodes(
menuState.options,
'fullPath',
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 {
/**
*
* key 以 `/` 开头, 则说明为根路由, 直接跳转
* key 开头未匹配到 `/`, 则需要获取到完整路由后再进行跳转
*
* 但是, 缓存 key 都以当前点击 key 为准
*/
if (String(key)[0] === '/') {
/** 根路由直接跳转 */
push({
path,
query,
})
} else {
/** 如果不是根路由, 则拼接完整路由并跳转 */
const _path = getCompleteRoutePath(menuState.options, key)
.map((curr) => curr.key)
.join('/')
push({
path: String(key),
query,
})
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,
resolveOption(pickOption),
routePath,
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,
}
},

7
src/store/modules/setting/index.ts
View File

@ -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 { APP_THEME } from '@/app-config/designConfig'
import { useDayjs } from '@/hooks/web'
import { useI18n, useDayjs } from '@/hooks'
import { APP_THEME } from '@/app-config'
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(

1
src/types/modules/app.ts
View File

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

4
src/utils/dom.ts
View File

@ -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 {

2
src/utils/element.ts
View File

@ -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'

22
src/views/dashboard/index.tsx
View File

@ -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>

22
src/views/demo/axios/index.tsx
View File

@ -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>
)
},

12
src/views/demo/context-menu/index.tsx
View File

@ -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>
)
},
})

26
src/views/demo/directive/index.tsx
View File

@ -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>
)
},
})

6
src/views/demo/echart/index.tsx
View File

@ -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="周销售量"

6
src/views/demo/iframe/index.tsx
View File

@ -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>
)
},
})

10
src/views/demo/mock-demo/index.tsx
View File

@ -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>
)
},
})

14
src/views/demo/modal-demo/index.tsx
View File

@ -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>
)
},
})

10
src/views/demo/precision/index.tsx
View File

@ -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>
)
},

26
src/views/demo/qrcode/index.tsx
View File

@ -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>
<NSpace>
<NFlex vertical>
<NFlex>
<NButton
onClick={() => {
this.qrcodeStatus = 'loading'
@ -90,8 +90,8 @@ export default defineComponent({
>
下载二维码
</NButton>
</NSpace>
<NSpace>
</NFlex>
<NFlex>
<RQRCode
text={this.qrcodeText}
status={this.qrcodeStatus}
@ -99,10 +99,10 @@ export default defineComponent({
ref="rayQRCodeRef"
/>
当前二维码内容：{this.qrcodeText}
</NSpace>
</NSpace>
</NFlex>
</NFlex>
</NCard>
</NSpace>
</NFlex>
)
},
})

6
src/views/demo/router-demo/router-demo-detail/index.tsx
View File

@ -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>
)
},
})

10
src/views/demo/router-demo/router-demo-home/index.tsx
View File

@ -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>
)
},
})

6
src/views/demo/svg-icons/index.tsx
View File

@ -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>

14
src/views/demo/table/index.tsx
View File

@ -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>
)
},
})

42
src/views/demo/template-hooks/index.tsx
View File

@ -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>
</NSpace>
</NFlex>
</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>
</NSpace>
</NFlex>
</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>
)
},
})

10
src/views/login/components/SSOSigning/index.tsx
View File

@ -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
class="sso-signing"
align="center"
itemStyle={{ display: 'flex' }}
>
<NFlex class="sso-signing" align="center">
{this.ssoSigningOptions.map((curr) => (
<NPopover key={curr.key}>
{{
@ -79,7 +75,7 @@ const SSOSigning = defineComponent({
}}
</NPopover>
))}
</NSpace>
</NFlex>
)
},
})

5
src/views/login/components/Signing/index.tsx
View File

@ -1,11 +1,10 @@
import { NForm, NFormItem, NInput, NButton } from 'naive-ui'
import { setStorage } from '@/utils'
import { useI18n } from '@/hooks/web'
import { APP_CATCH_KEY } from '@/app-config/appConfig'
import { useI18n, useAppRoot } from '@/hooks'
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'

27
src/views/login/index.tsx
View File

@ -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>
<NSpace
align="center"
class="login-action__wrapper"
itemStyle={{
display: 'flex',
}}
>
</NFlex>
<NFlex align="center" class="login-action__wrapper">
<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>

3
unplugin/.eslintrc-auto-import.json
View File

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

1
unplugin/auto-imports.d.ts vendored
View File

@ -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']