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

fix: 管理删评对公众剥离作者身份，评论者本人仍可见原文

Browse Source 
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
姜十三
2026-09-17 04:44:37 +08:00
parent 4b93739468
commit c9d27b2b0c
10 changed files with 405 additions and 174 deletions
Download Patch File Download Diff File Expand all files Collapse all files

135
frontend/components/CommentSection.tsx
View File

@@ -75,30 +75,18 @@ function findComment(nodes: CommentNode[], id: number): CommentNode | null {
return null;
}
/** 马赛克头像：保留轮廓，不可辨认 */
function MosaicAvatar({
name,
src,
size,
}: {
name: string;
src?: string;
size: number;
}) {
/** 匿名马赛克头像：不含真实 src / 姓名，避免进 DOM */
function MosaicAvatar({ size }: { size: number }) {
return (
<span className="cmt-mosaic-avatar" style={{ width: size, height: size }} aria-hidden>
<Avatar name={name || "用户"} src={src || undefined} size={size} />
<span className="cmt-mosaic-avatar-fill" />
</span>
);
}
/** 马赛克昵称 */
function MosaicName({ text, className = "" }: { text: string; className?: string }) {
return (
<span className={`cmt-mosaic-name ${className}`} style={{ color: "var(--ink-2)" }} aria-hidden>
{text || "用户"}
</span>
);
/** 匿名马赛克昵称条：固定宽度，不含真实文本 */
function MosaicName() {
return <span className="cmt-mosaic-name" aria-hidden />;
}
export default function CommentSection({
@@ -205,7 +193,9 @@ export default function CommentSection({
const deleteTarget = deleteTargetId != null ? findComment(comments, deleteTargetId) : null;
const deleteMode: "self" | "staff" =
deleteTarget && user && user.id === deleteTarget.user_id ? "self" : "staff";
deleteTarget && user && user.id === (deleteTarget.user?.id ?? deleteTarget.user_id)
? "self"
: "staff";
const purgeTarget = purgeTargetId != null ? findComment(comments, purgeTargetId) : null;
const purgeReplyCount = purgeTarget ? countReplies(purgeTarget) : 0;
@@ -333,7 +323,7 @@ export default function CommentSection({
const canRestore = (comment: CommentNode) => {
if (!comment.deleted || !user) return false;
if (canModerateBoard(user, boardId)) return true;
return user.id === comment.user_id && !comment.staff_deleted;
return user.id === (comment.user?.id ?? comment.user_id) && !comment.staff_deleted;
};
const canApprove = (comment: CommentNode) =>
@@ -351,7 +341,7 @@ export default function CommentSection({
const openReply = (c: CommentNode) => {
setEditingId(null);
setReplyTarget({ id: c.id, nickname: c.user.nickname || c.user.username });
setReplyTarget({ id: c.id, nickname: c.user?.nickname || c.user?.username || "用户" });
setReplyContent("");
};
@@ -490,16 +480,19 @@ export default function CommentSection({
const replyCount = countReplies(node);
const isFloor = depth === 0;
const isExpanded = isFloor ? expandedFloors.has(c.id) : true;
const parentAuthor = parent?.user?.nickname || parent?.user?.username;
const parentAuthor = parent?.user
? parent.user.nickname || parent.user.username
: parent?.deleted
? "已删除"
: undefined;
// 软删占位：自删不打码；管理删打码 + 管理员主页链接；版主可见原文
// 软删占位：自删不打码；管理删对公众匿名马赛克（身份以 API 是否返回 user 为准）
if (c.deleted) {
const displayName = c.user?.nickname || c.user?.username || "用户";
const author = c.user;
const displayName = author?.nickname || author?.username || "用户";
const typeLabel = postDeleteTypeLabel(c.delete_type);
const isMod = !!user && canModerateBoard(user, boardId);
const isCommenter = !!user && user.id === c.user_id;
// 管理删：仅普通访客打码；管理员与评论者本人看真实身份
const showMosaic = !!c.staff_deleted && !isMod && !isCommenter;
const showMosaic = !!c.staff_deleted && !author;
const selfReasonForStaff = !c.staff_deleted && !!c.delete_reason && isMod;
const staffPublicMeta = c.staff_deleted && (!!typeLabel || !!c.delete_reason);
const deleter = c.deleted_by_user;
@@ -508,21 +501,23 @@ export default function CommentSection({
: "";
const identity = showMosaic ? (
<MosaicAvatar name={displayName} src={c.user?.avatar} size={isFloor ? 38 : 28} />
) : (
<MosaicAvatar size={isFloor ? 38 : 28} />
) : author ? (
<Link
href={`/u/${c.user_id}`}
href={`/u/${author.id}`}
className={isFloor ? "shrink-0 mt-0.5" : "shrink-0"}
aria-label={displayName}
>
<Avatar name={displayName} src={c.user?.avatar || undefined} size={isFloor ? 38 : 28} />
<Avatar name={displayName} src={author.avatar || undefined} size={isFloor ? 38 : 28} />
</Link>
) : (
<Avatar name={displayName} size={isFloor ? 38 : 28} />
);
const nameRow = showMosaic ? (
<MosaicName text={displayName} className={isFloor ? "text-sm" : "cmt-reply-name"} />
) : (
<Link href={`/u/${c.user_id}`} className="group">
<MosaicName />
) : author ? (
<Link href={`/u/${author.id}`} className="group">
<span
className={`truncate group-hover:text-[var(--accent)] transition-colors ${
isFloor ? "text-sm" : "cmt-reply-name"
@@ -532,6 +527,13 @@ export default function CommentSection({
{displayName}
</span>
</Link>
) : (
<span
className={`truncate ${isFloor ? "text-sm" : "cmt-reply-name"}`}
style={{ color: "var(--ink)" }}
>
{displayName}
</span>
);
const tombstoneBody = (
@@ -565,9 +567,11 @@ export default function CommentSection({
<p className="cmt-tombstone-reason !mt-1">{c.delete_reason}</p>
</div>
) : null}
{isMod && c.content ? (
{c.content ? (
<div className="cmt-tombstone-orig">
<span className="cmt-tombstone-audit-label">原文 · 仅管理可见</span>
<span className="cmt-tombstone-audit-label">
{isMod && user?.id !== author?.id ? "原文 · 仅管理可见" : "原文 · 仅你可见"}
</span>
<div className="mt-1.5">
<MarkdownBodyClient content={c.content} className="prose-content prose-comment" />
</div>
@@ -692,22 +696,33 @@ export default function CommentSection({
);
}
const author = c.user;
const authorName = author?.nickname || author?.username || "用户";
if (!isFloor) {
// 子回复：紧凑行式布局（抖音风格）
const isReplyToReply = depth >= 2;
return (
<div key={c.id} id={`comment-${c.id}`} className="cmt-reply-row scroll-mt-24">
<div className="flex gap-2.5">
<Link href={`/u/${c.user.id}`} className="shrink-0" aria-label={c.user.nickname || c.user.username}>
<Avatar name={c.user.nickname || c.user.username} src={c.user.avatar || undefined} size={28} />
</Link>
{author ? (
<Link href={`/u/${author.id}`} className="shrink-0" aria-label={authorName}>
<Avatar name={authorName} src={author.avatar || undefined} size={28} />
</Link>
) : (
<Avatar name={authorName} size={28} />
)}
<div className="flex-1 min-w-0">
<div className="flex items-center gap-1.5 flex-wrap">
<Link href={`/u/${c.user.id}`} className="group shrink-0">
<span className="cmt-reply-name group-hover:text-[var(--accent)] transition-colors">
{c.user.nickname || c.user.username}
</span>
</Link>
{author ? (
<Link href={`/u/${author.id}`} className="group shrink-0">
<span className="cmt-reply-name group-hover:text-[var(--accent)] transition-colors">
{authorName}
</span>
</Link>
) : (
<span className="cmt-reply-name">{authorName}</span>
)}
{c.status === "pending" && <span className="badge-pending shrink-0 !text-[10px] !py-0.5 !px-1.5">待审</span>}
{acceptedCommentId === c.id && (
<span className="badge-accepted shrink-0 !text-[10px] !py-0.5 !px-1.5">已采纳</span>
@@ -734,7 +749,7 @@ export default function CommentSection({
className={`cmt-reply-btn transition-colors ${
replyTarget?.id === c.id ? "!text-[var(--accent)]" : ""
}`}
aria-label={`回复 ${c.user.nickname || c.user.username}`}
aria-label={`回复 ${authorName}`}
data-tip="回复"
>
回复
@@ -745,7 +760,7 @@ export default function CommentSection({
type="button"
className="cmt-reply-btn !text-[var(--accent)]"
disabled={acceptingId === c.id}
onClick={() => void handleAccept(c.id, c.user.id)}
onClick={() => author && void handleAccept(c.id, author.id)}
data-tip={acceptMode === "question" ? "采纳为最佳答案" : "采纳并发放悬赏积分"}
>
{acceptingId === c.id ? "采纳中…" : acceptMode === "question" ? "采纳答案" : "采纳"}
@@ -848,16 +863,26 @@ export default function CommentSection({
style={{ borderColor: "var(--line)" }}
>
<div className="flex gap-3">
<Link href={`/u/${c.user.id}`} className="shrink-0 mt-0.5" aria-label={c.user.nickname || c.user.username}>
<Avatar name={c.user.nickname || c.user.username} src={c.user.avatar || undefined} size={38} />
</Link>
{author ? (
<Link href={`/u/${author.id}`} className="shrink-0 mt-0.5" aria-label={authorName}>
<Avatar name={authorName} src={author.avatar || undefined} size={38} />
</Link>
) : (
<Avatar name={authorName} size={38} className="mt-0.5" />
)}
<div className="flex-1 min-w-0">
<div className="flex items-center gap-2.5 mb-1.5 flex-wrap">
<Link href={`/u/${c.user.id}`} className="group">
<span className="truncate group-hover:text-[var(--accent)] transition-colors text-sm" style={{ color: "var(--ink)" }}>
{c.user.nickname || c.user.username}
{author ? (
<Link href={`/u/${author.id}`} className="group">
<span className="truncate group-hover:text-[var(--accent)] transition-colors text-sm" style={{ color: "var(--ink)" }}>
{authorName}
</span>
</Link>
) : (
<span className="truncate text-sm" style={{ color: "var(--ink)" }}>
{authorName}
</span>
</Link>
)}
{c.status === "pending" && <span className="badge-pending shrink-0">待审</span>}
{acceptedCommentId === c.id && (
<span className="badge-accepted shrink-0">已采纳</span>
@@ -882,7 +907,7 @@ export default function CommentSection({
className={`cmt-reply-btn transition-colors ${
replyTarget?.id === c.id ? "!text-[var(--accent)]" : ""
}`}
aria-label={`回复 ${c.user.nickname || c.user.username}`}
aria-label={`回复 ${authorName}`}
data-tip="回复"
>
回复
@@ -893,7 +918,7 @@ export default function CommentSection({
type="button"
className="cmt-reply-btn !text-[var(--accent)]"
disabled={acceptingId === c.id}
onClick={() => void handleAccept(c.id, c.user.id)}
onClick={() => author && void handleAccept(c.id, author.id)}
data-tip={acceptMode === "question" ? "采纳为最佳答案" : "采纳并发放悬赏积分"}
>
{acceptingId === c.id ? "采纳中…" : acceptMode === "question" ? "采纳答案" : "采纳"}