rootandClaude Opus 5.5
4480fc346d
- 版本目标 → 收录版本(前后端用户可见字符串、能力描述、给模型的提示) - Agent 上游 / 上游 → 模型服务;界面上的 Agent / Agent 会话 → 智能体 / 智能体会话 - 身份歧义 / 识别有歧义 / 无法确定作品 → 没识别出作品;待识别(池) → 未识别 - 建档 → 加入媒体库;资产 → 文件;库根 → 媒体库目录;纳管 → 本工具 / 外部任务; 哨兵 → 标记文件 / 检查目录;站点快照 → 抓取;Feed / RSS 订阅 / 来源健康 → RSS - 代码标识符、API 字段名、迁移文件不改;glossary.md 同步;smoke 选择器跟随 Co-Authored-By: Claude Opus 5.5 <[email protected]>
438 lines
15 KiB
TypeScript
438 lines
15 KiB
TypeScript
import { ArrowLeft, Clock, File as FileIcon, Folder, LoaderCircle, RotateCcw, Trash, Trash2 } from "lucide-react";
|
|
import { useMemo, useState } from "react";
|
|
import { Link } from "react-router";
|
|
import { toast } from "sonner";
|
|
import { useSession } from "~/api/auth.ts";
|
|
import {
|
|
type FileRef,
|
|
filesErrorText,
|
|
filesMockEnabled,
|
|
type TrashItem,
|
|
useFileRoots,
|
|
usePurge,
|
|
useRestore,
|
|
useTrash,
|
|
} from "~/api/files.ts";
|
|
import { ConfirmDialog } from "~/components/console/confirm-dialog.tsx";
|
|
import { type DataColumn, DataTable } from "~/components/console/data-table.tsx";
|
|
import { PageHeader } from "~/components/console/page-header.tsx";
|
|
import { StatusBadge } from "~/components/console/status-badge.tsx";
|
|
import { DirPicker } from "~/components/files/dir-picker.tsx";
|
|
import { Checkbox } from "~/components/files/file-list.tsx";
|
|
import { baseName, newIdempotencyKey, parentRel } from "~/components/files/model.ts";
|
|
import { Button, buttonVariants } from "~/components/ui/button.tsx";
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogFooter,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
} from "~/components/ui/dialog.tsx";
|
|
import { Input } from "~/components/ui/input.tsx";
|
|
import { relTime } from "~/components/workbench/release-fields.ts";
|
|
import { actorText } from "~/lib/labels.ts";
|
|
import { formatBytes, formatDateTime } from "~/lib/utils.ts";
|
|
|
|
const DAY = 86_400_000;
|
|
|
|
function expiryTone(iso: string): "destructive" | "warning" | "neutral" {
|
|
const left = Date.parse(iso) - Date.now();
|
|
if (left <= 0) return "destructive";
|
|
if (left < DAY) return "warning";
|
|
return "neutral";
|
|
}
|
|
|
|
export default function FilesTrashPage() {
|
|
const trash = useTrash();
|
|
const roots = useFileRoots();
|
|
const session = useSession();
|
|
const isAdmin = session.data?.actor?.type === "admin";
|
|
const restore = useRestore();
|
|
const purge = usePurge();
|
|
const [picked, setPicked] = useState<Set<string>>(new Set());
|
|
const [restoreTo, setRestoreTo] = useState<string[] | null>(null);
|
|
const [purgeAll, setPurgeAll] = useState(false);
|
|
const [purgeIds, setPurgeIds] = useState<string[] | null>(null);
|
|
const [confirmText, setConfirmText] = useState("");
|
|
/** 还原失败的项:id → 原因(原位置被占用时按钮换成"还原到…") */
|
|
const [failedIds, setFailedIds] = useState<Map<string, { code: string; message: string }>>(new Map());
|
|
const rows = trash.data?.pages.flatMap((p) => p.items);
|
|
const rootName = useMemo(() => new Map((roots.data ?? []).map((r) => [r.id, r])), [roots.data]);
|
|
const expired = rows?.filter((r) => Date.parse(r.expiresAt) <= Date.now()) ?? [];
|
|
|
|
const toggle = (id: string) =>
|
|
setPicked((p) => {
|
|
const n = new Set(p);
|
|
if (n.has(id)) n.delete(id);
|
|
else n.add(id);
|
|
return n;
|
|
});
|
|
|
|
const doRestore = (ids: string[], target?: FileRef) =>
|
|
restore.mutate(
|
|
{ idempotencyKey: newIdempotencyKey(), ids, target },
|
|
{
|
|
onSuccess: (r) => {
|
|
setPicked(new Set());
|
|
setRestoreTo(null);
|
|
setFailedIds((prev) => {
|
|
const next = new Map(prev);
|
|
for (const x of r.restored) next.delete(x.id);
|
|
for (const f of r.failed) next.set(f.id, { code: f.code, message: f.message });
|
|
return next;
|
|
});
|
|
if (r.restored.length)
|
|
toast.success(
|
|
`已还原 ${r.restored.length} 项`,
|
|
r.recordId
|
|
? {
|
|
action: {
|
|
label: "整理记录",
|
|
onClick: () => window.location.assign(`/console/organize/${r.recordId}`),
|
|
},
|
|
}
|
|
: undefined,
|
|
);
|
|
if (r.failed.length) toast.error(`${r.failed.length} 项没有还原，原因见列表`);
|
|
},
|
|
onError: (e) => toast.error(filesErrorText(e, "还原失败")),
|
|
},
|
|
);
|
|
|
|
const doPurge = (ids?: string[]) =>
|
|
purge
|
|
.mutateAsync({ idempotencyKey: newIdempotencyKey(), ids })
|
|
.then((r) => {
|
|
setPicked(new Set());
|
|
toast.success(`已清除 ${r.purged.length} 项${r.failed.length ? `,${r.failed.length} 项失败` : ""}`);
|
|
})
|
|
.catch((e) => {
|
|
toast.error(filesErrorText(e, "清除失败"));
|
|
throw e;
|
|
});
|
|
|
|
const columns: DataColumn<TrashItem>[] = [
|
|
{
|
|
key: "pick",
|
|
header: (
|
|
<Checkbox
|
|
checked={!!rows?.length && picked.size === rows.length}
|
|
partial={picked.size > 0 && picked.size < (rows?.length ?? 0)}
|
|
label="全选"
|
|
onToggle={() => setPicked(picked.size === rows?.length ? new Set() : new Set(rows?.map((r) => r.id)))}
|
|
/>
|
|
),
|
|
className: "w-10",
|
|
cell: (r) => (
|
|
<Checkbox checked={picked.has(r.id)} label={`选择 ${baseName(r.originalPath)}`} onToggle={() => toggle(r.id)} />
|
|
),
|
|
},
|
|
{
|
|
key: "name",
|
|
header: "名称",
|
|
cell: (r) => {
|
|
const fail = failedIds.get(r.id);
|
|
return (
|
|
<div className="flex min-w-0 max-w-md items-start gap-2">
|
|
{r.isDir ? (
|
|
<Folder className="mt-0.5 h-4 w-4 shrink-0 text-muted-foreground" />
|
|
) : (
|
|
<FileIcon className="mt-0.5 h-4 w-4 shrink-0 text-muted-foreground" />
|
|
)}
|
|
<div className="min-w-0">
|
|
<p className="truncate text-foreground" title={r.trashPath}>
|
|
{baseName(r.originalPath)}
|
|
</p>
|
|
{fail ? (
|
|
<p className="text-meta text-destructive">
|
|
{fail.code === "exists" || fail.code === "conflict"
|
|
? "原位置已被占用"
|
|
: fail.code === "too_large"
|
|
? "跨卷还原超过大小上限"
|
|
: fail.message}
|
|
</p>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
);
|
|
},
|
|
},
|
|
{
|
|
key: "origin",
|
|
header: "原位置",
|
|
hideBelow: "md",
|
|
cell: (r) => {
|
|
const root = rootName.get(r.rootId);
|
|
const dir = parentRel(r.originalPath);
|
|
return root ? (
|
|
<Link
|
|
to={`/console/files?root=${encodeURIComponent(r.rootId)}${dir ? `&path=${encodeURIComponent(dir)}` : ""}`}
|
|
className="block max-w-xs truncate font-mono text-meta text-muted-foreground hover:text-foreground hover:underline"
|
|
title={`${root.hostPath}/${r.originalPath}`}
|
|
>
|
|
{dir ? `${root.name}/${dir}` : root.name}
|
|
</Link>
|
|
) : (
|
|
<span className="block max-w-xs truncate font-mono text-meta text-muted-foreground">{r.rootId}</span>
|
|
);
|
|
},
|
|
},
|
|
{
|
|
key: "size",
|
|
header: "大小",
|
|
hideBelow: "sm",
|
|
align: "right",
|
|
cell: (r) => <span className="whitespace-nowrap">{formatBytes(r.size, 1)}</span>,
|
|
},
|
|
{
|
|
key: "deleted",
|
|
header: "删除",
|
|
hideBelow: "md",
|
|
cell: (r) => (
|
|
<span
|
|
className="block max-w-40 text-muted-foreground"
|
|
title={`${formatDateTime(r.deletedAt)}${r.actor ? ` · ${r.actor}` : ""}`}
|
|
>
|
|
<span className="block whitespace-nowrap">{relTime(r.deletedAt)}</span>
|
|
{r.actor ? <span className="block truncate text-meta">{actorText(r.actor)}</span> : null}
|
|
</span>
|
|
),
|
|
},
|
|
{
|
|
key: "expires",
|
|
header: "到期清除",
|
|
cell: (r) => (
|
|
<span title={formatDateTime(r.expiresAt)}>
|
|
<StatusBadge tone={expiryTone(r.expiresAt)}>
|
|
{Date.parse(r.expiresAt) <= Date.now() ? "已到期" : relTime(r.expiresAt)}
|
|
</StatusBadge>
|
|
</span>
|
|
),
|
|
},
|
|
{
|
|
key: "asset",
|
|
header: "媒体库记录",
|
|
hideBelow: "lg",
|
|
cell: (r) => {
|
|
const snap = r.assetSnapshot as { title?: string; contentUnit?: string | null; mediaEntityId?: string } | null;
|
|
if (!snap?.title) return <span className="text-muted-foreground">—</span>;
|
|
const label = `${snap.title}${snap.contentUnit ? ` ${snap.contentUnit}` : ""}`;
|
|
return (
|
|
<span className="block max-w-48 text-meta" title="删除时已从媒体库移除；还原不会自动恢复">
|
|
{snap.mediaEntityId ? (
|
|
<Link className="underline underline-offset-2" to={`/console/library/${snap.mediaEntityId}`}>
|
|
{label}
|
|
</Link>
|
|
) : (
|
|
label
|
|
)}
|
|
<span className="block text-muted-foreground">已退役</span>
|
|
</span>
|
|
);
|
|
},
|
|
},
|
|
{
|
|
key: "act",
|
|
header: <span className="sr-only">操作</span>,
|
|
align: "right",
|
|
cell: (r) => (
|
|
<div className="flex justify-end gap-1">
|
|
{failedIds.get(r.id)?.code === "exists" || failedIds.get(r.id)?.code === "conflict" ? (
|
|
<Button size="xs" variant="outline" onClick={() => setRestoreTo([r.id])}>
|
|
<RotateCcw />
|
|
还原到…
|
|
</Button>
|
|
) : (
|
|
<>
|
|
<Button size="xs" variant="outline" onClick={() => doRestore([r.id])} disabled={restore.isPending}>
|
|
<RotateCcw />
|
|
还原
|
|
</Button>
|
|
<Button size="xs" variant="ghost" onClick={() => setRestoreTo([r.id])}>
|
|
还原到…
|
|
</Button>
|
|
</>
|
|
)}
|
|
{isAdmin ? (
|
|
<Button
|
|
size="xs"
|
|
variant="ghost"
|
|
aria-label="立即清除"
|
|
title="立即清除"
|
|
onClick={() => setPurgeIds([r.id])}
|
|
>
|
|
<Trash2 />
|
|
</Button>
|
|
) : null}
|
|
</div>
|
|
),
|
|
},
|
|
];
|
|
|
|
return (
|
|
<>
|
|
<PageHeader
|
|
title="回收站"
|
|
description="到期后自动清除，到期前可以还原。还原不会恢复媒体库记录，需要时重新整理。"
|
|
actions={
|
|
<>
|
|
{filesMockEnabled() ? <StatusBadge tone="warning">演示数据</StatusBadge> : null}
|
|
<Link to="/console/files" className={buttonVariants({ variant: "outline", size: "sm" })}>
|
|
<ArrowLeft />
|
|
文件管理
|
|
</Link>
|
|
</>
|
|
}
|
|
/>
|
|
<div className="mb-4 flex flex-wrap items-center gap-2">
|
|
<Button
|
|
size="sm"
|
|
variant="outline"
|
|
disabled={!picked.size || restore.isPending}
|
|
onClick={() => doRestore([...picked])}
|
|
>
|
|
{restore.isPending ? <LoaderCircle className="animate-spin" /> : <RotateCcw />}
|
|
{picked.size ? `还原 ${picked.size} 项` : "还原选中"}
|
|
</Button>
|
|
{isAdmin ? (
|
|
<>
|
|
<Button size="sm" variant="outline" disabled={!picked.size} onClick={() => setPurgeIds([...picked])}>
|
|
<Trash2 />
|
|
{picked.size ? `清除 ${picked.size} 项` : "清除选中"}
|
|
</Button>
|
|
<ConfirmDialog
|
|
trigger={
|
|
<Button size="sm" variant="outline" disabled={!expired.length}>
|
|
<Clock />
|
|
清除已到期 {expired.length || ""}
|
|
</Button>
|
|
}
|
|
title="清除已到期的项？"
|
|
description={`${expired.length} 项已过保留期，清除后不可恢复。`}
|
|
confirmLabel="清除"
|
|
destructive
|
|
onConfirm={() => doPurge(undefined)}
|
|
/>
|
|
<Button
|
|
size="sm"
|
|
variant="destructive"
|
|
className="ml-auto"
|
|
disabled={!rows?.length}
|
|
onClick={() => setPurgeAll(true)}
|
|
>
|
|
<Trash />
|
|
清空回收站
|
|
</Button>
|
|
</>
|
|
) : (
|
|
<span className="ml-auto text-meta text-muted-foreground">立即清除需要管理员会话。</span>
|
|
)}
|
|
</div>
|
|
<DataTable
|
|
columns={columns}
|
|
rows={rows}
|
|
rowKey={(r) => r.id}
|
|
loading={trash.isPending}
|
|
error={trash.error}
|
|
onRetry={() => void trash.refetch()}
|
|
hasMore={trash.hasNextPage}
|
|
onLoadMore={() => void trash.fetchNextPage()}
|
|
loadingMore={trash.isFetchingNextPage}
|
|
empty={{ icon: Trash2, title: "回收站是空的", description: "在文件管理里删除的项会出现在这里。" }}
|
|
groupBy={
|
|
new Set(rows?.map((r) => r.rootId)).size > 1
|
|
? {
|
|
key: (r) => r.rootId,
|
|
label: (k) => rootName.get(k)?.name ?? k,
|
|
storageKey: "files-trash-by-root",
|
|
}
|
|
: undefined
|
|
}
|
|
/>
|
|
|
|
<ConfirmDialog
|
|
open={!!purgeIds}
|
|
onOpenChange={(o) => !o && setPurgeIds(null)}
|
|
title={`立即清除 ${purgeIds?.length ?? 0} 项？`}
|
|
description="清除后不可恢复。"
|
|
confirmLabel="清除"
|
|
destructive
|
|
onConfirm={() => doPurge(purgeIds ?? undefined).then(() => setPurgeIds(null))}
|
|
/>
|
|
|
|
{/* 清空全部:二次确认,需输入“清空” */}
|
|
<ConfirmDialog
|
|
open={purgeAll}
|
|
onOpenChange={(o) => {
|
|
setPurgeAll(o);
|
|
if (!o) setConfirmText("");
|
|
}}
|
|
title="清空回收站？"
|
|
description={`全部 ${rows?.length ?? 0} 项（含未到期）将被清除，不可恢复。`}
|
|
confirmLabel="清空"
|
|
confirmDisabled={confirmText.trim() !== "清空"}
|
|
destructive
|
|
onConfirm={() => {
|
|
if (confirmText.trim() !== "清空") {
|
|
toast.error("输入「清空」以确认");
|
|
return Promise.reject(new Error("unconfirmed"));
|
|
}
|
|
return doPurge(rows?.map((r) => r.id)).then(() => setConfirmText(""));
|
|
}}
|
|
>
|
|
<Input
|
|
value={confirmText}
|
|
onChange={(e) => setConfirmText(e.target.value)}
|
|
placeholder="输入 清空"
|
|
aria-label="输入 清空 以确认"
|
|
/>
|
|
</ConfirmDialog>
|
|
|
|
{restoreTo ? (
|
|
<RestoreToDialog
|
|
ids={restoreTo}
|
|
onClose={() => setRestoreTo(null)}
|
|
onPick={(t) => doRestore(restoreTo, t)}
|
|
pending={restore.isPending}
|
|
/>
|
|
) : null}
|
|
</>
|
|
);
|
|
}
|
|
|
|
function RestoreToDialog({
|
|
ids,
|
|
onClose,
|
|
onPick,
|
|
pending,
|
|
}: {
|
|
ids: string[];
|
|
onClose: () => void;
|
|
onPick: (t: FileRef) => void;
|
|
pending: boolean;
|
|
}) {
|
|
const roots = useFileRoots();
|
|
const [target, setTarget] = useState<FileRef | null>(null);
|
|
return (
|
|
<Dialog open onOpenChange={(o) => !o && onClose()}>
|
|
<DialogContent className="sm:max-w-lg">
|
|
<DialogHeader>
|
|
<DialogTitle>还原到…</DialogTitle>
|
|
<DialogDescription>{ids.length} 项 · 选一个可写媒体库目录下的目录。同名项已存在时不覆盖。</DialogDescription>
|
|
</DialogHeader>
|
|
<DirPicker roots={roots.data ?? []} value={target} onChange={setTarget} className="max-h-80" />
|
|
<DialogFooter>
|
|
<Button variant="outline" onClick={onClose}>
|
|
取消
|
|
</Button>
|
|
<Button disabled={!target || pending} onClick={() => target && onPick(target)}>
|
|
{pending ? <LoaderCircle className="animate-spin" /> : <RotateCcw />}
|
|
还原到这里
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
}
|