Merge branch 'main' into gitee

2025-06-06 16:37:18 +08:00 · 2024-03-23 08:24:55 +08:00 · 2024-03-23 08:24:55 +08:00 · 9a6124c97b
commit 9a6124c97b
parent 6764da7991 51ef3647fc
15 changed files with 182 additions and 50 deletions
--- a/CHANGELOG.en_US.md
+++ b/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
--- a/CHANGELOG.md
+++ b/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
--- a/CHANGELOG.zh_CN.md
+++ b/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
--- a/README.en-US.md
+++ b/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 Watch UI Design](https://www.bilibili.com/video/BV17g411T7rq)
+[Click me to view 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)  
-[View @pureadmin/utils documentation](https://pure-admin-utils.netlify.app)
+[Click me to view vue-pure-admin documentation](https://yiming_chang.gitee.io/pure-admin-doc)  
+[Click me to view @pureadmin/utils documentation](https://pure-admin-utils.netlify.app)

 ## Quality service, software outsourcing, sponsorship support

--- a/README.md
+++ b/README.md
@ -26,8 +26,9 @@

 ## 配套视频

+[点我查看 UI 设计](https://www.bilibili.com/video/BV17g411T7rq)  
 [点我查看快速开发教程](https://www.bilibili.com/video/BV1kg411v7QT)  
-[点我查看 UI 设计](https://www.bilibili.com/video/BV17g411T7rq)
+[点我查看 vue-pure-admin 的所有页面、功能演示](https://www.bilibili.com/video/BV1Rx4y1U7Mv)

 ## 配套保姆级文档

--- a/package.json
+++ b/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",
--- a/pnpm-lock.yaml
+++ b/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
-    version: 2.6.1(vue@3.4.21)
+    specifier: ^2.6.2
+    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
-    version: 5.2.2(@types/node@20.11.30)(sass@1.72.0)
+    specifier: ^5.2.3
+    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
-      electron-to-chromium: 1.4.714
+      caniuse-lite: 1.0.30001600
+      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:
-    resolution: {integrity: sha512-LRAQHZ4yT1+f9LemSMeqdMpMxZcc4RMWdj4tiFe3G8tNkWK+E58g+/tzotb5cU6TbcVJLr4fySiAW7XmxQvZQA==}
+  /caniuse-lite@1.0.30001600:
+    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:
-    resolution: {integrity: sha512-OfnVHt+nMRH9Ua5koH/2gKlCAXbG+u1yXwLKyBVqNboBV34ZTwb846RUe8K5mtE1uhz0BXoMarZ13JCQr+sBtQ==}
+  /electron-to-chromium@1.4.715:
+    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):
-    resolution: {integrity: sha512-6VRpLjwtIVdtUuITJPPKtpOH1NM6nuAkRE3q5O4Lrx0N1bYMhTkiqb2Jy7zfQuDPbOIkkF2OABTzegpNnzgsnQ==}
+  /element-plus@2.6.2(vue@3.4.21):
+    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):
-    resolution: {integrity: sha512-FWZbz0oSdLq5snUI0b6sULbz58iXFXdvkZfZWR/F0ZJuKTSPO7v72QPXt6KqYeMFb0yytNp6kZosxJ96Nr/wDQ==}
+  /vite@5.2.3(@types/node@20.11.30)(sass@1.72.0):
+    resolution: {integrity: sha512-+i1oagbvkVIhEy9TnEV+fgXsng13nZM90JQbrcPrf6DvW2mXARlz+DK7DLiDP+qeKoD1FCVx/1SpFL1CLq9Mhw==}
    engines: {node: ^18.0.0 || >=20.0.0}
    hasBin: true
    peerDependencies:
--- a/public/platform-config.json
+++ b/public/platform-config.json
@ -1,5 +1,5 @@
 {
-  "Version": "5.1.0",
+  "Version": "5.2.0",
  "Title": "PureAdmin",
  "FixedHeader": true,
  "HiddenSideBar": false,
--- a/public/sponsors/aitools.svg
+++ b/public/sponsors/aitools.svg
--- a/src/layout/components/setting/index.vue
+++ b/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
--- a/src/layout/index.vue
+++ b/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 隐藏侧边栏
--- a/src/plugins/elementPlus.ts
+++ b/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,
--- a/src/store/modules/app.ts
+++ b/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;
    }
--- a/src/store/modules/types.ts
+++ b/src/store/modules/types.ts
@ -19,6 +19,7 @@ export type appType = {
  };
  layout: string;
  device: string;
+  viewportSize: { width: number; height: number };
  sortSwap: boolean;
 };

--- a/types/global-components.d.ts
+++ b/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"];