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

perf: 根据tailwindcss推荐优化类名
fix: 迁移typescript-eslint已弃用的tseslint.config配置方式
2025-12-15 14:50:29 +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
35 changed files with 1829 additions and 1874 deletions
--- a/CHANGELOG.zh_CN.md
+++ b/CHANGELOG.zh_CN.md
@@ -2,7 +2,7 @@

 ### 🎫 Feat

-  添加全屏`403`、`404`、`500`页面，全屏错误页面清晰且安全，提升用户体验
+- 添加全屏`403`、`404`、`500`页面，全屏错误页面清晰且安全，提升用户体验

 ### 🐞 Bug fixes

@@ -26,7 +26,7 @@

 ### 🐞 Bug fixes

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

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

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

 ### 🍏 Perf

@@ -285,7 +285,7 @@
 - 内嵌`iframe`页支持设置`keepAlive`，保持页面状态
 - 优化导航，弹出的菜单超出内容区自适应且可滚动
 - 添加文件上传示例
- 添加整体风格自适应操作系统浅色、深色、自动主题功能
+- 添加主题模式自适应操作系统浅色、深色、自动主题功能
 - 添加页脚
 - 支持多标签页打开已经登录的系统后无需再登录并添加内免登录功能（用户可选择免登录的天数）
 - 带来高级感的终端命令行
@@ -485,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/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
--- 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: 混合菜单，灵活多变
--- a/package.json
+++ b/package.json
@@ -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.47.0",
-    "@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",
+    "dayjs": "^1.11.19",
+    "deep-chat": "^2.3.0",
    "echarts": "^6.0.0",
-    "el-table-infinite-scroll": "^3.0.7",
-    "element-plus": "^2.11.7",
+    "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": "^12.0.2",
+    "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.22",
-    "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,7 +109,7 @@
    "vue3-puzzle-vcode": "^1.1.7",
    "vuedraggable": "^4.1.0",
    "vxe-table": "4.6.25",
-    "wavesurfer.js": "^7.11.0",
+    "wavesurfer.js": "^7.11.1",
    "xgplayer": "^3.0.23",
    "xlsx": "^0.18.5"
  },
@@ -117,62 +117,63 @@
    "@commitlint/cli": "^20.1.0",
    "@commitlint/config-conventional": "^20.0.0",
    "@commitlint/types": "^20.0.0",
-    "@eslint/js": "^9.37.0",
-    "@faker-js/faker": "^10.0.0",
-    "@iconify/json": "^2.2.393",
+    "@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": "^11.0.1",
-    "@tailwindcss/vite": "^4.1.14",
-    "@types/codemirror": "^5.60.16",
+    "@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.19",
+    "@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.10",
-    "cssnano": "^7.1.1",
+    "code-inspector-plugin": "^1.3.0",
+    "cssnano": "^7.1.2",
    "dagre": "^0.8.5",
-    "eslint": "^9.37.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.5.0",
+    "eslint-plugin-vue": "^10.6.2",
    "gradient-string": "^3.0.0",
    "husky": "^9.1.7",
-    "lint-staged": "^16.2.3",
+    "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.4",
-    "sass": "^1.93.2",
-    "stylelint": "^16.25.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.14",
+    "tailwindcss": "^4.1.17",
    "typescript": "^5.9.3",
-    "typescript-eslint": "^8.46.0",
-    "unplugin-icons": "^22.4.2",
-    "vite": "^7.1.9",
+    "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.1.1"
+    "vue-tsc": "^3.1.5"
  },
  "engines": {
    "node": "^20.19.0 || >=22.13.0",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/public/platform-config.json
+++ b/public/platform-config.json
@@ -9,7 +9,7 @@
  "Layout": "vertical",
  "Theme": "light",
  "DarkMode": false,
-  "OverallStyle": "light",
+  "ThemeMode": "light",
  "Grey": false,
  "Weak": false,
  "HideTabs": false,
--- 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-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
@@ -618,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>
@@ -631,7 +635,6 @@ onBeforeUnmount(() => {
            >
              <IconifyIconOffline :icon="Close" />
            </span>
-            <span class="chrome-tab-divider" />
          </div>
        </div>
      </div>
--- 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/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/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/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/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/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/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">
--- 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;
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