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

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="navbar__right">
+  <div class="navbar__right" :class="navbarRightClass">
     <!-- 非手机设备（窄屏）才显示 -->
     <template v-if="!isMobile">
       <!-- 搜索 -->
@@ -35,11 +35,19 @@ import { useAppStore, useSettingsStore } from "@/store";
 
 import UserProfile from "./UserProfile.vue";
 import Notification from "./Notification.vue";
+import { SidebarLightThemeEnum } from "@/enums/ThemeEnum";
 
 const appStore = useAppStore();
 const settingStore = useSettingsStore();
 
 const isMobile = computed(() => appStore.device === DeviceEnum.MOBILE);
+
+// 根据浅色模式-侧边栏颜色配置选择navbar右侧的样式类
+const navbarRightClass = computed(() => {
+  return settingStore.sidebarColorScheme === SidebarLightThemeEnum.DARKBLUE
+    ? "navbar__right--darkBlue"
+    : "navbar__right--white";
+});
 </script>
 
 <style lang="scss" scoped>
@@ -70,4 +78,14 @@ const isMobile = computed(() => appStore.device === DeviceEnum.MOBILE);
 .dark .navbar__right > *:hover {
   background: rgb(255 255 255 / 20%);
 }
+
+.layout-top .navbar__right--darkBlue > *,
+.layout-mix .navbar__right--darkBlue > * {
+  color: #fff;
+}
+
+.layout-top .navbar__right--white > *,
+.layout-mix .navbar__right--white > * {
+  color: #000;
+}
 </style>

src/layout/components/Settings/index.vue

@@ -27,6 +27,13 @@
       <span class="text-xs">{{ $t("settings.watermark") }}</span>
       <el-switch v-model="settingsStore.watermarkEnabled" />
     </div>
+    <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-group>
+    </div>
 
     <el-divider>{{ $t("settings.navigation") }}</el-divider>
 
@@ -37,7 +44,7 @@
 <script setup lang="ts">
 import { LayoutEnum } from "@/enums/LayoutEnum";
 import { ThemeEnum } from "@/enums/ThemeEnum";
-
+import { SidebarLightThemeEnum } from "@/enums/ThemeEnum";
 import { useSettingsStore, usePermissionStore, useAppStore } from "@/store";
 
 const route = useRoute();
@@ -74,6 +81,16 @@ const changeTheme = (val: any) => {
   settingsStore.changeTheme(isDark.value ? ThemeEnum.DARK : ThemeEnum.LIGHT);
 };
 
+/**
+ * 更改侧边栏颜色方案
+ *
+ * @param val 颜色方案名称
+ */
+const changeSidebarColorScheme = (val: any) => {
+  console.log(val);
+  settingsStore.changeSidebarColorScheme(val);
+};
+
 /**
  * 切换布局
  *

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

@@ -4,9 +4,21 @@
     ref="menuRef"
     :default-active="currentRoute.path"
     :collapse="!appStore.sidebar.opened"
-    :background-color="theme === 'dark' ? variables['menu-background'] : undefined"
-    :text-color="theme === 'dark' ? variables['menu-text'] : undefined"
-    :active-text-color="theme === 'dark' ? variables['menu-active-text'] : undefined"
+    :background-color="
+      theme === 'dark' || sidebarColorScheme === SidebarLightThemeEnum.DARKBLUE
+        ? variables['menu-background']
+        : undefined
+    "
+    :text-color="
+      theme === 'dark' || sidebarColorScheme === SidebarLightThemeEnum.DARKBLUE
+        ? variables['menu-text']
+        : undefined
+    "
+    :active-text-color="
+      theme === 'dark' || sidebarColorScheme === SidebarLightThemeEnum.DARKBLUE
+        ? variables['menu-active-text']
+        : undefined
+    "
     :popper-effect="theme"
     :unique-opened="false"
     :collapse-transition="false"
@@ -29,6 +41,7 @@ import path from "path-browserify";
 import type { MenuInstance } from "element-plus";
 
 import { LayoutEnum } from "@/enums/LayoutEnum";
+import { SidebarLightThemeEnum } from "@/enums/ThemeEnum";
 import { useSettingsStore, useAppStore } from "@/store";
 import { isExternal } from "@/utils/index";
 
@@ -63,6 +76,9 @@ const menuMode = computed(() => {
 // 获取主题
 const theme = computed(() => settingsStore.theme);
 
+// 获取浅色主题下的侧边栏配色方案
+const sidebarColorScheme = computed(() => settingsStore.sidebarColorScheme);
+
 /**
  * 获取完整路径
  *

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

@@ -192,4 +192,10 @@ html.dark {
     background-color: $menu-hover;
   }
 }
+
+html.light-darkBlue {
+  .el-menu-item:hover {
+    background-color: $menu-hover;
+  }
+}
 </style>

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

@@ -4,9 +4,21 @@
     <el-menu
       mode="horizontal"
       :default-active="activePath"
-      :background-color="theme === 'dark' ? variables['menu-background'] : undefined"
-      :text-color="theme === 'dark' ? variables['menu-text'] : undefined"
-      :active-text-color="theme === 'dark' ? variables['menu-active-text'] : undefined"
+      :background-color="
+        theme === 'dark' || sidebarColorScheme === SidebarLightThemeEnum.DARKBLUE
+          ? variables['menu-background']
+          : undefined
+      "
+      :text-color="
+        theme === 'dark' || sidebarColorScheme === SidebarLightThemeEnum.DARKBLUE
+          ? variables['menu-text']
+          : undefined
+      "
+      :active-text-color="
+        theme === 'dark' || sidebarColorScheme === SidebarLightThemeEnum.DARKBLUE
+          ? variables['menu-active-text']
+          : undefined
+      "
       @select="handleMenuSelect"
     >
       <el-menu-item v-for="route in topMenus" :key="route.path" :index="route.path">
@@ -35,6 +47,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";
 
 /**
  * 定义状态：先定义 reactive、ref 或 computed 状态
@@ -50,6 +63,9 @@ const activePath = computed(() => appStore.activeTopMenuPath);
 // 获取主题
 const theme = computed(() => settingsStore.theme);
 
+// 获取浅色主题下的侧边栏配色方案
+const sidebarColorScheme = computed(() => settingsStore.sidebarColorScheme);
+
 // 顶部菜单列表
 const topMenus = ref<RouteRecordRaw[]>([]);