feat: 帖子收藏与用户关注

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

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>