feat(web): regroup console nav into 7 groups, split downloads/plans/tasks, add legacy redirects

- Sidebar: 概览/资源/订阅/下载/整理/Agent/系统, 18 items (+ 定时任务); single active item via findNavItem; 待处理 badge; collapsed rail groups; mobile drawer shares NAV_GROUPS. - New pages: /downloads (queue + cache watermark header), /downloads/plans, /downloads/:id, /tasks (business tasks only) + /tasks/:id detail, /rules. - Legacy links: ?tab= on tasks/subscriptions/sources redirect via clientLoader; /tasks/:downloadId falls back to /downloads/:id. - List filters in URL query; settingsPath() helper for settings deep links. - Copy per glossary (待处理, 收录策略, 引擎面板, 文件管理, 版本目标). Co-Authored-By: Claude Opus 5.5 <[email protected]>
2026-09-28 02:46:47 +08:00
1 parent 5843527317
commit 909cd2ad49
@@ -6,13 +6,19 @@ import { Link } from "react-router";
 import { toast } from "sonner";
 import { apiMutate, apiParsed, cleanParams } from "~/api/parse.ts";
 import { type DataColumn, DataTable } from "~/components/console/data-table.tsx";
+import { DetailSection, DetailSheet } from "~/components/console/detail-sheet.tsx";
 import { FilterBar, FilterSelect } from "~/components/console/filter-bar.tsx";
+import { KvList } from "~/components/console/kv-list.tsx";
+import { consolePath } from "~/components/console/nav.ts";
 import { StatusBadge } from "~/components/console/status-badge.tsx";
+import { useQueryState } from "~/components/console/use-query-state.ts";
 import { Button } from "~/components/ui/button.tsx";
 import { relTime } from "~/components/workbench/release-fields.ts";
 import { errorMessage, TTL_SECOND } from "~/lib/api.ts";
+import { formatDateTime } from "~/lib/utils.ts";

 // 业务任务(/tasks):引擎只负责推进,task 表是面向用户的投影;取消只停后续步骤,重试只对失败任务。
+// 引擎运行只在详情里给链接,引擎面板在系统组。

 const TaskPage = cursorPage(Task);

@@ -42,34 +48,54 @@ export const TASK_STATUS: Record<
  dead: { label: "放弃", tone: "destructive" },
 };

-const ACTIVE: TaskStatus[] = ["pending", "running", "waiting"];
+export const ACTIVE_TASK: TaskStatus[] = ["pending", "running", "waiting"];

-function subjectLink(t: Task): string | null {
+export const SUBJECT_LABEL: Record<string, string> = {
+  download_task: "下载任务",
+  acquisition_plan: "下载计划",
+  acquisition_slot: "版本目标",
+  organization_record: "整理记录",
+  organize_request: "整理请求",
+  media_entity: "作品",
+  media_asset: "资产",
+  source_release: "资源",
+  feed_source: "Feed",
+  site: "站点",
+  library_root: "库根",
+  cache_volume: "缓存卷",
+};
+
+/** 业务任务的对象 → 它的"家"页面 */
+export function subjectLink(t: Pick<Task, "subjectType" | "subjectId">): string | null {
  if (!t.subjectId) return null;
-  if (t.subjectType === "download_task") return `/console/tasks/${t.subjectId}`;
-  if (t.subjectType === "organization_record") return `/console/organize/${t.subjectId}`;
-  if (t.subjectType === "media_entity") return `/console/library/${t.subjectId}`;
-  return null;
+  switch (t.subjectType) {
+    case "download_task":
+      return consolePath("downloads", t.subjectId);
+    case "acquisition_plan":
+      return consolePath("downloads", "plans");
+    case "organization_record":
+      return consolePath("organize", t.subjectId);
+    case "media_entity":
+      return consolePath("library", t.subjectId);
+    case "site":
+      return consolePath("sites", t.subjectId);
+    case "feed_source":
+      return consolePath("sources");
+    default:
+      return null;
+  }
 }

-export function BusinessTasks() {
-  const [kind, setKind] = useState("");
-  const [status, setStatus] = useState("");
+export function subjectText(t: Pick<Task, "subjectType" | "subjectId">): string {
+  if (!t.subjectType) return "—";
+  const label = SUBJECT_LABEL[t.subjectType] ?? t.subjectType;
+  return t.subjectId ? `${label} · ${t.subjectId.slice(0, 8)}` : label;
+}
+
+/** 取消 / 重试 */
+export function useTaskAction() {
  const qc = useQueryClient();
-  const list = useInfiniteQuery({
-    queryKey: ["tasks", "list", kind, status],
-    initialPageParam: undefined as string | undefined,
-    placeholderData: keepPreviousData,
-    queryFn: ({ pageParam, signal }) =>
-      apiParsed(TaskPage, "/api/v1/tasks", {
-        params: cleanParams({ kind, status, cursor: pageParam, limit: 50 }),
-        signal,
-      }),
-    getNextPageParam: (last) => last.nextCursor ?? undefined,
-    refetchInterval: (q) =>
-      q.state.data?.pages.some((p) => p.items.some((t) => ACTIVE.includes(t.status))) ? 5 * TTL_SECOND : false,
-  });
-  const action = useMutation({
+  return useMutation({
    mutationFn: ({ id, op }: { id: string; op: "cancel" | "retry" }) =>
      apiMutate(`/api/v1/tasks/:id/${op}`, {
        pathParams: { id },
@@ -81,27 +107,74 @@ export function BusinessTasks() {
    },
    onError: (e) => toast.error(errorMessage(e)),
  });
+}
+
+/** 取消 / 重试按钮(按状态二选一或都不显示) */
+export function TaskActions({ t, size = "sm" }: { t: Task; size?: "sm" | "xs" }) {
+  const action = useTaskAction();
+  if (ACTIVE_TASK.includes(t.status))
+    return (
+      <Button
+        variant="outline"
+        size={size}
+        disabled={action.isPending}
+        onClick={(e) => {
+          e.stopPropagation();
+          action.mutate({ id: t.id, op: "cancel" });
+        }}
+      >
+        <Square />
+        取消
+      </Button>
+    );
+  if (t.status === "failed" || t.status === "dead")
+    return (
+      <Button
+        variant="outline"
+        size={size}
+        disabled={action.isPending}
+        onClick={(e) => {
+          e.stopPropagation();
+          action.mutate({ id: t.id, op: "retry" });
+        }}
+      >
+        <RotateCcw />
+        重试
+      </Button>
+    );
+  return null;
+}
+
+export function BusinessTasks() {
+  const f = useQueryState(["kind", "status"] as const);
+  const { kind, status } = f.values;
+  const [openId, setOpenId] = useState<string | null>(null);
+  const list = useInfiniteQuery({
+    queryKey: ["tasks", "list", kind, status],
+    initialPageParam: undefined as string | undefined,
+    placeholderData: keepPreviousData,
+    queryFn: ({ pageParam, signal }) =>
+      apiParsed(TaskPage, "/api/v1/tasks", {
+        params: cleanParams({ kind, status, cursor: pageParam, limit: 50 }),
+        signal,
+      }),
+    getNextPageParam: (last) => last.nextCursor ?? undefined,
+    refetchInterval: (q) =>
+      q.state.data?.pages.some((p) => p.items.some((t) => ACTIVE_TASK.includes(t.status))) ? 5 * TTL_SECOND : false,
+  });
  const rows = list.data?.pages.flatMap((p) => p.items);
+  const open = rows?.find((t) => t.id === openId) ?? null;

  const columns: DataColumn<Task>[] = [
    {
      key: "kind",
      header: "任务",
-      cell: (t) => {
-        const href = subjectLink(t);
-        return (
-          <div className="min-w-0">
-            <p className="font-medium text-foreground">{TASK_KIND_LABEL[t.kind] ?? t.kind}</p>
-            {href ? (
-              <Link to={href} className="font-mono text-meta text-muted-foreground hover:underline">
-                {t.subjectType} · {t.subjectId?.slice(0, 8)}
-              </Link>
-            ) : (
-              <p className="font-mono text-meta text-muted-foreground">{t.subjectType ?? "—"}</p>
-            )}
-          </div>
-        );
-      },
+      cell: (t) => (
+        <div className="min-w-0">
+          <p className="font-medium text-foreground">{TASK_KIND_LABEL[t.kind] ?? t.kind}</p>
+          <p className="truncate text-meta text-muted-foreground">{subjectText(t)}</p>
+        </div>
+      ),
    },
    {
      key: "status",
@@ -136,72 +209,22 @@ export function BusinessTasks() {
      hideBelow: "sm",
      cell: (t) => <span className="whitespace-nowrap text-muted-foreground">{relTime(t.createdAt)}</span>,
    },
-    {
-      key: "ops",
-      header: "",
-      align: "right",
-      cell: (t) => (
-        <div className="flex justify-end gap-1">
-          {t.engineRunId ? (
-            <Button variant="ghost" size="sm" asChild>
-              <Link to={`/console/engine/${encodeURIComponent(t.engineRunId)}`}>引擎</Link>
-            </Button>
-          ) : null}
-          {ACTIVE.includes(t.status) ? (
-            <Button
-              variant="ghost"
-              size="sm"
-              disabled={action.isPending}
-              onClick={(e) => {
-                e.stopPropagation();
-                action.mutate({ id: t.id, op: "cancel" });
-              }}
-            >
-              <Square />
-              取消
-            </Button>
-          ) : null}
-          {t.status === "failed" || t.status === "dead" ? (
-            <Button
-              variant="ghost"
-              size="sm"
-              disabled={action.isPending}
-              onClick={(e) => {
-                e.stopPropagation();
-                action.mutate({ id: t.id, op: "retry" });
-              }}
-            >
-              <RotateCcw />
-              重试
-            </Button>
-          ) : null}
-        </div>
-      ),
-    },
+    { key: "ops", header: "", align: "right", cell: (t) => <TaskActions t={t} size="xs" /> },
  ];

  return (
    <>
-      <FilterBar
-        onReset={
-          kind || status
-            ? () => {
-                setKind("");
-                setStatus("");
-              }
-            : undefined
-        }
-      >
+      <FilterBar onReset={f.active ? f.reset : undefined}>
        <FilterSelect
          label="类型"
          value={kind}
-          onChange={setKind}
+          onChange={(v) => f.set("kind", v)}
          options={Object.entries(TASK_KIND_LABEL).map(([value, label]) => ({ value, label }))}
        />
        <FilterSelect
          label="状态"
          value={status}
-          onChange={setStatus}
+          onChange={(v) => f.set("status", v)}
          options={Object.entries(TASK_STATUS).map(([value, v]) => ({ value, label: v.label }))}
        />
      </FilterBar>
@@ -212,15 +235,106 @@ export function BusinessTasks() {
        loading={list.isPending}
        error={list.error}
        onRetry={() => void list.refetch()}
+        onRowClick={(t) => setOpenId(t.id)}
+        selectedKey={openId}
        hasMore={list.hasNextPage}
        onLoadMore={() => void list.fetchNextPage()}
        loadingMore={list.isFetchingNextPage}
        empty={{
          icon: ListTodo,
-          title: kind || status ? "没有符合筛选的任务" : "还没有业务任务",
-          description: "提交下载、核验入库、清理缓存、对账等后台任务会出现在这里。",
+          title: f.active ? "没有符合筛选的任务" : "还没有业务任务",
+          description: f.active ? undefined : "提交下载、核验入库、清理缓存、对账等后台任务会出现在这里。",
        }}
      />
+      <DetailSheet
+        open={!!open}
+        onOpenChange={(o) => !o && setOpenId(null)}
+        title={open ? (TASK_KIND_LABEL[open.kind] ?? open.kind) : ""}
+        description={open ? <TaskStatusLine t={open} /> : undefined}
+        footer={
+          open ? (
+            <>
+              <TaskActions t={open} />
+              <Button asChild size="sm">
+                <Link to={consolePath("tasks", open.id)}>在独立页面打开</Link>
+              </Button>
+            </>
+          ) : null
+        }
+      >
+        {open ? <TaskSummary t={open} /> : null}
+      </DetailSheet>
    </>
  );
 }
+
+export function TaskStatusLine({ t }: { t: Task }) {
+  return (
+    <span className="flex flex-wrap items-center gap-1.5">
+      <StatusBadge tone={TASK_STATUS[t.status].tone}>{TASK_STATUS[t.status].label}</StatusBadge>
+      {t.waitReason ? <span className="text-meta text-muted-foreground">{t.waitReason}</span> : null}
+    </span>
+  );
+}
+
+/** 概况 + 关联对象(抽屉与详情页共用) */
+export function TaskSummary({ t }: { t: Task }) {
+  const href = subjectLink(t);
+  const err = t.lastError
+    ? String((t.lastError as { message?: unknown }).message ?? JSON.stringify(t.lastError))
+    : null;
+  return (
+    <div className="space-y-5">
+      {err ? (
+        <p className="rounded-lg border border-destructive/40 bg-destructive/10 px-3 py-2 text-caption break-words text-destructive">
+          {err}
+        </p>
+      ) : null}
+      <DetailSection title="概况">
+        <KvList
+          items={[
+            { label: "尝试", value: `${t.attempts}/${t.maxAttempts}` },
+            { label: "触发", value: t.triggeredBy },
+            { label: "创建", value: formatDateTime(t.createdAt) },
+            { label: "开始", value: formatDateTime(t.startedAt) },
+            { label: "结束", value: formatDateTime(t.finishedAt) },
+            { label: "下次执行", value: t.status === "pending" ? formatDateTime(t.nextRunAt) : null },
+            { label: "取消原因", value: t.cancelReason, wide: true },
+          ]}
+        />
+      </DetailSection>
+      <DetailSection title="关联对象">
+        <KvList
+          items={[
+            {
+              label: "对象",
+              value: href ? (
+                <Link to={href} className="underline underline-offset-4">
+                  {subjectText(t)}
+                </Link>
+              ) : (
+                subjectText(t)
+              ),
+            },
+            {
+              label: "上级任务",
+              value: t.parentTaskId ? (
+                <Link to={consolePath("tasks", t.parentTaskId)} className="font-mono underline underline-offset-4">
+                  {t.parentTaskId.slice(0, 8)}
+                </Link>
+              ) : null,
+            },
+            {
+              label: "引擎运行",
+              value: t.engineRunId ? (
+                <Link to={consolePath("engine", t.engineRunId)} className="font-mono underline underline-offset-4">
+                  {t.engineRunId.slice(0, 12)}
+                </Link>
+              ) : null,
+            },
+          ]}
+        />
+      </DetailSection>
+    </div>
+  );
+}
@@ -1,10 +1,11 @@
 import type { Dashboard } from "@umt/contracts";
-import { Brush, HardDrive } from "lucide-react";
-import { useNavigate } from "react-router";
+import { Brush, HardDrive, SlidersHorizontal } from "lucide-react";
+import { Link, useNavigate } from "react-router";
 import { toast } from "sonner";
 import { useCacheCleanup, useCacheVolumes } from "~/api/downloads.ts";
 import { ConfirmDialog } from "~/components/console/confirm-dialog.tsx";
 import { ErrorState, LoadingState } from "~/components/console/empty-state.tsx";
+import { consolePath, settingsPath } from "~/components/console/nav.ts";
 import { StatusBadge } from "~/components/console/status-badge.tsx";
 import { Button } from "~/components/ui/button.tsx";
 import { errorMessage } from "~/lib/api.ts";
@@ -76,7 +77,7 @@ function VolumeBar({ v }: { v: Volume }) {
  );
 }

-/** 缓存卷用量 / 阈值条 + 手动清理入口 */
+/** 缓存卷水位 / 阈值条 + 阈值设置与手动清理入口(下载队列页头) */
 export function CacheVolumes() {
  const vols = useCacheVolumes();
  const cleanup = useCacheCleanup();
@@ -84,34 +85,42 @@ export function CacheVolumes() {
  return (
    <section className="pg-slab mb-6 rounded-xl p-4">
      <div className="mb-3 flex flex-wrap items-center justify-between gap-2">
-        <h2 className="text-label font-semibold tracking-[0.18em] text-muted-foreground uppercase">缓存与保留</h2>
-        <ConfirmDialog
-          trigger={
-            <Button variant="outline" size="sm" disabled={cleanup.isPending}>
-              <Brush />
-              立即清理
-            </Button>
-          }
-          title="按规则清理下载缓存?"
-          description="只清理已入库、且满足保留期与 H&R 的纳管任务,其余不动。"
-          confirmLabel="清理"
-          onConfirm={() =>
-            cleanup.mutateAsync(undefined).then(
-              (r) => {
-                toast.success(`已排队清理任务 ${r.taskId.slice(0, 8)}`, { description: "结果见任务详情" });
-                navigate(`/console/engine/${r.runId}`);
-              },
-              (e) => toast.error(errorMessage(e)),
-            )
-          }
-        />
+        <h2 className="text-label font-semibold tracking-[0.18em] text-muted-foreground uppercase">缓存水位</h2>
+        <div className="flex flex-wrap gap-2">
+          <Button asChild variant="ghost" size="sm">
+            <Link to={settingsPath("automation", "cache")}>
+              <SlidersHorizontal />
+              调整阈值
+            </Link>
+          </Button>
+          <ConfirmDialog
+            trigger={
+              <Button variant="outline" size="sm" disabled={cleanup.isPending}>
+                <Brush />
+                立即清理
+              </Button>
+            }
+            title="按规则清理下载缓存?"
+            description="只清理已入库、且满足保留期与 H&R 的纳管任务,其余不动。"
+            confirmLabel="清理"
+            onConfirm={() =>
+              cleanup.mutateAsync(undefined).then(
+                (r) => {
+                  toast.success("清理已排队");
+                  navigate(consolePath("tasks", r.taskId));
+                },
+                (e) => toast.error(errorMessage(e)),
+              )
+            }
+          />
+        </div>
      </div>
      {vols.isPending ? (
        <LoadingState rows={2} />
      ) : vols.error ? (
        <ErrorState plain error={vols.error} onRetry={() => void vols.refetch()} />
      ) : !vols.data.length ? (
-        <p className="text-caption text-muted-foreground">还没有缓存卷数据。配置下载器并完成巡检后显示。</p>
+        <p className="text-caption text-muted-foreground">还没有缓存卷数据。登记下载器并完成巡检后显示。</p>
      ) : (
        <div className="grid gap-5 md:grid-cols-2">
          {vols.data.map((v) => (