refactor(layout): 优化后台布局样式与主题适配

- 优化顶部工具栏、通知入口和页签操作按钮的图标颜色继承 - 调整混合布局菜单激活态与暗黑模式下的视觉表现 - 重构设置面板分组与底部操作区，精简无效配置文案 - 统一列表页公共布局样式，优化表格和页面容器边界 - 优化控制台卡片、图表和暗黑模式背景表现 - 移除布局中重复的页签高度覆盖和无用 mixin
2026-06-18 23:39:31 +08:00
parent 0e992ae16f
commit 03a9c03401
15 changed files with 357 additions and 280 deletions
--- a/src/components/NoticeDropdown/index.vue
+++ b/src/components/NoticeDropdown/index.vue
@@ -122,6 +122,7 @@ function handleVisibleChange(visible: boolean) {
    justify-content: center;
    width: 100%;
    height: 100%;
+    color: inherit;
  }

  &__trigger {
@@ -130,6 +131,7 @@ function handleVisibleChange(visible: boolean) {
    justify-content: center;
    width: 100%;
    height: 100%;
+    color: inherit;
  }

  &__icon {
@@ -139,17 +141,20 @@ function handleVisibleChange(visible: boolean) {
    justify-content: center;
    width: 28px;
    height: 28px;
+    color: currentColor;
    border-radius: 6px;
  }

  &__bell {
-    color: var(--el-text-color-regular);
+    --color: currentColor;
+
+    color: currentColor;
  }

  &__pulse {
    position: absolute;
-    top: 4px;
-    right: 5px;
+    top: 3px;
+    right: 4px;
    width: 6px;
    height: 6px;
    background: var(--el-color-danger);
--- a/src/lang/package/en.json
+++ b/src/lang/package/en.json
@@ -67,6 +67,7 @@
    "theme": "Theme",
    "interface": "Interface",
    "navigation": "Navigation",
+    "assist": "Assist",
    "themePalette": "Color System",
    "customColors": "Custom Colors",
    "customPalette": "Custom",
@@ -102,6 +103,8 @@
    "sidebarColorScheme": "Sidebar Color Scheme",
    "showWatermark": "Show Watermark",
    "pageSwitchingAnimation": "Page Switching Animation",
+    "grayMode": "Gray Mode",
+    "colorWeak": "Color Weak",
    "none": "None",
    "fade": "Fade",
    "fade-slide": "Fade Slide",
--- a/src/lang/package/zh-cn.json
+++ b/src/lang/package/zh-cn.json
@@ -104,6 +104,8 @@
    "showAppLogo": "显示Logo",
    "showWatermark": "显示水印",
    "pageSwitchingAnimation": "页面切换动画",
+    "grayMode": "灰色模式",
+    "colorWeak": "色弱模式",
    "none": "无动画",
    "fade": "淡入淡出",
    "fade-slide": "平滑切换",
--- a/src/layouts/DoubleLayout.vue
+++ b/src/layouts/DoubleLayout.vue
@@ -51,7 +51,6 @@
    <main
      class="layout__main"
      :class="{
-        hasTagsView: showTagsView,
        'layout__main--collapsed': !isSidebarOpen,
        'layout__main--fullscreen': appStore.contentFullscreen,
      }"
@@ -84,8 +83,6 @@ const { MenuIcon, topMenuItems, activeTopMenuPath, sideMenuRoutes, handleTopMenu
 </script>

 <style lang="scss" scoped>
-@use "@/styles/mixins" as *;
-
 $double-sidebar-width: $sidebar-primary-width + $sidebar-secondary-width;

 .layout {
@@ -305,12 +302,6 @@ $double-sidebar-width: $sidebar-primary-width + $sidebar-secondary-width;
  }
 }

-.hasTagsView {
-  :deep(.app-main) {
-    @include app-main-height-with-tags;
-  }
-}
-
 .mobile {
  .layout__double-sidebar {
    width: $double-sidebar-width;
--- a/src/layouts/LeftLayout.vue
+++ b/src/layouts/LeftLayout.vue
@@ -18,7 +18,6 @@
    <div
      class="layout__main"
      :class="{
-        hasTagsView: showTagsView,
        'layout__main--collapsed': !isSidebarOpen,
        'layout__main--fullscreen': appStore.contentFullscreen,
      }"
@@ -130,10 +129,4 @@ const appStore = useAppStore();
    margin-left: 0 !important;
  }
 }
-
-.hasTagsView {
-  :deep(.app-main) {
-    @include app-main-height-with-tags;
-  }
-}
 </style>
--- a/src/layouts/MixLayout.vue
+++ b/src/layouts/MixLayout.vue
@@ -66,7 +66,7 @@
      </div>

      <!-- 主内容区 -->
-      <div :class="{ hasTagsView: showTagsView }" class="layout__main">
+      <div class="layout__main">
        <LayoutTagsView v-if="showTagsView" />
        <LayoutMain />
      </div>
@@ -171,27 +171,43 @@ const useMenuColors = computed(
        .el-menu-item {
          position: relative;
          height: 100%;
-          padding: 0 12px;
+          padding: 0 14px;
          line-height: $navbar-height;
-          border-bottom: none;
+          border-bottom: none !important;
          border-radius: 0;
          transition:
            color 0.16s ease,
-            background-color 0.16s ease,
-            border-color 0.16s ease;
+            opacity 0.16s ease;
+
+          &::after {
+            position: absolute;
+            right: 12px;
+            bottom: 0;
+            left: 12px;
+            height: 2px;
+            content: "";
+            background: var(--el-color-primary);
+            border-radius: 999px 999px 0 0;
+            opacity: 0;
+            transform: scaleX(0.4);
+            transition:
+              opacity 0.16s ease,
+              transform 0.16s ease;
+          }

          &:hover {
-            background-color: var(--menu-hover) !important;
+            color: var(--el-color-primary) !important;
+            background-color: transparent !important;
          }

          &.is-active {
            color: var(--el-color-primary) !important;
-            background-color: color-mix(
-              in srgb,
-              var(--el-color-primary) 10%,
-              var(--el-bg-color-overlay)
-            ) !important;
-            border-bottom: 2px solid var(--el-color-primary);
+            background-color: transparent !important;
+          }
+
+          &.is-active::after {
+            opacity: 1;
+            transform: scaleX(1);
          }
        }
      }
@@ -289,23 +305,20 @@ const useMenuColors = computed(
  }
 }

-:deep(.hasTagsView) {
-  .app-main {
-    @include app-main-height-with-tags;
-  }
-}
-
 :global(html.dark),
 :global(html.sidebar-color-blue) {
  .layout__header-menu {
    :deep(.el-menu--horizontal) {
-      .el-menu-item.is-active {
-        color: var(--menu-active-text) !important;
-        background-color: color-mix(
-          in srgb,
-          var(--el-color-primary) 18%,
-          var(--menu-background)
-        ) !important;
+      .el-menu-item {
+        &:hover {
+          color: color-mix(in srgb, var(--el-color-primary) 24%, var(--el-color-white)) !important;
+          background-color: transparent !important;
+        }
+
+        &.is-active {
+          color: color-mix(in srgb, var(--el-color-primary) 38%, var(--el-color-white)) !important;
+          background-color: transparent !important;
+        }
      }
    }
  }
--- a/src/layouts/TopLayout.vue
+++ b/src/layouts/TopLayout.vue
@@ -16,7 +16,7 @@
    </div>

    <!-- 主内容区 -->
-    <div :class="{ hasTagsView: showTagsView }" class="layout__main">
+    <div class="layout__main">
      <LayoutTagsView v-if="showTagsView" />
      <LayoutMain />
    </div>
@@ -149,10 +149,4 @@ const isLogoCollapsed = computed(() => width.value < 768);
    overflow-y: auto;
  }
 }
-
-.hasTagsView {
-  :deep(.app-main) {
-    @include app-main-height-with-tags;
-  }
-}
 </style>
--- a/src/layouts/components/LayoutSettings.vue
+++ b/src/layouts/components/LayoutSettings.vue
@@ -8,10 +8,10 @@
  >
    <div class="settings-content">
      <section class="config-section">
-        <el-divider>{{ t("settings.theme") }}</el-divider>
+        <div class="section-title">{{ t("settings.theme") }}</div>

-        <div class="flex-center">
-          <el-radio-group v-model="themeMode" class="theme-mode-group">
+        <div class="theme-mode">
+          <el-radio-group v-model="themeMode">
            <el-radio-button :value="ThemeMode.LIGHT">
              {{ t("login.light") }}
            </el-radio-button>
@@ -24,9 +24,9 @@
          </el-radio-group>
        </div>

-        <div class="config-block config-block--tight">
-          <div class="config-item__header">
-            <span class="text-xs">{{ t("settings.themePalette") }}</span>
+        <div class="config-card">
+          <div class="config-card__header">
+            <span>{{ t("settings.themePalette") }}</span>
            <button
              type="button"
              :class="['custom-color-trigger', { 'is-open': isCustomColorsOpen }]"
@@ -90,7 +90,7 @@
      </section>

      <section class="config-section">
-        <el-divider>{{ t("settings.navigation") }}</el-divider>
+        <div class="section-title">{{ t("settings.navigation") }}</div>

        <div class="layout-select">
          <div class="layout-grid">
@@ -140,7 +140,7 @@
          <el-radio-group
            v-model="sidebarColor"
            class="config-item__control"
-            @change="changeSidebarColor"
+            @change="setSidebarColor"
          >
            <el-radio :value="SidebarColor.MINIMAL_WHITE">
              {{ t("settings.minimalWhite") }}
@@ -153,7 +153,7 @@
      </section>

      <section class="config-section">
-        <el-divider>{{ t("settings.interface") }}</el-divider>
+        <div class="section-title">{{ t("settings.interface") }}</div>

        <div class="config-item flex-x-between">
          <span class="text-xs">{{ t("settings.showTagsView") }}</span>
@@ -161,7 +161,7 @@
        </div>

        <div v-if="settingsStore.showTagsView" class="config-item config-item--block">
-          <div class="config-item__header">
+          <div class="config-card__header">
            <span class="text-xs">{{ t("settings.tagsViewStyle") }}</span>
          </div>
          <div class="tags-style-grid">
@@ -191,11 +191,6 @@
          <el-switch v-model="settingsStore.showAppLogo" />
        </div>

-        <div class="config-item flex-x-between">
-          <span class="text-xs">{{ t("settings.showWatermark") }}</span>
-          <el-switch v-model="settingsStore.showWatermark" />
-        </div>
-
        <div class="config-item flex-x-between">
          <span class="text-xs">{{ t("settings.pageSwitchingAnimation") }}</span>
          <el-select v-model="settingsStore.pageSwitchingAnimation" style="width: 150px">
@@ -207,43 +202,46 @@
            />
          </el-select>
        </div>
+      </section>
+
+      <section class="config-section">
+        <div class="section-title">{{ t("settings.assist") }}</div>

        <div class="config-item flex-x-between">
-          <span class="text-xs">灰色模式</span>
+          <span class="text-xs">{{ t("settings.showWatermark") }}</span>
+          <el-switch v-model="settingsStore.showWatermark" />
+        </div>
+
+        <div class="config-item flex-x-between">
+          <span class="text-xs">{{ t("settings.grayMode") }}</span>
          <el-switch v-model="settingsStore.grayMode" />
        </div>

        <div class="config-item flex-x-between">
-          <span class="text-xs">色弱模式</span>
+          <span class="text-xs">{{ t("settings.colorWeak") }}</span>
          <el-switch v-model="settingsStore.colorWeak" />
        </div>
      </section>
    </div>

    <template #footer>
-      <div class="action-buttons">
-        <el-tooltip content="复制当前 defaults 片段，方便覆盖到 src/settings.ts" placement="top">
-          <el-button
-            type="primary"
-            size="default"
-            :icon="copyIcon"
-            :loading="copyLoading"
-            @click="handleCopySettings"
-          >
-            {{ copyLoading ? "复制中..." : t("settings.copyConfig") }}
-          </el-button>
-        </el-tooltip>
-        <el-tooltip content="重置将恢复所有设置为默认值" placement="top">
-          <el-button
-            type="warning"
-            size="default"
-            :icon="resetIcon"
-            :loading="resetLoading"
-            @click="handleResetSettings"
-          >
-            {{ resetLoading ? "重置中..." : t("settings.resetConfig") }}
-          </el-button>
-        </el-tooltip>
+      <div class="settings-footer">
+        <el-button
+          type="primary"
+          :icon="copyIcon"
+          :loading="copyLoading"
+          @click="copyCurrentSettings"
+        >
+          {{ copyLoading ? "复制中..." : t("settings.copyConfig") }}
+        </el-button>
+        <el-button
+          type="default"
+          :icon="resetIcon"
+          :loading="resetLoading"
+          @click="resetSettingsToDefault"
+        >
+          {{ resetLoading ? "重置中..." : t("settings.resetConfig") }}
+        </el-button>
      </div>
    </template>
  </el-drawer>
@@ -331,19 +329,23 @@ const drawerVisible = computed({
  set: (value) => (settingsStore.settingsVisible = value),
 });

-const getPaletteColors = (colors: ThemeColorMap) => colorOptions.map((item) => colors[item.name]);
+function getPaletteColors(colors: ThemeColorMap) {
+  return colorOptions.map((item) => colors[item.name]);
+}

-const getPaletteName = (palette: ThemePalettePreset) => {
+function getPaletteName(palette: ThemePalettePreset) {
  const key = paletteI18nKeys[palette.id];
  return key ? t(`settings.themePalettes.${key}.name`) : palette.name;
-};
+}

-const getPaletteDescription = (palette: ThemePalettePreset) => {
+function getPaletteDescription(palette: ThemePalettePreset) {
  const key = paletteI18nKeys[palette.id];
  return key ? t(`settings.themePalettes.${key}.description`) : palette.description;
-};
+}

-const getColorLabel = (name: ThemeColorName) => t(`settings.themeColorNames.${name}`);
+function getColorLabel(name: ThemeColorName) {
+  return t(`settings.themeColorNames.${name}`);
+}

 const activePaletteName = computed(() =>
  settingsStore.activeThemePalette
@@ -351,32 +353,47 @@ const activePaletteName = computed(() =>
    : t("settings.customPalette")
 );

-const toggleCustomColors = () => {
+/**
+ * 展开或收起自定义颜色
+ */
+function toggleCustomColors(): void {
  isCustomColorsOpen.value = !isCustomColorsOpen.value;
-};
+}

-const handleThemeColorChange = (name: ThemeColorName, color: string | null) => {
+/**
+ * 更新单个主题色
+ */
+function handleThemeColorChange(name: ThemeColorName, color: string | null): void {
  if (!color) return;
  settingsStore.updateThemeColor(name, color);
-};
+}

-const changeSidebarColor = (val: string | number | boolean | undefined) => {
-  if (val !== SidebarColor.CLASSIC_BLUE && val !== SidebarColor.MINIMAL_WHITE) return;
+/**
+ * 切换侧边栏配色
+ */
+function setSidebarColor(value: string | number | boolean | undefined): void {
+  if (value !== SidebarColor.CLASSIC_BLUE && value !== SidebarColor.MINIMAL_WHITE) return;

-  settingsStore.sidebarColorScheme = val;
-};
+  settingsStore.sidebarColorScheme = value;
+}

-const handleLayoutChange = (layout: LayoutMode) => {
+/**
+ * 切换导航布局
+ */
+function handleLayoutChange(layout: LayoutMode): void {
  if (settingsStore.layout === layout) return;

  settingsStore.layout = layout;
-};
+}

-const handleCopySettings = async () => {
+/**
+ * 复制当前 settings 默认配置片段
+ */
+async function copyCurrentSettings(): Promise<void> {
  try {
    copyLoading.value = true;

-    const configCode = generateSettingsCode();
+    const configCode = buildDefaultsCode();

    await navigator.clipboard.writeText(configCode);

@@ -389,26 +406,36 @@ const handleCopySettings = async () => {
  } finally {
    copyLoading.value = false;
  }
-};
-
-const handleResetSettings = async () => {
-  resetLoading.value = true;
+}

+/**
+ * 恢复所有设置为默认值
+ */
+async function resetSettingsToDefault(): Promise<void> {
  try {
+    await ElMessageBox.confirm(t("settings.confirmReset"), t("settings.resetConfig"), {
+      confirmButtonText: "确定",
+      cancelButtonText: "取消",
+      type: "warning",
+    });
+
+    resetLoading.value = true;
    settingsStore.resetSettings();

    sidebarColor.value = settingsStore.sidebarColorScheme;

    ElMessage.success(t("settings.resetSuccess"));
  } catch {
-    ElMessage.error("重置配置失败");
+    // 用户取消时不提示
  } finally {
    resetLoading.value = false;
  }
-};
+}

-// 这里只生成 defaults，避免复制出来的代码和 src/settings.ts 的真实结构对不上。
-const generateSettingsCode = (): string => {
+/**
+ * 生成 src/settings.ts 中 defaults 的配置片段
+ */
+function buildDefaultsCode(): string {
  const themeColorsCode = JSON.stringify(settingsStore.themeColors, null, 4)
    .replace(/"([^"]+)":/g, "$1:")
    .replace(/^/gm, "  ");
@@ -445,11 +472,11 @@ const generateSettingsCode = (): string => {
  showSettings: ${settings.showSettings},
  watermarkContent: ${settings.watermarkContent},
 } as const;`;
-};
+}

-const handleCloseDrawer = () => {
+function handleCloseDrawer(): void {
  settingsStore.settingsVisible = false;
-};
+}
 </script>

 <style lang="scss" scoped>
@@ -463,51 +490,38 @@ const handleCloseDrawer = () => {
    overflow: hidden;
    color: var(--el-text-color-regular);
  }
+
+  :deep(.el-drawer__footer) {
+    padding: 12px 18px 16px;
+    border-top: 1px solid var(--el-border-color-lighter);
+  }
 }

 .settings-content {
  flex: 1 1 auto;
-  padding: 16px 18px;
+  padding: 16px 18px 20px;
  overflow-y: auto;
  color: var(--el-text-color-regular);
 }

-.action-buttons {
-  display: flex;
-
-  & > .el-button {
-    flex: 1;
-    font-size: 14px;
-    border-radius: 8px;
-    transition: box-shadow 0.16s ease;
-
-    &:hover {
-      box-shadow: none;
-    }
-  }
-}
-
 .config-section {
-  margin-bottom: 16px;
+  & + & {
+    margin-top: 20px;
+  }

  .config-item {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
-    padding: 10px 0;
-    border-bottom: 1px solid var(--el-border-color-light);
-    transition: background-color 0.16s ease;
+    min-height: 42px;
+    padding: 8px 0;
+    border-bottom: 1px solid var(--el-border-color-lighter);

    &:last-child {
      border-bottom: none;
    }

-    &:hover {
-      background-color: var(--el-fill-color-light);
-      border-radius: 6px;
-    }
-
    > .text-xs {
      flex-shrink: 0;
      color: var(--el-text-color-regular);
@@ -519,9 +533,9 @@ const handleCloseDrawer = () => {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 14px;
-    padding: 14px 12px;
-    margin-top: 4px;
-    background: var(--el-fill-color-lighter);
+    padding: 12px;
+    margin-top: 12px;
+    background: var(--el-fill-color-extra-light);
    border: 1px solid var(--el-border-color-lighter);
    border-radius: 8px;

@@ -555,32 +569,62 @@ const handleCloseDrawer = () => {

  .config-item--block {
    display: block;
+    min-height: 0;
+    padding-top: 10px;
+    padding-bottom: 12px;

-    &:hover {
-      padding-right: 0;
-      padding-left: 0;
-      margin: 0;
-      background-color: transparent;
-    }
+    border-bottom: 1px solid var(--el-border-color-lighter);
  }
 }

-.config-block {
-  margin-top: 12px;
+.section-title {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  margin-bottom: 12px;
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 1;
+  color: var(--el-text-color-primary);
+
+  &::before,
+  &::after {
+    flex: 1;
+    height: 1px;
+    content: "";
+    background: var(--el-border-color-lighter);
+  }
 }

-.config-block--tight {
-  margin-top: 10px;
+.theme-mode {
+  display: flex;
+  justify-content: center;
 }

-.config-item__header {
+.config-card {
+  margin-top: 14px;
+}
+
+.config-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
+  font-size: 12px;
+  color: var(--el-text-color-regular);

-  > .text-xs {
-    color: var(--el-text-color-regular);
+  > span {
+    font-weight: 500;
+  }
+}
+
+.settings-footer {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 8px;
+
+  .el-button {
+    margin: 0;
  }
 }

--- a/src/layouts/components/LayoutTagsView.vue
+++ b/src/layouts/components/LayoutTagsView.vue
@@ -41,22 +41,30 @@
      </div>
    </el-scrollbar>

-    <!-- 右侧操作 -->
    <div class="tags-actions">
-      <!-- 刷新当前 -->
-      <span class="tags-actions__btn" @click="refreshSelectedTag(currentTag)">
+      <button
+        type="button"
+        class="tags-actions__btn"
+        aria-label="刷新当前"
+        title="刷新当前"
+        @click="refreshSelectedTag(currentTag)"
+      >
        <el-icon :size="16"><Refresh /></el-icon>
-      </span>
-      <!-- 内容全屏 -->
-      <span class="tags-actions__btn" @click="appStore.toggleContentFullscreen()">
+      </button>
+      <button
+        type="button"
+        class="tags-actions__btn"
+        aria-label="内容全屏"
+        title="内容全屏"
+        @click="appStore.toggleContentFullscreen()"
+      >
        <div v-if="!appStore.contentFullscreen" class="i-svg:fullscreen icon-16" />
        <div v-else class="i-svg:fullscreen-exit icon-16" />
-      </span>
-      <!-- 下拉菜单 -->
+      </button>
      <el-dropdown trigger="click" @command="handleActionCommand">
-        <span class="tags-actions__btn">
+        <button type="button" class="tags-actions__btn" aria-label="页签操作" title="页签操作">
          <el-icon :size="16"><ArrowDown /></el-icon>
-        </span>
+        </button>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item command="refresh">
@@ -174,10 +182,8 @@ const tagsStyleClass = computed(() => {
  }
 });

-// 图标兼容：判断是否为 Element Plus 图标 (el-icon-xxx)
 const isEpIcon = (icon: string) => icon.startsWith("el-icon");

-// 图标兼容：el-icon-xxx → PascalCase 组件名
 const toEpIconName = (icon: string) =>
  icon.replace("el-icon-", "").replace(/(^|-)\w/g, (s) => s.slice(-1).toUpperCase());

@@ -202,7 +208,6 @@ const contextMenuStyle = computed(() => {
  };
 });

-// 标签栏右侧操作按钮分发
 const handleActionCommand = (command: string) => {
  switch (command) {
    case "refresh":
@@ -226,7 +231,6 @@ const handleActionCommand = (command: string) => {
  }
 };

-// path → TagView 映射，用于快速查找标签
 const routePathMap = computed(() => {
  const map = new Map<string, TagView>();
  visitedViews.value.forEach((tag) => {
@@ -235,7 +239,6 @@ const routePathMap = computed(() => {
  return map;
 });

-// 判断右键选中标签是否为最左侧（不可关闭左侧）
 const isFirstView = computed(() => {
  if (!selectedTag.value) return false;
  return (
@@ -244,13 +247,11 @@ const isFirstView = computed(() => {
  );
 });

-// 判断右键选中标签是否为最右侧（不可关闭右侧）
 const isLastView = computed(() => {
  if (!selectedTag.value) return false;
  return selectedTag.value.fullPath === visitedViews.value[visitedViews.value.length - 1]?.fullPath;
 });

-// 从路由表中提取所有 affix 固定标签
 const extractAffixTags = (routes: RouteRecordRaw[], basePath = "/"): TagView[] => {
  const affixTags: TagView[] = [];

@@ -341,7 +342,6 @@ const closeContextMenu = () => {
  contextMenu.visible = false;
 };

-// 鼠标滚轮横向滚动（标签栏超出可视区时生效）
 const handleScroll = (event: WheelEvent) => {
  closeContextMenu();

@@ -358,7 +358,6 @@ const handleScroll = (event: WheelEvent) => {
  scrollbarRef.value.setScrollLeft(newScrollLeft);
 };

-// 刷新指定标签页：移除缓存后跳转 redirect 中转页重新加载
 const refreshSelectedTag = (tag: TagView | null) => {
  if (!tag) return;

@@ -368,7 +367,6 @@ const refreshSelectedTag = (tag: TagView | null) => {
  });
 };

-// 关闭指定标签页，若关闭的是当前激活标签则跳转到最后一个
 const closeSelectedTag = (tag: TagView | null) => {
  if (!tag) return;

@@ -379,18 +377,10 @@ const closeSelectedTag = (tag: TagView | null) => {
  });
 };

-// 批量关闭标签（左/右/其它方向）
-
 /**
- * 按方向批量关闭标签的通用执行器。
- *
- * closeLeftTagsForActive / closeRightTagsForActive / closeLeftTags /
- * closeRightTags 四个公开函数均委托此函数，仅 source（标签来源 ref）
- * 和 batchFn（调用的 store 方法）不同。
- *
- * 关闭后若当前路由对应的标签已被移除，自动跳转到最后一个剩余标签。
+ * 关闭指定方向的标签
 */
-function closeDirectional(
+function closeDirectionalTags(
  source: Ref<TagView | null>,
  batchFn: (tag: TagView) => Promise<{ visitedViews: TagView[] }>
 ) {
@@ -406,7 +396,7 @@ function closeDirectional(
 }

 /**
- * 关闭当前激活标签之外的其它标签。
+ * 关闭当前激活标签之外的其它标签
 */
 const closeOtherTagsForActive = () => {
  if (!currentTag.value) return;
@@ -415,16 +405,11 @@ const closeOtherTagsForActive = () => {
  });
 };

-// 关闭左侧（当前激活标签）
-const closeLeftTagsForActive = () => closeDirectional(currentTag, tagsViewStore.delLeftViews);
-// 关闭右侧（当前激活标签）
-const closeRightTagsForActive = () => closeDirectional(currentTag, tagsViewStore.delRightViews);
-// 关闭左侧（右键选中标签）
-const closeLeftTags = () => closeDirectional(selectedTag, tagsViewStore.delLeftViews);
-// 关闭右侧（右键选中标签）
-const closeRightTags = () => closeDirectional(selectedTag, tagsViewStore.delRightViews);
+const closeLeftTagsForActive = () => closeDirectionalTags(currentTag, tagsViewStore.delLeftViews);
+const closeRightTagsForActive = () => closeDirectionalTags(currentTag, tagsViewStore.delRightViews);
+const closeLeftTags = () => closeDirectionalTags(selectedTag, tagsViewStore.delLeftViews);
+const closeRightTags = () => closeDirectionalTags(selectedTag, tagsViewStore.delRightViews);

-// 关闭右键选中标签以外的其他标签
 const closeOtherTags = () => {
  if (!selectedTag.value) return;
  router.push(selectedTag.value);
@@ -433,14 +418,12 @@ const closeOtherTags = () => {
  });
 };

-// 关闭所有标签页
 const closeAllTags = (tag: TagView | null) => {
  tagsViewStore.delAllViews().then((result) => {
    tagsViewStore.toLastView(result.visitedViews, tag || undefined);
  });
 };

-// 右键菜单生命周期：显示时监听外部点击关闭，卸载时移除监听
 const useContextMenuManager = () => {
  const handleOutsideClick = () => {
    closeContextMenu();
@@ -459,7 +442,6 @@ const useContextMenuManager = () => {
  });
 };

-// 路由变化时同步添加标签并更新激活状态
 watch(
  route,
  () => {
@@ -469,7 +451,6 @@ watch(
  { immediate: true }
 );

-// 初始化固定标签（affix）
 onMounted(() => {
  initAffixTags();
 });
@@ -708,22 +689,36 @@ useContextMenuManager();
    justify-content: center;
    width: 30px;
    height: 30px;
+    padding: 0;
+    font: inherit;
+    color: var(--el-text-color-regular);
+    appearance: none;
    cursor: pointer;
+    background: transparent;
+    border: 0;
    border-radius: 6px;
-    transition: background-color 0.15s ease;
+    transition:
+      color 0.15s ease,
+      background-color 0.15s ease;

    &:hover {
-      background-color: var(--el-fill-color);
+      color: var(--el-color-primary);
+      background-color: color-mix(in srgb, var(--el-color-primary) 10%, transparent);
    }

-    :deep(.el-icon),
-    :deep(div) {
-      opacity: 0.45;
+    &:focus-visible {
+      outline: 2px solid var(--el-color-primary-light-5);
+      outline-offset: 1px;
    }

-    &:hover :deep(.el-icon),
-    &:hover :deep(div) {
-      opacity: 0.7;
+    :deep(.el-icon) {
+      color: currentcolor;
+      --color: currentcolor;
+    }
+
+    .icon-16 {
+      color: currentcolor;
+      background-color: currentcolor;
    }
  }
 }
--- a/src/layouts/components/LayoutToolbar.vue
+++ b/src/layouts/components/LayoutToolbar.vue
@@ -3,7 +3,7 @@
    <!-- 桌面端工具项 -->
    <template v-if="isDesktop">
      <!-- 搜索 -->
-      <div class="navbar-actions__item">
+      <div class="navbar-actions__item navbar-actions__item--search">
        <CommandPalette />
      </div>

@@ -34,7 +34,7 @@
    </template>

    <!-- 用户菜单 -->
-    <div class="navbar-actions__item">
+    <div class="navbar-actions__item navbar-actions__item--profile">
      <el-dropdown trigger="click">
        <div class="user-profile">
          <div style="width: 28px; height: 28px; overflow: hidden; border-radius: 50%">
@@ -110,8 +110,9 @@ function handleTenantChange(tenantId: number) {
      ElMessage.success("切换租户成功");
      window.location.href = "/";
    },
-    (error: any) => {
-      ElMessage.error(error.message || "切换租户失败");
+    (error: unknown) => {
+      const message = error instanceof Error ? error.message : "切换租户失败";
+      ElMessage.error(message);
    }
  );
 }
@@ -177,6 +178,10 @@ function handleSettingsClick() {

 <style lang="scss" scoped>
 .navbar-actions {
+  --navbar-action-color: var(--el-text-color-secondary);
+  --navbar-action-hover-color: var(--el-color-primary);
+  --navbar-action-hover-bg: var(--el-fill-color-light);
+
  display: flex;
  gap: 4px;
  align-items: center;
@@ -190,9 +195,10 @@ function handleSettingsClick() {
    min-width: 32px;
    height: 32px;
    padding: 0 6px;
+    color: var(--navbar-action-color);
    text-align: center;
    cursor: pointer;
-    border-radius: 8px;
+    border-radius: 6px;
    transition:
      background-color 0.16s,
      color 0.16s;
@@ -212,6 +218,14 @@ function handleSettingsClick() {
      justify-content: center;
      width: 100%;
      height: 32px;
+      color: inherit !important;
+    }
+
+    :deep(.el-tooltip__trigger),
+    :deep(.fullscreen-trigger),
+    :deep(.size-trigger),
+    :deep(.notice__trigger) {
+      color: inherit;
    }

    :deep(.i-svg\:language) {
@@ -223,20 +237,40 @@ function handleSettingsClick() {
      background-size: 16px 16px;
    }

-    // 图标样式
-    :deep([class*="i-svg:"]) {
+    :deep([class*="i-svg:"]),
+    :deep(.el-icon) {
+      --color: currentColor;
+
      font-size: 16px;
      line-height: 1;
-      color: var(--el-text-color-secondary);
-      transition: color 0.2s;
+      color: currentColor !important;
+      transition: color 0.16s;
+    }
+
+    :deep([class*="i-svg:"]) {
+      background-color: currentColor !important;
    }

    &:hover {
-      background: var(--el-fill-color);
+      color: var(--navbar-action-hover-color);
+      background: var(--navbar-action-hover-bg);
+    }
+  }

-      :deep([class*="i-svg:"]) {
-        color: var(--el-color-primary);
-      }
+  &__item--search {
+    color: var(--el-text-color-secondary);
+
+    &:hover {
+      background: transparent;
+    }
+  }
+
+  &__item--profile {
+    padding-right: 4px;
+    padding-left: 4px;
+
+    &:hover {
+      background: transparent;
    }
  }

@@ -257,7 +291,7 @@ function handleSettingsClick() {
    &__name {
      margin-left: 8px;
      font-size: 13px;
-      color: var(--el-text-color-regular);
+      color: currentColor;
      white-space: nowrap;
      transition: color 0.3s;
    }
@@ -266,73 +300,55 @@ function handleSettingsClick() {

 // 白色文字样式（用于深色背景：暗黑主题、顶部布局、混合布局等）
 .navbar-actions--white-text {
-  .navbar-actions__item {
-    :deep([class*="i-svg:"]) {
-      color: color-mix(in srgb, var(--el-color-white) 85%, transparent);
-    }
-
-    &:hover {
-      background: color-mix(in srgb, var(--el-color-white) 10%, transparent);
-
-      :deep([class*="i-svg:"]) {
-        color: var(--el-color-white);
-      }
-    }
-  }
+  --navbar-action-color: var(--menu-text);
+  --navbar-action-hover-color: var(--menu-active-text);
+  --navbar-action-hover-bg: var(--menu-hover);

  .user-profile__name {
-    color: color-mix(in srgb, var(--el-color-white) 85%, transparent);
+    color: currentColor;
  }

  // 租户选择器在白色文字模式下的样式
  ::v-deep(.tenant-switcher__trigger) {
-    color: color-mix(in srgb, var(--el-color-white) 85%, transparent);
+    color: currentColor;
+    background: transparent;
  }
  ::v-deep(.tenant-switcher__trigger .tenant-switcher__icon) {
-    color: color-mix(in srgb, var(--el-color-white) 85%, transparent);
+    color: currentColor;
  }
  ::v-deep(.tenant-switcher__trigger:hover) {
-    color: var(--el-color-white);
-    background: color-mix(in srgb, var(--el-color-white) 10%, transparent);
+    color: var(--navbar-action-hover-color);
+    background: var(--navbar-action-hover-bg);
  }
  ::v-deep(.tenant-switcher__trigger:hover .tenant-switcher__icon) {
-    color: var(--el-color-white);
+    color: currentColor;
  }
 }

 // 深色文字样式（用于浅色背景：明亮主题下的左侧布局等）
 .navbar-actions--dark-text {
-  .navbar-actions__item {
-    :deep([class*="i-svg:"]) {
-      color: var(--el-text-color-secondary) !important;
-    }
-
-    &:hover {
-      background: rgba(0, 0, 0, 0.04);
-
-      :deep([class*="i-svg:"]) {
-        color: var(--el-color-primary) !important;
-      }
-    }
-  }
+  --navbar-action-color: var(--el-text-color-secondary);
+  --navbar-action-hover-color: var(--el-color-primary);
+  --navbar-action-hover-bg: var(--el-fill-color-light);

  .user-profile__name {
-    color: var(--el-text-color-regular) !important;
+    color: var(--el-text-color-regular);
  }

  // 租户选择器在深色文字模式下的样式
  ::v-deep(.tenant-switcher__trigger) {
-    color: var(--el-text-color-regular) !important;
+    color: var(--el-text-color-regular);
+    background: transparent;
  }
  ::v-deep(.tenant-switcher__trigger .tenant-switcher__icon) {
-    color: var(--el-text-color-regular) !important;
+    color: currentColor;
  }
  ::v-deep(.tenant-switcher__trigger:hover) {
-    color: var(--el-color-primary) !important;
-    background: var(--el-fill-color-light);
+    color: var(--navbar-action-hover-color);
+    background: var(--navbar-action-hover-bg);
  }
  ::v-deep(.tenant-switcher__trigger:hover .tenant-switcher__icon) {
-    color: var(--el-color-primary) !important;
+    color: currentColor;
  }
 }

--- a/src/styles/element-plus-overrides.scss
+++ b/src/styles/element-plus-overrides.scss
@@ -149,7 +149,7 @@
 }

 .el-table {
-  --el-table-border-color: var(--border-color);
+  --el-table-border-color: var(--el-border-color-extra-light);
  --el-table-header-bg-color: #f8fafc;
  --el-table-row-hover-bg-color: #f8fbff;
  --el-table-current-row-bg-color: #eef5ff;
@@ -164,27 +164,31 @@
  }

  &.el-table--border::after {
-    display: block;
-    background-color: var(--border-color);
+    width: 1px;
+    background-color: var(--el-table-border-color);
  }

  .el-table__inner-wrapper::before {
    height: 0;
  }

+  .el-table__inner-wrapper::after {
+    background-color: var(--el-table-border-color);
+  }
+
  .el-table__header th {
    height: 44px;
    padding: 0;
    font-weight: 500;
    color: var(--el-text-color-regular);
    background: var(--el-table-header-bg-color);
-    border-bottom: 1px solid var(--border-color);
+    border-bottom: 1px solid var(--el-table-border-color);
  }

  .el-table__body td {
    height: 46px;
    padding: 0;
-    border-bottom: 1px solid #eef1f6;
+    border-bottom: 1px solid var(--el-table-border-color);
  }

  .cell {
@@ -192,7 +196,12 @@
  }

  .el-table__fixed-right {
-    box-shadow: -1px 0 0 var(--border-color);
+    box-shadow: -1px 0 0 var(--el-table-border-color);
+  }
+
+  .el-table-fixed-column--left.is-last-column::before,
+  .el-table-fixed-column--right.is-first-column::before {
+    box-shadow: none;
  }

  &.is-empty {
--- a/src/styles/mixins.scss
+++ b/src/styles/mixins.scss
@@ -4,10 +4,6 @@

@use "variables" as *;

-@mixin app-main-height-with-tags {
-  height: calc(100vh - $navbar-height - $tags-view-height) !important;
-}
-
@mixin app-main-height {
  height: calc(100vh - $navbar-height);
 }
--- a/src/styles/page.scss
+++ b/src/styles/page.scss
@@ -68,26 +68,43 @@
 }

 .page-table-wrapper {
+  --page-table-border-color: var(--el-border-color-extra-light);
+
  min-height: 0;
  overflow: hidden;
  background: var(--content-bg);
-  border: 1px solid var(--border-color);
+  border: 1px solid var(--page-table-border-color);
  border-radius: var(--card-radius);
 }

 .page-table {
+  --el-table-border-color: var(--page-table-border-color);
+
  width: 100%;
  height: 100%;
  min-height: 0;
  border-radius: 0;

  &.el-table--border {
-    border: 0;
+    border: 0 !important;
  }

  .el-table__inner-wrapper {
    height: 100%;
  }
+
+  &::before,
+  &.el-table--border::before,
+  &.el-table--border::after,
+  &.el-table--border .el-table__inner-wrapper::after {
+    display: none;
+  }
+
+  .el-table__border-left-patch,
+  .el-table__border-right-patch,
+  .el-table__border-bottom-patch {
+    display: none;
+  }
 }

 .page-pagination {
--- a/src/styles/theme.scss
+++ b/src/styles/theme.scss
@@ -30,7 +30,7 @@ html.sidebar-color-blue {
  --menu-background: #304156;
  --menu-text: #bfcbd9;
  --menu-active-text: #ffffff;
-  --menu-active-bg: rgb(22 93 255 / 18%);
+  --menu-active-bg: rgb(64 158 255 / 22%);
  --menu-hover: rgb(255 255 255 / 7%);
  --menu-border: rgb(15 23 42 / 22%);
  --sidebar-logo-background: #2d3748;
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -594,8 +594,7 @@ $pad: 10px;
  flex-direction: column;
  gap: $gap;
  padding: $pad;
-  background:
-    linear-gradient(180deg, rgb(255 255 255 / 62%), rgb(255 255 255 / 0%) 240px), var(--page-bg);
+  background: var(--page-bg);
 }

 // Header