feat(web): file manager v2 and shared organize wizard (FE-4)

- 左树可折叠(44px 图标条)、下载目录在前、上一级、初始位置记忆;列表名称副行(作品·季集 / 解析提示 / 目录计数)、状态列 120px - 行内 hover 2 个主操作;右键/⋯ 菜单按 v2 顺序,不适用隐藏、被阻止灰显带原因;批量栏"更多" - 详情抽屉:识别节(解析 + Top5 候选 + 按此整理)、整理记录节、版本目标、文本预览前 256 KB - 共享整理向导 components/organize-wizard:3 步(文件与作品表格/批量条 → 选项 → 预览并执行), TMDB 候选 external 就地建作品、最小体积、onExisting、命名来源、入库后刷新元数据、只看问题、分段着色、 plan_stale 自动重新预览、执行进度回查 /files/records;来源支持文件/下载任务/整理记录 - 重命名默认值取 suggest-name;批量刷新元数据走 scrape-batch;回收站条数、原位置链接、占用后改"还原到…" - 快捷键 Alt+↑、Ctrl/⌘+Enter、?;移动端单栏工具栏与底部批量栏 Co-Authored-By: Claude Opus 5.5 <[email protected]>
2026-09-28 16:26:41 +08:00
1 parent 09a6b0b5d3
commit c31df8b69a
@@ -17,9 +17,9 @@ 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 { DirTree } from "~/components/files/dir-tree.tsx";
+import { DirPicker } from "~/components/files/dir-picker.tsx";
 import { Checkbox } from "~/components/files/file-list.tsx";
-import { baseName, newIdempotencyKey } from "~/components/files/model.ts";
+import { baseName, newIdempotencyKey, parentRel } from "~/components/files/model.ts";
 import { Button, buttonVariants } from "~/components/ui/button.tsx";
 import {
  Dialog,
@@ -55,6 +55,8 @@ export default function FilesTrashPage() {
  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()) ?? [];
@@ -74,12 +76,25 @@ export default function FilesTrashPage() {
        onSuccess: (r) => {
          setPicked(new Set());
          setRestoreTo(null);
-          if (r.restored.length) toast.success(`已还原 ${r.restored.length} 项`);
-          for (const f of r.failed)
-            toast.error(
-              f.code === "exists" || f.code === "conflict" ? "原位置已被占用。用“还原到…”换个目录" : f.message,
-              { description: rows?.find((x) => x.id === f.id)?.originalPath },
+          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, "还原失败")),
      },
@@ -115,28 +130,27 @@ export default function FilesTrashPage() {
    },
    {
      key: "name",
-      header: "原位置",
+      header: "名称",
      cell: (r) => {
-        const root = rootName.get(r.rootId);
-        const snap = r.assetSnapshot as { title?: string; contentUnit?: string | null } | null;
+        const fail = failedIds.get(r.id);
        return (
-          <div className="flex min-w-0 max-w-lg items-start gap-2">
+          <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.originalPath}>
+              <p className="truncate text-foreground" title={r.trashPath}>
                {baseName(r.originalPath)}
              </p>
-              <p className="truncate font-mono text-meta text-muted-foreground" title={r.trashPath}>
-                {root?.name ?? r.rootId} / {r.originalPath}
-              </p>
-              {snap?.title ? (
-                <p className="text-meta text-muted-foreground">
-                  删除时关联:{snap.title}
-                  {snap.contentUnit ? ` ${snap.contentUnit}` : ""}(还原后资产不会自动恢复)
+              {fail ? (
+                <p className="text-meta text-destructive">
+                  {fail.code === "exists" || fail.code === "conflict"
+                    ? "原位置已被占用"
+                    : fail.code === "too_large"
+                      ? "跨卷还原超过大小上限"
+                      : fail.message}
                </p>
              ) : null}
            </div>
@@ -144,6 +158,26 @@ export default function FilesTrashPage() {
        );
      },
    },
+    {
+      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: "大小",
@@ -176,19 +210,50 @@ export default function FilesTrashPage() {
        </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">
-          <Button size="xs" variant="outline" onClick={() => doRestore([r.id])} disabled={restore.isPending}>
-            <RotateCcw />
-            还原
-          </Button>
-          <Button size="xs" variant="ghost" onClick={() => setRestoreTo([r.id])}>
-            还原到…
-          </Button>
+          {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"
@@ -209,13 +274,13 @@ export default function FilesTrashPage() {
    <>
      <PageHeader
        title="回收站"
-        description="删除的文件在这里保留到期后自动清除,到期前可以还原。"
+        description="到期后自动清除,到期前可以还原。还原不会恢复资产状态,需要时重新整理。"
        actions={
          <>
            {filesMockEnabled() ? <StatusBadge tone="warning">演示数据</StatusBadge> : null}
            <Link to="/console/files" className={buttonVariants({ variant: "outline", size: "sm" })}>
              <ArrowLeft />
-              文件
+              文件管理
            </Link>
          </>
        }
@@ -228,13 +293,13 @@ export default function FilesTrashPage() {
          onClick={() => doRestore([...picked])}
        >
          {restore.isPending ? <LoaderCircle className="animate-spin" /> : <RotateCcw />}
-          还原选中 {picked.size || ""}
+          {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={
@@ -274,7 +339,7 @@ export default function FilesTrashPage() {
        hasMore={trash.hasNextPage}
        onLoadMore={() => void trash.fetchNextPage()}
        loadingMore={trash.isFetchingNextPage}
-        empty={{ icon: Trash2, title: "回收站是空的", description: "在文件页删除的项会出现在这里。" }}
+        empty={{ icon: Trash2, title: "回收站是空的", description: "在文件管理里删除的项会出现在这里。" }}
      />

      <ConfirmDialog
@@ -287,7 +352,7 @@ export default function FilesTrashPage() {
        onConfirm={() => doPurge(purgeIds ?? undefined).then(() => setPurgeIds(null))}
      />

-      {/* 清空全部:二次确认,需输入“清空回收站” */}
+      {/* 清空全部:二次确认,需输入“清空” */}
      <ConfirmDialog
        open={purgeAll}
        onOpenChange={(o) => {
@@ -297,10 +362,11 @@ export default function FilesTrashPage() {
        title="清空回收站?"
        description={`全部 ${rows?.length ?? 0} 项(含未到期)将被清除,不可恢复。`}
        confirmLabel="清空"
+        confirmDisabled={confirmText.trim() !== "清空"}
        destructive
        onConfirm={() => {
-          if (confirmText.trim() !== "清空回收站") {
-            toast.error("输入“清空回收站”以确认");
+          if (confirmText.trim() !== "清空") {
+            toast.error("输入“清空”以确认");
            return Promise.reject(new Error("unconfirmed"));
          }
          return doPurge(rows?.map((r) => r.id)).then(() => setConfirmText(""));
@@ -309,8 +375,8 @@ export default function FilesTrashPage() {
        <Input
          value={confirmText}
          onChange={(e) => setConfirmText(e.target.value)}
-          placeholder="输入 清空回收站"
-          aria-label="输入 清空回收站 以确认"
+          placeholder="输入 清空"
+          aria-label="输入 清空 以确认"
        />
      </ConfirmDialog>

@@ -344,11 +410,9 @@ function RestoreToDialog({
      <DialogContent className="sm:max-w-lg">
        <DialogHeader>
          <DialogTitle>还原到…</DialogTitle>
-          <DialogDescription>{ids.length} 项 · 选一个可写目录。同名项已存在时跳过,不覆盖。</DialogDescription>
+          <DialogDescription>{ids.length} 项 · 选一个可写库根下的目录。同名项已存在时不覆盖。</DialogDescription>
        </DialogHeader>
-        <div className="max-h-80 overflow-y-auto rounded-xl border border-border p-1.5">
-          <DirTree roots={roots.data ?? []} current={target} onSelect={setTarget} pickOnly />
-        </div>
+        <DirPicker roots={roots.data ?? []} value={target} onChange={setTarget} className="max-h-80" />
        <DialogFooter>
          <Button variant="outline" onClick={onClose}>
            取消