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]>

apps/web/app/components/files/dialogs.tsx

@@ -5,9 +5,11 @@ import {
   FolderPlus,
   LoaderCircle,
   PenLine,
-  Sparkles,
+  RefreshCw,
   Trash2,
   TriangleAlert,
+  Undo2,
+  Wand2,
 } from "lucide-react";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { Link } from "react-router";
@@ -16,19 +18,22 @@ import {
   type FileEntry,
   type FileRef,
   type FileRoot,
+  type FilesScrapeBatchResult,
+  type FilesSuggestNameResult,
   type FilesTransferResult,
   filesErrorReason,
   filesErrorText,
   useDelete,
   useFileStat,
-  useIdentify,
   useMkdir,
   useMove,
   useRename,
-  useScrape,
+  useScrapeBatch,
+  useSuggestName,
 } from "~/api/files.ts";
 import { FormField } from "~/components/console/form-field.tsx";
 import { StatusBadge } from "~/components/console/status-badge.tsx";
+import { PathSegments } from "~/components/organize-wizard/path-segments.tsx";
 import { Button } from "~/components/ui/button.tsx";
 import {
   Dialog,
@@ -41,15 +46,15 @@ import {
 import { Input } from "~/components/ui/input.tsx";
 import { Switch } from "~/components/ui/switch.tsx";
 import { cn, formatBytes } from "~/lib/utils.ts";
-import { DirTree } from "./dir-tree.tsx";
+import { DirPicker } from "./dir-picker.tsx";
 import {
   baseName,
   deleteBlockText,
   nameProblem,
+  nameTaken,
   newIdempotencyKey,
   splitCommon,
   stemRange,
-  suggestName,
 } from "./model.ts";
 
 // ─── 共用 ───────────────────────────────────────────────────────
@@ -177,29 +182,97 @@ export function MkdirDialog({
 
 // ─── 重命名 ─────────────────────────────────────────────────────
 
-export function RenameDialog({ root, entry, onClose }: { root: FileRoot; entry: FileEntry; onClose: () => void }) {
+const SUGGEST_REASON: Record<string, string> = {
+  identity_uncertain: "识别不可信,没有推荐名",
+};
+const TEMPLATE_SOURCE: Record<string, string> = { entity: "作品覆盖", root: "库根", global: "全局", override: "覆写" };
+
+function suggestReasonText(r: string | null): string {
+  if (!r) return "没有推荐名";
+  if (SUGGEST_REASON[r]) return SUGGEST_REASON[r] as string;
+  if (r.startsWith("naming_failed")) return `命名模板渲染失败:${r.replace(/^naming_failed:\s*/, "")}`;
+  return r;
+}
+
+/**
+ * 重命名(§8):默认值取命名模板推荐名(POST /files/suggest-name),用户没改过时自动填入;
+ * `按模板生成` 重新取;同名即时提示;输入停顿后 dryRun 列出一起改名的附属文件与资产/绑定同步。
+ */
+export function RenameDialog({
+  root,
+  entry,
+  siblings = [],
+  onClose,
+}: {
+  root: FileRoot;
+  entry: FileEntry;
+  /** 当前目录其他项的名称(同名即时提示) */
+  siblings?: string[];
+  onClose: () => void;
+}) {
   const isDir = entry.type === "dir";
   const [name, setName] = useState(entry.name);
+  const edited = useRef(false);
   const [withSidecars, setWithSidecars] = useState(true);
   const [err, setErr] = useState<string | null>(null);
+  const [suggested, setSuggested] = useState<FilesSuggestNameResult | null>(null);
   const inputRef = useRef<HTMLInputElement>(null);
   const key = useMemo(() => newIdempotencyKey(), []);
   const preview = useRename();
   const exec = useRename();
-  const identify = useIdentify();
+  const suggest = useSuggestName();
   const debounced = useDebounced(name.trim(), 350);
   const problem = nameProblem(name);
   const changed = name.trim() !== entry.name;
+  const taken = nameTaken(name, entry.name, siblings);
+  const canSuggest = isDir || entry.fileKind === "video";
 
-  useEffect(() => {
+  const selectStem = (v: string) => {
     const el = inputRef.current;
     if (!el) return;
     el.focus();
-    const [a, b] = stemRange(entry.name, isDir);
-    el.setSelectionRange(a, b);
-  }, [entry.name, isDir]);
+    const [a, b] = stemRange(v, isDir);
+    requestAnimationFrame(() => el.setSelectionRange(a, b));
+  };
 
-  // 输入停顿后 dryRun:列出将一起改名的 sidecars 与资产/绑定同步
+  // biome-ignore lint/correctness/useExhaustiveDependencies: 打开时选中主名一次
+  useEffect(() => selectStem(entry.name), [entry.name, isDir]);
+
+  const runSuggest = (apply: boolean) =>
+    suggest.mutate(
+      { root: root.id, path: entry.path },
+      {
+        onSuccess: (r) => {
+          setSuggested(r);
+          if (r.name && apply) {
+            setName(r.name);
+            setErr(null);
+            selectStem(r.name);
+          }
+        },
+      },
+    );
+
+  // 打开时取推荐名;用户还没动过输入框就直接填入
+  const suggestMutate = suggest.mutate;
+  // biome-ignore lint/correctness/useExhaustiveDependencies: 只在打开时取一次
+  useEffect(() => {
+    if (!canSuggest) return;
+    suggestMutate(
+      { root: root.id, path: entry.path },
+      {
+        onSuccess: (r) => {
+          setSuggested(r);
+          if (r.name && r.name !== entry.name && !edited.current) {
+            setName(r.name);
+            selectStem(r.name);
+          }
+        },
+      },
+    );
+  }, [suggestMutate]);
+
+  // 输入停顿后 dryRun:列出将一起改名的附属文件与资产/绑定同步
   const previewMutate = preview.mutate;
   useEffect(() => {
     if (!debounced || debounced === entry.name || nameProblem(debounced)) return;
@@ -213,31 +286,17 @@ export function RenameDialog({ root, entry, onClose }: { root: FileRoot; entry:
     });
   }, [debounced, withSidecars, entry.name, entry.path, key, root.id, previewMutate]);
 
-  const suggest = () =>
-    identify.mutate(
-      { items: [{ root: root.id, path: entry.path }] },
-      {
-        onSuccess: (r) => {
-          const it = r.items[0];
-          const c = it?.candidates[0];
-          if (!it || !c) return toast.info("识别结果不可信,没有建议名");
-          setName(suggestName(c, it.parsed, entry.name, isDir));
-          setErr(null);
-        },
-        onError: (e) => toast.error(filesErrorText(e, "识别失败")),
-      },
-    );
-
   const submit = (ev: React.FormEvent) => {
     ev.preventDefault();
     if (problem) return setErr(problem);
     if (!changed) return onClose();
+    if (taken) return setErr("同名已存在,不会覆盖");
     exec.mutate(
       { idempotencyKey: key, root: root.id, path: entry.path, newName: name.trim(), withSidecars, dryRun: false },
       {
         onSuccess: (r) => {
           toast.success(
-            `已改名${r.renames.length > 1 ? `(含 ${r.renames.length - 1} 个附属文件)` : ""}`,
+            `已重命名${r.renames.length > 1 ? `(含 ${r.renames.length - 1} 个附属文件)` : ""}`,
             r.recordId
               ? {
                   action: {
@@ -253,9 +312,9 @@ export function RenameDialog({ root, entry, onClose }: { root: FileRoot; entry:
           const reason = filesErrorReason(e);
           setErr(
             reason === "exists"
-              ? "目标名已存在,不会覆盖"
+              ? "同名已存在,不会覆盖"
               : reason === "download_active"
-                ? "正在做种,改名会让下载器找不到文件"
+                ? "做种中,改名会让下载器找不到文件"
                 : filesErrorText(e),
           );
         },
@@ -265,6 +324,7 @@ export function RenameDialog({ root, entry, onClose }: { root: FileRoot; entry:
 
   const pv = preview.data && preview.variables?.newName === debounced ? preview.data : null;
   const pvErr = preview.error && preview.variables?.newName === debounced ? preview.error : null;
+  const usingSuggestion = !!suggested?.name && name.trim() === suggested.name;
 
   return (
     <Dialog open onOpenChange={(o) => !o && onClose()}>
@@ -274,37 +334,85 @@ export function RenameDialog({ root, entry, onClose }: { root: FileRoot; entry:
             <DialogTitle>重命名</DialogTitle>
             <DialogDescription className="break-all">{entry.name}</DialogDescription>
           </DialogHeader>
-          <FormField label="新名称" htmlFor="rename-name" error={err ?? (problem && changed ? problem : null)}>
+          <FormField
+            label="新名称"
+            htmlFor="rename-name"
+            error={err ?? (problem && changed ? problem : taken ? "同名已存在,不会覆盖" : null)}
+          >
             <div className="flex gap-2">
               <Input
                 id="rename-name"
                 ref={inputRef}
                 value={name}
-                aria-invalid={!!err}
+                aria-invalid={!!err || taken}
                 onChange={(e) => {
                   setName(e.target.value);
+                  edited.current = true;
                   setErr(null);
                 }}
                 className="font-mono"
               />
-              {entry.fileKind === "video" || isDir ? (
-                <Button type="button" variant="outline" onClick={suggest} disabled={identify.isPending}>
-                  {identify.isPending ? <LoaderCircle className="animate-spin" /> : <Sparkles />}
-                  建议名
+              {canSuggest ? (
+                <Button type="button" variant="outline" onClick={() => runSuggest(true)} disabled={suggest.isPending}>
+                  {suggest.isPending ? <LoaderCircle className="animate-spin" /> : <Wand2 />}
+                  按模板生成
                 </Button>
               ) : null}
             </div>
           </FormField>
+          {canSuggest ? (
+            <div className="-mt-2 space-y-1 text-meta text-muted-foreground">
+              {suggest.isPending && !suggested ? (
+                <p className="flex items-center gap-1.5">
+                  <LoaderCircle className="h-3 w-3 animate-spin" /> 取推荐名…
+                </p>
+              ) : suggest.error ? (
+                <p className="text-destructive">{filesErrorText(suggest.error, "取推荐名失败")}</p>
+              ) : suggested && !suggested.name ? (
+                <p>{suggestReasonText(suggested.reason)}</p>
+              ) : suggested?.name ? (
+                <>
+                  <p className="flex flex-wrap items-center gap-x-2">
+                    {suggested.name === entry.name
+                      ? "当前名称与命名模板一致"
+                      : usingSuggestion
+                        ? "已填入推荐名"
+                        : `推荐名:${suggested.name}`}
+                    {suggested.templateSource
+                      ? `· 模板来源:${TEMPLATE_SOURCE[suggested.templateSource] ?? suggested.templateSource}`
+                      : ""}
+                    {usingSuggestion && name.trim() !== entry.name ? (
+                      <button
+                        type="button"
+                        className="inline-flex items-center gap-1 underline underline-offset-2 hover:text-foreground"
+                        onClick={() => {
+                          setName(entry.name);
+                          edited.current = true;
+                          selectStem(entry.name);
+                        }}
+                      >
+                        <Undo2 className="h-3 w-3" />
+                        恢复原名
+                      </button>
+                    ) : null}
+                  </p>
+                  {suggested.segments.length > 1 ? (
+                    <PathSegments segments={suggested.segments} className="text-muted-foreground" />
+                  ) : null}
+                </>
+              ) : null}
+            </div>
+          ) : null}
           {!isDir ? (
             <div className="flex items-center justify-between gap-3 text-caption">
               <span>
                 同名附属文件一起改
-                <span className="block text-meta text-muted-foreground">同 stem 的字幕 / NFO / 图片</span>
+                <span className="block text-meta text-muted-foreground">主干相同的字幕、NFO、图片</span>
               </span>
               <Switch checked={withSidecars} onCheckedChange={setWithSidecars} aria-label="同名附属文件一起改" />
             </div>
           ) : null}
-          {changed && !problem ? (
+          {changed && !problem && !taken ? (
             <div className="space-y-2">
               {preview.isPending ? (
                 <p className="flex items-center gap-2 text-meta text-muted-foreground">
@@ -325,10 +433,10 @@ export function RenameDialog({ root, entry, onClose }: { root: FileRoot; entry:
                     ))}
                   </ul>
                   {pv.assetLocations > 0 ? (
-                    <Notice tone="neutral">将同步 {pv.assetLocations} 条资产位置,并写一条整理记录。</Notice>
+                    <Notice tone="neutral">同步 {pv.assetLocations} 条资产位置,写一条整理记录。</Notice>
                   ) : null}
                   {pv.bindings.length > 0 ? (
-                    <Notice tone="warning">这是作品/季的绑定目录。改名后旧绑定标为已替代,新集入库到新目录。</Notice>
+                    <Notice tone="warning">这是作品或季的绑定目录。改名后旧绑定标为已替代,之后入库用新目录。</Notice>
                   ) : null}
                 </>
               ) : null}
@@ -338,7 +446,7 @@ export function RenameDialog({ root, entry, onClose }: { root: FileRoot; entry:
             <Button type="button" variant="outline" onClick={onClose}>
               取消
             </Button>
-            <Button type="submit" disabled={exec.isPending || !changed || !!problem}>
+            <Button type="submit" disabled={exec.isPending || !changed || !!problem || taken}>
               {exec.isPending ? <LoaderCircle className="animate-spin" /> : <PenLine />}
               重命名
             </Button>
@@ -418,7 +526,7 @@ export function TransferDialog({
         onError: (e) => {
           const reason = filesErrorReason(e);
           if (reason === "plan_stale") {
-            setErr("源文件在预览后有变化,已重新预览。确认后再执行。");
+            setErr("源文件在预览后有变化,已重新预览");
             runPreview(target, mode);
           } else setErr(filesErrorText(e));
         },
@@ -432,8 +540,8 @@ export function TransferDialog({
         <DialogHeader>
           <DialogTitle>{mode === "move" ? "移动到…" : "复制到…"}</DialogTitle>
           <DialogDescription>
-            {items.length === 1 ? baseName(items[0]?.path ?? "") : `${items.length} 项`} ·
-            先预览路径、冲突与空间,确认后执行。跨卷按复制 → 核验 → 删源执行。
+            {items.length === 1 ? baseName(items[0]?.path ?? "") : `${items.length} 项`} · 先预览再执行。跨卷移动按复制
+            → 核验 → 删源。
           </DialogDescription>
         </DialogHeader>
         <div className="grid min-h-0 gap-4 overflow-y-auto md:grid-cols-[15rem_minmax(0,1fr)]">
@@ -459,19 +567,16 @@ export function TransferDialog({
                 </button>
               ))}
             </div>
-            <div className="max-h-72 overflow-y-auto rounded-xl border border-border p-1.5 md:max-h-96">
-              <DirTree
-                roots={roots}
-                current={target}
-                pickOnly
-                defaultOpen={roots.filter((r) => r.writable && r.health !== "offline").map((r) => r.id)}
-                onSelect={(loc) => {
-                  setTarget(loc);
-                  runPreview(loc, mode);
-                }}
-              />
-            </div>
-            <p className="text-meta text-muted-foreground">只有可写的库根能作为目标。</p>
+            <DirPicker
+              roots={roots}
+              value={target}
+              onChange={(loc) => {
+                setTarget(loc);
+                runPreview(loc, mode);
+              }}
+              className="max-h-72 md:max-h-96"
+            />
+            <p className="text-meta text-muted-foreground">只能选可写库根下的目录。</p>
           </div>
           <div className="min-w-0 space-y-3">
             {target && targetRoot ? (
@@ -487,7 +592,7 @@ export function TransferDialog({
             )}
             {dry.isPending ? (
               <p className="flex items-center gap-2 text-caption text-muted-foreground">
-                <LoaderCircle className="h-4 w-4 animate-spin" /> 生成预览…
+                <LoaderCircle className="h-4 w-4 animate-spin" /> 生成预览
               </p>
             ) : null}
             {err ? <Notice tone="destructive">{err}</Notice> : null}
@@ -508,7 +613,7 @@ export function TransferDialog({
                 </div>
                 {hnrBlocked ? (
                   <Notice tone="destructive">
-                    {plan.hnrBlocks.length} 项仍在做种且 H&R 未满足,不能移动。改用复制,或等 H&R 满足后再移动。
+                    {plan.hnrBlocks.length} 项做种中且 H&R 未满足,不能移动。改用复制,或等 H&R 满足后再移动。
                     <button
                       type="button"
                       className="ml-1 underline"
@@ -559,7 +664,7 @@ export function TransferDialog({
           </Button>
           <Button onClick={run} disabled={!canRun || exec.isPending}>
             {exec.isPending ? <LoaderCircle className="animate-spin" /> : mode === "move" ? <FolderInput /> : <Copy />}
-            确认{mode === "move" ? "移动" : "复制"}
+            {mode === "move" ? "移动" : "复制"}
           </Button>
         </DialogFooter>
       </DialogContent>
@@ -650,7 +755,7 @@ export function DeleteDialog({
             reason === "permanent_disabled"
               ? "设置里未开启永久删除(files.allowPermanentDelete)"
               : reason === "approval_required"
-                ? "用 API Key 删除,每次都需要审批"
+                ? "用 API Key 删除,每次都要审批"
                 : filesErrorText(e),
           );
         },
@@ -821,7 +926,7 @@ export function CopyPathDialog({ root, entry, onClose }: { root: FileRoot; entry
   const rows = [
     { label: "本机路径", value: local },
     { label: "真实路径(解析链接后)", value: stat.data?.realPath ?? null },
-    { label: "根内相对路径", value: entry.path || "(根)" },
+    { label: "登记目录内相对路径", value: entry.path || "(登记目录本身)" },
   ];
   const copy = async (v: string) => {
     try {
@@ -864,58 +969,87 @@ export function CopyPathDialog({ root, entry, onClose }: { root: FileRoot; entry
   );
 }
 
-// ─── 刮削 ───────────────────────────────────────────────────────
+// ─── 刷新元数据(MP 的"刮削") ─────────────────────────────────────
 
-export function ScrapeDialog({ entry, onClose }: { entry: FileEntry; onClose: () => void }) {
-  const [writeNfo, setWriteNfo] = useState(false);
-  const [images, setImages] = useState(false);
-  const scrape = useScrape();
+/**
+ * 刷新元数据(§7.2):只对已登记项;多选时按作品去重(POST /files/scrape-batch)。
+ * NFO / 图片投影还没实现,不显示这两项。
+ */
+export function RefreshMetadataDialog({ items, onClose }: { items: FileEntry[]; onClose: () => void }) {
+  const batch = useScrapeBatch();
   const key = useMemo(() => newIdempotencyKey(), []);
-  const asset = entry.asset;
-  if (!asset) return null;
+  const [result, setResult] = useState<FilesScrapeBatchResult | null>(null);
+  const entities = [...new Map(items.filter((e) => e.asset).map((e) => [e.asset?.mediaEntityId, e.asset])).values()];
+  const single = entities.length === 1 ? entities[0] : null;
   const run = () =>
-    scrape.mutate(
-      { idempotencyKey: key, mediaEntityId: asset.mediaEntityId, writeNfo, images },
+    batch.mutate(
+      { idempotencyKey: key, mediaEntityIds: entities.map((a) => a?.mediaEntityId as string) },
       {
         onSuccess: (r) => {
-          const extra =
-            r.nfo === "not_implemented" || r.images === "not_implemented"
-              ? "还不支持写 NFO 和图片,只刷新了字段。"
-              : r.nfo === "skipped"
-                ? "目标 NFO 不是本工具生成且字段已锁定,未覆盖。"
-                : "";
-          toast.success(`已提交元数据刷新${r.lockedFields.length ? `,${r.lockedFields.length} 个锁定字段不动` : ""}`, {
-            description: extra || undefined,
-            action: { label: "查看运行", onClick: () => window.location.assign(`/console/engine/${r.taskId}`) },
-          });
-          onClose();
+          setResult(r);
+          (r.skipped.length ? toast.warning : toast.success)(
+            `已提交 ${r.submitted.length} 个作品,锁定字段不变${r.skipped.length ? `;${r.skipped.length} 个未提交` : ""}`,
+          );
         },
-        onError: (e) => toast.error(filesErrorText(e, "刮削失败")),
+        onError: (e) => toast.error(filesErrorText(e, "提交失败")),
       },
     );
   return (
     <Dialog open onOpenChange={(o) => !o && onClose()}>
       <DialogContent>
         <DialogHeader>
-          <DialogTitle>刮削 {asset.title}</DialogTitle>
-          <DialogDescription>按字段刷新元数据,锁定的字段和路径不变。不覆盖非本工具生成的 NFO。</DialogDescription>
+          <DialogTitle>刷新元数据{single ? ` · ${single.title}` : ` · ${entities.length} 个作品`}</DialogTitle>
+          <DialogDescription>按字段刷新,锁定的字段和路径不变。即 MP 的“刮削”。</DialogDescription>
         </DialogHeader>
-        <div className="flex items-center justify-between gap-3 text-caption">
-          写 NFO 到绑定目录
-          <Switch checked={writeNfo} onCheckedChange={setWriteNfo} aria-label="写 NFO 到绑定目录" />
-        </div>
-        <div className="flex items-center justify-between gap-3 text-caption">
-          下载海报/背景图
-          <Switch checked={images} onCheckedChange={setImages} aria-label="下载海报/背景图" />
-        </div>
+        {!single && !result ? (
+          <ul className="max-h-40 space-y-0.5 overflow-auto text-caption">
+            {entities.map((a) => (
+              <li key={a?.mediaEntityId} className="truncate">
+                {a?.title}
+                {a?.year ? ` (${a.year})` : ""}
+              </li>
+            ))}
+          </ul>
+        ) : null}
+        {result ? (
+          <div className="space-y-2 text-caption">
+            {result.submitted.map((s) => (
+              <div key={s.mediaEntityId} className="rounded-lg border border-border/60 px-3 py-2">
+                <p className="flex items-center justify-between gap-2">
+                  <span className="truncate">{s.title}</span>
+                  <Link className="shrink-0 text-meta underline" to={`/console/engine/${s.taskId}`}>
+                    查看运行
+                  </Link>
+                </p>
+                <p className="text-meta text-muted-foreground">
+                  {s.lockedFields.length ? `锁定字段:${s.lockedFields.join("、")}` : "没有锁定字段"}
+                </p>
+              </div>
+            ))}
+            {result.skipped.map((s) => (
+              <p key={s.ref} className="text-meta text-warning">
+                {s.ref}:
+                {s.reason === "not_registered"
+                  ? "没有已登记资产"
+                  : s.reason === "no_entity"
+                    ? "不属于任何已登记作品"
+                    : s.reason === "not_found"
+                      ? "作品不存在"
+                      : s.reason}
+              </p>
+            ))}
+          </div>
+        ) : null}
         <DialogFooter>
           <Button variant="outline" onClick={onClose}>
-            取消
-          </Button>
-          <Button onClick={run} disabled={scrape.isPending}>
-            {scrape.isPending ? <LoaderCircle className="animate-spin" /> : <Sparkles />}
-            刮削
+            {result ? "完成" : "取消"}
           </Button>
+          {result ? null : (
+            <Button onClick={run} disabled={batch.isPending || !entities.length}>
+              {batch.isPending ? <LoaderCircle className="animate-spin" /> : <RefreshCw />}
+              刷新
+            </Button>
+          )}
         </DialogFooter>
       </DialogContent>
     </Dialog>