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: v4.6.0正式发布

Browse Source
This commit is contained in:
XiaoDaiGua-Ray 2024-01-18 14:36:33 +08:00
parent 8c1e215013
commit 43bf252d84
45 changed files with 406 additions and 338 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
CHANGELOG.md
View File

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

4
package.json
View File

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

221
pnpm-lock.yaml generated
View File

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

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

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

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

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

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

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

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

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

4
src/components/RTable/src/components/Fullscreen.tsx
View File

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

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

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

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

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

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

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

@ -20,7 +20,7 @@
import './index.scss'
import { NInput, NModal, NResult, NScrollbar, NSpace } from 'naive-ui'
import { NInput, NModal, NResult, NScrollbar, NFlex } from 'naive-ui'
import { RIcon } from '@/components'
import { queryElements, addClass, removeClass } from '@/utils'
@ -255,7 +255,7 @@ export default defineComponent({
}
const SearchItem = ({ menuOption }: { menuOption: AppMenuOption }) => (
<NSpace
<NFlex
align="center"
class="content-item"
{...{
@ -265,7 +265,7 @@ export default defineComponent({
>
<div class="content-item-icon">{RenderPreIcon(menuOption.meta)}</div>
<div class="content-item-label">{menuOption.breadcrumbLabel}</div>
</NSpace>
</NFlex>
)
watchEffect(() => {
@ -320,30 +320,30 @@ export default defineComponent({
</div>
<NScrollbar class="global-search__card-content">
{searchOptions.length ? (
<NSpace vertical size={[8, 8]}>
<NFlex vertical size={[8, 8]}>
{searchOptions.map((curr) => (
<SearchItem menuOption={curr} key={curr.fullPath} />
))}
</NSpace>
</NFlex>
) : (
<NResult size="large" class="global-search__empty">
{{
icon: () => null,
default: () => (
<NSpace
<NFlex
justify="center"
class="global-search__empty-content"
>
<RIcon name="empty" size="24" />
暂无搜索结果
</NSpace>
</NFlex>
),
}}
</NResult>
)}
</NScrollbar>
<div class="global-search__card-footer">
<NSpace
<NFlex
class="card-footer__tip-wrapper"
align="center"
size={[24, 8]}
@ -360,7 +360,7 @@ export default defineComponent({
<div class="item-label">{curr.label}</div>
</div>
))}
</NSpace>
</NFlex>
</div>
</div>
</div>

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

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

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

@ -14,7 +14,7 @@ import {
NDrawer,
NDrawerContent,
NDivider,
NSpace,
NFlex,
NSwitch,
NColorPicker,
NDescriptions,
@ -111,7 +111,7 @@ const SettingDrawer = defineComponent({
width={this.width}
>
<NDrawerContent title={$t('headerSettingOptions.Title')}>
<NSpace class="setting-drawer__space" vertical>
<NFlex class="setting-drawer__space" vertical>
<NDivider titlePlacement="center">
{$t('headerSettingOptions.ThemeOptions.Title')}
</NDivider>
@ -171,7 +171,7 @@ const SettingDrawer = defineComponent({
/>
</NDescriptionsItem>
</NDescriptions>
</NSpace>
</NFlex>
</NDrawerContent>
</NDrawer>
)

14
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'
@ -128,12 +128,12 @@ export default defineComponent({
return (
<NLayoutHeader class="layout-header" bordered>
<GlobalSearch v-model:show={this.globalSearchShown} />
<NSpace
<NFlex
class="layout-header__method"
align="center"
justify="space-between"
>
<NSpace align="center">
<NFlex align="center">
{this.leftIconOptions.map((curr) => (
<TooltipIcon
key={curr.name}
@ -146,8 +146,8 @@ export default defineComponent({
/>
))}
{this.getBreadcrumbSwitch ? <Breadcrumb /> : null}
</NSpace>
<NSpace align="center">
</NFlex>
<NFlex align="center">
{this.rightTooltipIconOptions.map((curr) => (
<TooltipIcon
key={curr.name}
@ -180,8 +180,8 @@ export default defineComponent({
>
<AppAvatar avatarSize="small" align="center" cursor="pointer" />
</NDropdown>
</NSpace>
</NSpace>
</NFlex>
</NFlex>
<SettingDrawer
v-model:show={this.showSettings}
placement={this.getDrawerPlacement}

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 size={[0, 0]} wrapItem={false}>
<NFlex size={[0, 0]}>
<SiderBar />
</NSpace>
</NFlex>
)
},
})

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

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

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

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

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

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

2
src/types/global.d.ts vendored
View File

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

2
src/types/index.ts
View File

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

0
src/types/modules/cfg.ts → src/types/modules/viteCustomConfig.ts
View File

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

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

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

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 vertical>
<NFlex vertical>
<NButton
v-throttle={{
func: this.updateDemoValue.bind(null, 'throttleBtnClickCount'),
@ -78,10 +78,10 @@ const RDirective = defineComponent({
</NButton>
<p>我执行了{this.throttleBtnClickCount}次</p>
<p>该方法 1s 内仅会执行一次</p>
</NSpace>
</NFlex>
</NCard>
<NCard title="防抖">
<NSpace vertical>
<NFlex vertical>
<NButton
v-debounce={{
func: this.updateDemoValue.bind(null, 'debounceBtnClickCount'),
@ -94,10 +94,10 @@ const RDirective = defineComponent({
</NButton>
<p>我执行了{this.debounceBtnClickCount}次</p>
<p>该方法将延迟 1s 执行</p>
</NSpace>
</NFlex>
</NCard>
<NCard title="禁用">
<NSpace vertical>
<NFlex vertical>
<NSwitch v-model:value={this.disabledValue}>
{{
checked: () => '取消',
@ -120,12 +120,12 @@ const RDirective = defineComponent({
</form>
</NCard>
<NCard title="文本内容">
<NSpace vertical>
<NFlex vertical>
<p v-disabled={this.disabledValue}>我是可以被禁用的文本内容</p>
</NSpace>
</NFlex>
</NCard>
<NCard title="naive 组件">
<NSpace vertical justify="start">
<NFlex vertical justify="start">
<NForm v-disabled={this.disabledValue}>
<NFormItem>
<NInput />
@ -133,11 +133,11 @@ const RDirective = defineComponent({
</NForm>
<NButton v-disabled={this.disabledValue}>按钮</NButton>
<NSwitch v-disabled={this.disabledValue}></NSwitch>
</NSpace>
</NFlex>
</NCard>
</NSpace>
</NFlex>
</NCard>
</NSpace>
</NFlex>
)
},
})

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

26
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,
@ -79,7 +79,7 @@ export default defineComponent({
} = this
return (
<NSpace vertical>
<NFlex vertical>
<NCard title="接口说明">
<h3>
hooks/template 包存放模板专属 hook
@ -87,29 +87,29 @@ export default defineComponent({
</h3>
</NCard>
<NCard title="useTheme 主题">
<NSpace vertical>
<NFlex vertical>
<h3>getAppTheme 获取当前主题色: {getAppTheme().themeLabel}</h3>
<NSpace>
<NFlex>
<NButton onClick={() => changeDarkTheme()}>切换暗黑主题</NButton>
<NButton onClick={() => changeLightTheme()}>切换明亮主题</NButton>
<NButton onClick={() => toggleTheme()}>切换主题</NButton>
</NSpace>
</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>
@ -167,7 +167,7 @@ export default defineComponent({
跳转至多级菜单
</NButton>
</NCard>
</NSpace>
</NFlex>
)
},
})

6
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,7 +59,7 @@ const SSOSigning = defineComponent({
},
render() {
return (
<NSpace class="sso-signing" align="center">
<NFlex class="sso-signing" align="center">
{this.ssoSigningOptions.map((curr) => (
<NPopover key={curr.key}>
{{
@ -75,7 +75,7 @@ const SSOSigning = defineComponent({
}}
</NPopover>
))}
</NSpace>
</NFlex>
)
},
})

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

@ -1,7 +1,7 @@
import './index.scss'
import {
NSpace,
NFlex,
NCard,
NTabs,
NTabPane,
@ -63,13 +63,13 @@ const Login = defineComponent({
]}
>
<div class={['login-wrapper__content']}>
<NSpace align="center" class="login-title__wrapper">
<NFlex align="center" class="login-title__wrapper">
<RIcon name="ray" size="48" />
<NGradientText class="login-title" type="info" size={28}>
Ray Template
</NGradientText>
</NSpace>
<NSpace align="center" class="login-action__wrapper">
</NFlex>
<NFlex align="center" class="login-action__wrapper">
<ThemeSwitch />
<NDropdown
options={LOCAL_OPTIONS}
@ -83,7 +83,7 @@ const Login = defineComponent({
cursor="pointer"
/>
</NDropdown>
</NSpace>
</NFlex>
<NGrid
cols={'s:1 m:1 l:2 xl:2 2xl:2'}
itemResponsive={false}
@ -93,12 +93,12 @@ const Login = defineComponent({
span={'s:0 m:0 l:1 xl:1 2xl:1'}
class="login__left-wrapper"
>
<NSpace align="center" vertical>
<NFlex align="center" vertical>
<RIcon name="login_bg" width="368" height="368" />
<NGradientText class="login-title" type="info" size={36}>
开箱即用的中后台管理系统
{$t('views.login.index.RayTemplate')}
</NGradientText>
</NSpace>
</NFlex>
</NGridItem>
<NGridItem span={1} class="login__right-wrapper">
<NCard
@ -144,13 +144,13 @@ const Login = defineComponent({
</NCard>
</NGridItem>
</NGrid>
<NSpace
<NFlex
align="center"
justify="center"
class="login-copyright__wrapper"
>
{this.copyright}
</NSpace>
</NFlex>
</div>
</div>
</div>

2
tsconfig.json
View File

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

2
vite.config.ts
View File

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

2
cfg.ts → vite.custom.config.ts
View File

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

27
vite.plugin.config.ts
View File

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