freefire/jiang13-bbs
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 9 Wiki Activity

feat: 帖子收藏与用户关注

Browse Source 
- 新增收藏功能：favorite 服务与 handler、FavoriteButton 组件
- 新增关注功能：follow 服务与 handler、FollowButton 组件
- 用户主页适配关注/粉丝与收藏展示
- flash 消息工具、广告与侧边栏组件微调
This commit is contained in:
姜十三
2026-09-26 03:02:40 +08:00
parent 31f5360c26
commit d7c6b3a961
40 changed files with 1528 additions and 268 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/app/admin/content/ContentAdmin.tsx
View File

@@ -689,7 +689,7 @@ export default function ContentAdmin({
c.post_title
) : (
<Link
href={`/post/${c.post_id}`}
href={`/post/${c.post_id}#comment-${c.id}`}
className="hover:underline"
style={{ color: "var(--accent)" }}
>

11
frontend/app/admin/users/UsersAdmin.tsx
View File

@@ -3,6 +3,7 @@
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import { useRouter } from "next/navigation";
import Link from "next/link";
import { boardColor } from "@/components/BoardIcon";
import {
ArrowUpDown,
ChevronDown,
@@ -352,6 +353,12 @@ export default function UsersAdmin({
return m;
}, [boards]);
const boardColorMap = useMemo(() => {
const m = new Map<number, number>();
boards.forEach((b) => m.set(b.id, boardColor(b)));
return m;
}, [boards]);
useEffect(() => {
apiListBoards()
.then((r) => setBoards(r.boards ?? []))
@@ -755,7 +762,7 @@ export default function UsersAdmin({
case "role":
return (
<div className="min-w-0">
<RoleBadge role={u.role} boardIds={u.board_ids} boardNames={boardNameMap} truncate />
<RoleBadge role={u.role} boardIds={u.board_ids} boardNames={boardNameMap} boardColors={boardColorMap} truncate />
</div>
);
case "status":
@@ -945,7 +952,7 @@ export default function UsersAdmin({
{u.nickname}
</span>
{u.role !== ROLES.USER && (
<RoleBadge role={u.role} boardIds={u.board_ids} boardNames={boardNameMap} />
<RoleBadge role={u.role} boardIds={u.board_ids} boardNames={boardNameMap} boardColors={boardColorMap} />
)}
{isSelf && (
<span

2
frontend/app/admin/users/[id]/UserAuditClient.tsx
View File

@@ -353,7 +353,7 @@ export default function UserAuditClient({
<span className="text-[11.5px] meta">帖子 #{c.post_id}</span>
) : (
<Link
href={`/post/${c.post_id}`}
href={`/post/${c.post_id}#comment-${c.id}`}
className="text-[11.5px] hover:underline"
style={{ color: "var(--accent)" }}
>

33
frontend/app/globals.css
View File

@@ -364,7 +364,7 @@ html[data-lv-fx="off"] .lv-text {
line-height: 1.4;
letter-spacing: 0.01em;
pointer-events: none;
white-space: normal;
white-space: pre-line;
overflow-wrap: anywhere;
color: var(--accent);
background: color-mix(in srgb, var(--accent) 10%, var(--panel));
@@ -7252,6 +7252,27 @@ a.j13-mention-token:hover {
transform: none;
}
/* 自助推广：购买广告位胶囊按钮 */
.j13-ad-buy-btn {
display: inline-flex;
align-items: center;
padding: 2px 11px;
border-radius: 999px;
font-size: 12px;
font-weight: 500;
line-height: 1.5;
white-space: nowrap;
color: var(--accent);
background: color-mix(in srgb, var(--accent-soft) 70%, var(--panel));
border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--line));
transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.j13-ad-buy-btn:hover {
background: var(--accent);
color: var(--accent-on);
border-color: var(--accent);
}
/* 自助推广侧栏占位：空槽可点去购买 */
.j13-ad-slot {
display: flex;
@@ -9112,6 +9133,16 @@ html.j13-reduce-chrome .j13-att-card.is-fresh {
}
.j13-fade-up { animation: j13-fade-up 0.2s ease-out both; }
/* 深链/目录跳转落点高亮：先铺主题色浅底再渐隐（lib/flash.ts 挂载，超时自动摘除） */
@keyframes j13-flash-fade {
from { background-color: var(--accent-soft); }
to { background-color: transparent; }
}
.j13-flash-target {
animation: j13-flash-fade 1.8s ease-out both;
border-radius: 10px;
}
/* 跳到主内容 */
.skip-link {
position: fixed;

17
frontend/app/notifications/NotificationsClient.tsx
View File

@@ -3,7 +3,7 @@
import { useState } from "react";
import { useRouter } from "next/navigation";
import Link from "next/link";
import { Heart, MessageCircle, CheckCheck, Bell, CheckCircle2, XCircle, AtSign, ClipboardList, Award, AlertTriangle } from "lucide-react";
import { Heart, MessageCircle, CheckCheck, Bell, CheckCircle2, XCircle, AtSign, ClipboardList, Award, AlertTriangle, UserPlus } from "lucide-react";
import { apiMarkRead, apiMarkAllRead, type NotificationsResponse, type NotificationItem } from "@/lib/api";
/**
@@ -20,13 +20,18 @@ export default function NotificationsClient({ initialData }: { initialData: Noti
list.map((item) => (item.id === n.id ? { ...item, is_read: true } : item))
);
}
// @提及通知跳到群聊房间；徽章通知无关联帖子（仅标已读）；其余跳到帖子/评论
// @提及通知跳到群聊房间；徽章通知无关联帖子（仅标已读）；关注通知跳到关注者主页；其余跳到帖子/评论
if (n.type === "mention" && n.room_id) {
router.push(`/chat/${n.room_id}`);
} else if (n.type === "pending_review") {
router.push(n.post_id ? `/post/${n.post_id}` : "/admin/content?status=pending");
} else if (n.type === "badge") {
return;
} else if (n.type === "follow") {
router.push(`/u/${n.actor_id}`);
} else if (n.comment_id > 0) {
// 评论/回复/点赞等：直达评论所在楼层（跨页由帖子页深链定位换页）
router.push(`/post/${n.post_id}#comment-${n.comment_id}`);
} else {
router.push(`/post/${n.post_id}`);
}
@@ -92,7 +97,9 @@ export default function NotificationsClient({ initialData }: { initialData: Noti
? <ClipboardList size={16} />
: n.type === "badge"
? <Award size={16} />
: <MessageCircle size={16} />;
: n.type === "follow"
? <UserPlus size={16} />
: <MessageCircle size={16} />;
const iconColor = n.type === "approved"
? "var(--ok)"
: n.type === "rejected" || n.type === "deleted" || n.type === "necro_reply"
@@ -162,7 +169,9 @@ export default function NotificationsClient({ initialData }: { initialData: Noti
: n.type === "deleted"
? "删除了你的帖子"
: n.type === "badge"
? "向你颁布了徽章"
? "向你颁布了徽章"
: n.type === "follow"
? "关注了你"
: "点赞了你的帖子"}
</span>
</>

10
frontend/app/points/PointsClient.tsx
View File

@@ -1,8 +1,6 @@
"use client";
import { useCallback, useEffect, useState } from "react";
import Link from "next/link";
import { ChevronRight } from "lucide-react";
import {
apiGetPoints,
apiGetPointsLedger,
@@ -42,14 +40,6 @@ export default function PointsClient() {
return (
<div className="max-w-3xl mx-auto">
<nav className="meta -mt-4 sm:-mt-6 mb-1.5 flex items-center gap-1 text-[12.5px] leading-none">
<Link href="/" className="hover:text-[var(--accent)] transition-colors">
首页
</Link>
<ChevronRight size={13} />
<span style={{ color: "var(--ink-2)" }}>我的积分</span>
</nav>
<section className="panel p-6 sm:p-8 mb-5">
<p className="meta text-[13px]">可用余额</p>
<p

56
frontend/app/post/[id]/page.tsx
View File

@@ -24,16 +24,18 @@ import {
import { defaultSidebarConfig, sidebarScopeLists } from "@/lib/sidebarMeta";
import SidebarRenderer, { type SidebarBlockProps } from "@/components/sidebar/SidebarRenderer";
import { postViewerCookieHeader } from "@/lib/cookies";
import { getMeCached, getPublicSettingsCached } from "@/lib/serverData";
import { getMeCached, getPublicSettingsCached, getBoardsCached } from "@/lib/serverData";
import CommentSection from "@/components/CommentSection";
import PostActions from "@/components/PostActions";
import LikeButton from "@/components/LikeButton";
import FavoriteButton from "@/components/FavoriteButton";
import { SiteDocBreadcrumb } from "@/components/site-doc";
import MobilePostBar from "@/components/MobilePostBar";
import Avatar from "@/components/Avatar";
import RoleBadge from "@/components/RoleBadge";
import LevelBadge from "@/components/LevelBadge";
import BadgeChip from "@/components/BadgeChip";
import { boardColor } from "@/components/BoardIcon";
import MarkdownBody from "@/components/MarkdownBody";
import { publicMarkdownForSeo } from "@/lib/hideBlocks";
import PostAttachments from "@/components/PostAttachments";
@@ -160,9 +162,14 @@ function RelatedPosts({
function AuthorCardStacked({
profile,
allowComments,
boardNames,
boardColors,
}: {
profile: UserProfile;
allowComments: boolean;
/** 板块 id → 名称/配色：板块管理员徽章展示「{板块名}板块管理员」并对齐板块色 */
boardNames?: Record<number, string>;
boardColors?: Record<number, number>;
}) {
const u = profile.user;
const signature = (u.signature || "").trim();
@@ -192,7 +199,9 @@ function AuthorCardStacked({
{(u.badges ?? []).slice(0, 2).map((ub) => (
<BadgeChip key={ub.id} badge={ub.badge} />
))}
{u.role !== "user" && <RoleBadge role={u.role} boardIds={u.board_ids} />}
{u.role !== "user" && (
<RoleBadge role={u.role} boardIds={u.board_ids} boardNames={boardNames} boardColors={boardColors} />
)}
</div>
<p className="meta mt-1 flex items-center gap-1.5 flex-wrap">
<span>@{u.username}</span>
@@ -307,13 +316,22 @@ export default async function PostDetailPage({ params, searchParams }: PageProps
};
const meFirst = await getMeCached(cookie || undefined);
const canFetchComments = allowComments && (!commentsRequireLogin || !!meFirst.user);
const [commentsData, profile, relatedData, sidebarData] = await Promise.all([
const [commentsData, profile, relatedData, sidebarData, boardsData] = await Promise.all([
canFetchComments ? fetchComments(id, commentPage, cookie) : Promise.resolve(emptyComments),
fetchUserProfile(String(post.user.id), 1, cookie).catch(() => null),
fetchPosts(1, 8, post.board_id, "recommended", "", false, cookie).catch(() => null),
// 侧栏布局配置失败不阻塞页面，回落默认布局
fetchSidebar(cookie).catch(() => null),
// 板块名/配色：板块管理员徽章展示「{板块名}板块管理员」并对齐板块色
getBoardsCached().catch(() => null),
]);
// 板块 id → 名称 / 配色下标（与板块列表、头像底色同一套 av-N 色板）
const boardNames: Record<number, string> = {};
const boardColors: Record<number, number> = {};
for (const b of boardsData?.boards ?? []) {
boardNames[b.id] = b.name;
boardColors[b.id] = boardColor(b);
}
const sidebar = sidebarData ?? { config: defaultSidebarConfig(), widgets: [] };
const me = meFirst;
const comments = commentsData.comments;
@@ -336,6 +354,8 @@ export default async function PostDetailPage({ params, searchParams }: PageProps
authorProfile: profile ?? undefined,
authorPosts,
toc,
boardNames,
boardColors,
};
// 三档网格退化：双栏 / 仅左 / 仅右 / 单栏
const railGridClass = !hasLeftRail && !hasRightRail
@@ -462,6 +482,7 @@ export default async function PostDetailPage({ params, searchParams }: PageProps
postId={id}
liked={post.liked}
likeCount={post.like_count}
favorited={post.favorited === true}
allowComments={allowComments}
/>
@@ -550,6 +571,23 @@ export default async function PostDetailPage({ params, searchParams }: PageProps
>
{post.user.nickname}
</Link>
{/* 等级 + 管理员颁布徽章 + 站点角色徽章收拢为一组（详情接口已 Preload，随 post.user 返回） */}
<div className="flex items-center gap-1.5 flex-wrap min-w-0">
<LevelBadge level={post.user.level} className="shrink-0" />
{(post.user.badges ?? []).slice(0, 2).map((ub) => (
<BadgeChip key={ub.id} badge={ub.badge} className="shrink-0" />
))}
{post.user.role !== "user" && (
<RoleBadge
role={post.user.role}
// board_ids 仅 /api/profile 返回；profile 拉取失败回落纯角色徽章
boardIds={profile?.user.board_ids}
boardNames={boardNames}
boardColors={boardColors}
className="shrink-0"
/>
)}
</div>
</div>
{/* 管理操作已收进单个下拉按钮；普通读者此处不渲染内容 */}
<PostActions
@@ -650,9 +688,9 @@ export default async function PostDetailPage({ params, searchParams }: PageProps
<QuestionStatusCard postId={post.id} state={questionState} />
) : null}
{/* 文末点赞：分隔线后居中，唯一的点赞入口（作者行不再放置） */}
{/* 文末点赞/收藏：分隔线后居中，唯一的互动入口（作者行不再放置） */}
<div
className="mt-9 pt-7 flex justify-center"
className="mt-9 pt-7 flex justify-center gap-3"
style={{ borderTop: "1px solid var(--line)" }}
>
<LikeButton
@@ -661,13 +699,19 @@ export default async function PostDetailPage({ params, searchParams }: PageProps
likeCount={post.like_count}
variant="article"
/>
<FavoriteButton postId={id} favorited={post.favorited === true} variant="article" />
</div>
</div>
{/* 窄屏作者卡（lg 起由左栏承载，避免重复展示） */}
{profile && (
<div className="lg:hidden mt-6">
<AuthorCardStacked profile={profile} allowComments={allowComments} />
<AuthorCardStacked
profile={profile}
allowComments={allowComments}
boardNames={boardNames}
boardColors={boardColors}
/>
</div>
)}

400
frontend/app/u/[id]/UserProfileContent.tsx
View File

@@ -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>
);

175
frontend/app/u/[id]/page.tsx
View File

@@ -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>