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

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

frontend/components/Footer.tsx

@@ -1,34 +1,20 @@
-import Link from "next/link";
+import pkg from "../package.json";
+import FooterTiming from "./FooterTiming";
 
+// 仅把明确发布过的版本视为"真实版本"；脚手架默认号视为未设计，传空显示占位
+function realVersion(v: string): string {
+  return !v || v === "0.0.0" || v === "0.1.0" ? "" : v;
+}
+
+// 极简页脚：版权 + 实时性能指标（版本 / 页面加载 / 模板生成）
 export default function Footer() {
+  const year = new Date().getFullYear();
+
   return (
     <footer className="mt-14" style={{ borderTop: "1px solid var(--line)" }}>
-      <div className="max-w-6xl mx-auto px-4 sm:px-6 py-8 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
-        <div className="flex items-center gap-2.5">
-          <span
-            className="w-7 h-7 rounded-lg flex items-center justify-center"
-            style={{ background: "var(--accent)", color: "var(--accent-on)" }}
-          >
-            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
-              <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z" />
-            </svg>
-          </span>
-          <span className="text-[13.5px] font-bold" style={{ color: "var(--ink)" }}>
-            姜十三社区
-          </span>
-        </div>
-        <nav className="flex items-center gap-5 text-[13px]" style={{ color: "var(--ink-2)" }}>
-          <Link href="/" className="hover:text-[var(--accent)] transition-colors">
-            首页
-          </Link>
-          <Link href="/board/1" className="hover:text-[var(--accent)] transition-colors">
-            板块
-          </Link>
-          <span className="meta">Go × Next.js</span>
-        </nav>
-        <span className="meta text-[12.5px]">
-          © 2026 姜十三
-        </span>
+      <div className="max-w-[1440px] mx-auto px-4 sm:px-6 py-4 flex items-center justify-between gap-4">
+        <span className="meta text-[12px] whitespace-nowrap">© {year} 姜十三社区</span>
+        <FooterTiming version={realVersion(pkg.version)} />
       </div>
     </footer>
   );

frontend/components/FooterTiming.tsx

@@ -0,0 +1,121 @@
+"use client";
+
+import { Suspense, useEffect, useRef, useState } from "react";
+import { usePathname, useSearchParams } from "next/navigation";
+
+// 版本由 Footer（RSC）从 package.json 注入；未正式设计版本号时传入空串，显示占位
+const PLACEHOLDER = "—";
+
+interface Metrics {
+  page: number; // 页面：整页加载/客户端导航总耗时
+  tpl: number; // 模板：服务端响应（SSR / RSC）耗时
+}
+
+// 硬加载：页面=loadEventEnd，模板≈TTFB（localhost 下基本等于服务端生成时间）
+function readHardNav(): Metrics {
+  const n = performance.getEntriesByType("navigation")[0] as
+    | PerformanceNavigationTiming
+    | undefined;
+  if (!n) return { page: 0, tpl: 0 };
+  return {
+    page: Math.round((n.loadEventEnd || n.domComplete || n.responseEnd) - n.startTime),
+    tpl: Math.max(0, Math.round(n.responseStart - n.requestStart)),
+  };
+}
+
+function TimingInner({ version }: { version: string }) {
+  const pathname = usePathname();
+  const search = useSearchParams().toString();
+  // 初始必须为 null：performance 仅客户端可读，直接参与首帧渲染会导致水合不一致
+  const [metrics, setMetrics] = useState<Metrics | null>(null);
+  // 记录一次站内链接点击，作为客户端导航计时起点
+  const pending = useRef<{ start: number; path: string; search: string } | null>(null);
+
+  // 挂载后读取硬加载指标；load 事件后 loadEventEnd 才有完整值，再补一次
+  useEffect(() => {
+    setMetrics(readHardNav());
+    const apply = () => setMetrics(readHardNav());
+    if (document.readyState !== "complete") {
+      window.addEventListener("load", apply, { once: true });
+      return () => window.removeEventListener("load", apply);
+    }
+  }, []);
+
+  // 捕获阶段监听站内点击（不干预任何默认行为）
+  useEffect(() => {
+    const onClick = (e: MouseEvent) => {
+      if (e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey || e.defaultPrevented) return;
+      const a = (e.target as HTMLElement).closest("a");
+      if (!a || !a.href || a.target === "_blank" || a.hasAttribute("download")) return;
+      let u: URL;
+      try {
+        u = new URL(a.href);
+      } catch {
+        return;
+      }
+      if (u.origin !== location.origin) return;
+      pending.current = { start: performance.now(), path: u.pathname, search: u.search };
+    };
+    document.addEventListener("click", onClick, true);
+    return () => document.removeEventListener("click", onClick, true);
+  }, []);
+
+  // 路由切换后两帧（绘制完成）结算；模板耗时取本次 RSC fetch 的资源条目
+  useEffect(() => {
+    const p = pending.current;
+    if (!p) return;
+    if (p.path !== pathname || p.search !== (search ? `?${search}` : "")) return;
+    let raf2 = 0;
+    const raf1 = requestAnimationFrame(() => {
+      raf2 = requestAnimationFrame(() => {
+        const page = Math.round(performance.now() - p.start);
+        let tpl = 0;
+        const resources = performance.getEntriesByType("resource") as PerformanceResourceTiming[];
+        for (let i = resources.length - 1; i >= 0; i--) {
+          const r = resources[i];
+          if (
+            r.initiatorType === "fetch" &&
+            r.startTime >= p.start - 10 &&
+            r.name.startsWith(location.origin + p.path)
+          ) {
+            tpl = Math.round(r.responseEnd - r.startTime);
+            break;
+          }
+        }
+        setMetrics((prev) => ({ page: Math.max(1, page), tpl: tpl || prev?.tpl || 0 }));
+        pending.current = null;
+      });
+    });
+    return () => {
+      cancelAnimationFrame(raf1);
+      cancelAnimationFrame(raf2);
+    };
+  }, [pathname, search]);
+
+  return (
+    <span
+      className="inline-flex items-center gap-2 text-[12px] tabular-nums whitespace-nowrap"
+      style={{ color: "var(--ink-3)" }}
+    >
+      <span>版本:{version || PLACEHOLDER}</span>
+      <span aria-hidden="true">·</span>
+      <span suppressHydrationWarning>页面:{metrics ? `${metrics.page}ms` : PLACEHOLDER}</span>
+      <span aria-hidden="true">·</span>
+      <span suppressHydrationWarning>模板:{metrics ? `${metrics.tpl}ms` : PLACEHOLDER}</span>
+    </span>
+  );
+}
+
+export default function FooterTiming({ version = "" }: { version?: string }) {
+  return (
+    <Suspense
+      fallback={
+        <span className="text-[12px] meta whitespace-nowrap">
+          版本:{version || PLACEHOLDER}
+        </span>
+      }
+    >
+      <TimingInner version={version} />
+    </Suspense>
+  );
+}

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

frontend/components/LikeButton.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { useRouter, usePathname } from "next/navigation";
 import { IconHeart } from "./Icons";
 import { apiToggleLike } from "@/lib/api";
@@ -25,6 +25,13 @@ export default function LikeButton({
   const [count, setCount] = useState(initialCount);
   const [loading, setLoading] = useState(false);
 
+  // router.refresh()（登录/登出后）服务端会重新下发 liked 态，同步到本地，
+  // 避免客户端状态停留在刷新前的用户视角
+  useEffect(() => {
+    setLiked(initialLiked);
+    setCount(initialCount);
+  }, [initialLiked, initialCount]);
+
   const handleClick = async () => {
     if (loading) return;
     setLoading(true);

frontend/components/PinnedPosts.tsx

@@ -44,8 +44,11 @@ export default function PinnedPosts({
           <Link
             key={p.id}
             href={`/post/${p.id}`}
-            className="group flex items-center gap-3 sm:gap-3.5 px-4 sm:px-5 py-3.5 transition-colors hover:bg-[var(--panel-2)]"
-            style={i > 0 ? { borderTop: "1px solid var(--line)" } : undefined}
+            className="group relative flex items-center gap-3 sm:gap-3.5 px-4 sm:px-5 py-3.5 transition-colors hover:bg-[var(--panel-2)] j13-fade-up"
+            style={{
+              ...(i > 0 ? { borderTop: "1px solid var(--line)" } : {}),
+              animationDelay: `${i * 35}ms`,
+            }}
           >
             <Avatar name={p.user.nickname || p.user.username} size={36} />
             <div className="flex-1 min-w-0">

frontend/components/PostRow.tsx

@@ -18,18 +18,35 @@ function formatTime(dateStr: string) {
 export default function PostRow({
   post,
   boardHref,
+  index = 0,
+  compact = false,
+  showViews = true,
+  showLike = true,
 }: {
   post: PostListItem;
   index?: number;
   boardHref?: boolean;
+  compact?: boolean;
+  showViews?: boolean;
+  showLike?: boolean;
 }) {
   return (
     <div
-      className="group flex items-center gap-3 sm:gap-4 px-4 sm:px-5 py-4 border-t transition-colors hover:bg-[var(--panel-2)]"
-      style={{ borderColor: "var(--line)" }}
+      className="group relative flex items-center gap-3 sm:gap-4 px-4 sm:px-5 border-t transition-colors hover:bg-[var(--panel-2)] j13-fade-up"
+      style={{
+        borderColor: "var(--line)",
+        paddingTop: compact ? 13 : 16,
+        paddingBottom: compact ? 13 : 16,
+        animationDelay: `${Math.min(index, 9) * 35}ms`,
+      }}
     >
-      <Link href={`/u/${post.user.id}`} className="shrink-0" aria-label={post.user.nickname}>
-        <Avatar name={post.user.nickname || post.user.username} size={42} />
+      <Link
+        href={`/u/${post.user.id}`}
+        className="shrink-0 above-link"
+        aria-label={post.user.nickname}
+        tabIndex={-1}
+      >
+        <Avatar name={post.user.nickname || post.user.username} size={compact ? 38 : 42} />
       </Link>
 
       <div className="flex-1 min-w-0">
@@ -39,7 +56,7 @@ export default function PostRow({
             {post.recommended && <span className="badge-rec">推荐</span>}
           </div>
         )}
-        <Link href={`/post/${post.id}`}>
+        <Link href={`/post/${post.id}`} className="stretch-link" aria-label={post.title}>
           <h3
             className="font-semibold text-[15px] sm:text-[16px] leading-snug truncate transition-colors group-hover:text-[var(--accent)]"
             style={{ color: "var(--ink)" }}
@@ -47,7 +64,7 @@ export default function PostRow({
             {post.title}
           </h3>
         </Link>
-        <div className="meta flex items-center gap-2.5 mt-1.5 flex-wrap">
+        <div className="meta relative z-[2] flex items-center gap-2.5 mt-1.5 flex-wrap">
           <Link
             href={`/u/${post.user.id}`}
             className="hover:text-[var(--accent)] transition-colors"
@@ -70,21 +87,28 @@ export default function PostRow({
         </div>
       </div>
 
-      <div className="flex items-center gap-2.5 sm:gap-3.5 shrink-0">
-        <span className="hidden sm:inline-flex items-center gap-1.5 meta" aria-label={`${post.comment_count} 条评论`}>
+      <div className="above-link flex items-center gap-2.5 sm:gap-3.5 shrink-0">
+        <span
+          className={`${showViews ? "hidden sm:inline-flex" : "inline-flex"} items-center gap-1.5 meta`}
+          aria-label={`${post.comment_count} 条评论`}
+        >
           <IconComment size={15} />
           {post.comment_count}
         </span>
-        <span className="hidden md:inline-flex items-center gap-1.5 meta" aria-label={`${post.view_count} 次浏览`}>
-          <IconEye size={15} />
-          {post.view_count}
-        </span>
-        <LikeButton
-          postId={String(post.id)}
-          liked={post.liked}
-          likeCount={post.like_count}
-          variant="compact"
-        />
+        {showViews && (
+          <span className="hidden md:inline-flex items-center gap-1.5 meta" aria-label={`${post.view_count} 次浏览`}>
+            <IconEye size={15} />
+            {post.view_count}
+          </span>
+        )}
+        {showLike && (
+          <LikeButton
+            postId={String(post.id)}
+            liked={post.liked}
+            likeCount={post.like_count}
+            variant="compact"
+          />
+        )}
       </div>
     </div>
   );

frontend/components/home/CommunityPanels.tsx

@@ -0,0 +1,142 @@
+import Link from "next/link";
+import { BarChart3, Flame, Users, MessagesSquare, MessageCircle, Heart, Sparkles } from "lucide-react";
+import type { OverviewStats, PostListItem, ActiveUser } from "@/lib/api";
+import Avatar from "@/components/Avatar";
+
+/* ---------- 统计 2×2 ---------- */
+
+function StatsGrid({ stats }: { stats: OverviewStats }) {
+  const items = [
+    { icon: MessagesSquare, label: "讨论", value: stats.posts },
+    { icon: Users, label: "成员", value: stats.users },
+    { icon: MessageCircle, label: "评论", value: stats.comments },
+    { icon: Sparkles, label: "今日", value: stats.today_posts },
+  ];
+  return (
+    <section className="j13-module" aria-label="社区数据">
+      <p className="j13-module-title mb-3">
+        <BarChart3 size={15} style={{ color: "var(--accent)" }} /> 社区数据
+      </p>
+      <div className="grid grid-cols-2 gap-2">
+        {items.map(({ icon: Icon, label, value }) => (
+          <div key={label} className="j13-stat">
+            <span className="j13-stat-num">{value}</span>
+            <span className="j13-stat-lab">
+              <Icon size={12} /> {label}
+            </span>
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}
+
+/* ---------- 热门榜 ---------- */
+
+function HotRanking({ posts }: { posts: PostListItem[] }) {
+  return (
+    <section className="j13-module" aria-label="热门讨论">
+      <p className="j13-module-title mb-1.5">
+        <Flame size={15} style={{ color: "var(--clay)" }} /> 热门讨论
+      </p>
+      {posts.length === 0 ? (
+        <p className="meta px-1.5 py-3">还没有热门讨论</p>
+      ) : (
+        <ol className="j13-ranklist">
+          {posts.map((p, i) => (
+            <li key={p.id}>
+              <Link href={`/post/${p.id}`} className="j13-rank" title={p.title}>
+                <span className="j13-rank-no">{i + 1}</span>
+                <span className="min-w-0 flex-1">
+                  <span
+                    className="block text-[13.5px] font-semibold leading-snug line-clamp-2"
+                    style={{ color: "var(--ink)" }}
+                  >
+                    {p.title}
+                  </span>
+                  <span className="mt-1 flex items-center gap-2.5 meta text-[11.5px]">
+                    <span className="inline-flex items-center gap-1">
+                      <MessageCircle size={11.5} /> {p.comment_count}
+                    </span>
+                    <span className="inline-flex items-center gap-1">
+                      <Heart size={11.5} /> {p.like_count}
+                    </span>
+                    <span className="truncate">{p.board.name}</span>
+                  </span>
+                </span>
+              </Link>
+            </li>
+          ))}
+        </ol>
+      )}
+    </section>
+  );
+}
+
+/* ---------- 活跃用户 ---------- */
+
+function ActiveUsers({ users }: { users: ActiveUser[] }) {
+  return (
+    <section className="j13-module" aria-labelledby="active-users-title">
+      <p className="j13-module-title mb-3" id="active-users-title">
+        <Users size={15} style={{ color: "var(--accent)" }} /> 活跃成员
+      </p>
+      {users.length === 0 ? (
+        <p className="meta px-1.5 py-2">近 14 天还没有人互动</p>
+      ) : (
+        <ul className="space-y-1">
+          {users.map((u) => (
+            <li key={u.id}>
+              <Link href={`/u/${u.id}`} className="j13-raillink">
+                <Avatar name={u.nickname || u.username} src={u.avatar} size={28} />
+                <span className="flex-1 truncate text-[13.5px]">{u.nickname || u.username}</span>
+                <span className="meta text-[11.5px]">{u.activity_count} 次</span>
+              </Link>
+            </li>
+          ))}
+        </ul>
+      )}
+      <p className="meta mt-3 px-1 text-[11px]">按近 14 天发帖与评论计数</p>
+    </section>
+  );
+}
+
+/* ---------- 桌面 / 移动两种装配 ---------- */
+
+export function CommunityPanels({
+  stats,
+  hot,
+  activeUsers,
+}: {
+  stats: OverviewStats;
+  hot: PostListItem[];
+  activeUsers: ActiveUser[];
+}) {
+  return (
+    <aside className="hidden lg:block w-[280px] xl:w-[300px] shrink-0" aria-label="社区面板">
+      <div className="sticky top-24 space-y-4">
+        <StatsGrid stats={stats} />
+        <HotRanking posts={hot} />
+        <ActiveUsers users={activeUsers} />
+      </div>
+    </aside>
+  );
+}
+
+export function CommunityPanelsMobile({
+  stats,
+  hot,
+  activeUsers,
+}: {
+  stats: OverviewStats;
+  hot: PostListItem[];
+  activeUsers: ActiveUser[];
+}) {
+  return (
+    <div className="lg:hidden space-y-4" aria-label="社区面板">
+      <StatsGrid stats={stats} />
+      <HotRanking posts={hot} />
+      <ActiveUsers users={activeUsers} />
+    </div>
+  );
+}

frontend/components/home/FeedTabs.tsx

@@ -0,0 +1,57 @@
+"use client";
+
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { useRef } from "react";
+
+export type FeedSort = "latest" | "hot" | "recommended";
+
+const TAB_KEYS: FeedSort[] = ["latest", "hot", "recommended"];
+const TAB_LABELS: Record<FeedSort, string> = {
+  latest: "最新",
+  hot: "热门",
+  recommended: "精华",
+};
+
+// 在指定板块内切换排序时保留 ?board=
+function tabHref(key: FeedSort, boardId: number) {
+  const params = new URLSearchParams();
+  if (boardId > 0) params.set("board", String(boardId));
+  if (key !== "latest") params.set("sort", key);
+  const qs = params.toString();
+  return qs ? `/?${qs}` : "/";
+}
+
+// 中栏排序分段控件：URL query 驱动、SSR 直出，键盘 ←/→ 可切换
+export default function FeedTabs({ current, boardId = 0 }: { current: FeedSort; boardId?: number }) {
+  const router = useRouter();
+  const tabRefs = useRef<(HTMLAnchorElement | null)[]>([]);
+
+  const handleKeyDown = (e: React.KeyboardEvent, i: number) => {
+    if (e.key !== "ArrowRight" && e.key !== "ArrowLeft") return;
+    e.preventDefault();
+    const next = (i + (e.key === "ArrowRight" ? 1 : TAB_KEYS.length - 1)) % TAB_KEYS.length;
+    tabRefs.current[next]?.focus();
+    router.push(tabHref(TAB_KEYS[next], boardId));
+  };
+
+  return (
+    <div className="j13-seg" role="tablist" aria-label="帖子排序">
+      {TAB_KEYS.map((key, i) => (
+        <Link
+          key={key}
+          ref={(el) => {
+            tabRefs.current[i] = el;
+          }}
+          href={tabHref(key, boardId)}
+          role="tab"
+          aria-selected={current === key}
+          tabIndex={current === key ? 0 : -1}
+          onKeyDown={(e) => handleKeyDown(e, i)}
+        >
+          {TAB_LABELS[key]}
+        </Link>
+      ))}
+    </div>
+  );
+}

frontend/components/home/WorkspaceNav.tsx

@@ -0,0 +1,122 @@
+"use client";
+
+import Link from "next/link";
+import { useSearchParams } from "next/navigation";
+import { PenSquare, Home, Bell, Settings, LogIn, UserPlus } from "lucide-react";
+import type { BoardWithCount, User } from "@/lib/api";
+
+// 首页壳内板块切换：仅替换中栏帖子流，不离开工作台
+function boardHref(id: number) {
+  return `/?board=${id}`;
+}
+
+// 桌面左栏：发帖 CTA + 板块导航 + 登录态快捷入口
+export function WorkspaceNav({ boards, user }: { boards: BoardWithCount[]; user: User | null }) {
+  const params = useSearchParams();
+  const activeBoard = Number(params.get("board")) || 0;
+  const composeHref = user ? "/compose" : "/login?redirect=/compose";
+
+  return (
+    <nav className="hidden lg:block w-56 xl:w-60 shrink-0" aria-label="工作台导航">
+      <div className="sticky top-24 space-y-5">
+        <Link href={composeHref} className="btn btn-primary w-full justify-center">
+          <PenSquare size={16} /> 发起讨论
+        </Link>
+
+        <div>
+          <p className="px-2.5 mb-1.5 text-[11.5px] font-bold tracking-[0.08em] uppercase" style={{ color: "var(--ink-3)" }}>
+            板块
+          </p>
+          <div className="space-y-0.5">
+            <Link
+              href="/"
+              className="j13-raillink"
+              aria-current={activeBoard === 0 ? "page" : undefined}
+            >
+              <Home size={16} className="shrink-0" />
+              <span className="flex-1 truncate">全部讨论</span>
+            </Link>
+            {boards.map((b, i) => (
+              <Link
+                key={b.id}
+                href={boardHref(b.id)}
+                className="j13-raillink"
+                aria-current={activeBoard === b.id ? "page" : undefined}
+              >
+                <span
+                  className={`av-${i % 8} w-7 h-7 rounded-lg flex items-center justify-center text-[12px] font-bold shrink-0`}
+                >
+                  {b.name.slice(0, 1)}
+                </span>
+                <span className="flex-1 truncate">{b.name}</span>
+                <span className="meta text-[11.5px]">{b.post_count}</span>
+              </Link>
+            ))}
+          </div>
+        </div>
+
+        <div style={{ borderTop: "1px solid var(--line)" }} className="pt-3 space-y-0.5">
+          {user ? (
+            <>
+              <Link href="/notifications" className="j13-raillink">
+                <Bell size={16} className="shrink-0" /> 通知中心
+              </Link>
+              <Link href="/settings" className="j13-raillink">
+                <Settings size={16} className="shrink-0" /> 账号设置
+              </Link>
+            </>
+          ) : (
+            <>
+              <Link href="/login" className="j13-raillink">
+                <LogIn size={16} className="shrink-0" /> 登录
+              </Link>
+              <Link href="/register" className="j13-raillink">
+                <UserPlus size={16} className="shrink-0" /> 注册账号
+              </Link>
+            </>
+          )}
+        </div>
+      </div>
+    </nav>
+  );
+}
+
+// 移动端：发帖入口 + 横向滑动板块条
+export function WorkspaceNavMobile({
+  boards,
+  user,
+}: {
+  boards: BoardWithCount[];
+  user: User | null;
+}) {
+  const params = useSearchParams();
+  const activeBoard = Number(params.get("board")) || 0;
+  const composeHref = user ? "/compose" : "/login?redirect=/compose";
+
+  return (
+    <div className="lg:hidden -mx-4 sm:-mx-6 px-4 sm:px-6">
+      <div className="j13-chips">
+        <Link href={composeHref} className="btn btn-primary btn-sm shrink-0">
+          <PenSquare size={14} /> 发帖
+        </Link>
+        <Link
+          href="/"
+          className="j13-chip"
+          aria-current={activeBoard === 0 ? "page" : undefined}
+        >
+          <Home size={13} /> 全部
+        </Link>
+        {boards.map((b) => (
+          <Link
+            key={b.id}
+            href={boardHref(b.id)}
+            className="j13-chip"
+            aria-current={activeBoard === b.id ? "page" : undefined}
+          >
+            {b.name}
+          </Link>
+        ))}
+      </div>
+    </div>
+  );
+}