mirror of
https://github.com/XiaoDaiGua-Ray/ray-template.git
synced 2025-04-05 19:42:07 +08:00
version: v4.4.3
This commit is contained in:
XiaoDaiGua-Ray
parent
c304f37146
commit
5299a0245f
20
CHANGELOG.md
20
CHANGELOG.md
@ -1,5 +1,25 @@
|
||||
# CHANGE LOG
|
||||
|
||||
## 4.4.3
|
||||
|
||||
更新 `vue` 版本至 `3.3.10`。
|
||||
|
||||
补充了一些代码的注释（慢慢还账-，-）。
|
||||
|
||||
## Feats
|
||||
|
||||
- 更新 `vue` 版本至 `3.3.10`
|
||||
- 新增 `useElementFullscreen` 方法，用于全屏元素。但是该全屏区别于浏览器全屏元素，仅是网页全屏效果
|
||||
- 使用 `useElementFullscreen` 方法重构 `maximize` 方法
|
||||
- `changeMenuModelValue`
|
||||
- 现在方法支持第三个参数配置跳转时，是否携带参数
|
||||
- 避免递归查找的时候，一些不必要的操作，优化性能
|
||||
|
||||
## Fixes
|
||||
|
||||
- 修复了通过 `url` 携带参数跳转页面，参数可能会被拦截并且丢失的问题
|
||||
- 修复了 `url` 跳转页面导致多次更新的问题
|
||||
|
||||
## 4.4.2
|
||||
|
||||
这是一个具有破坏性更新的版本，如果你使用了该模板，那么你需要做一些改动。
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "ray-template",
|
||||
"private": false,
|
||||
"version": "4.4.2",
|
||||
"version": "4.4.3",
|
||||
"type": "module",
|
||||
"engines": {
|
||||
"node": "^18.0.0 || >=20.0.0",
|
||||
@ -39,7 +39,7 @@
|
||||
"pinia": "^2.1.6",
|
||||
"pinia-plugin-persistedstate": "^3.2.0",
|
||||
"print-js": "^1.6.0",
|
||||
"vue": "^3.3.8",
|
||||
"vue": "^3.3.10",
|
||||
"vue-hooks-plus": "1.8.5",
|
||||
"vue-i18n": "^9.7.1",
|
||||
"vue-router": "^4.2.4",
|
||||
|
||||
241
pnpm-lock.yaml
generated
241
pnpm-lock.yaml
generated
@ -7,7 +7,7 @@ settings:
|
||||
dependencies:
|
||||
'@vueuse/core':
|
||||
specifier: ^10.6.1
|
||||
version: 10.6.1(vue@3.3.8)
|
||||
version: 10.6.1(vue@3.3.10)
|
||||
awesome-qr:
|
||||
specifier: 2.1.5-rc.0
|
||||
version: 2.1.5-rc.0
|
||||
@ -40,10 +40,10 @@ dependencies:
|
||||
version: 1.1.0
|
||||
naive-ui:
|
||||
specifier: ^2.35.0
|
||||
version: 2.35.0(vue@3.3.8)
|
||||
version: 2.35.0(vue@3.3.10)
|
||||
pinia:
|
||||
specifier: ^2.1.6
|
||||
version: 2.1.6(typescript@5.2.2)(vue@3.3.8)
|
||||
version: 2.1.6(typescript@5.2.2)(vue@3.3.10)
|
||||
pinia-plugin-persistedstate:
|
||||
specifier: ^3.2.0
|
||||
version: 3.2.0(pinia@2.1.6)
|
||||
@ -51,17 +51,17 @@ dependencies:
|
||||
specifier: ^1.6.0
|
||||
version: 1.6.0
|
||||
vue:
|
||||
specifier: ^3.3.8
|
||||
version: 3.3.8(typescript@5.2.2)
|
||||
specifier: ^3.3.10
|
||||
version: 3.3.10(typescript@5.2.2)
|
||||
vue-hooks-plus:
|
||||
specifier: 1.8.5
|
||||
version: 1.8.5(vue@3.3.8)
|
||||
version: 1.8.5(vue@3.3.10)
|
||||
vue-i18n:
|
||||
specifier: ^9.7.1
|
||||
version: 9.7.1(vue@3.3.8)
|
||||
version: 9.7.1(vue@3.3.10)
|
||||
vue-router:
|
||||
specifier: ^4.2.4
|
||||
version: 4.2.4(vue@3.3.8)
|
||||
version: 4.2.4(vue@3.3.10)
|
||||
xlsx:
|
||||
specifier: ^0.18.5
|
||||
version: 0.18.5
|
||||
@ -102,10 +102,10 @@ devDependencies:
|
||||
version: 6.5.0(eslint@8.52.0)(typescript@5.2.2)
|
||||
'@vitejs/plugin-vue':
|
||||
specifier: ^4.4.1
|
||||
version: 4.4.1(vite@5.0.4)(vue@3.3.8)
|
||||
version: 4.4.1(vite@5.0.4)(vue@3.3.10)
|
||||
'@vitejs/plugin-vue-jsx':
|
||||
specifier: ^3.0.2
|
||||
version: 3.0.2(vite@5.0.4)(vue@3.3.8)
|
||||
version: 3.0.2(vite@5.0.4)(vue@3.3.10)
|
||||
'@vue-hooks-plus/resolvers':
|
||||
specifier: 1.2.4
|
||||
version: 1.2.4(vue-hooks-plus@1.8.5)
|
||||
@ -177,7 +177,7 @@ devDependencies:
|
||||
version: 0.16.6(@vueuse/core@10.6.1)
|
||||
unplugin-vue-components:
|
||||
specifier: ^0.25.2
|
||||
version: 0.25.2(vue@3.3.8)
|
||||
version: 0.25.2(vue@3.3.10)
|
||||
vite:
|
||||
specifier: ^5.0.4
|
||||
version: 5.0.4(@types/node@20.4.7)(sass@1.69.5)
|
||||
@ -446,6 +446,11 @@ packages:
|
||||
/@babel/helper-string-parser@7.22.5:
|
||||
resolution: {integrity: sha512-mM4COjgZox8U+JcXQwPijIZLElkgEpO5rsERVDJTc2qfCDfERyob6k5WegS14SX18IIjv+XD+GrqNumY5JRCDw==}
|
||||
engines: {node: '>=6.9.0'}
|
||||
dev: true
|
||||
|
||||
/@babel/helper-string-parser@7.23.4:
|
||||
resolution: {integrity: sha512-803gmbQdqwdf4olxrX4AJyFBV/RTr3rSmOj0rKwesmzlfhYNDEs+/iOcznzpNWlJlIlTJC2QfPFcHB6DlzdVLQ==}
|
||||
engines: {node: '>=6.9.0'}
|
||||
|
||||
/@babel/helper-validator-identifier@7.22.20:
|
||||
resolution: {integrity: sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A==}
|
||||
@ -490,6 +495,14 @@ packages:
|
||||
hasBin: true
|
||||
dependencies:
|
||||
'@babel/types': 7.23.3
|
||||
dev: true
|
||||
|
||||
/@babel/parser@7.23.5:
|
||||
resolution: {integrity: sha512-hOOqoiNXrmGdFbhgCzu6GiURxUgM27Xwd/aPuu8RfHEZPBzL1Z54okAHAQjXfcQNwvrlkAmAp4SlRTZ45vlthQ==}
|
||||
engines: {node: '>=6.0.0'}
|
||||
hasBin: true
|
||||
dependencies:
|
||||
'@babel/types': 7.23.5
|
||||
|
||||
/@babel/plugin-syntax-jsx@7.22.5(@babel/core@7.23.2):
|
||||
resolution: {integrity: sha512-gvyP4hZrgrs/wWMaocvxZ44Hw0b3W8Pe+cMxc8V1ULQ07oh8VNbIRaoD1LRZVTvD+0nieDKjfgKg89sD7rrKrg==}
|
||||
@ -601,6 +614,15 @@ packages:
|
||||
'@babel/helper-string-parser': 7.22.5
|
||||
'@babel/helper-validator-identifier': 7.22.20
|
||||
to-fast-properties: 2.0.0
|
||||
dev: true
|
||||
|
||||
/@babel/types@7.23.5:
|
||||
resolution: {integrity: sha512-ON5kSOJwVO6xXVRTvOI0eOnWe7VdUcIpsovGo9U/Br4Ie4UVFQTboO2cYnDhAGU6Fp+UxSiT+pMft0SMHfuq6w==}
|
||||
engines: {node: '>=6.9.0'}
|
||||
dependencies:
|
||||
'@babel/helper-string-parser': 7.23.4
|
||||
'@babel/helper-validator-identifier': 7.22.20
|
||||
to-fast-properties: 2.0.0
|
||||
|
||||
/@commitlint/cli@17.7.1:
|
||||
resolution: {integrity: sha512-BCm/AT06SNCQtvFv921iNhudOHuY16LswT0R3OeolVGLk8oP+Rk9TfQfgjH7QPMjhvp76bNqGFEcpKojxUNW1g==}
|
||||
@ -785,12 +807,12 @@ packages:
|
||||
css-render: 0.15.12
|
||||
dev: false
|
||||
|
||||
/@css-render/vue3-ssr@0.15.12(vue@3.3.8):
|
||||
/@css-render/vue3-ssr@0.15.12(vue@3.3.10):
|
||||
resolution: {integrity: sha512-AQLGhhaE0F+rwybRCkKUdzBdTEM/5PZBYy+fSYe1T9z9+yxMuV/k7ZRqa4M69X+EI1W8pa4kc9Iq2VjQkZx4rg==}
|
||||
peerDependencies:
|
||||
vue: ^3.0.11
|
||||
dependencies:
|
||||
vue: 3.3.8(typescript@5.2.2)
|
||||
vue: 3.3.10(typescript@5.2.2)
|
||||
dev: false
|
||||
|
||||
/@emotion/hash@0.8.0:
|
||||
@ -1274,7 +1296,7 @@ packages:
|
||||
magic-string: 0.30.5
|
||||
mlly: 1.4.1
|
||||
source-map-js: 1.0.2
|
||||
vue-i18n: 9.7.1(vue@3.3.8)
|
||||
vue-i18n: 9.7.1(vue@3.3.10)
|
||||
yaml-eslint-parser: 1.2.2
|
||||
dev: true
|
||||
|
||||
@ -1336,7 +1358,7 @@ packages:
|
||||
picocolors: 1.0.0
|
||||
source-map-js: 1.0.2
|
||||
unplugin: 1.4.0
|
||||
vue-i18n: 9.7.1(vue@3.3.8)
|
||||
vue-i18n: 9.7.1(vue@3.3.10)
|
||||
transitivePeerDependencies:
|
||||
- rollup
|
||||
- supports-color
|
||||
@ -1932,7 +1954,7 @@ packages:
|
||||
resolution: {integrity: sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==}
|
||||
dev: true
|
||||
|
||||
/@vitejs/plugin-vue-jsx@3.0.2(vite@5.0.4)(vue@3.3.8):
|
||||
/@vitejs/plugin-vue-jsx@3.0.2(vite@5.0.4)(vue@3.3.10):
|
||||
resolution: {integrity: sha512-obF26P2Z4Ogy3cPp07B4VaW6rpiu0ue4OT2Y15UxT5BZZ76haUY9guOsZV3uWh/I6xc+VeiW+ZVabRE82FyzWw==}
|
||||
engines: {node: ^14.18.0 || >=16.0.0}
|
||||
peerDependencies:
|
||||
@ -1943,12 +1965,12 @@ packages:
|
||||
'@babel/plugin-transform-typescript': 7.22.15(@babel/core@7.23.2)
|
||||
'@vue/babel-plugin-jsx': 1.1.5(@babel/core@7.23.2)
|
||||
vite: 5.0.4(@types/node@20.4.7)(sass@1.69.5)
|
||||
vue: 3.3.8(typescript@5.2.2)
|
||||
vue: 3.3.10(typescript@5.2.2)
|
||||
transitivePeerDependencies:
|
||||
- supports-color
|
||||
dev: true
|
||||
|
||||
/@vitejs/plugin-vue@4.4.1(vite@5.0.4)(vue@3.3.8):
|
||||
/@vitejs/plugin-vue@4.4.1(vite@5.0.4)(vue@3.3.10):
|
||||
resolution: {integrity: sha512-HCQG8VDFDM7YDAdcj5QI5DvUi+r6xvo9LgvYdk7LSkUNwdpempdB5horkMSZsbdey9Ywsf5aaU8kEPw9M5kREA==}
|
||||
engines: {node: ^14.18.0 || >=16.0.0}
|
||||
peerDependencies:
|
||||
@ -1956,7 +1978,7 @@ packages:
|
||||
vue: ^3.2.25
|
||||
dependencies:
|
||||
vite: 5.0.4(@types/node@20.4.7)(sass@1.69.5)
|
||||
vue: 3.3.8(typescript@5.2.2)
|
||||
vue: 3.3.10(typescript@5.2.2)
|
||||
dev: true
|
||||
|
||||
/@volar/language-core@1.10.1:
|
||||
@ -1984,7 +2006,7 @@ packages:
|
||||
vue-hooks-plus: ^1.5.2
|
||||
dependencies:
|
||||
local-pkg: 0.4.3
|
||||
vue-hooks-plus: 1.8.5(vue@3.3.8)
|
||||
vue-hooks-plus: 1.8.5(vue@3.3.10)
|
||||
dev: true
|
||||
|
||||
/@vue/babel-helper-vue-transform-on@1.1.5:
|
||||
@ -2010,6 +2032,14 @@ packages:
|
||||
- supports-color
|
||||
dev: true
|
||||
|
||||
/@vue/compiler-core@3.3.10:
|
||||
resolution: {integrity: sha512-doe0hODR1+i1menPkRzJ5MNR6G+9uiZHIknK3Zn5OcIztu6GGw7u0XUzf3AgB8h/dfsZC9eouzoLo3c3+N/cVA==}
|
||||
dependencies:
|
||||
'@babel/parser': 7.23.5
|
||||
'@vue/shared': 3.3.10
|
||||
estree-walker: 2.0.2
|
||||
source-map-js: 1.0.2
|
||||
|
||||
/@vue/compiler-core@3.3.8:
|
||||
resolution: {integrity: sha512-hN/NNBUECw8SusQvDSqqcVv6gWq8L6iAktUR0UF3vGu2OhzRqcOiAno0FmBJWwxhYEXRlQJT5XnoKsVq1WZx4g==}
|
||||
dependencies:
|
||||
@ -2017,12 +2047,34 @@ packages:
|
||||
'@vue/shared': 3.3.8
|
||||
estree-walker: 2.0.2
|
||||
source-map-js: 1.0.2
|
||||
dev: true
|
||||
|
||||
/@vue/compiler-dom@3.3.10:
|
||||
resolution: {integrity: sha512-NCrqF5fm10GXZIK0GrEAauBqdy+F2LZRt3yNHzrYjpYBuRssQbuPLtSnSNjyR9luHKkWSH8we5LMB3g+4z2HvA==}
|
||||
dependencies:
|
||||
'@vue/compiler-core': 3.3.10
|
||||
'@vue/shared': 3.3.10
|
||||
|
||||
/@vue/compiler-dom@3.3.8:
|
||||
resolution: {integrity: sha512-+PPtv+p/nWDd0AvJu3w8HS0RIm/C6VGBIRe24b9hSyNWOAPEUosFZ5diwawwP8ip5sJ8n0Pe87TNNNHnvjs0FQ==}
|
||||
dependencies:
|
||||
'@vue/compiler-core': 3.3.8
|
||||
'@vue/shared': 3.3.8
|
||||
dev: true
|
||||
|
||||
/@vue/compiler-sfc@3.3.10:
|
||||
resolution: {integrity: sha512-xpcTe7Rw7QefOTRFFTlcfzozccvjM40dT45JtrE3onGm/jBLZ0JhpKu3jkV7rbDFLeeagR/5RlJ2Y9SvyS0lAg==}
|
||||
dependencies:
|
||||
'@babel/parser': 7.23.5
|
||||
'@vue/compiler-core': 3.3.10
|
||||
'@vue/compiler-dom': 3.3.10
|
||||
'@vue/compiler-ssr': 3.3.10
|
||||
'@vue/reactivity-transform': 3.3.10
|
||||
'@vue/shared': 3.3.10
|
||||
estree-walker: 2.0.2
|
||||
magic-string: 0.30.5
|
||||
postcss: 8.4.32
|
||||
source-map-js: 1.0.2
|
||||
|
||||
/@vue/compiler-sfc@3.3.8:
|
||||
resolution: {integrity: sha512-WMzbUrlTjfYF8joyT84HfwwXo+8WPALuPxhy+BZ6R4Aafls+jDBnSz8PDz60uFhuqFbl3HxRfxvDzrUf3THwpA==}
|
||||
@ -2037,12 +2089,20 @@ packages:
|
||||
magic-string: 0.30.5
|
||||
postcss: 8.4.31
|
||||
source-map-js: 1.0.2
|
||||
dev: true
|
||||
|
||||
/@vue/compiler-ssr@3.3.10:
|
||||
resolution: {integrity: sha512-12iM4jA4GEbskwXMmPcskK5wImc2ohKm408+o9iox3tfN9qua8xL0THIZtoe9OJHnXP4eOWZpgCAAThEveNlqQ==}
|
||||
dependencies:
|
||||
'@vue/compiler-dom': 3.3.10
|
||||
'@vue/shared': 3.3.10
|
||||
|
||||
/@vue/compiler-ssr@3.3.8:
|
||||
resolution: {integrity: sha512-hXCqQL/15kMVDBuoBYpUnSYT8doDNwsjvm3jTefnXr+ytn294ySnT8NlsFHmTgKNjwpuFy7XVV8yTeLtNl/P6w==}
|
||||
dependencies:
|
||||
'@vue/compiler-dom': 3.3.8
|
||||
'@vue/shared': 3.3.8
|
||||
dev: true
|
||||
|
||||
/@vue/devtools-api@6.5.1:
|
||||
resolution: {integrity: sha512-+KpckaAQyfbvshdDW5xQylLni1asvNSGme1JFs8I1+/H5pHEhqUKMEQD/qn3Nx5+/nycBq11qAEi8lk+LXI2dA==}
|
||||
@ -2101,6 +2161,15 @@ packages:
|
||||
vue-template-compiler: 2.7.14
|
||||
dev: true
|
||||
|
||||
/@vue/reactivity-transform@3.3.10:
|
||||
resolution: {integrity: sha512-0xBdk+CKHWT+Gev8oZ63Tc0qFfj935YZx+UAynlutnrDZ4diFCVFMWixn65HzjE3S1iJppWOo6Tt1OzASH7VEg==}
|
||||
dependencies:
|
||||
'@babel/parser': 7.23.5
|
||||
'@vue/compiler-core': 3.3.10
|
||||
'@vue/shared': 3.3.10
|
||||
estree-walker: 2.0.2
|
||||
magic-string: 0.30.5
|
||||
|
||||
/@vue/reactivity-transform@3.3.8:
|
||||
resolution: {integrity: sha512-49CvBzmZNtcHua0XJ7GdGifM8GOXoUMOX4dD40Y5DxI3R8OUhMlvf2nvgUAcPxaXiV5MQQ1Nwy09ADpnLQUqRw==}
|
||||
dependencies:
|
||||
@ -2109,36 +2178,47 @@ packages:
|
||||
'@vue/shared': 3.3.8
|
||||
estree-walker: 2.0.2
|
||||
magic-string: 0.30.5
|
||||
dev: true
|
||||
|
||||
/@vue/reactivity@3.3.10:
|
||||
resolution: {integrity: sha512-H5Z7rOY/JLO+e5a6/FEXaQ1TMuOvY4LDVgT+/+HKubEAgs9qeeZ+NhADSeEtrNQeiKLDuzeKc8v0CUFpB6Pqgw==}
|
||||
dependencies:
|
||||
'@vue/shared': 3.3.10
|
||||
|
||||
/@vue/reactivity@3.3.8:
|
||||
resolution: {integrity: sha512-ctLWitmFBu6mtddPyOKpHg8+5ahouoTCRtmAHZAXmolDtuZXfjL2T3OJ6DL6ezBPQB1SmMnpzjiWjCiMYmpIuw==}
|
||||
dependencies:
|
||||
'@vue/shared': 3.3.8
|
||||
dev: true
|
||||
|
||||
/@vue/runtime-core@3.3.8:
|
||||
resolution: {integrity: sha512-qurzOlb6q26KWQ/8IShHkMDOuJkQnQcTIp1sdP4I9MbCf9FJeGVRXJFr2mF+6bXh/3Zjr9TDgURXrsCr9bfjUw==}
|
||||
/@vue/runtime-core@3.3.10:
|
||||
resolution: {integrity: sha512-DZ0v31oTN4YHX9JEU5VW1LoIVgFovWgIVb30bWn9DG9a7oA415idcwsRNNajqTx8HQJyOaWfRKoyuP2P2TYIag==}
|
||||
dependencies:
|
||||
'@vue/reactivity': 3.3.8
|
||||
'@vue/shared': 3.3.8
|
||||
'@vue/reactivity': 3.3.10
|
||||
'@vue/shared': 3.3.10
|
||||
|
||||
/@vue/runtime-dom@3.3.8:
|
||||
resolution: {integrity: sha512-Noy5yM5UIf9UeFoowBVgghyGGPIDPy1Qlqt0yVsUdAVbqI8eeMSsTqBtauaEoT2UFXUk5S64aWVNJN4MJ2vRdA==}
|
||||
/@vue/runtime-dom@3.3.10:
|
||||
resolution: {integrity: sha512-c/jKb3ny05KJcYk0j1m7Wbhrxq7mZYr06GhKykDMNRRR9S+/dGT8KpHuNQjv3/8U4JshfkAk6TpecPD3B21Ijw==}
|
||||
dependencies:
|
||||
'@vue/runtime-core': 3.3.8
|
||||
'@vue/shared': 3.3.8
|
||||
'@vue/runtime-core': 3.3.10
|
||||
'@vue/shared': 3.3.10
|
||||
csstype: 3.1.2
|
||||
|
||||
/@vue/server-renderer@3.3.8(vue@3.3.8):
|
||||
resolution: {integrity: sha512-zVCUw7RFskvPuNlPn/8xISbrf0zTWsTSdYTsUTN1ERGGZGVnRxM2QZ3x1OR32+vwkkCm0IW6HmJ49IsPm7ilLg==}
|
||||
/@vue/server-renderer@3.3.10(vue@3.3.10):
|
||||
resolution: {integrity: sha512-0i6ww3sBV3SKlF3YTjSVqKQ74xialMbjVYGy7cOTi7Imd8ediE7t72SK3qnvhrTAhOvlQhq6Bk6nFPdXxe0sAg==}
|
||||
peerDependencies:
|
||||
vue: 3.3.8
|
||||
vue: 3.3.10
|
||||
dependencies:
|
||||
'@vue/compiler-ssr': 3.3.8
|
||||
'@vue/shared': 3.3.8
|
||||
vue: 3.3.8(typescript@5.2.2)
|
||||
'@vue/compiler-ssr': 3.3.10
|
||||
'@vue/shared': 3.3.10
|
||||
vue: 3.3.10(typescript@5.2.2)
|
||||
|
||||
/@vue/shared@3.3.10:
|
||||
resolution: {integrity: sha512-2y3Y2J1a3RhFa0WisHvACJR2ncvWiVHcP8t0Inxo+NKz+8RKO4ZV8eZgCxRgQoA6ITfV12L4E6POOL9HOU5nqw==}
|
||||
|
||||
/@vue/shared@3.3.8:
|
||||
resolution: {integrity: sha512-8PGwybFwM4x8pcfgqEQFy70NaQxASvOC5DJwLQfpArw1UDfUXrJkdxD3BhVTMS+0Lef/TU7YO0Jvr0jJY8T+mw==}
|
||||
dev: true
|
||||
|
||||
/@vue/typescript@1.8.8(typescript@5.2.2):
|
||||
resolution: {integrity: sha512-jUnmMB6egu5wl342eaUH236v8tdcEPXXkPgj+eI/F6JwW/lb+yAU6U07ZbQ3MVabZRlupIlPESB7ajgAGixhow==}
|
||||
@ -2149,13 +2229,13 @@ packages:
|
||||
- typescript
|
||||
dev: true
|
||||
|
||||
/@vueuse/core@10.6.1(vue@3.3.8):
|
||||
/@vueuse/core@10.6.1(vue@3.3.10):
|
||||
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.3.8)
|
||||
vue-demi: 0.14.6(vue@3.3.8)
|
||||
'@vueuse/shared': 10.6.1(vue@3.3.10)
|
||||
vue-demi: 0.14.6(vue@3.3.10)
|
||||
transitivePeerDependencies:
|
||||
- '@vue/composition-api'
|
||||
- vue
|
||||
@ -2163,10 +2243,10 @@ packages:
|
||||
/@vueuse/metadata@10.6.1:
|
||||
resolution: {integrity: sha512-qhdwPI65Bgcj23e5lpGfQsxcy0bMjCAsUGoXkJ7DsoeDUdasbZ2DBa4dinFCOER3lF4gwUv+UD2AlA11zdzMFw==}
|
||||
|
||||
/@vueuse/shared@10.6.1(vue@3.3.8):
|
||||
/@vueuse/shared@10.6.1(vue@3.3.10):
|
||||
resolution: {integrity: sha512-TECVDTIedFlL0NUfHWncf3zF9Gc4VfdxfQc8JFwoVZQmxpONhLxFrlm0eHQeidHj4rdTPL3KXJa0TZCk1wnc5Q==}
|
||||
dependencies:
|
||||
vue-demi: 0.14.6(vue@3.3.8)
|
||||
vue-demi: 0.14.6(vue@3.3.10)
|
||||
transitivePeerDependencies:
|
||||
- '@vue/composition-api'
|
||||
- vue
|
||||
@ -5707,13 +5787,13 @@ packages:
|
||||
minimatch: 3.1.2
|
||||
dev: true
|
||||
|
||||
/naive-ui@2.35.0(vue@3.3.8):
|
||||
/naive-ui@2.35.0(vue@3.3.10):
|
||||
resolution: {integrity: sha512-PdnLpOip1LQaKs5+rXLZoPDPQkTq26TnHWeABvUA2eOQjtHxE4+TQvj0Jq/W8clM2On/7jptoGmenLt48G3Bhg==}
|
||||
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.3.8)
|
||||
'@css-render/vue3-ssr': 0.15.12(vue@3.3.10)
|
||||
'@types/katex': 0.16.2
|
||||
'@types/lodash': 4.14.199
|
||||
'@types/lodash-es': 4.17.11
|
||||
@ -5727,10 +5807,10 @@ packages:
|
||||
lodash-es: 4.17.21
|
||||
seemly: 0.3.6
|
||||
treemate: 0.3.11
|
||||
vdirs: 0.1.8(vue@3.3.8)
|
||||
vooks: 0.2.12(vue@3.3.8)
|
||||
vue: 3.3.8(typescript@5.2.2)
|
||||
vueuc: 0.4.51(vue@3.3.8)
|
||||
vdirs: 0.1.8(vue@3.3.10)
|
||||
vooks: 0.2.12(vue@3.3.10)
|
||||
vue: 3.3.10(typescript@5.2.2)
|
||||
vueuc: 0.4.51(vue@3.3.10)
|
||||
dev: false
|
||||
|
||||
/nan@2.17.0:
|
||||
@ -6113,10 +6193,10 @@ packages:
|
||||
peerDependencies:
|
||||
pinia: ^2.0.0
|
||||
dependencies:
|
||||
pinia: 2.1.6(typescript@5.2.2)(vue@3.3.8)
|
||||
pinia: 2.1.6(typescript@5.2.2)(vue@3.3.10)
|
||||
dev: false
|
||||
|
||||
/pinia@2.1.6(typescript@5.2.2)(vue@3.3.8):
|
||||
/pinia@2.1.6(typescript@5.2.2)(vue@3.3.10):
|
||||
resolution: {integrity: sha512-bIU6QuE5qZviMmct5XwCesXelb5VavdOWKWaB17ggk++NUwQWWbP5YnsONTk3b752QkW9sACiR81rorpeOMSvQ==}
|
||||
peerDependencies:
|
||||
'@vue/composition-api': ^1.4.0
|
||||
@ -6130,8 +6210,8 @@ packages:
|
||||
dependencies:
|
||||
'@vue/devtools-api': 6.5.1
|
||||
typescript: 5.2.2
|
||||
vue: 3.3.8(typescript@5.2.2)
|
||||
vue-demi: 0.14.6(vue@3.3.8)
|
||||
vue: 3.3.10(typescript@5.2.2)
|
||||
vue-demi: 0.14.6(vue@3.3.10)
|
||||
dev: false
|
||||
|
||||
/pkg-types@1.0.3:
|
||||
@ -6196,6 +6276,15 @@ packages:
|
||||
nanoid: 3.3.7
|
||||
picocolors: 1.0.0
|
||||
source-map-js: 1.0.2
|
||||
dev: true
|
||||
|
||||
/postcss@8.4.32:
|
||||
resolution: {integrity: sha512-D/kj5JNu6oo2EIy+XL/26JEDTlIbB8hw85G8StOE6L74RQAVVP5rej6wxCNqyMbR4RkPfqvezVbPw81Ngd6Kcw==}
|
||||
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==}
|
||||
@ -7394,7 +7483,7 @@ packages:
|
||||
dependencies:
|
||||
'@antfu/utils': 0.7.6
|
||||
'@rollup/pluginutils': 5.0.4
|
||||
'@vueuse/core': 10.6.1(vue@3.3.8)
|
||||
'@vueuse/core': 10.6.1(vue@3.3.10)
|
||||
fast-glob: 3.3.1
|
||||
local-pkg: 0.4.3
|
||||
magic-string: 0.30.5
|
||||
@ -7405,7 +7494,7 @@ packages:
|
||||
- rollup
|
||||
dev: true
|
||||
|
||||
/unplugin-vue-components@0.25.2(vue@3.3.8):
|
||||
/unplugin-vue-components@0.25.2(vue@3.3.10):
|
||||
resolution: {integrity: sha512-OVmLFqILH6w+eM8fyt/d/eoJT9A6WO51NZLf1vC5c1FZ4rmq2bbGxTy8WP2Jm7xwFdukaIdv819+UI7RClPyCA==}
|
||||
engines: {node: '>=14'}
|
||||
peerDependencies:
|
||||
@ -7428,7 +7517,7 @@ packages:
|
||||
minimatch: 9.0.3
|
||||
resolve: 1.22.5
|
||||
unplugin: 1.4.0
|
||||
vue: 3.3.8(typescript@5.2.2)
|
||||
vue: 3.3.10(typescript@5.2.2)
|
||||
transitivePeerDependencies:
|
||||
- rollup
|
||||
- supports-color
|
||||
@ -7508,13 +7597,13 @@ packages:
|
||||
engines: {node: '>= 0.8'}
|
||||
dev: true
|
||||
|
||||
/vdirs@0.1.8(vue@3.3.8):
|
||||
/vdirs@0.1.8(vue@3.3.10):
|
||||
resolution: {integrity: sha512-H9V1zGRLQZg9b+GdMk8MXDN2Lva0zx72MPahDKc30v+DtwKjfyOSXWRIX4t2mhDubM1H09gPhWeth/BJWPHGUw==}
|
||||
peerDependencies:
|
||||
vue: ^3.0.11
|
||||
dependencies:
|
||||
evtd: 0.2.4
|
||||
vue: 3.3.8(typescript@5.2.2)
|
||||
vue: 3.3.10(typescript@5.2.2)
|
||||
dev: false
|
||||
|
||||
/vite-plugin-cdn2@0.15.2:
|
||||
@ -7697,16 +7786,16 @@ packages:
|
||||
fsevents: 2.3.3
|
||||
dev: true
|
||||
|
||||
/vooks@0.2.12(vue@3.3.8):
|
||||
/vooks@0.2.12(vue@3.3.10):
|
||||
resolution: {integrity: sha512-iox0I3RZzxtKlcgYaStQYKEzWWGAduMmq+jS7OrNdQo1FgGfPMubGL3uGHOU9n97NIvfFDBGnpSvkWyb/NSn/Q==}
|
||||
peerDependencies:
|
||||
vue: ^3.0.0
|
||||
dependencies:
|
||||
evtd: 0.2.4
|
||||
vue: 3.3.8(typescript@5.2.2)
|
||||
vue: 3.3.10(typescript@5.2.2)
|
||||
dev: false
|
||||
|
||||
/vue-demi@0.14.6(vue@3.3.8):
|
||||
/vue-demi@0.14.6(vue@3.3.10):
|
||||
resolution: {integrity: sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==}
|
||||
engines: {node: '>=12'}
|
||||
hasBin: true
|
||||
@ -7718,7 +7807,7 @@ packages:
|
||||
'@vue/composition-api':
|
||||
optional: true
|
||||
dependencies:
|
||||
vue: 3.3.8(typescript@5.2.2)
|
||||
vue: 3.3.10(typescript@5.2.2)
|
||||
|
||||
/vue-eslint-parser@9.3.1(eslint@8.52.0):
|
||||
resolution: {integrity: sha512-Clr85iD2XFZ3lJ52/ppmUDG/spxQu6+MAeHXjjyI4I1NUYZ9xmenQp4N0oaHJhrA8OOxltCVxMRfANGa70vU0g==}
|
||||
@ -7738,7 +7827,7 @@ packages:
|
||||
- supports-color
|
||||
dev: true
|
||||
|
||||
/vue-hooks-plus@1.8.5(vue@3.3.8):
|
||||
/vue-hooks-plus@1.8.5(vue@3.3.10):
|
||||
resolution: {integrity: sha512-cIatTWz6QQcoSCDn7jadQ3zMr799FmNiHyb59yUvR7Ws5KDJ/KdIMHHx/b0XDKzbGhQ61kcJ78zJKAKhOV0pWw==}
|
||||
peerDependencies:
|
||||
vue: ^3.2.25
|
||||
@ -7750,9 +7839,9 @@ packages:
|
||||
qs: 6.11.2
|
||||
query-string: 7.1.3
|
||||
screenfull: 5.2.0
|
||||
vue: 3.3.8(typescript@5.2.2)
|
||||
vue: 3.3.10(typescript@5.2.2)
|
||||
|
||||
/vue-i18n@9.7.1(vue@3.3.8):
|
||||
/vue-i18n@9.7.1(vue@3.3.10):
|
||||
resolution: {integrity: sha512-A6DzWqJQMdzBj+392+g3zIgGV0FnFC7o/V+txs5yIALANEZzY6ZV8hM2wvZR3nTbQI7dntAmzBHMeoEteJO0kQ==}
|
||||
engines: {node: '>= 16'}
|
||||
peerDependencies:
|
||||
@ -7761,15 +7850,15 @@ packages:
|
||||
'@intlify/core-base': 9.7.1
|
||||
'@intlify/shared': 9.7.1
|
||||
'@vue/devtools-api': 6.5.1
|
||||
vue: 3.3.8(typescript@5.2.2)
|
||||
vue: 3.3.10(typescript@5.2.2)
|
||||
|
||||
/vue-router@4.2.4(vue@3.3.8):
|
||||
/vue-router@4.2.4(vue@3.3.10):
|
||||
resolution: {integrity: sha512-9PISkmaCO02OzPVOMq2w82ilty6+xJmQrarYZDkjZBfl4RvYAlt4PKnEX21oW4KTtWfa9OuO/b3qk1Od3AEdCQ==}
|
||||
peerDependencies:
|
||||
vue: ^3.2.0
|
||||
dependencies:
|
||||
'@vue/devtools-api': 6.5.1
|
||||
vue: 3.3.8(typescript@5.2.2)
|
||||
vue: 3.3.10(typescript@5.2.2)
|
||||
dev: false
|
||||
|
||||
/vue-template-compiler@2.7.14:
|
||||
@ -7791,34 +7880,34 @@ packages:
|
||||
typescript: 5.2.2
|
||||
dev: true
|
||||
|
||||
/vue@3.3.8(typescript@5.2.2):
|
||||
resolution: {integrity: sha512-5VSX/3DabBikOXMsxzlW8JyfeLKlG9mzqnWgLQLty88vdZL7ZJgrdgBOmrArwxiLtmS+lNNpPcBYqrhE6TQW5w==}
|
||||
/vue@3.3.10(typescript@5.2.2):
|
||||
resolution: {integrity: sha512-zg6SIXZdTBwiqCw/1p+m04VyHjLfwtjwz8N57sPaBhEex31ND0RYECVOC1YrRwMRmxFf5T1dabl6SGUbMKKuVw==}
|
||||
peerDependencies:
|
||||
typescript: '*'
|
||||
peerDependenciesMeta:
|
||||
typescript:
|
||||
optional: true
|
||||
dependencies:
|
||||
'@vue/compiler-dom': 3.3.8
|
||||
'@vue/compiler-sfc': 3.3.8
|
||||
'@vue/runtime-dom': 3.3.8
|
||||
'@vue/server-renderer': 3.3.8(vue@3.3.8)
|
||||
'@vue/shared': 3.3.8
|
||||
'@vue/compiler-dom': 3.3.10
|
||||
'@vue/compiler-sfc': 3.3.10
|
||||
'@vue/runtime-dom': 3.3.10
|
||||
'@vue/server-renderer': 3.3.10(vue@3.3.10)
|
||||
'@vue/shared': 3.3.10
|
||||
typescript: 5.2.2
|
||||
|
||||
/vueuc@0.4.51(vue@3.3.8):
|
||||
/vueuc@0.4.51(vue@3.3.10):
|
||||
resolution: {integrity: sha512-pLiMChM4f+W8czlIClGvGBYo656lc2Y0/mXFSCydcSmnCR1izlKPGMgiYBGjbY9FDkFG8a2HEVz7t0DNzBWbDw==}
|
||||
peerDependencies:
|
||||
vue: ^3.0.11
|
||||
dependencies:
|
||||
'@css-render/vue3-ssr': 0.15.12(vue@3.3.8)
|
||||
'@css-render/vue3-ssr': 0.15.12(vue@3.3.10)
|
||||
'@juggle/resize-observer': 3.4.0
|
||||
css-render: 0.15.12
|
||||
evtd: 0.2.4
|
||||
seemly: 0.3.6
|
||||
vdirs: 0.1.8(vue@3.3.8)
|
||||
vooks: 0.2.12(vue@3.3.8)
|
||||
vue: 3.3.8(typescript@5.2.2)
|
||||
vdirs: 0.1.8(vue@3.3.10)
|
||||
vooks: 0.2.12(vue@3.3.10)
|
||||
vue: 3.3.10(typescript@5.2.2)
|
||||
dev: false
|
||||
|
||||
/webidl-conversions@3.0.1:
|
||||
|
||||
@ -118,7 +118,7 @@ export const APP_CATCH_KEY = {
|
||||
* 具体配置信息查看官网: https://www.naiveui.com/zh-CN/dark/components/watermark#API
|
||||
*/
|
||||
export const APP_WATERMARK_CONFIG = {
|
||||
content: 'Tring be better~',
|
||||
content: 'Trying be better~',
|
||||
fontSize: 16,
|
||||
lineHeight: 16,
|
||||
width: 384,
|
||||
|
||||
@ -11,13 +11,10 @@
|
||||
|
||||
import { setVariable, getVariableToRefs } from '@/global-variable'
|
||||
import { LAYOUT_CONTENT_REF } from '@/app-config/routerConfig'
|
||||
import { addStyle, removeStyle } from '@/utils/element'
|
||||
import { unrefElement } from '@/utils/vue'
|
||||
import { useWindowSize } from '@vueuse/core'
|
||||
import { useElementFullscreen } from '../web'
|
||||
|
||||
export interface MaximizeOptions {
|
||||
zIndex?: string
|
||||
}
|
||||
import type { UseElementFullscreenOptions } from '../web'
|
||||
|
||||
export const useMaximize = () => {
|
||||
/**
|
||||
@ -40,38 +37,15 @@ export const useMaximize = () => {
|
||||
* 该方法仅针对于 LayoutContent 区域，并且依赖全局属性 layoutContentMaximize
|
||||
*
|
||||
* @example
|
||||
* maximize(true, { MaximizeOptions }) 全屏内容区域
|
||||
* maximize(false, { MaximizeOptions }) 取消全屏内容区域
|
||||
* maximize(true, { UseElementFullscreenOptions }) 全屏内容区域
|
||||
* maximize(false, { UseElementFullscreenOptions }) 取消全屏内容区域
|
||||
*/
|
||||
const maximize = (full: boolean, options?: MaximizeOptions) => {
|
||||
const maximize = (full: boolean, options?: UseElementFullscreenOptions) => {
|
||||
const contentEl = unrefElement(LAYOUT_CONTENT_REF as Ref<HTMLElement>)
|
||||
|
||||
if (contentEl) {
|
||||
const { left, top } = contentEl.getBoundingClientRect() // 使用 left, top 计算 translate 偏移
|
||||
const { height } = useWindowSize() // 获取实际高度避免 100vh 会导致手机端浏览器获取不准确问题
|
||||
const { zIndex = '99' } = options ?? {}
|
||||
|
||||
full
|
||||
? addStyle(contentEl, {
|
||||
position: 'fixed',
|
||||
width: '100%',
|
||||
height: `${height.value}px`,
|
||||
transform: `translate(-${left}px, -${top}px)`,
|
||||
transition: 'all 0.3s var(--r-bezier)',
|
||||
zIndex,
|
||||
})
|
||||
: removeStyle(contentEl, [
|
||||
'position',
|
||||
'width',
|
||||
'height',
|
||||
'transform',
|
||||
// 为了兼容浏览器 zIndex 的样式表
|
||||
'zIndex',
|
||||
'z-index',
|
||||
])
|
||||
}
|
||||
const { toggleFullscreen } = useElementFullscreen(contentEl, options)
|
||||
|
||||
setVariable('layoutContentMaximize', full)
|
||||
toggleFullscreen()
|
||||
}
|
||||
|
||||
return {
|
||||
|
||||
@ -13,3 +13,4 @@ export * from './useI18n'
|
||||
export * from './useVueRouter'
|
||||
export * from './useDayjs'
|
||||
export * from './useDevice'
|
||||
export * from './useElementFullscreen'
|
||||
|
||||
162
src/hooks/web/useElementFullscreen.ts
Normal file
162
src/hooks/web/useElementFullscreen.ts
Normal file
@ -0,0 +1,162 @@
|
||||
/**
|
||||
*
|
||||
* @author Ray <https://github.com/XiaoDaiGua-Ray>
|
||||
*
|
||||
* @date 2023-12-04
|
||||
*
|
||||
* @workspace ray-template
|
||||
*
|
||||
* @remark 今天也是元气满满撸代码的一天
|
||||
*/
|
||||
|
||||
import { unrefElement, effectDispose } from '@/utils/vue'
|
||||
import { useWindowSize } from '@vueuse/core'
|
||||
import { isValueType } from '@/utils/basic'
|
||||
|
||||
import type { BasicTarget } from '@/types/modules/vue'
|
||||
|
||||
export interface UseElementFullscreenOptions {
|
||||
beforeEnter?: () => void
|
||||
beforeExit?: () => void
|
||||
zIndex?: number
|
||||
backgroundColor?: string
|
||||
}
|
||||
|
||||
let currentZIndex = 999
|
||||
let isAppend = false
|
||||
const ID_TAG = 'ELEMENT-FULLSCREEN-RAY'
|
||||
const { height } = useWindowSize() // 获取实际高度避免 100vh 会导致手机端浏览器获取不准确问题
|
||||
const styleElement = document.createElement('style')
|
||||
|
||||
/**
|
||||
*
|
||||
* @param target target dom
|
||||
* @param options useElementFullscreen options
|
||||
*
|
||||
* 使元素全屏，但是不调用浏览器的全屏 API，仅使用纯 css 实现
|
||||
* 该方法具有入侵性，并且会在元素上覆盖 transition 样式
|
||||
*
|
||||
* 该方法虽然能够实现全屏，但是会覆盖元素的一些基本样式，因此需要注意管理元素的一些基本样式，例如：position、z-index、transition、transform、width、height
|
||||
*
|
||||
* @example
|
||||
* <template>
|
||||
* <div ref="refDom" />
|
||||
* </template>
|
||||
* <script lang="ts" setup>
|
||||
* const refDom = ref<HTMLElement>()
|
||||
* const { enter, exit, toggleFullscreen } = useElementFullscreen(refDom, { UseElementFullscreenOptions })
|
||||
*
|
||||
* enter() // 进入全屏
|
||||
* exit() // 退出全屏
|
||||
* toggleFullscreen() // 切换全屏
|
||||
* </script>
|
||||
*/
|
||||
export const useElementFullscreen = (
|
||||
target: BasicTarget,
|
||||
options?: UseElementFullscreenOptions,
|
||||
) => {
|
||||
const { beforeEnter, beforeExit, backgroundColor, zIndex } = options ?? {}
|
||||
const cacheStyle: Partial<CSSStyleDeclaration> = {} // 缓存一些需要被覆盖的样式，例如: transition
|
||||
let isSetup = false
|
||||
|
||||
const updateStyle = () => {
|
||||
const element = unrefElement(target) as HTMLElement | null
|
||||
|
||||
if (!element) {
|
||||
return
|
||||
}
|
||||
|
||||
const { left, top } = element.getBoundingClientRect()
|
||||
const cssContent = `
|
||||
[${ID_TAG}] {
|
||||
position: fixed;
|
||||
width: 100% !important;
|
||||
height: ${height.value}px !important;
|
||||
transform: translate(-${left}px, -${top}px) !important;
|
||||
transition: all 0.3s var(--r-bezier);
|
||||
z-index: ${
|
||||
isValueType<null>(zIndex, 'Null') ||
|
||||
isValueType<undefined>(zIndex, 'Undefined')
|
||||
? currentZIndex
|
||||
: zIndex
|
||||
} !important;
|
||||
background-color: ${backgroundColor ?? null};
|
||||
}
|
||||
`
|
||||
|
||||
styleElement.innerHTML = cssContent
|
||||
|
||||
// 避免重复添加 style 标签
|
||||
if (!isAppend) {
|
||||
document.head.appendChild(styleElement)
|
||||
}
|
||||
}
|
||||
|
||||
const enter = () => {
|
||||
const element = unrefElement(target) as HTMLElement | null
|
||||
|
||||
beforeEnter?.()
|
||||
|
||||
if (element) {
|
||||
if (!element.getAttribute(ID_TAG)) {
|
||||
element.setAttribute(ID_TAG, ID_TAG)
|
||||
}
|
||||
|
||||
if (!isSetup) {
|
||||
isSetup = true
|
||||
currentZIndex += 1
|
||||
}
|
||||
|
||||
if (!isAppend) {
|
||||
updateStyle()
|
||||
|
||||
isAppend = true
|
||||
}
|
||||
|
||||
cacheStyle.transition = element.style.transition
|
||||
element.style.transition = 'all 0.3s var(--r-bezier)'
|
||||
}
|
||||
}
|
||||
|
||||
const exit = () => {
|
||||
beforeExit?.()
|
||||
|
||||
const element = unrefElement(target)
|
||||
|
||||
if (element) {
|
||||
element.removeAttribute(ID_TAG)
|
||||
}
|
||||
}
|
||||
|
||||
const toggleFullscreen = () => {
|
||||
const element = unrefElement(target)
|
||||
|
||||
if (element) {
|
||||
if (element.getAttribute(ID_TAG)) {
|
||||
exit()
|
||||
} else {
|
||||
enter()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const stopWatch = watch(() => height.value, updateStyle)
|
||||
|
||||
effectDispose(() => {
|
||||
const element = unrefElement(target) as HTMLElement | null
|
||||
|
||||
if (element) {
|
||||
element.style.transition = cacheStyle.transition ?? ''
|
||||
|
||||
element.removeAttribute(ID_TAG)
|
||||
}
|
||||
|
||||
stopWatch()
|
||||
})
|
||||
|
||||
return {
|
||||
enter,
|
||||
exit,
|
||||
toggleFullscreen,
|
||||
}
|
||||
}
|
||||
@ -42,6 +42,7 @@ import { useKeepAliveActions } from '@/store'
|
||||
import type { AppRouteRecordRaw } from '@/router/type'
|
||||
import type { AppMenuOption, MenuTagOptions } from '@/types/modules/app'
|
||||
import type { MenuState } from '@/store/modules/menu/type'
|
||||
import type { LocationQuery } from 'vue-router'
|
||||
|
||||
export const piniaMenuStore = defineStore(
|
||||
'menu',
|
||||
@ -144,6 +145,7 @@ export const piniaMenuStore = defineStore(
|
||||
const changeMenuModelValue = (
|
||||
key: string | number,
|
||||
option: AppMenuOption,
|
||||
query?: LocationQuery,
|
||||
) => {
|
||||
const { meta, path } = option
|
||||
|
||||
@ -163,10 +165,16 @@ export const piniaMenuStore = defineStore(
|
||||
.map((curr) => curr.key)
|
||||
.join('/')
|
||||
|
||||
router.push(_path)
|
||||
router.push({
|
||||
path: _path,
|
||||
query,
|
||||
})
|
||||
} else {
|
||||
/** 根路由直接跳转 */
|
||||
router.push(path)
|
||||
router.push({
|
||||
path,
|
||||
query,
|
||||
})
|
||||
}
|
||||
|
||||
/** 检查是否为根路由 */
|
||||
@ -201,14 +209,18 @@ export const piniaMenuStore = defineStore(
|
||||
* @remark 监听路由地址变化更新菜单状态
|
||||
* @remark 递归查找匹配项
|
||||
*/
|
||||
const updateMenuKeyWhenRouteUpdate = async (path: string) => {
|
||||
// 获取 `/` 出现次数(如果为 1 则表示该路径为根路由路径)
|
||||
const count = (path.match(new RegExp('/', 'g')) || []).length
|
||||
let combinePath = path
|
||||
const updateMenuKeyWhenRouteUpdate = async (
|
||||
path: string,
|
||||
query: LocationQuery,
|
||||
) => {
|
||||
const [routePath] = path.split('?')
|
||||
const count = (routePath.match(new RegExp('/', 'g')) || []).length // 如果获取长度为 1，则视为根路由
|
||||
|
||||
let combinePath = routePath
|
||||
|
||||
if (count > 1) {
|
||||
// 如果不是跟路径则取出最后一项字符
|
||||
const splitPath = path.split('/').filter((curr) => curr)
|
||||
const splitPath = routePath.split('/').filter((curr) => curr)
|
||||
|
||||
combinePath = splitPath[splitPath.length - 1]
|
||||
}
|
||||
@ -217,10 +229,12 @@ export const piniaMenuStore = defineStore(
|
||||
for (const curr of options) {
|
||||
if (curr.children?.length) {
|
||||
findMenuOption(pathKey, curr.children)
|
||||
|
||||
continue
|
||||
}
|
||||
|
||||
if (pathKey === curr.key && !curr?.children?.length) {
|
||||
changeMenuModelValue(pathKey, curr)
|
||||
changeMenuModelValue(pathKey, curr, query)
|
||||
|
||||
break
|
||||
}
|
||||
@ -331,22 +345,24 @@ export const piniaMenuStore = defineStore(
|
||||
* 该方法仅执行一次
|
||||
*/
|
||||
const setupPiniaMenuStore = async () => {
|
||||
if (isSetupAppMenuLock.value) {
|
||||
await setupAppMenu()
|
||||
if (!isSetupAppMenuLock.value) {
|
||||
return
|
||||
}
|
||||
|
||||
await setupAppMenu()
|
||||
|
||||
isSetupAppMenuLock.value = false
|
||||
}
|
||||
|
||||
/** 监听路由变化并且更新路由菜单与菜单标签 */
|
||||
watch(
|
||||
() => route.fullPath,
|
||||
async (newData) => {
|
||||
const reg = /^([^?]+)/
|
||||
const match = newData.match(reg)?.[1]
|
||||
|
||||
async (ndata, odata) => {
|
||||
await setupPiniaMenuStore()
|
||||
await updateMenuKeyWhenRouteUpdate(match || '')
|
||||
|
||||
if (ndata !== odata) {
|
||||
await updateMenuKeyWhenRouteUpdate(ndata, route.query)
|
||||
}
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
|
||||
@ -232,12 +232,15 @@ export const removeStyle = (
|
||||
*
|
||||
* @param color 颜色格式
|
||||
* @param alpha 透明度
|
||||
* @returns 转换后的 rgba 颜色值
|
||||
*
|
||||
* @remark 将任意颜色值转为 rgba
|
||||
* 将任意颜色值转为 rgba，如果本身为 rgba, rgb 或者其它非法颜色值则直接返回
|
||||
*
|
||||
* @example
|
||||
* colorToRgba('#123632', 0.8) => rgba(18, 54, 50, 0.8)
|
||||
* colorToRgba('rgb(18, 54, 50)', 0.8) => rgb(18, 54, 50)
|
||||
* colorToRgba('#ee4f12', 0.3) => rgba(238, 79, 18, 0.3)
|
||||
* colorToRgba('rgba(238, 79, 18, 0.3)', 0.3) => rgba(238, 79, 18, 0.3)
|
||||
* colorToRgba('not a color', 0.3) => not a color
|
||||
*/
|
||||
export const colorToRgba = (color: string, alpha = 1) => {
|
||||
const hexPattern = /^#([0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/i
|
||||
@ -257,11 +260,11 @@ export const colorToRgba = (color: string, alpha = 1) => {
|
||||
|
||||
result = 'rgb(' + rgb.join(', ') + ')'
|
||||
} else if (rgbPattern.test(color)) {
|
||||
result = color
|
||||
return color
|
||||
} else if (rgbaPattern.test(color)) {
|
||||
result = color
|
||||
return color
|
||||
} else {
|
||||
result = color
|
||||
return color
|
||||
}
|
||||
|
||||
if (result && !result.startsWith('rgba')) {
|
||||
|
||||
@ -28,12 +28,12 @@ import type { ComponentPublicInstance } from 'vue'
|
||||
* unrefElement(refDom) => div
|
||||
* unrefElement(computedDom) => div
|
||||
*/
|
||||
export function unrefElement<T extends TargetType>(
|
||||
function unrefElement<T extends TargetType>(
|
||||
target: BasicTarget<T>,
|
||||
defaultTarget?: T,
|
||||
defaultElement?: T,
|
||||
) {
|
||||
if (!target) {
|
||||
return defaultTarget
|
||||
return defaultElement
|
||||
}
|
||||
|
||||
let targetElement: TargetValue<T>
|
||||
@ -49,3 +49,5 @@ export function unrefElement<T extends TargetType>(
|
||||
|
||||
return targetElement
|
||||
}
|
||||
|
||||
export { unrefElement }
|
||||
|
||||
@ -21,6 +21,12 @@ import type { AnyFC } from '@/types/modules/utils'
|
||||
*
|
||||
* 该方法使用 watchEffect 实现副作用函数的执行
|
||||
* 并且能够在 effect 作用域卸载时，自动停止监听
|
||||
*
|
||||
* @example
|
||||
* const ref = ref(0)
|
||||
* const watcher = watch(()=> ref.value, (newVal, oldVal) => {})
|
||||
*
|
||||
* watchEffectWithTarget(watcher)
|
||||
*/
|
||||
export function watchEffectWithTarget<T extends AnyFC>(
|
||||
fc: T,
|
||||
|
||||
@ -14,6 +14,7 @@ import { NCard, NSpace } from 'naive-ui'
|
||||
const RouterDemoDetail = defineComponent({
|
||||
name: 'RouterDemoDetail',
|
||||
render() {
|
||||
console.log(this.$route.query)
|
||||
return (
|
||||
<NSpace wrapItem={false}>
|
||||
<NCard title="平层路由详情页面">我是平层路由详情页面</NCard>
|
||||
|
||||
@ -52,6 +52,9 @@ const RouterDemoHome = defineComponent({
|
||||
onClick={() => {
|
||||
router.push({
|
||||
path: '/router-demo/router-demo-detail',
|
||||
query: {
|
||||
name: '23',
|
||||
},
|
||||
})
|
||||
}}
|
||||
>
|
||||
|
||||
@ -33,7 +33,7 @@ import config from './cfg'
|
||||
|
||||
import type { PluginOption } from 'vite'
|
||||
|
||||
// 仅适用于报告模式
|
||||
// 仅适用于报告模式（report）
|
||||
function onlyReportOptions(mode: string) {
|
||||
return [
|
||||
visualizer({
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user