From 00d3c563e2e62eb4833873e851afceb3aab4dbec Mon Sep 17 00:00:00 2001
From: CH-122 <1521930938@qq.com>
Date: Fri, 15 Aug 2025 15:36:25 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E7=A7=BB=E5=8A=A8=E7=AB=AF=20header=20?=
 =?UTF-8?q?=E4=B8=AD=E6=B7=BB=E5=8A=A0=E4=B8=BB=E9=A2=98=E5=88=87=E6=8D=A2?=
 =?UTF-8?q?=E5=9B=BE=E6=A0=87,=20=E8=8F=9C=E5=8D=95=E4=B8=AD=E9=9A=90?=
 =?UTF-8?q?=E8=97=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend_nuxt/components/HeaderComponent.vue | 20 +++++++++++++++++++-
 frontend_nuxt/components/MenuComponent.vue   |  5 ++++-
 2 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/frontend_nuxt/components/HeaderComponent.vue b/frontend_nuxt/components/HeaderComponent.vue
index 46a858c0a..f28810f0f 100644
--- a/frontend_nuxt/components/HeaderComponent.vue
+++ b/frontend_nuxt/components/HeaderComponent.vue
@@ -25,6 +25,10 @@
             <i class="fas fa-search"></i>
           </div>
 
+          <div v-if="isMobile" class="theme-icon" @click="cycleTheme">
+            <i :class="iconClass"></i>
+          </div>
+
           <ToolTip v-if="!isMobile" content="发帖" placement="bottom">
             <div class="new-post-icon" @click="goToNewPost">
               <i class="fas fa-edit"></i>
@@ -64,6 +68,8 @@ import SearchDropdown from '~/components/SearchDropdown.vue'
 import { authState, clearToken, loadCurrentUser } from '~/utils/auth'
 import { fetchUnreadCount, notificationState } from '~/utils/notification'
 import { useIsMobile } from '~/utils/screen'
+import { themeState, cycleTheme, ThemeMode } from '~/utils/theme'
+
 const props = defineProps({
   showMenuBtn: {
     type: Boolean,
@@ -136,6 +142,18 @@ const headerMenuItems = computed(() => [
   { text: '退出', onClick: goToLogout },
 ])
 
+ /** 其余逻辑保持不变 */
+ const iconClass = computed(() => {
+   switch (themeState.mode) {
+     case ThemeMode.DARK:
+       return 'fas fa-moon'
+     case ThemeMode.LIGHT:
+       return 'fas fa-sun'
+     default:
+       return 'fas fa-desktop'
+   }
+ })
+
 onMounted(async () => {
   const updateAvatar = async () => {
     if (authState.loggedIn) {
@@ -287,7 +305,7 @@ onMounted(async () => {
   background-color: var(--menu-selected-background-color);
 }
 
-.search-icon {
+.search-icon, .theme-icon {
   font-size: 18px;
   cursor: pointer;
 }
diff --git a/frontend_nuxt/components/MenuComponent.vue b/frontend_nuxt/components/MenuComponent.vue
index c82ed43a2..883b3ee06 100644
--- a/frontend_nuxt/components/MenuComponent.vue
+++ b/frontend_nuxt/components/MenuComponent.vue
@@ -117,7 +117,7 @@
       </div>
       
       <!-- 解决动态样式的水合错误 -->
-      <ClientOnly>
+      <ClientOnly v-if='!isMobile'>
         <div class="menu-footer">
           <div class="menu-footer-btn" @click="cycleTheme">
             <i :class="iconClass"></i>
@@ -133,6 +133,9 @@ import { ref, computed, watch, onMounted } from 'vue'
 import { themeState, cycleTheme, ThemeMode } from '~/utils/theme'
 import { authState } from '~/utils/auth'
 import { fetchUnreadCount, notificationState } from '~/utils/notification'
+import { useIsMobile } from '~/utils/screen'
+
+const isMobile = useIsMobile()
 
 const config = useRuntimeConfig()
 const API_BASE_URL = config.public.apiBaseUrl