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

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

frontend/app/page.tsx

@@ -1,12 +1,19 @@
-import Link from "next/link";
 import type { Metadata } from "next";
 import { cookies } from "next/headers";
-import { PenSquare, SearchX, MessagesSquare, Check, ArrowRight } from "lucide-react";
-import { fetchPosts, fetchBoards } from "@/lib/api";
+import Link from "next/link";
+import { PenSquare, SearchX, MessagesSquare } from "lucide-react";
+import {
+  fetchPosts,
+  fetchOverview,
+  type OverviewResponse,
+} from "@/lib/api";
 import { authCookieHeader } from "@/lib/cookies";
+import { getMeCached } from "@/lib/serverData";
 import Pagination from "@/components/Pagination";
 import PostRow from "@/components/PostRow";
-import PinnedPosts from "@/components/PinnedPosts";
+import FeedTabs, { type FeedSort } from "@/components/home/FeedTabs";
+import { WorkspaceNav, WorkspaceNavMobile } from "@/components/home/WorkspaceNav";
+import { CommunityPanels, CommunityPanelsMobile } from "@/components/home/CommunityPanels";
 
 export const metadata: Metadata = {
   title: "姜十三论坛 · 技术讨论社区",
@@ -14,97 +21,172 @@ export const metadata: Metadata = {
 };
 
 interface HomePageProps {
-  searchParams: Promise<{ q?: string; page?: string }>;
+  searchParams: Promise<{ q?: string; page?: string; sort?: string; board?: string }>;
+}
+
+function normalizeSort(v?: string): FeedSort {
+  return v === "hot" || v === "recommended" ? v : "latest";
+}
+
+// 空结果面板（无帖 / 无搜索结果）
+function EmptyState({ keyword }: { keyword: string }) {
+  return (
+    <div className="text-center py-20 px-6">
+      <span
+        className="inline-flex w-14 h-14 rounded-full items-center justify-center mb-4"
+        style={{ background: "var(--accent-soft)", color: "var(--accent)" }}
+      >
+        {keyword ? <SearchX size={26} /> : <MessagesSquare size={26} />}
+      </span>
+      <p className="font-bold text-lg" style={{ color: "var(--ink)" }}>
+        {keyword ? "没有找到相关帖子" : "还没有帖子"}
+      </p>
+      <p className="meta mt-1.5">
+        {keyword ? `换个关键词试试，或者发起“${keyword}”相关的话题` : "成为第一个发起讨论的人吧"}
+      </p>
+      {keyword ? (
+        <div className="flex items-center justify-center gap-3 mt-6">
+          <Link href="/" className="btn btn-line">
+            清除搜索
+          </Link>
+          <Link href="/compose" className="btn btn-primary">
+            <PenSquare size={15} /> 发起这个话题
+          </Link>
+        </div>
+      ) : (
+        <Link href="/compose" className="btn btn-primary mt-6">
+          <PenSquare size={15} /> 写新帖
+        </Link>
+      )}
+    </div>
+  );
 }
 
 export default async function HomePage({ searchParams }: HomePageProps) {
-  const { q, page: pageStr } = await searchParams;
-  const keyword = q?.trim() || "";
-  const page = Math.max(1, parseInt(pageStr || "1", 10) || 1);
-  // 仅转发最小化的 access cookie 供后端填充 liked 状态（不携带 refresh 等）
-  const cookie = authCookieHeader(await cookies());
-  const [postsData, boardsData] = await Promise.all([
-    fetchPosts(page, 20, undefined, "latest", keyword, cookie),
-    fetchBoards(),
-  ]);
+  const sp = await searchParams;
+  const keyword = sp.q?.trim() || "";
+  const page = Math.max(1, parseInt(sp.page || "1", 10) || 1);
+  const sort = normalizeSort(sp.sort);
+  const boardId = Math.max(0, parseInt(sp.board || "0", 10) || 0);
+  const isSearch = keyword.length > 0;
 
-  // 第一页且非搜索时：管理员置顶独立成区，其余进入普通列表
-  const split = page === 1 && !keyword;
-  const pinned = split ? postsData.posts.filter((p) => p.pinned > 0) : [];
-  const rows = split ? postsData.posts.filter((p) => p.pinned <= 0) : postsData.posts;
+  const cookie = authCookieHeader(await cookies());
+  // 与 layout 共享同一份 /me 请求（React cache 去重）
+  const mePromise = getMeCached(cookie || undefined);
+  const postsPromise = fetchPosts(
+    page,
+    20,
+    isSearch || boardId <= 0 ? undefined : boardId,
+    sort === "recommended" ? "hot" : sort,
+    keyword,
+    sort === "recommended",
+    cookie
+  );
+  // 聚合面板失败不阻塞帖子流
+  const overviewPromise: Promise<OverviewResponse | null> = fetchOverview(cookie).catch(() => null);
+
+  const [me, postsData, overview] = await Promise.all([
+    mePromise,
+    postsPromise,
+    overviewPromise,
+  ]);
+  const user = me.user;
+  const boards = overview?.boards ?? [];
+  const activeBoard = boards.find((b) => b.id === boardId) || null;
+
+  // 搜索态：单栏占满，无 Tabs/侧栏
+  if (isSearch) {
+    return (
+      <div className="max-w-3xl mx-auto">
+        <div className="mb-5">
+          <h1 className="text-[24px] sm:text-[28px] font-extrabold tracking-tight" style={{ color: "var(--ink)" }}>
+            搜索“<span style={{ color: "var(--accent)" }}>{keyword}</span>”
+          </h1>
+          <p className="meta mt-2">共 {postsData.total} 篇结果 · 按相关度与时间排序</p>
+        </div>
+        <div className="panel overflow-hidden">
+          {postsData.posts.length > 0 ? (
+            postsData.posts.map((post, i) => (
+              <PostRow key={post.id} post={post} boardHref index={i} showViews={false} showLike={false} />
+            ))
+          ) : (
+            <EmptyState keyword={keyword} />
+          )}
+        </div>
+        <Pagination
+          total={postsData.total}
+          page={page}
+          size={20}
+          basePath="/"
+          query={{ q: keyword }}
+        />
+      </div>
+    );
+  }
+
+  // 置顶帖直接按后端 pinned DESC 顺序并入统一信息流，同样的行布局
+  const heading = activeBoard
+    ? activeBoard.name
+    : sort === "hot"
+      ? "热门讨论"
+      : sort === "recommended"
+        ? "精华内容"
+        : "最新讨论";
+  const headingHint = activeBoard
+    ? sort === "hot"
+      ? "该板块按点赞与评论热度排序"
+      : sort === "recommended"
+        ? "该板块管理员精选的优质内容"
+        : "该板块新发帖与新评论都会浮到顶部"
+    : sort === "hot"
+      ? "按点赞与评论热度排序"
+      : sort === "recommended"
+        ? "管理员精选的优质内容"
+        : "新发帖与新评论都会浮到顶部";
+
+  const pageQuery: Record<string, string> = {};
+  if (boardId > 0) pageQuery.board = String(boardId);
+  if (sort !== "latest") pageQuery.sort = sort;
 
   return (
     <div>
-      {/* 页头 */}
-      <div className="flex items-end justify-between gap-4 mb-6">
-        <div>
-          <h1 className="text-[26px] sm:text-[32px] font-extrabold tracking-tight" style={{ color: "var(--ink)" }}>
-            {keyword ? (
-              <>
-                搜索“<span style={{ color: "var(--accent)" }}>{keyword}</span>”
-              </>
-            ) : (
-              "最新讨论"
-            )}
-          </h1>
-          <p className="meta mt-2">
-            {keyword
-              ? `共找到 ${postsData.total} 篇相关帖子`
-              : `共 ${postsData.total} 篇帖子 · ${boardsData.boards.length} 个板块，欢迎加入讨论`}
-          </p>
-        </div>
-        <Link href="/compose" className="btn btn-primary hidden sm:inline-flex">
-          <PenSquare size={16} /> 写新帖
-        </Link>
-      </div>
+      <WorkspaceNavMobile boards={boards} user={user} />
 
-      <div className="grid grid-cols-1 lg:grid-cols-[1fr_290px] gap-6">
-        {/* 主列 */}
-        <div>
-          <PinnedPosts posts={pinned} />
+      <div className="flex items-start gap-6 xl:gap-7 mt-5 lg:mt-0">
+        <WorkspaceNav boards={boards} user={user} />
+
+        {/* 中栏：帖子流（左栏切板块只替换这一列） */}
+        <div className="flex-1 min-w-0">
+          <div className="flex items-end justify-between gap-3 flex-wrap mb-4">
+            <div className="min-w-0">
+              <h1
+                className="text-[23px] sm:text-[27px] font-extrabold tracking-tight"
+                style={{ color: "var(--ink)" }}
+              >
+                {heading}
+              </h1>
+              <p className="meta mt-1.5">
+                共 {postsData.total} 篇 · {headingHint}
+              </p>
+            </div>
+            <FeedTabs current={sort} boardId={boardId} />
+          </div>
 
           <div className="panel overflow-hidden">
-            {rows.length > 0 ? (
-              <>
-                <div className="px-4 sm:px-5 py-3.5 flex items-center justify-between" style={{ borderBottom: "1px solid var(--line)" }}>
-                  <span className="font-bold text-[15px]" style={{ color: "var(--ink)" }}>
-                    {keyword ? "搜索结果" : "全部讨论"}
-                  </span>
-                  <span className="meta text-xs">共 {postsData.total} 篇</span>
-                </div>
-                {rows.map((post) => (
-                  <PostRow key={post.id} post={post} boardHref />
-                ))}
-              </>
+            {postsData.posts.length > 0 ? (
+              postsData.posts.map((post, i) => (
+                <PostRow
+                  key={post.id}
+                  post={post}
+                  boardHref={!activeBoard}
+                  compact
+                  index={i}
+                  showViews={false}
+                  showLike={false}
+                />
+              ))
             ) : (
-              <div className="text-center py-20 px-6">
-                <span
-                  className="inline-flex w-14 h-14 rounded-full items-center justify-center mb-4"
-                  style={{ background: "var(--accent-soft)", color: "var(--accent)" }}
-                >
-                  {keyword ? <SearchX size={26} /> : <MessagesSquare size={26} />}
-                </span>
-                <p className="font-bold text-lg" style={{ color: "var(--ink)" }}>
-                  {keyword ? "没有找到相关帖子" : "还没有帖子"}
-                </p>
-                <p className="meta mt-1.5">
-                  {keyword ? `换个关键词试试，或者发起“${keyword}”相关的话题` : "成为第一个发起讨论的人吧"}
-                </p>
-                {keyword ? (
-                  <div className="flex items-center justify-center gap-3 mt-6">
-                    <Link href="/" className="btn btn-line">
-                      清除搜索
-                    </Link>
-                    <Link href="/compose" className="btn btn-primary">
-                      <PenSquare size={15} /> 发起这个话题
-                    </Link>
-                  </div>
-                ) : (
-                  <Link href="/compose" className="btn btn-primary mt-6">
-                    <PenSquare size={15} /> 写新帖
-                  </Link>
-                )}
-              </div>
+              <EmptyState keyword="" />
             )}
           </div>
 
@@ -113,87 +195,30 @@ export default async function HomePage({ searchParams }: HomePageProps) {
             page={page}
             size={20}
             basePath="/"
-            query={keyword ? { q: keyword } : undefined}
+            query={Object.keys(pageQuery).length > 0 ? pageQuery : undefined}
           />
         </div>
 
-        {/* 侧栏 */}
-        <aside className="space-y-5">
-          {/* 发帖引导 */}
-          {!keyword && (
-            <div
-              className="p-5"
-              style={{
-                background: "var(--accent-soft)",
-                borderRadius: "var(--r)",
-              }}
-            >
-              <p className="font-extrabold text-[16px] mb-1" style={{ color: "var(--ink)" }}>
-                有什么想聊的？
-              </p>
-              <p className="text-[13px] leading-relaxed mb-4" style={{ color: "var(--ink-2)" }}>
-                分享你的想法、问题或经验，社区里有人正在等你的回答。
-              </p>
-              <Link
-                href="/compose"
-                className="btn btn-primary w-full justify-center"
-              >
-                <PenSquare size={15} /> 发起讨论
-              </Link>
-            </div>
-          )}
-
-          <div className="panel p-5">
-            <p className="font-bold text-[15px] mb-3.5" style={{ color: "var(--ink)" }}>板块导航</p>
-            <div className="space-y-1">
-              {boardsData.boards.map((b, i) => (
-                <Link
-                  key={b.id}
-                  href={`/board/${b.id}`}
-                  className="group flex items-center gap-3 py-1.5 px-2 -mx-2 rounded-xl transition-colors hover:bg-[var(--panel-2)]"
-                >
-                  <span
-                    className={`av-${i % 8} w-8 h-8 rounded-xl flex items-center justify-center text-[13px] font-bold shrink-0`}
-                  >
-                    {b.name.slice(0, 1)}
-                  </span>
-                  <span
-                    className="text-sm font-medium flex-1 truncate group-hover:text-[var(--accent)] transition-colors"
-                    style={{ color: "var(--ink)" }}
-                  >
-                    {b.name}
-                  </span>
-                  <ArrowRight size={14} className="opacity-0 -translate-x-1 group-hover:opacity-100 group-hover:translate-x-0 transition-all" style={{ color: "var(--accent)" }} />
-                </Link>
-              ))}
-            </div>
-          </div>
-
-          <div className="panel p-5">
-            <p className="font-bold text-[15px] mb-3.5" style={{ color: "var(--ink)" }}>社区守则</p>
-            <ul className="space-y-3 text-[13.5px] leading-relaxed" style={{ color: "var(--ink-2)" }}>
-              <li className="flex gap-2.5">
-                <span className="shrink-0 w-5 h-5 rounded-full flex items-center justify-center mt-0.5" style={{ background: "var(--accent-soft)", color: "var(--accent)" }}>
-                  <Check size={12} strokeWidth={3} />
-                </span>
-                标题清晰，内容支持 Markdown
-              </li>
-              <li className="flex gap-2.5">
-                <span className="shrink-0 w-5 h-5 rounded-full flex items-center justify-center mt-0.5" style={{ background: "var(--accent-soft)", color: "var(--accent)" }}>
-                  <Check size={12} strokeWidth={3} />
-                </span>
-                友善讨论，就事论事
-              </li>
-              <li className="flex gap-2.5">
-                <span className="shrink-0 w-5 h-5 rounded-full flex items-center justify-center mt-0.5" style={{ background: "var(--accent-soft)", color: "var(--accent)" }}>
-                  <Check size={12} strokeWidth={3} />
-                </span>
-                违规内容可向管理员举报
-              </li>
-            </ul>
-          </div>
-        </aside>
+        {/* 右栏：社区面板 */}
+        {overview && (
+          <CommunityPanels
+            stats={overview.stats}
+            hot={overview.hot}
+            activeUsers={overview.active_users}
+          />
+        )}
       </div>
+
+      {/* 窄屏：面板下沉到帖子流之后 */}
+      {overview && (
+        <div className="mt-6">
+          <CommunityPanelsMobile
+            stats={overview.stats}
+            hot={overview.hot}
+            activeUsers={overview.active_users}
+          />
+        </div>
+      )}
     </div>
   );
 }