feat(web): IA-3 navigation, legacy redirects and top-bar inbox (FE-1)

Sidebar becomes 5 groups (overview / resources / subscriptions / organize /
system). Pending items move to a top-bar inbox with badge and grouped
dropdown. Engine panel, schedules and identity pages redirect to the task
page, its plan tab and media overview views; the download plan becomes a
second tab of the download panel. nav.test and smoke cover the new routes.

Co-Authored-By: Claude Opus 5.5 <[email protected]>
This commit is contained in:
rootandClaude Opus 5.5 committed 2026-09-28 16:10:42 +08:00
1 parent 4bb2583f6c
commit 738d4ce752
18 files changed
+647 -1104

No files matched your search

+2 -1
View File
@@ -25,8 +25,9 @@ export { DecisionSummary };
const Page = cursorPage(Decision); const Page = cursorPage(Decision);
export function useDecisions(filters: DecisionFilters) { export function useDecisions(filters: DecisionFilters, enabled = true) {
return useInfiniteQuery({ return useInfiniteQuery({
enabled,
queryKey: decisionKeys.list(filters), queryKey: decisionKeys.list(filters),
initialPageParam: undefined as string | undefined, initialPageParam: undefined as string | undefined,
queryFn: ({ pageParam, signal }) => queryFn: ({ pageParam, signal }) =>
@@ -0,0 +1,136 @@
import { useQueryClient } from "@tanstack/react-query";
import type { Decision, DecisionKind } from "@umt/contracts";
import { ArrowRight, Bell, CheckCheck } from "lucide-react";
import { useMemo, useRef, useState } from "react";
import { Link, useNavigate } from "react-router";
import { decisionKeys, useDecisionSummary, useDecisions } from "~/api/decisions.ts";
import { SEVERITY } from "~/components/library/labels.ts";
import { Button } from "~/components/ui/button.tsx";
import { Popover, PopoverContent, PopoverTrigger } from "~/components/ui/popover.tsx";
import { decisionKindLabel, formatRelative } from "~/lib/labels.ts";
import { useSse } from "~/lib/sse.ts";
import { cn } from "~/lib/utils.ts";
// 顶栏收件箱(IA-3):待处理不进侧栏,铃铛 + 未决角标;下拉按问题类型列最近事项,点开进待处理页。
const RECENT = 8;
const DOT = { info: "bg-muted-foreground/60", warning: "bg-warning", critical: "bg-destructive" } as const;
/** 未决数与最近事项;SSE decision.* 到达时刷新 */
export function useLiveDecisions() {
const qc = useQueryClient();
const timer = useRef<ReturnType<typeof setTimeout> | null>(null);
useSse(["decision.created", "decision.updated"], () => {
if (timer.current) return;
timer.current = setTimeout(() => {
timer.current = null;
void qc.invalidateQueries({ queryKey: decisionKeys.all });
}, 800);
});
return useDecisionSummary();
}
export const inboxPath = (kind?: string) => (kind ? `/console/inbox?kind=${kind}` : "/console/inbox");
export function InboxBell() {
const summary = useLiveDecisions();
const [open, setOpen] = useState(false);
const list = useDecisions({}, open);
const navigate = useNavigate();
const total = summary.data?.total ?? 0;
const groups = useMemo(() => {
const items = (list.data?.pages[0]?.items ?? []).slice(0, RECENT);
const m = new Map<DecisionKind, Decision[]>();
for (const d of items) m.set(d.kind, [...(m.get(d.kind) ?? []), d]);
const counts = new Map<DecisionKind, number>();
for (const g of summary.data?.groups ?? []) counts.set(g.kind, (counts.get(g.kind) ?? 0) + g.count);
return [...m.entries()].map(([kind, ds]) => ({ kind, items: ds, count: counts.get(kind) ?? ds.length }));
}, [list.data, summary.data]);
const go = (to: string) => {
setOpen(false);
navigate(to);
};
return (
<Popover open={open} onOpenChange={setOpen}>
<PopoverTrigger asChild>
<Button
variant="ghost"
size="icon"
className="relative h-8 w-8"
aria-label={total ? `待处理 ${total} 项` : "待处理"}
title={total ? `待处理 ${total} 项` : "待处理"}
>
<Bell className="h-4 w-4" />
{total ? (
<span className="absolute -top-0.5 -right-0.5 min-w-4 rounded-full bg-warning px-1 text-center text-micro leading-4 font-semibold text-background tabular-nums">
{total > 99 ? "99+" : total}
</span>
) : null}
</Button>
</PopoverTrigger>
<PopoverContent align="end" className="w-[min(22rem,calc(100vw-2rem))] p-0">
<div className="flex items-center justify-between border-b border-border/60 px-4 py-3">
<p className="text-sm font-semibold text-foreground">
待处理
{total ? <span className="ml-1.5 text-warning tabular-nums">{total}</span> : null}
</p>
<button
type="button"
onClick={() => go(inboxPath())}
className="inline-flex cursor-pointer items-center gap-1 text-meta text-muted-foreground hover:text-foreground"
>
查看全部
<ArrowRight className="h-3.5 w-3.5" />
</button>
</div>
{list.isPending ? (
<p className="px-4 py-6 text-center text-caption text-muted-foreground">加载中…</p>
) : list.isError ? (
<p className="px-4 py-6 text-center text-caption text-destructive">加载失败,稍后再试</p>
) : groups.length === 0 ? (
<div className="flex flex-col items-center gap-2 px-4 py-8 text-caption text-muted-foreground">
<CheckCheck className="h-5 w-5" />
没有需要处理的事项
</div>
) : (
<div className="max-h-[60vh] overflow-y-auto py-1">
{groups.map((g) => (
<section key={g.kind} className="py-1">
<button
type="button"
onClick={() => go(inboxPath(g.kind))}
className="flex w-full cursor-pointer items-center justify-between px-4 py-1 text-meta font-medium text-muted-foreground hover:text-foreground"
>
<span>{decisionKindLabel(g.kind)}</span>
<span className="tabular-nums">{g.count}</span>
</button>
<ul>
{g.items.map((d) => (
<li key={d.id}>
<Link
to={inboxPath(d.kind)}
onClick={() => setOpen(false)}
className="flex items-start gap-2.5 px-4 py-2 hover:bg-foreground/[0.04]"
>
<span aria-hidden className={cn("mt-1.5 h-1.5 w-1.5 shrink-0 rounded-full", DOT[d.severity])} />
<span className="min-w-0 flex-1">
<span className="line-clamp-2 text-caption text-foreground">{d.title}</span>
<span className="text-meta text-muted-foreground">
{SEVERITY[d.severity].label} · {formatRelative(d.createdAt)}
</span>
</span>
</Link>
</li>
))}
</ul>
</section>
))}
</div>
)}
</PopoverContent>
</Popover>
);
}
+29 -13
View File
@@ -1,7 +1,7 @@
import { readFileSync } from "node:fs"; import { readFileSync } from "node:fs";
import { describe, expect, it } from "vitest"; import { describe, expect, it } from "vitest";
import { LEGACY_REDIRECTS, legacyRedirect } from "../../routes/console/redirects.ts"; import { LEGACY_REDIRECTS, legacyRedirect } from "../../routes/console/redirects.ts";
import { consolePath, findNavItem, NAV_GROUPS, NAV_ITEMS, settingsPath } from "./nav.ts"; import { consolePath, findNavItem, NAV_GROUPS, NAV_ITEMS, pageTitle, settingsPath } from "./nav.ts";
/** routes.ts 里登记的控制台路由(相对 /console) */ /** routes.ts 里登记的控制台路由(相对 /console) */
const ROUTE_PATTERNS = [ const ROUTE_PATTERNS = [
@@ -16,13 +16,26 @@ const matchesRoute = (pathname: string) => {
}; };
describe("控制台导航", () => { describe("控制台导航", () => {
it("7 组 18 项(另加系统组的定时任务),路径唯一且都在 /console 下", () => { it("IA-3:5 组,按定稿清单逐项列出,路径唯一且都在 /console 下", () => {
expect(NAV_GROUPS.map((g) => g.title)).toEqual(["概览", "资源", "订阅", "下载", "整理", "Agent", "系统"]); expect(NAV_GROUPS.map((g) => g.title)).toEqual(["概览", "资源", "订阅", "整理", "系统"]);
const core = NAV_ITEMS.filter((i) => i.to !== "/console/schedules"); expect(NAV_GROUPS.map((g) => g.items.map((i) => i.label))).toEqual([
expect(core).toHaveLength(18); ["首页", "任务", "Agent 会话"],
["站点", "RSS 订阅"],
["订阅", "规则"],
["下载面板", "整理记录", "文件管理", "媒体概览"],
["设置", "审计", "运行状态"],
]);
// 定稿文字写"共 12 项",逐项清单实际是 14 项;以清单为准
expect(NAV_ITEMS).toHaveLength(14);
expect(new Set(NAV_ITEMS.map((i) => i.to)).size).toBe(NAV_ITEMS.length); 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); expect(NAV_ITEMS.every((i) => i.to.startsWith("/console"))).toBe(true);
for (const g of NAV_GROUPS) expect(g.items.length).toBeLessThanOrEqual(4); });
it("取消的入口不在侧栏:待处理走顶栏收件箱,引擎面板 / 定时任务 / 身份并入别处", () => {
const paths = NAV_ITEMS.map((i) => i.to);
for (const p of ["/console/inbox", "/console/engine", "/console/schedules", "/console/identity"])
expect(paths).not.toContain(p);
expect(pageTitle("/console/inbox")).toBe("待处理");
}); });
it("每个导航项都有路由", () => { it("每个导航项都有路由", () => {
@@ -32,13 +45,13 @@ describe("控制台导航", () => {
it("按最长前缀匹配当前项", () => { it("按最长前缀匹配当前项", () => {
expect(findNavItem("/console")?.label).toBe("首页"); expect(findNavItem("/console")?.label).toBe("首页");
expect(findNavItem("/console/")?.label).toBe("首页"); expect(findNavItem("/console/")?.label).toBe("首页");
expect(findNavItem("/console/library/abc")?.label).toBe("媒体库"); expect(findNavItem("/console/library/abc")?.label).toBe("媒体概览");
expect(findNavItem("/console/engine/r1")?.label).toBe("引擎面板"); expect(findNavItem("/console/tasks/r1")?.label).toBe("任务");
expect(findNavItem("/console/downloads")?.label).toBe("下载队列"); expect(findNavItem("/console/downloads")?.label).toBe("下载面板");
expect(findNavItem("/console/downloads/plans")?.label).toBe("下载计划"); expect(findNavItem("/console/downloads/plans")?.label).toBe("下载面板");
expect(findNavItem("/console/downloads/abc")?.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("/console/sites/abc")?.label).toBe("站点");
expect(findNavItem("/console/status")?.label).toBe("运行状态");
expect(findNavItem("/nope")).toBeUndefined(); expect(findNavItem("/nope")).toBeUndefined();
}); });
@@ -64,12 +77,15 @@ describe("旧链接重定向", () => {
for (const { to } of LEGACY_REDIRECTS) { for (const { to } of LEGACY_REDIRECTS) {
const u = new URL(to, "http://x"); const u = new URL(to, "http://x");
expect(matchesRoute(u.pathname), to).toBe(true); expect(matchesRoute(u.pathname), to).toBe(true);
if (u.pathname !== "/console/sites/abc") expect(legacyRedirect(u.pathname, u.search)).toBeNull(); if (u.pathname !== "/console/sites/abc") expect(legacyRedirect(u.pathname, u.search), to).toBeNull();
} }
}); });
it("不相关的 query 不跳转", () => { it("不相关的 query 不跳转", () => {
expect(legacyRedirect("/console/tasks", "?kind=submitDownload")).toBeNull(); expect(legacyRedirect("/console/tasks", "?kind=submitDownload")).toBeNull();
expect(legacyRedirect("/console/tasks", "?tab=plan&job=trash.purge")).toBeNull();
expect(legacyRedirect("/console/tasks", "?tab=failed")).toBeNull();
expect(legacyRedirect("/console/library", "?filter=unidentified")).toBeNull();
expect(legacyRedirect("/console/subscriptions", "")).toBeNull(); expect(legacyRedirect("/console/subscriptions", "")).toBeNull();
expect(legacyRedirect("/console/sources", "?health=failing")).toBeNull(); expect(legacyRedirect("/console/sources", "?health=failing")).toBeNull();
}); });
+43 -93
View File
@@ -1,15 +1,12 @@
import { import {
Activity,
Bot, Bot,
CalendarClock, CalendarClock,
ClipboardList,
Download, Download,
FileStack, FileStack,
Fingerprint,
FolderTree, FolderTree,
Gauge,
Globe, Globe,
House, House,
Inbox,
Library, Library,
ListChecks, ListChecks,
ListTodo, ListTodo,
@@ -17,8 +14,6 @@ import {
Rss, Rss,
ScrollText, ScrollText,
Settings, Settings,
Tags,
Timer,
} from "lucide-react"; } from "lucide-react";
export type NavItem = { export type NavItem = {
@@ -26,8 +21,6 @@ export type NavItem = {
label: string; label: string;
icon: LucideIcon; icon: LucideIcon;
description: string; description: string;
/** 侧栏角标的数据来源 */
badge?: "decisions";
}; };
export type NavGroup = { title: string; items: NavItem[] }; export type NavGroup = { title: string; items: NavItem[] };
@@ -41,8 +34,8 @@ export function consolePath(...segments: (string | number)[]): string {
} }
/** /**
* 侧栏 7 组(docs/design/console-ia.md §3.2),按业务流程排:概览 → 资源 → 订阅 → 下载 → 整理 → Agent → 系统。 * 侧栏 5 组 14 项(IA-3 定稿清单;定稿文字写"共 12 项",以逐项清单为准,docs/plan/00-first-version-plan.md §8):概览 → 资源 → 订阅 → 整理 → 系统。
* 移动端抽屉用同一份表。 * 待处理不进侧栏,由顶栏收件箱打开;移动端抽屉用同一份表。
*/ */
export const NAV_GROUPS: NavGroup[] = [ export const NAV_GROUPS: NavGroup[] = [
{ {
@@ -52,14 +45,19 @@ export const NAV_GROUPS: NavGroup[] = [
to: "/console", to: "/console",
label: "首页", label: "首页",
icon: House, icon: House,
description: "自动化概览、当前工作、待处理、缓存、来源健康、最近产出", description: "正在进行、需要处理、计划、最近结果与运行状态",
}, },
{ {
to: "/console/inbox", to: "/console/tasks",
label: "待处理", label: "任务",
icon: Inbox, icon: ListTodo,
description: "按作品和问题类型合并的待处理事项", description: "每次运行都是一条任务:定时、事件、手动、Agent 触发都在这里,含定时任务计划",
badge: "decisions", },
{
to: "/console/agent",
label: "Agent 会话",
icon: Bot,
description: "交代目标,Agent 在授权内执行并汇报",
}, },
], ],
}, },
@@ -72,64 +70,20 @@ export const NAV_GROUPS: NavGroup[] = [
icon: Globe, icon: Globe,
description: "站点、凭证、账号数据与健康;资源、快照与 Feed", description: "站点、凭证、账号数据与健康;资源、快照与 Feed",
}, },
{ { to: "/console/sources", label: "RSS 订阅", icon: Rss, description: "全部 Feed 与抓取状态" },
to: "/console/sources",
label: "来源健康",
icon: Rss,
description: "全部 Feed 与站点的抓取状态",
},
], ],
}, },
{ {
title: "订阅", title: "订阅",
items: [ items: [
{ { to: "/console/subscriptions", label: "订阅", icon: CalendarClock, description: "单次收录与持续追踪" },
to: "/console/subscriptions", { to: "/console/rules", label: "规则", icon: ListChecks, description: "收录策略与偏好标签" },
label: "订阅",
icon: CalendarClock,
description: "单次收录与持续追踪",
},
{
to: "/console/rules",
label: "收录策略",
icon: ListChecks,
description: "新作品收录条件、默认版本目标与策略版本",
},
{
to: "/console/preferences",
label: "偏好标签",
icon: Tags,
description: "软偏好影响排序,硬规则直接排除",
},
],
},
{
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: "整理", title: "整理",
items: [ items: [
{ to: "/console/library", label: "媒体库", icon: Library, description: "作品、季 / 集、版本目标与实际路径" }, { to: "/console/downloads", label: "下载面板", icon: Download, description: "下载任务、下载计划与缓存水位" },
{ {
to: "/console/organize", to: "/console/organize",
label: "整理记录", label: "整理记录",
@@ -143,21 +97,10 @@ export const NAV_GROUPS: NavGroup[] = [
description: "浏览登记目录,改名、移动、删除与整理", description: "浏览登记目录,改名、移动、删除与整理",
}, },
{ {
to: "/console/identity", to: "/console/library",
label: "身份与元数据", label: "媒体概览",
icon: Fingerprint, icon: Library,
description: "外部身份、待识别资源与别名", description: "作品、季 / 集、版本目标、外部身份与待识别资源",
},
],
},
{
title: "Agent",
items: [
{
to: "/console/agent",
label: "Agent 会话",
icon: Bot,
description: "交代目标,Agent 在授权内执行并汇报",
}, },
], ],
}, },
@@ -170,28 +113,29 @@ export const NAV_GROUPS: NavGroup[] = [
icon: Settings, icon: Settings,
description: "下载器、媒体服务器、库根、站点账号、Agent 上游与自动化", description: "下载器、媒体服务器、库根、站点账号、Agent 上游与自动化",
}, },
{
to: "/console/schedules",
label: "定时任务",
icon: Timer,
description: "周期任务与 Agent 巡检的开关、间隔和运行记录",
},
{
to: "/console/engine",
label: "引擎面板",
icon: Activity,
description: "排查用,业务进度看业务任务。仅管理员",
},
{ {
to: "/console/audit", to: "/console/audit",
label: "审计日志", label: "审计",
icon: ScrollText, icon: ScrollText,
description: "登录、设置、密钥与实例变更的操作留痕", description: "登录、设置、密钥、任务操作的留痕",
},
{
to: "/console/status",
label: "运行状态",
icon: Gauge,
description: "进程心跳、事件循环、数据库、磁盘与挂载根",
}, },
], ],
}, },
]; ];
/** 不在侧栏但有页面的路由:顶栏标题用 */
const EXTRA_TITLES: Record<string, string> = {
"/console/inbox": "待处理",
"/console/preferences": "偏好标签",
"/console/search": "搜索",
};
export const NAV_ITEMS = NAV_GROUPS.flatMap((g) => g.items); export const NAV_ITEMS = NAV_GROUPS.flatMap((g) => g.items);
/** 设置页深链(IA-2):`/console/settings#分区[/节]`。调用方只认新分区名 */ /** 设置页深链(IA-2):`/console/settings#分区[/节]`。调用方只认新分区名 */
@@ -218,3 +162,9 @@ export function findNavItem(pathname: string): NavItem | undefined {
)[0] )[0]
); );
} }
/** 顶栏标题:导航项名,或不在侧栏的页面名 */
export function pageTitle(pathname: string): string | undefined {
const path = pathname.replace(/\/+$/, "");
return findNavItem(pathname)?.label ?? EXTRA_TITLES[path];
}
@@ -0,0 +1,33 @@
import { NavLink } from "react-router";
import { cn } from "~/lib/utils.ts";
// 下载面板的两个页签(IA-3:下载计划并入下载面板,路由保持 /downloads 与 /downloads/plans)
const TABS = [
{ to: "/console/downloads", label: "下载任务", end: true },
{ to: "/console/downloads/plans", label: "下载计划", end: true },
];
export function DownloadsTabs() {
return (
<nav aria-label="下载面板" className="scroll-bleed mb-4 flex max-w-full items-center gap-1 overflow-x-auto pb-1">
{TABS.map((t) => (
<NavLink
key={t.to}
to={t.to}
end={t.end}
className={({ isActive }) =>
cn(
"inline-flex h-8 shrink-0 items-center rounded-full border border-transparent px-3 text-sm font-medium whitespace-nowrap transition-[background-color,color] duration-micro",
isActive
? "border-(--mat-pill-selected-border) bg-(--mat-pill-selected-bg) text-foreground"
: "text-muted-foreground hover:bg-foreground/[0.06] hover:text-foreground",
)
}
>
{t.label}
</NavLink>
))}
</nav>
);
}
@@ -0,0 +1,261 @@
import type {
ExternalIdentity,
IdentityCandidateReason,
IdentityCandidateStatus,
IdentityPoolItem,
IdentityStatus,
} from "@umt/contracts";
import { ArrowRight, Fingerprint, Lock, SearchX } from "lucide-react";
import { useEffect, useState } from "react";
import { Link } from "react-router";
import { useExternalIdentities, useIdentityPool } from "~/api/identity.ts";
import { type DataColumn, DataTable } from "~/components/console/data-table.tsx";
import { FilterBar, FilterSelect } from "~/components/console/filter-bar.tsx";
import { ExternalIdentitySheet, identityRef } from "~/components/library/identity-external-sheet.tsx";
import { inboxLink, inInbox, PoolSheet, querySummary } from "~/components/library/identity-pool-sheet.tsx";
import {
EVIDENCE_LEVEL,
IDENTITY_STATUS,
opts,
POOL_REASON,
POOL_STATUS,
VERIFY_STATUS,
} from "~/components/library/labels.ts";
import { relTime, Tone } from "~/components/library/parts.tsx";
// 媒体概览的身份视图(原"身份与元数据"页,IA-3 并入 /console/library):待识别资源、外部身份。
// 待识别资源只读;选候选、忽略在待处理里做(docs/design/console-ia.md §3.1 判定只在待处理)。
function useDebounced(v: string, ms = 250) {
const [d, setD] = useState(v);
useEffect(() => {
const t = setTimeout(() => setD(v), ms);
return () => clearTimeout(t);
}, [v, ms]);
return d;
}
export function PoolTab() {
const [q, setQ] = useState("");
const [status, setStatus] = useState("pending");
const [reason, setReason] = useState("");
const dq = useDebounced(q.trim());
const pool = useIdentityPool({
q: dq || undefined,
status: (status || undefined) as IdentityCandidateStatus | undefined,
reason: (reason || undefined) as IdentityCandidateReason | undefined,
});
const [openId, setOpenId] = useState<string | null>(null);
const rows = pool.data?.pages.flatMap((p) => p.items);
const open = rows?.find((r) => r.id === openId) ?? null;
const columns: DataColumn<IdentityPoolItem>[] = [
{
key: "title",
header: "原始标题",
className: "max-w-0 w-full",
cell: (r) => (
<div className="min-w-0">
<p className="font-mono text-caption break-all text-foreground">{r.release.title}</p>
<p className="mt-0.5 truncate text-meta text-muted-foreground">
{r.release.subtitle ? `${r.release.subtitle} · ` : ""}解析:{querySummary(r.query)}
</p>
</div>
),
},
{
key: "reason",
header: "原因",
cell: (r) => (
<div className="flex flex-col items-start gap-1">
<Tone v={POOL_REASON[r.reason]} />
{inInbox(r) ? (
<Link
to={inboxLink(r)}
onClick={(e) => e.stopPropagation()}
className="inline-flex items-center gap-0.5 text-meta whitespace-nowrap text-muted-foreground underline-offset-4 hover:text-foreground hover:underline"
>
已进待处理
<ArrowRight className="h-3 w-3" />
</Link>
) : null}
</div>
),
},
{
key: "cands",
header: "候选",
hideBelow: "sm",
align: "right",
cell: (r) => <span className="tabular-nums">{r.candidates.length}</span>,
},
{
key: "attempts",
header: "尝试",
hideBelow: "md",
cell: (r) => (
<span className="text-meta whitespace-nowrap text-muted-foreground">
{r.attempts} 次 · {relTime(r.lastAttemptAt)}
</span>
),
},
{
key: "next",
header: "下次复查",
hideBelow: "lg",
cell: (r) => (
<span className="text-meta whitespace-nowrap text-muted-foreground">
{r.status === "pending" ? (
r.nextReviewAt ? (
relTime(r.nextReviewAt)
) : (
"不自动复查"
)
) : (
<Tone v={POOL_STATUS[r.status]} />
)}
</span>
),
},
];
const filtered = !!q || status !== "pending" || !!reason;
return (
<>
<FilterBar
search={{ value: q, onChange: setQ, placeholder: "按原始标题 / 解析标题检索" }}
onReset={
filtered
? () => {
setQ("");
setStatus("pending");
setReason("");
}
: undefined
}
>
<FilterSelect label="状态" value={status} onChange={setStatus} options={opts(POOL_STATUS)} />
<FilterSelect label="原因" value={reason} onChange={setReason} options={opts(POOL_REASON)} />
</FilterBar>
<DataTable
columns={columns}
rows={rows}
rowKey={(r) => r.id}
loading={pool.isPending}
error={pool.error}
onRetry={() => pool.refetch()}
onRowClick={(r) => setOpenId(r.id)}
selectedKey={openId}
empty={{
icon: SearchX,
title: filtered ? "没有符合条件的待识别资源" : "没有待识别资源",
description: "证据不足或冲突的资源会出现在这里,有新证据时自动重试。",
}}
hasMore={pool.hasNextPage}
onLoadMore={() => pool.fetchNextPage()}
loadingMore={pool.isFetchingNextPage}
/>
<PoolSheet key={open?.id ?? "none"} item={open} onClose={() => setOpenId(null)} />
</>
);
}
export function ExternalTab() {
const [provider, setProvider] = useState("");
const [status, setStatus] = useState("");
const list = useExternalIdentities({
provider: provider || undefined,
status: (status || undefined) as IdentityStatus | undefined,
});
const [openId, setOpenId] = useState<string | null>(null);
const rows = list.data?.pages.flatMap((p) => p.items);
const open = rows?.find((r) => r.id === openId) ?? null;
const columns: DataColumn<ExternalIdentity>[] = [
{
key: "ref",
header: "外部身份",
cell: (r) => (
<span className="inline-flex items-center gap-1.5 font-mono text-caption break-all text-foreground">
{r.locked ? <Lock className="h-3 w-3 shrink-0 text-muted-foreground" aria-label="已锁定" /> : null}
{identityRef(r)}
</span>
),
},
{
key: "entity",
header: "作品",
hideBelow: "sm",
cell: (r) => (
<span className="line-clamp-1 text-caption text-foreground">
{r.mediaEntityTitle ?? <span className="text-muted-foreground">未关联</span>}
</span>
),
},
{ key: "status", header: "状态", cell: (r) => <Tone v={IDENTITY_STATUS[r.status]} /> },
{
key: "level",
header: "证据",
hideBelow: "sm",
cell: (r) => <span className="text-meta whitespace-nowrap">{EVIDENCE_LEVEL[r.evidenceLevel]}</span>,
},
{ key: "verify", header: "外部校验", hideBelow: "md", cell: (r) => <Tone v={VERIFY_STATUS[r.verifyStatus]} /> },
{
key: "rev",
header: "修订",
hideBelow: "lg",
align: "right",
cell: (r) => (
<span className="text-meta whitespace-nowrap text-muted-foreground tabular-nums">
r{r.revision} · {relTime(r.updatedAt)}
</span>
),
},
];
const filtered = !!provider || !!status;
return (
<>
<FilterBar
onReset={
filtered
? () => {
setProvider("");
setStatus("");
}
: undefined
}
>
<FilterSelect
label="来源"
value={provider}
onChange={setProvider}
options={[
{ value: "tmdb", label: "TMDB" },
{ value: "imdb", label: "IMDb" },
{ value: "tvdb", label: "TVDB" },
]}
/>
<FilterSelect label="状态" value={status} onChange={setStatus} options={opts(IDENTITY_STATUS)} />
</FilterBar>
<DataTable
columns={columns}
rows={rows}
rowKey={(r) => r.id}
loading={list.isPending}
error={list.error}
onRetry={() => list.refetch()}
onRowClick={(r) => setOpenId(r.id)}
selectedKey={openId}
empty={{
icon: Fingerprint,
title: "没有外部身份",
description: "没有外部身份的作品也能建档入库。",
}}
hasMore={list.hasNextPage}
onLoadMore={() => list.fetchNextPage()}
loadingMore={list.isFetchingNextPage}
/>
<ExternalIdentitySheet item={open} onClose={() => setOpenId(null)} />
</>
);
}
+1
View File
@@ -35,6 +35,7 @@ export default [
route("audit", "routes/console/audit.tsx"), route("audit", "routes/console/audit.tsx"),
route("settings", "routes/console/settings.tsx"), route("settings", "routes/console/settings.tsx"),
route("schedules", "routes/console/schedules.tsx"), route("schedules", "routes/console/schedules.tsx"),
route("status", "routes/console/status.tsx"),
]), ]),
]), ]),
route("*", "routes/not-found.tsx"), route("*", "routes/not-found.tsx"),
@@ -22,7 +22,7 @@ export default function DownloadTaskPage() {
<Button asChild variant="ghost" size="sm"> <Button asChild variant="ghost" size="sm">
<Link to={consolePath("downloads")}> <Link to={consolePath("downloads")}>
<ArrowLeft /> <ArrowLeft />
下载队列 下载面板
</Link> </Link>
</Button> </Button>
} }
@@ -12,13 +12,14 @@ import { consolePath } from "~/components/console/nav.ts";
import { PageHeader } from "~/components/console/page-header.tsx"; import { PageHeader } from "~/components/console/page-header.tsx";
import { StatusBadge } from "~/components/console/status-badge.tsx"; import { StatusBadge } from "~/components/console/status-badge.tsx";
import { useQueryState } from "~/components/console/use-query-state.ts"; import { useQueryState } from "~/components/console/use-query-state.ts";
import { DownloadsTabs } from "~/components/downloads/downloads-tabs.tsx";
import { PRIORITY } from "~/components/library/labels.ts"; import { PRIORITY } from "~/components/library/labels.ts";
import { Button } from "~/components/ui/button.tsx"; import { Button } from "~/components/ui/button.tsx";
import { relTime } from "~/components/workbench/release-fields.ts"; import { relTime } from "~/components/workbench/release-fields.ts";
import { planReasonText } from "~/lib/labels.ts"; import { planReasonText } from "~/lib/labels.ts";
import { formatBytes, formatDateTime } from "~/lib/utils.ts"; import { formatBytes, formatDateTime } from "~/lib/utils.ts";
export const meta = () => [{ title: "下载计划 · UHD 媒体自动化控制台" }]; export const meta = () => [{ title: "下载计划 · 下载面板 · UHD 媒体自动化控制台" }];
const PURPOSE = { fill: "补缺", upgrade: "升级", replace_source: "换源" } as const; const PURPOSE = { fill: "补缺", upgrade: "升级", replace_source: "换源" } as const;
@@ -77,7 +78,8 @@ export default function DownloadPlansPage() {
return ( return (
<> <>
<PageHeader title="下载计划" description="候选被选中后生成计划,同时预留版本目标、空间与预算。" /> <PageHeader title="下载面板" description="候选被选中后生成计划,同时预留版本目标、空间与预算。" />
<DownloadsTabs />
<FilterBar onReset={f.active ? f.reset : undefined}> <FilterBar onReset={f.active ? f.reset : undefined}>
<FilterSelect <FilterSelect
label="状态" label="状态"
+4 -2
View File
@@ -18,12 +18,13 @@ import {
PauseResume, PauseResume,
ProgressLine, ProgressLine,
} from "~/components/downloads/download-detail.tsx"; } from "~/components/downloads/download-detail.tsx";
import { DownloadsTabs } from "~/components/downloads/downloads-tabs.tsx";
import { Button } from "~/components/ui/button.tsx"; import { Button } from "~/components/ui/button.tsx";
import { relTime } from "~/components/workbench/release-fields.ts"; import { relTime } from "~/components/workbench/release-fields.ts";
import { useSse } from "~/lib/sse.ts"; import { useSse } from "~/lib/sse.ts";
import { formatBytes } from "~/lib/utils.ts"; import { formatBytes } from "~/lib/utils.ts";
export const meta = () => [{ title: "下载队列 · UHD 媒体自动化控制台" }]; export const meta = () => [{ title: "下载面板 · UHD 媒体自动化控制台" }];
export default function DownloadsPage() { export default function DownloadsPage() {
const f = useQueryState(["status", "managed"] as const); const f = useQueryState(["status", "managed"] as const);
@@ -89,7 +90,7 @@ export default function DownloadsPage() {
return ( return (
<> <>
<PageHeader <PageHeader
title="下载队列" title="下载面板"
description="阈值暂停不能手动绕过;无进展只记录,不自动换源。" description="阈值暂停不能手动绕过;无进展只记录,不自动换源。"
actions={ actions={
<Button variant="outline" size="sm" onClick={() => void qc.invalidateQueries({ queryKey: ["downloads"] })}> <Button variant="outline" size="sm" onClick={() => void qc.invalidateQueries({ queryKey: ["downloads"] })}>
@@ -98,6 +99,7 @@ export default function DownloadsPage() {
</Button> </Button>
} }
/> />
<DownloadsTabs />
<CacheVolumes /> <CacheVolumes />
<FilterBar onReset={f.active ? f.reset : undefined}> <FilterBar onReset={f.active ? f.reset : undefined}>
<FilterSelect <FilterSelect
+5 -255
View File
@@ -1,258 +1,8 @@
import type { EngineStepAttempt } from "@umt/contracts"; import { legacyRedirectLoader } from "./redirects.ts";
import { ArrowLeft, Ban, Repeat, RotateCw } from "lucide-react";
import { Link, useNavigate, useParams } from "react-router";
import { toast } from "sonner";
import { ENGINE_TERMINAL, useCancelEngineRun, useEngineRun, useRetryEngineRun } from "~/api/engine.ts";
import { ConfirmDialog } from "~/components/console/confirm-dialog.tsx";
import { DetailSection } from "~/components/console/detail-sheet.tsx";
import { EmptyState, ErrorState, LoadingState } from "~/components/console/empty-state.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";
import { Button, buttonVariants } from "~/components/ui/button.tsx";
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: "运行详情 · 引擎面板" }]; // IA-3:引擎运行详情改为任务页抽屉(/console/tasks?run=)
export const clientLoader = legacyRedirectLoader;
const KIND_LABEL: Record<string, string> = { export default function LegacyRedirect() {
function: "函数", return null;
sleep: "休眠",
workflow: "子工作流",
"signal-send": "发送信号",
"signal-wait": "等待信号",
};
function stepTone(s: string) {
if (s === "completed" || s === "succeeded") return "success" as const;
if (s === "failed") return "destructive" as const;
return "neutral" as const;
}
function stepItems(steps: EngineStepAttempt[]): TimelineItem[] {
const seen = new Map<string, number>();
return steps.map((st) => {
const n = (seen.get(st.stepName) ?? 0) + 1;
seen.set(st.stepName, n);
const status =
st.status === "running"
? "运行中"
: st.status === "failed"
? "失败"
: st.status === "completed" || st.status === "succeeded"
? "完成"
: st.status;
const hasError = st.error !== null && st.error !== undefined;
return {
id: st.id,
at: st.startedAt ?? st.createdAt,
tone: stepTone(st.status),
title: (
<span>
{st.stepName}
<span className="ml-2 text-meta font-normal text-muted-foreground">
{KIND_LABEL[st.kind] ?? st.kind} · {status}
{n > 1 ? ` · 第 ${n} 次` : ""}
</span>
</span>
),
meta: formatDuration(runDurationSec(st)),
description: (
<>
{st.waitSignal ? (
<p>
等待信号 <code className="font-mono">{st.waitSignal}</code>
{st.timeoutAt ? ` · 超时于 ${formatDateTime(st.timeoutAt)}` : ""}
</p>
) : null}
{st.childWorkflowRunId ? (
<p>
子工作流{" "}
<Link to={consolePath("engine", st.childWorkflowRunId)} className="font-mono underline">
{st.childWorkflowRunId}
</Link>
</p>
) : null}
<p className="font-mono text-meta">{st.id}</p>
</>
),
children: hasError ? (
<JsonView label="错误" value={st.error} tone="destructive" defaultOpen />
) : st.output !== null && st.output !== undefined ? (
<JsonView label="输出" value={st.output} defaultOpen={false} maxHeight="14rem" />
) : undefined,
};
});
}
export default function EngineRunPage() {
const { runId } = useParams();
const q = useEngineRun(runId);
const cancel = useCancelEngineRun();
const retry = useRetryEngineRun();
const navigate = useNavigate();
const back = (
<Link
to={consolePath("engine")}
className={buttonVariants({ variant: "ghost", size: "sm", className: "-ml-2 mb-2" })}
>
<ArrowLeft />
返回列表
</Link>
);
if (q.isPending) {
return (
<>
{back}
<LoadingState rows={8} />
</>
);
}
if (q.isError) {
return (
<>
{back}
<ErrorState title="加载失败" error={q.error} onRetry={() => q.refetch()} />
</>
);
}
const r = q.data;
const st = engineRunLabel(r.status);
const terminal = ENGINE_TERMINAL.has(r.status);
const hasError = r.error !== null && r.error !== undefined;
return (
<>
{back}
<PageHeader
title={r.workflowName}
description={
<span className="flex flex-wrap items-center gap-2">
<StatusBadge tone={st.tone}>{st.label}</StatusBadge>
{r.version ? <span>{r.version}</span> : null}
<span className="font-mono text-meta break-all">{r.id}</span>
</span>
}
actions={
<>
<Button variant="ghost" size="sm" onClick={() => q.refetch()} disabled={q.isFetching}>
<RotateCw className={q.isFetching ? "animate-spin" : undefined} />
刷新
</Button>
{!terminal ? (
<ConfirmDialog
trigger={
<Button variant="destructive" size="sm">
<Ban />
取消运行
</Button>
}
title="取消这次运行?"
description="正在执行的步骤会在下一个检查点退出。"
confirmLabel="取消运行"
cancelLabel="不取消"
destructive
onConfirm={async () => {
try {
const res = await cancel.mutateAsync({ id: r.id, reason: "控制台手动取消" });
if (res.canceled) toast.success("已取消");
else toast.warning("运行已结束");
} catch (err) {
toast.error(errorMessage(err, "取消失败"));
throw err;
}
}}
/>
) : (
<ConfirmDialog
trigger={
<Button variant="outline" size="sm" disabled={retry.isPending}>
<Repeat />
重跑
</Button>
}
title="重跑这次运行?"
description="用原始输入新建一次运行,原记录不变。已完成的文件操作不会重复执行。"
confirmLabel="重跑"
cancelLabel="不重跑"
onConfirm={async () => {
try {
const res = await retry.mutateAsync({ id: r.id });
toast.success(`已重新入队(第 ${res.attempt} 次重跑)`);
navigate(consolePath("engine", res.runId));
} catch (err) {
toast.error(errorMessage(err, "重跑失败"));
throw err;
}
}}
/>
)}
</>
}
/>
<div className="grid gap-4 lg:grid-cols-[minmax(0,2fr)_minmax(0,3fr)]">
<div className="min-w-0 space-y-4">
<section className="pg-slab rounded-xl p-5">
<DetailSection title="概览">
<KvList
items={[
{
label: "开始",
value: r.startedAt ? `${formatDateTime(r.startedAt)}(${formatRelative(r.startedAt)})` : "未开始",
},
{ label: "耗时", value: formatDuration(runDurationSec(r)) },
{ label: "结束", value: formatDateTime(r.finishedAt) },
{ label: "尝试次数", value: r.attempts },
{ label: "可执行于", value: formatDateTime(r.availableAt) },
{ label: "截止", value: formatDateTime(r.deadlineAt) },
{ label: "Worker", value: r.workerId, mono: true },
{ label: "父步骤", value: r.parentStepAttemptId, mono: true },
]}
/>
</DetailSection>
</section>
<section className="pg-slab space-y-4 rounded-xl p-5">
{hasError ? <JsonView label="错误" value={r.error} tone="destructive" /> : null}
<JsonView label="输入" value={r.input} defaultOpen={!hasError} />
{!hasError ? <JsonView label="输出" value={r.output} /> : null}
</section>
<section className="pg-slab rounded-xl p-5">
<DetailSection title={`信号(${r.signals.length})`}>
{r.signals.length === 0 ? (
<p className="text-caption text-muted-foreground">没有信号。</p>
) : (
<ul className="space-y-3">
{r.signals.map((sg) => (
<li key={sg.id} className="min-w-0">
<p className="text-sm">
<code className="font-mono">{sg.signal}</code>
<span className="ml-2 text-meta text-muted-foreground">{formatDateTime(sg.createdAt)}</span>
</p>
<JsonView value={sg.data} maxHeight="10rem" className="mt-1" />
</li>
))}
</ul>
)}
</DetailSection>
</section>
</div>
<section className="pg-slab min-w-0 rounded-xl p-5">
<DetailSection title={`步骤尝试(${r.stepAttempts.length})`}>
{r.stepAttempts.length === 0 ? (
<EmptyState plain title="还没有步骤" className="py-8" />
) : (
<Timeline items={stepItems(r.stepAttempts)} />
)}
</DetailSection>
</section>
</div>
</>
);
} }
+5 -222
View File
@@ -1,225 +1,8 @@
import { useQueryClient } from "@tanstack/react-query"; import { legacyRedirectLoader } from "./redirects.ts";
import type { EngineRun } from "@umt/contracts";
import { Ban, CheckCircle2, Clock, Cpu, LoaderCircle, RotateCw, XCircle } from "lucide-react";
import { useEffect, useRef, useState } from "react";
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";
import { consolePath } from "~/components/console/nav.ts";
import { PageHeader } from "~/components/console/page-header.tsx";
import { StatTile } from "~/components/console/stat-tile.tsx";
import { StatusBadge } from "~/components/console/status-badge.tsx";
import { Button } from "~/components/ui/button.tsx";
import { engineRunLabel, formatDuration, formatRelative, spanSec as runDurationSec } from "~/lib/labels.ts";
import { qk } from "~/lib/query-keys.ts";
import { useSse } from "~/lib/sse.ts";
export const meta = () => [{ title: "引擎面板 · UHD 媒体自动化控制台" }]; // IA-3:引擎面板并入任务页
export const clientLoader = legacyRedirectLoader;
const STAT_ORDER = [ export default function LegacyRedirect() {
{ status: "pending", label: "待执行", icon: Clock, tone: "neutral" }, return null;
{ status: "running", label: "运行中", icon: LoaderCircle, tone: "neutral" },
{ status: "completed", label: "完成", icon: CheckCircle2, tone: "success" },
{ status: "failed", label: "失败", icon: XCircle, tone: "destructive" },
{ status: "canceled", label: "已取消", icon: Ban, tone: "warning" },
] as const;
const STATUS_OPTIONS = ["pending", "running", "completed", "failed", "canceled", "sleeping", "succeeded"].map((s) => ({
value: s,
label: engineRunLabel(s).label,
}));
/** 持续任务事件到达时节流刷新引擎视图(引擎本身不发事件,业务任务事件足以代表它在动) */
const ENGINE_EVENTS = [
"task.created",
"task.status_changed",
"download.status_changed",
"organization.changed",
"agent.run_status",
];
function useDebounced<T>(value: T, ms = 350): T {
const [v, setV] = useState(value);
useEffect(() => {
const t = setTimeout(() => setV(value), ms);
return () => clearTimeout(t);
}, [value, ms]);
return v;
}
export default function EnginePage() {
const navigate = useNavigate();
const qc = useQueryClient();
const [params, setParams] = useSearchParams();
const status = params.get("status") ?? "";
const [name, setName] = useState(params.get("workflow") ?? "");
const workflowName = useDebounced(name.trim());
useEffect(() => {
setParams(
(p) => {
if (workflowName) p.set("workflow", workflowName);
else p.delete("workflow");
return p;
},
{ replace: true },
);
}, [workflowName, setParams]);
const setStatus = (s: string) =>
setParams(
(p) => {
if (s) p.set("status", s);
else p.delete("status");
return p;
},
{ replace: true },
);
const runs = useEngineRuns({ status: status || undefined, workflowName: workflowName || undefined });
const stats = useEngineStats();
const timer = useRef<ReturnType<typeof setTimeout> | null>(null);
useSse(ENGINE_EVENTS, () => {
if (timer.current) return;
timer.current = setTimeout(() => {
timer.current = null;
qc.invalidateQueries({ queryKey: qk.all("engine") });
}, 2000);
});
const rows = runs.data?.pages.flatMap((p) => p.items);
const s = stats.data;
return (
<>
<PageHeader
title="引擎面板"
description={
<>
排查用,只读。业务进度看
<Link to={consolePath("tasks")} className="mx-1 underline underline-offset-4">
业务任务
</Link>
</>
}
actions={
<Button
variant="outline"
size="sm"
onClick={() => qc.invalidateQueries({ queryKey: qk.all("engine") })}
disabled={runs.isFetching}
>
<RotateCw className={runs.isFetching ? "animate-spin" : undefined} />
刷新
</Button>
}
/>
<div className="mb-3 grid grid-cols-2 gap-2 sm:grid-cols-3 lg:grid-cols-5">
{STAT_ORDER.map((t) => (
<StatTile
key={t.status}
label={t.label}
icon={t.icon}
tone={(s?.byStatus[t.status] ?? 0) > 0 ? t.tone : "neutral"}
value={stats.isPending ? "…" : stats.isError ? "—" : (s?.byStatus[t.status] ?? 0)}
active={status === t.status}
onClick={() => setStatus(status === t.status ? "" : t.status)}
/>
))}
</div>
<div className="mb-5 flex flex-wrap gap-x-5 gap-y-1 text-meta text-muted-foreground">
<span>
最老待执行:
{s?.oldestPending ? (
<button
type="button"
className="cursor-pointer text-foreground underline-offset-2 hover:underline"
onClick={() => navigate(consolePath("engine", s.oldestPending?.id ?? ""))}
>
{s.oldestPending.workflowName} · 已等 {formatDuration(s.oldestPending.ageSec)}
</button>
) : (
"无"
)}
</span>
<span className="inline-flex items-center gap-1.5">
<Cpu className="h-3.5 w-3.5" />
持有租约的 worker:
{s && s.activeWorkers.length > 0
? s.activeWorkers.map((w) => `${w.workerId}(${w.running})`).join("、")
: "无"}
<span className="text-muted-foreground/80">(快照)</span>
</span>
</div>
<FilterBar
search={{ value: name, onChange: setName, placeholder: "按工作流名称筛选" }}
onReset={
status || name
? () => {
setName("");
setStatus("");
}
: undefined
}
>
<FilterSelect label="状态" value={status} onChange={setStatus} options={STATUS_OPTIONS} />
</FilterBar>
<DataTable<EngineRun>
rows={rows}
rowKey={(r) => r.id}
loading={runs.isPending}
error={runs.error}
onRetry={() => runs.refetch()}
empty={{
title: status || workflowName ? "没有符合条件的运行" : "引擎还没有运行记录",
description: status || workflowName ? undefined : "任务入队后出现在这里。",
}}
onRowClick={(r) => navigate(consolePath("engine", r.id))}
hasMore={!!runs.hasNextPage}
onLoadMore={() => runs.fetchNextPage()}
loadingMore={runs.isFetchingNextPage}
columns={[
{
key: "status",
header: "状态",
cell: (r) => {
const l = engineRunLabel(r.status);
return <StatusBadge tone={l.tone}>{l.label}</StatusBadge>;
},
},
{
key: "name",
header: "工作流",
cell: (r) => (
<div className="min-w-0 max-w-[16rem] sm:max-w-none">
<p className="truncate font-medium">
{r.workflowName}
{r.version ? <span className="ml-1.5 text-meta text-muted-foreground">{r.version}</span> : null}
</p>
<p className="truncate font-mono text-meta text-muted-foreground">{r.id}</p>
</div>
),
},
{ key: "attempts", header: "尝试", hideBelow: "md", align: "right", cell: (r) => r.attempts },
{
key: "dur",
header: "耗时",
hideBelow: "sm",
cell: (r) => <span className="tabular-nums">{formatDuration(runDurationSec(r))}</span>,
},
{
key: "created",
header: "创建",
hideBelow: "md",
cell: (r) => <span className="whitespace-nowrap text-muted-foreground">{formatRelative(r.createdAt)}</span>,
},
]}
/>
</>
);
} }
+5 -320
View File
@@ -1,323 +1,8 @@
import type { import { legacyRedirectLoader } from "./redirects.ts";
ExternalIdentity,
IdentityCandidateReason,
IdentityCandidateStatus,
IdentityPoolItem,
IdentityStatus,
} from "@umt/contracts";
import { ArrowRight, Fingerprint, Inbox, Lock, SearchX } from "lucide-react";
import { useEffect, useState } from "react";
import { Link, useSearchParams } from "react-router";
import { useExternalIdentities, useIdentityPool } from "~/api/identity.ts";
import { type DataColumn, DataTable } from "~/components/console/data-table.tsx";
import { FilterBar, FilterSelect } from "~/components/console/filter-bar.tsx";
import { PageHeader } from "~/components/console/page-header.tsx";
import { AliasesPanel } from "~/components/library/identity-aliases.tsx";
import { ExternalIdentitySheet, identityRef } from "~/components/library/identity-external-sheet.tsx";
import {
INBOX_IDENTITY,
inboxLink,
inInbox,
PoolSheet,
querySummary,
} from "~/components/library/identity-pool-sheet.tsx";
import {
EVIDENCE_LEVEL,
IDENTITY_STATUS,
opts,
POOL_REASON,
POOL_STATUS,
VERIFY_STATUS,
} from "~/components/library/labels.ts";
import { relTime, Tone } from "~/components/library/parts.tsx";
import { Button } from "~/components/ui/button.tsx";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "~/components/ui/tabs.tsx";
// 身份与元数据(REQ §7.2、§7.5):待识别资源、外部身份映射与修订、别名。 // IA-3:"身份与元数据"取消,待识别 / 外部身份 / 别名并入媒体概览(/console/library?filter=unidentified 等)
// 待识别资源只读;选候选、忽略在待处理里做(docs/design/console-ia.md §3.1 判定只在待处理)。 export const clientLoader = legacyRedirectLoader;
export const meta = () => [{ title: "身份与元数据 · UHD 媒体自动化控制台" }]; export default function IdentityRedirect() {
return null;
function useDebounced(v: string, ms = 250) {
const [d, setD] = useState(v);
useEffect(() => {
const t = setTimeout(() => setD(v), ms);
return () => clearTimeout(t);
}, [v, ms]);
return d;
}
function PoolTab() {
const [q, setQ] = useState("");
const [status, setStatus] = useState("pending");
const [reason, setReason] = useState("");
const dq = useDebounced(q.trim());
const pool = useIdentityPool({
q: dq || undefined,
status: (status || undefined) as IdentityCandidateStatus | undefined,
reason: (reason || undefined) as IdentityCandidateReason | undefined,
});
const [openId, setOpenId] = useState<string | null>(null);
const rows = pool.data?.pages.flatMap((p) => p.items);
const open = rows?.find((r) => r.id === openId) ?? null;
const columns: DataColumn<IdentityPoolItem>[] = [
{
key: "title",
header: "原始标题",
className: "max-w-0 w-full",
cell: (r) => (
<div className="min-w-0">
<p className="font-mono text-caption break-all text-foreground">{r.release.title}</p>
<p className="mt-0.5 truncate text-meta text-muted-foreground">
{r.release.subtitle ? `${r.release.subtitle} · ` : ""}解析:{querySummary(r.query)}
</p>
</div>
),
},
{
key: "reason",
header: "原因",
cell: (r) => (
<div className="flex flex-col items-start gap-1">
<Tone v={POOL_REASON[r.reason]} />
{inInbox(r) ? (
<Link
to={inboxLink(r)}
onClick={(e) => e.stopPropagation()}
className="inline-flex items-center gap-0.5 text-meta whitespace-nowrap text-muted-foreground underline-offset-4 hover:text-foreground hover:underline"
>
已进待处理
<ArrowRight className="h-3 w-3" />
</Link>
) : null}
</div>
),
},
{
key: "cands",
header: "候选",
hideBelow: "sm",
align: "right",
cell: (r) => <span className="tabular-nums">{r.candidates.length}</span>,
},
{
key: "attempts",
header: "尝试",
hideBelow: "md",
cell: (r) => (
<span className="text-meta whitespace-nowrap text-muted-foreground">
{r.attempts} 次 · {relTime(r.lastAttemptAt)}
</span>
),
},
{
key: "next",
header: "下次复查",
hideBelow: "lg",
cell: (r) => (
<span className="text-meta whitespace-nowrap text-muted-foreground">
{r.status === "pending" ? (
r.nextReviewAt ? (
relTime(r.nextReviewAt)
) : (
"不自动复查"
)
) : (
<Tone v={POOL_STATUS[r.status]} />
)}
</span>
),
},
];
const filtered = !!q || status !== "pending" || !!reason;
return (
<>
<FilterBar
search={{ value: q, onChange: setQ, placeholder: "按原始标题 / 解析标题检索" }}
onReset={
filtered
? () => {
setQ("");
setStatus("pending");
setReason("");
}
: undefined
}
>
<FilterSelect label="状态" value={status} onChange={setStatus} options={opts(POOL_STATUS)} />
<FilterSelect label="原因" value={reason} onChange={setReason} options={opts(POOL_REASON)} />
</FilterBar>
<DataTable
columns={columns}
rows={rows}
rowKey={(r) => r.id}
loading={pool.isPending}
error={pool.error}
onRetry={() => pool.refetch()}
onRowClick={(r) => setOpenId(r.id)}
selectedKey={openId}
empty={{
icon: SearchX,
title: filtered ? "没有符合条件的待识别资源" : "没有待识别资源",
description: "证据不足或冲突的资源会出现在这里,有新证据时自动重试。",
}}
hasMore={pool.hasNextPage}
onLoadMore={() => pool.fetchNextPage()}
loadingMore={pool.isFetchingNextPage}
/>
<PoolSheet key={open?.id ?? "none"} item={open} onClose={() => setOpenId(null)} />
</>
);
}
function ExternalTab() {
const [provider, setProvider] = useState("");
const [status, setStatus] = useState("");
const list = useExternalIdentities({
provider: provider || undefined,
status: (status || undefined) as IdentityStatus | undefined,
});
const [openId, setOpenId] = useState<string | null>(null);
const rows = list.data?.pages.flatMap((p) => p.items);
const open = rows?.find((r) => r.id === openId) ?? null;
const columns: DataColumn<ExternalIdentity>[] = [
{
key: "ref",
header: "外部身份",
cell: (r) => (
<span className="inline-flex items-center gap-1.5 font-mono text-caption break-all text-foreground">
{r.locked ? <Lock className="h-3 w-3 shrink-0 text-muted-foreground" aria-label="已锁定" /> : null}
{identityRef(r)}
</span>
),
},
{
key: "entity",
header: "作品",
hideBelow: "sm",
cell: (r) => (
<span className="line-clamp-1 text-caption text-foreground">
{r.mediaEntityTitle ?? <span className="text-muted-foreground">未关联</span>}
</span>
),
},
{ key: "status", header: "状态", cell: (r) => <Tone v={IDENTITY_STATUS[r.status]} /> },
{
key: "level",
header: "证据",
hideBelow: "sm",
cell: (r) => <span className="text-meta whitespace-nowrap">{EVIDENCE_LEVEL[r.evidenceLevel]}</span>,
},
{ key: "verify", header: "外部校验", hideBelow: "md", cell: (r) => <Tone v={VERIFY_STATUS[r.verifyStatus]} /> },
{
key: "rev",
header: "修订",
hideBelow: "lg",
align: "right",
cell: (r) => (
<span className="text-meta whitespace-nowrap text-muted-foreground tabular-nums">
r{r.revision} · {relTime(r.updatedAt)}
</span>
),
},
];
const filtered = !!provider || !!status;
return (
<>
<FilterBar
onReset={
filtered
? () => {
setProvider("");
setStatus("");
}
: undefined
}
>
<FilterSelect
label="来源"
value={provider}
onChange={setProvider}
options={[
{ value: "tmdb", label: "TMDB" },
{ value: "imdb", label: "IMDb" },
{ value: "tvdb", label: "TVDB" },
]}
/>
<FilterSelect label="状态" value={status} onChange={setStatus} options={opts(IDENTITY_STATUS)} />
</FilterBar>
<DataTable
columns={columns}
rows={rows}
rowKey={(r) => r.id}
loading={list.isPending}
error={list.error}
onRetry={() => list.refetch()}
onRowClick={(r) => setOpenId(r.id)}
selectedKey={openId}
empty={{
icon: Fingerprint,
title: "没有外部身份",
description: "没有外部身份的作品也能建档入库。",
}}
hasMore={list.hasNextPage}
onLoadMore={() => list.fetchNextPage()}
loadingMore={list.isFetchingNextPage}
/>
<ExternalIdentitySheet item={open} onClose={() => setOpenId(null)} />
</>
);
}
const TABS = ["pool", "external", "aliases"] as const;
export default function IdentityPage() {
const [params, setParams] = useSearchParams();
const tab = (TABS as readonly string[]).includes(params.get("tab") ?? "") ? params.get("tab")! : "pool";
return (
<>
<PageHeader
title="身份与元数据"
description="以本地 ID 为准。自动匹配不覆盖人工锁定的外部身份。"
actions={
<Button asChild variant="outline" size="sm">
<Link to={INBOX_IDENTITY}>
<Inbox />
确认身份
</Link>
</Button>
}
/>
<Tabs
value={tab}
onValueChange={(v) =>
setParams(
(p) => {
p.set("tab", v);
return p;
},
{ replace: true },
)
}
>
<TabsList>
<TabsTrigger value="pool">待识别</TabsTrigger>
<TabsTrigger value="external">外部身份</TabsTrigger>
<TabsTrigger value="aliases">别名</TabsTrigger>
</TabsList>
<TabsContent value="pool">
<PoolTab />
</TabsContent>
<TabsContent value="external">
<ExternalTab />
</TabsContent>
<TabsContent value="aliases">
<AliasesPanel />
</TabsContent>
</Tabs>
</>
);
} }
+5 -31
View File
@@ -3,12 +3,12 @@ import { ChevronLeft, ChevronRight, Clapperboard, LoaderCircle, Menu } from "luc
import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react"; import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
import { Link, Outlet, useLocation } from "react-router"; import { Link, Outlet, useLocation } from "react-router";
import { useSession } from "~/api/auth.ts"; import { useSession } from "~/api/auth.ts";
import { useDecisionSummary } from "~/api/decisions.ts";
import { AgentDrawer, AgentDrawerTrigger } from "~/components/agent/agent-drawer.tsx"; import { AgentDrawer, AgentDrawerTrigger } from "~/components/agent/agent-drawer.tsx";
import { AccountMenu } from "~/components/console/account-menu.tsx"; import { AccountMenu } from "~/components/console/account-menu.tsx";
import { AgentLauncher, AgentNavEntry } from "~/components/console/agent-launcher.tsx"; import { AgentLauncher, AgentNavEntry } from "~/components/console/agent-launcher.tsx";
import { ErrorState } from "~/components/console/empty-state.tsx"; import { ErrorState } from "~/components/console/empty-state.tsx";
import { findNavItem, NAV_GROUPS, type NavGroup, type NavItem } from "~/components/console/nav.ts"; import { InboxBell } from "~/components/console/inbox-bell.tsx";
import { findNavItem, NAV_GROUPS, type NavGroup, pageTitle } from "~/components/console/nav.ts";
import PrismLeak from "~/components/prism-leak.tsx"; import PrismLeak from "~/components/prism-leak.tsx";
import { ThemeToggle } from "~/components/theme-toggle.tsx"; import { ThemeToggle } from "~/components/theme-toggle.tsx";
import { Button } from "~/components/ui/button.tsx"; import { Button } from "~/components/ui/button.tsx";
@@ -18,31 +18,10 @@ import { cn } from "~/lib/utils.ts";
const PORTAL_NAME = "媒体自动化"; 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)滑到激活链接背后 ─── // ─── 展开态导航:选中项由一枚玻璃滑块(seg-thumb)滑到激活链接背后 ───
function ExpandedNav({ groups, onNavigate }: { groups: NavGroup[]; onNavigate?: () => void }) { function ExpandedNav({ groups, onNavigate }: { groups: NavGroup[]; onNavigate?: () => void }) {
const location = useLocation(); const location = useLocation();
const activeTo = findNavItem(location.pathname)?.to; const activeTo = findNavItem(location.pathname)?.to;
const badges = useNavBadges();
const navRef = useRef<HTMLElement>(null); const navRef = useRef<HTMLElement>(null);
const [pill, setPill] = useState<{ x: number; y: number; w: number; h: number } | null>(null); const [pill, setPill] = useState<{ x: number; y: number; w: number; h: number } | null>(null);
@@ -102,7 +81,6 @@ function ExpandedNav({ groups, onNavigate }: { groups: NavGroup[]; onNavigate?:
> >
<item.icon className={cn("h-4 w-4 shrink-0", active && "text-primary")} /> <item.icon className={cn("h-4 w-4 shrink-0", active && "text-primary")} />
<span className="flex-1 truncate">{item.label}</span> <span className="flex-1 truncate">{item.label}</span>
{item.badge ? <NavBadge n={badges[item.badge]} /> : null}
</Link> </Link>
); );
})} })}
@@ -117,7 +95,6 @@ function ExpandedNav({ groups, onNavigate }: { groups: NavGroup[]; onNavigate?:
function CollapsedNav() { function CollapsedNav() {
const location = useLocation(); const location = useLocation();
const activeTo = findNavItem(location.pathname)?.to; const activeTo = findNavItem(location.pathname)?.to;
const badges = useNavBadges();
return ( return (
<nav className="flex flex-1 flex-col items-center gap-1 overflow-y-auto py-4"> <nav className="flex flex-1 flex-col items-center gap-1 overflow-y-auto py-4">
<AgentNavEntry collapsed /> <AgentNavEntry collapsed />
@@ -126,12 +103,11 @@ function CollapsedNav() {
{gi > 0 ? <span aria-hidden className="my-1 h-px w-6 bg-border" /> : null} {gi > 0 ? <span aria-hidden className="my-1 h-px w-6 bg-border" /> : null}
{group.items.map((item) => { {group.items.map((item) => {
const active = item.to === activeTo; const active = item.to === activeTo;
const n = item.badge ? badges[item.badge] : 0;
return ( return (
<Link <Link
key={item.to} key={item.to}
to={item.to} to={item.to}
title={n ? `${item.label}(${n})` : item.label} title={item.label}
aria-current={active ? "page" : undefined} aria-current={active ? "page" : undefined}
className={cn( className={cn(
"relative flex h-10 w-10 items-center justify-center rounded-xl transition-colors duration-micro", "relative flex h-10 w-10 items-center justify-center rounded-xl transition-colors duration-micro",
@@ -141,9 +117,6 @@ function CollapsedNav() {
)} )}
> >
<item.icon className="h-[18px] w-[18px]" /> <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> </Link>
); );
})} })}
@@ -200,7 +173,7 @@ function ConsoleShell({ session }: { session: SessionInfo }) {
const location = useLocation(); const location = useLocation();
const [collapsed, setCollapsed] = useState(false); const [collapsed, setCollapsed] = useState(false);
const [sheetOpen, setSheetOpen] = useState(false); const [sheetOpen, setSheetOpen] = useState(false);
const activeLabel = findNavItem(location.pathname)?.label ?? PORTAL_NAME; const activeLabel = pageTitle(location.pathname) ?? PORTAL_NAME;
return ( return (
<div className="app-scrollbars relative isolate flex min-h-screen overflow-x-hidden bg-background"> <div className="app-scrollbars relative isolate flex min-h-screen overflow-x-hidden bg-background">
@@ -261,6 +234,7 @@ function ConsoleShell({ session }: { session: SessionInfo }) {
</div> </div>
<div className="ml-auto flex items-center gap-2"> <div className="ml-auto flex items-center gap-2">
{/* 桌面有侧栏主入口与右下角悬浮按钮,顶栏小按钮只在窄屏保留 */} {/* 桌面有侧栏主入口与右下角悬浮按钮,顶栏小按钮只在窄屏保留 */}
<InboxBell />
<AgentDrawerTrigger className="xl:hidden" /> <AgentDrawerTrigger className="xl:hidden" />
<ThemeToggle /> <ThemeToggle />
<AccountMenu session={session} /> <AccountMenu session={session} />
+64 -6
View File
@@ -1,5 +1,5 @@
import type { LibraryItem, LibraryListQuery, MediaKind, SlotStatus } from "@umt/contracts"; import type { LibraryItem, LibraryListQuery, MediaKind, SlotStatus } from "@umt/contracts";
import { Download, Library as LibraryIcon, RotateCw } from "lucide-react"; import { Download, Inbox, Library as LibraryIcon, RotateCw } from "lucide-react";
import { useDeferredValue } from "react"; import { useDeferredValue } from "react";
import { Link, useNavigate, useSearchParams } from "react-router"; import { Link, useNavigate, useSearchParams } from "react-router";
import { useLibraryList } from "~/api/library.ts"; import { useLibraryList } from "~/api/library.ts";
@@ -8,9 +8,15 @@ import { FilterBar, FilterSelect } from "~/components/console/filter-bar.tsx";
import { consolePath } from "~/components/console/nav.ts"; import { consolePath } from "~/components/console/nav.ts";
import { PageHeader } from "~/components/console/page-header.tsx"; import { PageHeader } from "~/components/console/page-header.tsx";
import { StatusBadge } from "~/components/console/status-badge.tsx"; import { StatusBadge } from "~/components/console/status-badge.tsx";
import { AliasesPanel } from "~/components/library/identity-aliases.tsx";
import { INBOX_IDENTITY } from "~/components/library/identity-pool-sheet.tsx";
import { ExternalTab, PoolTab } from "~/components/library/identity-views.tsx";
import { ENTITY_STATUS, MEDIA_KIND, opts, SLOT_STATUS, SLOT_STATUS_ORDER } from "~/components/library/labels.ts"; import { ENTITY_STATUS, MEDIA_KIND, opts, SLOT_STATUS, SLOT_STATUS_ORDER } from "~/components/library/labels.ts";
import { CoverPlaceholder, relTime, Tone } from "~/components/library/parts.tsx"; import { CoverPlaceholder, relTime, Tone } from "~/components/library/parts.tsx";
import { Button } from "~/components/ui/button.tsx"; import { Button } from "~/components/ui/button.tsx";
import { Tabs, TabsList, TabsTrigger } from "~/components/ui/tabs.tsx";
export const meta = () => [{ title: "媒体概览 · UHD 媒体自动化控制台" }];
const FILTERS: { value: NonNullable<LibraryListQuery["filter"]>; label: string }[] = [ const FILTERS: { value: NonNullable<LibraryListQuery["filter"]>; label: string }[] = [
{ value: "gap", label: "有缺口" }, { value: "gap", label: "有缺口" },
@@ -34,7 +40,62 @@ function SlotSummary({ counts }: { counts: LibraryItem["slotCounts"] }) {
); );
} }
type View = "works" | "unidentified" | "identities" | "aliases";
function viewOf(sp: URLSearchParams): View {
if (sp.get("filter") === "unidentified") return "unidentified";
const v = sp.get("view");
return v === "identities" || v === "aliases" ? v : "works";
}
const VIEW_QUERY: Record<View, string> = {
works: "",
unidentified: "filter=unidentified",
identities: "view=identities",
aliases: "view=aliases",
};
export default function LibraryPage() { export default function LibraryPage() {
const [sp, setSp] = useSearchParams();
const view = viewOf(sp);
return (
<>
<PageHeader
title="媒体概览"
description="本地账本:作品、版本目标、资产与外部身份。自动匹配不覆盖人工锁定的外部身份。"
actions={
view === "unidentified" ? (
<Button asChild variant="outline" size="sm">
<Link to={INBOX_IDENTITY}>
<Inbox />
确认身份
</Link>
</Button>
) : undefined
}
/>
<Tabs value={view} onValueChange={(v) => setSp(new URLSearchParams(VIEW_QUERY[v as View]), { replace: true })}>
<TabsList className="mb-4">
<TabsTrigger value="works">作品</TabsTrigger>
<TabsTrigger value="unidentified">待识别</TabsTrigger>
<TabsTrigger value="identities">外部身份</TabsTrigger>
<TabsTrigger value="aliases">别名</TabsTrigger>
</TabsList>
</Tabs>
{view === "unidentified" ? (
<PoolTab />
) : view === "identities" ? (
<ExternalTab />
) : view === "aliases" ? (
<AliasesPanel />
) : (
<WorksView />
)}
</>
);
}
function WorksView() {
const [sp, setSp] = useSearchParams(); const [sp, setSp] = useSearchParams();
const navigate = useNavigate(); const navigate = useNavigate();
const kind = (sp.get("kind") ?? "") as MediaKind | ""; const kind = (sp.get("kind") ?? "") as MediaKind | "";
@@ -121,16 +182,13 @@ export default function LibraryPage() {
return ( return (
<> <>
<PageHeader <FilterBar
title="媒体库"
actions={ actions={
<Button variant="outline" size="sm" onClick={() => list.refetch()} disabled={list.isFetching}> <Button variant="outline" size="sm" onClick={() => list.refetch()} disabled={list.isFetching}>
<RotateCw className={list.isFetching ? "animate-spin" : undefined} /> <RotateCw className={list.isFetching ? "animate-spin" : undefined} />
刷新 刷新
</Button> </Button>
} }
/>
<FilterBar
search={{ value: q, onChange: (v) => set("q", v), placeholder: "标题 / 原名 / 别名" }} search={{ value: q, onChange: (v) => set("q", v), placeholder: "标题 / 原名 / 别名" }}
onReset={filtered ? () => setSp(new URLSearchParams(), { replace: true }) : undefined} onReset={filtered ? () => setSp(new URLSearchParams(), { replace: true }) : undefined}
> >
@@ -149,7 +207,7 @@ export default function LibraryPage() {
filtered filtered
? { title: "没有符合条件的作品", description: "换个关键字或清除筛选。", icon: LibraryIcon } ? { title: "没有符合条件的作品", description: "换个关键字或清除筛选。", icon: LibraryIcon }
: { : {
title: "媒体库为空", title: "还没有作品",
description: "扫描库根或新建订阅后,作品会出现在这里。", description: "扫描库根或新建订阅后,作品会出现在这里。",
icon: LibraryIcon, icon: LibraryIcon,
action: ( action: (
+29 -5
View File
@@ -1,23 +1,39 @@
import { redirect } from "react-router"; import { redirect } from "react-router";
// 控制台 IA 重构(docs/design/console-ia.md §3.3)后的旧链接 → 新路由。 // 控制台 IA 重构后的旧链接 → 新路由(IA-1:docs/design/console-ia.md §3.3;IA-3:§7)。
// 纯函数,各路由模块的 clientLoader 调用;nav.test 与冒烟都读 LEGACY_REDIRECTS。 // 纯函数,各路由模块的 clientLoader 调用;nav.test 与冒烟都读 LEGACY_REDIRECTS。
// 设置页的 ?tab= 旧链接由设置页自己处理(IA-2)。 // 设置页的 ?tab= 旧链接由设置页自己处理(IA-2)。
/** 旧 query → 新地址;不需要跳转时返回 null */ const IDENTITY_TAB: Record<string, string> = {
pool: "filter=unidentified",
external: "view=identities",
aliases: "view=aliases",
};
/** 旧地址 → 新地址;不需要跳转时返回 null */
export function legacyRedirect(pathname: string, search: string): string | null { export function legacyRedirect(pathname: string, search: string): string | null {
const path = pathname.replace(/\/+$/, ""); const path = pathname.replace(/\/+$/, "");
const q = new URLSearchParams(search); const q = new URLSearchParams(search);
const tab = q.get("tab"); const tab = q.get("tab");
if (!tab) return null;
q.delete("tab"); q.delete("tab");
const rest = q.toString(); const rest = q.toString();
const withRest = (to: string) => (rest ? `${to}?${rest}` : to); const withRest = (to: string) => (rest ? `${to}${to.includes("?") ? "&" : "?"}${rest}` : to);
// IA-3:引擎面板并入任务页;运行详情用任务页抽屉(?run=)
if (path === "/console/engine") return withRest(tab ? `/console/tasks?tab=${tab}` : "/console/tasks");
const engineRun = /^\/console\/engine\/([^/]+)$/.exec(path);
if (engineRun) return withRest(`/console/tasks?run=${engineRun[1]}`);
// IA-3:定时任务看板成为任务页"计划"页签
if (path === "/console/schedules") return withRest("/console/tasks?tab=plan");
// IA-3:身份与元数据取消,待识别 / 外部身份 / 别名并入媒体概览
if (path === "/console/identity") return withRest(`/console/library?${IDENTITY_TAB[tab ?? ""] ?? IDENTITY_TAB.pool}`);
if (!tab) return null;
if (path === "/console/tasks") { if (path === "/console/tasks") {
if (tab === "downloads") return withRest("/console/downloads"); if (tab === "downloads") return withRest("/console/downloads");
if (tab === "plans") return withRest("/console/downloads/plans"); if (tab === "plans") return withRest("/console/downloads/plans");
if (tab === "tasks") return withRest("/console/tasks"); // 旧"业务任务"页签:统一任务流
if (tab === "tasks" || tab === "business") return withRest("/console/tasks");
return null; return null;
} }
if (path === "/console/subscriptions" && tab === "policies") return withRest("/console/rules"); if (path === "/console/subscriptions" && tab === "policies") return withRest("/console/rules");
@@ -35,9 +51,17 @@ export const LEGACY_REDIRECTS: { from: string; to: string }[] = [
{ from: "/console/tasks?tab=downloads&status=paused", to: "/console/downloads?status=paused" }, { 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=plans", to: "/console/downloads/plans" },
{ from: "/console/tasks?tab=tasks", to: "/console/tasks" }, { from: "/console/tasks?tab=tasks", to: "/console/tasks" },
{ from: "/console/tasks?tab=business", to: "/console/tasks" },
{ from: "/console/subscriptions?tab=policies", to: "/console/rules" }, { from: "/console/subscriptions?tab=policies", to: "/console/rules" },
{ from: "/console/sources?tab=snapshots", to: "/console/sources" }, { from: "/console/sources?tab=snapshots", to: "/console/sources" },
{ from: "/console/sources?tab=snapshots&siteId=abc", to: "/console/sites/abc?tab=snapshots" }, { from: "/console/sources?tab=snapshots&siteId=abc", to: "/console/sites/abc?tab=snapshots" },
{ from: "/console/engine", to: "/console/tasks" },
{ from: "/console/engine?status=failed", to: "/console/tasks?status=failed" },
{ from: "/console/engine/run-1", to: "/console/tasks?run=run-1" },
{ from: "/console/schedules", to: "/console/tasks?tab=plan" },
{ from: "/console/identity", to: "/console/library?filter=unidentified" },
{ from: "/console/identity?tab=external", to: "/console/library?view=identities" },
{ from: "/console/identity?tab=aliases", to: "/console/library?view=aliases" },
]; ];
/** 路由模块的 clientLoader:命中旧链接就跳转 */ /** 路由模块的 clientLoader:命中旧链接就跳转 */
+5 -148
View File
@@ -1,151 +1,8 @@
import { useQueryClient } from "@tanstack/react-query"; import { legacyRedirectLoader } from "./redirects.ts";
import { SCHEDULE_CHANGED_EVENT, type ScheduledJob, type ScheduleGroup } from "@umt/contracts";
import { AlertTriangle, CalendarClock, CircleCheck, LoaderCircle, Plus, RotateCw, XCircle } from "lucide-react";
import { useEffect, useRef, useState } from "react";
import { useScheduleBoard } from "~/api/schedules.ts";
import { EmptyState, ErrorState, LoadingState } from "~/components/console/empty-state.tsx";
import { PageHeader } from "~/components/console/page-header.tsx";
import { StatTile } from "~/components/console/stat-tile.tsx";
import { AgentCheckDialog } from "~/components/schedules/agent-check-dialog.tsx";
import { GROUP_LABEL, GROUP_ORDER } from "~/components/schedules/labels.ts";
import { RunsSheet } from "~/components/schedules/runs-sheet.tsx";
import { ScheduleCard } from "~/components/schedules/schedule-card.tsx";
import { Button } from "~/components/ui/button.tsx";
import { qk } from "~/lib/query-keys.ts";
import { useSse } from "~/lib/sse.ts";
export const meta = () => [{ title: "定时任务 · UHD 媒体自动化控制台" }]; // IA-3:定时任务看板成为任务页"计划"页签(/console/tasks?tab=plan)
export const clientLoader = legacyRedirectLoader;
/** 每秒一跳的当前时间(倒计时用) */ export default function LegacyRedirect() {
function useNow(ms = 1000) { return null;
const [now, setNow] = useState(() => Date.now());
useEffect(() => {
const t = setInterval(() => setNow(Date.now()), ms);
return () => clearInterval(t);
}, [ms]);
return now;
}
export default function SchedulesPage() {
const qc = useQueryClient();
const board = useScheduleBoard();
const now = useNow();
const [history, setHistory] = useState<ScheduledJob | null>(null);
const [editing, setEditing] = useState<{ job: ScheduledJob | null; key: number } | null>(null);
// SSE:调度器每次开始/结束一次运行都会发 schedule.changed;1 秒节流
const timer = useRef<ReturnType<typeof setTimeout> | null>(null);
useSse([SCHEDULE_CHANGED_EVENT], () => {
if (timer.current) return;
timer.current = setTimeout(() => {
timer.current = null;
qc.invalidateQueries({ queryKey: qk.all("schedules") });
}, 1000);
});
useEffect(
() => () => {
if (timer.current) clearTimeout(timer.current);
},
[],
);
const data = board.data;
const items = data?.items ?? [];
const byGroup = new Map<ScheduleGroup, ScheduledJob[]>();
for (const g of GROUP_ORDER) byGroup.set(g, []);
for (const j of items) byGroup.get(j.group)?.push(j);
const stats = data?.stats;
const val = (n: number | undefined) => (board.isPending ? "…" : board.isError ? "—" : (n ?? 0));
return (
<>
<PageHeader
title="定时任务"
description="周期任务与 Agent 巡检的开关、间隔和运行记录。"
actions={
<>
<Button
variant="outline"
size="sm"
onClick={() => qc.invalidateQueries({ queryKey: qk.all("schedules") })}
disabled={board.isFetching}
>
<RotateCw className={board.isFetching ? "animate-spin" : undefined} />
刷新
</Button>
<Button size="sm" onClick={() => setEditing({ job: null, key: Date.now() })}>
<Plus />
新建巡检
</Button>
</>
}
/>
<div className="mb-3 grid grid-cols-2 gap-2 lg:grid-cols-4">
<StatTile label="已启用" icon={CircleCheck} value={val(stats?.enabled)} />
<StatTile
label="上次失败"
icon={XCircle}
tone={(stats?.failed ?? 0) > 0 ? "destructive" : "neutral"}
value={val(stats?.failed)}
/>
<StatTile label="运行中" icon={LoaderCircle} value={val(stats?.running)} />
<StatTile label="全部" icon={CalendarClock} value={val(stats?.total)} />
</div>
{data && !data.schedulerOnline ? (
<p
role="status"
className="mb-4 flex items-center gap-2 rounded-tight border border-warning/30 bg-warning/10 px-3 py-2 text-caption text-warning"
>
<AlertTriangle className="h-4 w-4 shrink-0" />
调度器未在线,任务不会按时运行。
</p>
) : (
<div className="mb-4" />
)}
{board.isPending ? (
<LoadingState rows={6} />
) : board.isError ? (
<ErrorState error={board.error} onRetry={() => board.refetch()} />
) : items.length === 0 ? (
<EmptyState icon={CalendarClock} title="还没有定时任务" description="worker 启动后自动登记。" />
) : (
<div className="grid items-start gap-4 md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-5">
{GROUP_ORDER.map((g) => {
const jobs = byGroup.get(g) ?? [];
return (
<section key={g} aria-label={GROUP_LABEL[g]} className="grid min-w-0 gap-2.5">
<h2 className="flex items-baseline justify-between px-1 text-caption font-medium text-muted-foreground">
<span>{GROUP_LABEL[g]}</span>
<span className="tabular-nums">{jobs.length}</span>
</h2>
{jobs.length === 0 ? (
<p className="rounded-xl border border-dashed border-border/70 px-4 py-6 text-center text-meta text-muted-foreground">
{g === "agent" ? "还没有巡检。" : "还没有定时任务。"}
</p>
) : (
jobs.map((j) => (
<ScheduleCard
key={j.id}
job={j}
now={now}
onHistory={setHistory}
onEdit={(job) => setEditing({ job, key: Date.now() })}
/>
))
)}
</section>
);
})}
</div>
)}
<RunsSheet job={history} onClose={() => setHistory(null)} />
{editing ? (
<AgentCheckDialog key={editing.key} open job={editing.job} onOpenChange={(o) => !o && setEditing(null)} />
) : null}
</>
);
} }
+15 -5
View File
@@ -25,7 +25,8 @@ const STATIC_ROUTES = [
"/console", "/console",
"/console/inbox", "/console/inbox",
"/console/library", "/console/library",
"/console/identity", "/console/library?filter=unidentified",
"/console/library?view=identities",
"/console/organize", "/console/organize",
"/console/files", "/console/files",
"/console/files/trash", "/console/files/trash",
@@ -39,11 +40,13 @@ const STATIC_ROUTES = [
"/console/downloads", "/console/downloads",
"/console/downloads/plans", "/console/downloads/plans",
"/console/tasks", "/console/tasks",
"/console/tasks?tab=active",
"/console/tasks?tab=failed",
"/console/tasks?tab=plan",
"/console/agent", "/console/agent",
"/console/agent?mock=1", "/console/agent?mock=1",
"/console/engine",
"/console/audit", "/console/audit",
"/console/schedules", "/console/status",
"/console/settings", "/console/settings",
"/console/settings?tab=pi", "/console/settings?tab=pi",
// 设置各分区(hash 定位,IA-2) // 设置各分区(hash 定位,IA-2)
@@ -67,9 +70,9 @@ const DETAIL_ROUTES = [
{ route: "/console/sites/:id", list: "/api/v1/sites", after: "?tab=snapshots" }, { route: "/console/sites/:id", list: "/api/v1/sites", after: "?tab=snapshots" },
{ route: "/console/sites/:id", list: "/api/v1/sites", after: "?tab=accounts" }, { route: "/console/sites/:id", list: "/api/v1/sites", after: "?tab=accounts" },
{ route: "/console/downloads/:id", list: "/api/v1/download-tasks" }, { route: "/console/downloads/:id", list: "/api/v1/download-tasks" },
{ route: "/console/tasks/:id", list: "/api/v1/tasks" }, { route: "/console/tasks/:id", list: "/api/v1/engine/runs" },
{ route: "/console/tasks?run=:id", list: "/api/v1/engine/runs" },
{ route: "/console/agent/:id", list: "/api/v1/agent/runs", after: "?mock=0" }, { route: "/console/agent/:id", list: "/api/v1/agent/runs", after: "?mock=0" },
{ route: "/console/engine/:id", list: "/api/v1/engine/runs" },
]; ];
/** /**
@@ -86,6 +89,13 @@ const REDIRECT_ROUTES = [
{ from: "/console/sources?tab=snapshots&siteId=:id", to: "/console/sites/:id?tab=snapshots", list: "/api/v1/sites" }, { from: "/console/sources?tab=snapshots&siteId=:id", to: "/console/sites/:id?tab=snapshots", list: "/api/v1/sites" },
// 旧的下载详情地址:先查业务任务(404 属预期),再跳到下载详情 // 旧的下载详情地址:先查业务任务(404 属预期),再跳到下载详情
{ from: "/console/tasks/:id", to: "/console/downloads/:id", list: "/api/v1/download-tasks", expect404: true }, { from: "/console/tasks/:id", to: "/console/downloads/:id", list: "/api/v1/download-tasks", expect404: true },
// IA-3:引擎面板 / 定时任务 / 身份与元数据并入任务页与媒体概览
{ from: "/console/tasks?tab=business", to: "/console/tasks" },
{ from: "/console/engine", to: "/console/tasks" },
{ from: "/console/engine/:id", to: "/console/tasks?run=:id", list: "/api/v1/engine/runs" },
{ from: "/console/schedules", to: "/console/tasks?tab=plan" },
{ from: "/console/identity", to: "/console/library?filter=unidentified" },
{ from: "/console/identity?tab=external", to: "/console/library?view=identities" },
// 设置旧页签 ?tab= → 分区 hash(IA-2) // 设置旧页签 ?tab= → 分区 hash(IA-2)
{ from: "/console/settings?tab=pi", to: "/console/settings#agent" }, { from: "/console/settings?tab=pi", to: "/console/settings#agent" },
{ from: "/console/settings?tab=storage", to: "/console/settings#automation/cache" }, { from: "/console/settings?tab=storage", to: "/console/settings#automation/cache" },