feat: 完成社区首页功能迭代，新增首页聚合与工作台组件

本次提交实现了完整的社区首页功能：
1. 新增首页聚合接口与服务，包含社区统计、热门帖、活跃用户与板块数据
2. 实现帖子推荐排序、SSR缓存与点赞态同步逻辑
3. 重构导航与布局系统，新增工作台侧边栏与移动端适配
4. 优化主题色与UI样式，统一设计系统风格
5. 修复登录注册页自动跳转与组件状态同步问题

frontend/components/Header.tsx

@@ -16,6 +16,8 @@ import {
   Settings,
   Bell,
   Home,
+  User as UserIcon,
+  ChevronDown,
 } from "lucide-react";
 import { apiLogout, apiMe, type User } from "@/lib/api";
 import { hasAuthCookieHint } from "@/lib/cookies";
@@ -140,7 +142,7 @@ export default function Header({
         WebkitBackdropFilter: "blur(14px)",
       }}
     >
-      <div className="max-w-6xl mx-auto px-4 sm:px-6 h-[68px] flex items-center justify-between gap-4">
+      <div className="max-w-[1440px] mx-auto px-4 sm:px-6 h-[68px] flex items-center justify-between gap-4">
         {/* 品牌 */}
         <Link href="/" className="flex items-center gap-2.5 shrink-0 group">
           <span
@@ -166,9 +168,6 @@ export default function Header({
           <NavPill href="/" active={pathname === "/"} icon={<Home size={14} />}>
             首页
           </NavPill>
-          <NavPill href="/board/1" active={pathname.startsWith("/board")}>
-            板块
-          </NavPill>
           <form onSubmit={handleSearch} className="relative ml-2">
             <Search
               size={15}
@@ -199,51 +198,38 @@ export default function Header({
           </form>
         </nav>
 
-        <div className="hidden lg:flex items-center gap-2">
-          <button onClick={toggleTheme} className={iconBtn} style={iconBtnStyle} aria-label="切换主题">
+        {/* 右侧操作区：桌面/移动共用铃铛（仅挂载一次，避免重复轮询），
+            桌面额外显示主题/发帖/用户菜单，移动端收进汉堡抽屉 */}
+        <div className="flex items-center gap-2">
+          <button
+            onClick={toggleTheme}
+            className={`${iconBtn} hidden lg:inline-flex`}
+            style={iconBtnStyle}
+            aria-label="切换主题"
+          >
             {theme === "dark" ? <Sun size={17} /> : <Moon size={17} />}
           </button>
           {user && <NotificationBell initialUnread={unread} />}
           {user ? (
             <>
-              <Link href="/compose" className="btn btn-primary btn-sm ml-1">
+              <Link href="/compose" className="btn btn-primary btn-sm hidden lg:inline-flex">
                 <PenSquare size={14} /> 发帖
               </Link>
-              <Link
-                href={`/u/${user.id}`}
-                className="flex items-center gap-2 rounded-full pl-1 pr-3 py-1 transition-colors"
-                style={{ border: "1px solid var(--line)", background: "var(--panel)" }}
-              >
-                <Avatar name={user.nickname || user.username} size={28} />
-                <span className="text-[13px] font-semibold max-w-[90px] truncate" style={{ color: "var(--ink)" }}>
-                  {user.nickname}
-                </span>
-              </Link>
-              <button onClick={() => router.push("/settings")} className={iconBtn} style={iconBtnStyle} aria-label="设置">
-                <Settings size={16} />
-              </button>
-              <button onClick={handleLogout} className={iconBtn} style={iconBtnStyle} aria-label="退出登录">
-                <LogOut size={16} />
-              </button>
+              <UserMenu user={user} onLogout={handleLogout} />
             </>
           ) : (
-            <>
+            <div className="hidden lg:flex items-center gap-2">
               <Link href="/login" className="btn btn-line btn-sm">
                 <LogIn size={14} /> 登录
               </Link>
               <Link href="/register" className="btn btn-primary btn-sm">
                 <UserPlus size={14} /> 注册
               </Link>
-            </>
+            </div>
           )}
-        </div>
-
-        {/* 移动端按钮 */}
-        <div className="flex items-center gap-2 lg:hidden">
-          {user && <NotificationBell initialUnread={unread} />}
           <button
             onClick={() => setMenuOpen(!menuOpen)}
-            className="w-10 h-10 flex items-center justify-center rounded-full"
+            className="w-10 h-10 flex items-center justify-center rounded-full lg:hidden"
             style={{ border: "1px solid var(--line)", background: "var(--panel)", color: "var(--ink)" }}
             aria-label="菜单"
             aria-expanded={menuOpen}
@@ -274,7 +260,6 @@ export default function Header({
           </form>
           <div className="flex flex-col">
             <MobileLink href="/" active={pathname === "/"}>首页</MobileLink>
-            <MobileLink href="/board/1" active={pathname.startsWith("/board")}>板块</MobileLink>
             {user && <MobileLink href="/compose">发帖</MobileLink>}
             {user && (
               <MobileLink href="/notifications">
@@ -351,3 +336,109 @@ function MobileLink({
     </Link>
   );
 }
+
+/**
+ * 桌面端用户菜单：头像 + 昵称触发器，下拉承载个人主页/设置/登出，
+ * 把零散的图标按钮收拢为一个语义明确的控件
+ */
+function UserMenu({ user, onLogout }: { user: User; onLogout: () => void }) {
+  const [open, setOpen] = useState(false);
+  const menuRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!open) return;
+    const onDown = (e: MouseEvent) => {
+      if (menuRef.current && !menuRef.current.contains(e.target as Node)) setOpen(false);
+    };
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") setOpen(false);
+    };
+    document.addEventListener("mousedown", onDown);
+    document.addEventListener("keydown", onKey);
+    return () => {
+      document.removeEventListener("mousedown", onDown);
+      document.removeEventListener("keydown", onKey);
+    };
+  }, [open]);
+
+  const itemCls =
+    "w-full flex items-center gap-2.5 px-4 py-2.5 text-[13.5px] font-semibold transition-colors hover:bg-[var(--panel-2)]";
+
+  return (
+    <div className="relative hidden lg:block" ref={menuRef}>
+      <button
+        onClick={() => setOpen((v) => !v)}
+        aria-haspopup="menu"
+        aria-expanded={open}
+        className="flex items-center gap-2 rounded-full pl-1 pr-2.5 py-1 transition-colors"
+        style={{
+          border: "1px solid " + (open ? "var(--accent)" : "var(--line)"),
+          background: open ? "var(--accent-soft)" : "var(--panel)",
+        }}
+      >
+        <Avatar name={user.nickname || user.username} size={28} />
+        <span
+          className="text-[13px] font-semibold max-w-[90px] truncate"
+          style={{ color: open ? "var(--accent)" : "var(--ink)" }}
+        >
+          {user.nickname}
+        </span>
+        <ChevronDown
+          size={14}
+          className="transition-transform duration-200"
+          style={{
+            color: "var(--ink-3)",
+            transform: open ? "rotate(180deg)" : "none",
+          }}
+        />
+      </button>
+
+      {open && (
+        <div
+          role="menu"
+          className="absolute right-0 mt-2.5 w-60 overflow-hidden z-50 j13-toast-in"
+          style={{
+            background: "var(--panel)",
+            border: "1px solid var(--line)",
+            borderRadius: "var(--r)",
+            boxShadow: "var(--shadow-lg)",
+          }}
+        >
+          <div
+            className="flex items-center gap-3 px-4 py-3.5"
+            style={{ borderBottom: "1px solid var(--line)" }}
+          >
+            <Avatar name={user.nickname || user.username} size={38} />
+            <div className="min-w-0">
+              <p className="text-[14px] font-bold truncate" style={{ color: "var(--ink)" }}>
+                {user.nickname}
+              </p>
+              <p className="meta text-xs truncate">@ {user.username}</p>
+            </div>
+          </div>
+          <div className="p-1.5">
+            <Link href={`/u/${user.id}`} onClick={() => setOpen(false)} className={itemCls} role="menuitem">
+              <UserIcon size={15} style={{ color: "var(--ink-3)" }} /> 个人主页
+            </Link>
+            <Link href="/settings" onClick={() => setOpen(false)} className={itemCls} role="menuitem">
+              <Settings size={15} style={{ color: "var(--ink-3)" }} /> 账号设置
+            </Link>
+          </div>
+          <div className="p-1.5" style={{ borderTop: "1px solid var(--line)" }}>
+            <button
+              onClick={() => {
+                setOpen(false);
+                onLogout();
+              }}
+              className={itemCls}
+              role="menuitem"
+              style={{ color: "var(--danger)" }}
+            >
+              <LogOut size={15} /> 退出登录
+            </button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}