Merge branch 'main' into gitee

CHANGELOG.en_US.md

@@ -1,3 +1,39 @@
+# 5.2.0 (2024-03-22)
+
+### ✔️ refactor
+
+- Place the full screen button at the top to make it visible and easy to operate
+
+### 🎫 Feat
+
+- Added `v-ripple` command (water ripple effect)
+- Add global `Stretch` configuration to the content area to customize compact pages and easily find the required information
+- Added roaming guidance based on `ElTour`
+- Improve role management-menu permission function, novel interactive experience
+- Add system monitoring-online users
+- Add system monitoring-login log
+- Add system monitoring-operation log
+- Add system monitoring-system log
+- Add more more convenient `pure-admin-table` editable table examples (overall editing, single row editing, cell editing)
+- The `ReSegmented` component has a new `block` attribute to make it fit the width of the parent element
+- Add [vue-flow](https://vueflow.dev/) flow chart example
+- Add virtual table example
+- Added Gantt chart example
+- Add graphic verification code example
+- Add form examples, which can be generated through `JSON` format configuration (basic form, pop-up form, drawer form, step-by-step form, search form)
+- Add a folding and expanding menu function on the middle right side of the left menu
+
+### 🐞 Bug fixes
+
+- Fixed the scroll bar issue when clicking on the registration page under `windwos`
+- Fixed the problem of scroll bars appearing in the content area when switching pages under `windows`
+- Fixed the problem of status style disappearing in `pure-table` with status table under dark overall style
+- Fixed the problem of turning on the gray mode and dark overall style in the project configuration and refreshing the overall style of the page.
+
+### 🍏 Perf
+
+- All pages of system management and system monitoring are compatible with mobile terminals
+
 # 5.1.0 (2024-03-02)
 
 ### ✔️ refactor

CHANGELOG.md

@@ -1,3 +1,39 @@
+# 5.2.0 (2024-03-22)
+
+### ✔️ refactor
+
+- Place the full screen button at the top to make it visible and easy to operate
+
+### 🎫 Feat
+
+- Added `v-ripple` command (water ripple effect)
+- Add global `Stretch` configuration to the content area to customize compact pages and easily find the required information
+- Added roaming guidance based on `ElTour`
+- Improve role management-menu permission function, novel interactive experience
+- Add system monitoring-online users
+- Add system monitoring-login log
+- Add system monitoring-operation log
+- Add system monitoring-system log
+- Add more more convenient `pure-admin-table` editable table examples (overall editing, single row editing, cell editing)
+- The `ReSegmented` component has a new `block` attribute to make it fit the width of the parent element
+- Add [vue-flow](https://vueflow.dev/) flow chart example
+- Add virtual table example
+- Added Gantt chart example
+- Add graphic verification code example
+- Add form examples, which can be generated through `JSON` format configuration (basic form, pop-up form, drawer form, step-by-step form, search form)
+- Add a folding and expanding menu function on the middle right side of the left menu
+
+### 🐞 Bug fixes
+
+- Fixed the scroll bar issue when clicking on the registration page under `windwos`
+- Fixed the problem of scroll bars appearing in the content area when switching pages under `windows`
+- Fixed the problem of status style disappearing in `pure-table` with status table under dark overall style
+- Fixed the problem of turning on the gray mode and dark overall style in the project configuration and refreshing the overall style of the page.
+
+### 🍏 Perf
+
+- All pages of system management and system monitoring are compatible with mobile terminals
+
 # 5.1.0 (2024-03-02)
 
 ### ✔️ refactor

CHANGELOG.zh_CN.md

@@ -1,3 +1,39 @@
+# 5.2.0 (2024-03-22)
+
+### ✔️ refactor
+
+- 将全屏按钮置于顶部，使其显眼且易于操作
+
+### 🎫 Feat
+
+- 新增`v-ripple`指令(水波纹效果)
+- 内容区添加全局`Stretch`配置，可自定义紧凑页面，轻松找到所需信息
+- 添加基于`ElTour`实现的漫游式引导
+- 完善角色管理-菜单权限功能，新颖的交互体验
+- 添加系统监控-在线用户
+- 添加系统监控-登录日志
+- 添加系统监控-操作日志
+- 添加系统监控-系统日志
+- 添加更多更方便的`pure-admin-table`可编辑表格示例（整体编辑、单行编辑、单元格编辑）
+- `ReSegmented`组件新增`block`属性，可使其适合父元素宽度
+- 添加 [vue-flow](https://vueflow.dev/) 流程图示例
+- 添加虚拟表格示例
+- 添加甘特图示例
+- 添加图形验证码示例
+- 添加表单示例，可通过`JSON`格式配置生成（基础表单、弹框表单、抽屉表单、分步表单、搜索表单）
+- 在左侧菜单右中侧再加一个折叠展开菜单的功能
+
+### 🐞 Bug fixes
+
+- 修复`windwos`下点击注册页面会出现滚动条问题
+- 修复`windows`下页面切换，内容区会出现滚动条问题
+- 修复`pure-table`带状态表格在深色整体风格下状态样式消失的问题
+- 修复项目配置中开启灰色模式和深色整体风格，刷新页面整体风格异常
+
+### 🍏 Perf
+
+- 系统管理、系统监控的所有页面兼容移动端
+
 # 5.1.0 (2024-03-02)
 
 ### ✔️ refactor

README.en-US.md

@@ -23,15 +23,16 @@ The simplified version is based on the shelf extracted from [vue-pure-admin](htt
 [Click to view the non-internationalized version](https://github.com/pure-admin/pure-admin-thin)  
 [Click to view Internationalization version](https://github.com/pure-admin/pure-admin-thin/tree/i18n)
 
-## Supporting Video
+## Supporting video
 
-[Click Watch Tutorial](https://www.bilibili.com/video/BV1kg411v7QT)  
+[Click me to view UI design](https://www.bilibili.com/video/BV17g411T7rq)  
-[Click Watch UI Design](https://www.bilibili.com/video/BV17g411T7rq)
+[Click me to view the rapid development tutorial](https://www.bilibili.com/video/BV1kg411v7QT)  
+[Click me to view all pages and function demonstrations of vue-pure-admin](https://www.bilibili.com/video/BV1Rx4y1U7Mv)
 
-## Docs
+## Nanny-level documents
 
-[View vue-pure-admin documentation](https://yiming_chang.gitee.io/pure-admin-doc)  
+[Click me to view vue-pure-admin documentation](https://yiming_chang.gitee.io/pure-admin-doc)  
-[View @pureadmin/utils documentation](https://pure-admin-utils.netlify.app)
+[Click me to view @pureadmin/utils documentation](https://pure-admin-utils.netlify.app)
 
 ## Quality service, software outsourcing, sponsorship support
 

README.md

@@ -26,8 +26,9 @@
 
 ## 配套视频
 
-[点我查看快速开发教程](https://www.bilibili.com/video/BV1kg411v7QT)  
 [点我查看 UI 设计](https://www.bilibili.com/video/BV17g411T7rq)  
+[点我查看快速开发教程](https://www.bilibili.com/video/BV1kg411v7QT)  
+[点我查看 vue-pure-admin 的所有页面、功能演示](https://www.bilibili.com/video/BV1Rx4y1U7Mv)
 
 ## 配套保姆级文档
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-pure-admin",
-  "version": "5.1.0",
+  "version": "5.2.0",
   "private": true,
   "type": "module",
   "scripts": {
@@ -70,7 +70,7 @@
     "dayjs": "^1.11.10",
     "echarts": "^5.5.0",
     "el-table-infinite-scroll": "^3.0.3",
-    "element-plus": "^2.6.1",
+    "element-plus": "^2.6.2",
     "intro.js": "^7.2.0",
     "js-cookie": "^3.0.5",
     "jsbarcode": "^3.11.6",
@@ -161,7 +161,7 @@
     "svgo": "^3.2.0",
     "tailwindcss": "^3.4.1",
     "typescript": "^5.4.3",
-    "vite": "^5.2.2",
+    "vite": "^5.2.3",
     "vite-plugin-cdn-import": "^0.3.5",
     "vite-plugin-compression": "^0.5.1",
     "vite-plugin-fake-server": "^2.1.1",

pnpm-lock.yaml

@@ -22,10 +22,10 @@ dependencies:
     version: 1.2.23
   '@pureadmin/descriptions':
     specifier: ^1.2.1
-    version: 1.2.1(echarts@5.5.0)(element-plus@2.6.1)(typescript@5.4.3)
+    version: 1.2.1(echarts@5.5.0)(element-plus@2.6.2)(typescript@5.4.3)
   '@pureadmin/table':
     specifier: ^3.1.2
-    version: 3.1.2(element-plus@2.6.1)(typescript@5.4.3)
+    version: 3.1.2(element-plus@2.6.2)(typescript@5.4.3)
   '@pureadmin/utils':
     specifier: ^2.4.7
     version: 2.4.7(echarts@5.5.0)(vue@3.4.21)
@@ -72,8 +72,8 @@ dependencies:
     specifier: ^3.0.3
     version: 3.0.3(typescript@5.4.3)
   element-plus:
-    specifier: ^2.6.1
+    specifier: ^2.6.2
-    version: 2.6.1(vue@3.4.21)
+    version: 2.6.2(vue@3.4.21)
   intro.js:
     specifier: ^7.2.0
     version: 7.2.0
@@ -106,7 +106,7 @@ dependencies:
     version: 3.19.6
   plus-pro-components:
     specifier: ^0.0.5
-    version: 0.0.5(element-plus@2.6.1)(vue@3.4.21)
+    version: 0.0.5(element-plus@2.6.2)(vue@3.4.21)
   qrcode:
     specifier: ^1.5.3
     version: 1.5.3
@@ -249,10 +249,10 @@ devDependencies:
     version: 7.3.1(eslint@8.57.0)(typescript@5.4.3)
   '@vitejs/plugin-vue':
     specifier: ^5.0.4
-    version: 5.0.4(vite@5.2.2)(vue@3.4.21)
+    version: 5.0.4(vite@5.2.3)(vue@3.4.21)
   '@vitejs/plugin-vue-jsx':
     specifier: ^3.1.0
-    version: 3.1.0(vite@5.2.2)(vue@3.4.21)
+    version: 3.1.0(vite@5.2.3)(vue@3.4.21)
   autoprefixer:
     specifier: ^10.4.19
     version: 10.4.19(postcss@8.4.38)
@@ -341,14 +341,14 @@ devDependencies:
     specifier: ^5.4.3
     version: 5.4.3
   vite:
-    specifier: ^5.2.2
+    specifier: ^5.2.3
-    version: 5.2.2(@types/node@20.11.30)(sass@1.72.0)
+    version: 5.2.3(@types/node@20.11.30)(sass@1.72.0)
   vite-plugin-cdn-import:
     specifier: ^0.3.5
     version: 0.3.5(rollup@2.79.1)
   vite-plugin-compression:
     specifier: ^0.5.1
-    version: 0.5.1(vite@5.2.2)
+    version: 0.5.1(vite@5.2.3)
   vite-plugin-fake-server:
     specifier: ^2.1.1
     version: 2.1.1
@@ -2002,26 +2002,26 @@ packages:
     resolution: {integrity: sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==}
     dev: false
 
-  /@pureadmin/descriptions@1.2.1(echarts@5.5.0)(element-plus@2.6.1)(typescript@5.4.3):
+  /@pureadmin/descriptions@1.2.1(echarts@5.5.0)(element-plus@2.6.2)(typescript@5.4.3):
     resolution: {integrity: sha512-7jDJuqz8xnhcmwXdWQnBzOYeX2WK27TRFaVgs9AdiRr+DnKb9W+krHByJwQtxo5lg4qyRh4/IWQGEMfhC2ljeQ==}
     peerDependencies:
       element-plus: ^2.0.0
     dependencies:
       '@element-plus/icons-vue': 2.3.1(vue@3.4.21)
       '@pureadmin/utils': 2.4.7(echarts@5.5.0)(vue@3.4.21)
-      element-plus: 2.6.1(vue@3.4.21)
+      element-plus: 2.6.2(vue@3.4.21)
       vue: 3.4.21(typescript@5.4.3)
     transitivePeerDependencies:
       - echarts
       - typescript
     dev: false
 
-  /@pureadmin/table@3.1.2(element-plus@2.6.1)(typescript@5.4.3):
+  /@pureadmin/table@3.1.2(element-plus@2.6.2)(typescript@5.4.3):
     resolution: {integrity: sha512-6GrZCjBDFn/kKjn/HGkx0BH9RiArg5QktPN2u5PNpzHBhZZXWMoFcKCkysWLfDdWfpCowQWgnOpr0KjTPEgT0A==}
     peerDependencies:
       element-plus: ^2.0.0
     dependencies:
-      element-plus: 2.6.1(vue@3.4.21)
+      element-plus: 2.6.2(vue@3.4.21)
       vue: 3.4.21(typescript@5.4.3)
     transitivePeerDependencies:
       - typescript
@@ -2560,7 +2560,7 @@ packages:
       nanoid: 3.3.7
     dev: false
 
-  /@vitejs/plugin-vue-jsx@3.1.0(vite@5.2.2)(vue@3.4.21):
+  /@vitejs/plugin-vue-jsx@3.1.0(vite@5.2.3)(vue@3.4.21):
     resolution: {integrity: sha512-w9M6F3LSEU5kszVb9An2/MmXNxocAnUb3WhRr8bHlimhDrXNt6n6D2nJQR3UXpGlZHh/EsgouOHCsM8V3Ln+WA==}
     engines: {node: ^14.18.0 || >=16.0.0}
     peerDependencies:
@@ -2570,20 +2570,20 @@ packages:
       '@babel/core': 7.24.3
       '@babel/plugin-transform-typescript': 7.24.1(@babel/core@7.24.3)
       '@vue/babel-plugin-jsx': 1.2.2(@babel/core@7.24.3)
-      vite: 5.2.2(@types/node@20.11.30)(sass@1.72.0)
+      vite: 5.2.3(@types/node@20.11.30)(sass@1.72.0)
       vue: 3.4.21(typescript@5.4.3)
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /@vitejs/plugin-vue@5.0.4(vite@5.2.2)(vue@3.4.21):
+  /@vitejs/plugin-vue@5.0.4(vite@5.2.3)(vue@3.4.21):
     resolution: {integrity: sha512-WS3hevEszI6CEVEx28F8RjTX97k3KsrcY6kvTg7+Whm5y3oYvcqzVeGCU3hxSAn4uY2CLCkeokkGKpoctccilQ==}
     engines: {node: ^18.0.0 || >=20.0.0}
     peerDependencies:
       vite: ^5.0.0
       vue: ^3.2.25
     dependencies:
-      vite: 5.2.2(@types/node@20.11.30)(sass@1.72.0)
+      vite: 5.2.3(@types/node@20.11.30)(sass@1.72.0)
       vue: 3.4.21(typescript@5.4.3)
     dev: true
 
@@ -3280,7 +3280,7 @@ packages:
       postcss: ^8.1.0
     dependencies:
       browserslist: 4.23.0
-      caniuse-lite: 1.0.30001599
+      caniuse-lite: 1.0.30001600
       fraction.js: 4.3.7
       normalize-range: 0.1.2
       picocolors: 1.0.0
@@ -3436,8 +3436,8 @@ packages:
     engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
     hasBin: true
     dependencies:
-      caniuse-lite: 1.0.30001599
+      caniuse-lite: 1.0.30001600
-      electron-to-chromium: 1.4.714
+      electron-to-chromium: 1.4.715
       node-releases: 2.0.14
       update-browserslist-db: 1.0.13(browserslist@4.23.0)
 
@@ -3520,13 +3520,13 @@ packages:
     resolution: {integrity: sha512-bsTwuIg/BZZK/vreVTYYbSWoe2F+71P7K5QGEX+pT250DZbfU1MQ5prOKpPR+LL6uWKK3KMwMCAS74QB3Um1uw==}
     dependencies:
       browserslist: 4.23.0
-      caniuse-lite: 1.0.30001599
+      caniuse-lite: 1.0.30001600
       lodash.memoize: 4.1.2
       lodash.uniq: 4.5.0
     dev: true
 
-  /caniuse-lite@1.0.30001599:
+  /caniuse-lite@1.0.30001600:
-    resolution: {integrity: sha512-LRAQHZ4yT1+f9LemSMeqdMpMxZcc4RMWdj4tiFe3G8tNkWK+E58g+/tzotb5cU6TbcVJLr4fySiAW7XmxQvZQA==}
+    resolution: {integrity: sha512-+2S9/2JFhYmYaDpZvo0lKkfvuKIglrx68MwOBqMGHhQsNkLjB5xtc/TGoEPs+MxjSyN/72qer2g97nzR641mOQ==}
 
   /canvas@2.11.2:
     resolution: {integrity: sha512-ItanGBMrmRV7Py2Z+Xhs7cT+FNt5K0vPL4p9EZ/UX/Mu7hFbkxSjKF2KVtPwX7UYWp7dRKnrTvReflgrItJbdw==}
@@ -4448,15 +4448,15 @@ packages:
     resolution: {integrity: sha512-cmMHg4MxrNOV2dFziV3ISRo+rM/3tAH8TE3wWMGKd4ucjvk21Bfb6MJfPuNAicLOkq4fYZm+J+mr0NmDPnvolQ==}
     dependencies:
       core-js: 3.36.1
-      element-plus: 2.6.1(vue@3.4.21)
+      element-plus: 2.6.2(vue@3.4.21)
       vue: 3.4.21(typescript@5.4.3)
     transitivePeerDependencies:
       - '@vue/composition-api'
       - typescript
     dev: false
 
-  /electron-to-chromium@1.4.714:
+  /electron-to-chromium@1.4.715:
-    resolution: {integrity: sha512-OfnVHt+nMRH9Ua5koH/2gKlCAXbG+u1yXwLKyBVqNboBV34ZTwb846RUe8K5mtE1uhz0BXoMarZ13JCQr+sBtQ==}
+    resolution: {integrity: sha512-XzWNH4ZSa9BwVUQSDorPWAUQ5WGuYz7zJUNpNif40zFCiCl20t8zgylmreNmn26h5kiyw2lg7RfTmeMBsDklqg==}
 
   /element-plus@2.1.4(@types/lodash-es@4.17.12)(vue@3.4.21):
     resolution: {integrity: sha512-pcwgDbKUrzyWbixYB/zIbLPLBQ/NPGPJnGXJ+jYozUSthPW4SuriaUGJKgbAE6PDBAtw3IodiT2E2GbiaZLxww==}
@@ -4481,8 +4481,8 @@ packages:
       - '@vue/composition-api'
     dev: false
 
-  /element-plus@2.6.1(vue@3.4.21):
+  /element-plus@2.6.2(vue@3.4.21):
-    resolution: {integrity: sha512-6VRpLjwtIVdtUuITJPPKtpOH1NM6nuAkRE3q5O4Lrx0N1bYMhTkiqb2Jy7zfQuDPbOIkkF2OABTzegpNnzgsnQ==}
+    resolution: {integrity: sha512-WFMv1v83l437Xu+GeeM+ytxd9VUQpR4418BowvTVIPYItsoj6yK0ITIuSv19iCesF405FbAOaCIHXhJch0ilFA==}
     peerDependencies:
       vue: ^3.2.0
     dependencies:
@@ -7187,14 +7187,14 @@ packages:
       mlly: 1.6.1
       pathe: 1.1.2
 
-  /plus-pro-components@0.0.5(element-plus@2.6.1)(vue@3.4.21):
+  /plus-pro-components@0.0.5(element-plus@2.6.2)(vue@3.4.21):
     resolution: {integrity: sha512-kNheJk3pVs/atgfpeTAlaLg5GFZXUXe0NkHbnPOyUu05znbh8clgS9eEeCNpAglPY1fcYaXpVNgqOJIJ72EOSQ==}
     peerDependencies:
       element-plus: ^2.3.4
       vue: ^3.2.0
     dependencies:
       '@element-plus/icons-vue': 2.3.1(vue@3.4.21)
-      element-plus: 2.6.1(vue@3.4.21)
+      element-plus: 2.6.2(vue@3.4.21)
       lodash-es: 4.17.21
       sortablejs: 1.15.2
       vue: 3.4.21(typescript@5.4.3)
@@ -9227,7 +9227,7 @@ packages:
       - rollup
     dev: true
 
-  /vite-plugin-compression@0.5.1(vite@5.2.2):
+  /vite-plugin-compression@0.5.1(vite@5.2.3):
     resolution: {integrity: sha512-5QJKBDc+gNYVqL/skgFAP81Yuzo9R+EAf19d+EtsMF/i8kFUpNi3J/H01QD3Oo8zBQn+NzoCIFkpPLynoOzaJg==}
     peerDependencies:
       vite: '>=2.0.0'
@@ -9235,7 +9235,7 @@ packages:
       chalk: 4.1.2
       debug: 4.3.4
       fs-extra: 10.1.0
-      vite: 5.2.2(@types/node@20.11.30)(sass@1.72.0)
+      vite: 5.2.3(@types/node@20.11.30)(sass@1.72.0)
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -9267,8 +9267,8 @@ packages:
       vue: 3.4.21(typescript@5.4.3)
     dev: true
 
-  /vite@5.2.2(@types/node@20.11.30)(sass@1.72.0):
+  /vite@5.2.3(@types/node@20.11.30)(sass@1.72.0):
-    resolution: {integrity: sha512-FWZbz0oSdLq5snUI0b6sULbz58iXFXdvkZfZWR/F0ZJuKTSPO7v72QPXt6KqYeMFb0yytNp6kZosxJ96Nr/wDQ==}
+    resolution: {integrity: sha512-+i1oagbvkVIhEy9TnEV+fgXsng13nZM90JQbrcPrf6DvW2mXARlz+DK7DLiDP+qeKoD1FCVx/1SpFL1CLq9Mhw==}
     engines: {node: ^18.0.0 || >=20.0.0}
     hasBin: true
     peerDependencies:

public/platform-config.json

@@ -1,5 +1,5 @@
 {
-  "Version": "5.1.0",
+  "Version": "5.2.0",
   "Title": "PureAdmin",
   "FixedHeader": true,
   "HiddenSideBar": false,

src/layout/components/setting/index.vue

@@ -387,7 +387,7 @@ onUnmounted(() => removeMatchMedia);
         </li>
       </ul>
 
-      <span v-if="device !== 'mobile'">
+      <span v-if="useAppStoreHook().getViewportWidth > 1280">
         <p :class="['mt-5', pClass]">页宽</p>
         <Segmented
           class="mb-2 select-none"
@@ -406,7 +406,7 @@ onUnmounted(() => removeMatchMedia);
         <button
           v-else
           v-ripple="{ class: 'text-gray-300' }"
-          class="bg-transparent flex-c w-full h-20 rounded-md border border-gray-100"
+          class="bg-transparent flex-c w-full h-20 rounded-md border border-[var(--pure-border-color)]"
           @click="setStretch(!settings.stretch)"
         >
           <div

src/layout/index.vue

@@ -89,7 +89,8 @@ let isAutoCloseSidebar = true;
 useResizeObserver(appWrapperRef, entries => {
   if (isMobile) return;
   const entry = entries[0];
-  const [{ inlineSize: width }] = entry.borderBoxSize;
+  const [{ inlineSize: width, blockSize: height }] = entry.borderBoxSize;
+  useAppStoreHook().setViewportSize({ width, height });
   width <= 760 ? setTheme("vertical") : setTheme(useAppStoreHook().layout);
   /** width app-wrapper类容器宽度
    * 0 < width <= 760 隐藏侧边栏

src/plugins/elementPlus.ts

@@ -10,6 +10,8 @@ import {
   ElAutocomplete,
   ElAutoResizer,
   ElAvatar,
+  ElAnchor,
+  ElAnchorLink,
   ElBacktop,
   ElBadge,
   ElBreadcrumb,
@@ -123,6 +125,8 @@ const components = [
   ElAutocomplete,
   ElAutoResizer,
   ElAvatar,
+  ElAnchor,
+  ElAnchorLink,
   ElBacktop,
   ElBadge,
   ElBreadcrumb,

src/store/modules/app.ts

@@ -21,6 +21,11 @@ export const useAppStore = defineStore({
         `${responsiveStorageNameSpace()}layout`
       )?.layout ?? getConfig().Layout,
     device: deviceDetection() ? "mobile" : "desktop",
+    // 浏览器窗口的可视区域大小
+    viewportSize: {
+      width: document.documentElement.clientWidth,
+      height: document.documentElement.clientHeight
+    },
     // 作用于 src/views/components/draggable/index.vue 页面，当离开页面并不会销毁 new Swap()，sortablejs 官网也没有提供任何销毁的 api
     sortSwap: false
   }),
@@ -30,6 +35,12 @@ export const useAppStore = defineStore({
     },
     getDevice(state) {
       return state.device;
+    },
+    getViewportWidth(state) {
+      return state.viewportSize.width;
+    },
+    getViewportHeight(state) {
+      return state.viewportSize.height;
     }
   },
   actions: {
@@ -62,6 +73,9 @@ export const useAppStore = defineStore({
     setLayout(layout) {
       this.layout = layout;
     },
+    setViewportSize(size) {
+      this.viewportSize = size;
+    },
     setSortSwap(val) {
       this.sortSwap = val;
     }

src/store/modules/types.ts

@@ -19,6 +19,7 @@ export type appType = {
   };
   layout: string;
   device: string;
+  viewportSize: { width: number; height: number };
   sortSwap: boolean;
 };
 

types/global-components.d.ts

@@ -21,6 +21,8 @@ declare module "vue" {
     ElAside: (typeof import("element-plus"))["ElAside"];
     ElAutocomplete: (typeof import("element-plus"))["ElAutocomplete"];
     ElAvatar: (typeof import("element-plus"))["ElAvatar"];
+    ElAnchor: (typeof import("element-plus"))["ElAnchor"];
+    ElAnchorLink: (typeof import("element-plus"))["ElAnchorLink"];
     ElBacktop: (typeof import("element-plus"))["ElBacktop"];
     ElBadge: (typeof import("element-plus"))["ElBadge"];
     ElBreadcrumb: (typeof import("element-plus"))["ElBreadcrumb"];