1186 lines
42 KiB
TypeScript
1186 lines
42 KiB
TypeScript
"use client";
|
||
|
||
import { useEffect, useState } from "react";
|
||
import { useRouter } from "next/navigation";
|
||
import Link from "next/link";
|
||
import {
|
||
Trash2,
|
||
MessagesSquare,
|
||
ChevronRight,
|
||
ChevronDown,
|
||
BadgeCheck,
|
||
XCircle,
|
||
RotateCcw,
|
||
Pencil,
|
||
History,
|
||
} from "lucide-react";
|
||
import {
|
||
apiCreateComment,
|
||
apiDeleteComment,
|
||
apiRestoreComment,
|
||
apiPurgeComment,
|
||
apiUpdateComment,
|
||
apiAcceptBounty,
|
||
apiAcceptQuestion,
|
||
apiAdminApproveComment,
|
||
apiAdminRejectComment,
|
||
postDeleteTypeLabel,
|
||
type CommentNode,
|
||
type User,
|
||
} from "@/lib/api";
|
||
import { canModerateBoard } from "@/lib/roles";
|
||
import { toast } from "@/lib/toast";
|
||
import { useAllowComments } from "@/components/CommentsPolicyProvider";
|
||
import CommentsUnsupported from "@/components/CommentsUnsupported";
|
||
import Avatar from "./Avatar";
|
||
import Pagination from "./Pagination";
|
||
import MarkdownBodyClient from "@/components/MarkdownBodyClient";
|
||
import MarkdownEditor from "@/components/MarkdownEditor";
|
||
import ConfirmDialog from "@/components/ConfirmDialog";
|
||
import DeleteCommentModal, { type DeleteCommentPayload } from "@/components/DeleteCommentModal";
|
||
import CommentEditHistoryModal from "@/components/CommentEditHistoryModal";
|
||
|
||
interface CommentSectionProps {
|
||
postId: string;
|
||
/** 帖子所属板块：板块管理员仅可管理授权板块的评论 */
|
||
boardId: number;
|
||
/** 楼主 ID：不可采纳楼主自己的评论 */
|
||
authorId: number;
|
||
comments: CommentNode[];
|
||
total: number; // 楼层数（主评论数）→ 分页与楼层号计算
|
||
totalComments: number; // 全部评论数（含回复）→ 头部徽标
|
||
page: number;
|
||
size: number;
|
||
// SSR 直出的登录用户（layout 已取，避免客户端再请求一次 /api/me）
|
||
user: User | null;
|
||
/** 悬赏或问答：可采纳时在评论旁显示采纳按钮（二者按帖子类型二选一） */
|
||
acceptMode?: "bounty" | "question" | null;
|
||
acceptedCommentId?: number;
|
||
/** 抽奖已开奖：中奖楼层评论 ID（每名中奖者仅其最早主评一条） */
|
||
winnerCommentIds?: number[];
|
||
}
|
||
|
||
// 递归统计子树回复数（彻底删除级联提示用）
|
||
function countReplies(node: CommentNode): number {
|
||
return node.replies?.reduce((acc, r) => acc + 1 + countReplies(r), 0) ?? 0;
|
||
}
|
||
|
||
function findComment(nodes: CommentNode[], id: number): CommentNode | null {
|
||
for (const n of nodes) {
|
||
if (n.id === id) return n;
|
||
if (n.replies?.length) {
|
||
const hit = findComment(n.replies, id);
|
||
if (hit) return hit;
|
||
}
|
||
}
|
||
return null;
|
||
}
|
||
|
||
/** 匿名马赛克头像：不含真实 src / 姓名，避免进 DOM */
|
||
function MosaicAvatar({ size }: { size: number }) {
|
||
return (
|
||
<span className="cmt-mosaic-avatar" style={{ width: size, height: size }} aria-hidden>
|
||
<span className="cmt-mosaic-avatar-fill" />
|
||
</span>
|
||
);
|
||
}
|
||
|
||
/** 匿名马赛克昵称条：固定宽度，不含真实文本 */
|
||
function MosaicName() {
|
||
return <span className="cmt-mosaic-name" aria-hidden />;
|
||
}
|
||
|
||
export default function CommentSection({
|
||
postId,
|
||
boardId,
|
||
authorId,
|
||
comments,
|
||
total,
|
||
totalComments,
|
||
page,
|
||
size,
|
||
user,
|
||
acceptMode = null,
|
||
acceptedCommentId = 0,
|
||
winnerCommentIds = [],
|
||
}: CommentSectionProps) {
|
||
const winnerCommentIdSet = new Set(winnerCommentIds.filter((id) => id > 0));
|
||
const router = useRouter();
|
||
const commentsOpen = useAllowComments();
|
||
const [content, setContent] = useState("");
|
||
// 内联回复目标：在该评论下方就地发子评论（同一时间只有一个回复框）
|
||
const [replyTarget, setReplyTarget] = useState<{ id: number; nickname: string } | null>(null);
|
||
const [replyContent, setReplyContent] = useState("");
|
||
const [submitting, setSubmitting] = useState(false);
|
||
const [deleting, setDeleting] = useState(false);
|
||
const [deleteTargetId, setDeleteTargetId] = useState<number | null>(null);
|
||
const [acceptingId, setAcceptingId] = useState<number | null>(null);
|
||
const [approvingId, setApprovingId] = useState<number | null>(null);
|
||
const [rejectTargetId, setRejectTargetId] = useState<number | null>(null);
|
||
const [rejecting, setRejecting] = useState(false);
|
||
const [purgeTargetId, setPurgeTargetId] = useState<number | null>(null);
|
||
const [purging, setPurging] = useState(false);
|
||
const [restoreTargetId, setRestoreTargetId] = useState<number | null>(null);
|
||
const [restoring, setRestoring] = useState(false);
|
||
const [editingId, setEditingId] = useState<number | null>(null);
|
||
const [editContent, setEditContent] = useState("");
|
||
const [savingEdit, setSavingEdit] = useState(false);
|
||
const [historyCommentId, setHistoryCommentId] = useState<number | null>(null);
|
||
// 折叠状态：哪些楼层展开了子回复（默认全部折叠，SSR 初始为收起）
|
||
const [expandedFloors, setExpandedFloors] = useState<Set<number>>(new Set());
|
||
|
||
useEffect(() => {
|
||
if (!commentsOpen) {
|
||
setReplyTarget(null);
|
||
setReplyContent("");
|
||
}
|
||
}, [commentsOpen]);
|
||
|
||
// 登录回跳 / 隐藏块「去回复」：滚到评论框并聚焦
|
||
useEffect(() => {
|
||
if (!user || !commentsOpen) return;
|
||
const focusComposer = () => {
|
||
const hash = window.location.hash;
|
||
if (hash !== "#comment-input" && hash !== "#comments") return;
|
||
const el = document.getElementById("comment-input");
|
||
if (!(el instanceof HTMLTextAreaElement)) return;
|
||
el.scrollIntoView({ behavior: "smooth", block: "center" });
|
||
window.setTimeout(() => el.focus({ preventScroll: true }), 280);
|
||
};
|
||
focusComposer();
|
||
window.addEventListener("hashchange", focusComposer);
|
||
return () => window.removeEventListener("hashchange", focusComposer);
|
||
}, [user, commentsOpen]);
|
||
|
||
const submitFloor = async () => {
|
||
if (!commentsOpen || !content.trim() || submitting) return;
|
||
setSubmitting(true);
|
||
try {
|
||
const res = await apiCreateComment(postId, content);
|
||
if (res.comment) {
|
||
setContent("");
|
||
if (res.comment.status === "pending") {
|
||
toast("已提交，等待审核通过后公开");
|
||
router.refresh();
|
||
} else {
|
||
// 新楼层在最后一页：刷新后由服务端直出最新分页
|
||
router.refresh();
|
||
}
|
||
} else if (res.error === "未登录") {
|
||
router.push(`/login?redirect=${encodeURIComponent(`/post/${postId}`)}`);
|
||
} else {
|
||
toast(res.error || "评论失败");
|
||
}
|
||
} catch {
|
||
toast("网络错误，评论失败");
|
||
} finally {
|
||
setSubmitting(false);
|
||
}
|
||
};
|
||
|
||
const handleSubmit = (e: React.FormEvent) => {
|
||
e.preventDefault();
|
||
void submitFloor();
|
||
};
|
||
|
||
const submitReply = async () => {
|
||
if (!commentsOpen || !replyTarget || !replyContent.trim() || submitting) return;
|
||
setSubmitting(true);
|
||
try {
|
||
const res = await apiCreateComment(postId, replyContent, replyTarget.id);
|
||
if (res.comment) {
|
||
setReplyTarget(null);
|
||
setReplyContent("");
|
||
if (res.comment.status === "pending") {
|
||
toast("已提交，等待审核通过后公开");
|
||
router.refresh();
|
||
} else {
|
||
// 刷新后由 SSR 直出新树（子评论全量挂在本楼）
|
||
router.refresh();
|
||
}
|
||
} else if (res.error === "未登录") {
|
||
router.push(`/login?redirect=${encodeURIComponent(`/post/${postId}`)}`);
|
||
} else {
|
||
toast(res.error || "回复失败");
|
||
}
|
||
} catch {
|
||
toast("网络错误，回复失败");
|
||
} finally {
|
||
setSubmitting(false);
|
||
}
|
||
};
|
||
|
||
const handleSubmitReply = (e: React.FormEvent) => {
|
||
e.preventDefault();
|
||
void submitReply();
|
||
};
|
||
|
||
const deleteTarget = deleteTargetId != null ? findComment(comments, deleteTargetId) : null;
|
||
const deleteMode: "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;
|
||
|
||
const handleDeleteConfirm = async (opts: DeleteCommentPayload) => {
|
||
if (deleteTargetId == null) return;
|
||
setDeleting(true);
|
||
try {
|
||
const res = await apiDeleteComment(postId, deleteTargetId, opts);
|
||
if (res.message) {
|
||
toast(deleteMode === "self" ? "已删除评论" : "已删除该评论", "ok");
|
||
setDeleteTargetId(null);
|
||
router.refresh();
|
||
} else {
|
||
toast(res.error || "删除失败");
|
||
}
|
||
} catch {
|
||
toast("网络错误，删除失败");
|
||
} finally {
|
||
setDeleting(false);
|
||
}
|
||
};
|
||
|
||
const handleAccept = async (commentId: number, commentAuthorId: number) => {
|
||
if (!acceptMode || !user || commentAuthorId === authorId) return;
|
||
setAcceptingId(commentId);
|
||
try {
|
||
const res =
|
||
acceptMode === "question"
|
||
? await apiAcceptQuestion(postId, commentId)
|
||
: await apiAcceptBounty(postId, commentId);
|
||
if (res.post) {
|
||
toast(acceptMode === "question" ? "已采纳为最佳答案" : "已采纳并发放悬赏", "ok");
|
||
router.refresh();
|
||
} else {
|
||
toast(res.error || "采纳失败");
|
||
}
|
||
} catch {
|
||
toast("网络错误，采纳失败");
|
||
} finally {
|
||
setAcceptingId(null);
|
||
}
|
||
};
|
||
|
||
const handleApprove = async (commentId: number) => {
|
||
setApprovingId(commentId);
|
||
try {
|
||
await apiAdminApproveComment(commentId);
|
||
toast("已通过评审", "ok");
|
||
router.refresh();
|
||
} catch (e) {
|
||
toast(e instanceof Error ? e.message : "通过评审失败");
|
||
} finally {
|
||
setApprovingId(null);
|
||
}
|
||
};
|
||
|
||
const handleRejectConfirm = async () => {
|
||
if (rejectTargetId == null) return;
|
||
setRejecting(true);
|
||
try {
|
||
await apiAdminRejectComment(rejectTargetId);
|
||
toast("已拒绝该评论", "ok");
|
||
setRejectTargetId(null);
|
||
router.refresh();
|
||
} catch (e) {
|
||
toast(e instanceof Error ? e.message : "拒绝失败");
|
||
} finally {
|
||
setRejecting(false);
|
||
}
|
||
};
|
||
|
||
const handlePurgeConfirm = async () => {
|
||
if (purgeTargetId == null) return;
|
||
setPurging(true);
|
||
try {
|
||
const res = await apiPurgeComment(postId, purgeTargetId);
|
||
if (res.message) {
|
||
toast("已彻底删除", "ok");
|
||
setPurgeTargetId(null);
|
||
router.refresh();
|
||
} else {
|
||
toast(res.error || "彻底删除失败");
|
||
}
|
||
} catch (e) {
|
||
toast(e instanceof Error ? e.message : "彻底删除失败");
|
||
} finally {
|
||
setPurging(false);
|
||
}
|
||
};
|
||
|
||
const handleRestoreConfirm = async () => {
|
||
if (restoreTargetId == null) return;
|
||
setRestoring(true);
|
||
try {
|
||
const res = await apiRestoreComment(postId, restoreTargetId);
|
||
if (res.message) {
|
||
toast("评论已恢复", "ok");
|
||
setRestoreTargetId(null);
|
||
router.refresh();
|
||
} else {
|
||
toast(res.error || "恢复失败");
|
||
}
|
||
} catch (e) {
|
||
toast(e instanceof Error ? e.message : "恢复失败");
|
||
} finally {
|
||
setRestoring(false);
|
||
}
|
||
};
|
||
|
||
// 引用功能已移除：与"回复"功能重叠，且会割裂讨论上下文（抖音风格无此功能）
|
||
|
||
const canSoftDelete = (comment: CommentNode) =>
|
||
!comment.deleted &&
|
||
!!user &&
|
||
(user.id === comment.user?.id || canModerateBoard(user, boardId));
|
||
|
||
const canEdit = (comment: CommentNode) => canSoftDelete(comment);
|
||
|
||
const canViewHistory = !!user && canModerateBoard(user, boardId);
|
||
|
||
const canPurge = (comment: CommentNode) =>
|
||
!!user && canModerateBoard(user, boardId);
|
||
|
||
/** 作者可恢复自删；版主可恢复本板任意软删（含管理删除） */
|
||
const canRestore = (comment: CommentNode) => {
|
||
if (!comment.deleted || !user) return false;
|
||
if (canModerateBoard(user, boardId)) return true;
|
||
return user.id === (comment.user?.id ?? comment.user_id) && !comment.staff_deleted;
|
||
};
|
||
|
||
const canApprove = (comment: CommentNode) =>
|
||
!comment.deleted &&
|
||
!!user &&
|
||
comment.status === "pending" &&
|
||
canModerateBoard(user, boardId);
|
||
|
||
const canAccept = (comment: CommentNode) =>
|
||
!comment.deleted &&
|
||
!!acceptMode &&
|
||
!!user &&
|
||
comment.status === "published" &&
|
||
comment.user?.id !== authorId;
|
||
|
||
const openReply = (c: CommentNode) => {
|
||
setEditingId(null);
|
||
setReplyTarget({ id: c.id, nickname: c.user?.nickname || c.user?.username || "用户" });
|
||
setReplyContent("");
|
||
};
|
||
|
||
const startEdit = (c: CommentNode) => {
|
||
setReplyTarget(null);
|
||
setEditingId(c.id);
|
||
setEditContent(c.content);
|
||
};
|
||
|
||
const cancelEdit = () => {
|
||
setEditingId(null);
|
||
setEditContent("");
|
||
};
|
||
|
||
const handleSaveEdit = async () => {
|
||
if (editingId == null || !editContent.trim() || savingEdit) return;
|
||
setSavingEdit(true);
|
||
try {
|
||
const res = await apiUpdateComment(postId, editingId, editContent);
|
||
if (res.error) {
|
||
toast(res.error);
|
||
return;
|
||
}
|
||
toast("评论已更新", "ok");
|
||
cancelEdit();
|
||
router.refresh();
|
||
} catch (e) {
|
||
toast(e instanceof Error ? e.message : "更新失败");
|
||
} finally {
|
||
setSavingEdit(false);
|
||
}
|
||
};
|
||
|
||
const renderContentOrEditor = (c: CommentNode) => {
|
||
if (editingId === c.id) {
|
||
return (
|
||
<div className="cmt-md-editor mt-1">
|
||
<MarkdownEditor
|
||
value={editContent}
|
||
onChange={setEditContent}
|
||
rows={5}
|
||
disabled={savingEdit}
|
||
autoFocus
|
||
allowHide={false}
|
||
placeholder="编辑评论…"
|
||
onSubmitShortcut={() => {
|
||
void handleSaveEdit();
|
||
}}
|
||
/>
|
||
<div className="flex gap-2 mt-2">
|
||
<button
|
||
type="button"
|
||
className="btn btn-primary btn-sm"
|
||
disabled={savingEdit || !editContent.trim()}
|
||
onClick={() => void handleSaveEdit()}
|
||
>
|
||
{savingEdit ? "保存中…" : "保存"}
|
||
</button>
|
||
<button
|
||
type="button"
|
||
className="btn btn-line btn-sm"
|
||
disabled={savingEdit}
|
||
onClick={cancelEdit}
|
||
>
|
||
取消
|
||
</button>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
return <MarkdownBodyClient content={c.content} className="prose-content prose-comment" />;
|
||
};
|
||
|
||
const timeMeta = (c: CommentNode) => (
|
||
<span className="meta text-[11.5px] inline-flex items-center gap-1.5 flex-wrap">
|
||
<time dateTime={c.created_at}>{new Date(c.created_at).toLocaleString("zh-CN")}</time>
|
||
{c.edited && <span title="此评论曾被编辑">已编辑</span>}
|
||
</span>
|
||
);
|
||
|
||
// 切换某楼层子回复的展开/折叠
|
||
const toggleFloor = (floorId: number) => {
|
||
setExpandedFloors((prev) => {
|
||
const next = new Set(prev);
|
||
if (next.has(floorId)) next.delete(floorId);
|
||
else next.add(floorId);
|
||
return next;
|
||
});
|
||
};
|
||
|
||
const totalPages = Math.max(1, Math.ceil(total / size));
|
||
|
||
// 内联回复表单（出现在目标评论正下方；全站关评时不渲染）
|
||
const inlineReplyForm = commentsOpen && replyTarget && (
|
||
<form onSubmit={handleSubmitReply} className="cmt-reply-form mt-3">
|
||
<div className="text-[12px] mb-2" style={{ color: "var(--ink-3)" }}>
|
||
回复 <span style={{ color: "var(--accent)" }}>@{replyTarget.nickname}</span>
|
||
</div>
|
||
<div className="cmt-md-editor">
|
||
<MarkdownEditor
|
||
value={replyContent}
|
||
onChange={setReplyContent}
|
||
rows={4}
|
||
disabled={submitting}
|
||
autoFocus
|
||
allowHide={false}
|
||
placeholder={`友善回复 @${replyTarget.nickname}…`}
|
||
onSubmitShortcut={() => {
|
||
void submitReply();
|
||
}}
|
||
/>
|
||
</div>
|
||
<div className="flex items-center justify-end gap-2 mt-2">
|
||
<button
|
||
type="button"
|
||
className="btn btn-line btn-sm"
|
||
onClick={() => {
|
||
setReplyTarget(null);
|
||
setReplyContent("");
|
||
}}
|
||
>
|
||
取消
|
||
</button>
|
||
<button type="submit" disabled={submitting || !replyContent.trim()} className="btn btn-primary btn-sm">
|
||
{submitting ? "发送中..." : "回复"}
|
||
</button>
|
||
</div>
|
||
</form>
|
||
);
|
||
|
||
// 单条评论渲染（递归）：depth 0 = 楼层主评论，>0 = 子回复
|
||
// 主评论下方子回复默认折叠，点击"展开 X 条回复"展开
|
||
// depth=1（回复楼层）不显示指向；depth≥2（回复子评论）显示"回复者 ▶ 被回复者"
|
||
const renderComment = (node: CommentNode, depth: number, floor?: number, parent?: CommentNode) => {
|
||
const c = node;
|
||
const replyCount = countReplies(node);
|
||
const isFloor = depth === 0;
|
||
const isExpanded = isFloor ? expandedFloors.has(c.id) : true;
|
||
const parentAuthor = parent?.user
|
||
? parent.user.nickname || parent.user.username
|
||
: parent?.deleted
|
||
? "已删除"
|
||
: undefined;
|
||
|
||
// 软删占位：自删不打码；管理删对公众匿名马赛克（身份以 API 是否返回 user 为准）
|
||
if (c.deleted) {
|
||
const author = c.user;
|
||
const displayName = author?.nickname || author?.username || "用户";
|
||
const typeLabel = postDeleteTypeLabel(c.delete_type);
|
||
const isMod = !!user && canModerateBoard(user, boardId);
|
||
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;
|
||
const deleterName = deleter
|
||
? deleter.nickname || deleter.username || "管理员"
|
||
: "";
|
||
|
||
const identity = showMosaic ? (
|
||
<MosaicAvatar size={isFloor ? 38 : 28} />
|
||
) : author ? (
|
||
<Link
|
||
href={`/u/${author.id}`}
|
||
className={isFloor ? "shrink-0 mt-0.5" : "shrink-0"}
|
||
aria-label={displayName}
|
||
>
|
||
<Avatar name={displayName} src={author.avatar || undefined} size={isFloor ? 38 : 28} />
|
||
</Link>
|
||
) : (
|
||
<Avatar name={displayName} size={isFloor ? 38 : 28} />
|
||
);
|
||
|
||
const nameRow = showMosaic ? (
|
||
<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"
|
||
}`}
|
||
style={{ color: "var(--ink)" }}
|
||
>
|
||
{displayName}
|
||
</span>
|
||
</Link>
|
||
) : (
|
||
<span
|
||
className={`truncate ${isFloor ? "text-sm" : "cmt-reply-name"}`}
|
||
style={{ color: "var(--ink)" }}
|
||
>
|
||
{displayName}
|
||
</span>
|
||
);
|
||
|
||
const tombstoneBody = (
|
||
<div className="cmt-tombstone">
|
||
<p className="cmt-tombstone-title">
|
||
{c.staff_deleted ? "管理员已删除此评论" : "评论者已删除此评论"}
|
||
</p>
|
||
{staffPublicMeta ? (
|
||
<p className="cmt-tombstone-reason">
|
||
{typeLabel ? (
|
||
<>
|
||
<span style={{ color: "var(--ink-2)", fontWeight: 600 }}>{typeLabel}</span>
|
||
{c.delete_reason ? " · " : null}
|
||
</>
|
||
) : null}
|
||
{c.delete_reason || null}
|
||
</p>
|
||
) : null}
|
||
{c.staff_deleted && deleter ? (
|
||
<div className="cmt-tombstone-mod">
|
||
<span>处理人</span>
|
||
<Link href={`/u/${deleter.id}`} aria-label={`查看管理员 ${deleterName}`}>
|
||
<Avatar name={deleterName} src={deleter.avatar || undefined} size={20} />
|
||
{deleterName}
|
||
</Link>
|
||
</div>
|
||
) : null}
|
||
{selfReasonForStaff ? (
|
||
<div className="cmt-tombstone-audit">
|
||
<span className="cmt-tombstone-audit-label">自删理由 · 仅管理可见</span>
|
||
<p className="cmt-tombstone-reason !mt-1">{c.delete_reason}</p>
|
||
</div>
|
||
) : null}
|
||
{c.content ? (
|
||
<div className="cmt-tombstone-orig">
|
||
<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>
|
||
</div>
|
||
) : null}
|
||
{c.staff_deleted ? (
|
||
<span className="cmt-tombstone-tag">管理删除</span>
|
||
) : (
|
||
<span className="cmt-tombstone-tag cmt-tombstone-tag-self">评论者删除</span>
|
||
)}
|
||
</div>
|
||
);
|
||
const purgeBtn = canPurge(c) && (
|
||
<button
|
||
type="button"
|
||
className="cmt-mod-btn cmt-mod-btn-danger"
|
||
disabled={purging || restoring}
|
||
onClick={() => setPurgeTargetId(c.id)}
|
||
>
|
||
清除
|
||
</button>
|
||
);
|
||
const restoreBtn = canRestore(c) && (
|
||
<button
|
||
type="button"
|
||
className="cmt-mod-btn"
|
||
style={{ color: "var(--accent)" }}
|
||
disabled={restoring || purging}
|
||
onClick={() => setRestoreTargetId(c.id)}
|
||
>
|
||
<RotateCcw size={12} />
|
||
恢复
|
||
</button>
|
||
);
|
||
const historyBtn = canViewHistory && (
|
||
<button
|
||
type="button"
|
||
className="cmt-mod-btn"
|
||
onClick={() => setHistoryCommentId(c.id)}
|
||
aria-label="编辑历史"
|
||
>
|
||
<History size={12} />
|
||
历史
|
||
</button>
|
||
);
|
||
const tombstoneActions =
|
||
restoreBtn || purgeBtn || historyBtn ? (
|
||
<div className="cmt-mod-actions">
|
||
{historyBtn}
|
||
{restoreBtn}
|
||
{purgeBtn}
|
||
</div>
|
||
) : null;
|
||
|
||
if (!isFloor) {
|
||
return (
|
||
<div key={c.id} id={`comment-${c.id}`} className="cmt-reply-row scroll-mt-24">
|
||
<div className="flex gap-2.5">
|
||
{identity}
|
||
<div className="flex-1 min-w-0">
|
||
<div className="mb-1">{nameRow}</div>
|
||
{tombstoneBody}
|
||
<div className="flex items-center justify-between gap-3 mt-1.5 flex-wrap">
|
||
{timeMeta(c)}
|
||
{tombstoneActions}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{node.replies && node.replies.length > 0 && (
|
||
<div className="cmt-children">
|
||
{node.replies.map((r) => renderComment(r, depth + 1, undefined, node))}
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<div
|
||
key={c.id}
|
||
id={`comment-${c.id}`}
|
||
className="py-5 border-t first:border-t-0 scroll-mt-24"
|
||
style={{ borderColor: "var(--line)" }}
|
||
>
|
||
<div className="flex gap-3">
|
||
{identity}
|
||
<div className="flex-1 min-w-0">
|
||
<div className="flex items-center gap-2.5 mb-1.5">
|
||
{nameRow}
|
||
{floor && (
|
||
<a href={`#comment-${c.id}`} className="cmt-floor-label" aria-label={`楼层 ${floor}`}>
|
||
#{floor}
|
||
</a>
|
||
)}
|
||
</div>
|
||
{tombstoneBody}
|
||
<div className="flex items-center justify-between gap-3 mt-2 flex-wrap">
|
||
{timeMeta(c)}
|
||
{tombstoneActions}
|
||
</div>
|
||
{node.replies && node.replies.length > 0 && (
|
||
<div className="mt-3">
|
||
<button
|
||
type="button"
|
||
onClick={() => toggleFloor(c.id)}
|
||
className="cmt-fold-btn"
|
||
aria-expanded={isExpanded}
|
||
>
|
||
{isExpanded ? <ChevronDown size={14} /> : <ChevronRight size={14} />}
|
||
<span>{isExpanded ? "收起回复" : `展开 ${replyCount} 条回复`}</span>
|
||
</button>
|
||
{isExpanded && (
|
||
<div className="cmt-replies-wrap">
|
||
{node.replies.map((r) => renderComment(r, 1, undefined, node))}
|
||
</div>
|
||
)}
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
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">
|
||
{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">
|
||
{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>
|
||
)}
|
||
{isReplyToReply && parent && (
|
||
<>
|
||
<ChevronRight size={12} className="cmt-reply-arrow" aria-hidden="true" />
|
||
<a href={`#comment-${parent.id}`} className="cmt-reply-target">
|
||
{parentAuthor}
|
||
</a>
|
||
</>
|
||
)}
|
||
</div>
|
||
<div className="mt-0.5">
|
||
{renderContentOrEditor(c)}
|
||
</div>
|
||
{/* 底部行：时间 · 回复（左），删除（右） */}
|
||
<div className="flex items-center justify-between mt-1.5">
|
||
<div className="flex items-center gap-3">
|
||
{timeMeta(c)}
|
||
{commentsOpen && user && editingId !== c.id && (
|
||
<button
|
||
onClick={() => openReply(c)}
|
||
className={`cmt-reply-btn transition-colors ${
|
||
replyTarget?.id === c.id ? "!text-[var(--accent)]" : ""
|
||
}`}
|
||
aria-label={`回复 ${authorName}`}
|
||
data-tip="回复"
|
||
>
|
||
回复
|
||
</button>
|
||
)}
|
||
{canAccept(c) && (
|
||
<button
|
||
type="button"
|
||
className="cmt-reply-btn !text-[var(--accent)]"
|
||
disabled={acceptingId === c.id}
|
||
onClick={() => author && void handleAccept(c.id, author.id)}
|
||
data-tip={acceptMode === "question" ? "采纳为最佳答案" : "采纳并发放悬赏积分"}
|
||
>
|
||
{acceptingId === c.id ? "采纳中…" : acceptMode === "question" ? "采纳答案" : "采纳"}
|
||
</button>
|
||
)}
|
||
{canApprove(c) && (
|
||
<>
|
||
<button
|
||
type="button"
|
||
className="cmt-reply-btn !text-[var(--accent)] inline-flex items-center gap-1"
|
||
disabled={approvingId === c.id || rejecting}
|
||
onClick={() => void handleApprove(c.id)}
|
||
data-tip="通过评审，公开此评论"
|
||
>
|
||
<BadgeCheck size={13} />
|
||
{approvingId === c.id ? "通过中…" : "通过评审"}
|
||
</button>
|
||
<button
|
||
type="button"
|
||
className="cmt-reply-btn !text-[var(--danger)] inline-flex items-center gap-1"
|
||
disabled={approvingId === c.id || rejecting}
|
||
onClick={() => setRejectTargetId(c.id)}
|
||
data-tip="拒绝此评论，不公开"
|
||
>
|
||
<XCircle size={13} />
|
||
拒绝
|
||
</button>
|
||
</>
|
||
)}
|
||
</div>
|
||
{(canEdit(c) || canSoftDelete(c) || (canPurge(c) && !c.deleted) || canViewHistory) && (
|
||
<div className="cmt-mod-actions" role="group" aria-label="评论管理">
|
||
{canEdit(c) && editingId !== c.id && (
|
||
<button
|
||
type="button"
|
||
className="cmt-mod-btn"
|
||
onClick={() => startEdit(c)}
|
||
disabled={savingEdit}
|
||
aria-label="编辑评论"
|
||
>
|
||
<Pencil size={12} />
|
||
编辑
|
||
</button>
|
||
)}
|
||
{canViewHistory && (
|
||
<button
|
||
type="button"
|
||
className="cmt-mod-btn"
|
||
onClick={() => setHistoryCommentId(c.id)}
|
||
aria-label="编辑历史"
|
||
>
|
||
<History size={12} />
|
||
历史
|
||
</button>
|
||
)}
|
||
{canSoftDelete(c) && (
|
||
<button
|
||
type="button"
|
||
className="cmt-mod-btn"
|
||
onClick={() => setDeleteTargetId(c.id)}
|
||
disabled={deleting}
|
||
aria-label="删除评论"
|
||
>
|
||
<Trash2 size={12} />
|
||
删除
|
||
</button>
|
||
)}
|
||
{canPurge(c) && (
|
||
<button
|
||
type="button"
|
||
className="cmt-mod-btn cmt-mod-btn-danger"
|
||
onClick={() => setPurgeTargetId(c.id)}
|
||
disabled={purging}
|
||
aria-label="彻底删除"
|
||
>
|
||
清除
|
||
</button>
|
||
)}
|
||
</div>
|
||
)}
|
||
</div>
|
||
{replyTarget?.id === c.id && inlineReplyForm}
|
||
</div>
|
||
</div>
|
||
{node.replies && node.replies.length > 0 && (
|
||
<div className="cmt-children">
|
||
{node.replies.map((r) => renderComment(r, depth + 1, undefined, node))}
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
// 主评论（楼层）
|
||
return (
|
||
<div
|
||
key={c.id}
|
||
id={`comment-${c.id}`}
|
||
className="py-5 border-t first:border-t-0 scroll-mt-24"
|
||
style={{ borderColor: "var(--line)" }}
|
||
>
|
||
<div className="flex gap-3">
|
||
{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">
|
||
{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>
|
||
)}
|
||
{c.status === "pending" && <span className="badge-pending shrink-0">待审</span>}
|
||
{acceptedCommentId === c.id && (
|
||
<span className="badge-accepted shrink-0">已采纳</span>
|
||
)}
|
||
{winnerCommentIdSet.has(c.id) && (
|
||
<span className="badge-winner shrink-0">中奖楼层</span>
|
||
)}
|
||
{floor && (
|
||
<a href={`#comment-${c.id}`} className="cmt-floor-label" aria-label={`楼层 ${floor}`}>
|
||
#{floor}
|
||
</a>
|
||
)}
|
||
</div>
|
||
{renderContentOrEditor(c)}
|
||
{/* 底部行：时间 · 回复（左），删除（右） */}
|
||
<div className="flex items-center justify-between mt-2">
|
||
<div className="flex items-center gap-3">
|
||
{timeMeta(c)}
|
||
{commentsOpen && user && editingId !== c.id && (
|
||
<button
|
||
onClick={() => openReply(c)}
|
||
className={`cmt-reply-btn transition-colors ${
|
||
replyTarget?.id === c.id ? "!text-[var(--accent)]" : ""
|
||
}`}
|
||
aria-label={`回复 ${authorName}`}
|
||
data-tip="回复"
|
||
>
|
||
回复
|
||
</button>
|
||
)}
|
||
{canAccept(c) && (
|
||
<button
|
||
type="button"
|
||
className="cmt-reply-btn !text-[var(--accent)]"
|
||
disabled={acceptingId === c.id}
|
||
onClick={() => author && void handleAccept(c.id, author.id)}
|
||
data-tip={acceptMode === "question" ? "采纳为最佳答案" : "采纳并发放悬赏积分"}
|
||
>
|
||
{acceptingId === c.id ? "采纳中…" : acceptMode === "question" ? "采纳答案" : "采纳"}
|
||
</button>
|
||
)}
|
||
{canApprove(c) && (
|
||
<>
|
||
<button
|
||
type="button"
|
||
className="cmt-reply-btn !text-[var(--accent)] inline-flex items-center gap-1"
|
||
disabled={approvingId === c.id || rejecting}
|
||
onClick={() => void handleApprove(c.id)}
|
||
data-tip="通过评审，公开此评论"
|
||
>
|
||
<BadgeCheck size={13} />
|
||
{approvingId === c.id ? "通过中…" : "通过评审"}
|
||
</button>
|
||
<button
|
||
type="button"
|
||
className="cmt-reply-btn !text-[var(--danger)] inline-flex items-center gap-1"
|
||
disabled={approvingId === c.id || rejecting}
|
||
onClick={() => setRejectTargetId(c.id)}
|
||
data-tip="拒绝此评论，不公开"
|
||
>
|
||
<XCircle size={13} />
|
||
拒绝
|
||
</button>
|
||
</>
|
||
)}
|
||
</div>
|
||
{(canEdit(c) || canSoftDelete(c) || canPurge(c) || canViewHistory) && (
|
||
<div className="cmt-mod-actions" role="group" aria-label="评论管理">
|
||
{canEdit(c) && editingId !== c.id && (
|
||
<button
|
||
type="button"
|
||
className="cmt-mod-btn"
|
||
onClick={() => startEdit(c)}
|
||
disabled={savingEdit}
|
||
aria-label="编辑评论"
|
||
>
|
||
<Pencil size={12} />
|
||
编辑
|
||
</button>
|
||
)}
|
||
{canViewHistory && (
|
||
<button
|
||
type="button"
|
||
className="cmt-mod-btn"
|
||
onClick={() => setHistoryCommentId(c.id)}
|
||
aria-label="编辑历史"
|
||
>
|
||
<History size={12} />
|
||
历史
|
||
</button>
|
||
)}
|
||
{canSoftDelete(c) && (
|
||
<button
|
||
type="button"
|
||
className="cmt-mod-btn"
|
||
onClick={() => setDeleteTargetId(c.id)}
|
||
disabled={deleting}
|
||
aria-label="删除评论"
|
||
>
|
||
<Trash2 size={12} />
|
||
删除
|
||
</button>
|
||
)}
|
||
{canPurge(c) && (
|
||
<button
|
||
type="button"
|
||
className="cmt-mod-btn cmt-mod-btn-danger"
|
||
onClick={() => setPurgeTargetId(c.id)}
|
||
disabled={purging}
|
||
aria-label="彻底删除"
|
||
>
|
||
清除
|
||
</button>
|
||
)}
|
||
</div>
|
||
)}
|
||
</div>
|
||
{replyTarget?.id === c.id && inlineReplyForm}
|
||
|
||
{/* 折叠/展开子回复 */}
|
||
{node.replies && node.replies.length > 0 && (
|
||
<div className="mt-3">
|
||
<button
|
||
type="button"
|
||
onClick={() => toggleFloor(c.id)}
|
||
className="cmt-fold-btn"
|
||
aria-expanded={isExpanded}
|
||
>
|
||
{isExpanded ? <ChevronDown size={14} /> : <ChevronRight size={14} />}
|
||
<span>
|
||
{isExpanded ? "收起回复" : `展开 ${replyCount} 条回复`}
|
||
</span>
|
||
</button>
|
||
{isExpanded && (
|
||
<div className="cmt-replies-wrap">
|
||
{node.replies.map((r) => renderComment(r, 1, undefined, node))}
|
||
</div>
|
||
)}
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
if (!commentsOpen) {
|
||
return <CommentsUnsupported />;
|
||
}
|
||
|
||
return (
|
||
<section id="comments" className="panel p-6 sm:p-8 mt-6 scroll-mt-24" aria-label="评论区">
|
||
<div className="flex items-center gap-2.5 mb-6">
|
||
<h2 className="text-lg font-semibold" style={{ color: "var(--ink)" }}>
|
||
评论
|
||
</h2>
|
||
<span
|
||
className="text-[12px] font-medium px-2 py-0.5 rounded-full tabular-nums"
|
||
style={{ background: "var(--accent-soft)", color: "var(--accent)" }}
|
||
>
|
||
{totalComments}
|
||
</span>
|
||
<span className="meta ml-auto text-[11.5px]">共 {totalPages} 页楼层</span>
|
||
</div>
|
||
|
||
{user ? (
|
||
<form onSubmit={handleSubmit} className="mb-8">
|
||
<div className="cmt-md-editor cmt-md-editor-floor scroll-mt-28">
|
||
<MarkdownEditor
|
||
id="comment-input"
|
||
value={content}
|
||
onChange={setContent}
|
||
rows={6}
|
||
disabled={submitting}
|
||
allowHide={false}
|
||
placeholder="友善发言，发表一个新楼层…"
|
||
onSubmitShortcut={() => {
|
||
void submitFloor();
|
||
}}
|
||
/>
|
||
</div>
|
||
<div className="flex items-center justify-end gap-3 mt-2.5">
|
||
<button type="submit" disabled={submitting || !content.trim()} className="btn btn-primary">
|
||
{submitting ? "发送中..." : "发表评论"}
|
||
</button>
|
||
</div>
|
||
</form>
|
||
) : (
|
||
<div
|
||
className="mb-8 px-5 py-4 rounded-2xl flex items-center justify-between gap-4 flex-wrap border"
|
||
style={{ borderColor: "var(--line)", background: "transparent" }}
|
||
>
|
||
<span className="text-sm" style={{ color: "var(--ink-2)" }}>
|
||
登录后参与讨论
|
||
</span>
|
||
<Link href={`/login?redirect=${encodeURIComponent(`/post/${postId}`)}`} className="btn btn-line btn-sm">
|
||
去登录
|
||
</Link>
|
||
</div>
|
||
)}
|
||
|
||
<div>
|
||
{comments.map((node, i) => renderComment(node, 0, (page - 1) * size + i + 1))}
|
||
{comments.length === 0 && (
|
||
<div className="text-center py-14">
|
||
<MessagesSquare size={28} className="mx-auto mb-3" style={{ color: "var(--ink-3)" }} />
|
||
<p className="text-sm" style={{ color: "var(--ink-2)" }}>
|
||
暂无评论
|
||
</p>
|
||
<p className="meta text-[12.5px] mt-1">来说两句，抢占沙发</p>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
<Pagination total={total} page={page} size={size} basePath={`/post/${postId}`} />
|
||
|
||
<ConfirmDialog
|
||
open={rejectTargetId != null}
|
||
title="拒绝评论"
|
||
message="确定拒绝这条待审评论？拒绝后不会公开，作者会收到通知。"
|
||
confirmLabel="确认拒绝"
|
||
danger
|
||
busy={rejecting}
|
||
onConfirm={handleRejectConfirm}
|
||
onCancel={() => {
|
||
if (!rejecting) setRejectTargetId(null);
|
||
}}
|
||
/>
|
||
|
||
<DeleteCommentModal
|
||
open={deleteTargetId != null}
|
||
mode={deleteMode}
|
||
busy={deleting}
|
||
onClose={() => {
|
||
if (!deleting) setDeleteTargetId(null);
|
||
}}
|
||
onConfirm={(opts) => void handleDeleteConfirm(opts)}
|
||
/>
|
||
|
||
<ConfirmDialog
|
||
open={restoreTargetId != null}
|
||
title="恢复评论"
|
||
message="确定恢复这条评论？正文与评论者信息将重新公开显示。"
|
||
confirmLabel="确认恢复"
|
||
busy={restoring}
|
||
onConfirm={handleRestoreConfirm}
|
||
onCancel={() => {
|
||
if (!restoring) setRestoreTargetId(null);
|
||
}}
|
||
/>
|
||
|
||
<ConfirmDialog
|
||
open={purgeTargetId != null}
|
||
title="彻底删除评论"
|
||
message={
|
||
purgeReplyCount > 0
|
||
? `将永久清除此评论及其 ${purgeReplyCount} 条回复，不保留占位、不可恢复。刷屏/垃圾内容请用此操作；一般违规请用「删除」保留占位。`
|
||
: "将永久清除此评论，不保留占位、不可恢复。刷屏/垃圾内容请用此操作；一般违规请用「删除」保留占位。"
|
||
}
|
||
confirmLabel="永久清除"
|
||
danger
|
||
busy={purging}
|
||
onConfirm={handlePurgeConfirm}
|
||
onCancel={() => {
|
||
if (!purging) setPurgeTargetId(null);
|
||
}}
|
||
/>
|
||
|
||
<CommentEditHistoryModal
|
||
open={historyCommentId != null}
|
||
commentId={historyCommentId}
|
||
onClose={() => setHistoryCommentId(null)}
|
||
/>
|
||
</section>
|
||
);
|
||
}
|