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]>
2026-09-28 16:10:42 +08:00
1 parent 4bb2583f6c
commit 738d4ce752
@@ -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>
+  );
+}