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]>
This commit is contained in:
rootandClaude Opus 5.5 committed
1 parent
5843527317
commit
909cd2ad49
31 files changed
+1247
-609
No files matched your search
@@ -10,7 +10,7 @@ import {
|
||||
import { api } from "~/lib/api.ts";
|
||||
import { getParsed, parseOrThrow } from "./library.ts";
|
||||
|
||||
// 待处理中心:按作品与问题类型聚合(summary),条目带证据/建议/影响范围,resolve 选项来自 decision.options。
|
||||
// 待处理:按作品与问题类型聚合(summary),条目带证据/建议/影响范围,resolve 选项来自 decision.options。
|
||||
|
||||
export const decisionKeys = {
|
||||
all: ["decisions"] as const,
|
||||
|
||||
@@ -266,7 +266,7 @@ export function buildTimeline(input: {
|
||||
detail:
|
||||
[t.attempts > 1 ? `第 ${t.attempts} 次尝试` : null, t.waitReason, err].filter(Boolean).join(" · ") || null,
|
||||
tone: TASK_STATUS_TONE[t.status],
|
||||
...(t.engineRunId ? { href: `/console/engine/${encodeURIComponent(t.engineRunId)}` } : {}),
|
||||
href: `/console/tasks/${encodeURIComponent(t.id)}`,
|
||||
ongoing: ACTIVE_TASK.includes(t.status),
|
||||
});
|
||||
}
|
||||
|
||||
@@ -1,23 +1,76 @@
|
||||
import { readFileSync } from "node:fs";
|
||||
import { describe, expect, it } from "vitest";
|
||||
import { consolePath, findNavItem, NAV_ITEMS } from "./nav.ts";
|
||||
import { LEGACY_REDIRECTS, legacyRedirect } from "../../routes/console/redirects.ts";
|
||||
import { consolePath, findNavItem, NAV_GROUPS, NAV_ITEMS, settingsPath } from "./nav.ts";
|
||||
|
||||
/** routes.ts 里登记的控制台路由(相对 /console) */
|
||||
const ROUTE_PATTERNS = [
|
||||
"",
|
||||
...[...readFileSync(new URL("../../routes.ts", import.meta.url), "utf8").matchAll(/route\("([^"*]+)",/g)].map(
|
||||
(m) => m[1] as string,
|
||||
),
|
||||
];
|
||||
const matchesRoute = (pathname: string) => {
|
||||
const rest = pathname.replace(/^\/console\/?/, "");
|
||||
return ROUTE_PATTERNS.some((p) => new RegExp(`^${p.replace(/:[^/]+/g, "[^/]+")}$`).test(rest));
|
||||
};
|
||||
|
||||
describe("控制台导航", () => {
|
||||
it("12 个工作区 + 定时任务 + 引擎面板 + 审计,路径唯一且都在 /console 下", () => {
|
||||
expect(NAV_ITEMS).toHaveLength(16);
|
||||
expect(new Set(NAV_ITEMS.map((i) => i.to)).size).toBe(16);
|
||||
it("7 组 18 项(另加系统组的定时任务),路径唯一且都在 /console 下", () => {
|
||||
expect(NAV_GROUPS.map((g) => g.title)).toEqual(["概览", "资源", "订阅", "下载", "整理", "Agent", "系统"]);
|
||||
const core = NAV_ITEMS.filter((i) => i.to !== "/console/schedules");
|
||||
expect(core).toHaveLength(18);
|
||||
expect(new Set(NAV_ITEMS.map((i) => i.to)).size).toBe(NAV_ITEMS.length);
|
||||
expect(NAV_ITEMS.every((i) => i.to.startsWith("/console"))).toBe(true);
|
||||
for (const g of NAV_GROUPS) expect(g.items.length).toBeLessThanOrEqual(4);
|
||||
});
|
||||
|
||||
it("每个导航项都有路由", () => {
|
||||
for (const i of NAV_ITEMS) expect(matchesRoute(i.to), i.to).toBe(true);
|
||||
});
|
||||
|
||||
it("按最长前缀匹配当前项", () => {
|
||||
expect(findNavItem("/console")?.label).toBe("首页");
|
||||
expect(findNavItem("/console/")?.label).toBe("首页");
|
||||
expect(findNavItem("/console/library/abc")?.label).toBe("媒体库");
|
||||
expect(findNavItem("/console/engine/r1")?.label).toBe("工作流引擎");
|
||||
expect(findNavItem("/console/engine/r1")?.label).toBe("引擎面板");
|
||||
expect(findNavItem("/console/downloads")?.label).toBe("下载队列");
|
||||
expect(findNavItem("/console/downloads/plans")?.label).toBe("下载计划");
|
||||
expect(findNavItem("/console/downloads/abc")?.label).toBe("下载队列");
|
||||
expect(findNavItem("/console/tasks/abc")?.label).toBe("业务任务");
|
||||
expect(findNavItem("/console/sites/abc")?.label).toBe("站点工作台");
|
||||
expect(findNavItem("/nope")).toBeUndefined();
|
||||
});
|
||||
|
||||
it("consolePath 拼路径并编码", () => {
|
||||
expect(consolePath()).toBe("/console");
|
||||
expect(consolePath("library", "a b")).toBe("/console/library/a%20b");
|
||||
expect(consolePath("downloads", "plans")).toBe("/console/downloads/plans");
|
||||
});
|
||||
|
||||
it("settingsPath 只认新分区名", () => {
|
||||
expect(settingsPath("automation", "cache").startsWith("/console/settings")).toBe(true);
|
||||
expect(settingsPath("agent").startsWith("/console/settings")).toBe(true);
|
||||
});
|
||||
});
|
||||
|
||||
describe("旧链接重定向", () => {
|
||||
it.each(LEGACY_REDIRECTS)("$from → $to", ({ from, to }) => {
|
||||
const u = new URL(from, "http://x");
|
||||
expect(legacyRedirect(u.pathname, u.search)).toBe(to);
|
||||
});
|
||||
|
||||
it("新地址都有路由,且不会再次跳转", () => {
|
||||
for (const { to } of LEGACY_REDIRECTS) {
|
||||
const u = new URL(to, "http://x");
|
||||
expect(matchesRoute(u.pathname), to).toBe(true);
|
||||
if (u.pathname !== "/console/sites/abc") expect(legacyRedirect(u.pathname, u.search)).toBeNull();
|
||||
}
|
||||
});
|
||||
|
||||
it("不相关的 query 不跳转", () => {
|
||||
expect(legacyRedirect("/console/tasks", "?kind=submitDownload")).toBeNull();
|
||||
expect(legacyRedirect("/console/subscriptions", "")).toBeNull();
|
||||
expect(legacyRedirect("/console/sources", "?health=failing")).toBeNull();
|
||||
});
|
||||
});
|
||||
@@ -2,6 +2,7 @@ import {
|
||||
Activity,
|
||||
Bot,
|
||||
CalendarClock,
|
||||
ClipboardList,
|
||||
Download,
|
||||
FileStack,
|
||||
Fingerprint,
|
||||
@@ -10,6 +11,8 @@ import {
|
||||
House,
|
||||
Inbox,
|
||||
Library,
|
||||
ListChecks,
|
||||
ListTodo,
|
||||
type LucideIcon,
|
||||
Rss,
|
||||
ScrollText,
|
||||
@@ -18,7 +21,14 @@ import {
|
||||
Timer,
|
||||
} from "lucide-react";
|
||||
|
||||
export type NavItem = { to: string; label: string; icon: LucideIcon; description: string };
|
||||
export type NavItem = {
|
||||
to: string;
|
||||
label: string;
|
||||
icon: LucideIcon;
|
||||
description: string;
|
||||
/** 侧栏角标的数据来源 */
|
||||
badge?: "decisions";
|
||||
};
|
||||
export type NavGroup = { title: string; items: NavItem[] };
|
||||
|
||||
/** 控制台路由前缀 */
|
||||
@@ -30,7 +40,10 @@ export function consolePath(...segments: (string | number)[]): string {
|
||||
return rest ? `${CONSOLE_BASE}/${rest}` : CONSOLE_BASE;
|
||||
}
|
||||
|
||||
/** 控制台 12 个工作区(任务书 §3.1 第 10 条 / REQ §13.1)+ 引擎面板与审计两个运维页 */
|
||||
/**
|
||||
* 侧栏 7 组(docs/design/console-ia.md §3.2),按业务流程排:概览 → 资源 → 订阅 → 下载 → 整理 → Agent → 系统。
|
||||
* 移动端抽屉用同一份表。
|
||||
*/
|
||||
export const NAV_GROUPS: NavGroup[] = [
|
||||
{
|
||||
title: "概览",
|
||||
@@ -39,89 +52,123 @@ export const NAV_GROUPS: NavGroup[] = [
|
||||
to: "/console",
|
||||
label: "首页",
|
||||
icon: House,
|
||||
description: "自动化概览、当前工作、需要我处理、缓存与保留、来源健康、最近产出",
|
||||
description: "自动化概览、当前工作、待处理、缓存、来源健康、最近产出",
|
||||
},
|
||||
{
|
||||
to: "/console/inbox",
|
||||
label: "待处理中心",
|
||||
label: "待处理",
|
||||
icon: Inbox,
|
||||
description: "按作品与根因合并的待决定事项，Agent 已先行调查",
|
||||
description: "按作品和问题类型合并的待处理事项",
|
||||
badge: "decisions",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "媒体",
|
||||
title: "资源",
|
||||
items: [
|
||||
{ to: "/console/library", label: "媒体库", icon: Library, description: "作品、内容单元、版本目标与实际路径" },
|
||||
{
|
||||
to: "/console/identity",
|
||||
label: "身份与元数据",
|
||||
icon: Fingerprint,
|
||||
description: "外部身份映射、待识别池与元数据来源",
|
||||
to: "/console/sites",
|
||||
label: "站点工作台",
|
||||
icon: Globe,
|
||||
description: "站点、站点账号、快照与 Feed",
|
||||
},
|
||||
{
|
||||
to: "/console/organize",
|
||||
label: "整理记录",
|
||||
icon: FileStack,
|
||||
description: "Copy/Move 入库前后路径与逐文件结果",
|
||||
},
|
||||
{
|
||||
to: "/console/files",
|
||||
label: "文件",
|
||||
icon: FolderTree,
|
||||
description: "浏览已登记的库根与下载目录,改名、移动、删除与批量整理",
|
||||
to: "/console/sources",
|
||||
label: "来源健康",
|
||||
icon: Rss,
|
||||
description: "全部 Feed 与站点的抓取状态",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "获取",
|
||||
title: "订阅",
|
||||
items: [
|
||||
{
|
||||
to: "/console/subscriptions",
|
||||
label: "订阅与收录规则",
|
||||
label: "订阅",
|
||||
icon: CalendarClock,
|
||||
description: "单次收录与持续追踪，版本目标与预算",
|
||||
description: "单次收录与持续追踪",
|
||||
},
|
||||
{
|
||||
to: "/console/rules",
|
||||
label: "收录策略",
|
||||
icon: ListChecks,
|
||||
description: "新作品收录条件、默认版本目标与策略版本",
|
||||
},
|
||||
{
|
||||
to: "/console/preferences",
|
||||
label: "偏好标签",
|
||||
icon: Tags,
|
||||
description: "软偏好与硬规则，手动取消的偏好不会被自动加回",
|
||||
},
|
||||
{
|
||||
to: "/console/sites",
|
||||
label: "PT 站点工作台",
|
||||
icon: Globe,
|
||||
description: "统一格式浏览、搜索站点资源并关联本地库存",
|
||||
},
|
||||
{
|
||||
to: "/console/sources",
|
||||
label: "来源 / Feed / 快照",
|
||||
icon: Rss,
|
||||
description: "RSS 与站点快照的抓取状态、新鲜度与健康",
|
||||
},
|
||||
{
|
||||
to: "/console/tasks",
|
||||
label: "下载与任务",
|
||||
icon: Download,
|
||||
description: "下载、整理、核验的业务时间线与子任务",
|
||||
description: "软偏好影响排序,硬规则直接排除",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "助手与系统",
|
||||
title: "下载",
|
||||
items: [
|
||||
{
|
||||
to: "/console/downloads",
|
||||
label: "下载队列",
|
||||
icon: Download,
|
||||
description: "下载任务与缓存水位",
|
||||
},
|
||||
{
|
||||
to: "/console/downloads/plans",
|
||||
label: "下载计划",
|
||||
icon: ClipboardList,
|
||||
description: "选中候选后生成的计划与空间预留",
|
||||
},
|
||||
{
|
||||
to: "/console/tasks",
|
||||
label: "业务任务",
|
||||
icon: ListTodo,
|
||||
description: "提交下载、核验入库、清理缓存等后台任务",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "整理",
|
||||
items: [
|
||||
{ to: "/console/library", label: "媒体库", icon: Library, description: "作品、季 / 集、版本目标与实际路径" },
|
||||
{
|
||||
to: "/console/organize",
|
||||
label: "整理记录",
|
||||
icon: FileStack,
|
||||
description: "每次整理的前后路径与逐文件结果",
|
||||
},
|
||||
{
|
||||
to: "/console/files",
|
||||
label: "文件管理",
|
||||
icon: FolderTree,
|
||||
description: "浏览登记目录,改名、移动、删除与整理",
|
||||
},
|
||||
{
|
||||
to: "/console/identity",
|
||||
label: "身份与元数据",
|
||||
icon: Fingerprint,
|
||||
description: "外部身份、待识别资源与别名",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Agent",
|
||||
items: [
|
||||
{
|
||||
to: "/console/agent",
|
||||
label: "Agent 会话",
|
||||
icon: Bot,
|
||||
description: "用自然语言交代目标，Agent 在授权内执行并汇报",
|
||||
description: "交代目标,Agent 在授权内执行并汇报",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "系统",
|
||||
items: [
|
||||
{
|
||||
to: "/console/settings",
|
||||
label: "系统设置",
|
||||
label: "设置",
|
||||
icon: Settings,
|
||||
description: "下载器与媒体服务器实例、路径映射、API Key、Pi 上游与自动化开关",
|
||||
description: "下载器、媒体服务器、库根、站点账号、Agent 上游与自动化",
|
||||
},
|
||||
{
|
||||
to: "/console/schedules",
|
||||
@@ -131,9 +178,9 @@ export const NAV_GROUPS: NavGroup[] = [
|
||||
},
|
||||
{
|
||||
to: "/console/engine",
|
||||
label: "工作流引擎",
|
||||
label: "引擎面板",
|
||||
icon: Activity,
|
||||
description: "持久任务引擎的运行记录、步骤尝试与信号(只读诊断,仅管理员)",
|
||||
description: "排查用,业务进度看业务任务。仅管理员",
|
||||
},
|
||||
{
|
||||
to: "/console/audit",
|
||||
@@ -147,6 +194,35 @@ export const NAV_GROUPS: NavGroup[] = [
|
||||
|
||||
export const NAV_ITEMS = NAV_GROUPS.flatMap((g) => g.items);
|
||||
|
||||
/**
|
||||
* 设置页深链。IA-2 把设置改为 /console/settings/:section 之前,先落到现有 ?tab=;
|
||||
* 调用方只认新分区名,切换时只改这里。
|
||||
*/
|
||||
export type SettingsSection =
|
||||
| "automation"
|
||||
| "sites"
|
||||
| "downloaders"
|
||||
| "library"
|
||||
| "media-servers"
|
||||
| "metadata"
|
||||
| "agent"
|
||||
| "api-keys"
|
||||
| "account";
|
||||
const SETTINGS_LEGACY_TAB: Partial<Record<SettingsSection, string>> = {
|
||||
automation: "automation",
|
||||
sites: "site-credentials",
|
||||
downloaders: "downloaders",
|
||||
library: "library-roots",
|
||||
"media-servers": "media-servers",
|
||||
agent: "pi",
|
||||
"api-keys": "api-keys",
|
||||
};
|
||||
export function settingsPath(section: SettingsSection, anchor?: string): string {
|
||||
// 缓存阈值现在在"缓存与入库"页签,IA-2 后归到 automation#cache
|
||||
const tab = section === "automation" && anchor === "cache" ? "storage" : SETTINGS_LEGACY_TAB[section];
|
||||
return tab ? `${CONSOLE_BASE}/settings?tab=${tab}` : `${CONSOLE_BASE}/settings`;
|
||||
}
|
||||
|
||||
/** 按路径找当前导航项(最长前缀匹配) */
|
||||
export function findNavItem(pathname: string): NavItem | undefined {
|
||||
return (
|
||||
|
||||
@@ -0,0 +1,40 @@
|
||||
import { useCallback } from "react";
|
||||
import { useSearchParams } from "react-router";
|
||||
|
||||
/**
|
||||
* 列表页筛选状态写进 URL query(docs/design/console-ia.md §3.6),刷新和分享链接不丢筛选。
|
||||
* const f = useQueryState(["status", "managed"]);
|
||||
* f.values.status; f.set("status", "paused"); f.reset();
|
||||
*/
|
||||
export function useQueryState<K extends string>(keys: readonly K[]) {
|
||||
const [params, setParams] = useSearchParams();
|
||||
const values = Object.fromEntries(keys.map((k) => [k, params.get(k) ?? ""])) as Record<K, string>;
|
||||
const set = useCallback(
|
||||
(key: K, value: string) =>
|
||||
setParams(
|
||||
(prev) => {
|
||||
const next = new URLSearchParams(prev);
|
||||
if (value) next.set(key, value);
|
||||
else next.delete(key);
|
||||
return next;
|
||||
},
|
||||
{ replace: true },
|
||||
),
|
||||
[setParams],
|
||||
);
|
||||
const keyList = keys.join(",");
|
||||
const reset = useCallback(
|
||||
() =>
|
||||
setParams(
|
||||
(prev) => {
|
||||
const next = new URLSearchParams(prev);
|
||||
for (const k of keyList.split(",")) next.delete(k);
|
||||
return next;
|
||||
},
|
||||
{ replace: true },
|
||||
),
|
||||
[setParams, keyList],
|
||||
);
|
||||
const active = keys.some((k) => !!values[k]);
|
||||
return { values, set, reset, active };
|
||||
}
|
||||
@@ -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) => (
|
||||
|
||||
@@ -648,7 +648,7 @@ export function DeleteDialog({
|
||||
const reason = filesErrorReason(e);
|
||||
setErr(
|
||||
reason === "permanent_disabled"
|
||||
? "系统设置未开启永久删除(files.allowPermanentDelete)"
|
||||
? "设置里未开启永久删除(files.allowPermanentDelete)"
|
||||
: reason === "approval_required"
|
||||
? "用 API Key 删除,每次都需要审批"
|
||||
: filesErrorText(e),
|
||||
@@ -701,7 +701,7 @@ export function DeleteDialog({
|
||||
{c.downloads.map((d) => (
|
||||
<p key={d.taskId}>
|
||||
下载任务{" "}
|
||||
<Link className="underline hover:text-foreground" to={`/console/tasks/${d.taskId}`}>
|
||||
<Link className="underline hover:text-foreground" to={`/console/downloads/${d.taskId}`}>
|
||||
{d.taskId.slice(0, 8)}
|
||||
</Link>{" "}
|
||||
· {d.status} · H&R{" "}
|
||||
@@ -774,7 +774,7 @@ export function DeleteDialog({
|
||||
<span>
|
||||
永久删除
|
||||
<span className="block text-meta text-muted-foreground">
|
||||
{isAdmin ? "不可恢复。需要在系统设置里开启。" : "仅管理员会话可用。"}
|
||||
{isAdmin ? "不可恢复。需要在设置里开启。" : "仅管理员会话可用。"}
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
@@ -858,7 +858,7 @@ export function CopyPathDialog({ root, entry, onClose }: { root: FileRoot; entry
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<p className="text-meta text-muted-foreground">下载器与媒体服务器看到的路径按“系统设置 → 路径映射”换算。</p>
|
||||
<p className="text-meta text-muted-foreground">下载器与媒体服务器看到的路径按“设置 → 路径映射”换算。</p>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
|
||||
@@ -132,7 +132,7 @@ export function FileDetail({
|
||||
{
|
||||
label: "任务",
|
||||
value: (
|
||||
<Link className="underline underline-offset-2" to={`/console/tasks/${e.download.taskId}`}>
|
||||
<Link className="underline underline-offset-2" to={`/console/downloads/${e.download.taskId}`}>
|
||||
{downloadLabel(e.download.status).label}
|
||||
</Link>
|
||||
),
|
||||
|
||||
@@ -66,7 +66,7 @@ export function EntryStatus({ e, compact = false }: { e: FileEntry; compact?: bo
|
||||
<StatusBadge tone={v.tone}>{v.label}</StatusBadge>
|
||||
{!compact && e.download ? (
|
||||
<Link
|
||||
to={`/console/tasks/${e.download.taskId}`}
|
||||
to={`/console/downloads/${e.download.taskId}`}
|
||||
onClick={(ev) => ev.stopPropagation()}
|
||||
className="truncate text-meta text-muted-foreground underline-offset-2 hover:text-foreground hover:underline"
|
||||
>
|
||||
|
||||
@@ -385,7 +385,7 @@ export function OrganizeWizard({
|
||||
</div>
|
||||
</section>
|
||||
<section className="space-y-1 rounded-xl border border-border px-3 py-2.5 text-caption text-muted-foreground">
|
||||
<p>命名:按系统设置的命名模板;已绑定的作品/季沿用原目录。</p>
|
||||
<p>命名:按设置里的命名模板;已绑定的作品/季沿用原目录。</p>
|
||||
<p>目标已存在:不覆盖,作为冲突进入待处理。</p>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
@@ -208,7 +208,6 @@ export function PolicyWorkspace({
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<p className="text-caption text-muted-foreground">草案发布后才生效。回滚会用旧版本内容发布一个新版本。</p>
|
||||
{q.isPending ? (
|
||||
<div className="pg-slab rounded-xl p-4">
|
||||
<LoadingState rows={4} />
|
||||
|
||||
@@ -56,7 +56,7 @@ export function DownloadDialog({
|
||||
if (r.submitted && r.plan) {
|
||||
setRejected(null);
|
||||
setDone(r.plan.id);
|
||||
toast.success(`已提交${slotName(r.slotId) ? `(${slotName(r.slotId)})` : ""},进度见“下载与任务”`);
|
||||
toast.success(`已提交${slotName(r.slotId) ? `(${slotName(r.slotId)})` : ""},进度见“下载队列”`);
|
||||
} else {
|
||||
setRejected(r.rejected);
|
||||
toast.warning("没有生成下载计划");
|
||||
@@ -121,7 +121,7 @@ export function DownloadDialog({
|
||||
{done ? (
|
||||
<p className="text-caption text-success">
|
||||
计划已生成。
|
||||
<Link to="/console/tasks" className="underline underline-offset-4">
|
||||
<Link to="/console/downloads/plans" className="underline underline-offset-4">
|
||||
查看
|
||||
</Link>
|
||||
</p>
|
||||
|
||||
@@ -22,6 +22,10 @@ export default [
|
||||
route("sites", "routes/console/sites.tsx"),
|
||||
route("sites/:siteId", "routes/console/sites.$siteId.tsx"),
|
||||
route("sources", "routes/console/sources.tsx"),
|
||||
route("rules", "routes/console/rules.tsx"),
|
||||
route("downloads", "routes/console/downloads.tsx"),
|
||||
route("downloads/plans", "routes/console/downloads.plans.tsx"),
|
||||
route("downloads/:id", "routes/console/downloads.$id.tsx"),
|
||||
route("tasks", "routes/console/tasks.tsx"),
|
||||
route("tasks/:id", "routes/console/tasks.$id.tsx"),
|
||||
route("agent", "routes/console/agent.tsx"),
|
||||
|
||||
@@ -0,0 +1,41 @@
|
||||
import { ArrowLeft } from "lucide-react";
|
||||
import { Link, useParams } from "react-router";
|
||||
import { useDownloadTask } from "~/api/downloads.ts";
|
||||
import { ErrorState, LoadingState } from "~/components/console/empty-state.tsx";
|
||||
import { consolePath } from "~/components/console/nav.ts";
|
||||
import { PageHeader } from "~/components/console/page-header.tsx";
|
||||
import { DownloadDetail } from "~/components/downloads/download-detail.tsx";
|
||||
import { Button } from "~/components/ui/button.tsx";
|
||||
|
||||
export const meta = () => [{ title: "下载任务 · UHD 媒体自动化控制台" }];
|
||||
|
||||
export default function DownloadTaskPage() {
|
||||
const { id = "" } = useParams();
|
||||
const task = useDownloadTask(id);
|
||||
const t = task.data;
|
||||
return (
|
||||
<>
|
||||
<PageHeader
|
||||
title={t?.name ?? "下载任务"}
|
||||
className="[&_h1]:break-all"
|
||||
actions={
|
||||
<Button asChild variant="ghost" size="sm">
|
||||
<Link to={consolePath("downloads")}>
|
||||
<ArrowLeft />
|
||||
下载队列
|
||||
</Link>
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
<div className="pg-slab rounded-xl p-4 md:p-5">
|
||||
{task.isPending ? (
|
||||
<LoadingState rows={5} />
|
||||
) : task.error ? (
|
||||
<ErrorState plain error={task.error} onRetry={() => void task.refetch()} />
|
||||
) : (
|
||||
<DownloadDetail task={task.data} />
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,146 @@
|
||||
import type { AcquisitionPlan, PlanStatus } from "@umt/contracts";
|
||||
import { ClipboardList } from "lucide-react";
|
||||
import { useState } from "react";
|
||||
import { Link } from "react-router";
|
||||
import { PLAN_STATUS_LABEL, useDownloadTasks, usePlans } from "~/api/downloads.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 { JsonView } from "~/components/console/json-view.tsx";
|
||||
import { KvList } from "~/components/console/kv-list.tsx";
|
||||
import { consolePath } from "~/components/console/nav.ts";
|
||||
import { PageHeader } from "~/components/console/page-header.tsx";
|
||||
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 { formatBytes, formatDateTime } from "~/lib/utils.ts";
|
||||
|
||||
export const meta = () => [{ title: "下载计划 · UHD 媒体自动化控制台" }];
|
||||
|
||||
const PURPOSE = { fill: "补缺", upgrade: "升级", replace_source: "换源" } as const;
|
||||
|
||||
const planTone = (s: PlanStatus) =>
|
||||
s === "failed" ? "destructive" : s === "completed" ? "success" : s === "expired" ? "warning" : "neutral";
|
||||
|
||||
export default function DownloadPlansPage() {
|
||||
const f = useQueryState(["status"] as const);
|
||||
const [openPlan, setOpenPlan] = useState<AcquisitionPlan | null>(null);
|
||||
const plans = usePlans((f.values.status || undefined) as PlanStatus | undefined);
|
||||
// 计划 → 下载任务:同一列表按 acquisitionPlanId 对上
|
||||
const downloads = useDownloadTasks({});
|
||||
const rows = plans.data?.pages.flatMap((p) => p.items);
|
||||
const linkedDownload = openPlan
|
||||
? downloads.data?.pages.flatMap((p) => p.items).find((t) => t.acquisitionPlanId === openPlan.id)
|
||||
: undefined;
|
||||
|
||||
const columns: DataColumn<AcquisitionPlan>[] = [
|
||||
{
|
||||
key: "purpose",
|
||||
header: "计划",
|
||||
cell: (p) => (
|
||||
<div className="min-w-0">
|
||||
<p className="text-foreground">
|
||||
{PURPOSE[p.purpose]} · 优先级 {p.priority}
|
||||
</p>
|
||||
<p className="truncate font-mono text-meta text-muted-foreground">{p.id.slice(0, 8)}</p>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: "status",
|
||||
header: "状态",
|
||||
cell: (p) => <StatusBadge tone={planTone(p.status)}>{PLAN_STATUS_LABEL[p.status]}</StatusBadge>,
|
||||
},
|
||||
{
|
||||
key: "reserved",
|
||||
header: "预留空间",
|
||||
hideBelow: "md",
|
||||
align: "right",
|
||||
cell: (p) => <span className="tabular-nums">{formatBytes(p.reservedBytes, 1)}</span>,
|
||||
},
|
||||
{
|
||||
key: "reason",
|
||||
header: "说明",
|
||||
hideBelow: "lg",
|
||||
cell: (p) => <span className="line-clamp-1 text-muted-foreground">{p.statusReason ?? "—"}</span>,
|
||||
},
|
||||
{
|
||||
key: "at",
|
||||
header: "创建",
|
||||
hideBelow: "sm",
|
||||
cell: (p) => <span className="whitespace-nowrap text-muted-foreground">{relTime(p.createdAt)}</span>,
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<>
|
||||
<PageHeader title="下载计划" description="候选被选中后生成计划,同时预留版本目标、空间与预算。" />
|
||||
<FilterBar onReset={f.active ? f.reset : undefined}>
|
||||
<FilterSelect
|
||||
label="状态"
|
||||
value={f.values.status}
|
||||
onChange={(v) => f.set("status", v)}
|
||||
options={Object.entries(PLAN_STATUS_LABEL).map(([value, label]) => ({ value, label }))}
|
||||
/>
|
||||
</FilterBar>
|
||||
<DataTable
|
||||
columns={columns}
|
||||
rows={rows}
|
||||
rowKey={(p) => p.id}
|
||||
loading={plans.isPending}
|
||||
error={plans.error}
|
||||
onRetry={() => void plans.refetch()}
|
||||
onRowClick={setOpenPlan}
|
||||
selectedKey={openPlan?.id}
|
||||
hasMore={plans.hasNextPage}
|
||||
onLoadMore={() => void plans.fetchNextPage()}
|
||||
loadingMore={plans.isFetchingNextPage}
|
||||
empty={{
|
||||
icon: ClipboardList,
|
||||
title: f.active ? "没有符合筛选的下载计划" : "还没有下载计划",
|
||||
description: f.active ? undefined : "候选被选中后出现在这里。",
|
||||
}}
|
||||
/>
|
||||
|
||||
<DetailSheet
|
||||
open={!!openPlan}
|
||||
onOpenChange={(o) => !o && setOpenPlan(null)}
|
||||
title={openPlan ? `${PURPOSE[openPlan.purpose]}计划` : ""}
|
||||
description={openPlan?.statusReason ?? undefined}
|
||||
footer={
|
||||
linkedDownload ? (
|
||||
<Button asChild size="sm">
|
||||
<Link to={consolePath("downloads", linkedDownload.id)}>查看下载任务</Link>
|
||||
</Button>
|
||||
) : null
|
||||
}
|
||||
>
|
||||
{openPlan ? (
|
||||
<>
|
||||
<KvList
|
||||
items={[
|
||||
{
|
||||
label: "状态",
|
||||
value: (
|
||||
<StatusBadge tone={planTone(openPlan.status)}>{PLAN_STATUS_LABEL[openPlan.status]}</StatusBadge>
|
||||
),
|
||||
},
|
||||
{ label: "优先级", value: openPlan.priority },
|
||||
{ label: "预留空间", value: formatBytes(openPlan.reservedBytes, 1) },
|
||||
{ label: "过期于", value: formatDateTime(openPlan.expiresAt) },
|
||||
{ label: "创建", value: formatDateTime(openPlan.createdAt) },
|
||||
{ label: "版本目标", value: openPlan.slotId, mono: true },
|
||||
{ label: "资源", value: openPlan.sourceReleaseId, mono: true, wide: true },
|
||||
]}
|
||||
/>
|
||||
<DetailSection title="评估依据">
|
||||
<JsonView value={openPlan.evaluation} />
|
||||
</DetailSection>
|
||||
<JsonView label="预算预留" value={openPlan.budgetReservation} />
|
||||
</>
|
||||
) : null}
|
||||
</DetailSheet>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,155 @@
|
||||
import { useQueryClient } from "@tanstack/react-query";
|
||||
import type { DownloadStatus, DownloadTask } from "@umt/contracts";
|
||||
import { EventType } from "@umt/contracts";
|
||||
import { Download, RefreshCw } from "lucide-react";
|
||||
import { useState } from "react";
|
||||
import { Link } from "react-router";
|
||||
import { DOWNLOAD_STATUS_LABEL, useDownloaderNames, useDownloadTasks } from "~/api/downloads.ts";
|
||||
import { type DataColumn, DataTable } from "~/components/console/data-table.tsx";
|
||||
import { DetailSheet } from "~/components/console/detail-sheet.tsx";
|
||||
import { FilterBar, FilterSelect } from "~/components/console/filter-bar.tsx";
|
||||
import { consolePath } from "~/components/console/nav.ts";
|
||||
import { PageHeader } from "~/components/console/page-header.tsx";
|
||||
import { useQueryState } from "~/components/console/use-query-state.ts";
|
||||
import { CacheVolumes } from "~/components/downloads/cache-volumes.tsx";
|
||||
import {
|
||||
DownloadDetail,
|
||||
DownloadStatusBadges,
|
||||
PauseResume,
|
||||
ProgressLine,
|
||||
} from "~/components/downloads/download-detail.tsx";
|
||||
import { Button } from "~/components/ui/button.tsx";
|
||||
import { relTime } from "~/components/workbench/release-fields.ts";
|
||||
import { useSse } from "~/lib/sse.ts";
|
||||
import { formatBytes } from "~/lib/utils.ts";
|
||||
|
||||
export const meta = () => [{ title: "下载队列 · UHD 媒体自动化控制台" }];
|
||||
|
||||
export default function DownloadsPage() {
|
||||
const f = useQueryState(["status", "managed"] as const);
|
||||
const [openId, setOpenId] = useState<string | null>(null);
|
||||
const qc = useQueryClient();
|
||||
const downloads = useDownloadTasks({
|
||||
status: (f.values.status || undefined) as DownloadStatus | undefined,
|
||||
managed: (f.values.managed || undefined) as "true" | "false" | undefined,
|
||||
});
|
||||
const names = useDownloaderNames();
|
||||
|
||||
// 下载进度/状态、阈值事件到达时刷新列表(SSE 为主,轮询兜底)
|
||||
useSse(
|
||||
[
|
||||
EventType.downloadProgress,
|
||||
EventType.downloadStatusChanged,
|
||||
EventType.downloadSubmitted,
|
||||
EventType.downloadThreshold,
|
||||
],
|
||||
() => void qc.invalidateQueries({ queryKey: ["downloads"] }),
|
||||
);
|
||||
|
||||
const rows = downloads.data?.pages.flatMap((p) => p.items);
|
||||
const open = rows?.find((t) => t.id === openId) ?? null;
|
||||
|
||||
const columns: DataColumn<DownloadTask>[] = [
|
||||
{
|
||||
key: "name",
|
||||
header: "下载任务",
|
||||
cell: (t) => (
|
||||
<div className="min-w-0 max-w-sm">
|
||||
<p className="line-clamp-2 break-all text-foreground">{t.name}</p>
|
||||
<p className="mt-0.5 truncate text-meta text-muted-foreground">
|
||||
{names.data?.get(t.instanceId) ?? "下载器"} · {t.tags.join(", ") || "无标签"}
|
||||
</p>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{ key: "status", header: "状态", cell: (t) => <DownloadStatusBadges t={t} /> },
|
||||
{ key: "progress", header: "进度", hideBelow: "sm", cell: (t) => <ProgressLine t={t} /> },
|
||||
{
|
||||
key: "size",
|
||||
header: "大小",
|
||||
hideBelow: "lg",
|
||||
align: "right",
|
||||
cell: (t) => (
|
||||
<span className="whitespace-nowrap tabular-nums">
|
||||
{t.sizeBytes === null ? "未知" : formatBytes(t.sizeBytes, 1)}
|
||||
</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: "at",
|
||||
header: "更新",
|
||||
hideBelow: "md",
|
||||
cell: (t) => (
|
||||
<span className="whitespace-nowrap text-muted-foreground">{relTime(t.lastSyncedAt ?? t.updatedAt)}</span>
|
||||
),
|
||||
},
|
||||
{ key: "ops", header: "", align: "right", cell: (t) => <PauseResume t={t} size="xs" /> },
|
||||
];
|
||||
|
||||
return (
|
||||
<>
|
||||
<PageHeader
|
||||
title="下载队列"
|
||||
description="阈值暂停不能手动绕过;无进展只记录,不自动换源。"
|
||||
actions={
|
||||
<Button variant="outline" size="sm" onClick={() => void qc.invalidateQueries({ queryKey: ["downloads"] })}>
|
||||
<RefreshCw className={downloads.isFetching ? "animate-spin" : undefined} />
|
||||
刷新
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
<CacheVolumes />
|
||||
<FilterBar onReset={f.active ? f.reset : undefined}>
|
||||
<FilterSelect
|
||||
label="状态"
|
||||
value={f.values.status}
|
||||
onChange={(v) => f.set("status", v)}
|
||||
options={Object.entries(DOWNLOAD_STATUS_LABEL).map(([value, label]) => ({ value, label }))}
|
||||
/>
|
||||
<FilterSelect
|
||||
label="纳管"
|
||||
value={f.values.managed}
|
||||
onChange={(v) => f.set("managed", v)}
|
||||
options={[
|
||||
{ value: "true", label: "纳管任务" },
|
||||
{ value: "false", label: "未纳管" },
|
||||
]}
|
||||
/>
|
||||
</FilterBar>
|
||||
<DataTable
|
||||
columns={columns}
|
||||
rows={rows}
|
||||
rowKey={(t) => t.id}
|
||||
loading={downloads.isPending}
|
||||
error={downloads.error}
|
||||
onRetry={() => void downloads.refetch()}
|
||||
onRowClick={(t) => setOpenId(t.id)}
|
||||
selectedKey={openId}
|
||||
hasMore={downloads.hasNextPage}
|
||||
onLoadMore={() => void downloads.fetchNextPage()}
|
||||
loadingMore={downloads.isFetchingNextPage}
|
||||
empty={{
|
||||
icon: Download,
|
||||
title: f.active ? "没有符合筛选的下载任务" : "还没有下载任务",
|
||||
description: f.active ? undefined : "自动收录或在站点工作台下载后出现在这里。",
|
||||
}}
|
||||
/>
|
||||
|
||||
<DetailSheet
|
||||
open={!!open}
|
||||
onOpenChange={(o) => !o && setOpenId(null)}
|
||||
width="lg"
|
||||
title={open?.name ?? ""}
|
||||
footer={
|
||||
open ? (
|
||||
<Button asChild variant="outline" size="sm">
|
||||
<Link to={consolePath("downloads", open.id)}>在独立页面打开</Link>
|
||||
</Button>
|
||||
) : null
|
||||
}
|
||||
>
|
||||
{open ? <DownloadDetail task={open} /> : null}
|
||||
</DetailSheet>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -17,7 +17,7 @@ import { errorMessage } from "~/lib/api.ts";
|
||||
import { engineRunLabel, formatDuration, formatRelative, spanSec as runDurationSec } from "~/lib/labels.ts";
|
||||
import { formatDateTime } from "~/lib/utils.ts";
|
||||
|
||||
export const meta = () => [{ title: "运行详情 · 工作流引擎" }];
|
||||
export const meta = () => [{ title: "运行详情 · 引擎面板" }];
|
||||
|
||||
const KIND_LABEL: Record<string, string> = {
|
||||
function: "函数",
|
||||
|
||||
@@ -2,7 +2,7 @@ import { useQueryClient } from "@tanstack/react-query";
|
||||
import type { EngineRun } from "@umt/contracts";
|
||||
import { Ban, CheckCircle2, Clock, Cpu, LoaderCircle, RotateCw, XCircle } from "lucide-react";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { useNavigate, useSearchParams } from "react-router";
|
||||
import { Link, useNavigate, useSearchParams } from "react-router";
|
||||
import { useEngineRuns, useEngineStats } from "~/api/engine.ts";
|
||||
import { DataTable } from "~/components/console/data-table.tsx";
|
||||
import { FilterBar, FilterSelect } from "~/components/console/filter-bar.tsx";
|
||||
@@ -15,7 +15,7 @@ import { engineRunLabel, formatDuration, formatRelative, spanSec as runDurationS
|
||||
import { qk } from "~/lib/query-keys.ts";
|
||||
import { useSse } from "~/lib/sse.ts";
|
||||
|
||||
export const meta = () => [{ title: "工作流引擎 · UHD 媒体自动化控制台" }];
|
||||
export const meta = () => [{ title: "引擎面板 · UHD 媒体自动化控制台" }];
|
||||
|
||||
const STAT_ORDER = [
|
||||
{ status: "pending", label: "待执行", icon: Clock, tone: "neutral" },
|
||||
@@ -95,8 +95,15 @@ export default function EnginePage() {
|
||||
return (
|
||||
<>
|
||||
<PageHeader
|
||||
title="工作流引擎"
|
||||
description="引擎的运行记录，只读。业务进度看「下载与任务」。"
|
||||
title="引擎面板"
|
||||
description={
|
||||
<>
|
||||
排查用,只读。业务进度看
|
||||
<Link to={consolePath("tasks")} className="mx-1 underline underline-offset-4">
|
||||
业务任务
|
||||
</Link>
|
||||
</>
|
||||
}
|
||||
actions={
|
||||
<Button
|
||||
variant="outline"
|
||||
|
||||
@@ -442,7 +442,7 @@ export default function FilesPage() {
|
||||
plain
|
||||
icon={FolderTree}
|
||||
title="还没有库根"
|
||||
description="在系统设置里登记库根或下载器路径映射。"
|
||||
description="在设置里登记库根或下载器路径映射。"
|
||||
className="px-2 py-8"
|
||||
/>
|
||||
) : null}
|
||||
@@ -614,7 +614,7 @@ export default function FilesPage() {
|
||||
return (
|
||||
<>
|
||||
<PageHeader
|
||||
title="文件"
|
||||
title="文件管理"
|
||||
description="已登记的库根与下载目录。删除先进回收站,改名同步更新资产。"
|
||||
actions={
|
||||
<>
|
||||
|
||||
@@ -230,7 +230,7 @@ function CurrentWork({ w }: { w: Dashboard["currentWork"] }) {
|
||||
];
|
||||
const idle = counts.every((c) => c.v === 0) && w.items.length === 0 && w.agentRuns.length === 0;
|
||||
return (
|
||||
<Section title="当前工作" icon={Activity} to={consolePath("tasks")}>
|
||||
<Section title="当前工作" icon={Activity} to={consolePath("downloads")}>
|
||||
<div className="mb-2 flex flex-wrap gap-x-4 gap-y-1 text-meta text-muted-foreground">
|
||||
{counts.map((c) => (
|
||||
<span key={c.label}>
|
||||
@@ -246,7 +246,10 @@ function CurrentWork({ w }: { w: Dashboard["currentWork"] }) {
|
||||
const s = downloadLabel(it.status);
|
||||
return (
|
||||
<Row key={it.downloadTaskId}>
|
||||
<Link to={consolePath("tasks", it.downloadTaskId)} className="min-w-0 flex-1 truncate hover:underline">
|
||||
<Link
|
||||
to={consolePath("downloads", it.downloadTaskId)}
|
||||
className="min-w-0 flex-1 truncate hover:underline"
|
||||
>
|
||||
{it.name}
|
||||
</Link>
|
||||
<span className="shrink-0 text-meta text-muted-foreground tabular-nums">
|
||||
@@ -300,7 +303,7 @@ function NeedsAttention({ n }: { n: Dashboard["needsAttention"] }) {
|
||||
|
||||
function CacheSection({ c }: { c: Dashboard["cache"] }) {
|
||||
return (
|
||||
<Section title="缓存与保留" icon={HardDrive} to={consolePath("settings")}>
|
||||
<Section title="缓存水位" icon={HardDrive} to={consolePath("downloads")}>
|
||||
{c.volumes.length === 0 ? (
|
||||
<EmptyState
|
||||
plain
|
||||
@@ -402,7 +405,7 @@ function SourcesSection({ s }: { s: Dashboard["sources"] }) {
|
||||
plain
|
||||
icon={Radio}
|
||||
title="还没有来源"
|
||||
description="在系统设置或来源页登记站点、Feed 与实例。"
|
||||
description="在站点工作台登记站点,在来源健康新建 Feed。"
|
||||
className="py-6"
|
||||
/>
|
||||
) : (
|
||||
|
||||
@@ -21,7 +21,7 @@ import { errorMessage } from "~/lib/api.ts";
|
||||
import { useSse, useSseStatus } from "~/lib/sse.ts";
|
||||
import { formatDateTime } from "~/lib/utils.ts";
|
||||
|
||||
// 待处理中心(REQ §13.1):按作品与问题类型合并;每项给证据、建议、影响范围与预览;
|
||||
// 待处理(REQ §13.1):按作品与问题类型合并;每项给证据、建议、影响范围与预览;
|
||||
// 处理选项来自后端 decision.options;SSE 收到 decision.* 事件即刷新。
|
||||
|
||||
const OPEN: DecisionStatus[] = ["open", "investigating", "awaiting_user"];
|
||||
@@ -276,7 +276,7 @@ export default function InboxPage() {
|
||||
return (
|
||||
<>
|
||||
<PageHeader
|
||||
title="待处理中心"
|
||||
title="待处理"
|
||||
description="Agent 调查和重试后仍未解决的事项,按作品和问题类型合并"
|
||||
actions={
|
||||
<>
|
||||
|
||||
@@ -1,13 +1,14 @@
|
||||
import type { SessionInfo } from "@umt/contracts";
|
||||
import { ChevronLeft, ChevronRight, Clapperboard, LoaderCircle, Menu } from "lucide-react";
|
||||
import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
|
||||
import { Link, NavLink, Outlet, useLocation } from "react-router";
|
||||
import { Link, Outlet, useLocation } from "react-router";
|
||||
import { useSession } from "~/api/auth.ts";
|
||||
import { useDecisionSummary } from "~/api/decisions.ts";
|
||||
import { AgentDrawer, AgentDrawerTrigger } from "~/components/agent/agent-drawer.tsx";
|
||||
import { AccountMenu } from "~/components/console/account-menu.tsx";
|
||||
import { AgentLauncher, AgentNavEntry } from "~/components/console/agent-launcher.tsx";
|
||||
import { ErrorState } from "~/components/console/empty-state.tsx";
|
||||
import { CONSOLE_BASE, findNavItem, NAV_GROUPS, NAV_ITEMS, type NavGroup } from "~/components/console/nav.ts";
|
||||
import { findNavItem, NAV_GROUPS, type NavGroup, type NavItem } from "~/components/console/nav.ts";
|
||||
import PrismLeak from "~/components/prism-leak.tsx";
|
||||
import { ThemeToggle } from "~/components/theme-toggle.tsx";
|
||||
import { Button } from "~/components/ui/button.tsx";
|
||||
@@ -17,9 +18,31 @@ import { cn } from "~/lib/utils.ts";
|
||||
|
||||
const PORTAL_NAME = "媒体自动化";
|
||||
|
||||
/** 侧栏角标:待处理未决数 */
|
||||
function useNavBadges(): Record<NonNullable<NavItem["badge"]>, number> {
|
||||
const summary = useDecisionSummary();
|
||||
return { decisions: summary.data?.total ?? 0 };
|
||||
}
|
||||
|
||||
function NavBadge({ n, className }: { n: number; className?: string }) {
|
||||
if (!n) return null;
|
||||
return (
|
||||
<span
|
||||
className={cn(
|
||||
"min-w-5 rounded-full bg-warning/15 px-1.5 text-center text-micro leading-5 font-semibold text-warning tabular-nums",
|
||||
className,
|
||||
)}
|
||||
>
|
||||
{n > 99 ? "99+" : n}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
// ─── 展开态导航:选中项由一枚玻璃滑块(seg-thumb)滑到激活链接背后 ───
|
||||
function ExpandedNav({ groups, onNavigate }: { groups: NavGroup[]; onNavigate?: () => void }) {
|
||||
const location = useLocation();
|
||||
const activeTo = findNavItem(location.pathname)?.to;
|
||||
const badges = useNavBadges();
|
||||
const navRef = useRef<HTMLElement>(null);
|
||||
const [pill, setPill] = useState<{ x: number; y: number; w: number; h: number } | null>(null);
|
||||
|
||||
@@ -62,29 +85,27 @@ function ExpandedNav({ groups, onNavigate }: { groups: NavGroup[]; onNavigate?:
|
||||
{group.title}
|
||||
</p>
|
||||
<div className="space-y-0.5">
|
||||
{group.items.map((item) => (
|
||||
<NavLink
|
||||
key={item.to}
|
||||
to={item.to}
|
||||
end={item.to === CONSOLE_BASE}
|
||||
onClick={onNavigate}
|
||||
className={({ isActive }) =>
|
||||
cn(
|
||||
{group.items.map((item) => {
|
||||
const active = item.to === activeTo;
|
||||
return (
|
||||
<Link
|
||||
key={item.to}
|
||||
to={item.to}
|
||||
onClick={onNavigate}
|
||||
aria-current={active ? "page" : undefined}
|
||||
className={cn(
|
||||
"flex w-full items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-colors duration-base",
|
||||
isActive
|
||||
active
|
||||
? "text-foreground"
|
||||
: "text-muted-foreground hover:bg-foreground/[0.04] hover:text-foreground",
|
||||
)
|
||||
}
|
||||
>
|
||||
{({ isActive }) => (
|
||||
<>
|
||||
<item.icon className={cn("h-4 w-4 shrink-0", isActive && "text-primary")} />
|
||||
<span className="flex-1 truncate">{item.label}</span>
|
||||
</>
|
||||
)}
|
||||
</NavLink>
|
||||
))}
|
||||
)}
|
||||
>
|
||||
<item.icon className={cn("h-4 w-4 shrink-0", active && "text-primary")} />
|
||||
<span className="flex-1 truncate">{item.label}</span>
|
||||
{item.badge ? <NavBadge n={badges[item.badge]} /> : null}
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
@@ -92,28 +113,41 @@ function ExpandedNav({ groups, onNavigate }: { groups: NavGroup[]; onNavigate?:
|
||||
);
|
||||
}
|
||||
|
||||
// ─── 折叠态:只显示图标 ───
|
||||
// ─── 折叠态:只显示图标,组间细线分隔 ───
|
||||
function CollapsedNav() {
|
||||
const location = useLocation();
|
||||
const activeTo = findNavItem(location.pathname)?.to;
|
||||
const badges = useNavBadges();
|
||||
return (
|
||||
<nav className="flex flex-1 flex-col items-center gap-1 overflow-y-auto py-4">
|
||||
<AgentNavEntry collapsed />
|
||||
{NAV_ITEMS.map((item) => (
|
||||
<NavLink
|
||||
key={item.to}
|
||||
to={item.to}
|
||||
end={item.to === CONSOLE_BASE}
|
||||
title={item.label}
|
||||
className={({ isActive }) =>
|
||||
cn(
|
||||
"flex h-10 w-10 items-center justify-center rounded-xl transition-colors duration-micro",
|
||||
isActive
|
||||
? "seg-thumb text-primary"
|
||||
: "text-muted-foreground hover:bg-foreground/[0.04] hover:text-foreground",
|
||||
)
|
||||
}
|
||||
>
|
||||
<item.icon className="h-[18px] w-[18px]" />
|
||||
</NavLink>
|
||||
{NAV_GROUPS.map((group, gi) => (
|
||||
<div key={group.title} className="flex flex-col items-center gap-1">
|
||||
{gi > 0 ? <span aria-hidden className="my-1 h-px w-6 bg-border" /> : null}
|
||||
{group.items.map((item) => {
|
||||
const active = item.to === activeTo;
|
||||
const n = item.badge ? badges[item.badge] : 0;
|
||||
return (
|
||||
<Link
|
||||
key={item.to}
|
||||
to={item.to}
|
||||
title={n ? `${item.label}(${n})` : item.label}
|
||||
aria-current={active ? "page" : undefined}
|
||||
className={cn(
|
||||
"relative flex h-10 w-10 items-center justify-center rounded-xl transition-colors duration-micro",
|
||||
active
|
||||
? "seg-thumb text-primary"
|
||||
: "text-muted-foreground hover:bg-foreground/[0.04] hover:text-foreground",
|
||||
)}
|
||||
>
|
||||
<item.icon className="h-[18px] w-[18px]" />
|
||||
{n ? (
|
||||
<span aria-hidden className="absolute top-1.5 right-1.5 h-1.5 w-1.5 rounded-full bg-warning" />
|
||||
) : null}
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
))}
|
||||
</nav>
|
||||
);
|
||||
|
||||
@@ -482,7 +482,7 @@ function DownloadsPanel({ detail }: { detail: LibraryDetail }) {
|
||||
cell: (d) => (
|
||||
<div className="min-w-0">
|
||||
<Link
|
||||
to={consolePath("tasks", d.downloadTask.id)}
|
||||
to={consolePath("downloads", d.downloadTask.id)}
|
||||
className="block max-w-[14rem] truncate font-mono text-caption text-foreground hover:underline sm:max-w-md"
|
||||
title={d.downloadTask.name}
|
||||
>
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import type { PreferenceKind, PreferenceSuppression, PreferenceTag } from "@umt/contracts";
|
||||
import { Ban, History, Plus, ShieldOff, Tags } from "lucide-react";
|
||||
import { Ban, History, ListChecks, Plus, ShieldOff, Tags } from "lucide-react";
|
||||
import { useMemo, useState } from "react";
|
||||
import { Link } from "react-router";
|
||||
import { toast } from "sonner";
|
||||
import {
|
||||
useDeleteTag,
|
||||
@@ -16,6 +17,7 @@ import { EmptyState, ErrorState, LoadingState } from "~/components/console/empty
|
||||
import { FilterBar, FilterSelect } from "~/components/console/filter-bar.tsx";
|
||||
import { JsonView } from "~/components/console/json-view.tsx";
|
||||
import { KvList } from "~/components/console/kv-list.tsx";
|
||||
import { consolePath } from "~/components/console/nav.ts";
|
||||
import { PageHeader } from "~/components/console/page-header.tsx";
|
||||
import { StatusBadge } from "~/components/console/status-badge.tsx";
|
||||
import { Timeline, type TimelineItem } from "~/components/console/timeline.tsx";
|
||||
@@ -160,10 +162,18 @@ export default function PreferencesPage() {
|
||||
title="偏好标签"
|
||||
description="软偏好影响排序,硬规则直接排除。手动取消的偏好 Agent 不会再加回。"
|
||||
actions={
|
||||
<Button onClick={() => setForm({ open: true, tag: null })}>
|
||||
<Plus />
|
||||
添加偏好
|
||||
</Button>
|
||||
<>
|
||||
<Button asChild variant="ghost" size="sm">
|
||||
<Link to={consolePath("rules")}>
|
||||
<ListChecks />
|
||||
收录策略
|
||||
</Link>
|
||||
</Button>
|
||||
<Button onClick={() => setForm({ open: true, tag: null })}>
|
||||
<Plus />
|
||||
添加偏好
|
||||
</Button>
|
||||
</>
|
||||
}
|
||||
/>
|
||||
|
||||
|
||||
@@ -0,0 +1,48 @@
|
||||
import { redirect } from "react-router";
|
||||
|
||||
// 控制台 IA 重构(docs/design/console-ia.md §3.3)后的旧链接 → 新路由。
|
||||
// 纯函数,各路由模块的 clientLoader 调用;nav.test 与冒烟都读 LEGACY_REDIRECTS。
|
||||
// 设置页的 ?tab= 旧链接由设置页自己处理(IA-2)。
|
||||
|
||||
/** 旧 query → 新地址;不需要跳转时返回 null */
|
||||
export function legacyRedirect(pathname: string, search: string): string | null {
|
||||
const path = pathname.replace(/\/+$/, "");
|
||||
const q = new URLSearchParams(search);
|
||||
const tab = q.get("tab");
|
||||
if (!tab) return null;
|
||||
q.delete("tab");
|
||||
const rest = q.toString();
|
||||
const withRest = (to: string) => (rest ? `${to}?${rest}` : to);
|
||||
|
||||
if (path === "/console/tasks") {
|
||||
if (tab === "downloads") return withRest("/console/downloads");
|
||||
if (tab === "plans") return withRest("/console/downloads/plans");
|
||||
if (tab === "tasks") return withRest("/console/tasks");
|
||||
return null;
|
||||
}
|
||||
if (path === "/console/subscriptions" && tab === "policies") return withRest("/console/rules");
|
||||
if (path === "/console/sources" && (tab === "snapshots" || tab === "feeds")) {
|
||||
const siteId = q.get("siteId");
|
||||
if (tab === "snapshots" && siteId) return `/console/sites/${encodeURIComponent(siteId)}?tab=snapshots`;
|
||||
return withRest("/console/sources");
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
/** 旧链接样例 → 应落到的新地址(测试与冒烟共用) */
|
||||
export const LEGACY_REDIRECTS: { from: string; to: string }[] = [
|
||||
{ from: "/console/tasks?tab=downloads", to: "/console/downloads" },
|
||||
{ from: "/console/tasks?tab=downloads&status=paused", to: "/console/downloads?status=paused" },
|
||||
{ from: "/console/tasks?tab=plans", to: "/console/downloads/plans" },
|
||||
{ from: "/console/tasks?tab=tasks", to: "/console/tasks" },
|
||||
{ from: "/console/subscriptions?tab=policies", to: "/console/rules" },
|
||||
{ from: "/console/sources?tab=snapshots", to: "/console/sources" },
|
||||
{ from: "/console/sources?tab=snapshots&siteId=abc", to: "/console/sites/abc?tab=snapshots" },
|
||||
];
|
||||
|
||||
/** 路由模块的 clientLoader:命中旧链接就跳转 */
|
||||
export function legacyRedirectLoader({ request }: { request: Request }) {
|
||||
const url = new URL(request.url);
|
||||
const to = legacyRedirect(url.pathname, url.search);
|
||||
return to ? redirect(to) : null;
|
||||
}
|
||||
@@ -0,0 +1,38 @@
|
||||
import { FilePlus2, Tags } from "lucide-react";
|
||||
import { useState } from "react";
|
||||
import { Link } from "react-router";
|
||||
import { consolePath } from "~/components/console/nav.ts";
|
||||
import { PageHeader } from "~/components/console/page-header.tsx";
|
||||
import { PolicyWorkspace } from "~/components/library/subscriptions-policy.tsx";
|
||||
import { Button } from "~/components/ui/button.tsx";
|
||||
|
||||
// 收录策略(REQ §6.5):草案 → 预览 → 发布;偏好标签在 /console/preferences,排序时叠加生效。
|
||||
|
||||
export const meta = () => [{ title: "收录策略 · UHD 媒体自动化控制台" }];
|
||||
|
||||
export default function RulesPage() {
|
||||
const [creating, setCreating] = useState(false);
|
||||
return (
|
||||
<>
|
||||
<PageHeader
|
||||
title="收录策略"
|
||||
description="草案发布后才生效。回滚会用旧版本内容发布一个新版本。"
|
||||
actions={
|
||||
<>
|
||||
<Button asChild variant="ghost" size="sm">
|
||||
<Link to={consolePath("preferences")}>
|
||||
<Tags />
|
||||
偏好标签
|
||||
</Link>
|
||||
</Button>
|
||||
<Button onClick={() => setCreating(true)}>
|
||||
<FilePlus2 />
|
||||
新建策略草案
|
||||
</Button>
|
||||
</>
|
||||
}
|
||||
/>
|
||||
<PolicyWorkspace creating={creating} onCreatingChange={setCreating} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -9,9 +9,9 @@ import {
|
||||
type SubscriptionProgress,
|
||||
type SubscriptionStatus,
|
||||
} from "@umt/contracts";
|
||||
import { CalendarClock, Check, FilePlus2, Pause, Play, Plus, Search, XCircle } from "lucide-react";
|
||||
import { CalendarClock, Check, ListChecks, Pause, Play, Plus, Search, XCircle } from "lucide-react";
|
||||
import { useEffect, useId, useMemo, useState } from "react";
|
||||
import { Link, useSearchParams } from "react-router";
|
||||
import { Link } from "react-router";
|
||||
import { toast } from "sonner";
|
||||
import { useEntitySearch } from "~/api/library.ts";
|
||||
import {
|
||||
@@ -42,7 +42,6 @@ import {
|
||||
SUB_STATUS,
|
||||
} from "~/components/library/labels.ts";
|
||||
import { Chip, relTime, Tone } from "~/components/library/parts.tsx";
|
||||
import { PolicyWorkspace } from "~/components/library/subscriptions-policy.tsx";
|
||||
import { SlotsPanel } from "~/components/library/subscriptions-slots.tsx";
|
||||
import { Button, buttonVariants } from "~/components/ui/button.tsx";
|
||||
import {
|
||||
@@ -55,62 +54,42 @@ import {
|
||||
} from "~/components/ui/dialog.tsx";
|
||||
import { Input } from "~/components/ui/input.tsx";
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "~/components/ui/select.tsx";
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "~/components/ui/tabs.tsx";
|
||||
import { errorMessage } from "~/lib/api.ts";
|
||||
import { cn, formatDateTime } from "~/lib/utils.ts";
|
||||
import { legacyRedirectLoader } from "./redirects.ts";
|
||||
|
||||
// 订阅与收录规则:订阅(单次/持续、仅本季/接续)+ 各作品的收录目标 Slot + 收录策略版本(REQ §6.1、§6.4、§6.5)
|
||||
// 订阅:单次/持续、仅本季/接续 + 各作品的版本目标(REQ §6.1、§6.4)。收录策略在 /console/rules。
|
||||
|
||||
export const meta = () => [{ title: "订阅 · UHD 媒体自动化控制台" }];
|
||||
|
||||
// 旧的 ?tab=policies 跳到收录策略
|
||||
export const clientLoader = legacyRedirectLoader;
|
||||
|
||||
const SUB_KIND_LABEL: Record<SubscriptionMediaKind, string> = { movie: "电影", series: "剧集", variety: "综艺" };
|
||||
|
||||
export default function SubscriptionsPage() {
|
||||
const [params, setParams] = useSearchParams();
|
||||
const tab = params.get("tab") === "policies" ? "policies" : "subscriptions";
|
||||
const [creatingSub, setCreatingSub] = useState(false);
|
||||
const [creatingPolicy, setCreatingPolicy] = useState(false);
|
||||
|
||||
return (
|
||||
<>
|
||||
<PageHeader
|
||||
title="订阅与收录规则"
|
||||
title="订阅"
|
||||
actions={
|
||||
tab === "subscriptions" ? (
|
||||
<>
|
||||
<Button asChild variant="ghost" size="sm">
|
||||
<Link to={consolePath("rules")}>
|
||||
<ListChecks />
|
||||
收录策略
|
||||
</Link>
|
||||
</Button>
|
||||
<Button onClick={() => setCreatingSub(true)}>
|
||||
<Plus />
|
||||
新建订阅
|
||||
</Button>
|
||||
) : (
|
||||
<Button onClick={() => setCreatingPolicy(true)}>
|
||||
<FilePlus2 />
|
||||
新建策略草案
|
||||
</Button>
|
||||
)
|
||||
</>
|
||||
}
|
||||
/>
|
||||
<Tabs
|
||||
value={tab}
|
||||
onValueChange={(v) =>
|
||||
setParams(
|
||||
(p) => {
|
||||
if (v === "policies") p.set("tab", "policies");
|
||||
else p.delete("tab");
|
||||
return p;
|
||||
},
|
||||
{ replace: true },
|
||||
)
|
||||
}
|
||||
>
|
||||
<TabsList aria-label="订阅与收录规则">
|
||||
<TabsTrigger value="subscriptions">订阅</TabsTrigger>
|
||||
<TabsTrigger value="policies">收录策略</TabsTrigger>
|
||||
</TabsList>
|
||||
<TabsContent value="subscriptions">
|
||||
<SubscriptionsTab />
|
||||
</TabsContent>
|
||||
<TabsContent value="policies">
|
||||
<PolicyWorkspace creating={creatingPolicy} onCreatingChange={setCreatingPolicy} />
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
<SubscriptionsTab />
|
||||
{creatingSub ? <CreateSubscriptionDialog onClose={() => setCreatingSub(false)} /> : null}
|
||||
</>
|
||||
);
|
||||
|
||||
@@ -1,37 +1,162 @@
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { AssetOperation, DownloadTask, Task } from "@umt/contracts";
|
||||
import { ArrowLeft } from "lucide-react";
|
||||
import { Link, useParams } from "react-router";
|
||||
import { useDownloadTask } from "~/api/downloads.ts";
|
||||
import { Link, Navigate, useParams } from "react-router";
|
||||
import { z } from "zod";
|
||||
import { apiParsed, isMissingEndpoint } from "~/api/parse.ts";
|
||||
import { DetailSection } from "~/components/console/detail-sheet.tsx";
|
||||
import { ErrorState, LoadingState } from "~/components/console/empty-state.tsx";
|
||||
import { consolePath } from "~/components/console/nav.ts";
|
||||
import { PageHeader } from "~/components/console/page-header.tsx";
|
||||
import { DownloadDetail } from "~/components/downloads/download-detail.tsx";
|
||||
import type { StatusTone } from "~/components/console/status-badge.tsx";
|
||||
import { Timeline } from "~/components/console/timeline.tsx";
|
||||
import { TASK_KIND_LABEL, TaskActions, TaskStatusLine, TaskSummary } from "~/components/downloads/business-tasks.tsx";
|
||||
import { Button } from "~/components/ui/button.tsx";
|
||||
import { TTL_SECOND } from "~/lib/api.ts";
|
||||
|
||||
export default function DownloadTaskPage() {
|
||||
export const meta = () => [{ title: "业务任务 · UHD 媒体自动化控制台" }];
|
||||
|
||||
const OP_TONE: Record<AssetOperation["status"], StatusTone> = {
|
||||
planned: "neutral",
|
||||
started: "neutral",
|
||||
succeeded: "success",
|
||||
failed: "destructive",
|
||||
skipped: "neutral",
|
||||
compensated: "warning",
|
||||
};
|
||||
const OP_STATUS: Record<AssetOperation["status"], string> = {
|
||||
planned: "计划",
|
||||
started: "进行中",
|
||||
succeeded: "成功",
|
||||
failed: "失败",
|
||||
skipped: "跳过",
|
||||
compensated: "已回滚",
|
||||
};
|
||||
|
||||
const OP_PHASE: Record<AssetOperation["phase"], string> = {
|
||||
decision: "判定",
|
||||
prepare: "准备",
|
||||
transfer: "传输",
|
||||
verify: "校验",
|
||||
commit: "提交",
|
||||
cleanup: "清理",
|
||||
compensate: "回滚",
|
||||
};
|
||||
const OP_KIND: Record<AssetOperation["kind"], string> = {
|
||||
copy: "复制",
|
||||
move: "移动",
|
||||
rename: "改名",
|
||||
mkdir: "建目录",
|
||||
hardlink: "硬链接",
|
||||
delete_source: "删除源文件",
|
||||
delete_target: "删除目标文件",
|
||||
verify: "校验",
|
||||
register: "登记资产",
|
||||
qb_pause: "暂停下载",
|
||||
qb_resume: "恢复下载",
|
||||
qb_remove: "移除下载",
|
||||
qb_set_tags: "改下载标签",
|
||||
other: "其他",
|
||||
};
|
||||
|
||||
function useTask(id: string) {
|
||||
return useQuery({
|
||||
queryKey: ["tasks", "one", id],
|
||||
retry: false,
|
||||
queryFn: ({ signal }) => apiParsed(Task, "/api/v1/tasks/:id", { pathParams: { id }, signal }),
|
||||
refetchInterval: (q) =>
|
||||
q.state.data && ["pending", "running", "waiting"].includes(q.state.data.status) ? 5 * TTL_SECOND : false,
|
||||
});
|
||||
}
|
||||
|
||||
/** 旧链接 /console/tasks/:id 指向下载任务:业务任务查不到时再查下载任务,查到就跳到下载详情 */
|
||||
function useLegacyDownload(id: string, enabled: boolean) {
|
||||
return useQuery({
|
||||
queryKey: ["downloads", "legacy-probe", id],
|
||||
enabled,
|
||||
retry: false,
|
||||
queryFn: ({ signal }) => apiParsed(DownloadTask, "/api/v1/download-tasks/:id", { pathParams: { id }, signal }),
|
||||
});
|
||||
}
|
||||
|
||||
function Operations({ taskId }: { taskId: string }) {
|
||||
const ops = useQuery({
|
||||
queryKey: ["tasks", "operations", taskId],
|
||||
queryFn: ({ signal }) =>
|
||||
apiParsed(z.object({ items: z.array(AssetOperation) }), "/api/v1/tasks/:id/operations", {
|
||||
pathParams: { id: taskId },
|
||||
signal,
|
||||
}),
|
||||
});
|
||||
if (ops.isPending) return <LoadingState rows={3} />;
|
||||
if (ops.error) return <ErrorState plain error={ops.error} onRetry={() => void ops.refetch()} />;
|
||||
if (!ops.data.items.length) return <p className="text-caption text-muted-foreground">这个任务没有文件操作。</p>;
|
||||
return (
|
||||
<Timeline
|
||||
items={ops.data.items.map((o) => ({
|
||||
id: o.id,
|
||||
at: o.startedAt ?? o.createdAt,
|
||||
tone: OP_TONE[o.status],
|
||||
title: `${OP_PHASE[o.phase]} · ${OP_KIND[o.kind]}:${OP_STATUS[o.status]}`,
|
||||
meta: o.attempts > 1 ? `${o.attempts} 次` : undefined,
|
||||
description: o.organizationRecordId ? (
|
||||
<Link to={consolePath("organize", o.organizationRecordId)} className="underline underline-offset-4">
|
||||
整理记录 {o.organizationRecordId.slice(0, 8)}
|
||||
</Link>
|
||||
) : o.downloadTaskId ? (
|
||||
<Link to={consolePath("downloads", o.downloadTaskId)} className="underline underline-offset-4">
|
||||
下载任务 {o.downloadTaskId.slice(0, 8)}
|
||||
</Link>
|
||||
) : undefined,
|
||||
}))}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export default function BusinessTaskPage() {
|
||||
const { id = "" } = useParams();
|
||||
const task = useDownloadTask(id);
|
||||
const task = useTask(id);
|
||||
const notFound = !!task.error && isMissingEndpoint(task.error);
|
||||
const legacy = useLegacyDownload(id, notFound);
|
||||
|
||||
if (notFound && legacy.data) return <Navigate to={consolePath("downloads", id)} replace />;
|
||||
const t = task.data;
|
||||
|
||||
return (
|
||||
<>
|
||||
<PageHeader
|
||||
title={task.data?.name ?? "下载任务"}
|
||||
className="[&_h1]:break-all"
|
||||
title={t ? (TASK_KIND_LABEL[t.kind] ?? t.kind) : "业务任务"}
|
||||
description={t ? <TaskStatusLine t={t} /> : undefined}
|
||||
actions={
|
||||
<Button asChild variant="ghost" size="sm">
|
||||
<Link to="/console/tasks">
|
||||
<ArrowLeft />
|
||||
下载与任务
|
||||
</Link>
|
||||
</Button>
|
||||
<>
|
||||
<Button asChild variant="ghost" size="sm">
|
||||
<Link to={consolePath("tasks")}>
|
||||
<ArrowLeft />
|
||||
业务任务
|
||||
</Link>
|
||||
</Button>
|
||||
{t ? <TaskActions t={t} /> : null}
|
||||
</>
|
||||
}
|
||||
/>
|
||||
<div className="pg-slab rounded-xl p-4 md:p-5">
|
||||
{task.isPending ? (
|
||||
{task.isPending || (notFound && legacy.isPending) ? (
|
||||
<div className="pg-slab rounded-xl p-4 md:p-5">
|
||||
<LoadingState rows={5} />
|
||||
) : task.error ? (
|
||||
<ErrorState plain error={task.error} onRetry={() => void task.refetch()} />
|
||||
) : (
|
||||
<DownloadDetail task={task.data} />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
) : !t ? (
|
||||
<ErrorState error={task.error} onRetry={() => void task.refetch()} />
|
||||
) : (
|
||||
<div className="space-y-5">
|
||||
<div className="pg-slab rounded-xl p-4 md:p-5">
|
||||
<TaskSummary t={t} />
|
||||
</div>
|
||||
<div className="pg-slab rounded-xl p-4 md:p-5">
|
||||
<DetailSection title="文件操作">
|
||||
<Operations taskId={t.id} />
|
||||
</DetailSection>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -1,313 +1,17 @@
|
||||
import { useQueryClient } from "@tanstack/react-query";
|
||||
import type { AcquisitionPlan, DownloadStatus, DownloadTask, PlanStatus } from "@umt/contracts";
|
||||
import { EventType } from "@umt/contracts";
|
||||
import { Download, ListChecks, RefreshCw } from "lucide-react";
|
||||
import { useState } from "react";
|
||||
import { Link, useNavigate } from "react-router";
|
||||
import {
|
||||
DOWNLOAD_STATUS_LABEL,
|
||||
PLAN_STATUS_LABEL,
|
||||
useDownloaderNames,
|
||||
useDownloadTasks,
|
||||
usePlans,
|
||||
} from "~/api/downloads.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 { JsonView } from "~/components/console/json-view.tsx";
|
||||
import { KvList } from "~/components/console/kv-list.tsx";
|
||||
import { PageHeader } from "~/components/console/page-header.tsx";
|
||||
import { StatusBadge } from "~/components/console/status-badge.tsx";
|
||||
import { BusinessTasks } from "~/components/downloads/business-tasks.tsx";
|
||||
import { CacheVolumes } from "~/components/downloads/cache-volumes.tsx";
|
||||
import {
|
||||
DownloadDetail,
|
||||
DownloadStatusBadges,
|
||||
PauseResume,
|
||||
ProgressLine,
|
||||
} from "~/components/downloads/download-detail.tsx";
|
||||
import { Button } from "~/components/ui/button.tsx";
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "~/components/ui/tabs.tsx";
|
||||
import { relTime } from "~/components/workbench/release-fields.ts";
|
||||
import { useSse } from "~/lib/sse.ts";
|
||||
import { formatBytes, formatDateTime } from "~/lib/utils.ts";
|
||||
import { legacyRedirectLoader } from "./redirects.ts";
|
||||
|
||||
const PURPOSE = { fill: "补缺", upgrade: "升级", replace_source: "换源" } as const;
|
||||
export const meta = () => [{ title: "业务任务 · UHD 媒体自动化控制台" }];
|
||||
|
||||
// 旧的 ?tab=downloads / plans 跳到下载队列 / 下载计划
|
||||
export const clientLoader = legacyRedirectLoader;
|
||||
|
||||
export default function TasksPage() {
|
||||
const [status, setStatus] = useState("");
|
||||
const [managed, setManaged] = useState("");
|
||||
const [planStatus, setPlanStatus] = useState("");
|
||||
const [openId, setOpenId] = useState<string | null>(null);
|
||||
const [openPlan, setOpenPlan] = useState<AcquisitionPlan | null>(null);
|
||||
const navigate = useNavigate();
|
||||
const qc = useQueryClient();
|
||||
const downloads = useDownloadTasks({
|
||||
status: (status || undefined) as DownloadStatus | undefined,
|
||||
managed: (managed || undefined) as "true" | "false" | undefined,
|
||||
});
|
||||
const plans = usePlans((planStatus || undefined) as PlanStatus | undefined);
|
||||
const names = useDownloaderNames();
|
||||
|
||||
// 下载进度/状态、阈值事件到达时刷新列表(SSE 为主,轮询兜底)
|
||||
useSse(
|
||||
[
|
||||
EventType.downloadProgress,
|
||||
EventType.downloadStatusChanged,
|
||||
EventType.downloadSubmitted,
|
||||
EventType.downloadThreshold,
|
||||
],
|
||||
() => void qc.invalidateQueries({ queryKey: ["downloads"] }),
|
||||
);
|
||||
|
||||
const rows = downloads.data?.pages.flatMap((p) => p.items);
|
||||
const planRows = plans.data?.pages.flatMap((p) => p.items);
|
||||
const open = rows?.find((t) => t.id === openId) ?? null;
|
||||
const linkedDownload = openPlan ? rows?.find((t) => t.acquisitionPlanId === openPlan.id) : undefined;
|
||||
|
||||
const columns: DataColumn<DownloadTask>[] = [
|
||||
{
|
||||
key: "name",
|
||||
header: "任务",
|
||||
cell: (t) => (
|
||||
<div className="min-w-0 max-w-sm">
|
||||
<p className="line-clamp-2 break-all text-foreground">{t.name}</p>
|
||||
<p className="mt-0.5 truncate text-meta text-muted-foreground">
|
||||
{names.data?.get(t.instanceId) ?? "下载器"} · {t.tags.join(", ") || "无标签"}
|
||||
</p>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{ key: "status", header: "状态", cell: (t) => <DownloadStatusBadges t={t} /> },
|
||||
{ key: "progress", header: "进度", hideBelow: "sm", cell: (t) => <ProgressLine t={t} /> },
|
||||
{
|
||||
key: "size",
|
||||
header: "大小",
|
||||
hideBelow: "lg",
|
||||
align: "right",
|
||||
cell: (t) => (
|
||||
<span className="whitespace-nowrap tabular-nums">
|
||||
{t.sizeBytes === null ? "未知" : formatBytes(t.sizeBytes, 1)}
|
||||
</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: "at",
|
||||
header: "更新",
|
||||
hideBelow: "md",
|
||||
cell: (t) => (
|
||||
<span className="whitespace-nowrap text-muted-foreground">{relTime(t.lastSyncedAt ?? t.updatedAt)}</span>
|
||||
),
|
||||
},
|
||||
{ key: "ops", header: "", align: "right", cell: (t) => <PauseResume t={t} size="xs" /> },
|
||||
];
|
||||
|
||||
const planColumns: DataColumn<AcquisitionPlan>[] = [
|
||||
{
|
||||
key: "purpose",
|
||||
header: "计划",
|
||||
cell: (p) => (
|
||||
<div className="min-w-0">
|
||||
<p className="text-foreground">
|
||||
{PURPOSE[p.purpose]} · 优先级 {p.priority}
|
||||
</p>
|
||||
<p className="truncate font-mono text-meta text-muted-foreground">{p.id.slice(0, 8)}</p>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: "status",
|
||||
header: "状态",
|
||||
cell: (p) => (
|
||||
<StatusBadge
|
||||
tone={
|
||||
p.status === "failed"
|
||||
? "destructive"
|
||||
: p.status === "completed"
|
||||
? "success"
|
||||
: p.status === "expired"
|
||||
? "warning"
|
||||
: "neutral"
|
||||
}
|
||||
>
|
||||
{PLAN_STATUS_LABEL[p.status]}
|
||||
</StatusBadge>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: "reserved",
|
||||
header: "预留空间",
|
||||
hideBelow: "md",
|
||||
align: "right",
|
||||
cell: (p) => <span className="tabular-nums">{formatBytes(p.reservedBytes, 1)}</span>,
|
||||
},
|
||||
{
|
||||
key: "reason",
|
||||
header: "说明",
|
||||
hideBelow: "lg",
|
||||
cell: (p) => <span className="line-clamp-1 text-muted-foreground">{p.statusReason ?? "—"}</span>,
|
||||
},
|
||||
{
|
||||
key: "at",
|
||||
header: "创建",
|
||||
hideBelow: "sm",
|
||||
cell: (p) => <span className="whitespace-nowrap text-muted-foreground">{relTime(p.createdAt)}</span>,
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<>
|
||||
<PageHeader
|
||||
title="下载与任务"
|
||||
description="阈值暂停不能手动绕过;无进展只记录,不自动换源。"
|
||||
actions={
|
||||
<Button variant="outline" size="sm" onClick={() => void qc.invalidateQueries({ queryKey: ["downloads"] })}>
|
||||
<RefreshCw className={downloads.isFetching ? "animate-spin" : undefined} />
|
||||
刷新
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
<CacheVolumes />
|
||||
<Tabs defaultValue="downloads">
|
||||
<TabsList>
|
||||
<TabsTrigger value="downloads">下载任务</TabsTrigger>
|
||||
<TabsTrigger value="plans">下载计划</TabsTrigger>
|
||||
<TabsTrigger value="tasks">业务任务</TabsTrigger>
|
||||
</TabsList>
|
||||
<TabsContent value="downloads">
|
||||
<FilterBar
|
||||
onReset={
|
||||
status || managed
|
||||
? () => {
|
||||
setStatus("");
|
||||
setManaged("");
|
||||
}
|
||||
: undefined
|
||||
}
|
||||
>
|
||||
<FilterSelect
|
||||
label="状态"
|
||||
value={status}
|
||||
onChange={setStatus}
|
||||
options={Object.entries(DOWNLOAD_STATUS_LABEL).map(([value, label]) => ({ value, label }))}
|
||||
/>
|
||||
<FilterSelect
|
||||
label="纳管"
|
||||
value={managed}
|
||||
onChange={setManaged}
|
||||
options={[
|
||||
{ value: "true", label: "纳管任务" },
|
||||
{ value: "false", label: "未纳管" },
|
||||
]}
|
||||
/>
|
||||
</FilterBar>
|
||||
<DataTable
|
||||
columns={columns}
|
||||
rows={rows}
|
||||
rowKey={(t) => t.id}
|
||||
loading={downloads.isPending}
|
||||
error={downloads.error}
|
||||
onRetry={() => void downloads.refetch()}
|
||||
onRowClick={(t) => setOpenId(t.id)}
|
||||
selectedKey={openId}
|
||||
hasMore={downloads.hasNextPage}
|
||||
onLoadMore={() => void downloads.fetchNextPage()}
|
||||
loadingMore={downloads.isFetchingNextPage}
|
||||
empty={{
|
||||
icon: Download,
|
||||
title: status || managed ? "没有符合筛选的下载" : "还没有下载任务",
|
||||
description: "自动收录或在站点工作台下载后出现在这里。",
|
||||
}}
|
||||
/>
|
||||
</TabsContent>
|
||||
<TabsContent value="plans">
|
||||
<FilterBar onReset={planStatus ? () => setPlanStatus("") : undefined}>
|
||||
<FilterSelect
|
||||
label="状态"
|
||||
value={planStatus}
|
||||
onChange={setPlanStatus}
|
||||
options={Object.entries(PLAN_STATUS_LABEL).map(([value, label]) => ({ value, label }))}
|
||||
/>
|
||||
</FilterBar>
|
||||
<DataTable
|
||||
columns={planColumns}
|
||||
rows={planRows}
|
||||
rowKey={(p) => p.id}
|
||||
loading={plans.isPending}
|
||||
error={plans.error}
|
||||
onRetry={() => void plans.refetch()}
|
||||
onRowClick={setOpenPlan}
|
||||
selectedKey={openPlan?.id}
|
||||
hasMore={plans.hasNextPage}
|
||||
onLoadMore={() => void plans.fetchNextPage()}
|
||||
loadingMore={plans.isFetchingNextPage}
|
||||
empty={{
|
||||
icon: ListChecks,
|
||||
title: "还没有下载计划",
|
||||
description: "候选被选中后生成计划,同时预留版本目标与预算。",
|
||||
}}
|
||||
/>
|
||||
</TabsContent>
|
||||
<TabsContent value="tasks">
|
||||
<BusinessTasks />
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
|
||||
<DetailSheet
|
||||
open={!!open}
|
||||
onOpenChange={(o) => !o && setOpenId(null)}
|
||||
width="lg"
|
||||
title={open?.name ?? ""}
|
||||
footer={
|
||||
open ? (
|
||||
<Button asChild variant="outline" size="sm">
|
||||
<Link to={`/console/tasks/${open.id}`}>在独立页面打开</Link>
|
||||
</Button>
|
||||
) : null
|
||||
}
|
||||
>
|
||||
{open ? <DownloadDetail task={open} /> : null}
|
||||
</DetailSheet>
|
||||
|
||||
<DetailSheet
|
||||
open={!!openPlan}
|
||||
onOpenChange={(o) => !o && setOpenPlan(null)}
|
||||
title={openPlan ? `${PURPOSE[openPlan.purpose]}计划` : ""}
|
||||
description={openPlan?.statusReason ?? undefined}
|
||||
footer={
|
||||
linkedDownload ? (
|
||||
<Button
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
setOpenPlan(null);
|
||||
navigate(`/console/tasks/${linkedDownload.id}`);
|
||||
}}
|
||||
>
|
||||
查看下载任务
|
||||
</Button>
|
||||
) : null
|
||||
}
|
||||
>
|
||||
{openPlan ? (
|
||||
<>
|
||||
<KvList
|
||||
items={[
|
||||
{ label: "状态", value: PLAN_STATUS_LABEL[openPlan.status] },
|
||||
{ label: "优先级", value: openPlan.priority },
|
||||
{ label: "预留空间", value: formatBytes(openPlan.reservedBytes, 1) },
|
||||
{ label: "过期于", value: formatDateTime(openPlan.expiresAt) },
|
||||
{ label: "创建", value: formatDateTime(openPlan.createdAt) },
|
||||
{ label: "Slot", value: openPlan.slotId, mono: true },
|
||||
{ label: "资源", value: openPlan.sourceReleaseId, mono: true, wide: true },
|
||||
]}
|
||||
/>
|
||||
<DetailSection title="评估依据">
|
||||
<JsonView value={openPlan.evaluation} />
|
||||
</DetailSection>
|
||||
<JsonView label="预算预留" value={openPlan.budgetReservation} />
|
||||
</>
|
||||
) : null}
|
||||
</DetailSheet>
|
||||
<PageHeader title="业务任务" description="取消只停止后续步骤;重试只对失败的任务。" />
|
||||
<BusinessTasks />
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -30,9 +30,12 @@ const STATIC_ROUTES = [
|
||||
"/console/files",
|
||||
"/console/files/trash",
|
||||
"/console/subscriptions",
|
||||
"/console/rules",
|
||||
"/console/preferences",
|
||||
"/console/sites",
|
||||
"/console/sources",
|
||||
"/console/downloads",
|
||||
"/console/downloads/plans",
|
||||
"/console/tasks",
|
||||
"/console/agent",
|
||||
"/console/agent?mock=1",
|
||||
@@ -47,11 +50,30 @@ const DETAIL_ROUTES = [
|
||||
{ route: "/console/library/:id", list: "/api/v1/library" },
|
||||
{ route: "/console/organize/:id", list: "/api/v1/organization-records" },
|
||||
{ route: "/console/sites/:id", list: "/api/v1/sites" },
|
||||
{ route: "/console/tasks/:id", list: "/api/v1/download-tasks" },
|
||||
{ route: "/console/sites/:id", list: "/api/v1/sites", after: "?tab=snapshots" },
|
||||
{ route: "/console/sites/:id", list: "/api/v1/sites", after: "?tab=accounts" },
|
||||
{ route: "/console/downloads/:id", list: "/api/v1/download-tasks" },
|
||||
{ route: "/console/tasks/:id", list: "/api/v1/tasks" },
|
||||
{ route: "/console/agent/:id", list: "/api/v1/agent/runs", after: "?mock=0" },
|
||||
{ route: "/console/engine/:id", list: "/api/v1/engine/runs" },
|
||||
];
|
||||
|
||||
/**
|
||||
* IA 重构后的旧链接(docs/design/console-ia.md §3.3):打开旧地址,最终落到新地址且页面 200。
|
||||
* 与 app/routes/console/redirects.ts 的 LEGACY_REDIRECTS 同步;:id 从列表接口取。
|
||||
*/
|
||||
const REDIRECT_ROUTES = [
|
||||
{ from: "/console/tasks?tab=downloads", to: "/console/downloads" },
|
||||
{ from: "/console/tasks?tab=downloads&status=paused", to: "/console/downloads?status=paused" },
|
||||
{ from: "/console/tasks?tab=plans", to: "/console/downloads/plans" },
|
||||
{ from: "/console/tasks?tab=tasks", to: "/console/tasks" },
|
||||
{ from: "/console/subscriptions?tab=policies", to: "/console/rules" },
|
||||
{ from: "/console/sources?tab=snapshots", to: "/console/sources" },
|
||||
{ from: "/console/sources?tab=snapshots&siteId=:id", to: "/console/sites/:id?tab=snapshots", list: "/api/v1/sites" },
|
||||
// 旧的下载详情地址:先查业务任务(404 属预期),再跳到下载详情
|
||||
{ from: "/console/tasks/:id", to: "/console/downloads/:id", list: "/api/v1/download-tasks", expect404: true },
|
||||
];
|
||||
|
||||
/** 允许的控制台噪音(React Router 开发模式提示等,不算错误) */
|
||||
const IGNORED = [/Download the React DevTools/i, /React Router Future Flag Warning/i];
|
||||
|
||||
@@ -148,6 +170,37 @@ async function main() {
|
||||
if (SHOTS) await page.screenshot({ path: join(OUT, `${name}.png`), fullPage: true }).catch(() => {});
|
||||
results.push({ path, ms: Date.now() - t0, problems: [...new Set(problems)] });
|
||||
}
|
||||
// ── 旧链接重定向 ──
|
||||
for (const r of REDIRECT_ROUTES) {
|
||||
let from = r.from;
|
||||
let to = r.to;
|
||||
if (r.list) {
|
||||
const res = await page.request.get(`${BASE}${r.list}?limit=1`);
|
||||
const id = res.ok() ? (await res.json().catch(() => null))?.data?.items?.[0]?.id : null;
|
||||
if (!id) {
|
||||
skipped.push(`${r.from}(${r.list} 无数据)`);
|
||||
continue;
|
||||
}
|
||||
from = from.replace(":id", encodeURIComponent(id));
|
||||
to = to.replace(":id", encodeURIComponent(id));
|
||||
}
|
||||
problems = [];
|
||||
const t0 = Date.now();
|
||||
let status = 0;
|
||||
try {
|
||||
const res = await page.goto(`${BASE}${from}`, { waitUntil: "networkidle", timeout: 30_000 });
|
||||
status = res?.status() ?? 0;
|
||||
await page.waitForURL((u) => `${u.pathname}${u.search}` === to, { timeout: 10_000 });
|
||||
await page.waitForSelector("main", { timeout: 10_000 });
|
||||
} catch (err) {
|
||||
const u = new URL(page.url());
|
||||
problems.push(`没有跳到 ${to}(停在 ${u.pathname}${u.search}):${String(err?.message ?? err).split("\n")[0]}`);
|
||||
}
|
||||
if (status !== 200) problems.push(`HTTP ${status}`);
|
||||
// 旧下载详情先探测业务任务,那次 404 与浏览器随之打印的资源错误是预期内的
|
||||
const kept = r.expect404 ? problems.filter((p) => !/404/.test(p)) : problems;
|
||||
results.push({ path: `${from} → ${to}`, ms: Date.now() - t0, problems: [...new Set(kept)] });
|
||||
}
|
||||
await browser.close();
|
||||
|
||||
// ── 汇报 ──
|
||||
|
||||
Reference in new issue
Block a user