feat: 帖子收藏与用户关注

- 新增收藏功能：favorite 服务与 handler、FavoriteButton 组件
- 新增关注功能：follow 服务与 handler、FollowButton 组件
- 用户主页适配关注/粉丝与收藏展示
- flash 消息工具、广告与侧边栏组件微调

frontend/app/u/[id]/UserProfileContent.tsx

@@ -1,9 +1,17 @@
 import Link from "next/link";
-import { FileText, MessageCircle, AlertCircle } from "lucide-react";
+import {
+  FileText, MessageCircle, AlertCircle, Bookmark, UserPlus,
+} from "lucide-react";
 import Pagination from "@/components/Pagination";
+import PostRow from "@/components/PostRow";
 import { IconComment, IconEye, IconHeart } from "@/components/Icons";
+import Avatar from "@/components/Avatar";
+import LevelBadge from "@/components/LevelBadge";
+import FollowButton from "@/components/FollowButton";
 import { formatRelative } from "@/lib/format";
-import type { UserProfile, UserCommentsResponse } from "@/lib/api";
+import type {
+  UserProfile, UserCommentsResponse, UserFavoritesResponse, UserFollowingResponse, PostListItem,
+} from "@/lib/api";
 
 /** 本页卡片统一阴影；用 color-mix 让暗色主题自动加深，避免写死浅色阴影 */
 const CARD_SHADOW = "0 1px 3px color-mix(in srgb, #000 18%, transparent)";
@@ -11,10 +19,125 @@ const CARD_SHADOW = "0 1px 3px color-mix(in srgb, #000 18%, transparent)";
 const ITEM_BASE =
   "group block rounded-xl px-6 py-5 border transition-[background-color,box-shadow,border-color] duration-150";
 
+const SORTS: { key: string; label: string }[] = [
+  { key: "new", label: "最新" },
+  { key: "hot", label: "热门" },
+  { key: "essence", label: "精华" },
+];
+
+/** 帖子卡（发帖列表与收藏列表共用） */
+function PostCardItem({ post, allowComments }: { post: PostListItem; allowComments?: boolean }) {
+  const pinned = post.pinned > 0;
+  return (
+    <Link
+      href={`/post/${post.id}`}
+      className={`${ITEM_BASE} ${
+        pinned
+          ? "bg-[color-mix(in_srgb,#fde68a_22%,var(--panel))] border-[color-mix(in_srgb,#fde68a_70%,var(--line))] hover:bg-[color-mix(in_srgb,#fde68a_30%,var(--panel))]"
+          : "bg-[var(--panel)] border-[var(--line)] hover:bg-[color-mix(in_srgb,var(--ink)_3.5%,var(--panel))]"
+      }`}
+      style={{ boxShadow: CARD_SHADOW }}
+    >
+      <div className="flex items-start gap-2">
+        {pinned && (
+          <span
+            className="mt-0.5 inline-flex shrink-0 items-center rounded px-1.5 py-px text-[11px] font-semibold leading-[1.5] text-white"
+            style={{ background: "#f59e0b" }}
+          >
+            置顶
+          </span>
+        )}
+        <h2
+          className="min-w-0 flex-1 text-[18px] font-semibold leading-snug transition-colors duration-150 group-hover:text-[var(--accent)]"
+          style={{ color: "var(--ink)" }}
+        >
+          {post.title}
+        </h2>
+        {post.recommended && <span className="badge-rec shrink-0">推荐</span>}
+      </div>
+      <div
+        className="mt-2 flex flex-wrap items-center gap-x-3 gap-y-1.5 text-[12px]"
+        style={{ color: "var(--ink-3)" }}
+      >
+        <span
+          className="inline-flex items-center rounded px-1.5 py-px text-[11px] font-medium leading-[1.5]"
+          style={{
+            background: "var(--panel-2)",
+            color: "var(--ink)",
+          }}
+        >
+          {post.board.name}
+        </span>
+        <span className="tabular-nums">{formatRelative(post.created_at)}</span>
+        {allowComments ? (
+          <span className="inline-flex items-center gap-1">
+            <IconComment size={12} />
+            <span className="inline-flex items-center gap-1 tabular-nums">
+              {post.comment_count}
+              <span>评论</span>
+            </span>
+          </span>
+        ) : null}
+        <span className="inline-flex items-center gap-1">
+          <IconEye size={12} />
+          <span className="inline-flex items-center gap-1 tabular-nums">
+            {post.view_count}
+            <span>浏览</span>
+          </span>
+        </span>
+        <span className="inline-flex items-center gap-1">
+          <IconHeart size={12} />
+          <span className="inline-flex items-center gap-1 tabular-nums">
+            {post.like_count}
+            <span>点赞</span>
+          </span>
+        </span>
+      </div>
+    </Link>
+  );
+}
+
+/** 列表区块统一空态 */
+function EmptyState({ icon, text }: { icon: React.ReactNode; text: string }) {
+  return (
+    <div
+      className="rounded-xl text-center py-16 px-6"
+      style={{
+        background: "var(--panel)",
+        border: "1px solid var(--line)",
+        boxShadow: CARD_SHADOW,
+      }}
+    >
+      {icon}
+      <p className="text-sm font-semibold" style={{ color: "var(--ink-2)" }}>{text}</p>
+    </div>
+  );
+}
+
+/** 列表加载失败统一态 */
+function ErrorState({ retryHref }: { retryHref: string }) {
+  return (
+    <div
+      className="rounded-xl text-center py-16 px-6"
+      role="alert"
+      style={{
+        background: "var(--panel)",
+        border: "1px solid var(--line)",
+        boxShadow: CARD_SHADOW,
+      }}
+    >
+      <AlertCircle size={26} className="mx-auto mb-3" style={{ color: "var(--danger)" }} />
+      <p className="text-sm font-semibold" style={{ color: "var(--ink-2)" }}>加载失败</p>
+      <p className="meta mt-1.5 mb-4">网络异常，请稍后重试</p>
+      <Link href={retryHref} className="btn btn-line btn-sm">重新加载</Link>
+    </div>
+  );
+}
+
 /**
  * 用户主页内容区（纯服务端渲染）：
- * tab 与分页全部走 URL（?tab=comments&page=N），刷新/后退/分享链接均保持一致。
- * Tab 切换栏已移至 page.tsx 统一渲染（含 settings / security），此组件仅负责 posts / comments 列表。
+ * tab 与分页全部走 URL（?tab=xxx&page=N&sort=xxx），刷新/后退/分享链接均保持一致。
+ * Tab 切换栏已移至 page.tsx 统一渲染（含 settings / security），此组件仅负责列表类 tab。
  */
 export default function UserProfileContent({
   userId,
@@ -22,153 +145,187 @@ export default function UserProfileContent({
   tab,
   commentData,
   commentError,
+  favoriteData,
+  favoriteError,
+  followingData,
+  followingError,
   page,
+  sort = "new",
+  isOwner,
   allowComments = true,
 }: {
   userId: string;
   profile: UserProfile;
-  tab: "posts" | "comments";
+  tab: "posts" | "comments" | "favorites" | "following";
   commentData: UserCommentsResponse | null;
   commentError: boolean;
+  favoriteData: UserFavoritesResponse | null;
+  favoriteError: boolean;
+  followingData: UserFollowingResponse | null;
+  followingError: boolean;
   page: number;
+  sort?: string;
+  isOwner: boolean;
   allowComments?: boolean;
 }) {
+  const displayName = profile.user.nickname || profile.user.username;
+  const paginationQuery: Record<string, string> =
+    tab === "comments" ? { tab: "comments" }
+    : tab === "favorites" ? { tab: "favorites" }
+    : tab === "following" ? { tab: "following" }
+    : sort !== "new" ? { sort }
+    : {};
+
   return (
     <div>
       {tab === "posts" ? (
         <div>
+          {/* 标题 + 排序 chips（最新/热门/精华），与参考图一致 */}
+          <div className="mb-3 flex flex-wrap items-center justify-between gap-2">
+            <h2 className="text-[17px] font-extrabold tracking-tight" style={{ color: "var(--ink)" }}>
+              {isOwner ? "我的帖子" : `${displayName} 的帖子`}
+            </h2>
+            <div className="j13-chips">
+              {SORTS.map((s) => (
+                <Link
+                  key={s.key}
+                  href={s.key === "new" ? `/u/${userId}` : `/u/${userId}?sort=${s.key}`}
+                  className="j13-chip"
+                  aria-current={sort === s.key ? "page" : undefined}
+                >
+                  {s.label}
+                </Link>
+              ))}
+            </div>
+          </div>
           {Array.isArray(profile.posts) && profile.posts.length > 0 ? (
-            <div className="flex flex-col gap-2">
-              {profile.posts.map((post) => {
-                const pinned = post.pinned > 0;
-                return (
-                  <Link
-                    key={post.id}
-                    href={`/post/${post.id}`}
-                    className={`${ITEM_BASE} ${
-                      pinned
-                        ? "bg-[color-mix(in_srgb,#fde68a_22%,var(--panel))] border-[color-mix(in_srgb,#fde68a_70%,var(--line))] hover:bg-[color-mix(in_srgb,#fde68a_30%,var(--panel))]"
-                        : "bg-[var(--panel)] border-[var(--line)] hover:bg-[color-mix(in_srgb,var(--ink)_3.5%,var(--panel))]"
-                    }`}
-                    style={{ boxShadow: CARD_SHADOW }}
-                  >
-                    <div className="flex items-start gap-2">
-                      {pinned && (
-                        <span
-                          className="mt-0.5 inline-flex shrink-0 items-center rounded px-1.5 py-px text-[11px] font-semibold leading-[1.5] text-white"
-                          style={{ background: "#f59e0b" }}
-                        >
-                          置顶
-                        </span>
-                      )}
-                      <h2
-                        className="min-w-0 flex-1 text-[18px] font-semibold leading-snug transition-colors duration-150 group-hover:text-[var(--accent)]"
-                        style={{ color: "var(--ink)" }}
-                      >
-                        {post.title}
-                      </h2>
-                      {post.recommended && <span className="badge-rec shrink-0">推荐</span>}
-                    </div>
-                    <div
-                      className="mt-2 flex flex-wrap items-center gap-x-3 gap-y-1.5 text-[12px]"
-                      style={{ color: "var(--ink-3)" }}
-                    >
-                      <span
-                        className="inline-flex items-center rounded px-1.5 py-px text-[11px] font-medium leading-[1.5]"
-                        style={{
-                          background: "var(--panel-2)",
-                          color: "var(--ink)",
-                        }}
-                      >
-                        {post.board.name}
-                      </span>
-                      <span className="tabular-nums">{formatRelative(post.created_at)}</span>
-                      {allowComments ? (
-                        <span className="inline-flex items-center gap-1">
-                          <IconComment size={12} />
-                          <span className="inline-flex items-center gap-1 tabular-nums">
-                            {post.comment_count}
-                            <span>评论</span>
-                          </span>
-                        </span>
-                      ) : null}
-                      <span className="inline-flex items-center gap-1">
-                        <IconEye size={12} />
-                        <span className="inline-flex items-center gap-1 tabular-nums">
-                          {post.view_count}
-                          <span>浏览</span>
-                        </span>
-                      </span>
-                      <span className="inline-flex items-center gap-1">
-                        <IconHeart size={12} />
-                        <span className="inline-flex items-center gap-1 tabular-nums">
-                          {post.like_count}
-                          <span>点赞</span>
-                        </span>
-                      </span>
-                    </div>
-                  </Link>
-                );
-              })}
+            /* 与首页信息流一致的行式列表 */
+            <div className="panel overflow-hidden">
+              {profile.posts.map((post, i) => (
+                <PostRow key={post.id} post={post} showBoard index={i} showLike={false} />
+              ))}
             </div>
           ) : (
-            <div
-              className="rounded-xl text-center py-16 px-6"
-              style={{
-                background: "var(--panel)",
-                border: "1px solid var(--line)",
-                boxShadow: CARD_SHADOW,
-              }}
-            >
-              <FileText size={26} className="mx-auto mb-3" style={{ color: "var(--ink-3)" }} />
-              <p className="text-sm font-semibold" style={{ color: "var(--ink-2)" }}>暂无发帖</p>
-            </div>
+            <EmptyState
+              icon={<FileText size={26} className="mx-auto mb-3" style={{ color: "var(--ink-3)" }} />}
+              text="暂无发帖"
+            />
           )}
           <Pagination
             total={profile.posts_total}
             page={page}
             size={20}
             basePath={`/u/${userId}`}
+            query={paginationQuery}
           />
         </div>
+      ) : tab === "favorites" ? (
+        favoriteError ? (
+          <ErrorState retryHref={`/u/${userId}?tab=favorites`} />
+        ) : favoriteData && favoriteData.posts.length > 0 ? (
+          <div>
+            <div className="mb-3 flex flex-wrap items-center justify-between gap-2">
+              <h2 className="text-[17px] font-extrabold tracking-tight" style={{ color: "var(--ink)" }}>
+                {isOwner ? "我的收藏" : `${displayName} 的收藏`}
+              </h2>
+            </div>
+            <div className="flex flex-col gap-2">
+              {favoriteData.posts.map((post) => (
+                <PostCardItem key={post.id} post={post} allowComments={allowComments} />
+              ))}
+            </div>
+            <Pagination
+              total={favoriteData.total}
+              page={favoriteData.page}
+              size={20}
+              basePath={`/u/${userId}`}
+              query={paginationQuery}
+            />
+          </div>
+        ) : (
+          <EmptyState
+            icon={<Bookmark size={26} className="mx-auto mb-3" style={{ color: "var(--ink-3)" }} />}
+            text="暂无收藏"
+          />
+        )
+      ) : tab === "following" ? (
+        followingError ? (
+          <ErrorState retryHref={`/u/${userId}?tab=following`} />
+        ) : followingData && followingData.users.length > 0 ? (
+          <div>
+            <div className="mb-3 flex flex-wrap items-center justify-between gap-2">
+              <h2 className="text-[17px] font-extrabold tracking-tight" style={{ color: "var(--ink)" }}>
+                {isOwner ? "我的关注" : `${displayName} 的关注`}
+              </h2>
+            </div>
+            <div className="flex flex-col gap-2">
+              {followingData.users.map((fu) => (
+                <div
+                  key={fu.id}
+                  className="group flex items-center gap-3 rounded-xl border px-5 py-4 transition-[background-color,box-shadow,border-color] duration-150 bg-[var(--panel)] border-[var(--line)] hover:bg-[color-mix(in_srgb,var(--ink)_3.5%,var(--panel))]"
+                  style={{ boxShadow: CARD_SHADOW }}
+                >
+                  <Link href={`/u/${fu.id}`} className="flex min-w-0 flex-1 items-center gap-3">
+                    <Avatar name={fu.nickname || fu.username} src={fu.avatar || undefined} size={40} />
+                    <div className="min-w-0">
+                      <div className="flex items-center gap-1.5">
+                        <span
+                          className="truncate text-[15px] font-semibold transition-colors duration-150 group-hover:text-[var(--accent)]"
+                          style={{ color: "var(--ink)" }}
+                        >
+                          {fu.nickname || fu.username}
+                        </span>
+                        <LevelBadge level={fu.level ?? 0} />
+                      </div>
+                      <p className="mt-0.5 truncate text-[12px]" style={{ color: "var(--ink-3)" }}>
+                        @{fu.username}
+                        {fu.signature ? ` · ${fu.signature}` : ""}
+                      </p>
+                    </div>
+                  </Link>
+                  {isOwner && <FollowButton userId={fu.id} following size="sm" />}
+                </div>
+              ))}
+            </div>
+            <Pagination
+              total={followingData.total}
+              page={followingData.page}
+              size={20}
+              basePath={`/u/${userId}`}
+              query={paginationQuery}
+            />
+          </div>
+        ) : (
+          <EmptyState
+            icon={<UserPlus size={26} className="mx-auto mb-3" style={{ color: "var(--ink-3)" }} />}
+            text="暂无关注"
+          />
+        )
       ) : commentError ? (
-        <div
-          className="rounded-xl text-center py-16 px-6"
-          role="alert"
-          style={{
-            background: "var(--panel)",
-            border: "1px solid var(--line)",
-            boxShadow: CARD_SHADOW,
-          }}
-        >
-          <AlertCircle size={26} className="mx-auto mb-3" style={{ color: "var(--danger)" }} />
-          <p className="text-sm font-semibold" style={{ color: "var(--ink-2)" }}>评论加载失败</p>
-          <p className="meta mt-1.5 mb-4">网络异常，请稍后重试</p>
-          <Link href={`/u/${userId}?tab=comments`} className="btn btn-line btn-sm">重新加载</Link>
-        </div>
+        <ErrorState retryHref={`/u/${userId}?tab=comments`} />
       ) : commentData && (commentData.comments?.length ?? 0) > 0 ? (
         <div>
-          <div className="flex flex-col gap-2">
+          <div className="panel overflow-hidden">
             {(commentData.comments ?? []).map((c) => (
               <Link
                 key={c.id}
-                href={`/post/${c.post_id}`}
-                className={`${ITEM_BASE} bg-[var(--panel)] border-[var(--line)] hover:bg-[color-mix(in_srgb,var(--ink)_3.5%,var(--panel))]`}
-                style={{ boxShadow: CARD_SHADOW }}
+                href={`/post/${c.post_id}#comment-${c.id}`}
+                className="group block px-4 sm:px-5 py-4 border-t transition-colors hover:bg-[var(--item-hover-bg)] focus-visible:bg-[var(--item-hover-bg)]"
+                style={{ borderColor: "var(--line)" }}
               >
-                <div className="meta text-xs mb-2">
-                  评论于《<span style={{ color: "var(--accent)" }}>{c.post_title}</span>》
+                <div className="meta text-[12.5px] flex items-center gap-1 flex-wrap">
+                  <MessageCircle size={12} />
+                  <span>
+                    评论于《<span className="font-medium" style={{ color: "var(--accent)" }}>{c.post_title}</span>》
+                  </span>
                 </div>
                 <p
-                  className="text-[15px] leading-relaxed line-clamp-2"
+                  className="mt-1.5 text-[14px] leading-relaxed line-clamp-2 group-hover:text-[var(--accent)] transition-colors"
                   style={{ color: "var(--ink)" }}
                 >
                   {c.content}
                 </p>
-                <div
-                  className="mt-2 text-[12px] tabular-nums"
-                  style={{ color: "var(--ink-3)" }}
-                >
+                <div className="meta text-[12px] mt-1.5 tabular-nums">
                   {formatRelative(c.created_at)}
                 </div>
               </Link>
@@ -179,21 +336,14 @@ export default function UserProfileContent({
             page={commentData.page}
             size={20}
             basePath={`/u/${userId}`}
-            query={{ tab: "comments" }}
+            query={paginationQuery}
           />
         </div>
       ) : (
-        <div
-          className="rounded-xl text-center py-16 px-6"
-          style={{
-            background: "var(--panel)",
-            border: "1px solid var(--line)",
-            boxShadow: CARD_SHADOW,
-          }}
-        >
-          <MessageCircle size={26} className="mx-auto mb-3" style={{ color: "var(--ink-3)" }} />
-          <p className="text-sm font-semibold" style={{ color: "var(--ink-2)" }}>暂无评论</p>
-        </div>
+        <EmptyState
+          icon={<MessageCircle size={26} className="mx-auto mb-3" style={{ color: "var(--ink-3)" }} />}
+          text="暂无评论"
+        />
       )}
     </div>
   );

frontend/app/u/[id]/page.tsx

@@ -3,14 +3,16 @@ import { cookies, headers } from "next/headers";
 import { Metadata } from "next";
 import {
   FileText, MessageCircle, Flame, Calendar, Hash, Shield,
-  Settings, KeyRound, Info, PenLine,
+  Settings, KeyRound, Info, PenLine, Bookmark, UserPlus, Mail,
 } from "lucide-react";
 import {
   fetchUserProfile, fetchUserComments, fetchLoginDevices,
+  fetchUserFavorites, fetchUserFollowing,
   type UserProfile, type UserCommentsResponse, type LoginDevice,
+  type UserFavoritesResponse, type UserFollowingResponse,
 } from "@/lib/api";
 import { authCookieHeader, sessionCookieHeader } from "@/lib/cookies";
-import { getMeCached, getPublicSettingsCached } from "@/lib/serverData";
+import { getMeCached, getPublicSettingsCached, getBoardsCached } from "@/lib/serverData";
 import UserProfileContent from "./UserProfileContent";
 import ProfileForm from "./ProfileForm";
 import PasswordForm from "./PasswordForm";
@@ -19,8 +21,10 @@ import ProfileHeroAvatar from "./ProfileHeroAvatar";
 import RoleBadge from "@/components/RoleBadge";
 import LevelBadge from "@/components/LevelBadge";
 import BadgeChip from "@/components/BadgeChip";
+import { boardColor } from "@/components/BoardIcon";
 import { roleMeta } from "@/lib/roles";
 import StartDMButton from "./StartDMButton";
+import FollowButton from "@/components/FollowButton";
 import StaffUserMenu from "@/components/StaffUserMenu";
 import { requestCanonical } from "@/lib/canonicalMeta";
 import { absoluteCanonical, canonicalPage } from "@/lib/siteUrl";
@@ -29,19 +33,23 @@ import JsonLd from "@/components/JsonLd";
 
 interface UserPageProps {
   params: Promise<{ id: string }>;
-  searchParams: Promise<{ page?: string; tab?: string }>;
+  searchParams: Promise<{ page?: string; tab?: string; sort?: string }>;
 }
 
-export type UserTab = "posts" | "comments" | "settings" | "security";
+export type UserTab = "posts" | "comments" | "favorites" | "following" | "settings" | "security";
+
+function parseTab(rawTab?: string): UserTab {
+  return rawTab === "comments" ? "comments" :
+    rawTab === "favorites" ? "favorites" :
+    rawTab === "following" ? "following" :
+    rawTab === "settings" ? "settings" :
+    rawTab === "security" ? "security" : "posts";
+}
 
 export async function generateMetadata({ params, searchParams }: UserPageProps): Promise<Metadata> {
   const { id } = await params;
   const sp = await searchParams;
-  const rawTab = sp.tab;
-  const tab: UserTab =
-    rawTab === "comments" ? "comments" :
-    rawTab === "settings" ? "settings" :
-    rawTab === "security" ? "security" : "posts";
+  const tab = parseTab(sp.tab);
   try {
     const data = await fetchUserProfile(id, 1);
     const allowComments = (await getPublicSettingsCached()).allow_comments !== false;
@@ -55,6 +63,9 @@ export async function generateMetadata({ params, searchParams }: UserPageProps):
     }
     const query: Record<string, string | number> = {};
     if (allowComments && tab === "comments") query.tab = "comments";
+    if (tab === "favorites") query.tab = "favorites";
+    if (tab === "following") query.tab = "following";
+    if (tab === "posts" && (sp.sort === "hot" || sp.sort === "essence")) query.sort = sp.sort;
     const page = canonicalPage(sp.page);
     if (page) query.page = page;
     return {
@@ -75,11 +86,8 @@ export default async function UserPage({ params, searchParams }: UserPageProps)
   const { id } = await params;
   const sp = await searchParams;
   const page = Math.max(1, parseInt(sp.page || "1", 10) || 1);
-  const rawTab = sp.tab;
-  const tab: UserTab =
-    rawTab === "comments" ? "comments" :
-    rawTab === "settings" ? "settings" :
-    rawTab === "security" ? "security" : "posts";
+  const tab = parseTab(sp.tab);
+  const sort = sp.sort === "hot" || sp.sort === "essence" ? sp.sort : "new";
 
   const cookie = authCookieHeader(await cookies());
   const me = await getMeCached(cookie || undefined);
@@ -92,7 +100,7 @@ export default async function UserPage({ params, searchParams }: UserPageProps)
   let data: UserProfile;
   try {
     // 带 cookie：超管/站长才能拿到 banned 字段
-    data = await fetchUserProfile(id, page, cookie || undefined);
+    data = await fetchUserProfile(id, page, cookie || undefined, sort);
   } catch {
     return (
       <div className="max-w-md mx-auto text-center py-24">
@@ -107,6 +115,18 @@ export default async function UserPage({ params, searchParams }: UserPageProps)
     );
   }
 
+  // 板块 id → 名称/配色：板块管理员徽章展示「{板块名}板块管理员」并对齐板块色
+  const boardNames: Record<number, string> = {};
+  const boardColors: Record<number, number> = {};
+  try {
+    for (const b of (await getBoardsCached()).boards) {
+      boardNames[b.id] = b.name;
+      boardColors[b.id] = boardColor(b);
+    }
+  } catch {
+    /* 板块列表失败时回落通用角色徽章 */
+  }
+
   // 判断是否本人（决定能否看到 settings / security tab）
   const isOwner = me.user?.id === data.user.id;
   const currentUser = me.user;
@@ -119,12 +139,34 @@ export default async function UserPage({ params, searchParams }: UserPageProps)
   let commentError = false;
   if (canReadComments && effectiveTab === "comments") {
     try {
-      commentData = await fetchUserComments(id, page);
+      commentData = await fetchUserComments(id, page, cookie || undefined);
     } catch {
       commentError = true;
     }
   }
 
+  // 收藏 tab：SSR 直出对应分页（公开可见）
+  let favoriteData: UserFavoritesResponse | null = null;
+  let favoriteError = false;
+  if (effectiveTab === "favorites") {
+    try {
+      favoriteData = await fetchUserFavorites(id, page);
+    } catch {
+      favoriteError = true;
+    }
+  }
+
+  // 关注 tab：SSR 直出对应分页（公开可见）
+  let followingData: UserFollowingResponse | null = null;
+  let followingError = false;
+  if (effectiveTab === "following") {
+    try {
+      followingData = await fetchUserFollowing(id, page);
+    } catch {
+      followingError = true;
+    }
+  }
+
   // 安全设置：仍有效的登录会话（仅本人）
   // SSR 直连后端时必须转发 refresh cookie + 浏览器 UA/IP，才能标「当前在线」并避免把 Node fetch 当成一台设备
   let loginDevices: LoginDevice[] = [];
@@ -148,20 +190,29 @@ export default async function UserPage({ params, searchParams }: UserPageProps)
   const showPoints = data.stats.points > 0 || isOwner;
   const hasHeroActions = isOwner || !!currentUser;
 
-  // 导航项（桌面左栏 / 移动 chips 共用定义）
-  const navItems: { key: UserTab; label: string; count?: number; icon: React.ReactNode; ownerOnly?: boolean }[] = [
+  // 导航项（桌面左栏 / 移动 chips 共用定义）：「个人主页」+「设置」两组，与参考图一致
+  const mainNavItems: { key: UserTab; label: string; count?: number; icon: React.ReactNode }[] = [
     { key: "posts", label: "发帖", count: data.stats.post_count, icon: <FileText size={15} /> },
     ...(canReadComments
-      ? [{ key: "comments" as const, label: "评论", count: data.stats.comment_count, icon: <MessageCircle size={15} /> }]
+      ? [{ key: "comments" as const, label: "回帖", count: data.stats.comment_count, icon: <MessageCircle size={15} /> }]
       : []),
-    { key: "settings", label: "资料设置", icon: <Settings size={15} />, ownerOnly: true },
-    { key: "security", label: "安全设置", icon: <KeyRound size={15} />, ownerOnly: true },
+    { key: "favorites", label: "收藏", count: data.stats.favorite_count, icon: <Bookmark size={15} /> },
+    { key: "following", label: "关注", count: data.stats.following_count, icon: <UserPlus size={15} /> },
   ];
-  const visibleNav = navItems.filter((t) => !t.ownerOnly || isOwner);
+  const settingsNavItems: { key: UserTab; label: string; count?: number; icon: React.ReactNode }[] = isOwner
+    ? [
+        { key: "settings", label: "资料设置", icon: <Settings size={15} /> },
+        { key: "security", label: "安全设置", icon: <KeyRound size={15} /> },
+      ]
+    : [];
+  const visibleNav = [...mainNavItems, ...settingsNavItems];
   const tabHref = (t: UserTab) => (t === "posts" ? `/u/${id}` : `/u/${id}?tab=${t}`);
 
   const profileQuery: Record<string, string | number> = {};
   if (canReadComments && effectiveTab === "comments") profileQuery.tab = "comments";
+  if (effectiveTab === "favorites") profileQuery.tab = "favorites";
+  if (effectiveTab === "following") profileQuery.tab = "following";
+  if (effectiveTab === "posts" && sort !== "new") profileQuery.sort = sort;
   if (page > 1) profileQuery.page = page;
   const profileLd =
     effectiveTab === "settings" || effectiveTab === "security"
@@ -220,6 +271,7 @@ export default async function UserPage({ params, searchParams }: UserPageProps)
           </div>
         ) : currentUser ? (
           <div className="absolute top-3 right-3 z-20 flex items-center gap-2">
+            <FollowButton userId={u.id} following={u.is_following === true} />
             <StaffUserMenu
               target={{
                 id: u.id,
@@ -257,7 +309,12 @@ export default async function UserPage({ params, searchParams }: UserPageProps)
               </h1>
               <LevelBadge level={u.level} />
               {u.role !== "user" && (
-                <RoleBadge role={u.role} boardIds={u.board_ids} />
+                <RoleBadge
+                  role={u.role}
+                  boardIds={u.board_ids}
+                  boardNames={boardNames}
+                  boardColors={boardColors}
+                />
               )}
               {u.banned === true && (
                 <span
@@ -356,7 +413,7 @@ export default async function UserPage({ params, searchParams }: UserPageProps)
               个人主页
             </p>
             <div className="space-y-0.5">
-              {visibleNav.map((t) => (
+              {mainNavItems.map((t) => (
                 <Link
                   key={t.key}
                   href={tabHref(t.key)}
@@ -373,19 +430,51 @@ export default async function UserPage({ params, searchParams }: UserPageProps)
                 </Link>
               ))}
             </div>
+            {settingsNavItems.length > 0 && (
+              <>
+                <p
+                  className="px-2.5 pt-3 pb-2 text-[11.5px] font-bold tracking-[0.08em] uppercase"
+                  style={{ color: "var(--ink-3)" }}
+                >
+                  设置
+                </p>
+                <div className="space-y-0.5">
+                  {settingsNavItems.map((t) => (
+                    <Link
+                      key={t.key}
+                      href={tabHref(t.key)}
+                      className="j13-raillink"
+                      aria-current={effectiveTab === t.key ? "page" : undefined}
+                    >
+                      {t.icon}
+                      <span className="flex-1 truncate">{t.label}</span>
+                    </Link>
+                  ))}
+                </div>
+              </>
+            )}
           </section>
         </aside>
 
         {/* 中栏：Tab 内容 */}
         <div className="min-w-0">
-          {effectiveTab === "posts" || effectiveTab === "comments" ? (
+          {effectiveTab === "posts" ||
+          effectiveTab === "comments" ||
+          effectiveTab === "favorites" ||
+          effectiveTab === "following" ? (
             <UserProfileContent
               userId={id}
               profile={data}
               tab={effectiveTab}
               commentData={commentData}
               commentError={commentError}
+              favoriteData={favoriteData}
+              favoriteError={favoriteError}
+              followingData={followingData}
+              followingError={followingError}
               page={page}
+              sort={sort}
+              isOwner={isOwner}
               allowComments={allowComments}
             />
           ) : effectiveTab === "settings" && isOwner && currentUser ? (
@@ -421,35 +510,45 @@ export default async function UserPage({ params, searchParams }: UserPageProps)
             <p className="j13-module-title mb-2.5">
               <Hash size={15} style={{ color: "var(--accent)" }} /> 账号信息
             </p>
-            <div className="flex flex-col gap-2">
-              <div>
-                <p className="text-[11px] leading-none" style={{ color: "var(--ink-3)" }}>用户名</p>
-                <p className="text-[13px] font-semibold mt-1" style={{ color: "var(--ink)" }}>
+            <div className="flex flex-col gap-2.5">
+              <div className="flex items-center justify-between gap-3">
+                <p className="text-[11px] leading-none shrink-0" style={{ color: "var(--ink-3)" }}>用户名</p>
+                <p className="text-[13px] font-semibold truncate text-right" style={{ color: "var(--ink)" }}>
                   {u.username}
                 </p>
               </div>
-              <div>
-                <p className="text-[11px] leading-none flex items-center gap-1" style={{ color: "var(--ink-3)" }}>
+              <div className="flex items-center justify-between gap-3">
+                <p className="text-[11px] leading-none flex items-center gap-1 shrink-0" style={{ color: "var(--ink-3)" }}>
                   <Calendar size={11} /> 注册时间
                 </p>
-                <p className="text-[13px] font-semibold mt-1 tabular-nums" style={{ color: "var(--ink)" }}>
+                <p className="text-[13px] font-semibold tabular-nums text-right" style={{ color: "var(--ink)" }}>
                   {joinDate}
                 </p>
               </div>
-              <div>
-                <p className="text-[11px] leading-none flex items-center gap-1" style={{ color: "var(--ink-3)" }}>
+              <div className="flex items-center justify-between gap-3">
+                <p className="text-[11px] leading-none flex items-center gap-1 shrink-0" style={{ color: "var(--ink-3)" }}>
                   <Shield size={11} /> 角色
                 </p>
-                <p className="text-[13px] font-semibold mt-1" style={{ color: "var(--ink)" }}>
+                <p className="text-[13px] font-semibold text-right" style={{ color: "var(--ink)" }}>
                   {roleMeta(u.role).label}
                 </p>
               </div>
-              <div>
-                <p className="text-[11px] leading-none" style={{ color: "var(--ink-3)" }}>用户 ID</p>
-                <p className="text-[13px] font-semibold mt-1 tabular-nums" style={{ color: "var(--ink)" }}>
+              <div className="flex items-center justify-between gap-3">
+                <p className="text-[11px] leading-none shrink-0" style={{ color: "var(--ink-3)" }}>用户 ID</p>
+                <p className="text-[13px] font-semibold tabular-nums text-right" style={{ color: "var(--ink)" }}>
                   #{u.id}
                 </p>
               </div>
+              {u.email && (
+                <div className="flex items-center justify-between gap-3">
+                  <p className="text-[11px] leading-none flex items-center gap-1 shrink-0" style={{ color: "var(--ink-3)" }}>
+                    <Mail size={11} /> 邮箱
+                  </p>
+                  <p className="text-[13px] font-semibold truncate text-right" style={{ color: "var(--ink)" }}>
+                    {u.email}
+                  </p>
+                </div>
+              )}
             </div>
           </section>