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

@@ -22,7 +22,7 @@ export default function DownloadTaskPage() {
<Button asChild variant="ghost" size="sm">
<Link to={consolePath("downloads")}>
<ArrowLeft />
下载队列
下载面板
</Link>
</Button>
}
@@ -12,13 +12,14 @@ 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 { DownloadsTabs } from "~/components/downloads/downloads-tabs.tsx";
import { PRIORITY } from "~/components/library/labels.ts";
import { Button } from "~/components/ui/button.tsx";
import { relTime } from "~/components/workbench/release-fields.ts";
import { planReasonText } from "~/lib/labels.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;
@@ -77,7 +78,8 @@ export default function DownloadPlansPage() {
return (
<>
<PageHeader title="下载计划" description="候选被选中后生成计划,同时预留版本目标、空间与预算。" />
<PageHeader title="下载面板" description="候选被选中后生成计划,同时预留版本目标、空间与预算。" />
<DownloadsTabs />
<FilterBar onReset={f.active ? f.reset : undefined}>
<FilterSelect
label="状态"
+4 -2
View File
@@ -18,12 +18,13 @@ import {
PauseResume,
ProgressLine,
} from "~/components/downloads/download-detail.tsx";
import { DownloadsTabs } from "~/components/downloads/downloads-tabs.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 const meta = () => [{ title: "下载面板 · UHD 媒体自动化控制台" }];
export default function DownloadsPage() {
const f = useQueryState(["status", "managed"] as const);
@@ -89,7 +90,7 @@ export default function DownloadsPage() {
return (
<>
<PageHeader
title="下载队列"
title="下载面板"
description="阈值暂停不能手动绕过;无进展只记录,不自动换源。"
actions={
<Button variant="outline" size="sm" onClick={() => void qc.invalidateQueries({ queryKey: ["downloads"] })}>
@@ -98,6 +99,7 @@ export default function DownloadsPage() {
</Button>
}
/>
<DownloadsTabs />
<CacheVolumes />
<FilterBar onReset={f.active ? f.reset : undefined}>
<FilterSelect
+5 -255
View File
@@ -1,258 +1,8 @@
import type { EngineStepAttempt } from "@umt/contracts";
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";
import { legacyRedirectLoader } from "./redirects.ts";
export const meta = () => [{ title: "运行详情 · 引擎面板" }];
// IA-3:引擎运行详情改为任务页抽屉(/console/tasks?run=)
export const clientLoader = legacyRedirectLoader;
const KIND_LABEL: Record<string, string> = {
function: "函数",
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>
</>
);
export default function LegacyRedirect() {
return null;
}
+5 -222
View File
@@ -1,225 +1,8 @@
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 { 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";
import { legacyRedirectLoader } from "./redirects.ts";
export const meta = () => [{ title: "引擎面板 · UHD 媒体自动化控制台" }];
// IA-3:引擎面板并入任务页
export const clientLoader = legacyRedirectLoader;
const STAT_ORDER = [
{ status: "pending", label: "待执行", icon: Clock, tone: "neutral" },
{ 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>,
},
]}
/>
</>
);
export default function LegacyRedirect() {
return null;
}
+5 -320
View File
@@ -1,323 +1,8 @@
import type {
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";
import { legacyRedirectLoader } from "./redirects.ts";
// 身份与元数据(REQ §7.2、§7.5):待识别资源、外部身份映射与修订、别名。
// 待识别资源只读;选候选、忽略在待处理里做(docs/design/console-ia.md §3.1 判定只在待处理)。
// IA-3:"身份与元数据"取消,待识别 / 外部身份 / 别名并入媒体概览(/console/library?filter=unidentified 等)
export const clientLoader = legacyRedirectLoader;
export const meta = () => [{ title: "身份与元数据 · UHD 媒体自动化控制台" }];
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>
</>
);
export default function IdentityRedirect() {
return null;
}
+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 { 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 { 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 { ThemeToggle } from "~/components/theme-toggle.tsx";
import { Button } from "~/components/ui/button.tsx";
@@ -18,31 +18,10 @@ 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);
@@ -102,7 +81,6 @@ function ExpandedNav({ groups, onNavigate }: { groups: NavGroup[]; onNavigate?:
>
<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>
);
})}
@@ -117,7 +95,6 @@ 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 />
@@ -126,12 +103,11 @@ function CollapsedNav() {
{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}
title={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",
@@ -141,9 +117,6 @@ function CollapsedNav() {
)}
>
<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>
);
})}
@@ -200,7 +173,7 @@ function ConsoleShell({ session }: { session: SessionInfo }) {
const location = useLocation();
const [collapsed, setCollapsed] = useState(false);
const [sheetOpen, setSheetOpen] = useState(false);
const activeLabel = findNavItem(location.pathname)?.label ?? PORTAL_NAME;
const activeLabel = pageTitle(location.pathname) ?? PORTAL_NAME;
return (
<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 className="ml-auto flex items-center gap-2">
{/* 桌面有侧栏主入口与右下角悬浮按钮,顶栏小按钮只在窄屏保留 */}
<InboxBell />
<AgentDrawerTrigger className="xl:hidden" />
<ThemeToggle />
<AccountMenu session={session} />
+64 -6
View File
@@ -1,5 +1,5 @@
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 { Link, useNavigate, useSearchParams } from "react-router";
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 { PageHeader } from "~/components/console/page-header.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 { CoverPlaceholder, relTime, Tone } from "~/components/library/parts.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 }[] = [
{ 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() {
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 navigate = useNavigate();
const kind = (sp.get("kind") ?? "") as MediaKind | "";
@@ -121,16 +182,13 @@ export default function LibraryPage() {
return (
<>
<PageHeader
title="媒体库"
<FilterBar
actions={
<Button variant="outline" size="sm" onClick={() => list.refetch()} disabled={list.isFetching}>
<RotateCw className={list.isFetching ? "animate-spin" : undefined} />
刷新
</Button>
}
/>
<FilterBar
search={{ value: q, onChange: (v) => set("q", v), placeholder: "标题 / 原名 / 别名" }}
onReset={filtered ? () => setSp(new URLSearchParams(), { replace: true }) : undefined}
>
@@ -149,7 +207,7 @@ export default function LibraryPage() {
filtered
? { title: "没有符合条件的作品", description: "换个关键字或清除筛选。", icon: LibraryIcon }
: {
title: "媒体库为空",
title: "还没有作品",
description: "扫描库根或新建订阅后,作品会出现在这里。",
icon: LibraryIcon,
action: (
+29 -5
View File
@@ -1,23 +1,39 @@
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。
// 设置页的 ?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 {
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);
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 (tab === "downloads") return withRest("/console/downloads");
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;
}
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=plans", to: "/console/downloads/plans" },
{ 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/sources?tab=snapshots", to: "/console/sources" },
{ 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:命中旧链接就跳转 */
+5 -148
View File
@@ -1,151 +1,8 @@
import { useQueryClient } from "@tanstack/react-query";
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";
import { legacyRedirectLoader } from "./redirects.ts";
export const meta = () => [{ title: "定时任务 · UHD 媒体自动化控制台" }];
// IA-3:定时任务看板成为任务页"计划"页签(/console/tasks?tab=plan)
export const clientLoader = legacyRedirectLoader;
/** 每秒一跳的当前时间(倒计时用) */
function useNow(ms = 1000) {
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}
</>
);
export default function LegacyRedirect() {
return null;
}