393 lines
16 KiB
TypeScript
393 lines
16 KiB
TypeScript
import {
|
||
CheckCircleOutlined,
|
||
CloseCircleOutlined,
|
||
FileSearchOutlined,
|
||
FlagOutlined,
|
||
LoginOutlined,
|
||
PlusCircleOutlined,
|
||
ReloadOutlined,
|
||
} from "@ant-design/icons";
|
||
import { useCallback, useEffect, useMemo, useState } from "react";
|
||
import { communityClient, type ServerCommunityCase } from "../../api/communityClient";
|
||
import { reportClient, type AdminReportItem } from "../../api/reportClient";
|
||
import WorkspacePageShell from "../../components/WorkspacePageShell";
|
||
import "../../styles/pages/compliance.css";
|
||
import type { WebUserSession } from "../../types";
|
||
import { canManageCommunityCases, canReviewCommunity } from "./communityPermissions";
|
||
|
||
interface CommunityReviewPageProps {
|
||
session: WebUserSession | null;
|
||
onOpenLogin: () => void;
|
||
onOpenReport: () => void;
|
||
onOpenCaseAdd: () => void;
|
||
}
|
||
|
||
type ReviewStatus = "" | ServerCommunityCase["status"];
|
||
type ModerationTab = "cases" | "reports";
|
||
|
||
const REVIEW_STATUS_OPTIONS: Array<{ value: ReviewStatus; label: string }> = [
|
||
{ value: "pending", label: "待审核" },
|
||
{ value: "approved", label: "已通过" },
|
||
{ value: "rejected", label: "已驳回" },
|
||
{ value: "", label: "全部" },
|
||
];
|
||
|
||
const STATUS_LABEL: Record<ServerCommunityCase["status"], string> = {
|
||
pending: "待审核",
|
||
approved: "已通过",
|
||
rejected: "已驳回",
|
||
};
|
||
|
||
function getCaseCover(item: ServerCommunityCase): string {
|
||
return (
|
||
item.coverUrl ||
|
||
item.assets.find((asset) => asset.assetType === "cover" && asset.url)?.url ||
|
||
item.assets.find((asset) => (asset.assetType === "image" || asset.assetType === "asset") && asset.url)?.url ||
|
||
""
|
||
);
|
||
}
|
||
|
||
function getWorkflowStats(item: ServerCommunityCase): { nodes: number; edges: number } {
|
||
const workflow =
|
||
item.metadata.workflow ||
|
||
item.metadata.workflowSnapshot ||
|
||
(item.metadata.workflowData && typeof item.metadata.workflowData === "object"
|
||
? (item.metadata.workflowData as Record<string, unknown>)
|
||
: null);
|
||
|
||
if (!workflow || typeof workflow !== "object" || Array.isArray(workflow)) {
|
||
return { nodes: 0, edges: 0 };
|
||
}
|
||
|
||
const workflowRecord = workflow as Record<string, unknown>;
|
||
const nodes = Array.isArray(workflowRecord.nodes) ? workflowRecord.nodes.length : 0;
|
||
const edges = Array.isArray(workflowRecord.edges) ? workflowRecord.edges.length : 0;
|
||
return { nodes, edges };
|
||
}
|
||
|
||
function formatDate(value?: string | null): string {
|
||
if (!value) return "暂无时间";
|
||
const date = new Date(value);
|
||
if (Number.isNaN(date.getTime())) return value;
|
||
return date.toLocaleString("zh-CN", {
|
||
month: "2-digit",
|
||
day: "2-digit",
|
||
hour: "2-digit",
|
||
minute: "2-digit",
|
||
});
|
||
}
|
||
|
||
function compactType(value?: string | null): string {
|
||
return value?.trim() || "未填写";
|
||
}
|
||
|
||
export default function CommunityReviewPage({ session, onOpenLogin, onOpenReport, onOpenCaseAdd }: CommunityReviewPageProps) {
|
||
const allowed = canReviewCommunity(session);
|
||
const canAddCase = canManageCommunityCases(session);
|
||
const [activeTab, setActiveTab] = useState<ModerationTab>("cases");
|
||
const [status, setStatus] = useState<ReviewStatus>("pending");
|
||
const [cases, setCases] = useState<ServerCommunityCase[]>([]);
|
||
const [selectedCaseId, setSelectedCaseId] = useState<string | null>(null);
|
||
const [reports, setReports] = useState<AdminReportItem[]>([]);
|
||
const [selectedReportId, setSelectedReportId] = useState<string | null>(null);
|
||
const [reviewNote, setReviewNote] = useState("");
|
||
const [loadingCases, setLoadingCases] = useState(false);
|
||
const [loadingReports, setLoadingReports] = useState(false);
|
||
const [submitting, setSubmitting] = useState(false);
|
||
const [error, setError] = useState<string | null>(null);
|
||
|
||
const selectedCase = useMemo(
|
||
() => cases.find((item) => String(item.id) === selectedCaseId) ?? cases[0] ?? null,
|
||
[cases, selectedCaseId],
|
||
);
|
||
|
||
const selectedReport = useMemo(
|
||
() => reports.find((item) => String(item.id) === selectedReportId) ?? reports[0] ?? null,
|
||
[reports, selectedReportId],
|
||
);
|
||
|
||
const loadCases = useCallback(async () => {
|
||
if (!allowed) return;
|
||
setLoadingCases(true);
|
||
setError(null);
|
||
try {
|
||
const items = await communityClient.listCasesForReview(status);
|
||
setCases(items);
|
||
setSelectedCaseId((current) =>
|
||
current && items.some((item) => String(item.id) === current) ? current : String(items[0]?.id || ""),
|
||
);
|
||
} catch (loadError) {
|
||
setCases([]);
|
||
setError(loadError instanceof Error ? loadError.message : "审核列表加载失败");
|
||
} finally {
|
||
setLoadingCases(false);
|
||
}
|
||
}, [allowed, status]);
|
||
|
||
const loadReports = useCallback(async () => {
|
||
if (!allowed) return;
|
||
setLoadingReports(true);
|
||
setError(null);
|
||
try {
|
||
const items = await reportClient.listAdminReports();
|
||
setReports(items);
|
||
setSelectedReportId((current) =>
|
||
current && items.some((item) => String(item.id) === current) ? current : String(items[0]?.id || ""),
|
||
);
|
||
} catch (loadError) {
|
||
setReports([]);
|
||
setError(loadError instanceof Error ? loadError.message : "举报列表加载失败");
|
||
} finally {
|
||
setLoadingReports(false);
|
||
}
|
||
}, [allowed]);
|
||
|
||
useEffect(() => {
|
||
if (activeTab === "cases") {
|
||
void loadCases();
|
||
} else {
|
||
void loadReports();
|
||
}
|
||
}, [activeTab, loadCases, loadReports]);
|
||
|
||
const handleDecision = async (nextStatus: "approved" | "rejected") => {
|
||
if (!selectedCase || submitting) return;
|
||
setSubmitting(true);
|
||
setError(null);
|
||
try {
|
||
await communityClient.updateReviewStatus(selectedCase.id, nextStatus, reviewNote.trim());
|
||
setReviewNote("");
|
||
await loadCases();
|
||
} catch (submitError) {
|
||
setError(submitError instanceof Error ? submitError.message : "审核操作失败");
|
||
} finally {
|
||
setSubmitting(false);
|
||
}
|
||
};
|
||
|
||
if (!session) {
|
||
return (
|
||
<WorkspacePageShell title="社区审核" fullWidth className="community-review-page page-motion">
|
||
<section className="community-review-access">
|
||
<LoginOutlined />
|
||
<h1>请登录工作人员账号</h1>
|
||
<p>社区作品审核和举报查看需要登录后访问。</p>
|
||
<button type="button" onClick={onOpenLogin}>登录 / 注册</button>
|
||
</section>
|
||
</WorkspacePageShell>
|
||
);
|
||
}
|
||
|
||
if (!allowed) {
|
||
return (
|
||
<WorkspacePageShell title="社区审核" fullWidth className="community-review-page page-motion">
|
||
<section className="community-review-access">
|
||
<FileSearchOutlined />
|
||
<h1>当前账号没有审核权限</h1>
|
||
<p>请切换到 admin、staff、reviewer 或 moderator 角色账号后再进入审核台。</p>
|
||
</section>
|
||
</WorkspacePageShell>
|
||
);
|
||
}
|
||
|
||
const caseStats = selectedCase ? getWorkflowStats(selectedCase) : { nodes: 0, edges: 0 };
|
||
|
||
return (
|
||
<WorkspacePageShell title="社区审核" fullWidth className="community-review-page page-motion">
|
||
<div className="community-review-page__inner">
|
||
<section className="community-review-toolbar">
|
||
<div>
|
||
<span>内部审核台</span>
|
||
<h1>社区审核与举报</h1>
|
||
<p>读取现有服务器审核接口，处理待审作品并查看用户举报。</p>
|
||
</div>
|
||
<div className="community-review-toolbar__actions">
|
||
{canAddCase ? (
|
||
<button type="button" onClick={onOpenCaseAdd}>
|
||
<PlusCircleOutlined />
|
||
添加案例
|
||
</button>
|
||
) : null}
|
||
<button type="button" onClick={onOpenReport}>
|
||
<FlagOutlined />
|
||
举报入口
|
||
</button>
|
||
<button
|
||
type="button"
|
||
onClick={() => (activeTab === "cases" ? void loadCases() : void loadReports())}
|
||
disabled={loadingCases || loadingReports}
|
||
>
|
||
<ReloadOutlined />
|
||
刷新
|
||
</button>
|
||
</div>
|
||
</section>
|
||
|
||
<div className="community-review-tabs" role="tablist" aria-label="审核类型">
|
||
<button
|
||
type="button"
|
||
role="tab"
|
||
aria-selected={activeTab === "cases"}
|
||
className={activeTab === "cases" ? "is-active" : ""}
|
||
onClick={() => setActiveTab("cases")}
|
||
>
|
||
作品审核
|
||
</button>
|
||
<button
|
||
type="button"
|
||
role="tab"
|
||
aria-selected={activeTab === "reports"}
|
||
className={activeTab === "reports" ? "is-active" : ""}
|
||
onClick={() => setActiveTab("reports")}
|
||
>
|
||
举报工单
|
||
</button>
|
||
</div>
|
||
|
||
{error ? <p className="community-review-error">{error}</p> : null}
|
||
|
||
{activeTab === "cases" ? (
|
||
<>
|
||
<div className="community-review-status-tabs" role="tablist" aria-label="作品审核状态">
|
||
{REVIEW_STATUS_OPTIONS.map((option) => (
|
||
<button
|
||
key={option.value || "all"}
|
||
type="button"
|
||
role="tab"
|
||
aria-selected={status === option.value}
|
||
className={status === option.value ? "is-active" : ""}
|
||
onClick={() => setStatus(option.value)}
|
||
>
|
||
{option.label}
|
||
</button>
|
||
))}
|
||
</div>
|
||
|
||
<section className="community-review-layout">
|
||
<aside className="community-review-list" aria-label="作品列表">
|
||
{loadingCases ? <div className="community-review-list__empty">正在加载审核作品...</div> : null}
|
||
{!loadingCases && cases.length === 0 ? (
|
||
<div className="community-review-list__empty">暂无需要显示的作品</div>
|
||
) : null}
|
||
{cases.map((item) => (
|
||
<button
|
||
key={item.id}
|
||
type="button"
|
||
className={`community-review-list__item${String(item.id) === String(selectedCase?.id) ? " is-active" : ""}`}
|
||
onClick={() => setSelectedCaseId(String(item.id))}
|
||
>
|
||
{getCaseCover(item) ? <img src={getCaseCover(item)} alt="" /> : <span className="community-review-list__thumb" />}
|
||
<span>{STATUS_LABEL[item.status]}</span>
|
||
<strong>{item.title}</strong>
|
||
<small>{item.username || `UID ${item.userId || "-"}`} · {formatDate(item.updatedAt)}</small>
|
||
</button>
|
||
))}
|
||
</aside>
|
||
|
||
{selectedCase ? (
|
||
<article className="community-review-detail">
|
||
<div className="community-review-detail__cover">
|
||
{getCaseCover(selectedCase) ? <img src={getCaseCover(selectedCase)} alt={selectedCase.title} /> : null}
|
||
<span>{STATUS_LABEL[selectedCase.status]}</span>
|
||
</div>
|
||
<div className="community-review-detail__body">
|
||
<header>
|
||
<span>{selectedCase.tags[0] || "社区作品"}</span>
|
||
<h2>{selectedCase.title}</h2>
|
||
<p>{selectedCase.description || "作者未填写作品简介。"}</p>
|
||
</header>
|
||
<div className="community-review-meta">
|
||
<span>作者：{selectedCase.username || `UID ${selectedCase.userId || "-"}`}</span>
|
||
<span>状态：{STATUS_LABEL[selectedCase.status]}</span>
|
||
<span>节点：{caseStats.nodes}</span>
|
||
<span>连线：{caseStats.edges}</span>
|
||
<span>收藏：{selectedCase.favoriteCount}</span>
|
||
<span>点赞：{selectedCase.likeCount}</span>
|
||
</div>
|
||
{selectedCase.reviewNote ? (
|
||
<p className="community-review-note-preview">上次备注：{selectedCase.reviewNote}</p>
|
||
) : null}
|
||
<label className="community-review-note">
|
||
<span>审核备注</span>
|
||
<textarea
|
||
value={reviewNote}
|
||
onChange={(event) => setReviewNote(event.target.value)}
|
||
placeholder="填写通过说明或驳回原因"
|
||
/>
|
||
</label>
|
||
<div className="community-review-actions">
|
||
<button type="button" disabled={submitting} onClick={() => void handleDecision("rejected")}>
|
||
<CloseCircleOutlined />
|
||
驳回
|
||
</button>
|
||
<button type="button" disabled={submitting} onClick={() => void handleDecision("approved")}>
|
||
<CheckCircleOutlined />
|
||
通过
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
) : (
|
||
<div className="community-review-detail community-review-detail--empty">选择左侧作品查看详情</div>
|
||
)}
|
||
</section>
|
||
</>
|
||
) : (
|
||
<section className="community-review-layout community-review-layout--reports">
|
||
<aside className="community-review-list" aria-label="举报列表">
|
||
{loadingReports ? <div className="community-review-list__empty">正在加载举报...</div> : null}
|
||
{!loadingReports && reports.length === 0 ? (
|
||
<div className="community-review-list__empty">暂无举报工单</div>
|
||
) : null}
|
||
{reports.map((item) => (
|
||
<button
|
||
key={item.id}
|
||
type="button"
|
||
className={`community-review-list__item${String(item.id) === String(selectedReport?.id) ? " is-active" : ""}`}
|
||
onClick={() => setSelectedReportId(String(item.id))}
|
||
>
|
||
<span>{item.status}</span>
|
||
<strong>{item.title}</strong>
|
||
<small>{compactType(item.reportType)} · {formatDate(item.createdAt)}</small>
|
||
</button>
|
||
))}
|
||
</aside>
|
||
|
||
{selectedReport ? (
|
||
<article className="community-review-detail community-review-report-detail">
|
||
<div className="community-review-detail__body">
|
||
<header>
|
||
<span>{selectedReport.status}</span>
|
||
<h2>{selectedReport.title}</h2>
|
||
<p>{selectedReport.description || "举报人未填写详情。"}</p>
|
||
</header>
|
||
<div className="community-review-meta">
|
||
<span>举报类型：{compactType(selectedReport.reportType)}</span>
|
||
<span>对象类型：{compactType(selectedReport.targetType)}</span>
|
||
<span>对象 ID：{compactType(selectedReport.targetId)}</span>
|
||
<span>提交人：{selectedReport.username || selectedReport.contactName || "匿名"}</span>
|
||
<span>邮箱：{compactType(selectedReport.contactEmail)}</span>
|
||
<span>电话：{compactType(selectedReport.contactPhone)}</span>
|
||
</div>
|
||
{selectedReport.pageUrl ? (
|
||
<a className="community-review-link" href={selectedReport.pageUrl} target="_blank" rel="noreferrer">
|
||
打开举报页面来源
|
||
</a>
|
||
) : null}
|
||
<div className="community-review-report-raw">
|
||
<span>客户端信息</span>
|
||
<p>{selectedReport.userAgent || "暂无"}</p>
|
||
<small>{selectedReport.ipAddress || "未记录 IP"}</small>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
) : (
|
||
<div className="community-review-detail community-review-detail--empty">选择左侧举报查看详情</div>
|
||
)}
|
||
</section>
|
||
)}
|
||
</div>
|
||
</WorkspacePageShell>
|
||
);
|
||
}
|