feat(header): 添加用户登录状态管理功能

在Header组件中新增客户端脚本，用于根据用户登录状态动态显示登录按钮或用户头像。同时，在ScrollHeader组件中添加了用户登录状态和用户数据的存储与更新逻辑，以支持登录状态的持久化和界面更新

Author: ExquisiteCore

blog-web/src/components/Header.astro

@@ -15,6 +15,58 @@ const getTabClass = (isActive: boolean) => {
 };
 ---
 
+<script>
+    // 客户端脚本，用于处理用户登录状态
+    document.addEventListener("DOMContentLoaded", () => {
+        const loginBtn = document.getElementById("login-btn");
+        const userAvatar = document.getElementById("user-avatar");
+        const logoutBtn = document.getElementById("logout-btn");
+
+        // 检查用户是否已登录
+        const token = localStorage.getItem("token");
+        const userData = localStorage.getItem("user")
+            ? JSON.parse(localStorage.getItem("user") || "")
+            : null;
+
+        if (token && userData) {
+            // 用户已登录，显示头像，隐藏登录按钮
+            if (loginBtn) loginBtn.style.display = "none";
+            if (userAvatar) {
+                userAvatar.style.display = "flex";
+
+                // 设置头像图片
+                const avatarImg = userAvatar.querySelector(".avatar img");
+                if (avatarImg && userData.avatar_url) {
+                    avatarImg.setAttribute("src", userData.avatar_url);
+                    avatarImg.setAttribute(
+                        "alt",
+                        userData.username || "用户头像",
+                    );
+                }
+
+                // 设置用户名
+                const usernameEl = document.getElementById("username");
+                if (usernameEl && userData.username) {
+                    usernameEl.textContent = userData.username;
+                }
+            }
+
+            // 添加登出功能
+            if (logoutBtn) {
+                logoutBtn.addEventListener("click", () => {
+                    localStorage.removeItem("token");
+                    localStorage.removeItem("user");
+                    window.location.href = "/";
+                });
+            }
+        } else {
+            // 用户未登录，显示登录按钮，隐藏头像
+            if (loginBtn) loginBtn.style.display = "flex";
+            if (userAvatar) userAvatar.style.display = "none";
+        }
+    });
+</script>
+
 <ScrollHeader client:load>
     <div class="navbar container mx-auto px-4 h-16">
         <div class="navbar-start">
@@ -91,9 +143,44 @@ const getTabClass = (isActive: boolean) => {
         </div>
         <div class="navbar-end">
             <ThemeToggle client:load />
-            <button class="btn btn-primary ml-2">
+
+            <!-- 登录按钮 (默认显示) -->
+            <button id="login-btn" class="btn btn-primary ml-2">
                 <a href="/auth">登录</a>
             </button>
+
+            <!-- 用户头像和下拉菜单 (默认隐藏) -->
+            <div
+                id="user-avatar"
+                class="dropdown dropdown-end ml-2"
+                style="display: none;"
+            >
+                <div
+                    tabindex="0"
+                    role="button"
+                    class="btn btn-ghost btn-circle avatar"
+                >
+                    <div class="w-10 rounded-full">
+                        <img
+                            alt="用户头像"
+                            src="https://daisyui.com/images/stock/photo-1534528741775-53994a69daeb.jpg"
+                        />
+                    </div>
+                </div>
+                <ul
+                    tabindex="0"
+                    class="mt-3 z-[1] p-2 shadow menu menu-sm dropdown-content bg-base-100 rounded-box w-52"
+                >
+                    <li>
+                        <a class="justify-between">
+                            <span id="username">用户名</span>
+                            <span class="badge">个人资料</span>
+                        </a>
+                    </li>
+                    <li><a href="/dashboard">控制面板</a></li>
+                    <li><a id="logout-btn">退出登录</a></li>
+                </ul>
+            </div>
         </div>
     </div>
 </ScrollHeader>

blog-web/src/components/solid/ScrollHeader.tsx

@@ -1,15 +1,29 @@
 import { createSignal, createEffect, onCleanup, onMount, createMemo } from "solid-js";
+import type { JSX } from "solid-js";
 
-export default function ScrollHeader(props) {
+interface ScrollHeaderProps {
+  children: JSX.Element;
+}
+
+export default function ScrollHeader(props: ScrollHeaderProps) {
   const [isVisible, setIsVisible] = createSignal(true);
   const [lastScrollY, setLastScrollY] = createSignal(0);
   const [isAtTop, setIsAtTop] = createSignal(true);
   const [theme, setTheme] = createSignal('light');
-  
+  const [isLoggedIn, setIsLoggedIn] = createSignal(false);
+
+  interface UserData {
+    username?: string;
+    avatar_url?: string;
+    [key: string]: any;
+  }
+
+  const [userData, setUserData] = createSignal<UserData | null>(null);
+
   // Handle scroll events with debounce
   const handleScroll = () => {
     const currentScrollY = window.scrollY;
-    
+
     // Check if at top of page
     if (currentScrollY < 10) {
       setIsAtTop(true);
@@ -19,10 +33,10 @@ export default function ScrollHeader(props) {
       if (isAtTop()) {
         setIsAtTop(false);
       }
-      
+
       // Check scroll direction
       const isScrollingUp = currentScrollY < lastScrollY();
-      
+
       if (isScrollingUp) {
         // Scrolling up - show header
         setIsVisible(true);
@@ -33,14 +47,14 @@ export default function ScrollHeader(props) {
         }
       }
     }
-    
+
     // Update last scroll position
     setLastScrollY(currentScrollY);
   };
-  
+
   // Throttle scroll events using requestAnimationFrame
   let isThrottled = false;
-  
+
   const onScroll = () => {
     if (!isThrottled) {
       requestAnimationFrame(() => {
@@ -50,9 +64,9 @@ export default function ScrollHeader(props) {
       isThrottled = true;
     }
   };
-  
+
   // Listen for theme changes in localStorage
-  const handleStorageChange = (e) => {
+  const handleStorageChange = (e: StorageEvent) => {
     if (typeof localStorage !== 'undefined' && e.key === 'theme') {
       setTheme(e.newValue || 'light');
     }
@@ -63,41 +77,52 @@ export default function ScrollHeader(props) {
     setLastScrollY(window.scrollY);
     // Initialize header state
     handleScroll();
-    
+
     // Set initial theme from localStorage (only available in browser)
     if (typeof localStorage !== 'undefined') {
       setTheme(localStorage.getItem('theme') || 'light');
+
+      // 检查用户登录状态
+      const token = localStorage.getItem('token');
+      const user = localStorage.getItem('user');
+
+      if (token && user) {
+        setIsLoggedIn(true);
+        try {
+          setUserData(JSON.parse(user));
+        } catch (e) {
+          console.error('解析用户数据失败', e);
+        }
+      }
     }
-    
+
     // Listen for theme changes from other components
     window.addEventListener('storage', handleStorageChange);
   });
-  
+
   createEffect(() => {
     // Add scroll event listener
     window.addEventListener("scroll", onScroll, { passive: true });
-    
+
     onCleanup(() => {
       // Remove scroll event listener
       window.removeEventListener("scroll", onScroll);
       window.removeEventListener('storage', handleStorageChange);
     });
   });
-  
+
   // Theme-based background color class
   const bgColorClass = createMemo(() => {
-    return theme() === 'dark' 
-      ? 'bg-base-100/80 backdrop-blur-sm shadow-md' 
+    return theme() === 'dark'
+      ? 'bg-base-100/80 backdrop-blur-sm shadow-md'
       : 'bg-base-100/95 backdrop-blur-sm shadow-md';
   });
-  
+
   return (
     <header
-      class={`fixed top-0 w-full z-50 transition-all duration-300 transform ${
-        isVisible() ? "translate-y-0" : "-translate-y-full"
-      } ${
-        !isAtTop() ? bgColorClass() : "bg-base-100"
-      }`}
+      class={`fixed top-0 w-full z-50 transition-all duration-300 transform ${isVisible() ? "translate-y-0" : "-translate-y-full"
+        } ${!isAtTop() ? bgColorClass() : "bg-base-100"
+        }`}
     >
       {props.children}
     </header>