feat: 大量优化和bug修复

app/components/layout/AppHeader.vue

@@ -10,6 +10,7 @@ import {
   Sun
 } from "lucide-vue-next";
 
+import SettingsDialog from "@/components/layout/SettingsDialog.vue";
 import { Button } from "@/components/ui/button";
 import { useAuthStore } from "@/stores/auth";
 import { useGlobalStore } from "@/stores/global";
@@ -96,28 +97,39 @@ const handleSignOut = async () => {
           <Moon v-else class="size-4" />
         </Button>
 
-        <!-- 已登录：显示邮箱和退出按钮；未登录：显示登录链接 -->
-        <template v-if="authStore.isOnline">
-          <span class="max-sm:hidden text-xs text-muted-foreground">
-            {{ authStore.user!.email }}
-          </span>
-          <Button
-            variant="ghost"
-            size="icon"
-            aria-label="退出登录"
-            @click="handleSignOut"
-          >
-            <LogOut class="size-4" />
-          </Button>
-        </template>
-        <template v-else>
-          <Button as-child variant="ghost" size="sm">
-            <NuxtLink to="/login" class="gap-2">
-              <LogIn class="size-4" />
-              <span>登录</span>
-            </NuxtLink>
-          </Button>
-        </template>
+        <!--
+          已登录/未登录状态由客户端 auth 插件决定（.client.ts），
+          SSR 阶段 isOnline 始终为 false；
+          整个认证区块必须放在 ClientOnly 内避免水合不匹配。
+        -->
+        <ClientOnly>
+          <template v-if="authStore.isOnline">
+            <span class="max-sm:hidden text-xs text-muted-foreground">
+              {{ authStore.user!.email }}
+            </span>
+            <SettingsDialog />
+            <Button
+              variant="ghost"
+              size="icon"
+              aria-label="退出登录"
+              @click="handleSignOut"
+            >
+              <LogOut class="size-4" />
+            </Button>
+          </template>
+          <template v-else>
+            <Button as-child variant="ghost" size="sm">
+              <NuxtLink to="/login" class="gap-2">
+                <LogIn class="size-4" />
+                <span>登录</span>
+              </NuxtLink>
+            </Button>
+          </template>
+          <!-- SSR 阶段占位，避免布局闪烁 -->
+          <template #fallback>
+            <div class="size-8 rounded-md" />
+          </template>
+        </ClientOnly>
       </nav>
     </div>
   </header>