rootandClaude Opus 5.5
21c55dfb3a
控制台导航最多两层(侧栏一项 = 一页,页内最多一层页签 / 分段);从列表打开的
记录改成列表页上的右侧抽屉,打开的记录写在 ?open=,刷新、分享、前进后退都能还原,
后退就是关抽屉。标准写在 docs/design/console-ia.md §9,ui-controls.md 引用。
- DetailSheet 加 xl 宽度、标题下操作行;抽屉里再开的 DetailSheet 在同一抽屉里换成子视图(返回 / Esc)
- record-sheet.tsx:useRecordSheet / RecordLink / useOpenRecord / recordPath / taskPath
- 整理记录、订阅、站点(含页签)、下载、日志任务改成抽屉;旧业务任务 / 下载任务 id 在任务抽屉里换算
- 回收站并进文件管理右侧视图(?view=trash);设置左栏只列分区
- 规则组、策略版本、媒体库未识别 / 外部身份、设置实例编辑走 ?open=
- 旧地址 /console/{organize,subscriptions,sites,downloads}/:id、/tasks/:id、/files/trash 跳到列表页抽屉
- 站内链接、铃铛、命令面板、任务时间线改拼新地址;冒烟按 ?open= 检查抽屉
Co-Authored-By: Claude Opus 5.5 <[email protected]>
Claude-Session: https://claude.ai/code/session_01Cxwgnn2pbzQ7rXv3rq7fei
249 lines
10 KiB
TypeScript
249 lines
10 KiB
TypeScript
import type { DownloadLive, DownloadTask } from "@umt/contracts";
|
|
import { Bot, FolderInput, Pause, Play, ShieldAlert } from "lucide-react";
|
|
import { useState } from "react";
|
|
import { toast } from "sonner";
|
|
import {
|
|
DOWNLOAD_STATUS_LABEL,
|
|
DOWNLOAD_STATUS_TONE,
|
|
PAUSE_REASON_LABEL,
|
|
PLAN_STATUS_LABEL,
|
|
useDownloadAction,
|
|
useDownloaderNames,
|
|
usePlan,
|
|
} from "~/api/downloads.ts";
|
|
import { useDownloadTrace } from "~/api/tasks.ts";
|
|
import { openAgentDrawer } from "~/components/agent/agent-store.ts";
|
|
import { DetailSection } from "~/components/console/detail-sheet.tsx";
|
|
import { JsonView } from "~/components/console/json-view.tsx";
|
|
import { KvList } from "~/components/console/kv-list.tsx";
|
|
import { RecordLink } from "~/components/console/record-sheet.tsx";
|
|
import { StatusBadge } from "~/components/console/status-badge.tsx";
|
|
import { TechInfo } from "~/components/console/tech-info.tsx";
|
|
import { OrganizeWizard } from "~/components/organize-wizard/organize-wizard.tsx";
|
|
import { Button } from "~/components/ui/button.tsx";
|
|
import { relTime } from "~/components/workbench/release-fields.ts";
|
|
import { errorMessage } from "~/lib/api.ts";
|
|
import { humanizeReason, reasonCode, reasonLine } from "~/lib/reasons.ts";
|
|
import { formatBytes, formatDateTime } from "~/lib/utils.ts";
|
|
import { liveItems } from "./board-format.ts";
|
|
import { BusinessTimeline } from "./business-timeline.tsx";
|
|
import { WhySection } from "./plan-row.tsx";
|
|
|
|
/** 进度:细线 + 文字;总量未知时不伪造百分比 */
|
|
export function ProgressLine({ t }: { t: DownloadTask }) {
|
|
const known = t.sizeBytes !== null;
|
|
return (
|
|
<div className="min-w-24">
|
|
<div className="h-1 overflow-hidden rounded-full bg-foreground/[0.08]">
|
|
<div className="h-full rounded-full bg-foreground/60" style={{ width: `${Math.round(t.progress * 100)}%` }} />
|
|
</div>
|
|
<p className="mt-0.5 text-meta text-muted-foreground tabular-nums">
|
|
{known ? `${(t.progress * 100).toFixed(1)}%` : `已下 ${formatBytes(t.downloadedBytes, 1)}`}
|
|
</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function DownloadStatusBadges({ t }: { t: DownloadTask }) {
|
|
return (
|
|
<span className="flex flex-wrap gap-1">
|
|
<StatusBadge tone={DOWNLOAD_STATUS_TONE[t.status]}>{DOWNLOAD_STATUS_LABEL[t.status]}</StatusBadge>
|
|
{t.pauseReason === "threshold" ? (
|
|
<StatusBadge tone="warning">超过暂停线，已暂停</StatusBadge>
|
|
) : t.pauseReason ? (
|
|
<StatusBadge>{PAUSE_REASON_LABEL[t.pauseReason]}</StatusBadge>
|
|
) : null}
|
|
{!t.managed ? <StatusBadge>外部任务</StatusBadge> : null}
|
|
</span>
|
|
);
|
|
}
|
|
|
|
/** 暂停/恢复:阈值暂停在水位回落前不可手动恢复(服务端强制) */
|
|
export function PauseResume({ t, size = "sm" }: { t: DownloadTask; size?: "sm" | "xs" }) {
|
|
const act = useDownloadAction();
|
|
const canPause = ["queued", "downloading", "stalled"].includes(t.status);
|
|
const canResume = t.status === "paused";
|
|
if (!canPause && !canResume) return null;
|
|
const threshold = t.pauseReason === "threshold";
|
|
return (
|
|
<Button
|
|
variant="outline"
|
|
size={size}
|
|
disabled={act.isPending}
|
|
title={threshold ? "下载盘超过暂停线，降到恢复线后自动恢复" : undefined}
|
|
onKeyDown={(e) => e.stopPropagation()}
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
act.mutate(
|
|
{ id: t.id, action: canResume ? "resume" : "pause" },
|
|
{
|
|
onSuccess: () => toast.success(canResume ? "已恢复" : "已暂停。下载盘回落时不会自动恢复"),
|
|
onError: (err) => toast.error(errorMessage(err)),
|
|
},
|
|
);
|
|
}}
|
|
>
|
|
{canResume ? <Play /> : <Pause />}
|
|
{canResume ? "恢复" : "暂停"}
|
|
</Button>
|
|
);
|
|
}
|
|
|
|
/** 下载任务详情:状态、阈值说明、业务时间线、为什么下这个(DL-3)、文件 */
|
|
export function DownloadDetail({ task, live }: { task: DownloadTask; live?: DownloadLive | null }) {
|
|
const plan = usePlan(task.acquisitionPlanId);
|
|
const names = useDownloaderNames();
|
|
const trace = useDownloadTrace(task, plan.data);
|
|
const [organizing, setOrganizing] = useState(false);
|
|
const canOrganize = ["completed", "importing", "imported"].includes(task.status);
|
|
// 下载完成但最近一次整理失败:状态行只写"下载完成"会误导,单独说明整理失败
|
|
const lastRecord = [...(trace.records.data?.items ?? [])].sort((a, b) =>
|
|
(b.startedAt ?? b.createdAt).localeCompare(a.startedAt ?? a.createdAt),
|
|
)[0];
|
|
const importFailed = task.status === "completed" && lastRecord?.status === "failed" ? lastRecord : null;
|
|
|
|
return (
|
|
<div className="space-y-5">
|
|
<div className="flex flex-wrap items-center gap-2">
|
|
<DownloadStatusBadges t={task} />
|
|
<div className="ml-auto flex flex-wrap gap-2">
|
|
<PauseResume t={task} />
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
disabled={!canOrganize}
|
|
title={canOrganize ? undefined : "下载完成后才能整理"}
|
|
onClick={() => setOrganizing(true)}
|
|
>
|
|
<FolderInput />
|
|
整理
|
|
</Button>
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={() =>
|
|
openAgentDrawer({
|
|
label: `下载：${task.name}`,
|
|
downloadTaskId: task.id,
|
|
goal: task.status === "stalled" || task.status === "failed" ? "排查这个下载为什么没有进展" : "",
|
|
})
|
|
}
|
|
>
|
|
<Bot />
|
|
问智能体
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
{task.pauseReason === "threshold" ? (
|
|
<p className="flex items-start gap-2 rounded-lg border border-warning/40 bg-warning/10 px-3 py-2 text-caption text-warning">
|
|
<ShieldAlert className="mt-0.5 h-3.5 w-3.5 shrink-0" />
|
|
下载盘超过暂停线，任务已暂停；降到恢复线以下后自动恢复。
|
|
</p>
|
|
) : null}
|
|
{importFailed ? (
|
|
<p className="rounded-lg border border-destructive/40 bg-destructive/10 px-3 py-2 text-caption text-destructive">
|
|
整理失败：{reasonLine(importFailed.reason)}。
|
|
<RecordLink page="organize" id={importFailed.id} className="ml-1 underline underline-offset-4">
|
|
去整理记录处理
|
|
</RecordLink>
|
|
</p>
|
|
) : null}
|
|
{task.noProgressSince ? (
|
|
<p className="rounded-lg border border-warning/40 bg-warning/10 px-3 py-2 text-caption text-warning">
|
|
{formatDateTime(task.noProgressSince)}{" "}
|
|
起没有进展，不会自动换源。开启自动调查时，智能体会在持续授权范围内尝试恢复。
|
|
</p>
|
|
) : null}
|
|
|
|
{task.acquisitionPlanId ? (
|
|
<WhySection
|
|
planId={task.acquisitionPlanId}
|
|
extraTech={[
|
|
{
|
|
label: "计划状态",
|
|
value: plan.data
|
|
? `${PLAN_STATUS_LABEL[plan.data.status]}${plan.data.statusReason ? ` · ${plan.data.statusReason}` : ""}`
|
|
: null,
|
|
},
|
|
]}
|
|
/>
|
|
) : null}
|
|
|
|
<DetailSection title="进度">
|
|
<ProgressLine t={live ? { ...task, progress: live.progress } : task} />
|
|
<KvList
|
|
className="mt-3"
|
|
items={[
|
|
{ label: "下载器", value: names.data?.get(task.instanceId) ?? "未知" },
|
|
{ label: "大小", value: task.sizeBytes === null ? "未知" : formatBytes(task.sizeBytes, 2) },
|
|
{ label: "剩余", value: task.remainingBytes === null ? "未知" : formatBytes(task.remainingBytes, 2) },
|
|
...liveItems(live),
|
|
{ label: "分享率", value: task.ratio === null ? "—" : task.ratio.toFixed(2) },
|
|
{ label: "最近进展", value: relTime(task.lastProgressAt) },
|
|
{ label: "保存路径", value: task.savePath, mono: true, wide: true },
|
|
]}
|
|
/>
|
|
<TechInfo
|
|
className="mt-3"
|
|
items={[
|
|
{ label: "最近同步", value: relTime(task.lastSyncedAt), mono: false },
|
|
{ label: "标签", value: task.tags.join(", ") },
|
|
{ label: "分类", value: task.category },
|
|
{ label: "下载器状态", value: task.rawState },
|
|
{ label: "内容路径", value: task.contentPath, wide: true },
|
|
{ label: "torrent hash", value: task.torrentHash, wide: true },
|
|
{ label: "任务 ID", value: task.id, wide: true },
|
|
{ label: "下载器 ID", value: task.instanceId, wide: true },
|
|
importFailed ? { label: "整理失败原因码", value: reasonCode(importFailed.reason) } : null,
|
|
importFailed ? { label: "整理记录 ID", value: importFailed.id, wide: true } : null,
|
|
]}
|
|
>
|
|
{task.lastError ? <JsonView label="下载器错误原文" value={task.lastError} tone="destructive" /> : null}
|
|
</TechInfo>
|
|
</DetailSection>
|
|
|
|
<DetailSection title="经过">
|
|
<BusinessTimeline events={trace.events} loading={trace.loading} />
|
|
</DetailSection>
|
|
|
|
{task.fileList?.length ? (
|
|
<DetailSection title={`文件(${task.fileList.length})`}>
|
|
<ul className="max-h-60 space-y-1 overflow-auto text-meta">
|
|
{task.fileList.map((f) => (
|
|
<li key={f.path} className="flex justify-between gap-3">
|
|
<span className="min-w-0 font-mono break-all text-foreground">{f.path}</span>
|
|
<span className="shrink-0 text-muted-foreground tabular-nums">
|
|
{formatBytes(f.size, 1)}
|
|
{f.progress !== undefined ? ` · ${Math.round(f.progress * 100)}%` : ""}
|
|
</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</DetailSection>
|
|
) : null}
|
|
|
|
{task.lastError ? (
|
|
<p className="rounded-lg border border-destructive/40 bg-destructive/10 px-3 py-2 text-caption text-destructive">
|
|
下载器报错：
|
|
{humanizeReason(String((task.lastError as { message?: unknown }).message ?? "")) || "原文见技术信息"}
|
|
</p>
|
|
) : null}
|
|
|
|
{organizing ? (
|
|
<OrganizeWizard
|
|
source={{
|
|
kind: "download",
|
|
taskId: task.id,
|
|
instanceId: task.instanceId,
|
|
contentPath: task.contentPath,
|
|
name: task.name,
|
|
tags: task.tags,
|
|
}}
|
|
onClose={() => setOrganizing(false)}
|
|
/>
|
|
) : null}
|
|
</div>
|
|
);
|
|
}
|