release: update 5.8.0

chore: 升级依赖，element-plus最新版兼容处理
feat: 新增第二种按钮权限指令（根据登录接口返回的permissions字段进行判断） (#1177 )
2025-11-03 13:44:47 +08:00 · 2024-08-19 13:53:33 +08:00 · 2024-08-12 14:51:34 +08:00 · 2024-08-12 13:32:04 +08:00 · 2024-08-05 13:15:10 +08:00 · 2024-08-03 15:13:20 +08:00
71 changed files with 3227 additions and 2158 deletions
--- a/.nvmrc
+++ b/.nvmrc
@@ -1 +1 @@
-v20.13.1
+v20.15.0
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@@ -1,6 +1,7 @@
 {
  "recommendations": [
    "christian-kohler.path-intellisense",
+    "warmthsea.vscode-custom-code-color",
    "vscode-icons-team.vscode-icons",
    "davidanson.vscode-markdownlint",
    "ms-azuretools.vscode-docker",
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -31,11 +31,18 @@
  "i18n-ally.keystyle": "nested",
  "i18n-ally.sortKeys": true,
  "i18n-ally.namespace": true,
-  "i18n-ally.enabledParsers": ["yaml", "js"],
+  "i18n-ally.enabledParsers": [
+    "yaml",
+    "js"
+  ],
  "i18n-ally.sourceLanguage": "en",
  "i18n-ally.displayLanguage": "zh-CN",
-  "i18n-ally.enabledFrameworks": ["vue"],
-  "iconify.excludes": ["el"],
+  "i18n-ally.enabledFrameworks": [
+    "vue"
+  ],
+  "iconify.excludes": [
+    "el"
+  ],
  "vsmqtt.brokerProfiles": [
    {
      "name": "broker.emqx.io",
@@ -43,5 +50,15 @@
      "port": 1883,
      "clientId": "vsmqtt_client_db34"
    }
-  ]
-}
+  ],
+  "vscodeCustomCodeColor.highlightValue": [
+    "v-loading",
+    "v-auth",
+    "v-copy",
+    "v-longpress",
+    "v-optimize",
+    "v-perms",
+    "v-ripple"
+  ],
+  "vscodeCustomCodeColor.highlightValueColor": "#b392f0",
+}
--- a/CHANGELOG.en_US.md
+++ b/CHANGELOG.en_US.md
@@ -1,3 +1,38 @@
+# 5.8.0 (2024-08-19)
+
+### 🎫 Feat
+
+- Added a second button permission command (judged based on the `permissions` field returned by the login interface)
+- Functional pop-up box `ReDialog` adds whether to enable the `loading` loading animation function after clicking the confirmation button
+- `PureTableBar` component adds full screen and exit full screen functions
+- `VxeTableBar` component adds full screen and exit full screen functions
+- The OK button of the `ReDialog` component provides the close button animation `closeLoading` function
+- Add development environment code debugging `vite-plugin-vue-inspector` plug-in to improve development experience
+- Added `vite-plugin-checker` plugin for stricter type and `eslint` verification
+
+### 🐞 Bug fixes
+
+- Fixed the problem that the current tab cannot be closed after configuring the routing attribute `fixedTag` to `false`
+- Fixed the issue where `logo` cannot be hidden in top menu mode
+
+### 🍏 Perf
+
+- Optimize type hints for custom instructions
+- Optimize the press enter login function on the login page
+- Optimize the mask level of the left menu on the mobile side
+- Optimize system management-permission function style of role management
+- Upgraded dependencies, compatible with the latest version of `element-plus`
+
+# 5.7.0 (2024-06-04)
+
+### 🎫 Feat
+
+- Add Google style tabs
+
+### 🐞 Bug fixes
+
+- Fixed the issue where the text exceeds and is not hidden after the menu is folded in Firefox browser
+
 # 5.6.0 (2024-05-14)

 ### ✔️ Refactor
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,38 @@
+# 5.8.0 (2024-08-19)
+
+### 🎫 Feat
+
+- Added a second button permission command (judged based on the `permissions` field returned by the login interface)
+- Functional pop-up box `ReDialog` adds whether to enable the `loading` loading animation function after clicking the confirmation button
+- `PureTableBar` component adds full screen and exit full screen functions
+- `VxeTableBar` component adds full screen and exit full screen functions
+- The OK button of the `ReDialog` component provides the close button animation `closeLoading` function
+- Add development environment code debugging `vite-plugin-vue-inspector` plug-in to improve development experience
+- Added `vite-plugin-checker` plugin for stricter type and `eslint` verification
+
+### 🐞 Bug fixes
+
+- Fixed the problem that the current tab cannot be closed after configuring the routing attribute `fixedTag` to `false`
+- Fixed the issue where `logo` cannot be hidden in top menu mode
+
+### 🍏 Perf
+
+- Optimize type hints for custom instructions
+- Optimize the press enter login function on the login page
+- Optimize the mask level of the left menu on the mobile side
+- Optimize system management-permission function style of role management
+- Upgraded dependencies, compatible with the latest version of `element-plus`
+
+# 5.7.0 (2024-06-04)
+
+### 🎫 Feat
+
+- Add Google style tabs
+
+### 🐞 Bug fixes
+
+- Fixed the issue where the text exceeds and is not hidden after the menu is folded in Firefox browser
+
 # 5.6.0 (2024-05-14)

 ### ✔️ Refactor
--- a/CHANGELOG.zh_CN.md
+++ b/CHANGELOG.zh_CN.md
@@ -1,3 +1,38 @@
+# 5.8.0 (2024-08-19)
+
+### 🎫 Feat
+
+- 新增第二种按钮权限指令（根据登录接口返回的`permissions`字段进行判断）
+- 函数式弹框`ReDialog`添加点击确认按钮后是否开启`loading`加载动画功能
+- `PureTableBar`组件添加全屏和退出全屏功能
+- `VxeTableBar`组件添加全屏和退出全屏功能
+- `ReDialog`组件的确定按钮提供关闭按钮动画`closeLoading`功能
+- 添加开发环境代码调试`vite-plugin-vue-inspector`插件，提升开发体验
+- 添加`vite-plugin-checker`插件，更严格的类型和`eslint`校验
+
+### 🐞 Bug fixes
+
+- 修复配置路由属性`fixedTag`为`false`后当前标签页不可关闭的问题
+- 修复顶部菜单模式下`logo`不可隐藏的问题
+
+### 🍏 Perf
+
+- 优化自定义指令的类型提示
+- 优化登录页回车登录功能
+- 优化移动端左侧菜单遮罩层级
+- 优化系统管理-角色管理的权限功能样式
+- 升级依赖，`element-plus`最新版兼容处理
+
+# 5.7.0 (2024-06-04)
+
+### 🎫 Feat
+
+- 添加谷歌风格的页签
+
+### 🐞 Bug fixes
+
+- 修复在火狐浏览器中菜单折叠后，文字超出未隐藏的问题
+
 # 5.6.0 (2024-05-14)

 ### ✔️ Refactor
--- a/README.en-US.md
+++ b/README.en-US.md
@@ -10,11 +10,9 @@

 `vue-pure-admin` is an open source, free and out-of-the-box middle and backend management system template. Completely adopts `ECMAScript` module (`ESM`) specifications to write and organize code, using the latest `Vue3`, `Vite`, `Element-Plus`, `TypeScript`, `Pinia`, `Tailwindcss` and other mainstream technologies develop

-## Sponsors
+## R&D philosophy

-<a class="logo" href="https://ai-tools.cn/resume/start" target="_blank" rel="sponsored noopener">
-  <img src="./public/sponsors/aitools.svg" alt="aitools">
-</a>
+Seek innovation in stability and see the future in technology

 ## Thin version (offering non-internationalized and internationalized versions)

@@ -37,6 +35,14 @@ The simplified version is based on the shelf extracted from [vue-pure-admin](htt

 [Click me for details](https://pure-admin.github.io/pure-admin-doc/pages/service/)

+## `js` version
+
+[Click me to view js version](https://pure-admin.github.io/pure-admin-doc/pages/js/)
+
+## `max` version
+
+[Click me to view the max version](https://github.com/pure-admin/vue-pure-admin-max)
+
 ## Tauri

 [Click Watch Tauri](https://github.com/pure-admin/tauri-pure-admin)
@@ -184,6 +190,7 @@ Thank you very much for your in-depth understanding of the source code and your
 |      [WitMiao](https://github.com/WitMiao)      |   [code](https://github.com/pure-admin/vue-pure-admin/commits?author=WitMiao)    |
 |     [QFifteen](https://github.com/QFifteen)     |   [code](https://github.com/pure-admin/vue-pure-admin/commits?author=QFifteen)   |
 |      [edgexie](https://github.com/edgexie)      |   [code](https://github.com/pure-admin/vue-pure-admin/commits?author=edgexie)    |
+|       [way-jm](https://github.com/way-jm)       |    [code](https://github.com/pure-admin/vue-pure-admin/commits?author=way-jm)    |

 ## Git Contribution submission specification

--- a/README.md
+++ b/README.md
@@ -11,11 +11,9 @@
 `vue-pure-admin` 是一款开源免费且开箱即用的中后台管理系统模版。完全采用 `ECMAScript` 模块（`ESM`）规范来编写和组织代码，使用了最新的 `Vue3`、
 `Vite`、`Element-Plus`、`TypeScript`、`Pinia`、`Tailwindcss` 等主流技术开发

-## 赞助商
+## 研发理念

-<a class="logo" href="https://ai-tools.cn/resume/start" target="_blank" rel="sponsored noopener">
-  <img src="./public/sponsors/aitools.svg" alt="aitools">
-</a>
+稳定中求创新，技术中见未来

 ## 精简版本（实际项目开发请用精简版本，提供 `非国际化` 、`国际化` 两个版本选择）

@@ -38,6 +36,14 @@

 [点我查看详情](https://pure-admin.github.io/pure-admin-doc/pages/service/)

+## `js` 版本
+
+[点我查看 js 版本](https://pure-admin.github.io/pure-admin-doc/pages/js/)
+
+## `max` 版本
+
+[点我查看 max 版本](https://github.com/pure-admin/vue-pure-admin-max)
+
 ## `Tauri` 版本

 [点我查看 Tauri 版本](https://github.com/pure-admin/tauri-pure-admin)
@@ -185,6 +191,7 @@ docker run -dp 8080:80  --name pure-admin vue-pure-admin
 |      [WitMiao](https://github.com/WitMiao)      |   [代码](https://github.com/pure-admin/vue-pure-admin/commits?author=WitMiao)    |
 |     [QFifteen](https://github.com/QFifteen)     |   [代码](https://github.com/pure-admin/vue-pure-admin/commits?author=QFifteen)   |
 |      [edgexie](https://github.com/edgexie)      |   [代码](https://github.com/pure-admin/vue-pure-admin/commits?author=edgexie)    |
+|       [way-jm](https://github.com/way-jm)       |    [代码](https://github.com/pure-admin/vue-pure-admin/commits?author=way-jm)    |

 ## `Git` 贡献提交规范

--- a/build/plugins.ts
+++ b/build/plugins.ts
@@ -4,7 +4,9 @@ import { pathResolve } from "./utils";
 import { viteBuildInfo } from "./info";
 import svgLoader from "vite-svg-loader";
 import type { PluginOption } from "vite";
+import checker from "vite-plugin-checker";
 import vueJsx from "@vitejs/plugin-vue-jsx";
+import Inspector from "vite-plugin-vue-inspector";
 import { configCompressPlugin } from "./compress";
 import removeNoMatch from "vite-plugin-router-warn";
 import { visualizer } from "rollup-plugin-visualizer";
@@ -27,6 +29,18 @@ export function getPluginsList(
      jitCompilation: false,
      include: [pathResolve("../locales/**")]
    }),
+    checker({
+      typescript: true,
+      vueTsc: true,
+      eslint: {
+        lintCommand: `eslint ${pathResolve("../{src,mock,build}/**/*.{vue,js,ts,tsx}")}`,
+        useFlatConfig: true
+      },
+      terminal: false,
+      enableBuild: false
+    }),
+    // 按下Command(⌘)+Shift(⇧)，然后点击页面元素会自动打开本地IDE并跳转到对应的代码位置
+    Inspector(),
    viteBuildInfo(),
    /**
     * 开发环境下移除非必要的vue-router动态路由警告No match found for location with path
--- a/locales/en.yaml
+++ b/locales/en.yaml
@@ -53,6 +53,8 @@ panel:
  pureTagsStyleSmartTip: Smart tags add fun and brilliance
  pureTagsStyleCard: Card
  pureTagsStyleCardTip: Card tags for efficient browsing
+  pureTagsStyleChrome: Chrome
+  pureTagsStyleChromeTip: Chrome style is classic and elegant
  pureInterfaceDisplay: Interface Display
  pureGreyModel: Grey Model
  pureWeakModel: Weak Model
@@ -123,6 +125,8 @@ menus:
  purePermission: Permission Manage
  purePermissionPage: Page Permission
  purePermissionButton: Button Permission
+  purePermissionButtonRouter: Route return button permission
+  purePermissionButtonLogin: Login interface return button permission
  pureTabs: Tabs Operate
  pureGuide: Guide
  pureAble: Able
--- a/locales/zh-CN.yaml
+++ b/locales/zh-CN.yaml
@@ -53,6 +53,8 @@ panel:
  pureTagsStyleSmartTip: 灵动标签，添趣生辉
  pureTagsStyleCard: 卡片
  pureTagsStyleCardTip: 卡片标签，高效浏览
+  pureTagsStyleChrome: 谷歌
+  pureTagsStyleChromeTip: 谷歌风格，经典美观
  pureInterfaceDisplay: 界面显示
  pureGreyModel: 灰色模式
  pureWeakModel: 色弱模式
@@ -119,10 +121,12 @@ menus:
  pureMenu1-2-1: 菜单1-2-1
  pureMenu1-2-2: 菜单1-2-2
  pureMenu1-3: 菜单1-3
-  pureMenu2: 菜单2
+  pureMenu2: 菜单二
  purePermission: 权限管理
  purePermissionPage: 页面权限
  purePermissionButton: 按钮权限
+  purePermissionButtonRouter: 路由返回按钮权限
+  purePermissionButtonLogin: 登录接口返回按钮权限
  pureTabs: 标签页操作
  pureGuide: 引导页
  pureAble: 功能
--- a/mock/asyncRoutes.ts
+++ b/mock/asyncRoutes.ts
@@ -123,17 +123,34 @@ const permissionRouter = {
      }
    },
    {
-      path: "/permission/button/index",
-      name: "PermissionButton",
+      path: "/permission/button",
      meta: {
        title: "menus.purePermissionButton",
-        roles: ["admin", "common"],
-        auths: [
-          "permission:btn:add",
-          "permission:btn:edit",
-          "permission:btn:delete"
-        ]
-      }
+        roles: ["admin", "common"]
+      },
+      children: [
+        {
+          path: "/permission/button/router",
+          component: "permission/button/index",
+          name: "PermissionButtonRouter",
+          meta: {
+            title: "menus.purePermissionButtonRouter",
+            auths: [
+              "permission:btn:add",
+              "permission:btn:edit",
+              "permission:btn:delete"
+            ]
+          }
+        },
+        {
+          path: "/permission/button/login",
+          component: "permission/button/perms",
+          name: "PermissionButtonLogin",
+          meta: {
+            title: "menus.purePermissionButtonLogin"
+          }
+        }
+      ]
    }
  ]
 };
--- a/mock/login.ts
+++ b/mock/login.ts
@@ -15,6 +15,8 @@ export default defineFakeRoute([
            nickname: "小铭",
            // 一个用户可能有多个角色
            roles: ["admin"],
+            // 按钮级别权限
+            permissions: ["*:*:*"],
            accessToken: "eyJhbGciOiJIUzUxMiJ9.admin",
            refreshToken: "eyJhbGciOiJIUzUxMiJ9.adminRefresh",
            expires: "2030/10/30 00:00:00"
@@ -28,6 +30,7 @@ export default defineFakeRoute([
            username: "common",
            nickname: "小林",
            roles: ["common"],
+            permissions: ["permission:btn:add", "permission:btn:edit"],
            accessToken: "eyJhbGciOiJIUzUxMiJ9.common",
            refreshToken: "eyJhbGciOiJIUzUxMiJ9.commonRefresh",
            expires: "2030/10/30 00:00:00"
--- a/mock/system.ts
+++ b/mock/system.ts
@@ -696,7 +696,7 @@ export default defineFakeRoute([
            menuType: 0,
            title: "menus.purePermissionButton",
            name: "PermissionButton",
-            path: "/permission/button/index",
+            path: "/permission/button",
            component: "",
            rank: null,
            redirect: "",
@@ -717,6 +717,30 @@ export default defineFakeRoute([
          {
            parentId: 202,
            id: 203,
+            menuType: 0,
+            title: "menus.purePermissionButtonRouter",
+            name: "PermissionButtonRouter",
+            path: "/permission/button/router",
+            component: "permission/button/index",
+            rank: null,
+            redirect: "",
+            icon: "",
+            extraIcon: "",
+            enterTransition: "",
+            leaveTransition: "",
+            activePath: "",
+            auths: "",
+            frameSrc: "",
+            frameLoading: true,
+            keepAlive: false,
+            hiddenTag: false,
+            fixedTag: false,
+            showLink: true,
+            showParent: false
+          },
+          {
+            parentId: 203,
+            id: 210,
            menuType: 3,
            title: "添加",
            name: "",
@@ -739,8 +763,8 @@ export default defineFakeRoute([
            showParent: false
          },
          {
-            parentId: 202,
-            id: 204,
+            parentId: 203,
+            id: 211,
            menuType: 3,
            title: "修改",
            name: "",
@@ -762,9 +786,105 @@ export default defineFakeRoute([
            showLink: true,
            showParent: false
          },
+          {
+            parentId: 203,
+            id: 212,
+            menuType: 3,
+            title: "删除",
+            name: "",
+            path: "",
+            component: "",
+            rank: null,
+            redirect: "",
+            icon: "",
+            extraIcon: "",
+            enterTransition: "",
+            leaveTransition: "",
+            activePath: "",
+            auths: "permission:btn:delete",
+            frameSrc: "",
+            frameLoading: true,
+            keepAlive: false,
+            hiddenTag: false,
+            fixedTag: false,
+            showLink: true,
+            showParent: false
+          },
          {
            parentId: 202,
-            id: 205,
+            id: 204,
+            menuType: 0,
+            title: "menus.purePermissionButtonLogin",
+            name: "PermissionButtonLogin",
+            path: "/permission/button/login",
+            component: "permission/button/perms",
+            rank: null,
+            redirect: "",
+            icon: "",
+            extraIcon: "",
+            enterTransition: "",
+            leaveTransition: "",
+            activePath: "",
+            auths: "",
+            frameSrc: "",
+            frameLoading: true,
+            keepAlive: false,
+            hiddenTag: false,
+            fixedTag: false,
+            showLink: true,
+            showParent: false
+          },
+          {
+            parentId: 204,
+            id: 220,
+            menuType: 3,
+            title: "添加",
+            name: "",
+            path: "",
+            component: "",
+            rank: null,
+            redirect: "",
+            icon: "",
+            extraIcon: "",
+            enterTransition: "",
+            leaveTransition: "",
+            activePath: "",
+            auths: "permission:btn:add",
+            frameSrc: "",
+            frameLoading: true,
+            keepAlive: false,
+            hiddenTag: false,
+            fixedTag: false,
+            showLink: true,
+            showParent: false
+          },
+          {
+            parentId: 204,
+            id: 221,
+            menuType: 3,
+            title: "修改",
+            name: "",
+            path: "",
+            component: "",
+            rank: null,
+            redirect: "",
+            icon: "",
+            extraIcon: "",
+            enterTransition: "",
+            leaveTransition: "",
+            activePath: "",
+            auths: "permission:btn:edit",
+            frameSrc: "",
+            frameLoading: true,
+            keepAlive: false,
+            hiddenTag: false,
+            fixedTag: false,
+            showLink: true,
+            showParent: false
+          },
+          {
+            parentId: 204,
+            id: 222,
            menuType: 3,
            title: "删除",
            name: "",
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "vue-pure-admin",
-  "version": "5.6.0",
+  "version": "5.8.0",
  "private": true,
  "type": "module",
  "scripts": {
@@ -50,26 +50,26 @@
    "@amap/amap-jsapi-loader": "^1.0.1",
    "@howdyjs/mouse-menu": "^2.1.3",
    "@infectoone/vue-ganttastic": "^2.3.2",
-    "@logicflow/core": "^1.2.27",
-    "@logicflow/extension": "^1.2.27",
+    "@logicflow/core": "^1.2.28",
+    "@logicflow/extension": "^1.2.28",
    "@pureadmin/descriptions": "^1.2.1",
-    "@pureadmin/table": "^3.1.2",
-    "@pureadmin/utils": "^2.4.7",
+    "@pureadmin/table": "^3.2.0",
+    "@pureadmin/utils": "^2.4.8",
    "@vue-flow/background": "^1.3.0",
-    "@vue-flow/core": "^1.33.7",
-    "@vueuse/core": "^10.9.0",
-    "@vueuse/motion": "^2.1.0",
+    "@vue-flow/core": "^1.39.3",
+    "@vueuse/core": "^10.11.1",
+    "@vueuse/motion": "^2.2.3",
    "@wangeditor/editor": "^5.1.23",
    "@wangeditor/editor-for-vue": "^5.1.12",
    "@zxcvbn-ts/core": "^3.0.4",
    "animate.css": "^4.1.1",
-    "axios": "^1.6.8",
+    "axios": "^1.7.3",
    "china-area-data": "^5.0.1",
    "cropperjs": "^1.6.2",
-    "dayjs": "^1.11.11",
-    "echarts": "^5.5.0",
-    "el-table-infinite-scroll": "^3.0.3",
-    "element-plus": "^2.7.3",
+    "dayjs": "^1.11.12",
+    "echarts": "^5.5.1",
+    "el-table-infinite-scroll": "^3.0.6",
+    "element-plus": "^2.8.0",
    "intro.js": "^7.2.0",
    "js-cookie": "^3.0.5",
    "jsbarcode": "^3.11.6",
@@ -79,40 +79,40 @@
    "mqtt": "4.3.7",
    "nprogress": "^0.2.0",
    "path": "^0.12.7",
-    "pinia": "^2.1.7",
-    "pinyin-pro": "^3.20.4",
-    "plus-pro-components": "^0.1.3",
-    "qrcode": "^1.5.3",
-    "qs": "^6.12.1",
+    "pinia": "^2.2.1",
+    "pinyin-pro": "^3.24.2",
+    "plus-pro-components": "^0.1.14",
+    "qrcode": "^1.5.4",
+    "qs": "^6.13.0",
    "responsive-storage": "^2.2.0",
    "sortablejs": "^1.15.2",
-    "swiper": "^11.1.2",
-    "typeit": "^8.8.3",
+    "swiper": "^11.1.9",
+    "typeit": "^8.8.4",
    "v-contextmenu": "^3.2.0",
    "v3-infinite-loading": "^1.3.1",
-    "version-rocket": "^1.7.1",
-    "vue": "^3.4.27",
+    "version-rocket": "^1.7.2",
+    "vue": "^3.4.37",
    "vue-i18n": "^9.13.1",
    "vue-json-pretty": "^2.4.0",
-    "vue-pdf-embed": "^2.0.3",
-    "vue-router": "^4.3.2",
-    "vue-tippy": "^6.4.1",
-    "vue-types": "^5.1.2",
+    "vue-pdf-embed": "^2.1.0",
+    "vue-router": "^4.4.3",
+    "vue-tippy": "^6.4.4",
+    "vue-types": "^5.1.3",
    "vue-virtual-scroller": "2.0.0-beta.8",
    "vue-waterfall-plugin-next": "^2.4.3",
-    "vue3-danmaku": "^1.6.0",
+    "vue3-danmaku": "^1.6.1",
    "vue3-puzzle-vcode": "^1.1.7",
    "vuedraggable": "^4.1.0",
-    "vxe-table": "^4.6.12",
-    "wavesurfer.js": "^7.7.14",
-    "xgplayer": "^3.0.17",
+    "vxe-table": "4.6.17",
+    "wavesurfer.js": "^7.8.3",
+    "xgplayer": "^3.0.19",
    "xlsx": "^0.18.5"
  },
  "devDependencies": {
-    "@commitlint/cli": "^19.3.0",
+    "@commitlint/cli": "^19.4.0",
    "@commitlint/config-conventional": "^19.2.2",
    "@commitlint/types": "^19.0.3",
-    "@eslint/js": "^9.2.0",
+    "@eslint/js": "^9.9.0",
    "@faker-js/faker": "^8.4.1",
    "@iconify-icons/ep": "^1.2.12",
    "@iconify-icons/ri": "^1.2.10",
@@ -123,52 +123,54 @@
    "@types/gradient-string": "^1.1.6",
    "@types/intro.js": "^5.1.5",
    "@types/js-cookie": "^3.0.6",
-    "@types/node": "^20.12.11",
+    "@types/node": "^20.14.15",
    "@types/nprogress": "^0.2.3",
    "@types/qrcode": "^1.5.5",
    "@types/qs": "^6.9.15",
    "@types/sortablejs": "^1.15.8",
-    "@typescript-eslint/eslint-plugin": "^7.9.0",
-    "@typescript-eslint/parser": "^7.9.0",
-    "@vitejs/plugin-vue": "^5.0.4",
-    "@vitejs/plugin-vue-jsx": "^3.1.0",
-    "autoprefixer": "^10.4.19",
+    "@typescript-eslint/eslint-plugin": "^7.18.0",
+    "@typescript-eslint/parser": "^7.18.0",
+    "@vitejs/plugin-vue": "^5.1.2",
+    "@vitejs/plugin-vue-jsx": "^4.0.0",
+    "autoprefixer": "^10.4.20",
    "boxen": "^7.1.1",
-    "cssnano": "^7.0.1",
+    "cssnano": "^7.0.5",
    "dagre": "^0.8.5",
-    "eslint": "^9.2.0",
+    "eslint": "^9.9.0",
    "eslint-config-prettier": "^9.1.0",
    "eslint-define-config": "^2.1.0",
-    "eslint-plugin-prettier": "^5.1.3",
-    "eslint-plugin-vue": "^9.26.0",
+    "eslint-plugin-prettier": "^5.2.1",
+    "eslint-plugin-vue": "^9.27.0",
    "gradient-string": "^2.0.2",
-    "husky": "^9.0.11",
-    "lint-staged": "^15.2.2",
-    "postcss": "^8.4.38",
+    "husky": "^9.1.4",
+    "lint-staged": "^15.2.8",
+    "postcss": "^8.4.41",
    "postcss-html": "^1.7.0",
    "postcss-import": "^16.1.0",
    "postcss-scss": "^4.0.9",
-    "prettier": "^3.2.5",
-    "rimraf": "^5.0.7",
+    "prettier": "^3.3.3",
+    "rimraf": "^5.0.10",
    "rollup-plugin-visualizer": "^5.12.0",
-    "sass": "^1.77.1",
-    "stylelint": "^16.5.0",
+    "sass": "^1.77.8",
+    "stylelint": "^16.8.1",
    "stylelint-config-recess-order": "^5.0.1",
    "stylelint-config-recommended-vue": "^1.5.0",
    "stylelint-config-standard-scss": "^13.1.0",
-    "stylelint-prettier": "^5.0.0",
+    "stylelint-prettier": "^5.0.2",
    "svgo": "^3.3.2",
-    "tailwindcss": "^3.4.3",
-    "typescript": "^5.4.5",
-    "vite": "^5.2.11",
+    "tailwindcss": "^3.4.9",
+    "typescript": "^5.5.4",
+    "vite": "^5.4.0",
    "vite-plugin-cdn-import": "^1.0.1",
+    "vite-plugin-checker": "^0.7.2",
    "vite-plugin-compression": "^0.5.1",
    "vite-plugin-fake-server": "^2.1.1",
    "vite-plugin-remove-console": "^2.2.0",
    "vite-plugin-router-warn": "^1.0.0",
+    "vite-plugin-vue-inspector": "^5.1.3",
    "vite-svg-loader": "^5.1.0",
-    "vue-eslint-parser": "^9.4.2",
-    "vue-tsc": "^1.8.27"
+    "vue-eslint-parser": "^9.4.3",
+    "vue-tsc": "^2.0.29"
  },
  "engines": {
    "node": "^18.18.0 || ^20.9.0 || >=21.1.0",
@@ -176,11 +178,17 @@
  },
  "pnpm": {
    "allowedDeprecatedVersions": {
+      "are-we-there-yet": "*",
      "sourcemap-codec": "*",
      "domexception": "*",
      "w3c-hr-time": "*",
+      "inflight": "*",
+      "npmlog": "*",
+      "rimraf": "*",
      "stable": "*",
-      "abab": "*"
+      "gauge": "*",
+      "abab": "*",
+      "glob": "*"
    },
    "peerDependencyRules": {
      "allowedVersions": {
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/public/platform-config.json
+++ b/public/platform-config.json
@@ -1,5 +1,5 @@
 {
-  "Version": "5.6.0",
+  "Version": "5.8.0",
  "Title": "PureAdmin",
  "FixedHeader": true,
  "HiddenSideBar": false,
--- a/public/sponsors/aitools.svg
+++ b/public/sponsors/aitools.svg
--- a/src/api/user.ts
+++ b/src/api/user.ts
@@ -11,6 +11,8 @@ export type UserResult = {
    nickname: string;
    /** 当前登录用户的角色 */
    roles: Array<string>;
+    /** 按钮级别权限 */
+    permissions: Array<string>;
    /** `token` */
    accessToken: string;
    /** 用于调用刷新`accessToken`的接口时所需的`token` */
--- a/src/components/ReDialog/index.vue
+++ b/src/components/ReDialog/index.vue
@@ -15,6 +15,7 @@ defineOptions({
  name: "ReDialog"
 });

+const sureBtnMap = ref({});
 const fullscreen = ref(false);

 const footerButtons = computed(() => {
@@ -43,10 +44,26 @@ const footerButtons = computed(() => {
            bg: true,
            popconfirm: options?.popconfirm,
            btnClick: ({ dialog: { options, index } }) => {
-              const done = () =>
+              if (options?.sureBtnLoading) {
+                sureBtnMap.value[index] = Object.assign(
+                  {},
+                  sureBtnMap.value[index],
+                  {
+                    loading: true
+                  }
+                );
+              }
+              const closeLoading = () => {
+                if (options?.sureBtnLoading) {
+                  sureBtnMap.value[index].loading = false;
+                }
+              };
+              const done = () => {
+                closeLoading();
                closeDialog(options, index, { command: "sure" });
+              };
              if (options?.beforeSure && isFunction(options?.beforeSure)) {
-                options.beforeSure(done, { options, index });
+                options.beforeSure(done, { options, index, closeLoading });
              } else {
                done();
              }
@@ -172,6 +189,7 @@ function handleClose(
          <el-button
            v-else
            v-bind="btn"
+            :loading="key === 1 && sureBtnMap[index]?.loading"
            @click="
              btn.btnClick({
                dialog: { options, index },
--- a/src/components/ReDialog/type.ts
+++ b/src/components/ReDialog/type.ts
@@ -69,11 +69,11 @@ type DialogProps = {
 type Popconfirm = {
  /** 标题 */
  title?: string;
-  /** 确认按钮文字 */
+  /** 确定按钮文字 */
  confirmButtonText?: string;
  /** 取消按钮文字 */
  cancelButtonText?: string;
-  /** 确认按钮类型，默认 `primary` */
+  /** 确定按钮类型，默认 `primary` */
  confirmButtonType?: ButtonType;
  /** 取消按钮类型，默认 `text` */
  cancelButtonType?: ButtonType;
@@ -121,7 +121,7 @@ type ButtonProps = {
  round?: boolean;
  /** 是否为圆形按钮，默认 `false` */
  circle?: boolean;
-  /** 确认按钮的 `Popconfirm` 气泡确认框相关配置 */
+  /** 确定按钮的 `Popconfirm` 气泡确认框相关配置 */
  popconfirm?: Popconfirm;
  /** 是否为加载中状态，默认 `false` */
  loading?: boolean;
@@ -160,8 +160,10 @@ interface DialogOptions extends DialogProps {
  props?: any;
  /** 是否隐藏 `Dialog` 按钮操作区的内容 */
  hideFooter?: boolean;
-  /** 确认按钮的 `Popconfirm` 气泡确认框相关配置 */
+  /** 确定按钮的 `Popconfirm` 气泡确认框相关配置 */
  popconfirm?: Popconfirm;
+  /** 点击确定按钮后是否开启 `loading` 加载动画 */
+  sureBtnLoading?: boolean;
  /**
   * @description 自定义对话框标题的内容渲染器
   * @see {@link https://element-plus.org/zh-CN/component/dialog.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E5%A4%B4%E9%83%A8}
@@ -259,10 +261,13 @@ interface DialogOptions extends DialogProps {
    done: Function,
    {
      options,
-      index
+      index,
+      closeLoading
    }: {
      options: DialogOptions;
      index: number;
+      /** 关闭确定按钮的 `loading` 加载动画 */
+      closeLoading: Function;
    }
  ) => void;
 }
--- a/src/components/ReIcon/src/Select.vue
+++ b/src/components/ReIcon/src/Select.vue
@@ -194,7 +194,7 @@ watch(
              :pager-count="5"
              layout="pager"
              background
-              small
+              size="small"
              @current-change="onCurrentChange"
            />
            <el-button
--- a/src/components/RePerms/index.ts
+++ b/src/components/RePerms/index.ts
@@ -0,0 +1,5 @@
+import perms from "./src/perms";
+
+const Perms = perms;
+
+export { Perms };
--- a/src/components/RePerms/src/perms.tsx
+++ b/src/components/RePerms/src/perms.tsx
@@ -0,0 +1,20 @@
+import { defineComponent, Fragment } from "vue";
+import { hasPerms } from "@/utils/auth";
+
+export default defineComponent({
+  name: "Perms",
+  props: {
+    value: {
+      type: undefined,
+      default: []
+    }
+  },
+  setup(props, { slots }) {
+    return () => {
+      if (!slots) return null;
+      return hasPerms(props.value) ? (
+        <Fragment>{slots.default?.()}</Fragment>
+      ) : null;
+    };
+  }
+});
--- a/src/components/RePureTableBar/src/bar.tsx
+++ b/src/components/RePureTableBar/src/bar.tsx
@@ -18,6 +18,8 @@ import {
  getKeyList
 } from "@pureadmin/utils";

+import Fullscreen from "@iconify-icons/ri/fullscreen-fill";
+import ExitFullscreen from "@iconify-icons/ri/fullscreen-exit-fill";
 import DragIcon from "@/assets/table-bar/drag.svg?component";
 import ExpandIcon from "@/assets/table-bar/expand.svg?component";
 import RefreshIcon from "@/assets/table-bar/refresh.svg?component";
@@ -57,6 +59,7 @@ export default defineComponent({
    const size = ref("default");
    const loading = ref(false);
    const checkAll = ref(true);
+    const isFullscreen = ref(false);
    const isIndeterminate = ref(false);
    const instance = getCurrentInstance()!;
    const isExpandAll = ref(props.isExpandAll);
@@ -244,7 +247,18 @@ export default defineComponent({

    return () => (
      <>
-        <div {...attrs} class="w-[99/100] mt-2 px-2 pb-2 bg-bg_color">
+        <div
+          {...attrs}
+          class={[
+            "w-[99/100]",
+            "px-2",
+            "pb-2",
+            "bg-bg_color",
+            isFullscreen.value
+              ? ["!w-full", "!h-full", "z-[2002]", "fixed", "inset-0"]
+              : "mt-2"
+          ]}
+        >
          <div class="flex justify-between w-full h-[60px] p-4">
            {slots?.title ? (
              slots.title()
@@ -358,6 +372,14 @@ export default defineComponent({
                  </el-scrollbar>
                </div>
              </el-popover>
+              <el-divider direction="vertical" />
+
+              <iconifyIconOffline
+                class={["w-[16px]", iconClass.value]}
+                icon={isFullscreen.value ? ExitFullscreen : Fullscreen}
+                v-tippy={isFullscreen.value ? "退出全屏" : "全屏"}
+                onClick={() => (isFullscreen.value = !isFullscreen.value)}
+              />
            </div>
          </div>
          {slots.default({
--- a/src/components/ReVxeTableBar/src/bar.tsx
+++ b/src/components/ReVxeTableBar/src/bar.tsx
@@ -12,6 +12,8 @@ import {
  getCurrentInstance
 } from "vue";

+import Fullscreen from "@iconify-icons/ri/fullscreen-fill";
+import ExitFullscreen from "@iconify-icons/ri/fullscreen-exit-fill";
 import DragIcon from "@/assets/table-bar/drag.svg?component";
 import ExpandIcon from "@/assets/table-bar/expand.svg?component";
 import RefreshIcon from "@/assets/table-bar/refresh.svg?component";
@@ -55,6 +57,7 @@ export default defineComponent({
    const size = ref("small");
    const loading = ref(false);
    const checkAll = ref(true);
+    const isFullscreen = ref(false);
    const isIndeterminate = ref(false);
    const instance = getCurrentInstance()!;
    const isExpandAll = ref(props.isExpandAll);
@@ -237,7 +240,18 @@ export default defineComponent({

    return () => (
      <>
-        <div {...attrs} class="w-[99/100] mt-2 px-2 pb-2 bg-bg_color">
+        <div
+          {...attrs}
+          class={[
+            "w-[99/100]",
+            "px-2",
+            "pb-2",
+            "bg-bg_color",
+            isFullscreen.value
+              ? ["!w-full", "!h-full", "z-[2002]", "fixed", "inset-0"]
+              : "mt-2"
+          ]}
+        >
          <div class="flex justify-between w-full h-[60px] p-4">
            {slots?.title ? (
              slots.title()
@@ -349,6 +363,14 @@ export default defineComponent({
                  </el-scrollbar>
                </div>
              </el-popover>
+              <el-divider direction="vertical" />
+
+              <iconifyIconOffline
+                class={["w-[16px]", iconClass.value]}
+                icon={isFullscreen.value ? ExitFullscreen : Fullscreen}
+                v-tippy={isFullscreen.value ? "退出全屏" : "全屏"}
+                onClick={() => (isFullscreen.value = !isFullscreen.value)}
+              />
            </div>
          </div>
          {slots.default({
--- a/src/directives/auth/index.ts
+++ b/src/directives/auth/index.ts
@@ -2,7 +2,7 @@ import { hasAuth } from "@/router/utils";
 import type { Directive, DirectiveBinding } from "vue";

 export const auth: Directive = {
-  mounted(el: HTMLElement, binding: DirectiveBinding) {
+  mounted(el: HTMLElement, binding: DirectiveBinding<string | Array<string>>) {
    const { value } = binding;
    if (value) {
      !hasAuth(value) && el.parentNode?.removeChild(el);
--- a/src/directives/copy/index.ts
+++ b/src/directives/copy/index.ts
@@ -3,13 +3,13 @@ import { useEventListener } from "@vueuse/core";
 import { copyTextToClipboard } from "@pureadmin/utils";
 import type { Directive, DirectiveBinding } from "vue";

-interface CopyEl extends HTMLElement {
+export interface CopyEl extends HTMLElement {
  copyValue: string;
 }

 /** 文本复制指令（默认双击复制） */
 export const copy: Directive = {
-  mounted(el: CopyEl, binding: DirectiveBinding) {
+  mounted(el: CopyEl, binding: DirectiveBinding<string>) {
    const { value } = binding;
    if (value) {
      el.copyValue = value;
--- a/src/directives/index.ts
+++ b/src/directives/index.ts
@@ -2,4 +2,5 @@ export * from "./auth";
 export * from "./copy";
 export * from "./longpress";
 export * from "./optimize";
+export * from "./perms";
 export * from "./ripple";
--- a/src/directives/longpress/index.ts
+++ b/src/directives/longpress/index.ts
@@ -3,7 +3,7 @@ import type { Directive, DirectiveBinding } from "vue";
 import { subBefore, subAfter, isFunction } from "@pureadmin/utils";

 export const longpress: Directive = {
-  mounted(el: HTMLElement, binding: DirectiveBinding) {
+  mounted(el: HTMLElement, binding: DirectiveBinding<Function>) {
    const cb = binding.value;
    if (cb && isFunction(cb)) {
      let timer = null;
--- a/src/directives/optimize/index.ts
+++ b/src/directives/optimize/index.ts
@@ -8,9 +8,22 @@ import {
 import { useEventListener } from "@vueuse/core";
 import type { Directive, DirectiveBinding } from "vue";

+export interface OptimizeOptions {
+  /** 事件名 */
+  event: string;
+  /** 事件触发的方法 */
+  fn: (...params: any) => any;
+  /** 是否立即执行 */
+  immediate?: boolean;
+  /** 防抖或节流的延迟时间（防抖默认：`200`毫秒、节流默认：`1000`毫秒） */
+  timeout?: number;
+  /** 传递的参数 */
+  params?: any;
+}
+
 /** 防抖（v-optimize或v-optimize:debounce）、节流（v-optimize:throttle）指令 */
 export const optimize: Directive = {
-  mounted(el: HTMLElement, binding: DirectiveBinding) {
+  mounted(el: HTMLElement, binding: DirectiveBinding<OptimizeOptions>) {
    const { value } = binding;
    const optimizeType = binding.arg ?? "debounce";
    const type = ["debounce", "throttle"].find(t => t === optimizeType);
--- a/src/directives/perms/index.ts
+++ b/src/directives/perms/index.ts
@@ -0,0 +1,15 @@
+import { hasPerms } from "@/utils/auth";
+import type { Directive, DirectiveBinding } from "vue";
+
+export const perms: Directive = {
+  mounted(el: HTMLElement, binding: DirectiveBinding<string | Array<string>>) {
+    const { value } = binding;
+    if (value) {
+      !hasPerms(value) && el.parentNode?.removeChild(el);
+    } else {
+      throw new Error(
+        "[Directive: perms]: need perms! Like v-perms=\"['btn.add','btn.edit']\""
+      );
+    }
+  }
+};
--- a/src/directives/ripple/index.ts
+++ b/src/directives/ripple/index.ts
@@ -2,8 +2,10 @@ import "./index.scss";
 import { isObject } from "@pureadmin/utils";
 import type { Directive, DirectiveBinding } from "vue";

-interface RippleOptions {
+export interface RippleOptions {
+  /** 自定义`ripple`颜色，支持`tailwindcss` */
  class?: string;
+  /** 是否从中心扩散 */
  center?: boolean;
  circle?: boolean;
 }
@@ -220,13 +222,6 @@ function updated(el: HTMLElement, binding: RippleDirectiveBinding) {
  updateRipple(el, binding, wasEnabled);
 }

-/**
- * @description 指令 v-ripple
- * @use 用法如下
- * 1. v-ripple 代表启用基本的 ripple 功能
- * 2. v-ripple="{ class: 'text-red' }" 代表自定义 ripple 颜色，支持 tailwindcss，生效样式是 color
- * 3. v-ripple.center 代表从中心扩散
- */
 export const Ripple: Directive = {
  mounted,
  unmounted,
--- a/src/layout/components/lay-content/index.vue
+++ b/src/layout/components/lay-content/index.vue
@@ -2,6 +2,7 @@
 import { useI18n } from "vue-i18n";
 import LayFrame from "../lay-frame/index.vue";
 import LayFooter from "../lay-footer/index.vue";
+import { useTags } from "@/layout/hooks/useTag";
 import { useGlobal, isNumber } from "@pureadmin/utils";
 import BackTopIcon from "@/assets/svg/back_top.svg?component";
 import { h, computed, Transition, defineComponent } from "vue";
@@ -12,6 +13,7 @@ const props = defineProps({
 });

 const { t } = useI18n();
+const { showModel } = useTags();
 const { $storage, $config } = useGlobal<GlobalPropertiesApi>();

 const isKeepAlive = computed(() => {
@@ -51,9 +53,17 @@ const getMainWidth = computed(() => {
 const getSectionStyle = computed(() => {
  return [
    hideTabs.value && layout ? "padding-top: 48px;" : "",
-    !hideTabs.value && layout ? "padding-top: 81px;" : "",
+    !hideTabs.value && layout
+      ? showModel.value == "chrome"
+        ? "padding-top: 85px;"
+        : "padding-top: 81px;"
+      : "",
    hideTabs.value && !layout.value ? "padding-top: 48px;" : "",
-    !hideTabs.value && !layout.value ? "padding-top: 81px;" : "",
+    !hideTabs.value && !layout.value
+      ? showModel.value == "chrome"
+        ? "padding-top: 85px;"
+        : "padding-top: 81px;"
+      : "",
    props.fixedHeader
      ? ""
      : `padding-top: 0;${
--- a/src/layout/components/lay-setting/index.vue
+++ b/src/layout/components/lay-setting/index.vue
@@ -232,6 +232,11 @@ const markOptions = computed<Array<OptionsType>>(() => {
      label: t("panel.pureTagsStyleCard"),
      tip: t("panel.pureTagsStyleCardTip"),
      value: "card"
+    },
+    {
+      label: t("panel.pureTagsStyleChrome"),
+      tip: t("panel.pureTagsStyleChromeTip"),
+      value: "chrome"
    }
  ];
 });
@@ -442,7 +447,7 @@ onUnmounted(() => removeMatchMedia);
      <Segmented
        resize
        class="select-none"
-        :modelValue="markValue === 'smart' ? 0 : 1"
+        :modelValue="markValue === 'smart' ? 0 : markValue === 'card' ? 1 : 2"
        :options="markOptions"
        @change="onChange"
      />
--- a/src/layout/components/lay-sidebar/NavHorizontal.vue
+++ b/src/layout/components/lay-sidebar/NavHorizontal.vue
@@ -1,9 +1,11 @@
 <script setup lang="ts">
-import { isAllEmpty } from "@pureadmin/utils";
-import { ref, nextTick, computed } from "vue";
+import { emitter } from "@/utils/mitt";
 import { useNav } from "@/layout/hooks/useNav";
 import LaySearch from "../lay-search/index.vue";
 import LayNotice from "../lay-notice/index.vue";
+import { responsiveStorageNameSpace } from "@/config";
+import { ref, nextTick, computed, onMounted } from "vue";
+import { storageLocal, isAllEmpty } from "@pureadmin/utils";
 import { useTranslationLang } from "../../hooks/useTranslationLang";
 import { usePermissionStoreHook } from "@/store/modules/permission";
 import LaySidebarItem from "../lay-sidebar/components/SidebarItem.vue";
@@ -16,6 +18,11 @@ import Setting from "@iconify-icons/ri/settings-3-line";
 import Check from "@iconify-icons/ep/check";

 const menuRef = ref();
+const showLogo = ref(
+  storageLocal().getItem<StorageConfigs>(
+    `${responsiveStorageNameSpace()}configure`
+  )?.showLogo ?? true
+);

 const { t, route, locale, translationCh, translationEn } =
  useTranslationLang(menuRef);
@@ -40,6 +47,12 @@ const defaultActive = computed(() =>
 nextTick(() => {
  menuRef.value?.handleResize();
 });
+
+onMounted(() => {
+  emitter.on("logoChange", key => {
+    showLogo.value = key;
+  });
+});
 </script>

 <template>
@@ -47,7 +60,7 @@ nextTick(() => {
    v-loading="usePermissionStoreHook().wholeMenus.length === 0"
    class="horizontal-header"
  >
-    <div class="horizontal-header-left" @click="backTopMenu">
+    <div v-if="showLogo" class="horizontal-header-left" @click="backTopMenu">
      <img :src="getLogo()" alt="logo" />
      <span>{{ title }}</span>
    </div>
--- a/src/layout/components/lay-sidebar/components/SidebarItem.vue
+++ b/src/layout/components/lay-sidebar/components/SidebarItem.vue
@@ -145,7 +145,7 @@ function resolvePath(routePath) {
            item?.pathList?.length === 2)
        "
        truncated
-        class="!w-full !px-4 !text-inherit"
+        class="!w-full !pl-4 !text-inherit"
      >
        {{ transformI18n(onlyOneChild.meta.title) }}
      </el-text>
@@ -199,7 +199,7 @@ function resolvePath(routePath) {
        :class="{
          '!w-full': true,
          '!text-inherit': true,
-          '!px-4':
+          '!pl-4':
            layout !== 'horizontal' &&
            isCollapse &&
            !toRaw(item.meta.icon) &&
--- a/src/layout/components/lay-tag/components/TagChrome.vue
+++ b/src/layout/components/lay-tag/components/TagChrome.vue
@@ -0,0 +1,33 @@
+<template>
+  <svg class="w-full h-full">
+    <defs>
+      <symbol id="geometry-left" viewBox="0 0 214 36">
+        <path d="M17 0h197v36H0v-2c4.5 0 9-3.5 9-8V8c0-4.5 3.5-8 8-8z" />
+      </symbol>
+      <symbol id="geometry-right" viewBox="0 0 214 36">
+        <use xlink:href="#geometry-left" />
+      </symbol>
+      <clipPath>
+        <rect width="100%" height="100%" x="0" />
+      </clipPath>
+    </defs>
+    <svg width="51%" height="100%">
+      <use
+        xlink:href="#geometry-left"
+        width="214"
+        height="36"
+        fill="currentColor"
+      />
+    </svg>
+    <g transform="scale(-1, 1)">
+      <svg width="51%" height="100%" x="-100%" y="0">
+        <use
+          xlink:href="#geometry-right"
+          width="214"
+          height="36"
+          fill="currentColor"
+        />
+      </svg>
+    </g>
+  </svg>
+</template>
--- a/src/layout/components/lay-tag/index.scss
+++ b/src/layout/components/lay-tag/index.scss
@@ -41,6 +41,13 @@
      padding-right: 24px;
    }

+    &.chrome-item {
+      padding-right: 0;
+      padding-left: 0;
+      margin-right: -18px;
+      box-shadow: none;
+    }
+
    .el-icon-close {
      position: absolute;
      top: 50%;
@@ -76,6 +83,14 @@
    overflow: hidden;
    white-space: nowrap;

+    &.chrome-scroll-container {
+      padding-top: 4px;
+
+      .fixed-tag {
+        padding: 0 !important;
+      }
+    }
+
    .tab {
      position: relative;
      float: left;
@@ -89,6 +104,12 @@
        &:nth-child(1) {
          padding: 0 12px;
        }
+
+        &.chrome-item {
+          &:nth-child(1) {
+            padding: 0;
+          }
+        }
      }

      .fixed-tag {
@@ -173,9 +194,29 @@
  color: #fff;
  box-shadow: 0 0 0.7px #888;

+  .chrome-tab {
+    z-index: 10;
+  }
+
+  .chrome-tab__bg {
+    color: var(--el-color-primary-light-9) !important;
+  }
+
  .tag-title {
    color: var(--el-color-primary) !important;
  }
+
+  .chrome-close-btn {
+    color: var(--el-color-primary);
+
+    &:hover {
+      background-color: var(--el-color-primary);
+    }
+  }
+
+  .chrome-tab-divider {
+    opacity: 0;
+  }
 }

 .arrow-left,
@@ -262,3 +303,69 @@
  background: var(--el-color-primary);
  animation: schedule-out-width 200ms ease-in;
 }
+
+/* 谷歌风格的页签 */
+.chrome-tab {
+  position: relative;
+  display: inline-flex;
+  gap: 16px;
+  align-items: center;
+  justify-content: center;
+  padding: 0 24px;
+  white-space: nowrap;
+  cursor: pointer;
+
+  .tag-title {
+    padding: 0;
+  }
+
+  .chrome-tab-divider {
+    position: absolute;
+    right: 7px;
+    width: 1px;
+    height: 14px;
+    background-color: #2b2d2f;
+  }
+
+  &:hover {
+    z-index: 10;
+
+    .chrome-tab__bg {
+      color: #dee1e6;
+    }
+
+    .tag-title {
+      color: #1f1f1f;
+    }
+
+    .chrome-tab-divider {
+      opacity: 0;
+    }
+  }
+
+  .chrome-tab__bg {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: -10;
+    width: 100%;
+    height: 100%;
+    color: transparent;
+    pointer-events: none;
+  }
+
+  .chrome-close-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 16px;
+    height: 16px;
+    color: #666;
+    border-radius: 50%;
+
+    &:hover {
+      color: white;
+      background-color: #b1b3b8;
+    }
+  }
+}
--- a/src/layout/components/lay-tag/index.vue
+++ b/src/layout/components/lay-tag/index.vue
@@ -5,6 +5,7 @@ import { RouteConfigs } from "../../types";
 import { useTags } from "../../hooks/useTag";
 import { routerArrays } from "@/layout/types";
 import { onClickOutside } from "@vueuse/core";
+import TagChrome from "./components/TagChrome.vue";
 import { handleAliveRoute, getTopMenu } from "@/router/utils";
 import { useSettingStoreHook } from "@/store/modules/settings";
 import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
@@ -36,6 +37,7 @@ const {
  buttonLeft,
  showModel,
  translateX,
+  isFixedTag,
  pureSetting,
  activeIndex,
  getTabStyle,
@@ -565,6 +567,7 @@ onBeforeUnmount(() => {
    <div
      ref="scrollbarDom"
      class="scroll-container"
+      :class="showModel === 'chrome' && 'chrome-scroll-container'"
      @wheel.prevent="handleWheel"
    >
      <div ref="tabDom" class="tab select-none" :style="getTabStyle">
@@ -575,35 +578,54 @@ onBeforeUnmount(() => {
          :class="[
            'scroll-item is-closable',
            linkIsActive(item),
-            !isAllEmpty(item?.meta?.fixedTag) && 'fixed-tag'
+            showModel === 'chrome' && 'chrome-item',
+            isFixedTag(item) && 'fixed-tag'
          ]"
          @contextmenu.prevent="openMenu(item, $event)"
          @mouseenter.prevent="onMouseenter(index)"
          @mouseleave.prevent="onMouseleave(index)"
          @click="tagOnClick(item)"
        >
-          <span
-            class="tag-title dark:!text-text_color_primary dark:hover:!text-primary"
-          >
-            {{ transformI18n(item.meta.title) }}
-          </span>
-          <span
-            v-if="
-              isAllEmpty(item?.meta?.fixedTag)
-                ? iconIsActive(item, index) ||
-                  (index === activeIndex && index !== 0)
-                : false
-            "
-            class="el-icon-close"
-            @click.stop="deleteMenu(item)"
-          >
-            <IconifyIconOffline :icon="Close" />
-          </span>
-          <span
-            v-if="showModel !== 'card'"
-            :ref="'schedule' + index"
-            :class="[scheduleIsActive(item)]"
-          />
+          <template v-if="showModel !== 'chrome'">
+            <span
+              class="tag-title dark:!text-text_color_primary dark:hover:!text-primary"
+            >
+              {{ transformI18n(item.meta.title) }}
+            </span>
+            <span
+              v-if="
+                isFixedTag(item)
+                  ? false
+                  : iconIsActive(item, index) ||
+                    (index === activeIndex && index !== 0)
+              "
+              class="el-icon-close"
+              @click.stop="deleteMenu(item)"
+            >
+              <IconifyIconOffline :icon="Close" />
+            </span>
+            <span
+              v-if="showModel !== 'card'"
+              :ref="'schedule' + index"
+              :class="[scheduleIsActive(item)]"
+            />
+          </template>
+          <div v-else class="chrome-tab">
+            <div class="chrome-tab__bg">
+              <TagChrome />
+            </div>
+            <span class="tag-title">
+              {{ transformI18n(item.meta.title) }}
+            </span>
+            <span
+              v-if="isFixedTag(item) ? false : index !== 0"
+              class="chrome-close-btn"
+              @click.stop="deleteMenu(item)"
+            >
+              <IconifyIconOffline :icon="Close" />
+            </span>
+            <span class="chrome-tab-divider" />
+          </div>
        </div>
      </div>
    </div>
--- a/src/layout/hooks/useTag.ts
+++ b/src/layout/hooks/useTag.ts
@@ -125,6 +125,12 @@ export function useTags() {
    }
  }

+  const isFixedTag = computed(() => {
+    return item => {
+      return isBoolean(item?.meta?.fixedTag) && item?.meta?.fixedTag === true;
+    };
+  });
+
  const iconIsActive = computed(() => {
    return (item, index) => {
      if (index === 0) return;
@@ -221,6 +227,7 @@ export function useTags() {
    buttonTop,
    buttonLeft,
    translateX,
+    isFixedTag,
    pureSetting,
    activeIndex,
    getTabStyle,
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -224,7 +224,7 @@ const LayHeader = defineComponent({
 .app-mask {
  position: absolute;
  top: 0;
-  z-index: 999;
+  z-index: 2001;
  width: 100%;
  height: 100%;
  background: #000;
--- a/src/main.ts
+++ b/src/main.ts
@@ -44,7 +44,9 @@ app.component("FontIcon", FontIcon);

 // 全局注册按钮级别权限组件
 import { Auth } from "@/components/ReAuth";
+import { Perms } from "@/components/RePerms";
 app.component("Auth", Auth);
+app.component("Perms", Perms);

 // 全局注册vue-tippy
 import "tippy.js/dist/tippy.css";
--- a/src/plugins/elementPlus.ts
+++ b/src/plugins/elementPlus.ts
@@ -107,6 +107,7 @@ import {
  ElWatermark,
  ElTour,
  ElTourStep,
+  ElSegmented,
  /**
   * 为了方便演示平台将 element-plus 导出的所有插件引入，实际使用中如果你没用到哪个插件，将其注释掉就行
   * 导出来源：https://github.com/element-plus/element-plus/blob/dev/packages/element-plus/plugin.ts#L11-L16
@@ -221,7 +222,8 @@ const components = [
  ElUpload,
  ElWatermark,
  ElTour,
-  ElTourStep
+  ElTourStep,
+  ElSegmented
 ];

 const plugins = [
--- a/src/plugins/vxeTable.ts
+++ b/src/plugins/vxeTable.ts
@@ -48,7 +48,7 @@ import {
 } from "vxe-table";

 // 全局默认参数
-VXETable.config({
+VXETable.setConfig({
  // i18n: (key, args) => {
  //   return unref(i18n.global.locale) === "zh"
  //     ? XEUtils.toFormatString(XEUtils.get(zh, key), args)
--- a/src/router/utils.ts
+++ b/src/router/utils.ts
@@ -355,7 +355,7 @@ function getAuths(): Array<string> {
  return router.currentRoute.value.meta.auths as Array<string>;
 }

-/** 是否有按钮级别的权限 */
+/** 是否有按钮级别的权限（根据路由`meta`中的`auths`字段进行判断）*/
 function hasAuth(value: string | Array<string>): boolean {
  if (!value) return false;
  /** 从当前路由的`meta`字段里获取按钮级别的所有自定义`code`值 */
--- a/src/store/modules/user.ts
+++ b/src/store/modules/user.ts
@@ -27,6 +27,9 @@ export const useUserStore = defineStore({
    nickname: storageLocal().getItem<DataInfo<number>>(userKey)?.nickname ?? "",
    // 页面级别权限
    roles: storageLocal().getItem<DataInfo<number>>(userKey)?.roles ?? [],
+    // 按钮级别权限
+    permissions:
+      storageLocal().getItem<DataInfo<number>>(userKey)?.permissions ?? [],
    // 前端生成的验证码（按实际需求替换）
    verifyCode: "",
    // 判断登录页面显示哪个组件（0：登录（默认）、1：手机登录、2：二维码登录、3：注册、4：忘记密码）
@@ -53,6 +56,10 @@ export const useUserStore = defineStore({
    SET_ROLES(roles: Array<string>) {
      this.roles = roles;
    },
+    /** 存储按钮级别权限 */
+    SET_PERMS(permissions: Array<string>) {
+      this.permissions = permissions;
+    },
    /** 存储前端生成的验证码 */
    SET_VERIFYCODE(verifyCode: string) {
      this.verifyCode = verifyCode;
@@ -86,6 +93,7 @@ export const useUserStore = defineStore({
    logOut() {
      this.username = "";
      this.roles = [];
+      this.permissions = [];
      removeToken();
      useMultiTagsStoreHook().handleTags("equal", [...routerArrays]);
      resetRouter();
--- a/src/store/types.ts
+++ b/src/store/types.ts
@@ -42,6 +42,7 @@ export type userType = {
  username?: string;
  nickname?: string;
  roles?: Array<string>;
+  permissions?: Array<string>;
  verifyCode?: string;
  currentPage?: number;
  isRemembered?: boolean;
--- a/src/style/dark.scss
+++ b/src/style/dark.scss
@@ -115,6 +115,22 @@ html.dark {
          background-color: rgb(255 255 255 / 12%);
        }
      }
+
+      .chrome-tab {
+        .tag-title {
+          color: #666;
+        }
+
+        &:hover {
+          .chrome-tab__bg {
+            color: #333;
+          }
+
+          .tag-title {
+            color: #adadad;
+          }
+        }
+      }
    }
  }

--- a/src/style/sidebar.scss
+++ b/src/style/sidebar.scss
@@ -571,6 +571,7 @@
    }

    .sidebar-container {
+      z-index: 2001;
      width: $sideBarWidth;
      transition: transform var(--pure-transition-duration);
    }
--- a/src/utils/auth.ts
+++ b/src/utils/auth.ts
@@ -1,6 +1,6 @@
 import Cookies from "js-cookie";
-import { storageLocal } from "@pureadmin/utils";
 import { useUserStoreHook } from "@/store/modules/user";
+import { storageLocal, isString, isIncludeAllChildren } from "@pureadmin/utils";

 export interface DataInfo<T> {
  /** token */
@@ -17,6 +17,8 @@ export interface DataInfo<T> {
  nickname?: string;
  /** 当前登录用户的角色 */
  roles?: Array<string>;
+  /** 当前登录用户的按钮级别权限 */
+  permissions?: Array<string>;
 }

 export const userKey = "user-info";
@@ -41,7 +43,7 @@ export function getToken(): DataInfo<number> {
 * @description 设置`token`以及一些必要信息并采用无感刷新`token`方案
 * 无感刷新：后端返回`accessToken`（访问接口使用的`token`）、`refreshToken`（用于调用刷新`accessToken`的接口时所需的`token`，`refreshToken`的过期时间（比如30天）应大于`accessToken`的过期时间（比如2小时））、`expires`（`accessToken`的过期时间）
 * 将`accessToken`、`expires`、`refreshToken`这三条信息放在key值为authorized-token的cookie里（过期自动销毁）
- * 将`avatar`、`username`、`nickname`、`roles`、`refreshToken`、`expires`这六条信息放在key值为`user-info`的localStorage里（利用`multipleTabsKey`当浏览器完全关闭后自动销毁）
+ * 将`avatar`、`username`、`nickname`、`roles`、`permissions`、`refreshToken`、`expires`这七条信息放在key值为`user-info`的localStorage里（利用`multipleTabsKey`当浏览器完全关闭后自动销毁）
 */
 export function setToken(data: DataInfo<Date>) {
  let expires = 0;
@@ -66,18 +68,20 @@ export function setToken(data: DataInfo<Date>) {
      : {}
  );

-  function setUserKey({ avatar, username, nickname, roles }) {
+  function setUserKey({ avatar, username, nickname, roles, permissions }) {
    useUserStoreHook().SET_AVATAR(avatar);
    useUserStoreHook().SET_USERNAME(username);
    useUserStoreHook().SET_NICKNAME(nickname);
    useUserStoreHook().SET_ROLES(roles);
+    useUserStoreHook().SET_PERMS(permissions);
    storageLocal().setItem(userKey, {
      refreshToken,
      expires,
      avatar,
      username,
      nickname,
-      roles
+      roles,
+      permissions
    });
  }

@@ -87,7 +91,8 @@ export function setToken(data: DataInfo<Date>) {
      avatar: data?.avatar ?? "",
      username,
      nickname: data?.nickname ?? "",
-      roles
+      roles,
+      permissions: data?.permissions ?? []
    });
  } else {
    const avatar =
@@ -98,11 +103,14 @@ export function setToken(data: DataInfo<Date>) {
      storageLocal().getItem<DataInfo<number>>(userKey)?.nickname ?? "";
    const roles =
      storageLocal().getItem<DataInfo<number>>(userKey)?.roles ?? [];
+    const permissions =
+      storageLocal().getItem<DataInfo<number>>(userKey)?.permissions ?? [];
    setUserKey({
      avatar,
      username,
      nickname,
-      roles
+      roles,
+      permissions
    });
  }
 }
@@ -118,3 +126,16 @@ export function removeToken() {
 export const formatToken = (token: string): string => {
  return "Bearer " + token;
 };
+
+/** 是否有按钮级别的权限（根据登录接口返回的`permissions`字段进行判断）*/
+export const hasPerms = (value: string | Array<string>): boolean => {
+  if (!value) return false;
+  const allPerms = "*:*:*";
+  const { permissions } = useUserStoreHook();
+  if (!permissions) return false;
+  if (permissions.length === 1 && permissions[0] === allPerms) return true;
+  const isAuths = isString(value)
+    ? permissions.includes(value)
+    : isIncludeAllChildren(value, permissions);
+  return isAuths ? true : false;
+};
--- a/src/utils/http/types.d.ts
+++ b/src/utils/http/types.d.ts
@@ -36,12 +36,12 @@ export default class PureHttp {
  ): Promise<T>;
  post<T, P>(
    url: string,
-    params?: T,
+    params?: P,
    config?: PureHttpRequestConfig
-  ): Promise<P>;
+  ): Promise<T>;
  get<T, P>(
    url: string,
-    params?: T,
+    params?: P,
    config?: PureHttpRequestConfig
-  ): Promise<P>;
+  ): Promise<T>;
 }
--- a/src/views/components/dialog/index.vue
+++ b/src/views/components/dialog/index.vue
@@ -450,6 +450,19 @@ function onBeforeSureClick() {
    }
  });
 }
+
+function onSureBtnLoading() {
+  addDialog({
+    sureBtnLoading: true,
+    title: "点击底部确定按钮可开启按钮动画",
+    contentRenderer: () => <p>弹框内容-点击底部确定按钮可开启按钮动画</p>,
+    beforeSure: (done, { closeLoading }) => {
+      // closeLoading() // 关闭确定按钮动画，不关闭弹框
+      // done() // 关闭确定按钮动画并关闭弹框
+      setTimeout(() => done(), 800);
+    }
+  });
+}
 </script>

 <template>
@@ -534,6 +547,9 @@ function onBeforeSureClick() {
      <el-button @click="onBeforeSureClick">
        点击底部确定按钮的回调（会暂停弹框的关闭，经常用于新增、修改弹框内容后调用接口）
      </el-button>
+      <el-button @click="onSureBtnLoading">
+        点击底部确定按钮可开启按钮动画
+      </el-button>
    </el-space>
  </el-card>
 </template>
--- a/src/views/components/el-button.vue
+++ b/src/views/components/el-button.vue
@@ -99,7 +99,7 @@ watch(size, val =>
      <el-button
        v-for="(button, index) in buttonList"
        :key="index"
-        :type="button.type"
+        :type="button.type as any"
        :size="dynamicSize"
        :disabled="size === 'disabled'"
        :plain="baseRadio === 'plain'"
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -97,7 +97,11 @@ const immediateDebounce: any = debounce(
 );

 useEventListener(document, "keypress", ({ code }) => {
-  if (code === "Enter" && !disabled.value && !loading.value)
+  if (
+    ["Enter", "NumpadEnter"].includes(code) &&
+    !disabled.value &&
+    !loading.value
+  )
    immediateDebounce(ruleFormRef.value);
 });

--- a/src/views/monitor/logs/login/index.vue
+++ b/src/views/monitor/logs/login/index.vue
@@ -133,8 +133,7 @@ const {
          :adaptiveConfig="{ offsetBottom: 108 }"
          :data="dataList"
          :columns="dynamicColumns"
-          :pagination="pagination"
-          :paginationSmall="size === 'small' ? true : false"
+          :pagination="{ ...pagination, size }"
          :header-cell-style="{
            background: 'var(--el-fill-color-light)',
            color: 'var(--el-text-color-primary)'
--- a/src/views/monitor/logs/operation/index.vue
+++ b/src/views/monitor/logs/operation/index.vue
@@ -133,8 +133,7 @@ const {
          :adaptiveConfig="{ offsetBottom: 108 }"
          :data="dataList"
          :columns="dynamicColumns"
-          :pagination="pagination"
-          :paginationSmall="size === 'small' ? true : false"
+          :pagination="{ ...pagination, size }"
          :header-cell-style="{
            background: 'var(--el-fill-color-light)',
            color: 'var(--el-text-color-primary)'
--- a/src/views/monitor/logs/system/index.vue
+++ b/src/views/monitor/logs/system/index.vue
@@ -125,8 +125,7 @@ const {
          :adaptiveConfig="{ offsetBottom: 108 }"
          :data="dataList"
          :columns="dynamicColumns"
-          :pagination="pagination"
-          :paginationSmall="size === 'small' ? true : false"
+          :pagination="{ ...pagination, size }"
          :header-cell-style="{
            background: 'var(--el-fill-color-light)',
            color: 'var(--el-text-color-primary)'
--- a/src/views/monitor/online/index.vue
+++ b/src/views/monitor/online/index.vue
@@ -74,8 +74,7 @@ const {
          :adaptiveConfig="{ offsetBottom: 108 }"
          :data="dataList"
          :columns="dynamicColumns"
-          :pagination="pagination"
-          :paginationSmall="size === 'small' ? true : false"
+          :pagination="{ ...pagination, size }"
          :header-cell-style="{
            background: 'var(--el-fill-color-light)',
            color: 'var(--el-text-color-primary)'
--- a/src/views/permission/button/index.vue
+++ b/src/views/permission/button/index.vue
@@ -2,7 +2,7 @@
 import { hasAuth, getAuths } from "@/router/utils";

 defineOptions({
-  name: "PermissionButton"
+  name: "PermissionButtonRouter"
 });
 </script>

--- a/src/views/permission/button/perms.vue
+++ b/src/views/permission/button/perms.vue
@@ -0,0 +1,116 @@
+<script setup lang="ts">
+import { hasPerms } from "@/utils/auth";
+import { useUserStoreHook } from "@/store/modules/user";
+
+const { permissions } = useUserStoreHook();
+
+defineOptions({
+  name: "PermissionButtonLogin"
+});
+</script>
+
+<template>
+  <div>
+    <p class="mb-2">当前拥有的code列表：{{ permissions }}</p>
+    <p v-show="permissions?.[0] === '*:*:*'" class="mb-2">
+      *:*:* 代表拥有全部按钮级别权限
+    </p>
+
+    <el-card shadow="never" class="mb-2">
+      <template #header>
+        <div class="card-header">组件方式判断权限</div>
+        <el-link
+          class="mt-2"
+          href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/permission/button/perms.vue"
+          target="_blank"
+        >
+          代码位置 src/views/permission/button/perms.vue
+        </el-link>
+      </template>
+      <el-space wrap>
+        <Perms value="permission:btn:add">
+          <el-button plain type="warning">
+            拥有code：'permission:btn:add' 权限可见
+          </el-button>
+        </Perms>
+        <Perms :value="['permission:btn:edit']">
+          <el-button plain type="primary">
+            拥有code：['permission:btn:edit'] 权限可见
+          </el-button>
+        </Perms>
+        <Perms
+          :value="[
+            'permission:btn:add',
+            'permission:btn:edit',
+            'permission:btn:delete'
+          ]"
+        >
+          <el-button plain type="danger">
+            拥有code：['permission:btn:add', 'permission:btn:edit',
+            'permission:btn:delete'] 权限可见
+          </el-button>
+        </Perms>
+      </el-space>
+    </el-card>
+
+    <el-card shadow="never" class="mb-2">
+      <template #header>
+        <div class="card-header">函数方式判断权限</div>
+      </template>
+      <el-space wrap>
+        <el-button v-if="hasPerms('permission:btn:add')" plain type="warning">
+          拥有code：'permission:btn:add' 权限可见
+        </el-button>
+        <el-button
+          v-if="hasPerms(['permission:btn:edit'])"
+          plain
+          type="primary"
+        >
+          拥有code：['permission:btn:edit'] 权限可见
+        </el-button>
+        <el-button
+          v-if="
+            hasPerms([
+              'permission:btn:add',
+              'permission:btn:edit',
+              'permission:btn:delete'
+            ])
+          "
+          plain
+          type="danger"
+        >
+          拥有code：['permission:btn:add', 'permission:btn:edit',
+          'permission:btn:delete'] 权限可见
+        </el-button>
+      </el-space>
+    </el-card>
+
+    <el-card shadow="never">
+      <template #header>
+        <div class="card-header">
+          指令方式判断权限（该方式不能动态修改权限）
+        </div>
+      </template>
+      <el-space wrap>
+        <el-button v-perms="'permission:btn:add'" plain type="warning">
+          拥有code：'permission:btn:add' 权限可见
+        </el-button>
+        <el-button v-perms="['permission:btn:edit']" plain type="primary">
+          拥有code：['permission:btn:edit'] 权限可见
+        </el-button>
+        <el-button
+          v-perms="[
+            'permission:btn:add',
+            'permission:btn:edit',
+            'permission:btn:delete'
+          ]"
+          plain
+          type="danger"
+        >
+          拥有code：['permission:btn:add', 'permission:btn:edit',
+          'permission:btn:delete'] 权限可见
+        </el-button>
+      </el-space>
+    </el-card>
+  </div>
+</template>
--- a/src/views/system/role/index.vue
+++ b/src/views/system/role/index.vue
@@ -173,8 +173,7 @@ onMounted(() => {
            :adaptiveConfig="{ offsetBottom: 108 }"
            :data="dataList"
            :columns="dynamicColumns"
-            :pagination="pagination"
-            :paginationSmall="size === 'small' ? true : false"
+            :pagination="{ ...pagination, size }"
            :header-cell-style="{
              background: 'var(--el-fill-color-light)',
              color: 'var(--el-text-color-primary)'
@@ -264,7 +263,7 @@ onMounted(() => {

      <div
        v-if="isShow"
-        class="!min-w-[calc(100vw-60vw-268px)] mt-2 px-2 pb-2 bg-bg_color ml-2 overflow-auto"
+        class="!min-w-[calc(100vw-60vw-268px)] w-full mt-2 px-2 pb-2 bg-bg_color ml-2 overflow-auto"
      >
        <div class="flex justify-between w-full px-3 pt-5 pb-4">
          <div class="flex">
--- a/src/views/system/user/index.vue
+++ b/src/views/system/user/index.vue
@@ -160,8 +160,7 @@ const {
            :size="size"
            :data="dataList"
            :columns="dynamicColumns"
-            :pagination="pagination"
-            :paginationSmall="size === 'small' ? true : false"
+            :pagination="{ ...pagination, size }"
            :header-cell-style="{
              background: 'var(--el-fill-color-light)',
              color: 'var(--el-text-color-primary)'
--- a/src/views/table/base/tree.vue
+++ b/src/views/table/base/tree.vue
@@ -116,7 +116,11 @@ const columns: TableColumnList = [
      border
      lazy
      :load="load"
-      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
+      :tree-props="{
+        hasChildren: 'hasChildren',
+        children: 'children',
+        checkStrictly: false
+      }"
    />
  </div>
 </template>
--- a/src/views/table/high/adaptive/columns.tsx
+++ b/src/views/table/high/adaptive/columns.tsx
@@ -33,7 +33,7 @@ export function useColumns() {
    total: 0,
    align: "right",
    background: true,
-    small: false
+    size: "default"
  });

  /** 加载动画配置 */
--- a/src/views/table/high/page/columns.tsx
+++ b/src/views/table/high/page/columns.tsx
@@ -9,7 +9,6 @@ export function useColumns() {
  const select = ref("no");
  const hideVal = ref("nohide");
  const tableSize = ref("default");
-  const paginationSmall = ref(false);
  const paginationAlign = ref("right");
  const columns: TableColumnList = [
    {
@@ -43,7 +42,7 @@ export function useColumns() {
    total: 0,
    align: "right",
    background: true,
-    small: false
+    size: "default"
  });

  /** 加载动画配置 */
@@ -65,7 +64,7 @@ export function useColumns() {
  });

  function onChange(val) {
-    pagination.small = val;
+    pagination.size = val;
  }

  function onSizeChange(val) {
@@ -108,7 +107,6 @@ export function useColumns() {
    pagination,
    loadingConfig,
    paginationAlign,
-    paginationSmall,
    onChange,
    onSizeChange,
    onCurrentChange
--- a/src/views/table/high/page/index.vue
+++ b/src/views/table/high/page/index.vue
@@ -11,7 +11,6 @@ const {
  pagination,
  loadingConfig,
  paginationAlign,
-  paginationSmall,
  onChange,
  onSizeChange,
  onCurrentChange
@@ -43,9 +42,10 @@ const {
      </el-radio-group>
      <el-divider direction="vertical" />
      <p class="text-sm">分页大小：</p>
-      <el-radio-group v-model="paginationSmall" size="small" @change="onChange">
-        <el-radio-button :value="false">no small</el-radio-button>
-        <el-radio-button :value="true">small</el-radio-button>
+      <el-radio-group v-model="pagination.size" size="small" @change="onChange">
+        <el-radio-button value="large">large</el-radio-button>
+        <el-radio-button value="default">default</el-radio-button>
+        <el-radio-button value="small">small</el-radio-button>
      </el-radio-group>
      <el-divider direction="vertical" />
      <p class="text-sm">分页的对齐方式：</p>
--- a/src/views/table/high/table-select/multiple/columns.tsx
+++ b/src/views/table/high/table-select/multiple/columns.tsx
@@ -59,7 +59,7 @@ export function useColumns(selectRef: Ref, formRef: Ref, tableRef: Ref) {
    layout: "prev, pager, next",
    total: tableData.value.length,
    background: true,
-    small: true
+    size: "small"
  });

  const handleSelectionChange = val => {
--- a/src/views/table/high/table-select/radio/columns.tsx
+++ b/src/views/table/high/table-select/radio/columns.tsx
@@ -33,7 +33,7 @@ export function useColumns(selectRef: Ref) {
    layout: "prev, pager, next",
    total: tableDataEdit.length,
    background: true,
-    small: true
+    size: "small"
  });

  /** 高亮当前选中行 */
--- a/types/directives.d.ts
+++ b/types/directives.d.ts
@@ -0,0 +1,28 @@
+import type { Directive } from "vue";
+import type { CopyEl, OptimizeOptions, RippleOptions } from "@/directives";
+
+declare module "vue" {
+  export interface ComponentCustomProperties {
+    /** `Loading` 动画加载指令，具体看：https://element-plus.org/zh-CN/component/loading.html#%E6%8C%87%E4%BB%A4 */
+    vLoading: Directive<Element, boolean>;
+    /** 按钮权限指令（根据路由`meta`中的`auths`字段进行判断）*/
+    vAuth: Directive<HTMLElement, string | Array<string>>;
+    /** 文本复制指令（默认双击复制） */
+    vCopy: Directive<CopyEl, string>;
+    /** 长按指令 */
+    vLongpress: Directive<HTMLElement, Function>;
+    /** 防抖、节流指令 */
+    vOptimize: Directive<HTMLElement, OptimizeOptions>;
+    /** 按钮权限指令（根据登录接口返回的`permissions`字段进行判断）*/
+    vPerms: Directive<HTMLElement, string | Array<string>>;
+    /**
+     * `v-ripple`指令，用法如下：
+     * 1. `v-ripple`代表启用基本的`ripple`功能
+     * 2. `v-ripple="{ class: 'text-red' }"`代表自定义`ripple`颜色，支持`tailwindcss`，生效样式是`color`
+     * 3. `v-ripple.center`代表从中心扩散
+     */
+    vRipple: Directive<HTMLElement, RippleOptions>;
+  }
+}
+
+export {};
--- a/types/global-components.d.ts
+++ b/types/global-components.d.ts
@@ -7,6 +7,7 @@ declare module "vue" {
    IconifyIconOnline: (typeof import("../src/components/ReIcon"))["IconifyIconOnline"];
    FontIcon: (typeof import("../src/components/ReIcon"))["FontIcon"];
    Auth: (typeof import("../src/components/ReAuth"))["Auth"];
+    Perms: (typeof import("../src/components/RePerms"))["Perms"];
  }
 }

@@ -115,6 +116,7 @@ declare module "vue" {
    ElWatermark: (typeof import("element-plus"))["ElWatermark"];
    ElTour: (typeof import("element-plus"))["ElTour"];
    ElTourStep: (typeof import("element-plus"))["ElTourStep"];
+    ElSegmented: (typeof import("element-plus"))["ElSegmented"];
  }

  interface ComponentCustomProperties {
Author	SHA1	Message	Date
xiaoxian521	cd21f1e050	release: update `5.8.0`	2024-08-19 13:53:33 +08:00
xiaoxian521	5fbb664da7	chore: 升级依赖，`element-plus`最新版兼容处理	2024-08-12 14:51:34 +08:00
xiaoming	244ab7f990	feat: 新增第二种按钮权限指令（根据登录接口返回的`permissions`字段进行判断） (#1177 ) * feat: 新增第二种按钮权限指令（根据登录接口返回的`permissions`字段进行判断）	2024-08-12 13:32:04 +08:00
xiaoxian521	96152ed134	feat: `ReDialog`组件的确定按钮提供关闭按钮动画`closeLoading`功能	2024-08-05 13:15:10 +08:00
xiaoxian521	37ab40f188	feat: `VxeTableBar`组件添加全屏和退出全屏功能	2024-08-03 15:13:20 +08:00
xiaoxian521	91ae63a8c5	feat: `PureTableBar`组件添加全屏和退出全屏功能	2024-08-03 14:39:21 +08:00
xiaoxian521	6d7e92fed1	feat: 函数式弹框`ReDialog`添加点击确认按钮后是否开启`loading`加载动画功能	2024-07-30 14:56:47 +08:00
xiaoxian521	0706f37254	fix: 修复顶部菜单模式下`logo`不可隐藏的问题	2024-07-29 10:52:12 +08:00
xiaoxian521	8a9695cf7c	chore(deps): update	2024-07-29 09:49:38 +08:00
xiaoxian521	d395c9c6ba	chore(deps): update	2024-07-21 17:09:05 +08:00
xiaoxian521	3dec3c002f	perf: 优化系统管理-角色管理的权限功能样式	2024-07-04 11:14:22 +08:00
xiaoxian521	bae1122e58	feat: 添加`vite-plugin-checker`插件，更严格的类型和`eslint`校验	2024-07-03 11:31:37 +08:00
xiaoxian521	37e9d8a1ac	chore: 升级依赖，相关兼容处理	2024-07-02 20:57:35 +08:00
sea	dea9664677	perf: 手机端层级展示 (#1169 )	2024-07-02 15:30:27 +08:00
sea	775d7a2d32	perf: 优化登录页 (#1168 )	2024-06-27 09:55:47 +08:00
xiaoxian521	13e7a13e9d	chore(deps): update	2024-06-14 14:01:18 +08:00
xiaoxian521	47afa9209e	fix: 修复配置路由属性`fixedTag`为`false`后当前标签页不可关闭的问题	2024-06-12 14:56:09 +08:00
xiaoxian521	933ced4ac4	docs: update	2024-06-11 22:28:57 +08:00
Fifteen	8816e61e3a	chore: update `plugins/elementPlus.ts` (#1164 )	2024-06-07 10:38:19 +08:00
sea	edf82ea727	feat: 添加开发环境代码调试`vite-plugin-vue-inspector`插件，提升开发体验 (#1162 )	2024-06-06 17:32:25 +08:00
sea	a75cf8394e	types: 优化自定义指令的类型提示 (#1161 )	2024-06-06 16:26:32 +08:00
xiaoxian521	33a89834d7	release: update `5.7.0`	2024-06-04 16:21:22 +08:00
xiaoxian521	649aab9c7d	docs: 更新特别代码贡献名单	2024-06-04 13:49:52 +08:00
way	7a6ee58e6d	feat: 添加谷歌风格的页签 (#1160 )	2024-06-04 13:44:47 +08:00
xiaoxian521	b402a8924f	docs: update	2024-06-01 06:33:55 +08:00
xiaoxian521	9a5523d1c7	chore: 更新依赖，建议升级`vue-pdf-embed`至最新版	2024-05-31 14:30:00 +08:00
xiaoxian521	1e6d0283c9	docs: update	2024-05-29 11:06:01 +08:00
xiaoxian521	a8377f8d45	fix: 修复在火狐浏览器中菜单折叠后，文字超出未隐藏的问题	2024-05-28 12:19:18 +08:00
xiaoxian521	cd653c83f0	chore: 升级依赖，相关兼容处理	2024-05-28 10:16:09 +08:00
xiaoxian521	643b36fc42	docs: update `README`	2024-05-28 00:04:35 +08:00
RosyCloudsLee	17ed4d640d	types: update	2024-05-21 09:36:14 +08:00