349 lines
12 KiB
TypeScript
349 lines
12 KiB
TypeScript
"use client";
|
||
|
||
import { useState, useEffect, useRef } from "react";
|
||
import { useRouter } from "next/navigation";
|
||
import Link from "next/link";
|
||
import { Pencil, Trash2, Pin, Star, SlidersHorizontal, ChevronDown, Check, BadgeCheck, Lock, LockOpen } from "lucide-react";
|
||
import { apiMe, apiDeletePost, apiTogglePin, apiToggleRecommend, apiTogglePostLock, apiAdminApprovePost, type User } from "@/lib/api";
|
||
import { canStaffSoftDelete, canModerateBoard, isAdminOrAbove, isStaff } from "@/lib/roles";
|
||
import { toast } from "@/lib/toast";
|
||
import ConfirmDialog from "@/components/ConfirmDialog";
|
||
import StaffDeletePostModal from "@/components/StaffDeletePostModal";
|
||
|
||
interface PostActionsProps {
|
||
postId: string;
|
||
authorId: number;
|
||
authorRole?: string | null;
|
||
boardId: number;
|
||
pinned: number;
|
||
recommended: boolean;
|
||
/** 帖子审核状态：pending 时对可审者显示「通过评审」 */
|
||
status: string;
|
||
/** 帖子创建时间：自动编辑锁计时基准（staff 豁免） */
|
||
createdAt: string;
|
||
/** 帖子是否被管理员手动锁定（staff 豁免） */
|
||
locked: boolean;
|
||
/** 帖子可编辑时长（小时）；0=不锁定；staff 豁免 */
|
||
postEditLockHours: number;
|
||
/** 供删除确认展示 */
|
||
title?: string;
|
||
}
|
||
|
||
export default function PostActions({
|
||
postId,
|
||
authorId,
|
||
authorRole,
|
||
boardId,
|
||
pinned,
|
||
recommended,
|
||
status,
|
||
createdAt,
|
||
locked,
|
||
postEditLockHours,
|
||
title,
|
||
}: PostActionsProps) {
|
||
const router = useRouter();
|
||
const [user, setUser] = useState<User | null>(null);
|
||
const [open, setOpen] = useState(false);
|
||
const [deleting, setDeleting] = useState(false);
|
||
const [pinLevel, setPinLevel] = useState(pinned);
|
||
const [isRecommended, setIsRecommended] = useState(recommended);
|
||
const [isLocked, setIsLocked] = useState(locked);
|
||
const [acting, setActing] = useState(false);
|
||
const [confirmDelete, setConfirmDelete] = useState(false);
|
||
const [staffDeleteOpen, setStaffDeleteOpen] = useState(false);
|
||
const menuRef = useRef<HTMLDivElement>(null);
|
||
|
||
useEffect(() => {
|
||
apiMe()
|
||
.then((res) => setUser(res.user || null))
|
||
.catch(() => setUser(null));
|
||
}, []);
|
||
|
||
useEffect(() => {
|
||
if (!open) return;
|
||
const onDown = (e: MouseEvent) => {
|
||
if (menuRef.current && !menuRef.current.contains(e.target as Node)) setOpen(false);
|
||
};
|
||
const onKey = (e: KeyboardEvent) => {
|
||
if (e.key === "Escape") setOpen(false);
|
||
};
|
||
document.addEventListener("mousedown", onDown);
|
||
document.addEventListener("keydown", onKey);
|
||
return () => {
|
||
document.removeEventListener("mousedown", onDown);
|
||
document.removeEventListener("keydown", onKey);
|
||
};
|
||
}, [open]);
|
||
|
||
const canManage =
|
||
!!user &&
|
||
(user.id === authorId || canStaffSoftDelete(user, boardId, authorRole));
|
||
const isAdmin = !!user && isAdminOrAbove(user.role);
|
||
const staffUser = !!user && isStaff(user.role);
|
||
// 编辑入口：手动锁帖或超过可编辑时限时对普通用户隐藏，staff 豁免
|
||
const editTimeLocked =
|
||
!staffUser &&
|
||
postEditLockHours > 0 &&
|
||
Date.now() - new Date(createdAt).getTime() > postEditLockHours * 3_600_000;
|
||
const showEdit = canManage && !(isLocked && !staffUser) && !editTimeLocked;
|
||
const canApprove =
|
||
!!user && status === "pending" && canModerateBoard(user, boardId);
|
||
// 置顶分级：管理员及以上可设全局置顶(2)与板块置顶(1)；板块管理员只在其授权板块做板块置顶。
|
||
// 已是全站置顶的帖子，板块管理员不可操作，故不展示入口。
|
||
const canGlobalPin = isAdmin;
|
||
const canBoardPin = !!user && canModerateBoard(user, boardId);
|
||
const showGlobalPin = canGlobalPin;
|
||
const showBoardPin = canBoardPin && (isAdmin || pinLevel < 2);
|
||
const showPin = showGlobalPin || showBoardPin;
|
||
// staff 删他人帖：走类型+理由；作者自删：简单确认
|
||
const staffDeletingOther =
|
||
!!user && user.id !== authorId && canStaffSoftDelete(user, boardId, authorRole);
|
||
|
||
const runDelete = async (opts?: { delete_type?: string; delete_reason?: string }) => {
|
||
setDeleting(true);
|
||
try {
|
||
const res = await apiDeletePost(postId, opts);
|
||
if (res.message) {
|
||
setConfirmDelete(false);
|
||
setStaffDeleteOpen(false);
|
||
router.push("/");
|
||
toast("帖子已删除", "ok");
|
||
} else {
|
||
toast(res.error || "删除失败");
|
||
}
|
||
} catch {
|
||
toast("网络错误，删除失败");
|
||
} finally {
|
||
setDeleting(false);
|
||
}
|
||
};
|
||
|
||
const handleApprove = async () => {
|
||
setActing(true);
|
||
setOpen(false);
|
||
try {
|
||
await apiAdminApprovePost(Number(postId));
|
||
toast("已通过评审", "ok");
|
||
router.refresh();
|
||
} catch (e) {
|
||
toast(e instanceof Error ? e.message : "通过评审失败");
|
||
} finally {
|
||
setActing(false);
|
||
}
|
||
};
|
||
|
||
const handlePin = async (level: 1 | 2) => {
|
||
setActing(true);
|
||
setOpen(false);
|
||
try {
|
||
// 再次点击当前级别 = 取消置顶
|
||
const next = pinLevel === level ? 0 : level;
|
||
const res = await apiTogglePin(postId, next as 0 | 1 | 2);
|
||
setPinLevel(res.pinned);
|
||
const okMsg =
|
||
res.pinned <= 0
|
||
? "已取消置顶"
|
||
: res.pinned === 2
|
||
? "已全局置顶"
|
||
: "已在本板块置顶";
|
||
toast(okMsg, "ok");
|
||
router.refresh();
|
||
} catch (e) {
|
||
toast(e instanceof Error ? e.message : "操作失败，请稍后重试");
|
||
} finally {
|
||
setActing(false);
|
||
}
|
||
};
|
||
|
||
const handleRecommend = async () => {
|
||
setActing(true);
|
||
setOpen(false);
|
||
try {
|
||
const res = await apiToggleRecommend(postId);
|
||
setIsRecommended(res.recommended);
|
||
toast(res.recommended ? "已设为推荐" : "已取消推荐", "ok");
|
||
router.refresh();
|
||
} catch {
|
||
toast("操作失败，请稍后重试");
|
||
} finally {
|
||
setActing(false);
|
||
}
|
||
};
|
||
|
||
const handleLock = async () => {
|
||
setActing(true);
|
||
setOpen(false);
|
||
try {
|
||
const res = await apiTogglePostLock(postId);
|
||
setIsLocked(res.locked);
|
||
toast(res.locked ? "已锁定，普通用户不可编辑与回复" : "已解除锁定", "ok");
|
||
router.refresh();
|
||
} catch {
|
||
toast("操作失败，请稍后重试");
|
||
} finally {
|
||
setActing(false);
|
||
}
|
||
};
|
||
|
||
if (!canManage) return null;
|
||
|
||
const itemCls =
|
||
"w-full flex items-center gap-2.5 px-4 py-2.5 text-[13px] transition-colors hover:bg-[var(--panel-2)] focus-visible:bg-[var(--panel-2)]";
|
||
|
||
return (
|
||
<div className="relative" ref={menuRef}>
|
||
<button
|
||
type="button"
|
||
onClick={() => setOpen((v) => !v)}
|
||
disabled={acting || deleting}
|
||
aria-haspopup="menu"
|
||
aria-expanded={open}
|
||
className="btn btn-line btn-sm"
|
||
style={open ? { borderColor: "var(--accent)", color: "var(--accent)" } : undefined}
|
||
>
|
||
<SlidersHorizontal size={13} /> 管理
|
||
<ChevronDown
|
||
size={13}
|
||
style={{ transition: "transform .15s", transform: open ? "rotate(180deg)" : "none" }}
|
||
/>
|
||
</button>
|
||
|
||
{open && (
|
||
<div
|
||
role="menu"
|
||
className="absolute right-0 mt-2 w-44 overflow-hidden z-50 j13-toast-in"
|
||
style={{
|
||
background: "var(--panel)",
|
||
border: "1px solid var(--line)",
|
||
borderRadius: "var(--r)",
|
||
boxShadow: "var(--shadow-lg)",
|
||
}}
|
||
>
|
||
{canApprove && (
|
||
<>
|
||
<button
|
||
type="button"
|
||
role="menuitem"
|
||
onClick={handleApprove}
|
||
className={itemCls}
|
||
style={{ color: "var(--accent)" }}
|
||
>
|
||
<BadgeCheck size={14} className="shrink-0" />
|
||
<span className="flex-1 text-left">通过评审</span>
|
||
</button>
|
||
<div style={{ height: 1, background: "var(--line)" }} />
|
||
</>
|
||
)}
|
||
{showPin && (
|
||
<>
|
||
{showGlobalPin && (
|
||
<button
|
||
type="button"
|
||
role="menuitem"
|
||
onClick={() => void handlePin(2)}
|
||
className={itemCls}
|
||
style={pinLevel === 2 ? { color: "var(--pin)" } : { color: "var(--ink)" }}
|
||
>
|
||
<Pin size={14} className="shrink-0" />
|
||
<span className="flex-1 text-left">全局置顶</span>
|
||
{pinLevel === 2 && <Check size={14} className="shrink-0" />}
|
||
</button>
|
||
)}
|
||
{showBoardPin && (
|
||
<button
|
||
type="button"
|
||
role="menuitem"
|
||
onClick={() => void handlePin(1)}
|
||
className={itemCls}
|
||
style={pinLevel === 1 ? { color: "var(--pin)" } : { color: "var(--ink)" }}
|
||
>
|
||
<Pin size={14} className="shrink-0" />
|
||
<span className="flex-1 text-left">板块置顶</span>
|
||
{pinLevel === 1 && <Check size={14} className="shrink-0" />}
|
||
</button>
|
||
)}
|
||
</>
|
||
)}
|
||
{isAdmin && (
|
||
<>
|
||
<button
|
||
type="button"
|
||
role="menuitem"
|
||
onClick={handleRecommend}
|
||
className={itemCls}
|
||
style={isRecommended ? { color: "var(--rec)" } : { color: "var(--ink)" }}
|
||
>
|
||
<Star size={14} className="shrink-0" />
|
||
<span className="flex-1 text-left">{isRecommended ? "取消推荐" : "推荐"}</span>
|
||
{isRecommended && <Check size={14} className="shrink-0" />}
|
||
</button>
|
||
<button
|
||
type="button"
|
||
role="menuitem"
|
||
onClick={handleLock}
|
||
className={itemCls}
|
||
style={isLocked ? { color: "var(--danger)" } : { color: "var(--ink)" }}
|
||
>
|
||
{isLocked ? (
|
||
<LockOpen size={14} className="shrink-0" />
|
||
) : (
|
||
<Lock size={14} className="shrink-0" />
|
||
)}
|
||
<span className="flex-1 text-left">{isLocked ? "解除锁定" : "锁定"}</span>
|
||
{isLocked && <Check size={14} className="shrink-0" />}
|
||
</button>
|
||
<div style={{ height: 1, background: "var(--line)" }} />
|
||
</>
|
||
)}
|
||
{showEdit && (
|
||
<Link
|
||
href={`/post/${postId}/edit`}
|
||
role="menuitem"
|
||
className={`${itemCls} items-center`}
|
||
style={{ color: "var(--ink)" }}
|
||
>
|
||
<Pencil size={14} className="shrink-0" />
|
||
<span className="flex-1 text-left">编辑帖子</span>
|
||
</Link>
|
||
)}
|
||
<button
|
||
type="button"
|
||
role="menuitem"
|
||
onClick={() => {
|
||
setOpen(false);
|
||
if (staffDeletingOther) setStaffDeleteOpen(true);
|
||
else setConfirmDelete(true);
|
||
}}
|
||
disabled={deleting}
|
||
className={`${itemCls} items-center`}
|
||
style={{ color: "var(--danger)" }}
|
||
>
|
||
<Trash2 size={14} className="shrink-0" />
|
||
<span className="flex-1 text-left">{deleting ? "删除中..." : "删除帖子"}</span>
|
||
</button>
|
||
</div>
|
||
)}
|
||
|
||
<ConfirmDialog
|
||
open={confirmDelete}
|
||
title="删除帖子"
|
||
message="确定要删除这篇帖子吗？列表将不再展示，打开原链接会提示已删除。"
|
||
confirmLabel="确认删除"
|
||
danger
|
||
busy={deleting}
|
||
onConfirm={() => void runDelete()}
|
||
onCancel={() => setConfirmDelete(false)}
|
||
/>
|
||
|
||
<StaffDeletePostModal
|
||
open={staffDeleteOpen}
|
||
title={title}
|
||
busy={deleting}
|
||
onClose={() => setStaffDeleteOpen(false)}
|
||
onConfirm={(opts) => void runDelete(opts)}
|
||
/>
|
||
</div>
|
||
);
|
||
}
|