rootandClaude Opus 5.5
31a54186c7
- Trim descriptions, empty states, confirm buttons and toasts to facts - Unify terms per glossary: 待处理/待识别/整理记录/运行记录/凭证/子会话/Agent 上游 - Subscription-login termsNote states facts only (borrowed client identity, ToS/ban risk) - Shorter, concrete goal templates for built-in Agent checks - Human-readable nouns instead of table names in instance CRUD errors - Audit labels for pi_upstream / schedule / automation_grant actions - Glossary: add 上游、订阅登录、凭证、定时任务、巡检、运行记录、子会话、停止、持续授权 Co-Authored-By: Claude Opus 5.5 <[email protected]>
513 lines
18 KiB
TypeScript
513 lines
18 KiB
TypeScript
import { useQueryClient } from "@tanstack/react-query";
|
||
import type { Dashboard } from "@umt/contracts";
|
||
import {
|
||
Activity,
|
||
AlertTriangle,
|
||
ArrowRight,
|
||
CircleCheck,
|
||
HardDrive,
|
||
ListTodo,
|
||
type LucideIcon,
|
||
Pause,
|
||
Play,
|
||
Radio,
|
||
ShieldAlert,
|
||
Sparkles,
|
||
} from "lucide-react";
|
||
import type { ReactNode } from "react";
|
||
import { useRef } from "react";
|
||
import { Link } from "react-router";
|
||
import { toast } from "sonner";
|
||
import { useDashboard } from "~/api/dashboard.ts";
|
||
import { useUpdateSettings } from "~/api/settings.ts";
|
||
import { ConfirmDialog } from "~/components/console/confirm-dialog.tsx";
|
||
import { EmptyState, ErrorState, LoadingState } from "~/components/console/empty-state.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 { Switch } from "~/components/ui/switch.tsx";
|
||
import { errorMessage } from "~/lib/api.ts";
|
||
import {
|
||
agentRunLabel,
|
||
decisionKindLabel,
|
||
downloadLabel,
|
||
formatRelative,
|
||
healthLabel,
|
||
organizationActionLabel,
|
||
organizationLabel,
|
||
} from "~/lib/labels.ts";
|
||
import { qk } from "~/lib/query-keys.ts";
|
||
import { useSse, useSseStatus } from "~/lib/sse.ts";
|
||
import { cn, formatBytes } from "~/lib/utils.ts";
|
||
|
||
/** 首页关心的事件:任意一个到达就(节流)刷新聚合 */
|
||
const DASHBOARD_EVENTS = [
|
||
"task.created",
|
||
"task.status_changed",
|
||
"download.submitted",
|
||
"download.status_changed",
|
||
"download.threshold",
|
||
"organization.changed",
|
||
"agent.run_status",
|
||
"feed.fetched",
|
||
"feed.health_changed",
|
||
"decision.created",
|
||
"decision.updated",
|
||
"settings.changed",
|
||
];
|
||
|
||
function useLiveDashboard() {
|
||
const qc = useQueryClient();
|
||
const timer = useRef<ReturnType<typeof setTimeout> | null>(null);
|
||
useSse(DASHBOARD_EVENTS, () => {
|
||
if (timer.current) return;
|
||
timer.current = setTimeout(() => {
|
||
timer.current = null;
|
||
qc.invalidateQueries({ queryKey: qk.dashboard });
|
||
}, 1500);
|
||
});
|
||
return useDashboard();
|
||
}
|
||
|
||
function Section({
|
||
title,
|
||
icon: Icon,
|
||
to,
|
||
children,
|
||
className,
|
||
}: {
|
||
title: string;
|
||
icon: LucideIcon;
|
||
to?: string;
|
||
children: ReactNode;
|
||
className?: string;
|
||
}) {
|
||
return (
|
||
<section className={cn("pg-slab flex min-w-0 flex-col rounded-xl p-5", className)}>
|
||
<div className="mb-3 flex items-center gap-2">
|
||
<Icon className="h-4 w-4 text-muted-foreground" />
|
||
<h2 className="text-body font-semibold text-foreground">{title}</h2>
|
||
{to ? (
|
||
<Link
|
||
to={to}
|
||
className="ml-auto inline-flex items-center gap-1 text-meta text-muted-foreground hover:text-foreground"
|
||
>
|
||
查看
|
||
<ArrowRight className="h-3.5 w-3.5" />
|
||
</Link>
|
||
) : null}
|
||
</div>
|
||
{children}
|
||
</section>
|
||
);
|
||
}
|
||
|
||
function Row({ children }: { children: ReactNode }) {
|
||
return <li className="flex min-w-0 items-center justify-between gap-3 py-1.5 text-sm">{children}</li>;
|
||
}
|
||
|
||
// ─── 自动化总开关:显眼状态 + 切换 ───
|
||
function AutomationBanner({ a }: { a: Dashboard["automation"] }) {
|
||
const update = useUpdateSettings();
|
||
const setAutomation = async (patch: { enabled?: boolean; readOnlyReconcile?: boolean }, ok: string) => {
|
||
try {
|
||
await update.mutateAsync({ automation: patch });
|
||
toast.success(ok);
|
||
} catch (err) {
|
||
toast.error(errorMessage(err, "切换失败"));
|
||
throw err;
|
||
}
|
||
};
|
||
const paused = !a.enabled;
|
||
const readOnly = a.readOnlyReconcile;
|
||
|
||
return (
|
||
<div
|
||
className={cn(
|
||
"pg-slab mb-4 flex flex-col gap-4 rounded-xl p-4 sm:flex-row sm:items-center sm:p-5",
|
||
(paused || readOnly) && "border border-warning/40",
|
||
)}
|
||
>
|
||
<div className="flex min-w-0 flex-1 items-start gap-3">
|
||
<span
|
||
className={cn(
|
||
"grid h-10 w-10 shrink-0 place-items-center rounded-full",
|
||
paused || readOnly ? "bg-warning/10 text-warning" : "bg-success/10 text-success",
|
||
)}
|
||
>
|
||
{readOnly ? (
|
||
<ShieldAlert className="h-5 w-5" />
|
||
) : paused ? (
|
||
<Pause className="h-5 w-5" />
|
||
) : (
|
||
<Play className="h-5 w-5" />
|
||
)}
|
||
</span>
|
||
<div className="min-w-0">
|
||
<div className="flex flex-wrap items-center gap-2">
|
||
<p className="text-lead font-semibold text-foreground">
|
||
{paused ? "自动化已暂停" : readOnly ? "只读对账中" : "自动化运行中"}
|
||
</p>
|
||
<StatusBadge tone={paused ? "warning" : "success"}>总开关{paused ? "关" : "开"}</StatusBadge>
|
||
{readOnly ? <StatusBadge tone="warning">只读对账</StatusBadge> : null}
|
||
</div>
|
||
<p className="mt-0.5 text-caption text-muted-foreground">
|
||
{paused
|
||
? "自动收录、下载、整理已停止,手动操作仍可用。"
|
||
: readOnly
|
||
? "只核对,不写入。确认无误后关闭。"
|
||
: `${a.activeSubscriptions} 个订阅在追踪,自动收录、下载和整理。`}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div className="flex flex-wrap items-center gap-x-5 gap-y-2">
|
||
<div className="flex items-center gap-2 text-caption text-foreground">
|
||
<label htmlFor="home-readonly">只读对账</label>
|
||
<Switch
|
||
id="home-readonly"
|
||
checked={readOnly}
|
||
disabled={update.isPending}
|
||
onCheckedChange={(v) =>
|
||
setAutomation({ readOnlyReconcile: v }, v ? "已开启只读对账" : "已关闭只读对账").catch(() => {})
|
||
}
|
||
aria-label="只读对账模式"
|
||
/>
|
||
</div>
|
||
{paused ? (
|
||
<Button
|
||
size="sm"
|
||
disabled={update.isPending}
|
||
onClick={() => setAutomation({ enabled: true }, "自动化已恢复").catch(() => {})}
|
||
>
|
||
<Play />
|
||
恢复自动化
|
||
</Button>
|
||
) : (
|
||
<ConfirmDialog
|
||
trigger={
|
||
<Button variant="outline" size="sm" disabled={update.isPending}>
|
||
<Pause />
|
||
暂停自动化
|
||
</Button>
|
||
}
|
||
title="暂停全部自动化？"
|
||
description="自动收录、下载、整理会停止,已提交的下载任务不受影响。可随时恢复。"
|
||
confirmLabel="暂停自动化"
|
||
onConfirm={() => setAutomation({ enabled: false }, "自动化已暂停")}
|
||
/>
|
||
)}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function Overview({ a }: { a: Dashboard["automation"] }) {
|
||
const t = a.today;
|
||
return (
|
||
<Section title="自动化概览" icon={Sparkles} to={consolePath("subscriptions")}>
|
||
<div className="grid grid-cols-2 gap-2">
|
||
<StatTile plain label="今日新计划" value={t.plansCreated} />
|
||
<StatTile plain label="今日提交下载" value={t.downloadsSubmitted} />
|
||
<StatTile plain label="今日入库文件" value={t.filesImported} />
|
||
<StatTile plain label="今日升级" value={t.upgrades} />
|
||
</div>
|
||
<p className="mt-3 text-meta text-muted-foreground">
|
||
整理成功 {t.recordsSucceeded} · 失败 {t.recordsFailed} · 满足的版本目标 {a.slotCounts.satisfied} · 需关注{" "}
|
||
{a.slotCounts.attention}
|
||
</p>
|
||
</Section>
|
||
);
|
||
}
|
||
|
||
function CurrentWork({ w }: { w: Dashboard["currentWork"] }) {
|
||
const counts = [
|
||
{ label: "下载中", v: w.downloading },
|
||
{ label: "已暂停", v: w.paused },
|
||
{ label: "无进展", v: w.stalled },
|
||
{ label: "入库中", v: w.importing },
|
||
];
|
||
const idle = counts.every((c) => c.v === 0) && w.items.length === 0 && w.agentRuns.length === 0;
|
||
return (
|
||
<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}>
|
||
{c.label} <span className="font-medium text-foreground tabular-nums">{c.v}</span>
|
||
</span>
|
||
))}
|
||
</div>
|
||
{idle ? (
|
||
<EmptyState plain icon={CircleCheck} title="没有进行中的工作" className="py-6" />
|
||
) : (
|
||
<ul className="divide-y divide-border/60">
|
||
{w.items.slice(0, 5).map((it) => {
|
||
const s = downloadLabel(it.status);
|
||
return (
|
||
<Row key={it.downloadTaskId}>
|
||
<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">
|
||
{Math.round(it.progress * 100)}%
|
||
</span>
|
||
<StatusBadge tone={s.tone}>{s.label}</StatusBadge>
|
||
</Row>
|
||
);
|
||
})}
|
||
{w.agentRuns.slice(0, 3).map((r) => {
|
||
const s = agentRunLabel(r.status);
|
||
return (
|
||
<Row key={r.id}>
|
||
<Link to={consolePath("agent", r.id)} className="min-w-0 flex-1 truncate hover:underline">
|
||
Agent：{r.goal}
|
||
</Link>
|
||
<StatusBadge tone={s.tone}>{s.label}</StatusBadge>
|
||
</Row>
|
||
);
|
||
})}
|
||
</ul>
|
||
)}
|
||
</Section>
|
||
);
|
||
}
|
||
|
||
function NeedsAttention({ n }: { n: Dashboard["needsAttention"] }) {
|
||
return (
|
||
<Section title="待处理" icon={AlertTriangle} to={consolePath("inbox")}>
|
||
{n.total === 0 ? (
|
||
<EmptyState plain icon={CircleCheck} title="没有待处理事项" className="py-6" />
|
||
) : (
|
||
<>
|
||
<p className="mb-2 text-title-sm font-semibold text-warning tabular-nums">
|
||
{n.total}
|
||
<span className="ml-1.5 text-caption font-normal text-muted-foreground">项待处理</span>
|
||
</p>
|
||
<ul className="divide-y divide-border/60">
|
||
{n.byKind.map((k) => (
|
||
<Row key={k.kind}>
|
||
<span className="truncate">{decisionKindLabel(k.kind)}</span>
|
||
<span className="text-meta text-muted-foreground tabular-nums">{k.count}</span>
|
||
</Row>
|
||
))}
|
||
</ul>
|
||
</>
|
||
)}
|
||
</Section>
|
||
);
|
||
}
|
||
|
||
function CacheSection({ c }: { c: Dashboard["cache"] }) {
|
||
return (
|
||
<Section title="缓存水位" icon={HardDrive} to={consolePath("downloads")}>
|
||
{c.volumes.length === 0 ? (
|
||
<EmptyState
|
||
plain
|
||
icon={HardDrive}
|
||
title="还没有下载器"
|
||
description="添加下载器后显示缓存水位。"
|
||
className="py-6"
|
||
/>
|
||
) : (
|
||
<ul className="space-y-4">
|
||
{c.volumes.map((v) => {
|
||
const pct = v.usedPercent;
|
||
const over = pct !== null && pct >= v.hardThresholdPercent;
|
||
const near = pct !== null && pct >= v.resumePercent;
|
||
return (
|
||
<li key={v.volumeKey} className="min-w-0">
|
||
<div className="flex items-center justify-between gap-2 text-sm">
|
||
<span className="truncate font-medium">{v.volumeKey}</span>
|
||
<StatusBadge tone={pct === null ? "neutral" : over ? "destructive" : near ? "warning" : "success"}>
|
||
{pct === null ? "用量未知" : `${pct.toFixed(0)}%${over ? " 已达阈值" : ""}`}
|
||
</StatusBadge>
|
||
</div>
|
||
<div className="relative mt-2 h-1.5 overflow-hidden rounded-full bg-foreground/[0.08]" aria-hidden>
|
||
<div
|
||
className={cn(
|
||
"h-full rounded-full",
|
||
over ? "bg-destructive" : near ? "bg-warning" : "bg-foreground/60",
|
||
)}
|
||
style={{ width: `${pct ?? 0}%` }}
|
||
/>
|
||
<span
|
||
aria-hidden
|
||
className="absolute inset-y-0 w-px bg-destructive"
|
||
style={{ left: `${v.hardThresholdPercent}%` }}
|
||
/>
|
||
</div>
|
||
<p className="mt-1.5 text-meta text-muted-foreground">
|
||
阈值 {v.hardThresholdPercent}% / 恢复 {v.resumePercent}% · 在途 {formatBytes(v.pendingBytes)} · 可清理{" "}
|
||
{formatBytes(v.cleanableBytes)} · 保留期锁定 {formatBytes(v.retentionLockedBytes)}
|
||
{v.pausedByThreshold ? ` · 因阈值暂停 ${v.pausedByThreshold} 个` : ""}
|
||
</p>
|
||
{v.notes.map((n) => (
|
||
<p key={n} className="text-meta text-muted-foreground">
|
||
{n}
|
||
</p>
|
||
))}
|
||
</li>
|
||
);
|
||
})}
|
||
</ul>
|
||
)}
|
||
</Section>
|
||
);
|
||
}
|
||
|
||
function SourcesSection({ s }: { s: Dashboard["sources"] }) {
|
||
const rows = [
|
||
...s.sites.map((x) => ({
|
||
id: x.id,
|
||
kind: "站点",
|
||
name: x.name,
|
||
enabled: x.enabled,
|
||
health: x.health,
|
||
at: x.lastSnapshotAt,
|
||
err: null as string | null,
|
||
})),
|
||
...s.feeds.map((x) => ({
|
||
id: x.id,
|
||
kind: "Feed",
|
||
name: x.name,
|
||
enabled: x.enabled,
|
||
health: x.health,
|
||
at: x.lastSuccessAt,
|
||
err: x.lastError,
|
||
})),
|
||
...s.downloaders.map((x) => ({
|
||
id: x.id,
|
||
kind: "下载器",
|
||
name: x.name,
|
||
enabled: x.enabled,
|
||
health: x.health,
|
||
at: x.lastSeenAt,
|
||
err: null,
|
||
})),
|
||
...s.mediaServers.map((x) => ({
|
||
id: x.id,
|
||
kind: "媒体服务器",
|
||
name: x.name,
|
||
enabled: x.enabled,
|
||
health: x.health,
|
||
at: x.lastSeenAt,
|
||
err: null,
|
||
})),
|
||
];
|
||
return (
|
||
<Section title="来源健康" icon={Radio} to={consolePath("sources")}>
|
||
{rows.length === 0 ? (
|
||
<EmptyState plain icon={Radio} title="还没有来源" description="登记站点或新建 Feed 后显示。" className="py-6" />
|
||
) : (
|
||
<ul className="divide-y divide-border/60">
|
||
{rows.slice(0, 8).map((r) => {
|
||
const h = r.enabled ? healthLabel(r.health) : healthLabel("disabled");
|
||
return (
|
||
<Row key={`${r.kind}-${r.id}`}>
|
||
<div className="min-w-0 flex-1">
|
||
<p className="truncate">
|
||
<span className="mr-1.5 text-meta text-muted-foreground">{r.kind}</span>
|
||
{r.name}
|
||
</p>
|
||
{r.err ? <p className="truncate text-meta text-destructive">{r.err}</p> : null}
|
||
</div>
|
||
<span className="hidden shrink-0 text-meta text-muted-foreground sm:inline">
|
||
{formatRelative(r.at)}
|
||
</span>
|
||
<StatusBadge tone={h.tone}>{h.label}</StatusBadge>
|
||
</Row>
|
||
);
|
||
})}
|
||
</ul>
|
||
)}
|
||
</Section>
|
||
);
|
||
}
|
||
|
||
function RecentOutput({ items }: { items: Dashboard["recentOutput"] }) {
|
||
return (
|
||
<Section title="最近产出" icon={ListTodo} to={consolePath("organize")}>
|
||
{items.length === 0 ? (
|
||
<EmptyState plain icon={ListTodo} title="还没有整理记录" className="py-6" />
|
||
) : (
|
||
<ul className="divide-y divide-border/60">
|
||
{items.slice(0, 6).map((r) => {
|
||
const s = organizationLabel(r.status);
|
||
return (
|
||
<li key={r.recordId} className="min-w-0 py-2">
|
||
<div className="flex items-center justify-between gap-3 text-sm">
|
||
<Link to={consolePath("organize", r.recordId)} className="min-w-0 truncate hover:underline">
|
||
{r.title ?? "未命名"}
|
||
</Link>
|
||
<StatusBadge tone={s.tone}>{s.label}</StatusBadge>
|
||
</div>
|
||
<p className="truncate text-meta text-muted-foreground">
|
||
{organizationActionLabel(r.action)} · {r.counts.succeeded}/{r.counts.total} 个文件 ·{" "}
|
||
{formatRelative(r.finishedAt)}
|
||
{r.targetPath ? ` · ${r.targetPath}` : ""}
|
||
</p>
|
||
</li>
|
||
);
|
||
})}
|
||
</ul>
|
||
)}
|
||
</Section>
|
||
);
|
||
}
|
||
|
||
function LiveIndicator() {
|
||
const s = useSseStatus();
|
||
const tone = s === "open" ? "success" : s === "reconnecting" ? "warning" : "neutral";
|
||
const label = s === "open" ? "实时" : s === "reconnecting" ? "重连中" : "连接中";
|
||
return <StatusBadge tone={tone}>{label}</StatusBadge>;
|
||
}
|
||
|
||
export default function Home() {
|
||
const q = useLiveDashboard();
|
||
return (
|
||
<>
|
||
<PageHeader
|
||
title="首页"
|
||
description="目标进度、今日产出、缺口和待处理事项。"
|
||
actions={
|
||
<div className="flex items-center gap-2">
|
||
<LiveIndicator />
|
||
{q.data ? (
|
||
<span className="hidden text-meta text-muted-foreground sm:inline">
|
||
更新于 {formatRelative(q.data.generatedAt)}
|
||
</span>
|
||
) : null}
|
||
</div>
|
||
}
|
||
/>
|
||
{q.isPending ? (
|
||
<div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
|
||
{["a", "b", "c", "d", "e", "f"].map((k) => (
|
||
<div key={k} className="pg-slab rounded-xl p-5">
|
||
<LoadingState rows={3} />
|
||
</div>
|
||
))}
|
||
</div>
|
||
) : q.isError ? (
|
||
<ErrorState title="首页加载失败" error={q.error} onRetry={() => q.refetch()} />
|
||
) : (
|
||
<>
|
||
<AutomationBanner a={q.data.automation} />
|
||
<div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
|
||
<Overview a={q.data.automation} />
|
||
<CurrentWork w={q.data.currentWork} />
|
||
<NeedsAttention n={q.data.needsAttention} />
|
||
<CacheSection c={q.data.cache} />
|
||
<SourcesSection s={q.data.sources} />
|
||
<RecentOutput items={q.data.recentOutput} />
|
||
</div>
|
||
</>
|
||
)}
|
||
</>
|
||
);
|
||
}
|