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:
1 parent
4bb2583f6c
commit
738d4ce752
18 files changed
+647
-1104
No files matched your search
@@ -0,0 +1,136 @@
|
||||
import { useQueryClient } from "@tanstack/react-query";
|
||||
import type { Decision, DecisionKind } from "@umt/contracts";
|
||||
import { ArrowRight, Bell, CheckCheck } from "lucide-react";
|
||||
import { useMemo, useRef, useState } from "react";
|
||||
import { Link, useNavigate } from "react-router";
|
||||
import { decisionKeys, useDecisionSummary, useDecisions } from "~/api/decisions.ts";
|
||||
import { SEVERITY } from "~/components/library/labels.ts";
|
||||
import { Button } from "~/components/ui/button.tsx";
|
||||
import { Popover, PopoverContent, PopoverTrigger } from "~/components/ui/popover.tsx";
|
||||
import { decisionKindLabel, formatRelative } from "~/lib/labels.ts";
|
||||
import { useSse } from "~/lib/sse.ts";
|
||||
import { cn } from "~/lib/utils.ts";
|
||||
|
||||
// 顶栏收件箱(IA-3):待处理不进侧栏,铃铛 + 未决角标;下拉按问题类型列最近事项,点开进待处理页。
|
||||
|
||||
const RECENT = 8;
|
||||
const DOT = { info: "bg-muted-foreground/60", warning: "bg-warning", critical: "bg-destructive" } as const;
|
||||
|
||||
/** 未决数与最近事项;SSE decision.* 到达时刷新 */
|
||||
export function useLiveDecisions() {
|
||||
const qc = useQueryClient();
|
||||
const timer = useRef<ReturnType<typeof setTimeout> | null>(null);
|
||||
useSse(["decision.created", "decision.updated"], () => {
|
||||
if (timer.current) return;
|
||||
timer.current = setTimeout(() => {
|
||||
timer.current = null;
|
||||
void qc.invalidateQueries({ queryKey: decisionKeys.all });
|
||||
}, 800);
|
||||
});
|
||||
return useDecisionSummary();
|
||||
}
|
||||
|
||||
export const inboxPath = (kind?: string) => (kind ? `/console/inbox?kind=${kind}` : "/console/inbox");
|
||||
|
||||
export function InboxBell() {
|
||||
const summary = useLiveDecisions();
|
||||
const [open, setOpen] = useState(false);
|
||||
const list = useDecisions({}, open);
|
||||
const navigate = useNavigate();
|
||||
const total = summary.data?.total ?? 0;
|
||||
|
||||
const groups = useMemo(() => {
|
||||
const items = (list.data?.pages[0]?.items ?? []).slice(0, RECENT);
|
||||
const m = new Map<DecisionKind, Decision[]>();
|
||||
for (const d of items) m.set(d.kind, [...(m.get(d.kind) ?? []), d]);
|
||||
const counts = new Map<DecisionKind, number>();
|
||||
for (const g of summary.data?.groups ?? []) counts.set(g.kind, (counts.get(g.kind) ?? 0) + g.count);
|
||||
return [...m.entries()].map(([kind, ds]) => ({ kind, items: ds, count: counts.get(kind) ?? ds.length }));
|
||||
}, [list.data, summary.data]);
|
||||
|
||||
const go = (to: string) => {
|
||||
setOpen(false);
|
||||
navigate(to);
|
||||
};
|
||||
|
||||
return (
|
||||
<Popover open={open} onOpenChange={setOpen}>
|
||||
<PopoverTrigger asChild>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="relative h-8 w-8"
|
||||
aria-label={total ? `待处理 ${total} 项` : "待处理"}
|
||||
title={total ? `待处理 ${total} 项` : "待处理"}
|
||||
>
|
||||
<Bell className="h-4 w-4" />
|
||||
{total ? (
|
||||
<span className="absolute -top-0.5 -right-0.5 min-w-4 rounded-full bg-warning px-1 text-center text-micro leading-4 font-semibold text-background tabular-nums">
|
||||
{total > 99 ? "99+" : total}
|
||||
</span>
|
||||
) : null}
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent align="end" className="w-[min(22rem,calc(100vw-2rem))] p-0">
|
||||
<div className="flex items-center justify-between border-b border-border/60 px-4 py-3">
|
||||
<p className="text-sm font-semibold text-foreground">
|
||||
待处理
|
||||
{total ? <span className="ml-1.5 text-warning tabular-nums">{total}</span> : null}
|
||||
</p>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => go(inboxPath())}
|
||||
className="inline-flex cursor-pointer items-center gap-1 text-meta text-muted-foreground hover:text-foreground"
|
||||
>
|
||||
查看全部
|
||||
<ArrowRight className="h-3.5 w-3.5" />
|
||||
</button>
|
||||
</div>
|
||||
{list.isPending ? (
|
||||
<p className="px-4 py-6 text-center text-caption text-muted-foreground">加载中…</p>
|
||||
) : list.isError ? (
|
||||
<p className="px-4 py-6 text-center text-caption text-destructive">加载失败,稍后再试</p>
|
||||
) : groups.length === 0 ? (
|
||||
<div className="flex flex-col items-center gap-2 px-4 py-8 text-caption text-muted-foreground">
|
||||
<CheckCheck className="h-5 w-5" />
|
||||
没有需要处理的事项
|
||||
</div>
|
||||
) : (
|
||||
<div className="max-h-[60vh] overflow-y-auto py-1">
|
||||
{groups.map((g) => (
|
||||
<section key={g.kind} className="py-1">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => go(inboxPath(g.kind))}
|
||||
className="flex w-full cursor-pointer items-center justify-between px-4 py-1 text-meta font-medium text-muted-foreground hover:text-foreground"
|
||||
>
|
||||
<span>{decisionKindLabel(g.kind)}</span>
|
||||
<span className="tabular-nums">{g.count}</span>
|
||||
</button>
|
||||
<ul>
|
||||
{g.items.map((d) => (
|
||||
<li key={d.id}>
|
||||
<Link
|
||||
to={inboxPath(d.kind)}
|
||||
onClick={() => setOpen(false)}
|
||||
className="flex items-start gap-2.5 px-4 py-2 hover:bg-foreground/[0.04]"
|
||||
>
|
||||
<span aria-hidden className={cn("mt-1.5 h-1.5 w-1.5 shrink-0 rounded-full", DOT[d.severity])} />
|
||||
<span className="min-w-0 flex-1">
|
||||
<span className="line-clamp-2 text-caption text-foreground">{d.title}</span>
|
||||
<span className="text-meta text-muted-foreground">
|
||||
{SEVERITY[d.severity].label} · {formatRelative(d.createdAt)}
|
||||
</span>
|
||||
</span>
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</section>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
);
|
||||
}
|
||||
@@ -1,7 +1,7 @@
|
||||
import { readFileSync } from "node:fs";
|
||||
import { describe, expect, it } from "vitest";
|
||||
import { LEGACY_REDIRECTS, legacyRedirect } from "../../routes/console/redirects.ts";
|
||||
import { consolePath, findNavItem, NAV_GROUPS, NAV_ITEMS, settingsPath } from "./nav.ts";
|
||||
import { consolePath, findNavItem, NAV_GROUPS, NAV_ITEMS, pageTitle, settingsPath } from "./nav.ts";
|
||||
|
||||
/** routes.ts 里登记的控制台路由(相对 /console) */
|
||||
const ROUTE_PATTERNS = [
|
||||
@@ -16,13 +16,26 @@ const matchesRoute = (pathname: string) => {
|
||||
};
|
||||
|
||||
describe("控制台导航", () => {
|
||||
it("7 组 18 项(另加系统组的定时任务),路径唯一且都在 /console 下", () => {
|
||||
expect(NAV_GROUPS.map((g) => g.title)).toEqual(["概览", "资源", "订阅", "下载", "整理", "Agent", "系统"]);
|
||||
const core = NAV_ITEMS.filter((i) => i.to !== "/console/schedules");
|
||||
expect(core).toHaveLength(18);
|
||||
it("IA-3:5 组,按定稿清单逐项列出,路径唯一且都在 /console 下", () => {
|
||||
expect(NAV_GROUPS.map((g) => g.title)).toEqual(["概览", "资源", "订阅", "整理", "系统"]);
|
||||
expect(NAV_GROUPS.map((g) => g.items.map((i) => i.label))).toEqual([
|
||||
["首页", "任务", "Agent 会话"],
|
||||
["站点", "RSS 订阅"],
|
||||
["订阅", "规则"],
|
||||
["下载面板", "整理记录", "文件管理", "媒体概览"],
|
||||
["设置", "审计", "运行状态"],
|
||||
]);
|
||||
// 定稿文字写"共 12 项",逐项清单实际是 14 项;以清单为准
|
||||
expect(NAV_ITEMS).toHaveLength(14);
|
||||
expect(new Set(NAV_ITEMS.map((i) => i.to)).size).toBe(NAV_ITEMS.length);
|
||||
expect(NAV_ITEMS.every((i) => i.to.startsWith("/console"))).toBe(true);
|
||||
for (const g of NAV_GROUPS) expect(g.items.length).toBeLessThanOrEqual(4);
|
||||
});
|
||||
|
||||
it("取消的入口不在侧栏:待处理走顶栏收件箱,引擎面板 / 定时任务 / 身份并入别处", () => {
|
||||
const paths = NAV_ITEMS.map((i) => i.to);
|
||||
for (const p of ["/console/inbox", "/console/engine", "/console/schedules", "/console/identity"])
|
||||
expect(paths).not.toContain(p);
|
||||
expect(pageTitle("/console/inbox")).toBe("待处理");
|
||||
});
|
||||
|
||||
it("每个导航项都有路由", () => {
|
||||
@@ -32,13 +45,13 @@ describe("控制台导航", () => {
|
||||
it("按最长前缀匹配当前项", () => {
|
||||
expect(findNavItem("/console")?.label).toBe("首页");
|
||||
expect(findNavItem("/console/")?.label).toBe("首页");
|
||||
expect(findNavItem("/console/library/abc")?.label).toBe("媒体库");
|
||||
expect(findNavItem("/console/engine/r1")?.label).toBe("引擎面板");
|
||||
expect(findNavItem("/console/downloads")?.label).toBe("下载队列");
|
||||
expect(findNavItem("/console/downloads/plans")?.label).toBe("下载计划");
|
||||
expect(findNavItem("/console/downloads/abc")?.label).toBe("下载队列");
|
||||
expect(findNavItem("/console/tasks/abc")?.label).toBe("业务任务");
|
||||
expect(findNavItem("/console/library/abc")?.label).toBe("媒体概览");
|
||||
expect(findNavItem("/console/tasks/r1")?.label).toBe("任务");
|
||||
expect(findNavItem("/console/downloads")?.label).toBe("下载面板");
|
||||
expect(findNavItem("/console/downloads/plans")?.label).toBe("下载面板");
|
||||
expect(findNavItem("/console/downloads/abc")?.label).toBe("下载面板");
|
||||
expect(findNavItem("/console/sites/abc")?.label).toBe("站点");
|
||||
expect(findNavItem("/console/status")?.label).toBe("运行状态");
|
||||
expect(findNavItem("/nope")).toBeUndefined();
|
||||
});
|
||||
|
||||
@@ -64,12 +77,15 @@ describe("旧链接重定向", () => {
|
||||
for (const { to } of LEGACY_REDIRECTS) {
|
||||
const u = new URL(to, "http://x");
|
||||
expect(matchesRoute(u.pathname), to).toBe(true);
|
||||
if (u.pathname !== "/console/sites/abc") expect(legacyRedirect(u.pathname, u.search)).toBeNull();
|
||||
if (u.pathname !== "/console/sites/abc") expect(legacyRedirect(u.pathname, u.search), to).toBeNull();
|
||||
}
|
||||
});
|
||||
|
||||
it("不相关的 query 不跳转", () => {
|
||||
expect(legacyRedirect("/console/tasks", "?kind=submitDownload")).toBeNull();
|
||||
expect(legacyRedirect("/console/tasks", "?tab=plan&job=trash.purge")).toBeNull();
|
||||
expect(legacyRedirect("/console/tasks", "?tab=failed")).toBeNull();
|
||||
expect(legacyRedirect("/console/library", "?filter=unidentified")).toBeNull();
|
||||
expect(legacyRedirect("/console/subscriptions", "")).toBeNull();
|
||||
expect(legacyRedirect("/console/sources", "?health=failing")).toBeNull();
|
||||
});
|
||||
|
||||
@@ -1,15 +1,12 @@
|
||||
import {
|
||||
Activity,
|
||||
Bot,
|
||||
CalendarClock,
|
||||
ClipboardList,
|
||||
Download,
|
||||
FileStack,
|
||||
Fingerprint,
|
||||
FolderTree,
|
||||
Gauge,
|
||||
Globe,
|
||||
House,
|
||||
Inbox,
|
||||
Library,
|
||||
ListChecks,
|
||||
ListTodo,
|
||||
@@ -17,8 +14,6 @@ import {
|
||||
Rss,
|
||||
ScrollText,
|
||||
Settings,
|
||||
Tags,
|
||||
Timer,
|
||||
} from "lucide-react";
|
||||
|
||||
export type NavItem = {
|
||||
@@ -26,8 +21,6 @@ export type NavItem = {
|
||||
label: string;
|
||||
icon: LucideIcon;
|
||||
description: string;
|
||||
/** 侧栏角标的数据来源 */
|
||||
badge?: "decisions";
|
||||
};
|
||||
export type NavGroup = { title: string; items: NavItem[] };
|
||||
|
||||
@@ -41,8 +34,8 @@ export function consolePath(...segments: (string | number)[]): string {
|
||||
}
|
||||
|
||||
/**
|
||||
* 侧栏 7 组(docs/design/console-ia.md §3.2),按业务流程排:概览 → 资源 → 订阅 → 下载 → 整理 → Agent → 系统。
|
||||
* 移动端抽屉用同一份表。
|
||||
* 侧栏 5 组 14 项(IA-3 定稿清单;定稿文字写"共 12 项",以逐项清单为准,docs/plan/00-first-version-plan.md §8):概览 → 资源 → 订阅 → 整理 → 系统。
|
||||
* 待处理不进侧栏,由顶栏收件箱打开;移动端抽屉用同一份表。
|
||||
*/
|
||||
export const NAV_GROUPS: NavGroup[] = [
|
||||
{
|
||||
@@ -52,14 +45,19 @@ export const NAV_GROUPS: NavGroup[] = [
|
||||
to: "/console",
|
||||
label: "首页",
|
||||
icon: House,
|
||||
description: "自动化概览、当前工作、待处理、缓存、来源健康、最近产出",
|
||||
description: "正在进行、需要处理、计划、最近结果与运行状态",
|
||||
},
|
||||
{
|
||||
to: "/console/inbox",
|
||||
label: "待处理",
|
||||
icon: Inbox,
|
||||
description: "按作品和问题类型合并的待处理事项",
|
||||
badge: "decisions",
|
||||
to: "/console/tasks",
|
||||
label: "任务",
|
||||
icon: ListTodo,
|
||||
description: "每次运行都是一条任务:定时、事件、手动、Agent 触发都在这里,含定时任务计划",
|
||||
},
|
||||
{
|
||||
to: "/console/agent",
|
||||
label: "Agent 会话",
|
||||
icon: Bot,
|
||||
description: "交代目标,Agent 在授权内执行并汇报",
|
||||
},
|
||||
],
|
||||
},
|
||||
@@ -72,64 +70,20 @@ export const NAV_GROUPS: NavGroup[] = [
|
||||
icon: Globe,
|
||||
description: "站点、凭证、账号数据与健康;资源、快照与 Feed",
|
||||
},
|
||||
{
|
||||
to: "/console/sources",
|
||||
label: "来源健康",
|
||||
icon: Rss,
|
||||
description: "全部 Feed 与站点的抓取状态",
|
||||
},
|
||||
{ to: "/console/sources", label: "RSS 订阅", icon: Rss, description: "全部 Feed 与抓取状态" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "订阅",
|
||||
items: [
|
||||
{
|
||||
to: "/console/subscriptions",
|
||||
label: "订阅",
|
||||
icon: CalendarClock,
|
||||
description: "单次收录与持续追踪",
|
||||
},
|
||||
{
|
||||
to: "/console/rules",
|
||||
label: "收录策略",
|
||||
icon: ListChecks,
|
||||
description: "新作品收录条件、默认版本目标与策略版本",
|
||||
},
|
||||
{
|
||||
to: "/console/preferences",
|
||||
label: "偏好标签",
|
||||
icon: Tags,
|
||||
description: "软偏好影响排序,硬规则直接排除",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "下载",
|
||||
items: [
|
||||
{
|
||||
to: "/console/downloads",
|
||||
label: "下载队列",
|
||||
icon: Download,
|
||||
description: "下载任务与缓存水位",
|
||||
},
|
||||
{
|
||||
to: "/console/downloads/plans",
|
||||
label: "下载计划",
|
||||
icon: ClipboardList,
|
||||
description: "选中候选后生成的计划与空间预留",
|
||||
},
|
||||
{
|
||||
to: "/console/tasks",
|
||||
label: "业务任务",
|
||||
icon: ListTodo,
|
||||
description: "提交下载、核验入库、清理缓存等后台任务",
|
||||
},
|
||||
{ to: "/console/subscriptions", label: "订阅", icon: CalendarClock, description: "单次收录与持续追踪" },
|
||||
{ to: "/console/rules", label: "规则", icon: ListChecks, description: "收录策略与偏好标签" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "整理",
|
||||
items: [
|
||||
{ to: "/console/library", label: "媒体库", icon: Library, description: "作品、季 / 集、版本目标与实际路径" },
|
||||
{ to: "/console/downloads", label: "下载面板", icon: Download, description: "下载任务、下载计划与缓存水位" },
|
||||
{
|
||||
to: "/console/organize",
|
||||
label: "整理记录",
|
||||
@@ -143,21 +97,10 @@ export const NAV_GROUPS: NavGroup[] = [
|
||||
description: "浏览登记目录,改名、移动、删除与整理",
|
||||
},
|
||||
{
|
||||
to: "/console/identity",
|
||||
label: "身份与元数据",
|
||||
icon: Fingerprint,
|
||||
description: "外部身份、待识别资源与别名",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Agent",
|
||||
items: [
|
||||
{
|
||||
to: "/console/agent",
|
||||
label: "Agent 会话",
|
||||
icon: Bot,
|
||||
description: "交代目标,Agent 在授权内执行并汇报",
|
||||
to: "/console/library",
|
||||
label: "媒体概览",
|
||||
icon: Library,
|
||||
description: "作品、季 / 集、版本目标、外部身份与待识别资源",
|
||||
},
|
||||
],
|
||||
},
|
||||
@@ -170,28 +113,29 @@ export const NAV_GROUPS: NavGroup[] = [
|
||||
icon: Settings,
|
||||
description: "下载器、媒体服务器、库根、站点账号、Agent 上游与自动化",
|
||||
},
|
||||
{
|
||||
to: "/console/schedules",
|
||||
label: "定时任务",
|
||||
icon: Timer,
|
||||
description: "周期任务与 Agent 巡检的开关、间隔和运行记录",
|
||||
},
|
||||
{
|
||||
to: "/console/engine",
|
||||
label: "引擎面板",
|
||||
icon: Activity,
|
||||
description: "排查用,业务进度看业务任务。仅管理员",
|
||||
},
|
||||
{
|
||||
to: "/console/audit",
|
||||
label: "审计日志",
|
||||
label: "审计",
|
||||
icon: ScrollText,
|
||||
description: "登录、设置、密钥与实例变更的操作留痕",
|
||||
description: "登录、设置、密钥、任务操作的留痕",
|
||||
},
|
||||
{
|
||||
to: "/console/status",
|
||||
label: "运行状态",
|
||||
icon: Gauge,
|
||||
description: "进程心跳、事件循环、数据库、磁盘与挂载根",
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
/** 不在侧栏但有页面的路由:顶栏标题用 */
|
||||
const EXTRA_TITLES: Record<string, string> = {
|
||||
"/console/inbox": "待处理",
|
||||
"/console/preferences": "偏好标签",
|
||||
"/console/search": "搜索",
|
||||
};
|
||||
|
||||
export const NAV_ITEMS = NAV_GROUPS.flatMap((g) => g.items);
|
||||
|
||||
/** 设置页深链(IA-2):`/console/settings#分区[/节]`。调用方只认新分区名 */
|
||||
@@ -218,3 +162,9 @@ export function findNavItem(pathname: string): NavItem | undefined {
|
||||
)[0]
|
||||
);
|
||||
}
|
||||
|
||||
/** 顶栏标题:导航项名,或不在侧栏的页面名 */
|
||||
export function pageTitle(pathname: string): string | undefined {
|
||||
const path = pathname.replace(/\/+$/, "");
|
||||
return findNavItem(pathname)?.label ?? EXTRA_TITLES[path];
|
||||
}
|
||||
Reference in new issue
Block a user