From 3b7a1b0254d170a23fc857481c2c7c2f785edce7 Mon Sep 17 00:00:00 2001
From: theo <971366405@qq.com>
Date: Thu, 25 Dec 2025 17:06:39 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20:sparkles:=20=E6=96=B0=E5=A2=9E?=
 =?UTF-8?q?=E4=B8=BB=E9=A2=98=E8=B7=9F=E9=9A=8F=E7=B3=BB=E7=BB=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

新增主题跟随系统
---
 src/components/DarkModeSwitch/index.vue |  3 ++-
 src/lang/package/en.json                |  1 +
 src/lang/package/zh-cn.json             |  1 +
 src/store/modules/settings-store.ts     | 36 +++++++++++++++++++++++--
 4 files changed, 38 insertions(+), 3 deletions(-)

diff --git a/src/components/DarkModeSwitch/index.vue b/src/components/DarkModeSwitch/index.vue
index 780c1abc..71baf173 100644
--- a/src/components/DarkModeSwitch/index.vue
+++ b/src/components/DarkModeSwitch/index.vue
@@ -23,7 +23,7 @@
 <script setup lang="ts">
 import { useSettingsStore } from "@/store";
 import { ThemeMode } from "@/enums";
-import { Moon, Sunny } from "@element-plus/icons-vue";
+import { Moon, Sunny, Monitor } from "@element-plus/icons-vue";
 
 const { t } = useI18n();
 const settingsStore = useSettingsStore();
@@ -31,6 +31,7 @@ const settingsStore = useSettingsStore();
 const theneList = [
   { label: t("login.light"), value: ThemeMode.LIGHT, component: Sunny },
   { label: t("login.dark"), value: ThemeMode.DARK, component: Moon },
+  { label: t("login.auto"), value: ThemeMode.AUTO, component: Monitor },
 ];
 
 const handleDarkChange = (theme: ThemeMode) => {
diff --git a/src/lang/package/en.json b/src/lang/package/en.json
index 021e409f..86cede1e 100644
--- a/src/lang/package/en.json
+++ b/src/lang/package/en.json
@@ -8,6 +8,7 @@
     "languageToggle": "Language Switch",
     "dark": "Dark",
     "light": "Light",
+    "auto": "Follow System",
     "username": "Username",
     "password": "Password",
     "login": "Login",
diff --git a/src/lang/package/zh-cn.json b/src/lang/package/zh-cn.json
index 3346ce08..fd2f8da1 100644
--- a/src/lang/package/zh-cn.json
+++ b/src/lang/package/zh-cn.json
@@ -8,6 +8,7 @@
     "languageToggle": "语言切换",
     "dark": "暗黑",
     "light": "明亮",
+    "auto": "跟随系统",
     "username": "用户名",
     "password": "密码",
     "login": "登 录",
diff --git a/src/store/modules/settings-store.ts b/src/store/modules/settings-store.ts
index f96c9ec9..fdd1cb69 100644
--- a/src/store/modules/settings-store.ts
+++ b/src/store/modules/settings-store.ts
@@ -66,6 +66,35 @@ export const useSettingsStore = defineStore("setting", () => {
   // 主题模式（亮色/暗色）
   const theme = useStorage<ThemeMode>(STORAGE_KEYS.THEME, defaultSettings.theme);
 
+  // 系统主题媒体查询（用于 ThemeMode.AUTO）
+  const prefersDarkMedia =
+    typeof window !== "undefined" && typeof window.matchMedia === "function"
+      ? window.matchMedia("(prefers-color-scheme: dark)")
+      : null;
+
+  function getSystemTheme(): ThemeMode {
+    return prefersDarkMedia && prefersDarkMedia.matches ? ThemeMode.DARK : ThemeMode.LIGHT;
+  }
+
+  function handleSystemThemeChange(e: MediaQueryListEvent | MediaQueryList) {
+    // 仅在用户选择自动（跟随系统）时响应系统主题变化
+    if (theme.value === ThemeMode.AUTO) {
+      const effectiveTheme = (e as MediaQueryList).matches ? ThemeMode.DARK : ThemeMode.LIGHT;
+      toggleDarkMode(effectiveTheme === ThemeMode.DARK);
+      const colors = generateThemeColors(themeColor.value, effectiveTheme);
+      applyTheme(colors);
+    }
+  }
+
+  if (prefersDarkMedia) {
+    // 兼容旧浏览器和新浏览器的监听方式
+    if (typeof prefersDarkMedia.addEventListener === "function") {
+      prefersDarkMedia.addEventListener("change", handleSystemThemeChange);
+    } else if (typeof (prefersDarkMedia as any).addListener === "function") {
+      (prefersDarkMedia as any).addListener(handleSystemThemeChange);
+    }
+  }
+
   // 设置项映射，用于统一管理
   const settingsMap = {
     showTagsView,
@@ -80,8 +109,11 @@ export const useSettingsStore = defineStore("setting", () => {
   watch(
     [theme, themeColor],
     ([newTheme, newThemeColor]: [ThemeMode, string]) => {
-      toggleDarkMode(newTheme === ThemeMode.DARK);
-      const colors = generateThemeColors(newThemeColor, newTheme);
+      // 计算实际生效的主题：若为 AUTO 则使用系统当前偏好
+      const effectiveTheme: ThemeMode = newTheme === ThemeMode.AUTO ? getSystemTheme() : newTheme;
+
+      toggleDarkMode(effectiveTheme === ThemeMode.DARK);
+      const colors = generateThemeColors(newThemeColor, effectiveTheme);
       applyTheme(colors);
     },
     { immediate: true }