fix(theme): 修复跟随系统主题解析

src/layouts/MixLayout.vue

@@ -77,7 +77,7 @@ import { useLayout } from "./useLayout";
 import { useAppStore, usePermissionStore, useSettingsStore } from "@/stores";
 import { isExternal } from "@/utils/index";
 import { translateRouteTitle } from "@/lang/utils";
-import { SidebarColor } from "@/enums/settings";
+import { SidebarColor, ThemeMode } from "@/enums/settings";
 import { ElIcon } from "element-plus";
 import BaseLayout from "./BaseLayout.vue";
 import LayoutLogo from "./components/LayoutLogo.vue";
@@ -127,7 +127,8 @@ const isLogoCollapsed = computed(() => width.value < 768);
 // 是否使用深色菜单配色（暗色主题或经典蓝侧边栏）
 const useMenuColors = computed(
   () =>
-    settingsStore.theme === "dark" || settingsStore.sidebarColorScheme === SidebarColor.CLASSIC_BLUE
+    settingsStore.resolvedTheme === ThemeMode.DARK ||
+    settingsStore.sidebarColorScheme === SidebarColor.CLASSIC_BLUE
 );
 
 // 顶部菜单项（处理单子菜单显示优化）

src/layouts/components/LayoutSettings.vue

@@ -11,13 +11,17 @@
         <el-divider>{{ t("settings.theme") }}</el-divider>
 
         <div class="flex-center">
-          <el-switch
-            v-model="isDark"
-            active-icon="Moon"
-            inactive-icon="Sunny"
-            class="theme-switch"
-            @change="handleThemeChange"
-          />
+          <el-radio-group v-model="themeMode" class="theme-mode-group">
+            <el-radio-button :value="ThemeMode.LIGHT">
+              {{ t("login.light") }}
+            </el-radio-button>
+            <el-radio-button :value="ThemeMode.DARK">
+              {{ t("login.dark") }}
+            </el-radio-button>
+            <el-radio-button :value="ThemeMode.AUTO">
+              {{ t("login.auto") }}
+            </el-radio-button>
+          </el-radio-group>
         </div>
       </section>
 
@@ -71,7 +75,10 @@
           <el-switch v-model="settingsStore.colorWeak" />
         </div>
 
-        <div v-if="!isDark" class="config-item flex-x-between">
+        <div
+          v-if="settingsStore.resolvedTheme !== ThemeMode.DARK"
+          class="config-item flex-x-between"
+        >
           <span class="text-xs">{{ t("settings.sidebarColorScheme") }}</span>
           <el-radio-group v-model="sidebarColor" @change="changeSidebarColor">
             <el-radio :value="SidebarColor.CLASSIC_BLUE">
@@ -199,8 +206,13 @@ const colorPresets = [...themeColorPresets];
 
 const settingsStore = useSettingsStore();
 
-const isDark = ref<boolean>(settingsStore.theme === ThemeMode.DARK);
 const sidebarColor = ref(settingsStore.sidebarColorScheme);
+const themeMode = computed({
+  get: () => settingsStore.theme,
+  set: (value: ThemeMode) => {
+    settingsStore.theme = value;
+  },
+});
 
 const selectedThemeColor = computed({
   get: () => settingsStore.themeColor,
@@ -214,15 +226,6 @@ const drawerVisible = computed({
   set: (value) => (settingsStore.settingsVisible = value),
 });
 
-/**
- * 处理主题切换
- *
- * @param isDark 是否启用暗黑模式
- */
-const handleThemeChange = (isDark: string | number | boolean) => {
-  settingsStore.theme = isDark ? ThemeMode.DARK : ThemeMode.LIGHT;
-};
-
 /**
  * 更改侧边栏颜色
  *
@@ -277,8 +280,6 @@ const handleResetSettings = async () => {
   try {
     settingsStore.resetSettings();
 
-    // 同步更新本地状态"
-    isDark.value = settingsStore.theme === ThemeMode.DARK;
     sidebarColor.value = settingsStore.sidebarColorScheme;
 
     ElMessage.success(t("settings.resetSuccess"));

src/layouts/components/LayoutSidebar.vue

@@ -29,7 +29,7 @@ import { useRoute } from "vue-router";
 import path from "path-browserify";
 import type { MenuInstance } from "element-plus";
 import type { RouteRecordRaw } from "vue-router";
-import { SidebarColor } from "@/enums/settings";
+import { SidebarColor, ThemeMode } from "@/enums/settings";
 import { useSettingsStore, useAppStore } from "@/stores";
 import { isExternal } from "@/utils/index";
 import LayoutSidebarItem from "./LayoutSidebarItem.vue";
@@ -61,7 +61,7 @@ const currentRoute = useRoute();
 const expandedMenuIndexes = ref<string[]>([]);
 
 // 获取主题
-const theme = computed(() => settingsStore.theme);
+const theme = computed(() => settingsStore.resolvedTheme);
 
 // 获取浅色主题下的侧边栏配色方案
 const sidebarColorScheme = computed(() => settingsStore.sidebarColorScheme);
@@ -69,7 +69,7 @@ const sidebarColorScheme = computed(() => settingsStore.sidebarColorScheme);
 // 菜单主题属性
 const menuThemeProps = computed(() => {
   const isDarkOrClassicBlue =
-    theme.value === "dark" || sidebarColorScheme.value === SidebarColor.CLASSIC_BLUE;
+    theme.value === ThemeMode.DARK || sidebarColorScheme.value === SidebarColor.CLASSIC_BLUE;
 
   return {
     backgroundColor: isDarkOrClassicBlue ? variables["menu-background"] : undefined,

src/layouts/components/LayoutToolbar.vue

@@ -125,15 +125,15 @@ function handleProfileClick() {
 
 // 根据主题和侧边栏配色方案选择样式类
 const navbarActionsClass = computed(() => {
-  const { theme, sidebarColorScheme, layout } = settingStore;
+  const { resolvedTheme, sidebarColorScheme, layout } = settingStore;
 
   // 暗黑主题下，所有布局都使用白色文字
-  if (theme === ThemeMode.DARK) {
+  if (resolvedTheme === ThemeMode.DARK) {
     return "navbar-actions--white-text";
   }
 
   // 明亮主题下
-  if (theme === ThemeMode.LIGHT) {
+  if (resolvedTheme === ThemeMode.LIGHT) {
     // 顶部布局和混合布局的顶部区域：
     // - 如果侧边栏是经典蓝色，使用白色文字
     // - 如果侧边栏是极简白色，使用深色文字