feat(web): regroup console nav into 7 groups, split downloads/plans/tasks, add legacy redirects
- Sidebar: 概览/资源/订阅/下载/整理/Agent/系统, 18 items (+ 定时任务); single active item via findNavItem; 待处理 badge; collapsed rail groups; mobile drawer shares NAV_GROUPS. - New pages: /downloads (queue + cache watermark header), /downloads/plans, /downloads/:id, /tasks (business tasks only) + /tasks/:id detail, /rules. - Legacy links: ?tab= on tasks/subscriptions/sources redirect via clientLoader; /tasks/:downloadId falls back to /downloads/:id. - List filters in URL query; settingsPath() helper for settings deep links. - Copy per glossary (待处理, 收录策略, 引擎面板, 文件管理, 版本目标). Co-Authored-By: Claude Opus 5.5 <[email protected]>
This commit is contained in:
rootandClaude Opus 5.5 committed
1 parent
5843527317
commit
909cd2ad49
31 files changed
+1247
-609
No files matched your search
@@ -0,0 +1,41 @@
|
||||
import { ArrowLeft } from "lucide-react";
|
||||
import { Link, useParams } from "react-router";
|
||||
import { useDownloadTask } from "~/api/downloads.ts";
|
||||
import { ErrorState, LoadingState } from "~/components/console/empty-state.tsx";
|
||||
import { consolePath } from "~/components/console/nav.ts";
|
||||
import { PageHeader } from "~/components/console/page-header.tsx";
|
||||
import { DownloadDetail } from "~/components/downloads/download-detail.tsx";
|
||||
import { Button } from "~/components/ui/button.tsx";
|
||||
|
||||
export const meta = () => [{ title: "下载任务 · UHD 媒体自动化控制台" }];
|
||||
|
||||
export default function DownloadTaskPage() {
|
||||
const { id = "" } = useParams();
|
||||
const task = useDownloadTask(id);
|
||||
const t = task.data;
|
||||
return (
|
||||
<>
|
||||
<PageHeader
|
||||
title={t?.name ?? "下载任务"}
|
||||
className="[&_h1]:break-all"
|
||||
actions={
|
||||
<Button asChild variant="ghost" size="sm">
|
||||
<Link to={consolePath("downloads")}>
|
||||
<ArrowLeft />
|
||||
下载队列
|
||||
</Link>
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
<div className="pg-slab rounded-xl p-4 md:p-5">
|
||||
{task.isPending ? (
|
||||
<LoadingState rows={5} />
|
||||
) : task.error ? (
|
||||
<ErrorState plain error={task.error} onRetry={() => void task.refetch()} />
|
||||
) : (
|
||||
<DownloadDetail task={task.data} />
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,146 @@
|
||||
import type { AcquisitionPlan, PlanStatus } from "@umt/contracts";
|
||||
import { ClipboardList } from "lucide-react";
|
||||
import { useState } from "react";
|
||||
import { Link } from "react-router";
|
||||
import { PLAN_STATUS_LABEL, useDownloadTasks, usePlans } from "~/api/downloads.ts";
|
||||
import { type DataColumn, DataTable } from "~/components/console/data-table.tsx";
|
||||
import { DetailSection, DetailSheet } from "~/components/console/detail-sheet.tsx";
|
||||
import { FilterBar, FilterSelect } from "~/components/console/filter-bar.tsx";
|
||||
import { JsonView } from "~/components/console/json-view.tsx";
|
||||
import { KvList } from "~/components/console/kv-list.tsx";
|
||||
import { consolePath } from "~/components/console/nav.ts";
|
||||
import { PageHeader } from "~/components/console/page-header.tsx";
|
||||
import { StatusBadge } from "~/components/console/status-badge.tsx";
|
||||
import { useQueryState } from "~/components/console/use-query-state.ts";
|
||||
import { Button } from "~/components/ui/button.tsx";
|
||||
import { relTime } from "~/components/workbench/release-fields.ts";
|
||||
import { formatBytes, formatDateTime } from "~/lib/utils.ts";
|
||||
|
||||
export const meta = () => [{ title: "下载计划 · UHD 媒体自动化控制台" }];
|
||||
|
||||
const PURPOSE = { fill: "补缺", upgrade: "升级", replace_source: "换源" } as const;
|
||||
|
||||
const planTone = (s: PlanStatus) =>
|
||||
s === "failed" ? "destructive" : s === "completed" ? "success" : s === "expired" ? "warning" : "neutral";
|
||||
|
||||
export default function DownloadPlansPage() {
|
||||
const f = useQueryState(["status"] as const);
|
||||
const [openPlan, setOpenPlan] = useState<AcquisitionPlan | null>(null);
|
||||
const plans = usePlans((f.values.status || undefined) as PlanStatus | undefined);
|
||||
// 计划 → 下载任务:同一列表按 acquisitionPlanId 对上
|
||||
const downloads = useDownloadTasks({});
|
||||
const rows = plans.data?.pages.flatMap((p) => p.items);
|
||||
const linkedDownload = openPlan
|
||||
? downloads.data?.pages.flatMap((p) => p.items).find((t) => t.acquisitionPlanId === openPlan.id)
|
||||
: undefined;
|
||||
|
||||
const columns: DataColumn<AcquisitionPlan>[] = [
|
||||
{
|
||||
key: "purpose",
|
||||
header: "计划",
|
||||
cell: (p) => (
|
||||
<div className="min-w-0">
|
||||
<p className="text-foreground">
|
||||
{PURPOSE[p.purpose]} · 优先级 {p.priority}
|
||||
</p>
|
||||
<p className="truncate font-mono text-meta text-muted-foreground">{p.id.slice(0, 8)}</p>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: "status",
|
||||
header: "状态",
|
||||
cell: (p) => <StatusBadge tone={planTone(p.status)}>{PLAN_STATUS_LABEL[p.status]}</StatusBadge>,
|
||||
},
|
||||
{
|
||||
key: "reserved",
|
||||
header: "预留空间",
|
||||
hideBelow: "md",
|
||||
align: "right",
|
||||
cell: (p) => <span className="tabular-nums">{formatBytes(p.reservedBytes, 1)}</span>,
|
||||
},
|
||||
{
|
||||
key: "reason",
|
||||
header: "说明",
|
||||
hideBelow: "lg",
|
||||
cell: (p) => <span className="line-clamp-1 text-muted-foreground">{p.statusReason ?? "—"}</span>,
|
||||
},
|
||||
{
|
||||
key: "at",
|
||||
header: "创建",
|
||||
hideBelow: "sm",
|
||||
cell: (p) => <span className="whitespace-nowrap text-muted-foreground">{relTime(p.createdAt)}</span>,
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<>
|
||||
<PageHeader title="下载计划" description="候选被选中后生成计划,同时预留版本目标、空间与预算。" />
|
||||
<FilterBar onReset={f.active ? f.reset : undefined}>
|
||||
<FilterSelect
|
||||
label="状态"
|
||||
value={f.values.status}
|
||||
onChange={(v) => f.set("status", v)}
|
||||
options={Object.entries(PLAN_STATUS_LABEL).map(([value, label]) => ({ value, label }))}
|
||||
/>
|
||||
</FilterBar>
|
||||
<DataTable
|
||||
columns={columns}
|
||||
rows={rows}
|
||||
rowKey={(p) => p.id}
|
||||
loading={plans.isPending}
|
||||
error={plans.error}
|
||||
onRetry={() => void plans.refetch()}
|
||||
onRowClick={setOpenPlan}
|
||||
selectedKey={openPlan?.id}
|
||||
hasMore={plans.hasNextPage}
|
||||
onLoadMore={() => void plans.fetchNextPage()}
|
||||
loadingMore={plans.isFetchingNextPage}
|
||||
empty={{
|
||||
icon: ClipboardList,
|
||||
title: f.active ? "没有符合筛选的下载计划" : "还没有下载计划",
|
||||
description: f.active ? undefined : "候选被选中后出现在这里。",
|
||||
}}
|
||||
/>
|
||||
|
||||
<DetailSheet
|
||||
open={!!openPlan}
|
||||
onOpenChange={(o) => !o && setOpenPlan(null)}
|
||||
title={openPlan ? `${PURPOSE[openPlan.purpose]}计划` : ""}
|
||||
description={openPlan?.statusReason ?? undefined}
|
||||
footer={
|
||||
linkedDownload ? (
|
||||
<Button asChild size="sm">
|
||||
<Link to={consolePath("downloads", linkedDownload.id)}>查看下载任务</Link>
|
||||
</Button>
|
||||
) : null
|
||||
}
|
||||
>
|
||||
{openPlan ? (
|
||||
<>
|
||||
<KvList
|
||||
items={[
|
||||
{
|
||||
label: "状态",
|
||||
value: (
|
||||
<StatusBadge tone={planTone(openPlan.status)}>{PLAN_STATUS_LABEL[openPlan.status]}</StatusBadge>
|
||||
),
|
||||
},
|
||||
{ label: "优先级", value: openPlan.priority },
|
||||
{ label: "预留空间", value: formatBytes(openPlan.reservedBytes, 1) },
|
||||
{ label: "过期于", value: formatDateTime(openPlan.expiresAt) },
|
||||
{ label: "创建", value: formatDateTime(openPlan.createdAt) },
|
||||
{ label: "版本目标", value: openPlan.slotId, mono: true },
|
||||
{ label: "资源", value: openPlan.sourceReleaseId, mono: true, wide: true },
|
||||
]}
|
||||
/>
|
||||
<DetailSection title="评估依据">
|
||||
<JsonView value={openPlan.evaluation} />
|
||||
</DetailSection>
|
||||
<JsonView label="预算预留" value={openPlan.budgetReservation} />
|
||||
</>
|
||||
) : null}
|
||||
</DetailSheet>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,155 @@
|
||||
import { useQueryClient } from "@tanstack/react-query";
|
||||
import type { DownloadStatus, DownloadTask } from "@umt/contracts";
|
||||
import { EventType } from "@umt/contracts";
|
||||
import { Download, RefreshCw } from "lucide-react";
|
||||
import { useState } from "react";
|
||||
import { Link } from "react-router";
|
||||
import { DOWNLOAD_STATUS_LABEL, useDownloaderNames, useDownloadTasks } from "~/api/downloads.ts";
|
||||
import { type DataColumn, DataTable } from "~/components/console/data-table.tsx";
|
||||
import { DetailSheet } from "~/components/console/detail-sheet.tsx";
|
||||
import { FilterBar, FilterSelect } from "~/components/console/filter-bar.tsx";
|
||||
import { consolePath } from "~/components/console/nav.ts";
|
||||
import { PageHeader } from "~/components/console/page-header.tsx";
|
||||
import { useQueryState } from "~/components/console/use-query-state.ts";
|
||||
import { CacheVolumes } from "~/components/downloads/cache-volumes.tsx";
|
||||
import {
|
||||
DownloadDetail,
|
||||
DownloadStatusBadges,
|
||||
PauseResume,
|
||||
ProgressLine,
|
||||
} from "~/components/downloads/download-detail.tsx";
|
||||
import { Button } from "~/components/ui/button.tsx";
|
||||
import { relTime } from "~/components/workbench/release-fields.ts";
|
||||
import { useSse } from "~/lib/sse.ts";
|
||||
import { formatBytes } from "~/lib/utils.ts";
|
||||
|
||||
export const meta = () => [{ title: "下载队列 · UHD 媒体自动化控制台" }];
|
||||
|
||||
export default function DownloadsPage() {
|
||||
const f = useQueryState(["status", "managed"] as const);
|
||||
const [openId, setOpenId] = useState<string | null>(null);
|
||||
const qc = useQueryClient();
|
||||
const downloads = useDownloadTasks({
|
||||
status: (f.values.status || undefined) as DownloadStatus | undefined,
|
||||
managed: (f.values.managed || undefined) as "true" | "false" | undefined,
|
||||
});
|
||||
const names = useDownloaderNames();
|
||||
|
||||
// 下载进度/状态、阈值事件到达时刷新列表(SSE 为主,轮询兜底)
|
||||
useSse(
|
||||
[
|
||||
EventType.downloadProgress,
|
||||
EventType.downloadStatusChanged,
|
||||
EventType.downloadSubmitted,
|
||||
EventType.downloadThreshold,
|
||||
],
|
||||
() => void qc.invalidateQueries({ queryKey: ["downloads"] }),
|
||||
);
|
||||
|
||||
const rows = downloads.data?.pages.flatMap((p) => p.items);
|
||||
const open = rows?.find((t) => t.id === openId) ?? null;
|
||||
|
||||
const columns: DataColumn<DownloadTask>[] = [
|
||||
{
|
||||
key: "name",
|
||||
header: "下载任务",
|
||||
cell: (t) => (
|
||||
<div className="min-w-0 max-w-sm">
|
||||
<p className="line-clamp-2 break-all text-foreground">{t.name}</p>
|
||||
<p className="mt-0.5 truncate text-meta text-muted-foreground">
|
||||
{names.data?.get(t.instanceId) ?? "下载器"} · {t.tags.join(", ") || "无标签"}
|
||||
</p>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{ key: "status", header: "状态", cell: (t) => <DownloadStatusBadges t={t} /> },
|
||||
{ key: "progress", header: "进度", hideBelow: "sm", cell: (t) => <ProgressLine t={t} /> },
|
||||
{
|
||||
key: "size",
|
||||
header: "大小",
|
||||
hideBelow: "lg",
|
||||
align: "right",
|
||||
cell: (t) => (
|
||||
<span className="whitespace-nowrap tabular-nums">
|
||||
{t.sizeBytes === null ? "未知" : formatBytes(t.sizeBytes, 1)}
|
||||
</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: "at",
|
||||
header: "更新",
|
||||
hideBelow: "md",
|
||||
cell: (t) => (
|
||||
<span className="whitespace-nowrap text-muted-foreground">{relTime(t.lastSyncedAt ?? t.updatedAt)}</span>
|
||||
),
|
||||
},
|
||||
{ key: "ops", header: "", align: "right", cell: (t) => <PauseResume t={t} size="xs" /> },
|
||||
];
|
||||
|
||||
return (
|
||||
<>
|
||||
<PageHeader
|
||||
title="下载队列"
|
||||
description="阈值暂停不能手动绕过;无进展只记录,不自动换源。"
|
||||
actions={
|
||||
<Button variant="outline" size="sm" onClick={() => void qc.invalidateQueries({ queryKey: ["downloads"] })}>
|
||||
<RefreshCw className={downloads.isFetching ? "animate-spin" : undefined} />
|
||||
刷新
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
<CacheVolumes />
|
||||
<FilterBar onReset={f.active ? f.reset : undefined}>
|
||||
<FilterSelect
|
||||
label="状态"
|
||||
value={f.values.status}
|
||||
onChange={(v) => f.set("status", v)}
|
||||
options={Object.entries(DOWNLOAD_STATUS_LABEL).map(([value, label]) => ({ value, label }))}
|
||||
/>
|
||||
<FilterSelect
|
||||
label="纳管"
|
||||
value={f.values.managed}
|
||||
onChange={(v) => f.set("managed", v)}
|
||||
options={[
|
||||
{ value: "true", label: "纳管任务" },
|
||||
{ value: "false", label: "未纳管" },
|
||||
]}
|
||||
/>
|
||||
</FilterBar>
|
||||
<DataTable
|
||||
columns={columns}
|
||||
rows={rows}
|
||||
rowKey={(t) => t.id}
|
||||
loading={downloads.isPending}
|
||||
error={downloads.error}
|
||||
onRetry={() => void downloads.refetch()}
|
||||
onRowClick={(t) => setOpenId(t.id)}
|
||||
selectedKey={openId}
|
||||
hasMore={downloads.hasNextPage}
|
||||
onLoadMore={() => void downloads.fetchNextPage()}
|
||||
loadingMore={downloads.isFetchingNextPage}
|
||||
empty={{
|
||||
icon: Download,
|
||||
title: f.active ? "没有符合筛选的下载任务" : "还没有下载任务",
|
||||
description: f.active ? undefined : "自动收录或在站点工作台下载后出现在这里。",
|
||||
}}
|
||||
/>
|
||||
|
||||
<DetailSheet
|
||||
open={!!open}
|
||||
onOpenChange={(o) => !o && setOpenId(null)}
|
||||
width="lg"
|
||||
title={open?.name ?? ""}
|
||||
footer={
|
||||
open ? (
|
||||
<Button asChild variant="outline" size="sm">
|
||||
<Link to={consolePath("downloads", open.id)}>在独立页面打开</Link>
|
||||
</Button>
|
||||
) : null
|
||||
}
|
||||
>
|
||||
{open ? <DownloadDetail task={open} /> : null}
|
||||
</DetailSheet>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -17,7 +17,7 @@ import { errorMessage } from "~/lib/api.ts";
|
||||
import { engineRunLabel, formatDuration, formatRelative, spanSec as runDurationSec } from "~/lib/labels.ts";
|
||||
import { formatDateTime } from "~/lib/utils.ts";
|
||||
|
||||
export const meta = () => [{ title: "运行详情 · 工作流引擎" }];
|
||||
export const meta = () => [{ title: "运行详情 · 引擎面板" }];
|
||||
|
||||
const KIND_LABEL: Record<string, string> = {
|
||||
function: "函数",
|
||||
|
||||
@@ -2,7 +2,7 @@ import { useQueryClient } from "@tanstack/react-query";
|
||||
import type { EngineRun } from "@umt/contracts";
|
||||
import { Ban, CheckCircle2, Clock, Cpu, LoaderCircle, RotateCw, XCircle } from "lucide-react";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { useNavigate, useSearchParams } from "react-router";
|
||||
import { Link, useNavigate, useSearchParams } from "react-router";
|
||||
import { useEngineRuns, useEngineStats } from "~/api/engine.ts";
|
||||
import { DataTable } from "~/components/console/data-table.tsx";
|
||||
import { FilterBar, FilterSelect } from "~/components/console/filter-bar.tsx";
|
||||
@@ -15,7 +15,7 @@ import { engineRunLabel, formatDuration, formatRelative, spanSec as runDurationS
|
||||
import { qk } from "~/lib/query-keys.ts";
|
||||
import { useSse } from "~/lib/sse.ts";
|
||||
|
||||
export const meta = () => [{ title: "工作流引擎 · UHD 媒体自动化控制台" }];
|
||||
export const meta = () => [{ title: "引擎面板 · UHD 媒体自动化控制台" }];
|
||||
|
||||
const STAT_ORDER = [
|
||||
{ status: "pending", label: "待执行", icon: Clock, tone: "neutral" },
|
||||
@@ -95,8 +95,15 @@ export default function EnginePage() {
|
||||
return (
|
||||
<>
|
||||
<PageHeader
|
||||
title="工作流引擎"
|
||||
description="引擎的运行记录，只读。业务进度看「下载与任务」。"
|
||||
title="引擎面板"
|
||||
description={
|
||||
<>
|
||||
排查用,只读。业务进度看
|
||||
<Link to={consolePath("tasks")} className="mx-1 underline underline-offset-4">
|
||||
业务任务
|
||||
</Link>
|
||||
</>
|
||||
}
|
||||
actions={
|
||||
<Button
|
||||
variant="outline"
|
||||
|
||||
@@ -442,7 +442,7 @@ export default function FilesPage() {
|
||||
plain
|
||||
icon={FolderTree}
|
||||
title="还没有库根"
|
||||
description="在系统设置里登记库根或下载器路径映射。"
|
||||
description="在设置里登记库根或下载器路径映射。"
|
||||
className="px-2 py-8"
|
||||
/>
|
||||
) : null}
|
||||
@@ -614,7 +614,7 @@ export default function FilesPage() {
|
||||
return (
|
||||
<>
|
||||
<PageHeader
|
||||
title="文件"
|
||||
title="文件管理"
|
||||
description="已登记的库根与下载目录。删除先进回收站,改名同步更新资产。"
|
||||
actions={
|
||||
<>
|
||||
|
||||
@@ -230,7 +230,7 @@ function CurrentWork({ w }: { w: Dashboard["currentWork"] }) {
|
||||
];
|
||||
const idle = counts.every((c) => c.v === 0) && w.items.length === 0 && w.agentRuns.length === 0;
|
||||
return (
|
||||
<Section title="当前工作" icon={Activity} to={consolePath("tasks")}>
|
||||
<Section title="当前工作" icon={Activity} to={consolePath("downloads")}>
|
||||
<div className="mb-2 flex flex-wrap gap-x-4 gap-y-1 text-meta text-muted-foreground">
|
||||
{counts.map((c) => (
|
||||
<span key={c.label}>
|
||||
@@ -246,7 +246,10 @@ function CurrentWork({ w }: { w: Dashboard["currentWork"] }) {
|
||||
const s = downloadLabel(it.status);
|
||||
return (
|
||||
<Row key={it.downloadTaskId}>
|
||||
<Link to={consolePath("tasks", it.downloadTaskId)} className="min-w-0 flex-1 truncate hover:underline">
|
||||
<Link
|
||||
to={consolePath("downloads", it.downloadTaskId)}
|
||||
className="min-w-0 flex-1 truncate hover:underline"
|
||||
>
|
||||
{it.name}
|
||||
</Link>
|
||||
<span className="shrink-0 text-meta text-muted-foreground tabular-nums">
|
||||
@@ -300,7 +303,7 @@ function NeedsAttention({ n }: { n: Dashboard["needsAttention"] }) {
|
||||
|
||||
function CacheSection({ c }: { c: Dashboard["cache"] }) {
|
||||
return (
|
||||
<Section title="缓存与保留" icon={HardDrive} to={consolePath("settings")}>
|
||||
<Section title="缓存水位" icon={HardDrive} to={consolePath("downloads")}>
|
||||
{c.volumes.length === 0 ? (
|
||||
<EmptyState
|
||||
plain
|
||||
@@ -402,7 +405,7 @@ function SourcesSection({ s }: { s: Dashboard["sources"] }) {
|
||||
plain
|
||||
icon={Radio}
|
||||
title="还没有来源"
|
||||
description="在系统设置或来源页登记站点、Feed 与实例。"
|
||||
description="在站点工作台登记站点,在来源健康新建 Feed。"
|
||||
className="py-6"
|
||||
/>
|
||||
) : (
|
||||
|
||||
@@ -21,7 +21,7 @@ import { errorMessage } from "~/lib/api.ts";
|
||||
import { useSse, useSseStatus } from "~/lib/sse.ts";
|
||||
import { formatDateTime } from "~/lib/utils.ts";
|
||||
|
||||
// 待处理中心(REQ §13.1):按作品与问题类型合并;每项给证据、建议、影响范围与预览;
|
||||
// 待处理(REQ §13.1):按作品与问题类型合并;每项给证据、建议、影响范围与预览;
|
||||
// 处理选项来自后端 decision.options;SSE 收到 decision.* 事件即刷新。
|
||||
|
||||
const OPEN: DecisionStatus[] = ["open", "investigating", "awaiting_user"];
|
||||
@@ -276,7 +276,7 @@ export default function InboxPage() {
|
||||
return (
|
||||
<>
|
||||
<PageHeader
|
||||
title="待处理中心"
|
||||
title="待处理"
|
||||
description="Agent 调查和重试后仍未解决的事项,按作品和问题类型合并"
|
||||
actions={
|
||||
<>
|
||||
|
||||
@@ -1,13 +1,14 @@
|
||||
import type { SessionInfo } from "@umt/contracts";
|
||||
import { ChevronLeft, ChevronRight, Clapperboard, LoaderCircle, Menu } from "lucide-react";
|
||||
import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
|
||||
import { Link, NavLink, Outlet, useLocation } from "react-router";
|
||||
import { Link, Outlet, useLocation } from "react-router";
|
||||
import { useSession } from "~/api/auth.ts";
|
||||
import { useDecisionSummary } from "~/api/decisions.ts";
|
||||
import { AgentDrawer, AgentDrawerTrigger } from "~/components/agent/agent-drawer.tsx";
|
||||
import { AccountMenu } from "~/components/console/account-menu.tsx";
|
||||
import { AgentLauncher, AgentNavEntry } from "~/components/console/agent-launcher.tsx";
|
||||
import { ErrorState } from "~/components/console/empty-state.tsx";
|
||||
import { CONSOLE_BASE, findNavItem, NAV_GROUPS, NAV_ITEMS, type NavGroup } from "~/components/console/nav.ts";
|
||||
import { findNavItem, NAV_GROUPS, type NavGroup, type NavItem } from "~/components/console/nav.ts";
|
||||
import PrismLeak from "~/components/prism-leak.tsx";
|
||||
import { ThemeToggle } from "~/components/theme-toggle.tsx";
|
||||
import { Button } from "~/components/ui/button.tsx";
|
||||
@@ -17,9 +18,31 @@ import { cn } from "~/lib/utils.ts";
|
||||
|
||||
const PORTAL_NAME = "媒体自动化";
|
||||
|
||||
/** 侧栏角标:待处理未决数 */
|
||||
function useNavBadges(): Record<NonNullable<NavItem["badge"]>, number> {
|
||||
const summary = useDecisionSummary();
|
||||
return { decisions: summary.data?.total ?? 0 };
|
||||
}
|
||||
|
||||
function NavBadge({ n, className }: { n: number; className?: string }) {
|
||||
if (!n) return null;
|
||||
return (
|
||||
<span
|
||||
className={cn(
|
||||
"min-w-5 rounded-full bg-warning/15 px-1.5 text-center text-micro leading-5 font-semibold text-warning tabular-nums",
|
||||
className,
|
||||
)}
|
||||
>
|
||||
{n > 99 ? "99+" : n}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
// ─── 展开态导航:选中项由一枚玻璃滑块(seg-thumb)滑到激活链接背后 ───
|
||||
function ExpandedNav({ groups, onNavigate }: { groups: NavGroup[]; onNavigate?: () => void }) {
|
||||
const location = useLocation();
|
||||
const activeTo = findNavItem(location.pathname)?.to;
|
||||
const badges = useNavBadges();
|
||||
const navRef = useRef<HTMLElement>(null);
|
||||
const [pill, setPill] = useState<{ x: number; y: number; w: number; h: number } | null>(null);
|
||||
|
||||
@@ -62,29 +85,27 @@ function ExpandedNav({ groups, onNavigate }: { groups: NavGroup[]; onNavigate?:
|
||||
{group.title}
|
||||
</p>
|
||||
<div className="space-y-0.5">
|
||||
{group.items.map((item) => (
|
||||
<NavLink
|
||||
key={item.to}
|
||||
to={item.to}
|
||||
end={item.to === CONSOLE_BASE}
|
||||
onClick={onNavigate}
|
||||
className={({ isActive }) =>
|
||||
cn(
|
||||
{group.items.map((item) => {
|
||||
const active = item.to === activeTo;
|
||||
return (
|
||||
<Link
|
||||
key={item.to}
|
||||
to={item.to}
|
||||
onClick={onNavigate}
|
||||
aria-current={active ? "page" : undefined}
|
||||
className={cn(
|
||||
"flex w-full items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-colors duration-base",
|
||||
isActive
|
||||
active
|
||||
? "text-foreground"
|
||||
: "text-muted-foreground hover:bg-foreground/[0.04] hover:text-foreground",
|
||||
)
|
||||
}
|
||||
>
|
||||
{({ isActive }) => (
|
||||
<>
|
||||
<item.icon className={cn("h-4 w-4 shrink-0", isActive && "text-primary")} />
|
||||
<span className="flex-1 truncate">{item.label}</span>
|
||||
</>
|
||||
)}
|
||||
</NavLink>
|
||||
))}
|
||||
)}
|
||||
>
|
||||
<item.icon className={cn("h-4 w-4 shrink-0", active && "text-primary")} />
|
||||
<span className="flex-1 truncate">{item.label}</span>
|
||||
{item.badge ? <NavBadge n={badges[item.badge]} /> : null}
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
@@ -92,28 +113,41 @@ function ExpandedNav({ groups, onNavigate }: { groups: NavGroup[]; onNavigate?:
|
||||
);
|
||||
}
|
||||
|
||||
// ─── 折叠态:只显示图标 ───
|
||||
// ─── 折叠态:只显示图标,组间细线分隔 ───
|
||||
function CollapsedNav() {
|
||||
const location = useLocation();
|
||||
const activeTo = findNavItem(location.pathname)?.to;
|
||||
const badges = useNavBadges();
|
||||
return (
|
||||
<nav className="flex flex-1 flex-col items-center gap-1 overflow-y-auto py-4">
|
||||
<AgentNavEntry collapsed />
|
||||
{NAV_ITEMS.map((item) => (
|
||||
<NavLink
|
||||
key={item.to}
|
||||
to={item.to}
|
||||
end={item.to === CONSOLE_BASE}
|
||||
title={item.label}
|
||||
className={({ isActive }) =>
|
||||
cn(
|
||||
"flex h-10 w-10 items-center justify-center rounded-xl transition-colors duration-micro",
|
||||
isActive
|
||||
? "seg-thumb text-primary"
|
||||
: "text-muted-foreground hover:bg-foreground/[0.04] hover:text-foreground",
|
||||
)
|
||||
}
|
||||
>
|
||||
<item.icon className="h-[18px] w-[18px]" />
|
||||
</NavLink>
|
||||
{NAV_GROUPS.map((group, gi) => (
|
||||
<div key={group.title} className="flex flex-col items-center gap-1">
|
||||
{gi > 0 ? <span aria-hidden className="my-1 h-px w-6 bg-border" /> : null}
|
||||
{group.items.map((item) => {
|
||||
const active = item.to === activeTo;
|
||||
const n = item.badge ? badges[item.badge] : 0;
|
||||
return (
|
||||
<Link
|
||||
key={item.to}
|
||||
to={item.to}
|
||||
title={n ? `${item.label}(${n})` : item.label}
|
||||
aria-current={active ? "page" : undefined}
|
||||
className={cn(
|
||||
"relative flex h-10 w-10 items-center justify-center rounded-xl transition-colors duration-micro",
|
||||
active
|
||||
? "seg-thumb text-primary"
|
||||
: "text-muted-foreground hover:bg-foreground/[0.04] hover:text-foreground",
|
||||
)}
|
||||
>
|
||||
<item.icon className="h-[18px] w-[18px]" />
|
||||
{n ? (
|
||||
<span aria-hidden className="absolute top-1.5 right-1.5 h-1.5 w-1.5 rounded-full bg-warning" />
|
||||
) : null}
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
))}
|
||||
</nav>
|
||||
);
|
||||
|
||||
@@ -482,7 +482,7 @@ function DownloadsPanel({ detail }: { detail: LibraryDetail }) {
|
||||
cell: (d) => (
|
||||
<div className="min-w-0">
|
||||
<Link
|
||||
to={consolePath("tasks", d.downloadTask.id)}
|
||||
to={consolePath("downloads", d.downloadTask.id)}
|
||||
className="block max-w-[14rem] truncate font-mono text-caption text-foreground hover:underline sm:max-w-md"
|
||||
title={d.downloadTask.name}
|
||||
>
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import type { PreferenceKind, PreferenceSuppression, PreferenceTag } from "@umt/contracts";
|
||||
import { Ban, History, Plus, ShieldOff, Tags } from "lucide-react";
|
||||
import { Ban, History, ListChecks, Plus, ShieldOff, Tags } from "lucide-react";
|
||||
import { useMemo, useState } from "react";
|
||||
import { Link } from "react-router";
|
||||
import { toast } from "sonner";
|
||||
import {
|
||||
useDeleteTag,
|
||||
@@ -16,6 +17,7 @@ import { EmptyState, ErrorState, LoadingState } from "~/components/console/empty
|
||||
import { FilterBar, FilterSelect } from "~/components/console/filter-bar.tsx";
|
||||
import { JsonView } from "~/components/console/json-view.tsx";
|
||||
import { KvList } from "~/components/console/kv-list.tsx";
|
||||
import { consolePath } from "~/components/console/nav.ts";
|
||||
import { PageHeader } from "~/components/console/page-header.tsx";
|
||||
import { StatusBadge } from "~/components/console/status-badge.tsx";
|
||||
import { Timeline, type TimelineItem } from "~/components/console/timeline.tsx";
|
||||
@@ -160,10 +162,18 @@ export default function PreferencesPage() {
|
||||
title="偏好标签"
|
||||
description="软偏好影响排序,硬规则直接排除。手动取消的偏好 Agent 不会再加回。"
|
||||
actions={
|
||||
<Button onClick={() => setForm({ open: true, tag: null })}>
|
||||
<Plus />
|
||||
添加偏好
|
||||
</Button>
|
||||
<>
|
||||
<Button asChild variant="ghost" size="sm">
|
||||
<Link to={consolePath("rules")}>
|
||||
<ListChecks />
|
||||
收录策略
|
||||
</Link>
|
||||
</Button>
|
||||
<Button onClick={() => setForm({ open: true, tag: null })}>
|
||||
<Plus />
|
||||
添加偏好
|
||||
</Button>
|
||||
</>
|
||||
}
|
||||
/>
|
||||
|
||||
|
||||
@@ -0,0 +1,48 @@
|
||||
import { redirect } from "react-router";
|
||||
|
||||
// 控制台 IA 重构(docs/design/console-ia.md §3.3)后的旧链接 → 新路由。
|
||||
// 纯函数,各路由模块的 clientLoader 调用;nav.test 与冒烟都读 LEGACY_REDIRECTS。
|
||||
// 设置页的 ?tab= 旧链接由设置页自己处理(IA-2)。
|
||||
|
||||
/** 旧 query → 新地址;不需要跳转时返回 null */
|
||||
export function legacyRedirect(pathname: string, search: string): string | null {
|
||||
const path = pathname.replace(/\/+$/, "");
|
||||
const q = new URLSearchParams(search);
|
||||
const tab = q.get("tab");
|
||||
if (!tab) return null;
|
||||
q.delete("tab");
|
||||
const rest = q.toString();
|
||||
const withRest = (to: string) => (rest ? `${to}?${rest}` : to);
|
||||
|
||||
if (path === "/console/tasks") {
|
||||
if (tab === "downloads") return withRest("/console/downloads");
|
||||
if (tab === "plans") return withRest("/console/downloads/plans");
|
||||
if (tab === "tasks") return withRest("/console/tasks");
|
||||
return null;
|
||||
}
|
||||
if (path === "/console/subscriptions" && tab === "policies") return withRest("/console/rules");
|
||||
if (path === "/console/sources" && (tab === "snapshots" || tab === "feeds")) {
|
||||
const siteId = q.get("siteId");
|
||||
if (tab === "snapshots" && siteId) return `/console/sites/${encodeURIComponent(siteId)}?tab=snapshots`;
|
||||
return withRest("/console/sources");
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
/** 旧链接样例 → 应落到的新地址(测试与冒烟共用) */
|
||||
export const LEGACY_REDIRECTS: { from: string; to: string }[] = [
|
||||
{ from: "/console/tasks?tab=downloads", to: "/console/downloads" },
|
||||
{ from: "/console/tasks?tab=downloads&status=paused", to: "/console/downloads?status=paused" },
|
||||
{ from: "/console/tasks?tab=plans", to: "/console/downloads/plans" },
|
||||
{ from: "/console/tasks?tab=tasks", to: "/console/tasks" },
|
||||
{ from: "/console/subscriptions?tab=policies", to: "/console/rules" },
|
||||
{ from: "/console/sources?tab=snapshots", to: "/console/sources" },
|
||||
{ from: "/console/sources?tab=snapshots&siteId=abc", to: "/console/sites/abc?tab=snapshots" },
|
||||
];
|
||||
|
||||
/** 路由模块的 clientLoader:命中旧链接就跳转 */
|
||||
export function legacyRedirectLoader({ request }: { request: Request }) {
|
||||
const url = new URL(request.url);
|
||||
const to = legacyRedirect(url.pathname, url.search);
|
||||
return to ? redirect(to) : null;
|
||||
}
|
||||
@@ -0,0 +1,38 @@
|
||||
import { FilePlus2, Tags } from "lucide-react";
|
||||
import { useState } from "react";
|
||||
import { Link } from "react-router";
|
||||
import { consolePath } from "~/components/console/nav.ts";
|
||||
import { PageHeader } from "~/components/console/page-header.tsx";
|
||||
import { PolicyWorkspace } from "~/components/library/subscriptions-policy.tsx";
|
||||
import { Button } from "~/components/ui/button.tsx";
|
||||
|
||||
// 收录策略(REQ §6.5):草案 → 预览 → 发布;偏好标签在 /console/preferences,排序时叠加生效。
|
||||
|
||||
export const meta = () => [{ title: "收录策略 · UHD 媒体自动化控制台" }];
|
||||
|
||||
export default function RulesPage() {
|
||||
const [creating, setCreating] = useState(false);
|
||||
return (
|
||||
<>
|
||||
<PageHeader
|
||||
title="收录策略"
|
||||
description="草案发布后才生效。回滚会用旧版本内容发布一个新版本。"
|
||||
actions={
|
||||
<>
|
||||
<Button asChild variant="ghost" size="sm">
|
||||
<Link to={consolePath("preferences")}>
|
||||
<Tags />
|
||||
偏好标签
|
||||
</Link>
|
||||
</Button>
|
||||
<Button onClick={() => setCreating(true)}>
|
||||
<FilePlus2 />
|
||||
新建策略草案
|
||||
</Button>
|
||||
</>
|
||||
}
|
||||
/>
|
||||
<PolicyWorkspace creating={creating} onCreatingChange={setCreating} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -9,9 +9,9 @@ import {
|
||||
type SubscriptionProgress,
|
||||
type SubscriptionStatus,
|
||||
} from "@umt/contracts";
|
||||
import { CalendarClock, Check, FilePlus2, Pause, Play, Plus, Search, XCircle } from "lucide-react";
|
||||
import { CalendarClock, Check, ListChecks, Pause, Play, Plus, Search, XCircle } from "lucide-react";
|
||||
import { useEffect, useId, useMemo, useState } from "react";
|
||||
import { Link, useSearchParams } from "react-router";
|
||||
import { Link } from "react-router";
|
||||
import { toast } from "sonner";
|
||||
import { useEntitySearch } from "~/api/library.ts";
|
||||
import {
|
||||
@@ -42,7 +42,6 @@ import {
|
||||
SUB_STATUS,
|
||||
} from "~/components/library/labels.ts";
|
||||
import { Chip, relTime, Tone } from "~/components/library/parts.tsx";
|
||||
import { PolicyWorkspace } from "~/components/library/subscriptions-policy.tsx";
|
||||
import { SlotsPanel } from "~/components/library/subscriptions-slots.tsx";
|
||||
import { Button, buttonVariants } from "~/components/ui/button.tsx";
|
||||
import {
|
||||
@@ -55,62 +54,42 @@ import {
|
||||
} from "~/components/ui/dialog.tsx";
|
||||
import { Input } from "~/components/ui/input.tsx";
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "~/components/ui/select.tsx";
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "~/components/ui/tabs.tsx";
|
||||
import { errorMessage } from "~/lib/api.ts";
|
||||
import { cn, formatDateTime } from "~/lib/utils.ts";
|
||||
import { legacyRedirectLoader } from "./redirects.ts";
|
||||
|
||||
// 订阅与收录规则:订阅(单次/持续、仅本季/接续)+ 各作品的收录目标 Slot + 收录策略版本(REQ §6.1、§6.4、§6.5)
|
||||
// 订阅:单次/持续、仅本季/接续 + 各作品的版本目标(REQ §6.1、§6.4)。收录策略在 /console/rules。
|
||||
|
||||
export const meta = () => [{ title: "订阅 · UHD 媒体自动化控制台" }];
|
||||
|
||||
// 旧的 ?tab=policies 跳到收录策略
|
||||
export const clientLoader = legacyRedirectLoader;
|
||||
|
||||
const SUB_KIND_LABEL: Record<SubscriptionMediaKind, string> = { movie: "电影", series: "剧集", variety: "综艺" };
|
||||
|
||||
export default function SubscriptionsPage() {
|
||||
const [params, setParams] = useSearchParams();
|
||||
const tab = params.get("tab") === "policies" ? "policies" : "subscriptions";
|
||||
const [creatingSub, setCreatingSub] = useState(false);
|
||||
const [creatingPolicy, setCreatingPolicy] = useState(false);
|
||||
|
||||
return (
|
||||
<>
|
||||
<PageHeader
|
||||
title="订阅与收录规则"
|
||||
title="订阅"
|
||||
actions={
|
||||
tab === "subscriptions" ? (
|
||||
<>
|
||||
<Button asChild variant="ghost" size="sm">
|
||||
<Link to={consolePath("rules")}>
|
||||
<ListChecks />
|
||||
收录策略
|
||||
</Link>
|
||||
</Button>
|
||||
<Button onClick={() => setCreatingSub(true)}>
|
||||
<Plus />
|
||||
新建订阅
|
||||
</Button>
|
||||
) : (
|
||||
<Button onClick={() => setCreatingPolicy(true)}>
|
||||
<FilePlus2 />
|
||||
新建策略草案
|
||||
</Button>
|
||||
)
|
||||
</>
|
||||
}
|
||||
/>
|
||||
<Tabs
|
||||
value={tab}
|
||||
onValueChange={(v) =>
|
||||
setParams(
|
||||
(p) => {
|
||||
if (v === "policies") p.set("tab", "policies");
|
||||
else p.delete("tab");
|
||||
return p;
|
||||
},
|
||||
{ replace: true },
|
||||
)
|
||||
}
|
||||
>
|
||||
<TabsList aria-label="订阅与收录规则">
|
||||
<TabsTrigger value="subscriptions">订阅</TabsTrigger>
|
||||
<TabsTrigger value="policies">收录策略</TabsTrigger>
|
||||
</TabsList>
|
||||
<TabsContent value="subscriptions">
|
||||
<SubscriptionsTab />
|
||||
</TabsContent>
|
||||
<TabsContent value="policies">
|
||||
<PolicyWorkspace creating={creatingPolicy} onCreatingChange={setCreatingPolicy} />
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
<SubscriptionsTab />
|
||||
{creatingSub ? <CreateSubscriptionDialog onClose={() => setCreatingSub(false)} /> : null}
|
||||
</>
|
||||
);
|
||||
|
||||
@@ -1,37 +1,162 @@
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { AssetOperation, DownloadTask, Task } from "@umt/contracts";
|
||||
import { ArrowLeft } from "lucide-react";
|
||||
import { Link, useParams } from "react-router";
|
||||
import { useDownloadTask } from "~/api/downloads.ts";
|
||||
import { Link, Navigate, useParams } from "react-router";
|
||||
import { z } from "zod";
|
||||
import { apiParsed, isMissingEndpoint } from "~/api/parse.ts";
|
||||
import { DetailSection } from "~/components/console/detail-sheet.tsx";
|
||||
import { ErrorState, LoadingState } from "~/components/console/empty-state.tsx";
|
||||
import { consolePath } from "~/components/console/nav.ts";
|
||||
import { PageHeader } from "~/components/console/page-header.tsx";
|
||||
import { DownloadDetail } from "~/components/downloads/download-detail.tsx";
|
||||
import type { StatusTone } from "~/components/console/status-badge.tsx";
|
||||
import { Timeline } from "~/components/console/timeline.tsx";
|
||||
import { TASK_KIND_LABEL, TaskActions, TaskStatusLine, TaskSummary } from "~/components/downloads/business-tasks.tsx";
|
||||
import { Button } from "~/components/ui/button.tsx";
|
||||
import { TTL_SECOND } from "~/lib/api.ts";
|
||||
|
||||
export default function DownloadTaskPage() {
|
||||
export const meta = () => [{ title: "业务任务 · UHD 媒体自动化控制台" }];
|
||||
|
||||
const OP_TONE: Record<AssetOperation["status"], StatusTone> = {
|
||||
planned: "neutral",
|
||||
started: "neutral",
|
||||
succeeded: "success",
|
||||
failed: "destructive",
|
||||
skipped: "neutral",
|
||||
compensated: "warning",
|
||||
};
|
||||
const OP_STATUS: Record<AssetOperation["status"], string> = {
|
||||
planned: "计划",
|
||||
started: "进行中",
|
||||
succeeded: "成功",
|
||||
failed: "失败",
|
||||
skipped: "跳过",
|
||||
compensated: "已回滚",
|
||||
};
|
||||
|
||||
const OP_PHASE: Record<AssetOperation["phase"], string> = {
|
||||
decision: "判定",
|
||||
prepare: "准备",
|
||||
transfer: "传输",
|
||||
verify: "校验",
|
||||
commit: "提交",
|
||||
cleanup: "清理",
|
||||
compensate: "回滚",
|
||||
};
|
||||
const OP_KIND: Record<AssetOperation["kind"], string> = {
|
||||
copy: "复制",
|
||||
move: "移动",
|
||||
rename: "改名",
|
||||
mkdir: "建目录",
|
||||
hardlink: "硬链接",
|
||||
delete_source: "删除源文件",
|
||||
delete_target: "删除目标文件",
|
||||
verify: "校验",
|
||||
register: "登记资产",
|
||||
qb_pause: "暂停下载",
|
||||
qb_resume: "恢复下载",
|
||||
qb_remove: "移除下载",
|
||||
qb_set_tags: "改下载标签",
|
||||
other: "其他",
|
||||
};
|
||||
|
||||
function useTask(id: string) {
|
||||
return useQuery({
|
||||
queryKey: ["tasks", "one", id],
|
||||
retry: false,
|
||||
queryFn: ({ signal }) => apiParsed(Task, "/api/v1/tasks/:id", { pathParams: { id }, signal }),
|
||||
refetchInterval: (q) =>
|
||||
q.state.data && ["pending", "running", "waiting"].includes(q.state.data.status) ? 5 * TTL_SECOND : false,
|
||||
});
|
||||
}
|
||||
|
||||
/** 旧链接 /console/tasks/:id 指向下载任务:业务任务查不到时再查下载任务,查到就跳到下载详情 */
|
||||
function useLegacyDownload(id: string, enabled: boolean) {
|
||||
return useQuery({
|
||||
queryKey: ["downloads", "legacy-probe", id],
|
||||
enabled,
|
||||
retry: false,
|
||||
queryFn: ({ signal }) => apiParsed(DownloadTask, "/api/v1/download-tasks/:id", { pathParams: { id }, signal }),
|
||||
});
|
||||
}
|
||||
|
||||
function Operations({ taskId }: { taskId: string }) {
|
||||
const ops = useQuery({
|
||||
queryKey: ["tasks", "operations", taskId],
|
||||
queryFn: ({ signal }) =>
|
||||
apiParsed(z.object({ items: z.array(AssetOperation) }), "/api/v1/tasks/:id/operations", {
|
||||
pathParams: { id: taskId },
|
||||
signal,
|
||||
}),
|
||||
});
|
||||
if (ops.isPending) return <LoadingState rows={3} />;
|
||||
if (ops.error) return <ErrorState plain error={ops.error} onRetry={() => void ops.refetch()} />;
|
||||
if (!ops.data.items.length) return <p className="text-caption text-muted-foreground">这个任务没有文件操作。</p>;
|
||||
return (
|
||||
<Timeline
|
||||
items={ops.data.items.map((o) => ({
|
||||
id: o.id,
|
||||
at: o.startedAt ?? o.createdAt,
|
||||
tone: OP_TONE[o.status],
|
||||
title: `${OP_PHASE[o.phase]} · ${OP_KIND[o.kind]}:${OP_STATUS[o.status]}`,
|
||||
meta: o.attempts > 1 ? `${o.attempts} 次` : undefined,
|
||||
description: o.organizationRecordId ? (
|
||||
<Link to={consolePath("organize", o.organizationRecordId)} className="underline underline-offset-4">
|
||||
整理记录 {o.organizationRecordId.slice(0, 8)}
|
||||
</Link>
|
||||
) : o.downloadTaskId ? (
|
||||
<Link to={consolePath("downloads", o.downloadTaskId)} className="underline underline-offset-4">
|
||||
下载任务 {o.downloadTaskId.slice(0, 8)}
|
||||
</Link>
|
||||
) : undefined,
|
||||
}))}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export default function BusinessTaskPage() {
|
||||
const { id = "" } = useParams();
|
||||
const task = useDownloadTask(id);
|
||||
const task = useTask(id);
|
||||
const notFound = !!task.error && isMissingEndpoint(task.error);
|
||||
const legacy = useLegacyDownload(id, notFound);
|
||||
|
||||
if (notFound && legacy.data) return <Navigate to={consolePath("downloads", id)} replace />;
|
||||
const t = task.data;
|
||||
|
||||
return (
|
||||
<>
|
||||
<PageHeader
|
||||
title={task.data?.name ?? "下载任务"}
|
||||
className="[&_h1]:break-all"
|
||||
title={t ? (TASK_KIND_LABEL[t.kind] ?? t.kind) : "业务任务"}
|
||||
description={t ? <TaskStatusLine t={t} /> : undefined}
|
||||
actions={
|
||||
<Button asChild variant="ghost" size="sm">
|
||||
<Link to="/console/tasks">
|
||||
<ArrowLeft />
|
||||
下载与任务
|
||||
</Link>
|
||||
</Button>
|
||||
<>
|
||||
<Button asChild variant="ghost" size="sm">
|
||||
<Link to={consolePath("tasks")}>
|
||||
<ArrowLeft />
|
||||
业务任务
|
||||
</Link>
|
||||
</Button>
|
||||
{t ? <TaskActions t={t} /> : null}
|
||||
</>
|
||||
}
|
||||
/>
|
||||
<div className="pg-slab rounded-xl p-4 md:p-5">
|
||||
{task.isPending ? (
|
||||
{task.isPending || (notFound && legacy.isPending) ? (
|
||||
<div className="pg-slab rounded-xl p-4 md:p-5">
|
||||
<LoadingState rows={5} />
|
||||
) : task.error ? (
|
||||
<ErrorState plain error={task.error} onRetry={() => void task.refetch()} />
|
||||
) : (
|
||||
<DownloadDetail task={task.data} />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
) : !t ? (
|
||||
<ErrorState error={task.error} onRetry={() => void task.refetch()} />
|
||||
) : (
|
||||
<div className="space-y-5">
|
||||
<div className="pg-slab rounded-xl p-4 md:p-5">
|
||||
<TaskSummary t={t} />
|
||||
</div>
|
||||
<div className="pg-slab rounded-xl p-4 md:p-5">
|
||||
<DetailSection title="文件操作">
|
||||
<Operations taskId={t.id} />
|
||||
</DetailSection>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -1,313 +1,17 @@
|
||||
import { useQueryClient } from "@tanstack/react-query";
|
||||
import type { AcquisitionPlan, DownloadStatus, DownloadTask, PlanStatus } from "@umt/contracts";
|
||||
import { EventType } from "@umt/contracts";
|
||||
import { Download, ListChecks, RefreshCw } from "lucide-react";
|
||||
import { useState } from "react";
|
||||
import { Link, useNavigate } from "react-router";
|
||||
import {
|
||||
DOWNLOAD_STATUS_LABEL,
|
||||
PLAN_STATUS_LABEL,
|
||||
useDownloaderNames,
|
||||
useDownloadTasks,
|
||||
usePlans,
|
||||
} from "~/api/downloads.ts";
|
||||
import { type DataColumn, DataTable } from "~/components/console/data-table.tsx";
|
||||
import { DetailSection, DetailSheet } from "~/components/console/detail-sheet.tsx";
|
||||
import { FilterBar, FilterSelect } from "~/components/console/filter-bar.tsx";
|
||||
import { JsonView } from "~/components/console/json-view.tsx";
|
||||
import { KvList } from "~/components/console/kv-list.tsx";
|
||||
import { PageHeader } from "~/components/console/page-header.tsx";
|
||||
import { StatusBadge } from "~/components/console/status-badge.tsx";
|
||||
import { BusinessTasks } from "~/components/downloads/business-tasks.tsx";
|
||||
import { CacheVolumes } from "~/components/downloads/cache-volumes.tsx";
|
||||
import {
|
||||
DownloadDetail,
|
||||
DownloadStatusBadges,
|
||||
PauseResume,
|
||||
ProgressLine,
|
||||
} from "~/components/downloads/download-detail.tsx";
|
||||
import { Button } from "~/components/ui/button.tsx";
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "~/components/ui/tabs.tsx";
|
||||
import { relTime } from "~/components/workbench/release-fields.ts";
|
||||
import { useSse } from "~/lib/sse.ts";
|
||||
import { formatBytes, formatDateTime } from "~/lib/utils.ts";
|
||||
import { legacyRedirectLoader } from "./redirects.ts";
|
||||
|
||||
const PURPOSE = { fill: "补缺", upgrade: "升级", replace_source: "换源" } as const;
|
||||
export const meta = () => [{ title: "业务任务 · UHD 媒体自动化控制台" }];
|
||||
|
||||
// 旧的 ?tab=downloads / plans 跳到下载队列 / 下载计划
|
||||
export const clientLoader = legacyRedirectLoader;
|
||||
|
||||
export default function TasksPage() {
|
||||
const [status, setStatus] = useState("");
|
||||
const [managed, setManaged] = useState("");
|
||||
const [planStatus, setPlanStatus] = useState("");
|
||||
const [openId, setOpenId] = useState<string | null>(null);
|
||||
const [openPlan, setOpenPlan] = useState<AcquisitionPlan | null>(null);
|
||||
const navigate = useNavigate();
|
||||
const qc = useQueryClient();
|
||||
const downloads = useDownloadTasks({
|
||||
status: (status || undefined) as DownloadStatus | undefined,
|
||||
managed: (managed || undefined) as "true" | "false" | undefined,
|
||||
});
|
||||
const plans = usePlans((planStatus || undefined) as PlanStatus | undefined);
|
||||
const names = useDownloaderNames();
|
||||
|
||||
// 下载进度/状态、阈值事件到达时刷新列表(SSE 为主,轮询兜底)
|
||||
useSse(
|
||||
[
|
||||
EventType.downloadProgress,
|
||||
EventType.downloadStatusChanged,
|
||||
EventType.downloadSubmitted,
|
||||
EventType.downloadThreshold,
|
||||
],
|
||||
() => void qc.invalidateQueries({ queryKey: ["downloads"] }),
|
||||
);
|
||||
|
||||
const rows = downloads.data?.pages.flatMap((p) => p.items);
|
||||
const planRows = plans.data?.pages.flatMap((p) => p.items);
|
||||
const open = rows?.find((t) => t.id === openId) ?? null;
|
||||
const linkedDownload = openPlan ? rows?.find((t) => t.acquisitionPlanId === openPlan.id) : undefined;
|
||||
|
||||
const columns: DataColumn<DownloadTask>[] = [
|
||||
{
|
||||
key: "name",
|
||||
header: "任务",
|
||||
cell: (t) => (
|
||||
<div className="min-w-0 max-w-sm">
|
||||
<p className="line-clamp-2 break-all text-foreground">{t.name}</p>
|
||||
<p className="mt-0.5 truncate text-meta text-muted-foreground">
|
||||
{names.data?.get(t.instanceId) ?? "下载器"} · {t.tags.join(", ") || "无标签"}
|
||||
</p>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{ key: "status", header: "状态", cell: (t) => <DownloadStatusBadges t={t} /> },
|
||||
{ key: "progress", header: "进度", hideBelow: "sm", cell: (t) => <ProgressLine t={t} /> },
|
||||
{
|
||||
key: "size",
|
||||
header: "大小",
|
||||
hideBelow: "lg",
|
||||
align: "right",
|
||||
cell: (t) => (
|
||||
<span className="whitespace-nowrap tabular-nums">
|
||||
{t.sizeBytes === null ? "未知" : formatBytes(t.sizeBytes, 1)}
|
||||
</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: "at",
|
||||
header: "更新",
|
||||
hideBelow: "md",
|
||||
cell: (t) => (
|
||||
<span className="whitespace-nowrap text-muted-foreground">{relTime(t.lastSyncedAt ?? t.updatedAt)}</span>
|
||||
),
|
||||
},
|
||||
{ key: "ops", header: "", align: "right", cell: (t) => <PauseResume t={t} size="xs" /> },
|
||||
];
|
||||
|
||||
const planColumns: DataColumn<AcquisitionPlan>[] = [
|
||||
{
|
||||
key: "purpose",
|
||||
header: "计划",
|
||||
cell: (p) => (
|
||||
<div className="min-w-0">
|
||||
<p className="text-foreground">
|
||||
{PURPOSE[p.purpose]} · 优先级 {p.priority}
|
||||
</p>
|
||||
<p className="truncate font-mono text-meta text-muted-foreground">{p.id.slice(0, 8)}</p>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: "status",
|
||||
header: "状态",
|
||||
cell: (p) => (
|
||||
<StatusBadge
|
||||
tone={
|
||||
p.status === "failed"
|
||||
? "destructive"
|
||||
: p.status === "completed"
|
||||
? "success"
|
||||
: p.status === "expired"
|
||||
? "warning"
|
||||
: "neutral"
|
||||
}
|
||||
>
|
||||
{PLAN_STATUS_LABEL[p.status]}
|
||||
</StatusBadge>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: "reserved",
|
||||
header: "预留空间",
|
||||
hideBelow: "md",
|
||||
align: "right",
|
||||
cell: (p) => <span className="tabular-nums">{formatBytes(p.reservedBytes, 1)}</span>,
|
||||
},
|
||||
{
|
||||
key: "reason",
|
||||
header: "说明",
|
||||
hideBelow: "lg",
|
||||
cell: (p) => <span className="line-clamp-1 text-muted-foreground">{p.statusReason ?? "—"}</span>,
|
||||
},
|
||||
{
|
||||
key: "at",
|
||||
header: "创建",
|
||||
hideBelow: "sm",
|
||||
cell: (p) => <span className="whitespace-nowrap text-muted-foreground">{relTime(p.createdAt)}</span>,
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<>
|
||||
<PageHeader
|
||||
title="下载与任务"
|
||||
description="阈值暂停不能手动绕过;无进展只记录,不自动换源。"
|
||||
actions={
|
||||
<Button variant="outline" size="sm" onClick={() => void qc.invalidateQueries({ queryKey: ["downloads"] })}>
|
||||
<RefreshCw className={downloads.isFetching ? "animate-spin" : undefined} />
|
||||
刷新
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
<CacheVolumes />
|
||||
<Tabs defaultValue="downloads">
|
||||
<TabsList>
|
||||
<TabsTrigger value="downloads">下载任务</TabsTrigger>
|
||||
<TabsTrigger value="plans">下载计划</TabsTrigger>
|
||||
<TabsTrigger value="tasks">业务任务</TabsTrigger>
|
||||
</TabsList>
|
||||
<TabsContent value="downloads">
|
||||
<FilterBar
|
||||
onReset={
|
||||
status || managed
|
||||
? () => {
|
||||
setStatus("");
|
||||
setManaged("");
|
||||
}
|
||||
: undefined
|
||||
}
|
||||
>
|
||||
<FilterSelect
|
||||
label="状态"
|
||||
value={status}
|
||||
onChange={setStatus}
|
||||
options={Object.entries(DOWNLOAD_STATUS_LABEL).map(([value, label]) => ({ value, label }))}
|
||||
/>
|
||||
<FilterSelect
|
||||
label="纳管"
|
||||
value={managed}
|
||||
onChange={setManaged}
|
||||
options={[
|
||||
{ value: "true", label: "纳管任务" },
|
||||
{ value: "false", label: "未纳管" },
|
||||
]}
|
||||
/>
|
||||
</FilterBar>
|
||||
<DataTable
|
||||
columns={columns}
|
||||
rows={rows}
|
||||
rowKey={(t) => t.id}
|
||||
loading={downloads.isPending}
|
||||
error={downloads.error}
|
||||
onRetry={() => void downloads.refetch()}
|
||||
onRowClick={(t) => setOpenId(t.id)}
|
||||
selectedKey={openId}
|
||||
hasMore={downloads.hasNextPage}
|
||||
onLoadMore={() => void downloads.fetchNextPage()}
|
||||
loadingMore={downloads.isFetchingNextPage}
|
||||
empty={{
|
||||
icon: Download,
|
||||
title: status || managed ? "没有符合筛选的下载" : "还没有下载任务",
|
||||
description: "自动收录或在站点工作台下载后出现在这里。",
|
||||
}}
|
||||
/>
|
||||
</TabsContent>
|
||||
<TabsContent value="plans">
|
||||
<FilterBar onReset={planStatus ? () => setPlanStatus("") : undefined}>
|
||||
<FilterSelect
|
||||
label="状态"
|
||||
value={planStatus}
|
||||
onChange={setPlanStatus}
|
||||
options={Object.entries(PLAN_STATUS_LABEL).map(([value, label]) => ({ value, label }))}
|
||||
/>
|
||||
</FilterBar>
|
||||
<DataTable
|
||||
columns={planColumns}
|
||||
rows={planRows}
|
||||
rowKey={(p) => p.id}
|
||||
loading={plans.isPending}
|
||||
error={plans.error}
|
||||
onRetry={() => void plans.refetch()}
|
||||
onRowClick={setOpenPlan}
|
||||
selectedKey={openPlan?.id}
|
||||
hasMore={plans.hasNextPage}
|
||||
onLoadMore={() => void plans.fetchNextPage()}
|
||||
loadingMore={plans.isFetchingNextPage}
|
||||
empty={{
|
||||
icon: ListChecks,
|
||||
title: "还没有下载计划",
|
||||
description: "候选被选中后生成计划,同时预留版本目标与预算。",
|
||||
}}
|
||||
/>
|
||||
</TabsContent>
|
||||
<TabsContent value="tasks">
|
||||
<BusinessTasks />
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
|
||||
<DetailSheet
|
||||
open={!!open}
|
||||
onOpenChange={(o) => !o && setOpenId(null)}
|
||||
width="lg"
|
||||
title={open?.name ?? ""}
|
||||
footer={
|
||||
open ? (
|
||||
<Button asChild variant="outline" size="sm">
|
||||
<Link to={`/console/tasks/${open.id}`}>在独立页面打开</Link>
|
||||
</Button>
|
||||
) : null
|
||||
}
|
||||
>
|
||||
{open ? <DownloadDetail task={open} /> : null}
|
||||
</DetailSheet>
|
||||
|
||||
<DetailSheet
|
||||
open={!!openPlan}
|
||||
onOpenChange={(o) => !o && setOpenPlan(null)}
|
||||
title={openPlan ? `${PURPOSE[openPlan.purpose]}计划` : ""}
|
||||
description={openPlan?.statusReason ?? undefined}
|
||||
footer={
|
||||
linkedDownload ? (
|
||||
<Button
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
setOpenPlan(null);
|
||||
navigate(`/console/tasks/${linkedDownload.id}`);
|
||||
}}
|
||||
>
|
||||
查看下载任务
|
||||
</Button>
|
||||
) : null
|
||||
}
|
||||
>
|
||||
{openPlan ? (
|
||||
<>
|
||||
<KvList
|
||||
items={[
|
||||
{ label: "状态", value: PLAN_STATUS_LABEL[openPlan.status] },
|
||||
{ label: "优先级", value: openPlan.priority },
|
||||
{ label: "预留空间", value: formatBytes(openPlan.reservedBytes, 1) },
|
||||
{ label: "过期于", value: formatDateTime(openPlan.expiresAt) },
|
||||
{ label: "创建", value: formatDateTime(openPlan.createdAt) },
|
||||
{ label: "Slot", value: openPlan.slotId, mono: true },
|
||||
{ label: "资源", value: openPlan.sourceReleaseId, mono: true, wide: true },
|
||||
]}
|
||||
/>
|
||||
<DetailSection title="评估依据">
|
||||
<JsonView value={openPlan.evaluation} />
|
||||
</DetailSection>
|
||||
<JsonView label="预算预留" value={openPlan.budgetReservation} />
|
||||
</>
|
||||
) : null}
|
||||
</DetailSheet>
|
||||
<PageHeader title="业务任务" description="取消只停止后续步骤;重试只对失败的任务。" />
|
||||
<BusinessTasks />
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user