feat: 移动端 header 中添加主题切换图标, 菜单中隐藏

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;
 }

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