version: v4.4.3

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
 
 这是一个具有破坏性更新的版本，如果你使用了该模板，那么你需要做一些改动。

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

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
+    specifier: ^3.3.10
-    version: 3.3.8(typescript@5.2.2)
+    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:
+  /@vue/runtime-core@3.3.10:
-    resolution: {integrity: sha512-qurzOlb6q26KWQ/8IShHkMDOuJkQnQcTIp1sdP4I9MbCf9FJeGVRXJFr2mF+6bXh/3Zjr9TDgURXrsCr9bfjUw==}
+    resolution: {integrity: sha512-DZ0v31oTN4YHX9JEU5VW1LoIVgFovWgIVb30bWn9DG9a7oA415idcwsRNNajqTx8HQJyOaWfRKoyuP2P2TYIag==}
     dependencies:
-      '@vue/reactivity': 3.3.8
+      '@vue/reactivity': 3.3.10
-      '@vue/shared': 3.3.8
+      '@vue/shared': 3.3.10
 
-  /@vue/runtime-dom@3.3.8:
+  /@vue/runtime-dom@3.3.10:
-    resolution: {integrity: sha512-Noy5yM5UIf9UeFoowBVgghyGGPIDPy1Qlqt0yVsUdAVbqI8eeMSsTqBtauaEoT2UFXUk5S64aWVNJN4MJ2vRdA==}
+    resolution: {integrity: sha512-c/jKb3ny05KJcYk0j1m7Wbhrxq7mZYr06GhKykDMNRRR9S+/dGT8KpHuNQjv3/8U4JshfkAk6TpecPD3B21Ijw==}
     dependencies:
-      '@vue/runtime-core': 3.3.8
+      '@vue/runtime-core': 3.3.10
-      '@vue/shared': 3.3.8
+      '@vue/shared': 3.3.10
       csstype: 3.1.2
 
-  /@vue/server-renderer@3.3.8(vue@3.3.8):
+  /@vue/server-renderer@3.3.10(vue@3.3.10):
-    resolution: {integrity: sha512-zVCUw7RFskvPuNlPn/8xISbrf0zTWsTSdYTsUTN1ERGGZGVnRxM2QZ3x1OR32+vwkkCm0IW6HmJ49IsPm7ilLg==}
+    resolution: {integrity: sha512-0i6ww3sBV3SKlF3YTjSVqKQ74xialMbjVYGy7cOTi7Imd8ediE7t72SK3qnvhrTAhOvlQhq6Bk6nFPdXxe0sAg==}
     peerDependencies:
-      vue: 3.3.8
+      vue: 3.3.10
     dependencies:
-      '@vue/compiler-ssr': 3.3.8
+      '@vue/compiler-ssr': 3.3.10
-      '@vue/shared': 3.3.8
+      '@vue/shared': 3.3.10
-      vue: 3.3.8(typescript@5.2.2)
+      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)
+      '@vueuse/shared': 10.6.1(vue@3.3.10)
-      vue-demi: 0.14.6(vue@3.3.8)
+      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)
+      vdirs: 0.1.8(vue@3.3.10)
-      vooks: 0.2.12(vue@3.3.8)
+      vooks: 0.2.12(vue@3.3.10)
-      vue: 3.3.8(typescript@5.2.2)
+      vue: 3.3.10(typescript@5.2.2)
-      vueuc: 0.4.51(vue@3.3.8)
+      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: 3.3.10(typescript@5.2.2)
-      vue-demi: 0.14.6(vue@3.3.8)
+      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):
+  /vue@3.3.10(typescript@5.2.2):
-    resolution: {integrity: sha512-5VSX/3DabBikOXMsxzlW8JyfeLKlG9mzqnWgLQLty88vdZL7ZJgrdgBOmrArwxiLtmS+lNNpPcBYqrhE6TQW5w==}
+    resolution: {integrity: sha512-zg6SIXZdTBwiqCw/1p+m04VyHjLfwtjwz8N57sPaBhEex31ND0RYECVOC1YrRwMRmxFf5T1dabl6SGUbMKKuVw==}
     peerDependencies:
       typescript: '*'
     peerDependenciesMeta:
       typescript:
         optional: true
     dependencies:
-      '@vue/compiler-dom': 3.3.8
+      '@vue/compiler-dom': 3.3.10
-      '@vue/compiler-sfc': 3.3.8
+      '@vue/compiler-sfc': 3.3.10
-      '@vue/runtime-dom': 3.3.8
+      '@vue/runtime-dom': 3.3.10
-      '@vue/server-renderer': 3.3.8(vue@3.3.8)
+      '@vue/server-renderer': 3.3.10(vue@3.3.10)
-      '@vue/shared': 3.3.8
+      '@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)
+      vdirs: 0.1.8(vue@3.3.10)
-      vooks: 0.2.12(vue@3.3.8)
+      vooks: 0.2.12(vue@3.3.10)
-      vue: 3.3.8(typescript@5.2.2)
+      vue: 3.3.10(typescript@5.2.2)
     dev: false
 
   /webidl-conversions@3.0.1:

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,

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 {
+import type { UseElementFullscreenOptions } from '../web'
-  zIndex?: string
-}
 
 export const useMaximize = () => {
   /**
@@ -40,38 +37,15 @@ export const useMaximize = () => {
    * 该方法仅针对于 LayoutContent 区域，并且依赖全局属性 layoutContentMaximize
    *
    * @example
-   * maximize(true, { MaximizeOptions }) 全屏内容区域
+   * maximize(true, { UseElementFullscreenOptions }) 全屏内容区域
-   * maximize(false, { MaximizeOptions }) 取消全屏内容区域
+   * maximize(false, { UseElementFullscreenOptions }) 取消全屏内容区域
    */
-  const maximize = (full: boolean, options?: MaximizeOptions) => {
+  const maximize = (full: boolean, options?: UseElementFullscreenOptions) => {
     const contentEl = unrefElement(LAYOUT_CONTENT_REF as Ref<HTMLElement>)
-
+    const { toggleFullscreen } = useElementFullscreen(contentEl, options)
-    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',
-          ])
-    }
 
     setVariable('layoutContentMaximize', full)
+    toggleFullscreen()
   }
 
   return {

src/hooks/web/index.ts

@@ -13,3 +13,4 @@ export * from './useI18n'
 export * from './useVueRouter'
 export * from './useDayjs'
 export * from './useDevice'
+export * from './useElementFullscreen'

src/hooks/web/useElementFullscreen.ts

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

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) => {
+    const updateMenuKeyWhenRouteUpdate = async (
-      // 获取 `/` 出现次数(如果为 1 则表示该路径为根路由路径)
+      path: string,
-      const count = (path.match(new RegExp('/', 'g')) || []).length
+      query: LocationQuery,
-      let combinePath = path
+    ) => {
+      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) {
+      if (!isSetupAppMenuLock.value) {
-        await setupAppMenu()
+        return
       }
 
+      await setupAppMenu()
+
       isSetupAppMenuLock.value = false
     }
 
     /** 监听路由变化并且更新路由菜单与菜单标签 */
     watch(
       () => route.fullPath,
-      async (newData) => {
+      async (ndata, odata) => {
-        const reg = /^([^?]+)/
-        const match = newData.match(reg)?.[1]
-
         await setupPiniaMenuStore()
-        await updateMenuKeyWhenRouteUpdate(match || '')
+
+        if (ndata !== odata) {
+          await updateMenuKeyWhenRouteUpdate(ndata, route.query)
+        }
       },
       {
         immediate: true,

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')) {

src/utils/vue/unrefElement.ts

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

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<T extends AnyFC>(
   fc: T,

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 (
       <NSpace wrapItem={false}>
         <NCard title="平层路由详情页面">我是平层路由详情页面</NCard>

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

vite.pliugin.config.ts

@@ -33,7 +33,7 @@ import config from './cfg'
 
 import type { PluginOption } from 'vite'
 
-// 仅适用于报告模式
+// 仅适用于报告模式（report）
 function onlyReportOptions(mode: string) {
   return [
     visualizer({