703 lines
22 KiB
TypeScript
703 lines
22 KiB
TypeScript
"use client";
|
||
|
||
import { useState, useEffect, useCallback, useRef } from "react";
|
||
import { MessageSquare, Send } from "lucide-react";
|
||
import {
|
||
apiCreateSnippetComment,
|
||
apiUpdateSnippetComment,
|
||
apiDeleteSnippetComment,
|
||
apiSnippetCommentHistory,
|
||
apiMe,
|
||
type SnippetCommentItem,
|
||
} from "@/lib/api";
|
||
import { toast } from "@/lib/toast";
|
||
import { formatRelative, formatDateTime } from "@/lib/format";
|
||
import Avatar from "@/components/Avatar";
|
||
import { useUrlStyle } from "@/components/SiteBrandProvider";
|
||
import { userPath } from "@/lib/urlStyle";
|
||
import Link from "next/link";
|
||
import MarkdownEditor from "@/components/MarkdownEditor";
|
||
import MarkdownBodyClient from "@/components/MarkdownBodyClient";
|
||
import EditHistoryModal, { type EditHistoryItem } from "@/components/EditHistoryModal";
|
||
import ConfirmDialog from "@/components/ConfirmDialog";
|
||
import { snippetCommentCountEvent } from "@/components/SnippetCommentCountChip";
|
||
|
||
const COMMENT_MAX = 2000; // 与后端 snippetCommentMaxLen 一致
|
||
|
||
type MoreItem = {
|
||
key: string;
|
||
label: string;
|
||
danger?: boolean;
|
||
disabled?: boolean;
|
||
onSelect: () => void;
|
||
};
|
||
|
||
/** 低频操作：编辑、历史、删除。Escape 关闭并回到触发按钮。 */
|
||
function CommentMoreMenu({ items }: { items: MoreItem[] }) {
|
||
const [open, setOpen] = useState(false);
|
||
const ref = useRef<HTMLDivElement>(null);
|
||
const btnRef = useRef<HTMLButtonElement>(null);
|
||
|
||
useEffect(() => {
|
||
if (!open) return;
|
||
const onDown = (e: MouseEvent) => {
|
||
if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false);
|
||
};
|
||
const onKey = (e: KeyboardEvent) => {
|
||
if (e.key !== "Escape") return;
|
||
e.preventDefault();
|
||
e.stopPropagation();
|
||
setOpen(false);
|
||
btnRef.current?.focus();
|
||
};
|
||
document.addEventListener("mousedown", onDown);
|
||
document.addEventListener("keydown", onKey);
|
||
return () => {
|
||
document.removeEventListener("mousedown", onDown);
|
||
document.removeEventListener("keydown", onKey);
|
||
};
|
||
}, [open]);
|
||
|
||
if (items.length === 0) return null;
|
||
const normal = items.filter((item) => !item.danger);
|
||
const danger = items.filter((item) => item.danger);
|
||
|
||
return (
|
||
<div className="cmt-more" ref={ref}>
|
||
<button
|
||
ref={btnRef}
|
||
type="button"
|
||
className="cmt-more-btn"
|
||
aria-haspopup="menu"
|
||
aria-expanded={open}
|
||
onClick={() => setOpen((v) => !v)}
|
||
>
|
||
更多
|
||
</button>
|
||
{open && (
|
||
<div role="menu" className="cmt-more-menu" aria-label="评论操作">
|
||
{normal.map((item) => (
|
||
<button
|
||
key={item.key}
|
||
type="button"
|
||
role="menuitem"
|
||
disabled={item.disabled}
|
||
onClick={() => {
|
||
setOpen(false);
|
||
item.onSelect();
|
||
}}
|
||
>
|
||
{item.label}
|
||
</button>
|
||
))}
|
||
{normal.length > 0 && danger.length > 0 ? <div className="cmt-more-sep" role="separator" /> : null}
|
||
{danger.map((item) => (
|
||
<button
|
||
key={item.key}
|
||
type="button"
|
||
role="menuitem"
|
||
className="is-danger"
|
||
disabled={item.disabled}
|
||
onClick={() => {
|
||
setOpen(false);
|
||
item.onSelect();
|
||
}}
|
||
>
|
||
{item.label}
|
||
</button>
|
||
))}
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function CommentNode({
|
||
item,
|
||
depth,
|
||
snippetId,
|
||
onUpdate,
|
||
onDelete,
|
||
onOpenHistory,
|
||
loggedIn,
|
||
}: {
|
||
item: SnippetCommentItem;
|
||
depth: number;
|
||
snippetId: number;
|
||
onUpdate: (id: number, content: string) => Promise<void>;
|
||
onDelete: (id: number) => Promise<void>;
|
||
onOpenHistory: (id: number, content: string) => void;
|
||
loggedIn: boolean;
|
||
}) {
|
||
const urlStyle = useUrlStyle();
|
||
const [editing, setEditing] = useState(false);
|
||
const [editContent, setEditContent] = useState(item.content);
|
||
const [editUploading, setEditUploading] = useState(false);
|
||
const [replyOpen, setReplyOpen] = useState(false);
|
||
const [replyContent, setReplyContent] = useState("");
|
||
const [replyUploading, setReplyUploading] = useState(false);
|
||
const [submitting, setSubmitting] = useState(false);
|
||
const [currentUserId, setCurrentUserId] = useState<number | null>(null);
|
||
const [isStaff, setIsStaff] = useState(false);
|
||
const [deleteTarget, setDeleteTarget] = useState(false);
|
||
|
||
useEffect(() => {
|
||
apiMe()
|
||
.then((res) => {
|
||
if (res.user) {
|
||
setCurrentUserId(res.user.id);
|
||
setIsStaff(["admin", "moderator"].includes(res.user.role));
|
||
}
|
||
})
|
||
.catch(() => {});
|
||
}, []);
|
||
|
||
const canEdit = currentUserId === item.user_id;
|
||
const canDelete = canEdit || isStaff;
|
||
const canViewHistory = loggedIn;
|
||
const userName = item.user ? item.user.nickname || item.user.username : "已注销";
|
||
const isFloor = depth === 0;
|
||
|
||
const handleEdit = async () => {
|
||
const next = editContent.trim();
|
||
if (!next || submitting) return;
|
||
setSubmitting(true);
|
||
try {
|
||
await onUpdate(item.id, next);
|
||
setEditing(false);
|
||
toast("已保存", "ok");
|
||
} catch (e) {
|
||
toast(e instanceof Error ? e.message : "保存失败");
|
||
} finally {
|
||
setSubmitting(false);
|
||
}
|
||
};
|
||
|
||
const handleDelete = async () => {
|
||
setDeleteTarget(false);
|
||
if (submitting) return;
|
||
setSubmitting(true);
|
||
try {
|
||
await onDelete(item.id);
|
||
toast("已删除", "ok");
|
||
} catch (e) {
|
||
toast(e instanceof Error ? e.message : "删除失败");
|
||
} finally {
|
||
setSubmitting(false);
|
||
}
|
||
};
|
||
|
||
const handleReply = async () => {
|
||
const next = replyContent.trim();
|
||
if (!next || submitting) return;
|
||
setSubmitting(true);
|
||
try {
|
||
await apiCreateSnippetComment(snippetId, next, item.id);
|
||
setReplyContent("");
|
||
setReplyOpen(false);
|
||
toast("已回复", "ok");
|
||
window.dispatchEvent(new CustomEvent("j13-snippet-comment-refresh"));
|
||
} catch (e) {
|
||
toast(e instanceof Error ? e.message : "回复失败");
|
||
} finally {
|
||
setSubmitting(false);
|
||
}
|
||
};
|
||
|
||
const moreItems: MoreItem[] = [];
|
||
if (canEdit && !editing) {
|
||
moreItems.push({
|
||
key: "edit",
|
||
label: "编辑",
|
||
disabled: submitting,
|
||
onSelect: () => setEditing(true),
|
||
});
|
||
}
|
||
if (canViewHistory && item.edited && !editing) {
|
||
moreItems.push({
|
||
key: "history",
|
||
label: "编辑历史",
|
||
onSelect: () => onOpenHistory(item.id, item.content),
|
||
});
|
||
}
|
||
if (canDelete && !editing) {
|
||
moreItems.push({
|
||
key: "delete",
|
||
label: "删除",
|
||
danger: true,
|
||
disabled: submitting,
|
||
onSelect: () => setDeleteTarget(true),
|
||
});
|
||
}
|
||
|
||
const editedMark = item.edited ? (
|
||
canViewHistory ? (
|
||
<button
|
||
type="button"
|
||
className="cmt-edited"
|
||
onClick={() => onOpenHistory(item.id, item.content)}
|
||
>
|
||
已编辑
|
||
</button>
|
||
) : (
|
||
<span className="cmt-edited" data-tip="此评论曾被编辑">
|
||
已编辑
|
||
</span>
|
||
)
|
||
) : null;
|
||
|
||
if (item.deleted) {
|
||
return (
|
||
<div
|
||
id={item.floor ? `comment-${item.floor}` : undefined}
|
||
data-comment-id={item.id}
|
||
className={`cmt-item scroll-mt-24 ${isFloor ? "" : "cmt-reply-row"}`}
|
||
>
|
||
<div className="flex gap-3">
|
||
<Avatar size={isFloor ? 34 : 32} name={userName} src={item.user?.avatar} />
|
||
<div className="flex-1 min-w-0">
|
||
<div className="cmt-meta">
|
||
<div className="cmt-meta-lead">
|
||
<span className="cmt-name" style={{ color: "var(--ink)" }}>
|
||
{userName}
|
||
</span>
|
||
{item.floor && item.floor > 0 && (
|
||
<a href={`#comment-${item.floor}`} className="cmt-floor-label">
|
||
#{item.floor}
|
||
</a>
|
||
)}
|
||
<span className="cmt-time">{formatRelative(item.created_at)}</span>
|
||
</div>
|
||
</div>
|
||
<div className="cmt-tombstone">
|
||
<p className="cmt-tombstone-title">该评论已删除</p>
|
||
</div>
|
||
<div className="cmt-actions">
|
||
<CommentMoreMenu items={moreItems} />
|
||
</div>
|
||
{item.replies && item.replies.length > 0 && (
|
||
<div className="cmt-children">
|
||
{item.replies.map((r) => (
|
||
<CommentNode
|
||
key={r.id}
|
||
item={r}
|
||
depth={depth + 1}
|
||
snippetId={snippetId}
|
||
onUpdate={onUpdate}
|
||
onDelete={onDelete}
|
||
onOpenHistory={onOpenHistory}
|
||
loggedIn={loggedIn}
|
||
/>
|
||
))}
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
<ConfirmDialog
|
||
open={deleteTarget}
|
||
title="删除评论"
|
||
message="确定删除这条评论吗？删除后将显示占位，回复仍保留。"
|
||
confirmLabel="删除"
|
||
danger
|
||
onConfirm={handleDelete}
|
||
onCancel={() => setDeleteTarget(false)}
|
||
/>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<div
|
||
id={item.floor ? `comment-${item.floor}` : undefined}
|
||
data-comment-id={item.id}
|
||
className={`cmt-item scroll-mt-24 ${isFloor ? "" : "cmt-reply-row"}`}
|
||
>
|
||
<div className="flex gap-3">
|
||
<Link
|
||
href={userPath(urlStyle, item.user_id)}
|
||
className="shrink-0"
|
||
aria-label={userName}
|
||
>
|
||
<Avatar size={isFloor ? 34 : 32} name={userName} src={item.user?.avatar} />
|
||
</Link>
|
||
<div className="flex-1 min-w-0">
|
||
<div className="cmt-meta">
|
||
<div className="cmt-meta-lead">
|
||
<Link href={userPath(urlStyle, item.user_id)} className="cmt-name-link group">
|
||
<span className="cmt-name group-hover:text-[var(--accent)] transition-colors">
|
||
{userName}
|
||
</span>
|
||
</Link>
|
||
{item.floor && item.floor > 0 && (
|
||
<a href={`#comment-${item.floor}`} className="cmt-floor-label">
|
||
#{item.floor}
|
||
</a>
|
||
)}
|
||
<time className="cmt-time" dateTime={item.created_at} data-tip={formatDateTime(item.created_at)}>
|
||
{formatRelative(item.created_at)}
|
||
</time>
|
||
{editedMark}
|
||
</div>
|
||
</div>
|
||
|
||
{editing ? (
|
||
<div className="cmt-md-editor mt-1">
|
||
<MarkdownEditor
|
||
density="comment"
|
||
value={editContent}
|
||
onChange={(v) => setEditContent(v.slice(0, COMMENT_MAX))}
|
||
maxChars={COMMENT_MAX}
|
||
disabled={submitting}
|
||
autoFocus
|
||
allowHide={false}
|
||
ariaLabel="编辑评论"
|
||
placeholder="编辑评论…"
|
||
shortcutName="保存"
|
||
onUploadingChange={setEditUploading}
|
||
onSubmitShortcut={() => {
|
||
void handleEdit();
|
||
}}
|
||
footer={
|
||
<>
|
||
<button
|
||
type="button"
|
||
className="btn btn-line btn-sm"
|
||
disabled={submitting}
|
||
onClick={() => {
|
||
setEditing(false);
|
||
setEditContent(item.content);
|
||
}}
|
||
>
|
||
取消
|
||
</button>
|
||
<button
|
||
type="button"
|
||
onClick={handleEdit}
|
||
disabled={submitting || editUploading || !editContent.trim()}
|
||
className="btn btn-primary cmt-submit"
|
||
>
|
||
{submitting ? "保存中…" : "保存修改"}
|
||
</button>
|
||
</>
|
||
}
|
||
/>
|
||
</div>
|
||
) : (
|
||
<MarkdownBodyClient content={item.content} className="prose-content prose-comment" />
|
||
)}
|
||
|
||
<div className="cmt-actions">
|
||
{!editing && loggedIn && (
|
||
<button
|
||
type="button"
|
||
onClick={() => setReplyOpen(!replyOpen)}
|
||
className={`cmt-reply-btn${replyOpen ? " !text-[var(--accent)]" : ""}`}
|
||
aria-label={`回复 ${userName}`}
|
||
>
|
||
回复
|
||
</button>
|
||
)}
|
||
<CommentMoreMenu items={moreItems} />
|
||
</div>
|
||
|
||
{replyOpen && !editing && (
|
||
<form
|
||
onSubmit={(e) => {
|
||
e.preventDefault();
|
||
void handleReply();
|
||
}}
|
||
className="cmt-reply-form"
|
||
>
|
||
<div className="flex items-center justify-between gap-2 mb-2 text-[13px]" style={{ color: "var(--ink-2)" }}>
|
||
<span>
|
||
回复 <span style={{ color: "var(--accent)", fontWeight: 600 }}>@{userName}</span>
|
||
</span>
|
||
<button type="button" className="cmt-reply-btn" onClick={() => setReplyOpen(false)}>
|
||
取消
|
||
</button>
|
||
</div>
|
||
<div className="cmt-md-editor">
|
||
<MarkdownEditor
|
||
density="comment"
|
||
value={replyContent}
|
||
onChange={(v) => setReplyContent(v.slice(0, COMMENT_MAX))}
|
||
maxChars={COMMENT_MAX}
|
||
disabled={submitting}
|
||
autoFocus
|
||
allowHide={false}
|
||
ariaLabel={`回复 ${userName}`}
|
||
placeholder="写下你的回复…"
|
||
shortcutName="回复"
|
||
onUploadingChange={setReplyUploading}
|
||
onSubmitShortcut={() => {
|
||
void handleReply();
|
||
}}
|
||
footer={
|
||
<button
|
||
type="submit"
|
||
disabled={submitting || replyUploading || !replyContent.trim()}
|
||
aria-busy={submitting}
|
||
className="btn btn-primary cmt-submit"
|
||
>
|
||
{submitting ? "回复中…" : "回复"}
|
||
</button>
|
||
}
|
||
/>
|
||
</div>
|
||
</form>
|
||
)}
|
||
|
||
{item.replies && item.replies.length > 0 && (
|
||
<div className="cmt-children">
|
||
{item.replies.map((r) => (
|
||
<CommentNode
|
||
key={r.id}
|
||
item={r}
|
||
depth={depth + 1}
|
||
snippetId={snippetId}
|
||
onUpdate={onUpdate}
|
||
onDelete={onDelete}
|
||
onOpenHistory={onOpenHistory}
|
||
loggedIn={loggedIn}
|
||
/>
|
||
))}
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
<ConfirmDialog
|
||
open={deleteTarget}
|
||
title="删除评论"
|
||
message="确定删除这条评论吗？删除后将显示占位，回复仍保留。"
|
||
confirmLabel="删除"
|
||
danger
|
||
onConfirm={handleDelete}
|
||
onCancel={() => setDeleteTarget(false)}
|
||
/>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
export default function SnippetCommentSection({
|
||
snippetId,
|
||
initialItems,
|
||
initialTotal,
|
||
urlStyle: _urlStyle,
|
||
}: {
|
||
snippetId: number;
|
||
initialItems: SnippetCommentItem[];
|
||
initialTotal: number;
|
||
urlStyle: string;
|
||
}) {
|
||
const [items, setItems] = useState(initialItems);
|
||
const [total, setTotal] = useState(initialTotal);
|
||
const [content, setContent] = useState("");
|
||
const [submitting, setSubmitting] = useState(false);
|
||
const [uploading, setUploading] = useState(false);
|
||
const [loading, setLoading] = useState(false);
|
||
const [page, setPage] = useState(1);
|
||
const [loggedIn, setLoggedIn] = useState(false);
|
||
const [historyCommentId, setHistoryCommentId] = useState<number | null>(null);
|
||
const [historyCommentContent, setHistoryCommentContent] = useState("");
|
||
|
||
useEffect(() => {
|
||
window.dispatchEvent(new CustomEvent(snippetCommentCountEvent(snippetId), { detail: total }));
|
||
}, [total, snippetId]);
|
||
|
||
useEffect(() => {
|
||
apiMe()
|
||
.then((res) => setLoggedIn(!!res.user))
|
||
.catch(() => {});
|
||
}, []);
|
||
|
||
const loadComments = useCallback(
|
||
async (p: number) => {
|
||
setLoading(true);
|
||
try {
|
||
const { fetchSnippetComments } = await import("@/lib/api");
|
||
const res = await fetchSnippetComments(snippetId, p, 20);
|
||
setItems(res.items);
|
||
setTotal(res.total);
|
||
setPage(p);
|
||
} catch {
|
||
toast("加载评论失败");
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
},
|
||
[snippetId]
|
||
);
|
||
|
||
useEffect(() => {
|
||
const onRefresh = () => loadComments(page);
|
||
window.addEventListener("j13-snippet-comment-refresh", onRefresh);
|
||
return () => window.removeEventListener("j13-snippet-comment-refresh", onRefresh);
|
||
}, [loadComments, page]);
|
||
|
||
const handleSubmit = async () => {
|
||
const next = content.trim();
|
||
if (!next || submitting) return;
|
||
setSubmitting(true);
|
||
try {
|
||
await apiCreateSnippetComment(snippetId, next);
|
||
setContent("");
|
||
toast("评论成功", "ok");
|
||
loadComments(1);
|
||
} catch (e) {
|
||
toast(e instanceof Error ? e.message : "评论失败");
|
||
} finally {
|
||
setSubmitting(false);
|
||
}
|
||
};
|
||
|
||
const handleUpdate = async (cid: number, newContent: string) => {
|
||
await apiUpdateSnippetComment(snippetId, cid, newContent);
|
||
loadComments(page);
|
||
};
|
||
|
||
const handleDelete = async (cid: number) => {
|
||
await apiDeleteSnippetComment(snippetId, cid);
|
||
loadComments(page);
|
||
};
|
||
|
||
const openHistory = (cid: number, currentContent: string) => {
|
||
setHistoryCommentContent(currentContent);
|
||
setHistoryCommentId(cid);
|
||
};
|
||
|
||
const fetchHistoryPage = async (p: number, size: number) => {
|
||
if (!historyCommentId) return { items: [], total: 0, page: p, size };
|
||
const res = await apiSnippetCommentHistory(snippetId, historyCommentId, p, size);
|
||
const items: EditHistoryItem[] = res.items.map((it) => ({
|
||
id: it.id,
|
||
editor: it.editor
|
||
? {
|
||
id: it.editor.id,
|
||
username: it.editor.username,
|
||
nickname: it.editor.nickname,
|
||
avatar: it.editor.avatar,
|
||
}
|
||
: { id: 0, username: "已注销", nickname: "已注销", avatar: "" },
|
||
old_content: it.old_content,
|
||
created_at: it.created_at,
|
||
}));
|
||
return { items, total: res.total, page: res.page, size: res.size };
|
||
};
|
||
|
||
const totalPages = Math.max(1, Math.ceil(total / 20));
|
||
|
||
return (
|
||
<div>
|
||
<h2 className="text-[15px] font-bold mb-4 inline-flex items-center gap-2" style={{ color: "var(--ink)" }}>
|
||
<MessageSquare size={15} style={{ color: "var(--accent)" }} />
|
||
评论（{total}）
|
||
</h2>
|
||
|
||
{loggedIn ? (
|
||
<div className="mb-6 cmt-md-editor">
|
||
<MarkdownEditor
|
||
id={`snippet-comment-input-${snippetId}`}
|
||
density="comment"
|
||
value={content}
|
||
onChange={(v) => setContent(v.slice(0, COMMENT_MAX))}
|
||
maxChars={COMMENT_MAX}
|
||
disabled={submitting}
|
||
allowHide={false}
|
||
ariaLabel="发表评论"
|
||
placeholder="写下你的看法，支持 Markdown…"
|
||
onUploadingChange={setUploading}
|
||
onSubmitShortcut={() => {
|
||
void handleSubmit();
|
||
}}
|
||
footer={
|
||
<button
|
||
type="button"
|
||
onClick={handleSubmit}
|
||
disabled={submitting || uploading || !content.trim()}
|
||
className="btn btn-primary cmt-submit inline-flex items-center gap-1.5"
|
||
>
|
||
<Send size={13} />
|
||
{submitting ? "发送中…" : "发表评论"}
|
||
</button>
|
||
}
|
||
/>
|
||
</div>
|
||
) : (
|
||
<div
|
||
className="mb-6 rounded-xl px-4 py-6 text-center"
|
||
style={{ background: "var(--panel-2)", border: "1px solid var(--line)" }}
|
||
>
|
||
<p className="text-[13px]" style={{ color: "var(--ink-3)" }}>
|
||
<Link href="/login" className="hover:underline" style={{ color: "var(--accent)" }}>
|
||
登录
|
||
</Link>{" "}
|
||
后参与评论
|
||
</p>
|
||
</div>
|
||
)}
|
||
|
||
{loading ? (
|
||
<p className="meta text-[13px] text-center py-8">加载中…</p>
|
||
) : items.length === 0 ? (
|
||
<div
|
||
className="rounded-xl py-10 text-center"
|
||
style={{ background: "var(--panel-2)", border: "1px dashed var(--line-2)" }}
|
||
>
|
||
<MessageSquare size={20} className="mx-auto mb-2" style={{ color: "var(--ink-3)" }} />
|
||
<p className="text-[13px]" style={{ color: "var(--ink-3)" }}>
|
||
还没有评论，来抢沙发吧
|
||
</p>
|
||
</div>
|
||
) : (
|
||
<div className="flex flex-col divide-y" style={{ borderColor: "var(--line)" }}>
|
||
{items.map((item) => (
|
||
<CommentNode
|
||
key={item.id}
|
||
item={item}
|
||
depth={0}
|
||
snippetId={snippetId}
|
||
onUpdate={handleUpdate}
|
||
onDelete={handleDelete}
|
||
onOpenHistory={openHistory}
|
||
loggedIn={loggedIn}
|
||
/>
|
||
))}
|
||
</div>
|
||
)}
|
||
|
||
{totalPages > 1 && (
|
||
<div className="mt-4 flex items-center justify-center gap-2">
|
||
<button
|
||
type="button"
|
||
disabled={page <= 1 || loading}
|
||
onClick={() => loadComments(page - 1)}
|
||
className="btn btn-line btn-sm"
|
||
>
|
||
上一页
|
||
</button>
|
||
<span className="meta text-[12.5px] tabular-nums">
|
||
{page} / {totalPages}
|
||
</span>
|
||
<button
|
||
type="button"
|
||
disabled={page >= totalPages || loading}
|
||
onClick={() => loadComments(page + 1)}
|
||
className="btn btn-line btn-sm"
|
||
>
|
||
下一页
|
||
</button>
|
||
</div>
|
||
)}
|
||
|
||
<EditHistoryModal
|
||
open={historyCommentId !== null}
|
||
title="评论编辑历史"
|
||
currentContent={historyCommentContent}
|
||
fetchPage={fetchHistoryPage}
|
||
onClose={() => setHistoryCommentId(null)}
|
||
/>
|
||
</div>
|
||
);
|
||
}
|