diff --git a/CHANGELOG.md b/CHANGELOG.md index ff063d60..64ded944 100644 --- a/CHANGELOG.md +++ b/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 这是一个具有破坏性更新的版本，如果你使用了该模板，那么你需要做一些改动。 diff --git a/package.json b/package.json index f25c3512..55412dea 100755 --- a/package.json +++ b/package.json @@ -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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 2d45b942..187c6154 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -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: diff --git a/src/app-config/appConfig.ts b/src/app-config/appConfig.ts index eaac340a..aec231b0 100644 --- a/src/app-config/appConfig.ts +++ b/src/app-config/appConfig.ts @@ -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, diff --git a/src/hooks/template/useMaximize.ts b/src/hooks/template/useMaximize.ts index ea3cbb58..de150857 100644 --- a/src/hooks/template/useMaximize.ts +++ b/src/hooks/template/useMaximize.ts @@ -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) - - 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 { diff --git a/src/hooks/web/index.ts b/src/hooks/web/index.ts index 2b5c2140..cac56b0c 100644 --- a/src/hooks/web/index.ts +++ b/src/hooks/web/index.ts @@ -13,3 +13,4 @@ export * from './useI18n' export * from './useVueRouter' export * from './useDayjs' export * from './useDevice' +export * from './useElementFullscreen' diff --git a/src/hooks/web/useElementFullscreen.ts b/src/hooks/web/useElementFullscreen.ts new file mode 100644 index 00000000..ac19ed5b --- /dev/null +++ b/src/hooks/web/useElementFullscreen.ts @@ -0,0 +1,162 @@ +/** + * + * @author 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 + * + * + */ +export const useElementFullscreen = ( + target: BasicTarget, + options?: UseElementFullscreenOptions, +) => { + const { beforeEnter, beforeExit, backgroundColor, zIndex } = options ?? {} + const cacheStyle: Partial = {} // 缓存一些需要被覆盖的样式，例如: 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(zIndex, 'Null') || + isValueType(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, + } +} diff --git a/src/store/modules/menu/index.ts b/src/store/modules/menu/index.ts index b56d2a9b..91392e46 100644 --- a/src/store/modules/menu/index.ts +++ b/src/store/modules/menu/index.ts @@ -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, diff --git a/src/utils/element.ts b/src/utils/element.ts index ae8a1ff2..8576a377 100644 --- a/src/utils/element.ts +++ b/src/utils/element.ts @@ -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')) { diff --git a/src/utils/vue/unrefElement.ts b/src/utils/vue/unrefElement.ts index 88d8e51a..66ce95fb 100644 --- a/src/utils/vue/unrefElement.ts +++ b/src/utils/vue/unrefElement.ts @@ -28,12 +28,12 @@ import type { ComponentPublicInstance } from 'vue' * unrefElement(refDom) => div * unrefElement(computedDom) => div */ -export function unrefElement( +function unrefElement( target: BasicTarget, - defaultTarget?: T, + defaultElement?: T, ) { if (!target) { - return defaultTarget + return defaultElement } let targetElement: TargetValue @@ -49,3 +49,5 @@ export function unrefElement( return targetElement } + +export { unrefElement } diff --git a/src/utils/vue/watchEffectWithTarget.ts b/src/utils/vue/watchEffectWithTarget.ts index e5cd89ae..e85f48b2 100644 --- a/src/utils/vue/watchEffectWithTarget.ts +++ b/src/utils/vue/watchEffectWithTarget.ts @@ -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( fc: T, diff --git a/src/views/demo/router-demo/router-demo-detail/index.tsx b/src/views/demo/router-demo/router-demo-detail/index.tsx index 46cb6d23..0c06479f 100644 --- a/src/views/demo/router-demo/router-demo-detail/index.tsx +++ b/src/views/demo/router-demo/router-demo-detail/index.tsx @@ -14,6 +14,7 @@ import { NCard, NSpace } from 'naive-ui' const RouterDemoDetail = defineComponent({ name: 'RouterDemoDetail', render() { + console.log(this.$route.query) return ( 我是平层路由详情页面 diff --git a/src/views/demo/router-demo/router-demo-home/index.tsx b/src/views/demo/router-demo/router-demo-home/index.tsx index 1a70e4f3..d2a21344 100644 --- a/src/views/demo/router-demo/router-demo-home/index.tsx +++ b/src/views/demo/router-demo/router-demo-home/index.tsx @@ -52,6 +52,9 @@ const RouterDemoHome = defineComponent({ onClick={() => { router.push({ path: '/router-demo/router-demo-detail', + query: { + name: '23', + }, }) }} > diff --git a/vite.pliugin.config.ts b/vite.pliugin.config.ts index 31fd16d0..7eac1d0c 100644 --- a/vite.pliugin.config.ts +++ b/vite.pliugin.config.ts @@ -33,7 +33,7 @@ import config from './cfg' import type { PluginOption } from 'vite' -// 仅适用于报告模式 +// 仅适用于报告模式（report） function onlyReportOptions(mode: string) { return [ visualizer({