refactor: ♻️ 侧边栏配色方案命名优化调整

src/enums/ThemeEnum.ts

@@ -18,15 +18,15 @@ export const enum ThemeEnum {
 }
 
 /**
- * 浅色主题下的侧边栏配色方案枚举
+ * 侧边栏配色方案枚举
  */
-export const enum SidebarLightThemeEnum {
+export const enum SidebarColorEnum {
   /**
-   * 深蓝色
+   * 经典蓝
    */
-  DARKBLUE = "light-darkBlue",
+  CLASSIC_BLUE = "classic-blue",
   /**
-   * 白色
+   * 极简白
    */
-  WHITE = "light-white",
+  MINIMAL_WHITE = "minimal-white",
 }

src/lang/package/en.ts

@@ -59,7 +59,7 @@ export default {
     sidebarLogo: "Sidebar Logo",
     sidebarColorScheme: "Sidebar Color Scheme",
     watermark: "Watermark",
-    white: "white",
-    darkBlue: "darkBlue",
+    classicBlue: "Classic Blue",
+    minimalWhite: "Minimal White",
   },
 };

src/lang/package/zh-cn.ts

@@ -57,9 +57,9 @@ export default {
     themeColor: "主题颜色",
     tagsView: "开启 Tags-View",
     sidebarLogo: "侧边栏 Logo",
-    sidebarColorScheme: "侧边栏配色方案",
+    sidebarColorScheme: "侧边栏配色",
     watermark: "开启水印",
-    white: "白色",
-    darkBlue: "深蓝色",
+    classicBlue: "经典蓝",
+    minimalWhite: "极简白",
   },
 };

src/layout/components/NavBar/components/NavbarRight.vue

@@ -48,7 +48,7 @@ import { DeviceEnum } from "@/enums/DeviceEnum";
 import { useAppStore, useSettingsStore, useUserStore, useTagsViewStore } from "@/store";
 
 import Notification from "./Notification.vue";
-import { SidebarLightThemeEnum, ThemeEnum } from "@/enums/ThemeEnum";
+import { SidebarColorEnum, ThemeEnum } from "@/enums/ThemeEnum";
 
 const appStore = useAppStore();
 const settingStore = useSettingsStore();
@@ -68,11 +68,16 @@ function handleProfileClick() {
 
 // 根据主题和侧边栏配色方案选择 navbar 右侧的样式类
 const navbarRightClass = computed(() => {
-  const isDarkTheme = settingStore.theme === ThemeEnum.DARK;
-  const isDarkBlueSidebar = settingStore.sidebarColorScheme === SidebarLightThemeEnum.DARKBLUE;
+  // 如果暗黑主题
+  if (settingStore.theme === ThemeEnum.DARK) {
+    return "navbar__right--white";
+  }
 
-  // 如果是暗黑主题，或者是浅色主题中的深蓝色侧边栏配色
-  return isDarkTheme || isDarkBlueSidebar ? "navbar__right--darkBlue" : "navbar__right--white";
+  // 如果侧边栏是经典蓝
+
+  if (settingStore.sidebarColorScheme === SidebarColorEnum.CLASSIC_BLUE) {
+    return "navbar__right--white";
+  }
 });
 
 /**
@@ -135,14 +140,9 @@ function logout() {
   }
 }
 
-.layout-top .navbar__right--darkBlue > *,
-.layout-mix .navbar__right--darkBlue > * {
-  color: #fff;
-}
-
 .layout-top .navbar__right--white > *,
 .layout-mix .navbar__right--white > * {
-  color: #000;
+  color: #fff;
 }
 
 .dark .navbar__right > *:hover {

src/layout/components/Settings/index.vue

@@ -30,8 +30,10 @@
     <div v-if="!isDark" class="py-1 flex-x-between">
       <span class="text-xs">{{ $t("settings.sidebarColorScheme") }}</span>
       <el-radio-group v-model="settingsStore.sidebarColorScheme" @change="changeSidebarColorScheme">
-        <el-radio :value="SidebarLightThemeEnum.WHITE">{{ $t("settings.white") }}</el-radio>
-        <el-radio :value="SidebarLightThemeEnum.DARKBLUE">{{ $t("settings.darkBlue") }}</el-radio>
+        <el-radio :value="SidebarColorEnum.MINIMAL_WHITE">
+          {{ $t("settings.minimalWhite") }}
+        </el-radio>
+        <el-radio :value="SidebarColorEnum.CLASSIC_BLUE">{{ $t("settings.classicBlue") }}</el-radio>
       </el-radio-group>
     </div>
 
@@ -44,7 +46,7 @@
 <script setup lang="ts">
 import { LayoutEnum } from "@/enums/LayoutEnum";
 import { ThemeEnum } from "@/enums/ThemeEnum";
-import { SidebarLightThemeEnum } from "@/enums/ThemeEnum";
+import { SidebarColorEnum } from "@/enums/ThemeEnum";
 import { useSettingsStore, usePermissionStore, useAppStore } from "@/store";
 
 const route = useRoute();

src/layout/components/Sidebar/components/SidebarMenu.vue

@@ -5,17 +5,17 @@
     :default-active="currentRoute.path"
     :collapse="!appStore.sidebar.opened"
     :background-color="
-      theme === 'dark' || sidebarColorScheme === SidebarLightThemeEnum.DARKBLUE
+      theme === 'dark' || sidebarColorScheme === SidebarColorEnum.CLASSIC_BLUE
         ? variables['menu-background']
         : undefined
     "
     :text-color="
-      theme === 'dark' || sidebarColorScheme === SidebarLightThemeEnum.DARKBLUE
+      theme === 'dark' || sidebarColorScheme === SidebarColorEnum.CLASSIC_BLUE
         ? variables['menu-text']
         : undefined
     "
     :active-text-color="
-      theme === 'dark' || sidebarColorScheme === SidebarLightThemeEnum.DARKBLUE
+      theme === 'dark' || sidebarColorScheme === SidebarColorEnum.CLASSIC_BLUE
         ? variables['menu-active-text']
         : undefined
     "
@@ -42,7 +42,7 @@ import type { MenuInstance } from "element-plus";
 import type { RouteRecordRaw } from "vue-router";
 
 import { LayoutEnum } from "@/enums/LayoutEnum";
-import { SidebarLightThemeEnum } from "@/enums/ThemeEnum";
+import { SidebarColorEnum } from "@/enums/ThemeEnum";
 import { useSettingsStore, useAppStore } from "@/store";
 import { isExternal } from "@/utils/index";
 

src/layout/components/Sidebar/components/SidebarMenuItem.vue

@@ -193,7 +193,7 @@ html.dark {
   }
 }
 
-html.light-darkBlue {
+html.sidebar-color-blue {
   .el-menu-item:hover {
     background-color: $menu-hover;
   }

src/layout/components/Sidebar/components/SidebarMixTopMenu.vue

@@ -5,17 +5,17 @@
       mode="horizontal"
       :default-active="activePath"
       :background-color="
-        theme === 'dark' || sidebarColorScheme === SidebarLightThemeEnum.DARKBLUE
+        theme === 'dark' || sidebarColorScheme === SidebarColorEnum.CLASSIC_BLUE
           ? variables['menu-background']
           : undefined
       "
       :text-color="
-        theme === 'dark' || sidebarColorScheme === SidebarLightThemeEnum.DARKBLUE
+        theme === 'dark' || sidebarColorScheme === SidebarColorEnum.CLASSIC_BLUE
           ? variables['menu-text']
           : undefined
       "
       :active-text-color="
-        theme === 'dark' || sidebarColorScheme === SidebarLightThemeEnum.DARKBLUE
+        theme === 'dark' || sidebarColorScheme === SidebarColorEnum.CLASSIC_BLUE
           ? variables['menu-active-text']
           : undefined
       "
@@ -44,7 +44,7 @@ import { LocationQueryRaw, RouteRecordRaw } from "vue-router";
 import { usePermissionStore, useAppStore, useSettingsStore } from "@/store";
 import { translateRouteTitle } from "@/utils/i18n";
 import variables from "@/styles/variables.module.scss";
-import { SidebarLightThemeEnum } from "@/enums/ThemeEnum";
+import { SidebarColorEnum } from "@/enums/ThemeEnum";
 
 const router = useRouter();
 const appStore = useAppStore();

src/settings.ts

@@ -1,6 +1,6 @@
 import { SizeEnum } from "./enums/SizeEnum";
 import { LayoutEnum } from "./enums/LayoutEnum";
-import { ThemeEnum, SidebarLightThemeEnum } from "./enums/ThemeEnum";
+import { ThemeEnum, SidebarColorEnum } from "./enums/ThemeEnum";
 import { LanguageEnum } from "./enums/LanguageEnum";
 
 const { pkg } = __APP_INFO__;
@@ -34,7 +34,7 @@ const defaultSettings: AppSettings = {
   // 水印内容
   watermarkContent: pkg.name,
   // 侧边栏配色方案
-  sidebarColorScheme: SidebarLightThemeEnum.WHITE,
+  sidebarColorScheme: SidebarColorEnum.CLASSIC_BLUE,
 };
 
 export default defaultSettings;

src/store/modules/settings.ts

@@ -1,12 +1,7 @@
 import defaultSettings from "@/settings";
-import { SidebarLightThemeEnum, ThemeEnum } from "@/enums/ThemeEnum";
+import { SidebarColorEnum, ThemeEnum } from "@/enums/ThemeEnum";
 import { LayoutEnum } from "@/enums/LayoutEnum";
-import {
-  generateThemeColors,
-  applyTheme,
-  toggleDarkMode,
-  toggleLightModeSidebarColorScheme,
-} from "@/utils/theme";
+import { generateThemeColors, applyTheme, toggleDarkMode, toggleSidebarColor } from "@/utils/theme";
 
 type SettingsValue = boolean | string;
 
@@ -17,7 +12,7 @@ export const useSettingsStore = defineStore("setting", () => {
   const tagsView = useStorage<boolean>("tagsView", defaultSettings.tagsView);
   // 侧边栏 Logo
   const sidebarLogo = useStorage<boolean>("sidebarLogo", defaultSettings.sidebarLogo);
-  // 浅色主题下的侧边栏配色方案 (白色/深蓝色)
+  // 侧边栏配色方案 (经典蓝/极简白)
   const sidebarColorScheme = useStorage<string>(
     "sidebarColorScheme",
     defaultSettings.sidebarColorScheme
@@ -49,7 +44,7 @@ export const useSettingsStore = defineStore("setting", () => {
   watch(
     [sidebarColorScheme],
     ([newSidebarColorScheme]) => {
-      toggleLightModeSidebarColorScheme(newSidebarColorScheme === SidebarLightThemeEnum.DARKBLUE);
+      toggleSidebarColor(newSidebarColorScheme === SidebarColorEnum.CLASSIC_BLUE);
     },
     { immediate: true }
   );

src/styles/variables.scss

@@ -41,7 +41,7 @@
 }
 
 /** 浅色主题-深蓝色侧边栏配色 */
-html.light-darkBlue {
+html.sidebar-color-blue {
   --menu-background: #304156; // 菜单背景色
   --menu-text: #bfcbd9; // 菜单文字颜色
   --menu-active-text: var(--el-menu-active-color); // 菜单激活文字颜色

src/types/global.d.ts

@@ -76,8 +76,8 @@ declare global {
     watermarkEnabled: boolean;
     /** 水印内容 */
     watermarkContent: string;
-    /** 侧边栏配色方案(light-white | light-darkBlue) */
-    sidebarColorScheme: "light-white" | "light-darkBlue";
+    /** 侧边栏配色方案 */
+    sidebarColorScheme: "classic-blue" | "minimal-white";
   }
 
   /**

src/utils/theme.ts

@@ -1,5 +1,3 @@
-import { SidebarLightThemeEnum } from "@/enums/ThemeEnum";
-
 // 辅助函数：将十六进制颜色转换为 RGB
 function hexToRgb(hex: string): [number, number, number] {
   const bigint = parseInt(hex.slice(1), 16);
@@ -63,10 +61,10 @@ export function toggleDarkMode(isDark: boolean) {
  *
  * @param isBlue 布尔值，表示是否开启深蓝色侧边栏颜色方案
  */
-export function toggleLightModeSidebarColorScheme(isDarkBlueDark: boolean) {
-  if (isDarkBlueDark) {
-    document.documentElement.classList.add(SidebarLightThemeEnum.DARKBLUE);
+export function toggleSidebarColor(isBuleSidebar: boolean) {
+  if (isBuleSidebar) {
+    document.documentElement.classList.add("sidebar-color-blue");
   } else {
-    document.documentElement.classList.remove(SidebarLightThemeEnum.DARKBLUE);
+    document.documentElement.classList.remove("sidebar-color-blue");
   }
 }