feat: ✨ 新增浅色模式下的侧边栏配色切换：深蓝色、白色

src/store/modules/settings.ts

@@ -1,6 +1,11 @@
 import defaultSettings from "@/settings";
-import { ThemeEnum } from "@/enums/ThemeEnum";
-import { generateThemeColors, applyTheme, toggleDarkMode } from "@/utils/theme";
+import { SidebarLightThemeEnum, ThemeEnum } from "@/enums/ThemeEnum";
+import {
+  generateThemeColors,
+  applyTheme,
+  toggleDarkMode,
+  toggleLightModeSidebarColorScheme,
+} from "@/utils/theme";
 
 type SettingsValue = boolean | string;
 
@@ -11,6 +16,11 @@ 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
+  );
   // 布局
   const layout = useStorage<string>("layout", defaultSettings.layout);
   // 水印
@@ -34,10 +44,20 @@ export const useSettingsStore = defineStore("setting", () => {
     { immediate: true }
   );
 
+  //  监听浅色侧边栏配色方案变化
+  watch(
+    [sidebarColorScheme],
+    ([newSidebarColorScheme]) => {
+      toggleLightModeSidebarColorScheme(newSidebarColorScheme === SidebarLightThemeEnum.DARKBLUE);
+    },
+    { immediate: true }
+  );
+
   // 设置映射
   const settingsMap: Record<string, Ref<SettingsValue>> = {
     tagsView,
     sidebarLogo,
+    sidebarColorScheme,
     layout,
     watermarkEnabled,
   };
@@ -51,6 +71,10 @@ export const useSettingsStore = defineStore("setting", () => {
     theme.value = val;
   }
 
+  function changeSidebarColorScheme(val: string) {
+    sidebarColorScheme.value = val;
+  }
+
   function changeThemeColor(color: string) {
     themeColor.value = color;
   }
@@ -63,6 +87,7 @@ export const useSettingsStore = defineStore("setting", () => {
     settingsVisible,
     tagsView,
     sidebarLogo,
+    sidebarColorScheme,
     layout,
     themeColor,
     theme,
@@ -71,5 +96,6 @@ export const useSettingsStore = defineStore("setting", () => {
     changeTheme,
     changeThemeColor,
     changeLayout,
+    changeSidebarColorScheme,
   };
 });