's'

app/components/Header.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useState, useEffect } from "react";
+import AuthModal from "./AuthModal";
 
 const navLinks = [
   { label: "学习路径", href: "#roadmap" },
@@ -9,16 +10,34 @@ const navLinks = [
   { label: "社区", href: "#community" },
 ];
 
+function getStoredUser(): string | null {
+  if (typeof window === "undefined") return null;
+  try {
+    const raw = localStorage.getItem("pb_user");
+    if (!raw) return null;
+    const user = JSON.parse(raw);
+    return user?.email ?? null;
+  } catch {
+    return null;
+  }
+}
+
 export default function Header() {
   const [mobileOpen, setMobileOpen] = useState(false);
   const [scrolled, setScrolled] = useState(false);
+  const [authOpen, setAuthOpen] = useState(false);
+  const [userEmail, setUserEmail] = useState<string | null>(null);
 
   useEffect(() => {
-    const onScroll = () => setScrolled(window.scrollY > 20);
-    window.addEventListener("scroll", onScroll);
-    return () => window.removeEventListener("scroll", onScroll);
+    setUserEmail(getStoredUser());
   }, []);
 
+  const handleLogout = () => {
+    localStorage.removeItem("pb_token");
+    localStorage.removeItem("pb_user");
+    setUserEmail(null);
+  };
+
   return (
     <header
       className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${
@@ -48,6 +67,26 @@ export default function Header() {
           </nav>
 
           <div className="flex items-center gap-3">
+            {userEmail ? (
+              <div className="flex items-center gap-2">
+                <span className="hidden max-w-[120px] truncate text-sm text-slate-600 sm:inline">
+                  {userEmail}
+                </span>
+                <button
+                  onClick={handleLogout}
+                  className="rounded-full border border-slate-200 px-4 py-2 text-sm font-medium text-slate-600 transition-colors hover:bg-slate-50"
+                >
+                  退出
+                </button>
+              </div>
+            ) : (
+              <button
+                onClick={() => setAuthOpen(true)}
+                className="hidden rounded-full border border-slate-200 px-4 py-2 text-sm font-medium text-slate-600 transition-colors hover:bg-slate-50 sm:inline-flex"
+              >
+                登录 / 注册
+              </button>
+            )}
             <a
               href="#roadmap"
               className="hidden rounded-full bg-sky-500 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-sky-600 sm:inline-flex"
@@ -87,6 +126,30 @@ export default function Header() {
                 {link.label}
               </a>
             ))}
+            {userEmail ? (
+              <div className="mt-2 flex items-center justify-between rounded-lg border border-slate-100 bg-slate-50 px-4 py-2.5">
+                <span className="truncate text-sm text-slate-600">{userEmail}</span>
+                <button
+                  onClick={() => {
+                    handleLogout();
+                    setMobileOpen(false);
+                  }}
+                  className="text-sm font-medium text-sky-500"
+                >
+                  退出
+                </button>
+              </div>
+            ) : (
+              <button
+                onClick={() => {
+                  setMobileOpen(false);
+                  setAuthOpen(true);
+                }}
+                className="mt-2 block w-full rounded-full border border-slate-200 px-4 py-2.5 text-center text-base font-medium text-slate-600"
+              >
+                登录 / 注册
+              </button>
+            )}
             <a
               href="#roadmap"
               onClick={() => setMobileOpen(false)}
@@ -97,6 +160,12 @@ export default function Header() {
           </nav>
         </div>
       )}
+
+      <AuthModal
+        isOpen={authOpen}
+        onClose={() => setAuthOpen(false)}
+        onSuccess={(email) => setUserEmail(email)}
+      />
     </header>
   );
 }