chore: add better-tailwindcss/enforce-canonical-classes

perf: 根据tailwindcss推荐优化类名
fix: 迁移typescript-eslint已弃用的tseslint.config配置方式
2025-12-09 14:40:27 +08:00 · 2025-12-09 09:59:08 +08:00 · 2025-12-08 15:44:00 +08:00 · 2025-12-08 14:31:44 +08:00 · 2025-12-01 14:27:16 +08:00 · 2025-11-27 12:24:03 +08:00
64 changed files with 2657 additions and 2348 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -1,9 +1,10 @@
 node_modules
 .DS_Store
+dist
+dist-ssr
 *.local
 .eslintcache
 report.html
-dist
 vite.config.*.timestamp*

 yarn.lock
--- a/.husky/commit-msg
+++ b/.husky/commit-msg
@@ -0,0 +1,8 @@
+#!/bin/sh
+
+# shellcheck source=./_/husky.sh
+. "$(dirname "$0")/_/husky.sh"
+
+PATH="/usr/local/bin:$PATH"
+
+npx --no-install commitlint --edit "$1"
--- a/.husky/common.sh
+++ b/.husky/common.sh
@@ -0,0 +1,9 @@
+#!/bin/sh
+command_exists () {
+  command -v "$1" >/dev/null 2>&1
+}
+
+# Workaround for Windows 10, Git Bash and Pnpm
+if command_exists winpty && test -t 1; then
+  exec < /dev/tty
+fi
--- a/.husky/pre-commit
+++ b/.husky/pre-commit
@@ -0,0 +1,10 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+. "$(dirname "$0")/common.sh"
+
+[ -n "$CI" ] && exit 0
+
+PATH="/usr/local/bin:$PATH"
+
+# Perform lint check on files in the staging area through .lintstagedrc configuration
+pnpm exec lint-staged
--- a/.nvmrc
+++ b/.nvmrc
@@ -1 +1 @@
-v22.17.1
+v22.20.0
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,4 +1,5 @@
 {
+  "tailwindCSS.experimental.configFile": "src/style/tailwind.css",
  "editor.formatOnType": true,
  "editor.formatOnSave": true,
  "[vue]": {
--- a/CHANGELOG.en_US.md
+++ b/CHANGELOG.en_US.md
@@ -1,3 +1,23 @@
+# 6.2.0 (2025-10-16)
+
+### 🎫 Features
+
+- Added full-screen `403`, `404`, and `500` error pages. These full-screen error pages are clear and secure, improving the user experience.
+
+### 🐞 Bug Fixes
+
+- Fixed an issue where the built-in homepage did not have a `name` configured, causing cache invalidation after setting the page cache.
+- Fixed an issue where, in an embedded same-origin `iframe` page, when the `beforeunload` event was registered, right-clicking a tab and reloading it would cause the browser to prompt two confirmation blocks.
+- Fixed an issue where pages with `keepAlive: true` set to cache invalidation when the initial load was slow.
+- Fixed an issue where multiple tabs could be activated simultaneously when using the same parameters in different routes.
+- Fixed an issue where the right-click menu on a tab displayed incorrectly when passing `params` parameters.
+
+### 🍏 Perf
+
+- Optimized the `nprogress` progress bar. It no longer displays when reloading a page or requesting an interface, improving the user experience.
+- Optimized the timing of capturing all unmatched routes and redirecting to a full-screen `404` page.
+- Explicitly configured the `Tailwind CSS` entry file path to improve the contextual recognition and prompting performance of the `Tailwind CSS IntelliSense` plugin
+
 # 6.1.0 (2025-07-31)

 ### ✔️ Refactor
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,23 @@
+# 6.2.0 (2025-10-16)
+
+### 🎫 Features
+
+- Added full-screen `403`, `404`, and `500` error pages. These full-screen error pages are clear and secure, improving the user experience.
+
+### 🐞 Bug Fixes
+
+- Fixed an issue where the built-in homepage did not have a `name` configured, causing cache invalidation after setting the page cache.
+- Fixed an issue where, in an embedded same-origin `iframe` page, when the `beforeunload` event was registered, right-clicking a tab and reloading it would cause the browser to prompt two confirmation blocks.
+- Fixed an issue where pages with `keepAlive: true` set to cache invalidation when the initial load was slow.
+- Fixed an issue where multiple tabs could be activated simultaneously when using the same parameters in different routes.
+- Fixed an issue where the right-click menu on a tab displayed incorrectly when passing `params` parameters.
+
+### 🍏 Perf
+
+- Optimized the `nprogress` progress bar. It no longer displays when reloading a page or requesting an interface, improving the user experience.
+- Optimized the timing of capturing all unmatched routes and redirecting to a full-screen `404` page.
+- Explicitly configured the `Tailwind CSS` entry file path to improve the contextual recognition and prompting performance of the `Tailwind CSS IntelliSense` plugin
+
 # 6.1.0 (2025-07-31)

 ### ✔️ Refactor
--- a/CHANGELOG.zh_CN.md
+++ b/CHANGELOG.zh_CN.md
@@ -1,3 +1,23 @@
+# 6.2.0 (2025-10-16)
+
+### 🎫 Feat
+
+- 添加全屏`403`、`404`、`500`页面，全屏错误页面清晰且安全，提升用户体验
+
+### 🐞 Bug fixes
+
+- 修复内置的首页未设置`name`导致设置页面缓存后缓存无效的问题
+- 修复在内嵌同源`iframe`页面中，当其注册了`beforeunload`事件时，右键标签页点击重新加载导致浏览器弹出两次确认拦截的问题
+- 修复设置了`keepAlive: true`的页面在初次加载缓慢的情况下出现的页面缓存失效的问题
+- 修复不同路由使用相同参数时，多个标签页会同时被激活的问题
+- 修复`params`传参模式下标签页右键菜单显示不正确的问题
+
+### 🍏 Perf
+
+- 优化`nprogress`进度条，页面重进或接口请求时不再显示进度条，提升用户体验
+- 优化当捕获所有未匹配路由并跳转全屏`404`页面的时机
+- 显式配置`Tailwind CSS`入口文件路径，优化`Tailwind CSS IntelliSense`插件的上下文识别与提示性能
+
 # 6.1.0 (2025-07-31)

 ### ✔️ Refactor
@@ -6,7 +26,7 @@

 ### 🐞 Bug fixes

- 修复`ReSegmented`分段控制器组件在浅色和深色整体风格切换时的闪烁问题
+- 修复`ReSegmented`分段控制器组件在浅色和深色主题模式切换时的闪烁问题
 - 修复`resetRouter`未清空全部路由数据问题
 - 修复标签页-关闭左侧标签页关闭异常问题

@@ -211,8 +231,8 @@

 - 修复`windwos`下点击注册页面会出现滚动条问题
 - 修复`windows`下页面切换，内容区会出现滚动条问题
- 修复`pure-table`带状态表格在深色整体风格下状态样式消失的问题
- 修复系统配置中开启灰色模式和深色整体风格，刷新页面整体风格异常
+- 修复`pure-table`带状态表格在深色主题模式下状态样式消失的问题
+- 修复系统配置中开启灰色模式和深色主题模式，刷新页面主题模式异常

 ### 🍏 Perf

@@ -265,7 +285,7 @@
 - 内嵌`iframe`页支持设置`keepAlive`，保持页面状态
 - 优化导航，弹出的菜单超出内容区自适应且可滚动
 - 添加文件上传示例
- 添加整体风格自适应操作系统浅色、深色、自动主题功能
+- 添加主题模式自适应操作系统浅色、深色、自动主题功能
 - 添加页脚
 - 支持多标签页打开已经登录的系统后无需再登录并添加内免登录功能（用户可选择免登录的天数）
 - 带来高级感的终端命令行
@@ -465,7 +485,7 @@
 - 修复菜单搜索功能弹框打开后搜索框未自动聚集的问题
 - 修复按 `ESC` 退出全屏后，工具栏按钮文案展示问题
 - 修复移动端通知栏 `tooltip` 点击穿透问题
- 修复当左侧菜单收起后，切换到 `horizontal` 导航模式时文字不展示的问题
+- 修复当左侧菜单收起后，切换到 `horizontal` 菜单布局时文字不展示的问题
 - 修复导航 `tab` 关闭其他标签页无法重置状态问题
 - 修复 `getHistoryMode` 函数中环境变量未初始化带来的页面热更新报错
 - 修复导航 `tab` 过多导致关闭左侧标签页无法正常显示
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -5,6 +5,7 @@ import * as parserVue from "vue-eslint-parser";
 import configPrettier from "eslint-config-prettier";
 import pluginPrettier from "eslint-plugin-prettier";
 import { defineConfig, globalIgnores } from "eslint/config";
+import eslintPluginBetterTailwindcss from "eslint-plugin-better-tailwindcss";

 export default defineConfig([
  globalIgnores([
@@ -72,8 +73,11 @@ export default defineConfig([
      ]
    }
  },
-  ...tseslint.config({
-    extends: [...tseslint.configs.recommended],
+  ...tseslint.configs.recommended.map(config => ({
+    ...config,
+    files: ["**/*.?([cm])ts", "**/*.?([cm])tsx"]
+  })),
+  {
    files: ["**/*.?([cm])ts", "**/*.?([cm])tsx"],
    rules: {
      "@typescript-eslint/no-redeclare": "error",
@@ -102,7 +106,7 @@ export default defineConfig([
        }
      ]
    }
-  }),
+  },
  {
    files: ["**/*.d.ts"],
    rules: {
@@ -169,5 +173,20 @@ export default defineConfig([
        }
      ]
    }
+  },
+  {
+    files: ["**/*.vue", "**/*.tsx"],
+    plugins: {
+      "better-tailwindcss": eslintPluginBetterTailwindcss
+    },
+    rules: {
+      "better-tailwindcss/enforce-consistent-variable-syntax": "warn",
+      "better-tailwindcss/enforce-canonical-classes": "warn"
+    },
+    settings: {
+      "better-tailwindcss": {
+        entryPoint: "src/style/tailwind.css"
+      }
+    }
  }
 ]);
--- a/index.html
+++ b/index.html
@@ -1,94 +1,84 @@
 <!doctype html>
 <html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+    <meta name="renderer" content="webkit" />
+    <meta
+      name="viewport"
+      content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0"
+    />
+    <title>vue-pure-admin</title>
+    <link rel="icon" href="/favicon.ico" />
+  </head>

-<head>
-  <meta charset="UTF-8" />
-  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
-  <meta name="renderer" content="webkit" />
-  <meta name="viewport"
-    content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0" />
-  <title>vue-pure-admin</title>
-  <link rel="icon" href="/favicon.ico" />
-  <script>
-    var _hmt = _hmt || [];
-    (function () {
-      var hm = document.createElement("script")
-      hm.src = "https://hm.baidu.com/hm.js?d3824e75ef2bf6d851035f74ae1aec68"
-      var s = document.getElementsByTagName("script")[0]
-      s.parentNode.insertBefore(hm, s)
-    })();
-  </script>
-</head>
-
-<body>
-  <div id="app">
-    <style>
-      html,
-      body,
-      #app {
-        position: relative;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: 100%;
-        height: 100%;
-        overflow: hidden;
-      }
-
-      .loader,
-      .loader::before,
-      .loader::after {
-        width: 2.5em;
-        height: 2.5em;
-        border-radius: 50%;
-        animation: load-animation 1.8s infinite ease-in-out;
-        animation-fill-mode: both;
-      }
-
-      .loader {
-        position: relative;
-        top: 0;
-        margin: 80px auto;
-        font-size: 10px;
-        color: #406eeb;
-        text-indent: -9999em;
-        transform: translateZ(0);
-        transform: translate(-50%, 0);
-        animation-delay: -0.16s;
-      }
-
-      .loader::before,
-      .loader::after {
-        position: absolute;
-        top: 0;
-        content: "";
-      }
-
-      .loader::before {
-        left: -3.5em;
-        animation-delay: -0.32s;
-      }
-
-      .loader::after {
-        left: 3.5em;
-      }
-
-      @keyframes load-animation {
-
-        0%,
-        80%,
-        100% {
-          box-shadow: 0 2.5em 0 -1.3em;
+  <body>
+    <div id="app">
+      <style>
+        html,
+        body,
+        #app {
+          position: relative;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          width: 100%;
+          height: 100%;
+          overflow: hidden;
        }

-        40% {
-          box-shadow: 0 2.5em 0 0;
+        .loader,
+        .loader::before,
+        .loader::after {
+          width: 2.5em;
+          height: 2.5em;
+          border-radius: 50%;
+          animation: load-animation 1.8s infinite ease-in-out;
+          animation-fill-mode: both;
        }
-      }
-    </style>
-    <div class="loader"></div>
-  </div>
-  <script type="module" src="/src/main.ts"></script>
-</body>

-</html>
+        .loader {
+          position: relative;
+          top: 0;
+          margin: 80px auto;
+          font-size: 10px;
+          color: #406eeb;
+          text-indent: -9999em;
+          transform: translateZ(0);
+          transform: translate(-50%, 0);
+          animation-delay: -0.16s;
+        }
+
+        .loader::before,
+        .loader::after {
+          position: absolute;
+          top: 0;
+          content: "";
+        }
+
+        .loader::before {
+          left: -3.5em;
+          animation-delay: -0.32s;
+        }
+
+        .loader::after {
+          left: 3.5em;
+        }
+
+        @keyframes load-animation {
+          0%,
+          80%,
+          100% {
+            box-shadow: 0 2.5em 0 -1.3em;
+          }
+
+          40% {
+            box-shadow: 0 2.5em 0 0;
+          }
+        }
+      </style>
+      <div class="loader"></div>
+    </div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
--- a/locales/en.yaml
+++ b/locales/en.yaml
@@ -31,15 +31,15 @@ panel:
  pureCloseSystemSet: Close System Configs
  pureClearCacheAndToLogin: Clear cache and return to login page
  pureClearCache: Clear Cache
-  pureOverallStyle: Overall Style
-  pureOverallStyleLight: Light
-  pureOverallStyleLightTip: Set sail freshly and light up the comfortable work interface
-  pureOverallStyleDark: Dark
-  pureOverallStyleDarkTip: Moonlight Overture, indulge in the tranquility and elegance of the night
-  pureOverallStyleSystem: Auto
-  pureOverallStyleSystemTip: Synchronize time, the interface naturally responds to morning and dusk
+  pureThemeMode: Theme Mode
+  pureThemeModeLight: Light
+  pureThemeModeLightTip: Set sail freshly and light up the comfortable work interface
+  pureThemeModeDark: Dark
+  pureThemeModeDarkTip: Moonlight Overture, indulge in the tranquility and elegance of the night
+  pureThemeModeSystem: Auto
+  pureThemeModeSystemTip: Synchronize time, the interface naturally responds to morning and dusk
  pureThemeColor: Theme Color
-  pureLayoutModel: Layout Model
+  pureMenuLayout: Menu Layout
  pureVerticalTip: The menu on the left is familiar and friendly
  pureHorizontalTip: Top menu, concise overview
  pureMixTip: Mixed menu, flexible
@@ -108,6 +108,7 @@ menus:
  pureTypeit: Typeit
  pureJsonEditor: JSON Editor
  pureColorPicker: Color Picker
+  pureColorPickerPanel: Color PickerPanel
  pureDatePicker: Date Picker
  pureDateTimePicker: DateTimePicker
  pureTimePicker: TimePicker
--- a/locales/zh-CN.yaml
+++ b/locales/zh-CN.yaml
@@ -31,15 +31,15 @@ panel:
  pureCloseSystemSet: 关闭配置
  pureClearCacheAndToLogin: 清空缓存并返回登录页
  pureClearCache: 清空缓存
-  pureOverallStyle: 整体风格
-  pureOverallStyleLight: 浅色
-  pureOverallStyleLightTip: 清新启航，点亮舒适的工作界面
-  pureOverallStyleDark: 深色
-  pureOverallStyleDarkTip: 月光序曲，沉醉于夜的静谧雅致
-  pureOverallStyleSystem: 自动
-  pureOverallStyleSystemTip: 同步时光，界面随晨昏自然呼应
+  pureThemeMode: 主题模式
+  pureThemeModeLight: 浅色
+  pureThemeModeLightTip: 清新启航，点亮舒适的工作界面
+  pureThemeModeDark: 深色
+  pureThemeModeDarkTip: 月光序曲，沉醉于夜的静谧雅致
+  pureThemeModeSystem: 自动
+  pureThemeModeSystemTip: 同步时光，界面随晨昏自然呼应
  pureThemeColor: 主题色
-  pureLayoutModel: 导航模式
+  pureMenuLayout: 菜单布局
  pureVerticalTip: 左侧菜单，亲切熟悉
  pureHorizontalTip: 顶部菜单，简洁概览
  pureMixTip: 混合菜单，灵活多变
@@ -108,6 +108,7 @@ menus:
  pureTypeit: 打字机
  pureJsonEditor: JSON编辑器
  pureColorPicker: 颜色选择器
+  pureColorPickerPanel: 颜色选择器面板
  pureDatePicker: 日期选择器
  pureDateTimePicker: 日期时间选择器
  pureTimePicker: 时间选择器
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "vue-pure-admin",
-  "version": "6.1.0",
+  "version": "6.2.0",
  "private": true,
  "type": "module",
  "scripts": {
@@ -54,25 +54,25 @@
    "@logicflow/extension": "^1.2.28",
    "@pureadmin/descriptions": "^1.2.1",
    "@pureadmin/table": "^3.3.0",
-    "@pureadmin/utils": "^2.6.2",
+    "@pureadmin/utils": "^2.6.3",
    "@vue-flow/background": "^1.3.2",
-    "@vue-flow/core": "^1.46.4",
-    "@vueuse/core": "^13.9.0",
+    "@vue-flow/core": "^1.48.0",
+    "@vueuse/core": "^14.1.0",
    "@vueuse/motion": "^3.0.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.12.2",
+    "axios": "^1.13.2",
    "china-area-data": "^5.0.1",
    "codemirror": "^5.65.20",
    "codemirror-editor-vue3": "^2.8.0",
    "cropperjs": "^1.6.2",
-    "dayjs": "^1.11.18",
-    "deep-chat": "^2.2.2",
-    "echarts": "^5.6.0",
-    "el-table-infinite-scroll": "^3.0.7",
-    "element-plus": "^2.11.2",
+    "dayjs": "^1.11.19",
+    "deep-chat": "^2.3.0",
+    "echarts": "^6.0.0",
+    "el-table-infinite-scroll": "^3.0.8",
+    "element-plus": "^2.11.9",
    "highlight.js": "^11.11.1",
    "intro.js": "^7.2.0",
    "js-cookie": "^3.0.5",
@@ -83,24 +83,24 @@
    "mqtt": "4.3.7",
    "nprogress": "^0.2.0",
    "path-browserify": "^1.0.1",
-    "pinia": "^3.0.3",
+    "pinia": "^3.0.4",
    "pinyin-pro": "^3.27.0",
-    "plus-pro-components": "^0.1.29",
+    "plus-pro-components": "^0.1.30",
    "qrcode": "^1.5.4",
    "qs": "^6.14.0",
    "responsive-storage": "^2.2.0",
    "sortablejs": "^1.15.6",
-    "swiper": "^11.2.10",
+    "swiper": "^12.0.3",
    "typeit": "^8.8.7",
    "v-contextmenu": "^3.2.0",
    "v3-infinite-loading": "^1.3.2",
    "vditor": "^3.11.2",
    "version-rocket": "^1.7.4",
-    "vue": "^3.5.21",
-    "vue-i18n": "^11.1.12",
-    "vue-json-pretty": "^2.5.0",
+    "vue": "^3.5.25",
+    "vue-i18n": "^11.2.2",
+    "vue-json-pretty": "^2.6.0",
    "vue-pdf-embed": "^2.1.3",
-    "vue-router": "^4.5.1",
+    "vue-router": "^4.6.3",
    "vue-tippy": "^6.7.1",
    "vue-types": "^6.0.0",
    "vue-virtual-scroller": "2.0.0-beta.8",
@@ -109,73 +109,74 @@
    "vue3-puzzle-vcode": "^1.1.7",
    "vuedraggable": "^4.1.0",
    "vxe-table": "4.6.25",
-    "wavesurfer.js": "^7.10.1",
+    "wavesurfer.js": "^7.11.1",
    "xgplayer": "^3.0.23",
    "xlsx": "^0.18.5"
  },
  "devDependencies": {
-    "@commitlint/cli": "^19.8.1",
-    "@commitlint/config-conventional": "^19.8.1",
-    "@commitlint/types": "^19.8.1",
-    "@eslint/js": "^9.35.0",
-    "@faker-js/faker": "^9.9.0",
-    "@iconify/json": "^2.2.384",
+    "@commitlint/cli": "^20.1.0",
+    "@commitlint/config-conventional": "^20.0.0",
+    "@commitlint/types": "^20.0.0",
+    "@eslint/js": "^9.39.1",
+    "@faker-js/faker": "^10.1.0",
+    "@iconify/json": "^2.2.412",
    "@iconify/vue": "4.2.0",
-    "@intlify/unplugin-vue-i18n": "^6.0.8",
-    "@tailwindcss/vite": "^4.1.13",
-    "@types/codemirror": "^5.60.16",
+    "@intlify/unplugin-vue-i18n": "^11.0.1",
+    "@tailwindcss/vite": "^4.1.17",
+    "@types/codemirror": "^5.60.17",
    "@types/dagre": "^0.7.53",
    "@types/intro.js": "^5.1.5",
    "@types/js-cookie": "^3.0.6",
-    "@types/node": "^20.19.14",
+    "@types/node": "^20.19.25",
    "@types/nprogress": "^0.2.3",
    "@types/path-browserify": "^1.0.3",
-    "@types/qrcode": "^1.5.5",
+    "@types/qrcode": "^1.5.6",
    "@types/qs": "^6.14.0",
-    "@types/sortablejs": "^1.15.8",
-    "@vitejs/plugin-vue": "^6.0.1",
-    "@vitejs/plugin-vue-jsx": "^5.1.1",
+    "@types/sortablejs": "^1.15.9",
+    "@vitejs/plugin-vue": "^6.0.2",
+    "@vitejs/plugin-vue-jsx": "^5.1.2",
    "boxen": "^8.0.1",
-    "code-inspector-plugin": "^1.2.8",
-    "cssnano": "^7.1.1",
+    "code-inspector-plugin": "^1.3.0",
+    "cssnano": "^7.1.2",
    "dagre": "^0.8.5",
-    "eslint": "^9.35.0",
+    "eslint": "^9.39.1",
    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-better-tailwindcss": "4.0.0-beta.6",
    "eslint-plugin-prettier": "^5.5.4",
-    "eslint-plugin-vue": "^10.4.0",
+    "eslint-plugin-vue": "^10.6.2",
    "gradient-string": "^3.0.0",
    "husky": "^9.1.7",
-    "lint-staged": "^16.1.6",
+    "lint-staged": "^16.2.7",
    "postcss": "^8.5.6",
    "postcss-html": "^1.8.0",
    "postcss-load-config": "^6.0.1",
    "postcss-scss": "^4.0.9",
-    "prettier": "^3.6.2",
-    "rimraf": "^6.0.1",
-    "rollup-plugin-visualizer": "^6.0.3",
-    "sass": "^1.92.1",
-    "stylelint": "^16.24.0",
-    "stylelint-config-recess-order": "^7.3.0",
+    "prettier": "^3.7.3",
+    "rimraf": "^6.1.2",
+    "rollup-plugin-visualizer": "^6.0.5",
+    "sass": "^1.94.2",
+    "stylelint": "^16.26.1",
+    "stylelint-config-recess-order": "^7.4.0",
    "stylelint-config-recommended-vue": "^1.6.1",
    "stylelint-config-standard-scss": "^14.0.0",
    "stylelint-prettier": "^5.0.3",
    "svgo": "^4.0.0",
-    "tailwindcss": "^4.1.13",
-    "typescript": "^5.9.2",
-    "typescript-eslint": "^8.43.0",
-    "unplugin-icons": "^22.3.0",
-    "vite": "^7.1.5",
+    "tailwindcss": "^4.1.17",
+    "typescript": "^5.9.3",
+    "typescript-eslint": "^8.48.0",
+    "unplugin-icons": "^22.5.0",
+    "vite": "^7.2.4",
    "vite-plugin-cdn-import": "^1.0.1",
    "vite-plugin-compression": "^0.5.1",
-    "vite-plugin-fake-server": "^2.2.0",
+    "vite-plugin-fake-server": "^2.2.2",
    "vite-plugin-remove-console": "^2.2.0",
    "vite-plugin-router-warn": "^1.0.0",
    "vite-svg-loader": "^5.1.0",
    "vue-eslint-parser": "^10.2.0",
-    "vue-tsc": "^3.0.7"
+    "vue-tsc": "^3.1.5"
  },
  "engines": {
-    "node": "^20.19.0 || >=22.12.0",
+    "node": "^20.19.0 || >=22.13.0",
    "pnpm": ">=9"
  },
  "pnpm": {
@@ -206,4 +207,4 @@
      "vue3-danmaku"
    ]
  }
-}
+}
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/public/platform-config.json
+++ b/public/platform-config.json
@@ -1,5 +1,5 @@
 {
-  "Version": "6.1.0",
+  "Version": "6.2.0",
  "Title": "PureAdmin",
  "FixedHeader": true,
  "HiddenSideBar": false,
@@ -9,7 +9,7 @@
  "Layout": "vertical",
  "Theme": "light",
  "DarkMode": false,
-  "OverallStyle": "light",
+  "ThemeMode": "light",
  "Grey": false,
  "Weak": false,
  "HideTabs": false,
--- a/src/App.vue
+++ b/src/App.vue
@@ -16,7 +16,6 @@ import en from "element-plus/es/locale/lang/en";
 import zhCn from "element-plus/es/locale/lang/zh-cn";
 import plusEn from "plus-pro-components/es/locale/lang/en";
 import plusZhCn from "plus-pro-components/es/locale/lang/zh-cn";
-import { ElNotification } from "element-plus";

 export default defineComponent({
  name: "app",
@@ -54,32 +53,6 @@ export default defineComponent({
        }
      );
    }
-  },
-  mounted() {
-    ElNotification({
-      title: "国庆限时优惠活动",
-      duration: 0,
-      customClass: "fullpage-notification",
-      // @ts-expect-error
-      style: { width: "260px" },
-      position: "bottom-right",
-      dangerouslyUseHTMLString: true,
-      message: `
-        <a target='_blank' class='block text-base text-center border mt-4 rounded hover:text-[red]!' href='https://pure-admin.cn/pages/service/#最新活动'>
-        点我查看
-        </a>
-      `
-    });
  }
 });
 </script>
-
-<style>
-.fullpage-notification > .el-notification__group > .el-notification__closeBtn {
-  top: 15px;
-}
-.fullpage-notification > div > h2 {
-  color: red;
-  font-size: 18px;
-}
-</style>
--- a/src/components/ReDialog/type.ts
+++ b/src/components/ReDialog/type.ts
@@ -35,8 +35,20 @@ type DialogProps = {
  top?: string;
  /** 是否需要遮罩层，默认 `true` */
  modal?: boolean;
+  /** 是否允许穿透遮罩层，默认 `false`。使用时需将 `modal` 属性设置为 `false` */
+  modalPenetrable?: boolean;
+  /** 遮罩的自定义类名 */
+  modalClass?: string;
+  /** `header` 部分的自定义 `class` 名 */
+  headerClass?: string;
+  /** `body` 部分的自定义 `class` 名 */
+  bodyClass?: string;
+  /** `footer` 部分的自定义 `class` 名 */
+  footerClass?: string;
  /** `Dialog` 自身是否插入至 `body` 元素上。嵌套的 `Dialog` 必须指定该属性并赋值为 `true`，默认 `false` */
  appendToBody?: boolean;
+  /** `Dialog` 挂载到哪个 `DOM` 元素，该属性会覆盖 `append-to-body` 属性，默认 `body` */
+  appendTo?: string | HTMLElement;
  /** 是否在 `Dialog` 出现时将 `body` 滚动锁定，默认 `true` */
  lockScroll?: boolean;
  /** `Dialog` 的自定义类名 */
@@ -57,12 +69,22 @@ type DialogProps = {
  beforeClose?: (done: DoneFn) => void;
  /** 为 `Dialog` 启用可拖拽功能，默认 `false` */
  draggable?: boolean;
+  /** 拖动范围可以超出可视区，默认 `false` */
+  overflow?: boolean;
  /** 是否让 `Dialog` 的 `header` 和 `footer` 部分居中排列，默认 `false` */
  center?: boolean;
  /** 是否水平垂直对齐对话框，默认 `false` */
  alignCenter?: boolean;
  /** 当关闭 `Dialog` 时，销毁其中的元素，默认 `false` */
  destroyOnClose?: boolean;
+  /** 自定义关闭图标，默认 `Close` */
+  closeIcon?: string | Component;
+  /** 和原生的 `CSS` 的 `z-index` 相同，改变 `z` 轴的顺序 */
+  zIndex?: number;
+  /** `header` 的 `aria-level` 属性 */
+  headerAriaLevel?: string;
+  /** 对话框动画的自定义过渡配置。可以是一个字符串（过渡名称），也可以是一个包含 `Vue` 过渡属性的对象，默认 `dialog-fade` */
+  transition?: string | object;
 };

 //element-plus.org/zh-CN/component/popconfirm.html#attributes
--- a/src/components/ReDrawer/type.ts
+++ b/src/components/ReDrawer/type.ts
@@ -6,7 +6,6 @@ type ArgsType = {
  /** `cancel` 点击取消按钮、`sure` 点击确定按钮、`close` 点击右上角关闭按钮或空白页或按下了 `esc` 键 */
  command: "cancel" | "sure" | "close";
 };
-
 type ButtonType =
  | "primary"
  | "success"
@@ -20,11 +19,11 @@ type DrawerProps = {
  visible?: boolean;
  /** `Drawer` 自身是否插入至 `body` 元素上。嵌套的 `Drawer` 必须指定该属性并赋值为 `true`，默认 `false` */
  appendToBody?: boolean;
-  /** 挂载到哪个 `DOM` 元素 将覆盖 `appendToBody` */
+  /** 挂载到哪个 `DOM` 元素，会覆盖 `appendToBody` 属性，默认 `body` */
  appendTo?: string;
  /** 是否在 `Drawer` 出现时将 `body` 滚动锁定，默认 `true` */
  lockScroll?: boolean;
-  /** 关闭前的回调，会暂停 `Drawer` 的关闭 回调函数内执行 `done` 参数方法的时候才是真正关闭对话框的时候 */
+  /** 关闭前的回调，会暂停 `Drawer` 的关闭，回调函数内执行 `done` 参数方法的时候才是真正关闭对话框的时候 */
  beforeClose?: (done: DoneFn) => void;
  /** 是否可以通过点击 `modal` 关闭 `Drawer` ，默认 `true` */
  closeOnClickModal?: boolean;
@@ -44,9 +43,13 @@ type DrawerProps = {
  destroyOnClose?: boolean;
  /** 是否需要遮罩层，默认 `true` */
  modal?: boolean;
+  /** 是否允许穿透遮罩层，默认 `false`。使用时需将 `modal` 属性设置为 `false` */
+  modalPenetrable?: boolean;
  /** `Drawer` 打开的方向，默认 `rtl` */
  direction?: "rtl" | "ltr" | "ttb" | "btt";
-  /** `Drawer` 窗体的大小, 当使用 `number` 类型时, 以像素为单位, 当使用 `string` 类型时, 请传入 `'x%'`, 否则便会以 `number` 类型解释 */
+  /** 是否启用可调整大小的功能，默认 `false` */
+  resizable?: boolean;
+  /** `Drawer` 窗体的大小, 当使用 `number` 类型时, 以像素为单位, 当使用 `string` 类型时, 请传入 `'x%'`, 否则便会以 `number` 类型解释，默认 `30%` */
  size?: string | number;
  /** `Drawer` 的标题 */
  title?: string;
@@ -54,6 +57,12 @@ type DrawerProps = {
  withHeader?: boolean;
  /** 遮罩层的自定义类名 */
  modalClass?: string;
+  /** `header` 部分的自定义 `class` 名 */
+  headerClass?: string;
+  /** `body` 部分的自定义 `class` 名 */
+  bodyClass?: string;
+  /** `footer` 部分的自定义 `class` 名 */
+  footerClass?: string;
  /** 设置 `z-index` */
  zIndex?: number;
  /** `header` 的 `aria-level` 属性，默认 `2` */
--- a/src/components/RePureTableBar/src/bar.tsx
+++ b/src/components/RePureTableBar/src/bar.tsx
@@ -100,7 +100,7 @@ export default defineComponent({
        "pt-[3px]",
        "px-[11px]",
        "border-b-[1px]",
-        "border-solid",
+        "border-b-solid",
        "border-[#dcdfe6]",
        "dark:border-[#303030]"
      ];
--- a/src/components/ReVxeTableBar/src/bar.tsx
+++ b/src/components/ReVxeTableBar/src/bar.tsx
@@ -93,7 +93,7 @@ export default defineComponent({
        "pt-[3px]",
        "px-[11px]",
        "border-b-[1px]",
-        "border-solid",
+        "border-b-solid",
        "border-[#dcdfe6]",
        "dark:border-[#303030]"
      ];
--- a/src/directives/ripple/index.ts
+++ b/src/directives/ripple/index.ts
@@ -10,8 +10,10 @@ export interface RippleOptions {
  circle?: boolean;
 }

-export interface RippleDirectiveBinding
-  extends Omit<DirectiveBinding, "modifiers" | "value"> {
+export interface RippleDirectiveBinding extends Omit<
+  DirectiveBinding,
+  "modifiers" | "value"
+> {
  value?: boolean | { class: string };
  modifiers: {
    center?: boolean;
--- a/src/layout/components/lay-footer/index.vue
+++ b/src/layout/components/lay-footer/index.vue
@@ -8,7 +8,7 @@ const TITLE = getConfig("Title");
  <footer
    class="layout-footer text-[rgba(0,0,0,0.6)] dark:text-[rgba(220,220,242,0.8)]"
  >
-    Copyright © 2020-2025
+    Copyright © 2020-present
    <a
      class="hover:text-primary!"
      href="https://github.com/pure-admin"
@@ -16,23 +16,12 @@ const TITLE = getConfig("Title");
    >
      &nbsp;{{ TITLE }}
    </a>
-    <!-- <div class="ml-8">
-      <span>赞助商：</span>
-      <a
-        class="hover:text-primary"
-        href="https://ai-tools.cn/resume/start"
-        target="_blank"
-      >
-        二猫 AI 简历
-      </a>
-    </div> -->
  </footer>
 </template>

 <style lang="scss" scoped>
 .layout-footer {
  display: flex;
-  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  width: 100%;
--- a/src/layout/components/lay-navbar/index.vue
+++ b/src/layout/components/lay-navbar/index.vue
@@ -33,7 +33,7 @@ const { t, locale, translationCh, translationEn } = useTranslationLang();
 </script>

 <template>
-  <div class="navbar bg-[#fff] shadow-xs shadow-[rgba(0,21,41,0.08)]">
+  <div class="navbar bg-white shadow-xs shadow-[rgba(0,21,41,0.08)]">
    <LaySidebarTopCollapse
      v-if="device === 'mobile'"
      class="hamburger-container"
--- a/src/layout/components/lay-notice/components/NoticeItem.vue
+++ b/src/layout/components/lay-notice/components/NoticeItem.vue
@@ -49,7 +49,7 @@ function hoverDescription(event, description) {

 <template>
  <div
-    class="notice-container border-0 border-b-[1px] border-solid border-[#f0f0f0] dark:border-[#303030]"
+    class="notice-container border-0 border-b border-solid border-[#f0f0f0] dark:border-[#303030]"
  >
    <el-avatar
      v-if="noticeItem.avatar"
--- a/src/layout/components/lay-panel/index.vue
+++ b/src/layout/components/lay-panel/index.vue
@@ -51,7 +51,7 @@ onBeforeUnmount(() => {
    <div class="right-panel-background" />
    <div ref="target" class="right-panel bg-bg_color">
      <div
-        class="project-configuration border-0 border-b-[1px] border-solid border-[var(--pure-border-color)]"
+        class="project-configuration border-0 border-b border-solid border-(--pure-border-color)"
      >
        <h4 class="dark:text-white">
          {{ t("panel.pureSystemSet") }}
@@ -78,7 +78,7 @@ onBeforeUnmount(() => {
      </el-scrollbar>

      <div
-        class="flex justify-end p-3 border-0 border-t-[1px] border-solid border-[var(--pure-border-color)]"
+        class="flex justify-end p-3 border-0 border-t border-solid border-(--pure-border-color)"
      >
        <el-button
          v-tippy="{
--- a/src/layout/components/lay-setting/index.vue
+++ b/src/layout/components/lay-setting/index.vue
@@ -37,7 +37,7 @@ const horizontalRef = ref();

 const {
  dataTheme,
-  overallStyle,
+  themeMode,
  layoutTheme,
  themeColors,
  toggleClass,
@@ -50,7 +50,7 @@ if (unref(layoutTheme)) {
  const layout = unref(layoutTheme).layout;
  const theme = unref(layoutTheme).theme;
  document.documentElement.setAttribute("data-theme", theme);
-  setLayoutModel(layout);
+  setMenuLayout(layout);
 }

 /** 默认灵动模式 */
@@ -195,24 +195,24 @@ const pClass = computed(() => {
 const themeOptions = computed<Array<OptionsType>>(() => {
  return [
    {
-      label: t("panel.pureOverallStyleLight"),
+      label: t("panel.pureThemeModeLight"),
      icon: DayIcon,
      theme: "light",
-      tip: t("panel.pureOverallStyleLightTip"),
+      tip: t("panel.pureThemeModeLightTip"),
      iconAttrs: { fill: isDark.value ? "#fff" : "#000" }
    },
    {
-      label: t("panel.pureOverallStyleDark"),
+      label: t("panel.pureThemeModeDark"),
      icon: DarkIcon,
      theme: "dark",
-      tip: t("panel.pureOverallStyleDarkTip"),
+      tip: t("panel.pureThemeModeDarkTip"),
      iconAttrs: { fill: isDark.value ? "#fff" : "#000" }
    },
    {
-      label: t("panel.pureOverallStyleSystem"),
+      label: t("panel.pureThemeModeSystem"),
      icon: SystemIcon,
      theme: "system",
-      tip: t("panel.pureOverallStyleSystemTip"),
+      tip: t("panel.pureThemeModeSystemTip"),
      iconAttrs: { fill: isDark.value ? "#fff" : "#000" }
    }
  ];
@@ -238,8 +238,8 @@ const markOptions = computed<Array<OptionsType>>(() => {
  ];
 });

-/** 设置导航模式 */
-function setLayoutModel(layout: string) {
+/** 设置菜单布局 */
+function setMenuLayout(layout: string) {
  layoutTheme.value.layout = layout;
  window.document.body.setAttribute("layout", layout);
  $storage.layout = {
@@ -249,7 +249,7 @@ function setLayoutModel(layout: string) {
    sidebarStatus: $storage.layout?.sidebarStatus,
    epThemeColor: $storage.layout?.epThemeColor,
    themeColor: $storage.layout?.themeColor,
-    overallStyle: $storage.layout?.overallStyle
+    themeMode: $storage.layout?.themeMode
  };
  useAppStoreHook().setLayout(layout);
 }
@@ -276,15 +276,15 @@ watch($storage, ({ layout }) => {

 const mediaQueryList = window.matchMedia("(prefers-color-scheme: dark)");

-/** 根据操作系统主题设置平台整体风格 */
+/** 根据操作系统主题设置平台主题模式 */
 function updateTheme() {
-  if (overallStyle.value !== "system") return;
+  if (themeMode.value !== "system") return;
  if (mediaQueryList.matches) {
    dataTheme.value = true;
  } else {
    dataTheme.value = false;
  }
-  dataThemeChange(overallStyle.value);
+  dataThemeChange(themeMode.value);
 }

 function removeMatchMedia() {
@@ -317,18 +317,18 @@ onUnmounted(() => removeMatchMedia);
 <template>
  <LayPanel>
    <div class="p-5">
-      <p :class="pClass">{{ t("panel.pureOverallStyle") }}</p>
+      <p :class="pClass">{{ t("panel.pureThemeMode") }}</p>
      <Segmented
        resize
        class="select-none"
-        :modelValue="overallStyle === 'system' ? 2 : dataTheme ? 1 : 0"
+        :modelValue="themeMode === 'system' ? 2 : dataTheme ? 1 : 0"
        :options="themeOptions"
        @change="
          theme => {
            theme.index === 1 && theme.index !== 2
              ? (dataTheme = true)
              : (dataTheme = false);
-            overallStyle = theme.option.theme;
+            themeMode = theme.option.theme;
            dataThemeChange(theme.option.theme);
            theme.index === 2 && watchSystemThemeChange();
          }
@@ -354,7 +354,7 @@ onUnmounted(() => removeMatchMedia);
        </li>
      </ul>

-      <p :class="['mt-5!', pClass]">{{ t("panel.pureLayoutModel") }}</p>
+      <p :class="['mt-5!', pClass]">{{ t("panel.pureMenuLayout") }}</p>
      <ul class="pure-theme">
        <li
          ref="verticalRef"
@@ -363,7 +363,7 @@ onUnmounted(() => removeMatchMedia);
            zIndex: 41000
          }"
          :class="layoutTheme.layout === 'vertical' ? 'is-select' : ''"
-          @click="setLayoutModel('vertical')"
+          @click="setMenuLayout('vertical')"
        >
          <div />
          <div />
@@ -376,7 +376,7 @@ onUnmounted(() => removeMatchMedia);
            zIndex: 41000
          }"
          :class="layoutTheme.layout === 'horizontal' ? 'is-select' : ''"
-          @click="setLayoutModel('horizontal')"
+          @click="setMenuLayout('horizontal')"
        >
          <div />
          <div />
@@ -389,7 +389,7 @@ onUnmounted(() => removeMatchMedia);
            zIndex: 41000
          }"
          :class="layoutTheme.layout === 'mix' ? 'is-select' : ''"
-          @click="setLayoutModel('mix')"
+          @click="setMenuLayout('mix')"
        >
          <div />
          <div />
@@ -416,7 +416,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-[var(--pure-border-color)]"
+          class="bg-transparent flex-c w-full h-20 rounded-md border border-(--pure-border-color)"
          @click="setStretch(!settings.stretch)"
        >
          <div
--- a/src/layout/components/lay-tag/index.scss
+++ b/src/layout/components/lay-tag/index.scss
@@ -321,10 +321,9 @@

  .chrome-tab-divider {
    position: absolute;
-    right: 7px;
+    left: 7px;
    width: 1px;
    height: 14px;
-    background-color: #2b2d2f;
  }

  &:hover {
--- a/src/layout/components/lay-tag/index.vue
+++ b/src/layout/components/lay-tag/index.vue
@@ -356,7 +356,7 @@ function onClickDrop(key, item, selectRoute?: RouteConfigs) {
      break;
  }
  setTimeout(() => {
-    showMenuModel(route.fullPath, route.query);
+    showMenuModel(route.fullPath, route.query, route.params);
  });
 }

@@ -391,15 +391,18 @@ function disabledMenus(value: boolean, fixedTag = false) {
 function showMenuModel(
  currentPath: string,
  query: object = {},
+  params: object = {},
  refresh = false
 ) {
  const allRoute = multiTags.value;
  const routeLength = multiTags.value.length;
  let currentIndex = -1;
-  if (isAllEmpty(query)) {
-    currentIndex = allRoute.findIndex(v => v.path === currentPath);
-  } else {
+  if (!isAllEmpty(params)) {
+    currentIndex = allRoute.findIndex(v => isEqual(v.params, params));
+  } else if (!isAllEmpty(query)) {
    currentIndex = allRoute.findIndex(v => isEqual(v.query, query));
+  } else {
+    currentIndex = allRoute.findIndex(v => v.path === currentPath);
  }
  function fixedTagDisabled() {
    if (allRoute[currentIndex]?.meta?.fixedTag) {
@@ -465,14 +468,14 @@ function openMenu(tag, e) {
  } else if (route.path !== tag.path && route.name !== tag.name) {
    // 右键菜单不匹配当前路由，隐藏刷新
    tagsViews[0].show = false;
-    showMenuModel(tag.path, tag.query);
+    showMenuModel(tag.path, tag.query, tag.params);
  } else if (multiTags.value.length === 2 && route.path !== tag.path) {
    showMenus(true);
    // 只有两个标签时不显示关闭其他标签页
    tagsViews[4].show = false;
-  } else if (route.path === tag.path) {
-    // 右键当前激活的菜单
-    showMenuModel(tag.path, tag.query, true);
+    showMenuModel(tag.path, tag.query, tag.params);
+  } else {
+    showMenuModel(tag.path, tag.query, tag.params, true);
  }

  currentSelect.value = tag;
@@ -615,6 +618,10 @@ onBeforeUnmount(() => {
            />
          </template>
          <div v-else class="chrome-tab">
+            <span
+              v-if="index !== 0 && index !== activeIndex"
+              class="chrome-tab-divider bg-[#e2e2e2] dark:bg-[#2d2d2d]"
+            />
            <div class="chrome-tab__bg">
              <TagChrome />
            </div>
@@ -628,7 +635,6 @@ onBeforeUnmount(() => {
            >
              <IconifyIconOffline :icon="Close" />
            </span>
-            <span class="chrome-tab-divider" />
          </div>
        </div>
      </div>
--- a/src/layout/frame.vue
+++ b/src/layout/frame.vue
@@ -19,13 +19,22 @@ const loading = ref(true);
 const currentRoute = useRoute();
 const frameSrc = ref<string>("");
 const frameRef = ref<HTMLElement | null>(null);
+const fallbackTimer = ref<number | null>(null);
+
 if (unref(currentRoute.meta)?.frameSrc) {
  frameSrc.value = unref(currentRoute.meta)?.frameSrc as string;
 }
-unref(currentRoute.meta)?.frameLoading === false && hideLoading();
+
+function clearFallbackTimer() {
+  if (fallbackTimer.value !== null) {
+    clearTimeout(fallbackTimer.value);
+    fallbackTimer.value = null;
+  }
+}

 function hideLoading() {
  loading.value = false;
+  clearFallbackTimer();
 }

 function init() {
@@ -34,32 +43,42 @@ function init() {
    if (!iframe) return;
    const _frame = iframe as any;
    if (_frame.attachEvent) {
-      _frame.attachEvent("onload", () => {
-        hideLoading();
-      });
+      _frame.attachEvent("onload", hideLoading);
    } else {
-      iframe.onload = () => {
-        hideLoading();
-      };
+      iframe.onload = hideLoading;
    }
  });
 }

+let isRedirect = false;
+
 watch(
  () => currentRoute.fullPath,
  path => {
    if (
      currentRoute.name === "Redirect" &&
-      path.includes(props.frameInfo?.fullPath)
+      props.frameInfo?.fullPath &&
+      path.includes(props.frameInfo.fullPath)
    ) {
-      frameSrc.value = path; // redirect时，置换成任意值，待重定向后 重新赋值
+      isRedirect = true;
      loading.value = true;
+      return;
    }
-    // 重新赋值
-    if (props.frameInfo?.fullPath === path) {
-      frameSrc.value = props.frameInfo?.frameSrc;
+    if (props.frameInfo?.fullPath === path && isRedirect) {
+      loading.value = true;
+      clearFallbackTimer();
+      const url = new URL(props.frameInfo.frameSrc, window.location.origin);
+      const joinChar = url.search ? "&" : "?";
+      frameSrc.value = `${props.frameInfo.frameSrc}${joinChar}t=${Date.now()}`;
+      fallbackTimer.value = window.setTimeout(() => {
+        if (loading.value) {
+          hideLoading();
+        }
+      }, 1500);
+      isRedirect = false;
    }
-  }
+  },
+  { immediate: true }
 );

 onMounted(() => {
--- a/src/layout/hooks/useDataThemeChange.ts
+++ b/src/layout/hooks/useDataThemeChange.ts
@@ -33,7 +33,7 @@ export function useDataThemeChange() {

  const { $storage } = useGlobal<GlobalPropertiesApi>();
  const dataTheme = ref<boolean>($storage?.layout?.darkMode);
-  const overallStyle = ref<string>($storage?.layout?.overallStyle);
+  const themeMode = ref<string>($storage?.layout?.themeMode);
  const body = document.documentElement as HTMLElement;

  function toggleClass(flag: boolean, clsName: string, target?: HTMLElement) {
@@ -59,7 +59,7 @@ export function useDataThemeChange() {
      sidebarStatus: $storage.layout?.sidebarStatus,
      epThemeColor: $storage.layout?.epThemeColor,
      themeColor: isClick ? theme : storageThemeColor,
-      overallStyle: overallStyle.value
+      themeMode: themeMode.value
    };

    if (theme === "default" || theme === "light") {
@@ -89,9 +89,9 @@ export function useDataThemeChange() {
    }
  };

-  /** 浅色、深色整体风格切换 */
-  function dataThemeChange(overall?: string) {
-    overallStyle.value = overall;
+  /** 浅色、深色主题模式切换 */
+  function dataThemeChange(mode?: string) {
+    themeMode.value = mode;
    if (useEpThemeStoreHook().epTheme === "light" && dataTheme.value) {
      setLayoutThemeColor("default", false);
    } else {
@@ -126,7 +126,7 @@ export function useDataThemeChange() {
  return {
    body,
    dataTheme,
-    overallStyle,
+    themeMode,
    layoutTheme,
    themeColors,
    onReset,
--- a/src/layout/hooks/useLayout.ts
+++ b/src/layout/hooks/useLayout.ts
@@ -29,7 +29,7 @@ export function useLayout() {
        sidebarStatus: $config?.SidebarStatus ?? true,
        epThemeColor: $config?.EpThemeColor ?? "#409EFF",
        themeColor: $config?.Theme ?? "light",
-        overallStyle: $config?.OverallStyle ?? "light"
+        themeMode: $config?.ThemeMode ?? "light"
      };
    }
    /** 灰色模式、色弱模式、隐藏标签页 */
--- a/src/layout/hooks/useTag.ts
+++ b/src/layout/hooks/useTag.ts
@@ -114,14 +114,21 @@ export function useTags() {
  ]);

  function conditionHandle(item, previous, next) {
+    const currentName = route.name || "";
+    const itemName = item.name || "";
+
    if (isBoolean(route?.meta?.showLink) && route?.meta?.showLink === false) {
      if (Object.keys(route.query).length > 0) {
-        return isEqual(route.query, item.query) ? previous : next;
+        return currentName === itemName && isEqual(route.query, item.query)
+          ? previous
+          : next;
      } else {
-        return isEqual(route.params, item.params) ? previous : next;
+        return currentName === itemName && isEqual(route.params, item.params)
+          ? previous
+          : next;
      }
    } else {
-      return route.path === item.path ? previous : next;
+      return currentName === itemName ? previous : next;
    }
  }

--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -67,16 +67,16 @@ const set: setType = reactive({
  })
 });

-function setTheme(layoutModel: string) {
-  window.document.body.setAttribute("layout", layoutModel);
+function setTheme(menuLayout: string) {
+  window.document.body.setAttribute("layout", menuLayout);
  $storage.layout = {
-    layout: `${layoutModel}`,
+    layout: `${menuLayout}`,
    theme: $storage.layout?.theme,
    darkMode: $storage.layout?.darkMode,
    sidebarStatus: $storage.layout?.sidebarStatus,
    epThemeColor: $storage.layout?.epThemeColor,
    themeColor: $storage.layout?.themeColor,
-    overallStyle: $storage.layout?.overallStyle
+    themeMode: $storage.layout?.themeMode
  };
 }

@@ -123,7 +123,7 @@ onMounted(() => {
 });

 onBeforeMount(() => {
-  useDataThemeChange().dataThemeChange($storage.layout?.overallStyle);
+  useDataThemeChange().dataThemeChange($storage.layout?.themeMode);
 });

 const LayHeader = defineComponent({
--- a/src/plugins/elementPlus.ts
+++ b/src/plugins/elementPlus.ts
@@ -3,15 +3,13 @@ import type { App, Component } from "vue";
 import {
  /**
   * 为了方便演示平台将 element-plus 导出的所有组件引入，实际使用中如果你没用到哪个组件，将其注释掉就行
-   * 导出来源：https://github.com/element-plus/element-plus/blob/dev/packages/element-plus/component.ts#L111-L211
+   * 导出来源：https://github.com/element-plus/element-plus/blob/dev/packages/element-plus/component.ts#L116-L226
   * */
  ElAffix,
  ElAlert,
  ElAutocomplete,
  ElAutoResizer,
  ElAvatar,
-  ElAnchor,
-  ElAnchorLink,
  ElBacktop,
  ElBadge,
  ElBreadcrumb,
@@ -32,6 +30,7 @@ import {
  ElCollapse,
  ElCollapseItem,
  ElCollapseTransition,
+  ElColorPickerPanel,
  ElColorPicker,
  ElConfigProvider,
  ElContainer,
@@ -40,6 +39,7 @@ import {
  ElHeader,
  ElMain,
  ElDatePicker,
+  ElDatePickerPanel,
  ElDescriptions,
  ElDescriptionsItem,
  ElDialog,
@@ -56,6 +56,7 @@ import {
  ElImageViewer,
  ElInput,
  ElInputNumber,
+  ElInputTag,
  ElLink,
  ElMenu,
  ElMenuItem,
@@ -107,17 +108,22 @@ import {
  ElWatermark,
  ElTour,
  ElTourStep,
+  ElAnchor,
+  ElAnchorLink,
  ElSegmented,
+  ElMention,
+  ElSplitter,
+  ElSplitterPanel,
  /**
   * 为了方便演示平台将 element-plus 导出的所有插件引入，实际使用中如果你没用到哪个插件，将其注释掉就行
   * 导出来源：https://github.com/element-plus/element-plus/blob/dev/packages/element-plus/plugin.ts#L11-L16
   * */
-  ElLoading, // v-loading 指令
  ElInfiniteScroll, // v-infinite-scroll 指令
-  ElPopoverDirective, // v-popover 指令
+  ElLoading, // v-loading 指令
  ElMessage, // $message 全局属性对象globalProperties
  ElMessageBox, // $msgbox、$alert、$confirm、$prompt 全局属性对象globalProperties
-  ElNotification // $notify 全局属性对象globalProperties
+  ElNotification, // $notify 全局属性对象globalProperties
+  ElPopoverDirective // v-popover 指令
 } from "element-plus";

 const components = [
@@ -126,8 +132,6 @@ const components = [
  ElAutocomplete,
  ElAutoResizer,
  ElAvatar,
-  ElAnchor,
-  ElAnchorLink,
  ElBacktop,
  ElBadge,
  ElBreadcrumb,
@@ -148,6 +152,7 @@ const components = [
  ElCollapse,
  ElCollapseItem,
  ElCollapseTransition,
+  ElColorPickerPanel,
  ElColorPicker,
  ElConfigProvider,
  ElContainer,
@@ -156,6 +161,7 @@ const components = [
  ElHeader,
  ElMain,
  ElDatePicker,
+  ElDatePickerPanel,
  ElDescriptions,
  ElDescriptionsItem,
  ElDialog,
@@ -172,6 +178,7 @@ const components = [
  ElImageViewer,
  ElInput,
  ElInputNumber,
+  ElInputTag,
  ElLink,
  ElMenu,
  ElMenuItem,
@@ -223,16 +230,21 @@ const components = [
  ElWatermark,
  ElTour,
  ElTourStep,
-  ElSegmented
+  ElAnchor,
+  ElAnchorLink,
+  ElSegmented,
+  ElMention,
+  ElSplitter,
+  ElSplitterPanel
 ];

 const plugins = [
-  ElLoading,
  ElInfiniteScroll,
-  ElPopoverDirective,
+  ElLoading,
  ElMessage,
  ElMessageBox,
-  ElNotification
+  ElNotification,
+  ElPopoverDirective
 ];

 /** 按需引入`element-plus` */
--- a/src/router/modules/components.ts
+++ b/src/router/modules/components.ts
@@ -119,8 +119,7 @@ export default {
      name: "PureSlider",
      component: () => import("@/views/components/slider/index.vue"),
      meta: {
-        title: $t("menus.pureSlider"),
-        extraIcon: "IF-pure-iconfont-new svg"
+        title: $t("menus.pureSlider")
      }
    },
    {
@@ -195,6 +194,15 @@ export default {
        title: $t("menus.pureColorPicker")
      }
    },
+    {
+      path: "/components/color-picker-panel",
+      name: "ColorPickerPanel",
+      component: () => import("@/views/components/color-picker-panel.vue"),
+      meta: {
+        title: $t("menus.pureColorPickerPanel"),
+        extraIcon: "IF-pure-iconfont-new svg"
+      }
+    },
    {
      path: "/components/selector",
      name: "Selector",
--- a/src/store/modules/app.ts
+++ b/src/store/modules/app.ts
@@ -18,7 +18,7 @@ export const useAppStore = defineStore("pure-app", {
      withoutAnimation: false,
      isClickCollapse: false
    },
-    // 这里的layout用于监听容器拖拉后恢复对应的导航模式
+    // 这里的layout用于监听容器拖拉后恢复对应的菜单布局
    layout:
      storageLocal().getItem<StorageConfigs>(
        `${responsiveStorageNameSpace()}layout`
--- a/src/store/modules/epTheme.ts
+++ b/src/store/modules/epTheme.ts
@@ -21,7 +21,7 @@ export const useEpThemeStore = defineStore("pure-epTheme", {
    getEpThemeColor(state) {
      return state.epThemeColor;
    },
-    /** 用于mix导航模式下hamburger-svg的fill属性 */
+    /** 用于mix菜单布局下hamburger-svg的fill属性 */
    fill(state) {
      if (state.epTheme === "light") {
        return "#409eff";
--- a/src/store/modules/multiTags.ts
+++ b/src/store/modules/multiTags.ts
@@ -80,22 +80,15 @@ export const useMultiTagsStore = defineStore("pure-multiTags", {
            if (isBoolean(tagVal?.meta?.showLink) && !tagVal?.meta?.showLink)
              return;
            const tagPath = tagVal.path;
-            // 判断tag是否已存在
            const tagHasExits = this.multiTags.some(tag => {
-              return tag.path === tagPath;
+              return (
+                tag.path === tagPath &&
+                isEqual(tag?.query, tagVal?.query) &&
+                isEqual(tag?.params, tagVal?.params)
+              );
            });

-            // 判断tag中的query键值是否相等
-            const tagQueryHasExits = this.multiTags.some(tag => {
-              return isEqual(tag?.query, tagVal?.query);
-            });
-
-            // 判断tag中的params键值是否相等
-            const tagParamsHasExits = this.multiTags.some(tag => {
-              return isEqual(tag?.params, tagVal?.params);
-            });
-
-            if (tagHasExits && tagQueryHasExits && tagParamsHasExits) return;
+            if (tagHasExits) return;

            // 动态路由可打开的最大数量
            const dynamicLevel = tagVal?.meta?.dynamicLevel ?? -1;
--- a/src/store/modules/permission.ts
+++ b/src/store/modules/permission.ts
@@ -2,7 +2,6 @@ import { defineStore } from "pinia";
 import {
  type cacheType,
  store,
-  debounce,
  ascending,
  getKeyList,
  filterTree,
@@ -33,33 +32,35 @@ export const usePermissionStore = defineStore("pure-permission", {
        this.constantMenus.concat(routes) as any
      );
    },
+    /** 监听缓存页面是否存在于标签页，不存在则删除 */
+    clearCache() {
+      let cacheLength = this.cachePageList.length;
+      const nameList = getKeyList(useMultiTagsStoreHook().multiTags, "name");
+      while (cacheLength > 0) {
+        nameList.findIndex(v => v === this.cachePageList[cacheLength - 1]) ===
+          -1 &&
+          this.cachePageList.splice(
+            this.cachePageList.indexOf(this.cachePageList[cacheLength - 1]),
+            1
+          );
+        cacheLength--;
+      }
+    },
    cacheOperate({ mode, name }: cacheType) {
      const delIndex = this.cachePageList.findIndex(v => v === name);
      switch (mode) {
        case "refresh":
          this.cachePageList = this.cachePageList.filter(v => v !== name);
+          this.clearCache();
          break;
        case "add":
          this.cachePageList.push(name);
          break;
        case "delete":
          delIndex !== -1 && this.cachePageList.splice(delIndex, 1);
+          this.clearCache();
          break;
      }
-      /** 监听缓存页面是否存在于标签页，不存在则删除 */
-      debounce(() => {
-        let cacheLength = this.cachePageList.length;
-        const nameList = getKeyList(useMultiTagsStoreHook().multiTags, "name");
-        while (cacheLength > 0) {
-          nameList.findIndex(v => v === this.cachePageList[cacheLength - 1]) ===
-            -1 &&
-            this.cachePageList.splice(
-              this.cachePageList.indexOf(this.cachePageList[cacheLength - 1]),
-              1
-            );
-          cacheLength--;
-        }
-      })();
    },
    /** 清空缓存页面 */
    clearAllCachePage() {
--- a/src/style/sidebar.scss
+++ b/src/style/sidebar.scss
@@ -172,10 +172,6 @@
    .is-active > .el-sub-menu__title,
    .is-active.submenu-title-noDropdown {
      color: var(--pure-theme-sub-menu-active-text) !important;
-
-      i {
-        color: var(--pure-theme-sub-menu-active-text) !important;
-      }
    }

    .is-active {
@@ -235,7 +231,6 @@
    .is-active.submenu-title-noDropdown.outer-most > * {
      z-index: 1;
      color: #fff;
-      background: transparent !important;
    }

    .is-active.submenu-title-noDropdown.outer-most::before {
@@ -271,10 +266,6 @@
    .is-active > .el-sub-menu__title,
    .is-active.submenu-title-noDropdown {
      color: var(--pure-theme-sub-menu-active-text) !important;
-
-      i {
-        color: var(--pure-theme-sub-menu-active-text) !important;
-      }
    }

    /* 子菜单中还有子菜单 */
@@ -375,10 +366,6 @@
    .is-active > .el-sub-menu__title,
    .is-active.submenu-title-noDropdown {
      color: var(--pure-theme-sub-menu-active-text) !important;
-
-      i {
-        color: var(--pure-theme-sub-menu-active-text) !important;
-      }
    }

    .nest-menu .el-sub-menu > .el-sub-menu__title,
@@ -542,10 +529,6 @@
    .is-active > .el-sub-menu__title,
    .is-active.submenu-title-noDropdown {
      color: var(--pure-theme-sub-menu-active-text) !important;
-
-      i {
-        color: var(--pure-theme-sub-menu-active-text) !important;
-      }
    }

    .is-active {
--- a/src/utils/localforage/types.d.ts
+++ b/src/utils/localforage/types.d.ts
@@ -65,8 +65,7 @@ interface LocalForageDbMethodsOptional {
 }

 interface LocalForageDriverDbMethods
-  extends LocalForageDbMethodsCore,
-    LocalForageDriverMethodsOptional {}
+  extends LocalForageDbMethodsCore, LocalForageDriverMethodsOptional {}

 interface LocalForageDriverSupportFunc {
  (): Promise<boolean>;
@@ -94,8 +93,7 @@ interface LocalForageSerializer {
 }

 interface LocalForageDbMethods
-  extends LocalForageDbMethodsCore,
-    LocalForageDbMethodsOptional {}
+  extends LocalForageDbMethodsCore, LocalForageDbMethodsOptional {}

 export interface LocalForage extends LocalForageDbMethods {
  LOCALSTORAGE: string;
--- a/src/utils/message.ts
+++ b/src/utils/message.ts
@@ -4,6 +4,13 @@ import { type MessageHandler, ElMessage } from "element-plus";

 type messageStyle = "el" | "antd";
 type messageTypes = "info" | "success" | "warning" | "error";
+type messagePlacement =
+  | "top"
+  | "top-left"
+  | "top-right"
+  | "bottom"
+  | "bottom-left"
+  | "bottom-right";

 interface MessageParams {
  /** 消息类型，可选 `info` 、`success` 、`warning` 、`error` ，默认 `info` */
@@ -20,8 +27,10 @@ interface MessageParams {
  duration?: number;
  /** 是否显示关闭按钮，默认值 `false` */
  showClose?: boolean;
-  /** `Message` 距离窗口顶部的偏移量，默认 `16` */
+  /** `Message` 消息距离窗口边缘的偏移量，默认 `16` */
  offset?: number;
+  /** `Message` 消息放置位置，默认 `top` */
+  placement?: messagePlacement;
  /** 设置组件的根元素，默认 `document.body` */
  appendTo?: string | HTMLElement;
  /** 合并内容相同的消息，不支持 `VNode` 类型的消息，默认值 `false` */
@@ -56,6 +65,7 @@ const message = (
      duration = 2000,
      showClose = false,
      offset = 16,
+      placement = "top",
      appendTo = document.body,
      grouping = false,
      repeatNum = 1,
@@ -71,6 +81,7 @@ const message = (
      duration,
      showClose,
      offset,
+      placement,
      appendTo,
      grouping,
      repeatNum,
--- a/src/utils/responsive.ts
+++ b/src/utils/responsive.ts
@@ -19,8 +19,8 @@ export const injectResponsiveStorage = (app: App, config: PlatformConfigs) => {
        darkMode: config.DarkMode ?? false,
        sidebarStatus: config.SidebarStatus ?? true,
        epThemeColor: config.EpThemeColor ?? "#409EFF",
-        themeColor: config.Theme ?? "light", // 主题色（对应系统配置中的主题色，与theme不同的是它不会受到浅色、深色整体风格切换的影响，只会在手动点击主题色时改变）
-        overallStyle: config.OverallStyle ?? "light" // 整体风格（浅色：light、深色：dark、自动：system）
+        themeColor: config.Theme ?? "light", // 主题色（对应系统配置中的主题色，与theme不同的是它不会受到浅色、深色主题模式切换的影响，只会在手动点击主题色时改变）
+        themeMode: config.ThemeMode ?? "light" // 主题模式（浅色：light、深色：dark、自动：system）
      },
      // 系统配置-界面显示
      configure: Storage.getData("configure", nameSpace) ?? {
--- a/src/views/able/excel.vue
+++ b/src/views/able/excel.vue
@@ -89,7 +89,7 @@ const exportExcel = () => {
      </el-link>
    </template>
    <el-button type="primary" @click="exportExcel">导出Excel</el-button>
-    <div class="h-[25rem] mt-3">
+    <div class="h-100 mt-3">
      <el-auto-resizer>
        <template #default="{ height, width }">
          <el-table-v2
--- a/src/views/account-settings/components/AccountManagement.vue
+++ b/src/views/account-settings/components/AccountManagement.vue
@@ -38,10 +38,7 @@ function onClick(item) {

 <template>
  <div
-    :class="[
-      'min-w-[180px]',
-      deviceDetection() ? 'max-w-[100%]' : 'max-w-[70%]'
-    ]"
+    :class="['min-w-[180px]', deviceDetection() ? 'max-w-full' : 'max-w-[70%]']"
  >
    <h3 class="my-8!">账户管理</h3>
    <div v-for="(item, index) in list" :key="index">
--- a/src/views/account-settings/components/Preferences.vue
+++ b/src/views/account-settings/components/Preferences.vue
@@ -33,10 +33,7 @@ function onChange(val, item) {

 <template>
  <div
-    :class="[
-      'min-w-[180px]',
-      deviceDetection() ? 'max-w-[100%]' : 'max-w-[70%]'
-    ]"
+    :class="['min-w-[180px]', deviceDetection() ? 'max-w-full' : 'max-w-[70%]']"
  >
    <h3 class="my-8!">偏好设置</h3>
    <div v-for="(item, index) in list" :key="index">
--- a/src/views/account-settings/components/Profile.vue
+++ b/src/views/account-settings/components/Profile.vue
@@ -105,10 +105,7 @@ getMine().then(res => {

 <template>
  <div
-    :class="[
-      'min-w-[180px]',
-      deviceDetection() ? 'max-w-[100%]' : 'max-w-[70%]'
-    ]"
+    :class="['min-w-[180px]', deviceDetection() ? 'max-w-full' : 'max-w-[70%]']"
  >
    <h3 class="my-8!">个人信息</h3>
    <el-form
--- a/src/views/account-settings/components/SecurityLog.vue
+++ b/src/views/account-settings/components/SecurityLog.vue
@@ -73,10 +73,7 @@ onMounted(() => {

 <template>
  <div
-    :class="[
-      'min-w-[180px]',
-      deviceDetection() ? 'max-w-[100%]' : 'max-w-[70%]'
-    ]"
+    :class="['min-w-[180px]', deviceDetection() ? 'max-w-full' : 'max-w-[70%]']"
  >
    <h3 class="my-8!">安全日志</h3>
    <pure-table
--- a/src/views/account-settings/index.vue
+++ b/src/views/account-settings/index.vue
@@ -25,7 +25,7 @@ const router = useRouter();
 const isOpen = ref(deviceDetection() ? false : true);
 const { $storage } = useGlobal<GlobalPropertiesApi>();
 onBeforeMount(() => {
-  useDataThemeChange().dataThemeChange($storage.layout?.overallStyle);
+  useDataThemeChange().dataThemeChange($storage.layout?.themeMode);
 });

 const userInfo = ref({
@@ -70,16 +70,16 @@ getMine().then(res => {
  <el-container class="h-full">
    <el-aside
      v-if="isOpen"
-      class="pure-account-settings overflow-hidden px-2 dark:bg-(--el-bg-color)! border-r-[1px] border-[var(--pure-border-color)]"
+      class="pure-account-settings overflow-hidden px-2 dark:bg-(--el-bg-color)! border-r border-(--pure-border-color)"
      :width="deviceDetection() ? '180px' : '240px'"
    >
      <el-menu :default-active="witchPane" class="pure-account-settings-menu">
        <div
-          class="h-[50px]! text-[var(--pure-theme-menu-text)] cursor-pointer text-sm transition-all duration-300 ease-in-out hover:scale-105 will-change-transform transform-gpu origin-center hover:text-base! hover:text-[var(--pure-theme-menu-title-hover)]!"
+          class="h-[50px]! text-(--pure-theme-menu-text) cursor-pointer text-sm transition-all duration-300 ease-in-out hover:scale-105 will-change-transform transform-gpu origin-center hover:text-base! hover:text-(--pure-theme-menu-title-hover)!"
          @click="router.go(-1)"
        >
          <div
-            class="h-full flex items-center px-[var(--el-menu-base-level-padding)]"
+            class="h-full flex items-center px-(--el-menu-base-level-padding)"
          >
            <IconifyIconOffline :icon="leftLine" />
            <span class="ml-2">返回</span>
--- a/src/views/components/cascader.vue
+++ b/src/views/components/cascader.vue
@@ -38,7 +38,7 @@ const handleChange = value => {
    <el-row :gutter="24">
      <el-col :xl="12" :lg="12" :md="24" :sm="24" :xs="24">
        <div class="flex flex-col items-center justify-center">
-          <span class="text-[var(--el-color-primary)]">
+          <span class="text-(--el-color-primary)">
            1. 二级联动（不带“全部”选项）
            <el-cascader
              v-model="selectedOptions1"
@@ -67,7 +67,7 @@ const handleChange = value => {
      </el-col>
      <el-col :xl="12" :lg="12" :md="24" :sm="24" :xs="24">
        <div class="flex flex-col items-center justify-center mt-3">
-          <span class="text-[var(--el-color-primary)]">
+          <span class="text-(--el-color-primary)">
            2. 二级联动（带有“全部”选项）
            <el-cascader
              v-model="selectedOptions3"
@@ -96,7 +96,7 @@ const handleChange = value => {
      </el-col>
      <el-col :xl="12" :lg="12" :md="24" :sm="24" :xs="24">
        <div class="flex flex-col items-center justify-center mt-3">
-          <span class="text-[var(--el-color-primary)]">
+          <span class="text-(--el-color-primary)">
            3. 三级联动（不带“全部”选项）
            <el-cascader
              v-model="selectedOptions2"
@@ -127,7 +127,7 @@ const handleChange = value => {
      </el-col>
      <el-col :xl="12" :lg="12" :md="24" :sm="24" :xs="24">
        <div class="flex flex-col items-center justify-center mt-3">
-          <span class="text-[var(--el-color-primary)]">
+          <span class="text-(--el-color-primary)">
            4. 三级联动（带"全部选项"）
            <el-cascader
              v-model="selectedOptions4"
--- a/src/views/components/color-picker-panel.vue
+++ b/src/views/components/color-picker-panel.vue
@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import { ref } from "vue";
+
+defineOptions({
+  name: "ColorPickerPanel"
+});
+
+const disabled = ref(false);
+const color = ref("rgba(255, 69, 0, 0.68)");
+const predefineColors = [
+  "#ff4500",
+  "#ff8c00",
+  "#ffd700",
+  "#90ee90",
+  "#00ced1",
+  "#1e90ff",
+  "#c71585",
+  "rgba(255, 69, 0, 0.68)",
+  "rgb(255, 120, 0)",
+  "hsv(51, 100, 98)",
+  "hsva(120, 40, 94, 0.5)",
+  "hsl(181, 100%, 37%)",
+  "hsla(209, 100%, 56%, 0.73)",
+  "#c7158577"
+];
+</script>
+
+<template>
+  <el-card shadow="never">
+    <template #header>
+      <div class="card-header">
+        <el-space wrap :size="40">
+          <el-link
+            v-tippy="{
+              content: '点击查看详细文档'
+            }"
+            href="https://element-plus.org/zh-CN/component/color-picker-panel.html"
+            target="_blank"
+            style="font-size: 16px; font-weight: 800"
+          >
+            颜色选择器面板
+          </el-link>
+          <el-radio-group v-model="disabled">
+            <el-radio :value="false">启用</el-radio>
+            <el-radio :value="true">禁用</el-radio>
+          </el-radio-group>
+        </el-space>
+      </div>
+      <el-link
+        class="mt-2"
+        href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/color-picker-panel.vue"
+        target="_blank"
+      >
+        代码位置 src/views/components/color-picker-panel.vue
+      </el-link>
+    </template>
+
+    <div class="mb-2">选择透明度、预定义颜色、无边框</div>
+    <el-color-picker-panel
+      v-model="color"
+      show-alpha
+      :border="false"
+      :disabled="disabled"
+      :predefine="predefineColors"
+    />
+    <el-divider />
+  </el-card>
+</template>
--- a/src/views/components/dialog/index.vue
+++ b/src/views/components/dialog/index.vue
@@ -463,6 +463,16 @@ function onSureBtnLoading() {
    }
  });
 }
+
+// 自定义动画
+function onTransitionClick(title, transition) {
+  addDialog({
+    width: "30%",
+    title,
+    transition,
+    contentRenderer: () => <p>{JSON.stringify(transition)}</p>
+  });
+}
 </script>

 <template>
@@ -551,5 +561,112 @@ function onSureBtnLoading() {
        点击底部确定按钮可开启按钮动画
      </el-button>
    </el-space>
+    <el-divider />
+    <el-space wrap>
+      <el-button
+        @click="onTransitionClick('淡入淡出动画（默认）', 'dialog-fade')"
+      >
+        淡入淡出动画（默认）
+      </el-button>
+      <el-button @click="onTransitionClick('缩放动画', 'dialog-scale')">
+        缩放动画
+      </el-button>
+      <el-button @click="onTransitionClick('滑动动画', 'dialog-slide')">
+        滑动动画
+      </el-button>
+      <el-button @click="onTransitionClick('弹跳动画', 'dialog-bounce')">
+        弹跳动画
+      </el-button>
+      <el-button
+        @click="
+          onTransitionClick('自定义动画事件处理器（可配置对象）', {
+            name: 'dialog-custom-object',
+            appear: true,
+            mode: 'out-in',
+            duration: 500
+          })
+        "
+      >
+        自定义动画事件处理器（可配置对象）
+      </el-button>
+    </el-space>
  </el-card>
 </template>
+
+<style>
+/* Scale Animation */
+.dialog-scale-enter-active,
+.dialog-scale-leave-active,
+.dialog-scale-enter-active .el-dialog,
+.dialog-scale-leave-active .el-dialog {
+  transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
+}
+
+.dialog-scale-enter-from,
+.dialog-scale-leave-to {
+  opacity: 0;
+}
+
+.dialog-scale-enter-from .el-dialog,
+.dialog-scale-leave-to .el-dialog {
+  opacity: 0;
+  transform: scale(0.5);
+}
+
+/* Slide Animation */
+.dialog-slide-enter-active,
+.dialog-slide-leave-active,
+.dialog-slide-enter-active .el-dialog,
+.dialog-slide-leave-active .el-dialog {
+  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+
+.dialog-slide-enter-from,
+.dialog-slide-leave-to {
+  opacity: 0;
+}
+
+.dialog-slide-enter-from .el-dialog,
+.dialog-slide-leave-to .el-dialog {
+  opacity: 0;
+  transform: translateY(-100px);
+}
+
+/* Bounce Animation */
+.dialog-bounce-enter-active,
+.dialog-bounce-leave-active,
+.dialog-bounce-enter-active .el-dialog,
+.dialog-bounce-leave-active .el-dialog {
+  transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+
+.dialog-bounce-enter-from,
+.dialog-bounce-leave-to {
+  opacity: 0;
+}
+
+.dialog-bounce-enter-from .el-dialog,
+.dialog-bounce-leave-to .el-dialog {
+  opacity: 0;
+  transform: scale(0.3) translateY(-50px);
+}
+
+/* Object Configuration Animation */
+.dialog-custom-object-enter-active,
+.dialog-custom-object-leave-active,
+.dialog-custom-object-enter-active .el-dialog,
+.dialog-custom-object-leave-active .el-dialog {
+  transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
+}
+
+.dialog-custom-object-enter-from,
+.dialog-custom-object-leave-to {
+  opacity: 0;
+}
+
+.dialog-custom-object-enter-from .el-dialog,
+.dialog-custom-object-leave-to .el-dialog {
+  opacity: 0;
+  transform: rotate(180deg) scale(0.5);
+}
+</style>
--- a/src/views/components/drawer/index.vue
+++ b/src/views/components/drawer/index.vue
@@ -422,6 +422,17 @@ function onSureBtnLoading() {
    }
  });
 }
+
+function onResizableClick(title, content, direction) {
+  addDrawer({
+    title,
+    direction,
+    resizable: true, // 启用可调整大小的功能
+    contentRenderer: () => (
+      <p class="text-[var(--el-color-primary)]">{content}</p> // jsx 语法 （注意在.vue文件启用jsx语法，需要在script开启lang="tsx"）
+    )
+  });
+}
 </script>

 <template>
@@ -498,5 +509,28 @@ function onSureBtnLoading() {
        点击底部确定按钮可开启按钮动画
      </el-button>
    </el-space>
+    <el-divider />
+    <el-space wrap>
+      <el-button
+        @click="onResizableClick('从左侧打开', '拖动抽屉右侧边缘', 'ltr')"
+      >
+        拖拽调整大小（从左侧打开）
+      </el-button>
+      <el-button
+        @click="onResizableClick('从右侧打开', '拖动抽屉左侧边缘', 'rtl')"
+      >
+        拖拽调整大小（从右侧打开）
+      </el-button>
+      <el-button
+        @click="onResizableClick('从顶部打开', '拖动抽屉底部边缘', 'ttb')"
+      >
+        拖拽调整大小（从顶部打开）
+      </el-button>
+      <el-button
+        @click="onResizableClick('从底部打开', '拖动抽屉顶部边缘', 'btt')"
+      >
+        拖拽调整大小（从底部打开）
+      </el-button>
+    </el-space>
  </el-card>
 </template>
--- a/src/views/components/message.vue
+++ b/src/views/components/message.vue
@@ -199,6 +199,31 @@ defineOptions({

    <el-divider />

+    <h4 class="mb-4!">
+      控制消息出现的位置，消息可以显示在窗口的顶部(默认) 或其他位置
+    </h4>
+
+    <el-space wrap>
+      <el-button @click="message('顶部中间')"> 顶部中间 </el-button>
+      <el-button @click="message('顶部左侧', { placement: 'top-left' })">
+        顶部左侧
+      </el-button>
+      <el-button @click="message('顶部右侧', { placement: 'top-right' })">
+        顶部右侧
+      </el-button>
+      <el-button @click="message('底部中间', { placement: 'bottom' })">
+        底部中间
+      </el-button>
+      <el-button @click="message('底部左侧', { placement: 'bottom-left' })">
+        底部左侧
+      </el-button>
+      <el-button @click="message('底部右侧', { placement: 'bottom-right' })">
+        底部右侧
+      </el-button>
+    </el-space>
+
+    <el-divider />
+
    <el-button @click="closeAllMessage"> 关闭所有消息提示 </el-button>
  </el-card>
 </template>
--- a/src/views/components/upload/index.vue
+++ b/src/views/components/upload/index.vue
@@ -190,7 +190,7 @@ const onDownload = () => {
              class="el-upload-list__item-delete"
              @click="handleRemove(file)"
            >
-              <span title="移除" class="hover:text-[var(--el-color-danger)]">
+              <span title="移除" class="hover:text-(--el-color-danger)">
                <IconifyIconOffline
                  :icon="Delete"
                  class="hover:scale-125 duration-100"
@@ -222,7 +222,7 @@ const onDownload = () => {
        type="info"
        class="img-name"
      >
-        <p class="text-[#fff] dark:text-black">
+        <p class="text-white dark:text-black">
          {{ fileList[curOpenImgIndex].name }}
        </p>
      </div>
--- a/src/views/flow-chart/index.vue
+++ b/src/views/flow-chart/index.vue
@@ -68,7 +68,7 @@ onMounted(() => {
        <span class="font-medium">
          流程图组件，采用开源的
          <el-link
-            href="https://site.logic-flow.cn/docs/#/zh/guide/start"
+            href="https://site.logic-flow.cn/tutorial/get-started"
            target="_blank"
            style="margin: 0 4px 5px; font-size: 16px"
          >
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -52,8 +52,8 @@ const currentPage = computed(() => {
 const { t } = useI18n();
 const { initStorage } = useLayout();
 initStorage();
-const { dataTheme, overallStyle, dataThemeChange } = useDataThemeChange();
-dataThemeChange(overallStyle.value);
+const { dataTheme, themeMode, dataThemeChange } = useDataThemeChange();
+dataThemeChange(themeMode.value);
 const { title, getDropdownItemStyle, getDropdownItemClass } = useNav();
 const { locale, translationCh, translationEn } = useTranslationLang();

@@ -135,7 +135,7 @@ watch(loginDay, value => {
      <!-- 国际化 -->
      <el-dropdown trigger="click">
        <globalization
-          class="hover:text-primary hover:bg-[transparent]! w-[20px] h-[20px] ml-1.5 cursor-pointer outline-hidden duration-300"
+          class="hover:text-primary hover:bg-transparent! w-[20px] h-[20px] ml-1.5 cursor-pointer outline-hidden duration-300"
        />
        <template #dropdown>
          <el-dropdown-menu class="translation">
@@ -336,9 +336,9 @@ watch(loginDay, value => {
      </div>
    </div>
    <div
-      class="w-full flex-c flex-wrap absolute bottom-3 text-sm text-[rgba(0,0,0,0.6)] dark:text-[rgba(220,220,242,0.8)]"
+      class="w-full flex-c absolute bottom-3 text-sm text-[rgba(0,0,0,0.6)] dark:text-[rgba(220,220,242,0.8)]"
    >
-      Copyright © 2020-2025
+      Copyright © 2020-present
      <a
        class="hover:text-primary!"
        href="https://github.com/pure-admin"
@@ -346,16 +346,6 @@ watch(loginDay, value => {
      >
        &nbsp;{{ title }}
      </a>
-      <!-- <div class="ml-8">
-        <span>赞助商：</span>
-        <a
-          class="hover:text-primary"
-          href="https://ai-tools.cn/resume/start"
-          target="_blank"
-        >
-          二猫 AI 简历
-        </a>
-      </div> -->
    </div>
  </div>
 </template>
--- a/src/views/monitor/logs/login/index.vue
+++ b/src/views/monitor/logs/login/index.vue
@@ -103,7 +103,7 @@ const {
        <div
          v-if="selectedNum > 0"
          v-motion-fade
-          class="bg-[var(--el-fill-color-light)] w-full h-[46px] mb-2 pl-4 flex items-center"
+          class="bg-(--el-fill-color-light) w-full h-[46px] mb-2 pl-4 flex items-center"
        >
          <div class="flex-auto">
            <span
--- a/src/views/monitor/logs/operation/index.vue
+++ b/src/views/monitor/logs/operation/index.vue
@@ -103,7 +103,7 @@ const {
        <div
          v-if="selectedNum > 0"
          v-motion-fade
-          class="bg-[var(--el-fill-color-light)] w-full h-[46px] mb-2 pl-4 flex items-center"
+          class="bg-(--el-fill-color-light) w-full h-[46px] mb-2 pl-4 flex items-center"
        >
          <div class="flex-auto">
            <span
--- a/src/views/monitor/logs/system/index.vue
+++ b/src/views/monitor/logs/system/index.vue
@@ -95,7 +95,7 @@ const {
        <div
          v-if="selectedNum > 0"
          v-motion-fade
-          class="bg-[var(--el-fill-color-light)] w-full h-[46px] mb-2 pl-4 flex items-center"
+          class="bg-(--el-fill-color-light) w-full h-[46px] mb-2 pl-4 flex items-center"
        >
          <div class="flex-auto">
            <span
--- a/src/views/system/user/index.vue
+++ b/src/views/system/user/index.vue
@@ -128,7 +128,7 @@ const {
          <div
            v-if="selectedNum > 0"
            v-motion-fade
-            class="bg-[var(--el-fill-color-light)] w-full h-[46px] mb-2 pl-4 flex items-center"
+            class="bg-(--el-fill-color-light) w-full h-[46px] mb-2 pl-4 flex items-center"
          >
            <div class="flex-auto">
              <span
--- a/types/global.d.ts
+++ b/types/global.d.ts
@@ -93,7 +93,7 @@ declare global {
    Layout?: string;
    Theme?: string;
    DarkMode?: boolean;
-    OverallStyle?: string;
+    ThemeMode?: string;
    Grey?: boolean;
    Weak?: boolean;
    HideTabs?: boolean;
@@ -140,7 +140,7 @@ declare global {
    sidebarStatus?: boolean;
    epThemeColor?: string;
    themeColor?: string;
-    overallStyle?: string;
+    themeMode?: string;
    showLogo?: boolean;
    showModel?: string;
    menuSearchHistory?: number;
@@ -169,7 +169,7 @@ declare global {
      sidebarStatus?: boolean;
      epThemeColor?: string;
      themeColor?: string;
-      overallStyle?: string;
+      themeMode?: string;
    };
    configure: {
      grey?: boolean;
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -59,4 +59,4 @@ export default ({ mode }: ConfigEnv): UserConfigExport => {
      __APP_INFO__: JSON.stringify(__APP_INFO__)
    }
  };
-};
+};
Author	SHA1	Message	Date
xiaoxian521	97bd47efca	chore: add `better-tailwindcss/enforce-canonical-classes`	2025-12-09 09:59:08 +08:00
xiaoxian521	d794c7965c	perf: 根据`tailwindcss`推荐优化类名	2025-12-08 15:44:00 +08:00
xiaoxian521	aeb4feb6f9	fix: 迁移`typescript-eslint`已弃用的`tseslint.config`配置方式	2025-12-08 14:31:44 +08:00
xiaoxian521	d56211996f	chore(deps): update	2025-12-01 14:27:16 +08:00
xiaoming	fb744dbab7	refactor: 将系统配置中的“整体风格”更名为“主题模式”，“导航模式”更名为“菜单布局”，以提升命名的专业性与清晰度 (#1247 )	2025-11-27 12:24:03 +08:00
SoulEater	080ccae0ff	perf: 优化页签风格为谷歌模式下的布局和样式 (#1245 )	2025-11-26 08:14:30 +08:00
xiaoming	c22cafaa1e	feat: 添加颜色选择器面板组件 (#1242 )	2025-11-17 10:55:39 +08:00
xiaoxian521	f7bf20af97	chore: 导入`element-plus`最新版本的新组件	2025-11-15 08:07:26 +08:00
xiaoming	1b7c0577d9	chore: `message`工具函数适配`ElMessage`最新版本的`API`变更以及补充相关示例 (#1241 )	2025-11-13 07:54:28 +08:00
cvpv	244211c4eb	fix: 修复`RePureTableBar`和`ReVxeTableBar`组件的列设置弹窗样式问题 (#1239 )	2025-11-07 13:54:55 +08:00
xiaoming	e01ad0a5df	chore: `ReDrawer`组件适配`el-drawer`最新版本的`API`变更以及补充相关示例 (#1238 )	2025-11-07 12:35:36 +08:00
xiaoming	ac61eb807b	chore: `ReDialog`组件适配`el-dialog`最新版本的`API`变更以及补充相关示例 (#1236 )	2025-11-04 18:22:31 +08:00
xiaoxian521	68decd01b8	fix: 修复导航菜单在使用`iconfont`图标时，选中/激活状态的样式显示异常问题	2025-10-22 11:25:23 +08:00
xiaoxian521	c0fd7419c5	release: update `6.2.0`	2025-10-16 13:54:37 +08:00
xiaoming	6b179e6ff1	fix: 修复`params`传参模式下标签页右键菜单显示不正确的问题 (#1221 )	2025-10-16 11:52:31 +08:00
xiaoming	e1fde7d386	fix: 修复不同路由使用相同参数时，多个标签页会同时被激活的问题 (#1220 )	2025-10-15 10:48:36 +08:00
xiaoming	fc30039a40	fix: 修复设置了`keepAlive: true`的页面在初次加载缓慢的情况下出现的页面缓存失效的问题，较难复现，感谢反馈 (#1219 )	2025-10-14 10:39:07 +08:00
xiaoxian521	880963c683	chore: 升级`echarts`至最新`v6`版本	2025-10-10 10:28:45 +08:00
xiaoxian521	36ec0ebd0d	chore: 升级`@faker-js/faker`至最新`v10`版本	2025-10-09 11:20:21 +08:00
xiaoxian521	339d68ffc5	chore(deps): update	2025-10-09 10:45:44 +08:00
tinyThing	fa606b429b	fix: 修复在内嵌同源`iframe`页面中，当其注册了`beforeunload`事件时，右键标签页点击`重新加载`导致浏览器弹出两次确认拦截的问题 (#1229 )	2025-09-28 15:10:49 +08:00
xiaoxian521	5b14db8785	fix: 修复失效链接	2025-09-23 11:16:00 +08:00
cvpv	0c53e84ee7	perf: 显式配置`Tailwind CSS`入口文件路径，优化`Tailwind CSS IntelliSense`插件的上下文识别与提示性能 (#1228 )	2025-09-23 11:05:18 +08:00