feat(ux): 添加暗色/亮色模式切换（跟随系统，持久化 localStorage）

Author: bkmashiro

app/app.vue

@@ -1,8 +1,22 @@
 <template>
-  <NConfigProvider>
+  <NConfigProvider :theme="theme">
     <NuxtLoadingIndicator color="#18a058" />
     <NuxtLayout>
       <NuxtPage />
     </NuxtLayout>
   </NConfigProvider>
 </template>
+
+<script setup lang="ts">
+import { darkTheme, lightTheme } from 'naive-ui'
+
+const { isDark } = useTheme()
+const theme = computed(() => isDark.value ? darkTheme : lightTheme)
+</script>
+
+<style>
+body {
+  background-color: v-bind('isDark ? "#101014" : "#f5f5f5"');
+  transition: background-color 0.3s;
+}
+</style>

app/components/AppHeader.vue

@@ -27,7 +27,14 @@
             <NIcon><MailOutline /></NIcon>
           </NButton>
         </NBadge>
+      </template>
+
+      <!-- 深色/浅色模式切换 -->
+      <NButton text style="font-size: 20px; line-height: 1" @click="toggle">
+        <NIcon><component :is="isDark ? SunnyOutline : MoonOutline" /></NIcon>
+      </NButton>
 
+      <template v-if="authStore.isLoggedIn">
         <!-- 登出按钮 -->
         <NButton size="small" @click="handleLogout">
           登出
@@ -44,10 +51,11 @@
 </template>
 
 <script setup lang="ts">
-import { MailOutline } from '@vicons/ionicons5'
+import { MailOutline, MoonOutline, SunnyOutline } from '@vicons/ionicons5'
 
 const authStore = useAuthStore()
 const msgApi = useMessageApi()
+const { isDark, toggle } = useTheme()
 
 const unreadCount = ref(0)
 

app/composables/useTheme.ts

@@ -0,0 +1,26 @@
+export const useTheme = () => {
+  const isDark = useState('theme:dark', () => false)
+
+  // 初始化：读取 localStorage，fallback 到系统主题
+  if (import.meta.client) {
+    const saved = localStorage.getItem('theme')
+    if (saved === 'dark') {
+      isDark.value = true
+    }
+    else if (saved === 'light') {
+      isDark.value = false
+    }
+    else {
+      isDark.value = window.matchMedia('(prefers-color-scheme: dark)').matches
+    }
+  }
+
+  const toggle = () => {
+    isDark.value = !isDark.value
+    if (import.meta.client) {
+      localStorage.setItem('theme', isDark.value ? 'dark' : 'light')
+    }
+  }
+
+  return { isDark, toggle }
+}