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

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();