fix: login page dark style

web/src/components/Index.vue

@@ -25,34 +25,48 @@ const isUserMenuOpen = ref(false)
 const userAccount = ref('管理员')
 const siteConfig = ref<any>({})
 
-// 主题：明暗模式
-const getInitialTheme = (): 'light' | 'dark' => {
+// 主题：明暗模式与跟随系统
+type ThemePreference = 'light' | 'dark' | 'system'
+
+const getInitialThemePreference = (): ThemePreference => {
   try {
-    const stored = localStorage.getItem('theme') as 'light' | 'dark' | null
-    if (stored === 'light' || stored === 'dark') return stored
-    const systemDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
-    return systemDark ? 'dark' : 'light'
+    const storedPref = localStorage.getItem('themePreference') as ThemePreference | null
+    if (storedPref === 'light' || storedPref === 'dark' || storedPref === 'system') return storedPref
+    const legacy = localStorage.getItem('theme') as 'light' | 'dark' | null
+    if (legacy === 'light' || legacy === 'dark') return legacy
+    return 'system'
   } catch {
-    return 'light'
+    return 'system'
   }
 }
 
-const theme = ref<'light' | 'dark'>(getInitialTheme())
+const themePreference = ref<ThemePreference>(getInitialThemePreference())
+const theme = ref<'light' | 'dark'>('light')
 
-const applyTheme = (next: 'light' | 'dark') => {
-  theme.value = next
-  if (next === 'dark') {
+const applyThemeFromPreference = () => {
+  const systemDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
+  const effective: 'light' | 'dark' = themePreference.value === 'system'
+    ? (systemDark ? 'dark' : 'light')
+    : themePreference.value
+  theme.value = effective
+  if (effective === 'dark') {
     document.documentElement.classList.add('dark')
   } else {
     document.documentElement.classList.remove('dark')
   }
-  try { localStorage.setItem('theme', next) } catch {}
+  try { localStorage.setItem('themePreference', themePreference.value) } catch {}
 }
 
 const toggleTheme = () => {
-  applyTheme(theme.value === 'dark' ? 'light' : 'dark')
+  themePreference.value = themePreference.value === 'light' ? 'dark' : (themePreference.value === 'dark' ? 'system' : 'light')
+  applyThemeFromPreference()
 }
 
+const themeLabel = computed(() => {
+  if (themePreference.value === 'system') return '跟随系统'
+  return theme.value === 'dark' ? '深色' : '浅色'
+})
+
 // 从JWT中解析用户名
 const parseJwtUsername = (token: string): string => {
   try {
@@ -165,6 +179,22 @@ const logout = () => {
 
 // 监听localStorage变化
 onMounted(() => {
+  // 初始化主题并监听系统主题变化
+  applyThemeFromPreference()
+  try {
+    const media = window.matchMedia('(prefers-color-scheme: dark)')
+    const handleSystemChange = () => {
+      if (themePreference.value === 'system') applyThemeFromPreference()
+    }
+    // 新浏览器
+    if (media.addEventListener) {
+      media.addEventListener('change', handleSystemChange)
+    } else if ((media as any).addListener) {
+      // 兼容旧浏览器
+      ;(media as any).addListener(handleSystemChange)
+    }
+  } catch {}
+
   // 初始化用户账号信息
   updateUserAccount();
   
@@ -350,7 +380,7 @@ const siteTitle = computed(() => {
                   </div>
                   <!-- 移动端主题切换入口 -->
                   <button @click="toggleTheme" class="md:hidden w-full text-left px-4 py-2 text-sm hover:bg-muted dark:hover:bg-white/5 flex items-center justify-between">
-                    <span>外观</span>
+                    <span>外观（{{ themeLabel }}）</span>
                     <span class="inline-flex items-center gap-2">
                       <svg v-if="theme === 'dark'" class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                         <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
@@ -366,7 +396,7 @@ const siteTitle = computed(() => {
                         <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/>
                         <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/>
                       </svg>
-                      <span class="text-xs text-muted-foreground">{{ theme === 'dark' ? '深色' : '浅色' }}</span>
+                      <span class="text-xs text-muted-foreground">{{ themeLabel }}</span>
                     </span>
                   </button>
                   <button @click="logout" class="w-full text-left px-4 py-2 text-sm text-red-600 hover:bg-red-50 transition-colors">

web/src/components/Login.vue

@@ -135,13 +135,13 @@ let clickLogin = async () => {
               <div class="flex flex-col gap-6">
                 <!-- 小屏时显示logo和标题 -->
                 <div class="flex flex-col items-center text-center md:hidden">
-                  <div class="w-20 h-20 mb-4 flex justify-center items-center bg-white rounded-full shadow-sm">
+                  <div class="w-20 h-20 mb-4 flex justify-center items-center bg-card dark:bg-muted border border-border rounded-full shadow-sm">
                     <img :src="logo" alt="logo" class="w-12 h-12 object-contain" />
                   </div>
-                  <h1 class="text-2xl font-bold text-gray-900">
+                  <h1 class="text-2xl font-bold text-foreground">
                     欢迎回来！
                   </h1>
-                  <p class="text-sm text-gray-600 mt-1">
+                  <p class="text-sm text-muted-foreground mt-1">
                     {{ slogan }}
                   </p>
                 </div>
@@ -221,8 +221,8 @@ let clickLogin = async () => {
                 </div>
               </div>
             </form>
-            <div class="relative hidden bg-white md:block">
-              <div class="w-full h-full flex justify-center items-center bg-white">
+            <div class="relative hidden md:block bg-card">
+              <div class="w-full h-full flex justify-center items-center bg-card">
                 <img :src="logo" alt="logo" class="max-w-full max-h-full" />
               </div>
             </div>