feat(web): 记录抽屉与两层导航标准
控制台导航最多两层(侧栏一项 = 一页,页内最多一层页签 / 分段);从列表打开的
记录改成列表页上的右侧抽屉,打开的记录写在 ?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
This commit is contained in:
rootandClaude Opus 5.5 committed
1 parent
dd0f6e2c09
commit
21c55dfb3a
60 files changed
+2768
-2461
No files matched your search
@@ -1,15 +1,16 @@
|
||||
import { useQueryClient } from "@tanstack/react-query";
|
||||
import type { DownloadBoardItem, DownloadBoardRow, DownloadBoardState } from "@umt/contracts";
|
||||
import type { DownloadBoardItem, DownloadBoardRow, DownloadBoardState, DownloadTask } from "@umt/contracts";
|
||||
import { EventType } from "@umt/contracts";
|
||||
import { RefreshCw } from "lucide-react";
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import { Link, useSearchParams } from "react-router";
|
||||
import { useBoardPlanRow, useDownloadBoard, usePlan } from "~/api/downloads.ts";
|
||||
import { type ReactNode, useEffect, useMemo, useRef, useState } from "react";
|
||||
import { useSearchParams } from "react-router";
|
||||
import { useBoardPlanRow, useDownloadBoard, useDownloadTask, usePlan } from "~/api/downloads.ts";
|
||||
import { isMissingEndpoint } from "~/api/parse.ts";
|
||||
import { type DataColumn, DataTable } from "~/components/console/data-table.tsx";
|
||||
import { DetailSheet } from "~/components/console/detail-sheet.tsx";
|
||||
import { LoadingState } from "~/components/console/empty-state.tsx";
|
||||
import { consolePath } from "~/components/console/nav.ts";
|
||||
import { ErrorState, LoadingState } from "~/components/console/empty-state.tsx";
|
||||
import { PageHeader } from "~/components/console/page-header.tsx";
|
||||
import { useRecordSheet } from "~/components/console/record-sheet.tsx";
|
||||
import { StatusBadge } from "~/components/console/status-badge.tsx";
|
||||
import { readBoardState, writeBoardState } from "~/components/downloads/board-format.ts";
|
||||
import { CacheVolumes } from "~/components/downloads/cache-volumes.tsx";
|
||||
@@ -30,6 +31,7 @@ export const meta = () => [{ title: "下载面板 · UHD 媒体自动化控制
|
||||
|
||||
// DL-2:默认只看进行中;已完成单独一段(本浏览器记住选择)。页面可见时每 4 秒刷新速度,切到后台停。
|
||||
// DL-3:没提交到下载器的下载(等批准 / 等磁盘空间…)也是「进行中」的行;?plan=<计划 id> 深链打开对应行。
|
||||
// 记录抽屉(console-ia.md §9):行点开是右侧抽屉,?open=<id>;旧的下载详情页 /console/downloads/:id 跳到这里。
|
||||
|
||||
const COMPLETED = new Set(["completed", "importing", "imported"]);
|
||||
|
||||
@@ -40,20 +42,31 @@ export default function DownloadsPage() {
|
||||
setStateRaw(s);
|
||||
writeBoardState(s);
|
||||
};
|
||||
const [openId, setOpenId] = useState<string | null>(null);
|
||||
const [params, setParams] = useSearchParams();
|
||||
// 记录抽屉(console-ia.md §9):?open=<下载任务 id 或计划 id>;旧深链 ?plan=<计划 id> 同样打开
|
||||
const sheet = useRecordSheet({ scoped: ["plan"] });
|
||||
const openId = sheet.id;
|
||||
const [params] = useSearchParams();
|
||||
const deepPlan = params.get("plan");
|
||||
const qc = useQueryClient();
|
||||
const board = useDownloadBoard(state);
|
||||
const deep = useBoardPlanRow(deepPlan);
|
||||
|
||||
// 深链:找到行就切到它所在的分段并打开;没有行(已结束的下载)打开结束说明
|
||||
const pages = board.data?.pages;
|
||||
const allRows = pages?.flatMap((p) => p.items);
|
||||
const rows: DownloadBoardRow[] | undefined =
|
||||
state === "completed" ? allRows?.filter((r): r is DownloadBoardItem => r.kind === "task") : allRows;
|
||||
const inRows = openId ? allRows?.find((t) => t.id === openId) : undefined;
|
||||
// 不在当前分段里的:先当下载任务取,取不到再当计划找
|
||||
const fetched = useDownloadTask(openId && !inRows && !board.isPending ? openId : undefined);
|
||||
const taskMissing = !!fetched.error && isMissingEndpoint(fetched.error);
|
||||
const planId = deepPlan ?? (taskMissing ? openId : null);
|
||||
const deep = useBoardPlanRow(inRows ? null : planId);
|
||||
|
||||
// 旧深链 ?plan=:切到行所在的分段
|
||||
useEffect(() => {
|
||||
const row = deep.data;
|
||||
if (!row) return;
|
||||
if (!row || !deepPlan) return;
|
||||
setStateRaw(row.kind === "task" && COMPLETED.has(row.status) ? "completed" : "active");
|
||||
setOpenId(row.id);
|
||||
}, [deep.data]);
|
||||
}, [deep.data, deepPlan]);
|
||||
|
||||
// 状态变化、阈值事件到达时立即刷新(速度靠轮询)
|
||||
useSse(
|
||||
@@ -66,24 +79,34 @@ export default function DownloadsPage() {
|
||||
() => void qc.invalidateQueries({ queryKey: ["downloads"] }),
|
||||
);
|
||||
|
||||
const pages = board.data?.pages;
|
||||
const allRows = pages?.flatMap((p) => p.items);
|
||||
const rows: DownloadBoardRow[] | undefined =
|
||||
state === "completed" ? allRows?.filter((r): r is DownloadBoardItem => r.kind === "task") : allRows;
|
||||
const first = pages?.[0];
|
||||
const open = rows?.find((t) => t.id === openId) ?? (deep.data?.id === openId ? deep.data : null) ?? null;
|
||||
const openRow = inRows ?? deep.data ?? null;
|
||||
const openTask: DownloadTask | null =
|
||||
openRow?.kind === "task" ? openRow : openId && fetched.data?.id === openId ? fetched.data : null;
|
||||
const openPlan = openRow?.kind === "plan" ? openRow : null;
|
||||
const sheetOpen = !!(openId || deepPlan);
|
||||
const columns = useMemo(
|
||||
() => (state === "active" ? activeColumns() : (completedColumns() as unknown as DataColumn<DownloadBoardRow>[])),
|
||||
[state],
|
||||
);
|
||||
const empty = BOARD_EMPTY[state];
|
||||
const closeDeep = () => {
|
||||
if (!deepPlan) return;
|
||||
const next = new URLSearchParams(params);
|
||||
next.delete("plan");
|
||||
setParams(next, { replace: true });
|
||||
};
|
||||
const endedPlan = deepPlan && deep.isSuccess && deep.data === null ? deepPlan : null;
|
||||
const endedPlan = planId && deep.isSuccess && deep.data === null ? planId : null;
|
||||
// 关闭动画期间保留刚才的内容
|
||||
const last = useRef<{ title: string; body: ReactNode }>({ title: "", body: null });
|
||||
if (sheetOpen)
|
||||
last.current = {
|
||||
title: openTask?.name ?? openPlan?.name ?? "下载",
|
||||
body: openTask ? (
|
||||
<DownloadDetail task={openTask} live={openRow?.kind === "task" ? openRow.live : null} />
|
||||
) : openPlan ? (
|
||||
<PlanDetail p={openPlan} />
|
||||
) : fetched.error && !taskMissing ? (
|
||||
<ErrorState plain error={fetched.error} onRetry={() => void fetched.refetch()} />
|
||||
) : (
|
||||
<LoadingState rows={5} />
|
||||
),
|
||||
};
|
||||
const shown = last.current;
|
||||
|
||||
return (
|
||||
<>
|
||||
@@ -109,7 +132,7 @@ export default function DownloadsPage() {
|
||||
loading={board.isPending}
|
||||
error={board.error}
|
||||
onRetry={() => void board.refetch()}
|
||||
onRowClick={(t) => setOpenId(t.id)}
|
||||
onRowClick={(t) => sheet.open(t.id)}
|
||||
selectedKey={openId}
|
||||
hasMore={board.hasNextPage}
|
||||
onLoadMore={() => void board.fetchNextPage()}
|
||||
@@ -118,27 +141,15 @@ export default function DownloadsPage() {
|
||||
/>
|
||||
|
||||
<DetailSheet
|
||||
open={!!open}
|
||||
onOpenChange={(o) => {
|
||||
if (o) return;
|
||||
setOpenId(null);
|
||||
closeDeep();
|
||||
}}
|
||||
open={sheetOpen && !endedPlan}
|
||||
onOpenChange={(o) => !o && sheet.close()}
|
||||
width="lg"
|
||||
title={open?.name ?? ""}
|
||||
footer={
|
||||
open?.kind === "task" ? (
|
||||
<Button asChild variant="outline" size="sm">
|
||||
<Link to={consolePath("downloads", open.id)}>打开详情页</Link>
|
||||
</Button>
|
||||
) : null
|
||||
}
|
||||
title={shown.title}
|
||||
>
|
||||
{open?.kind === "task" ? <DownloadDetail task={open} live={open.live} /> : null}
|
||||
{open?.kind === "plan" ? <PlanDetail p={open} /> : null}
|
||||
{shown.body}
|
||||
</DetailSheet>
|
||||
|
||||
<EndedPlanSheet planId={endedPlan} onClose={closeDeep} />
|
||||
<EndedPlanSheet planId={endedPlan} onClose={sheet.close} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in new issue
Block a user