feat(web): W3-1 shared console routes, nav, api/sse/query-keys and shared components

- routes.ts registers all workspaces under /console (+ detail routes, engine, audit, login) - api.ts: cookie session first (credentials include, CSRF header), Bearer only with stored key, 401 -> /login - sse.ts: shared EventSource with ?after=seq catch-up, backoff reconnect, per-type subscribe - shared components: data-table, filter-bar, detail-sheet, timeline, json-view, confirm-dialog, form-field, kv-list, stat-tile, error/loading states; ui tabs and textarea Co-Authored-By: Claude Opus 5.5 <[email protected]>
2026-09-27 20:21:29 +08:00
1 parent a24bda952b
commit e5e42b1f0d
@@ -0,0 +1,71 @@
+import type { ReactNode } from "react";
+import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from "~/components/ui/sheet.tsx";
+import { cn } from "~/lib/utils.ts";
+
+/**
+ * 右侧详情抽屉(手机全宽)。内容区自带纵向滚动;footer 固定在底部放操作按钮。
+ *   <DetailSheet open={!!id} onOpenChange={(o) => !o && setId(null)} title="详情" description="…">
+ *     <KvList items={…} />
+ *   </DetailSheet>
+ */
+export function DetailSheet({
+  open,
+  onOpenChange,
+  title,
+  description,
+  children,
+  footer,
+  width = "md",
+  className,
+}: {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  title: ReactNode;
+  description?: ReactNode;
+  children: ReactNode;
+  footer?: ReactNode;
+  /** 桌面宽度:md ≈ 32rem,lg ≈ 44rem */
+  width?: "md" | "lg";
+  className?: string;
+}) {
+  return (
+    <Sheet open={open} onOpenChange={onOpenChange}>
+      <SheetContent
+        side="right"
+        className={cn("w-full gap-0 p-0", width === "lg" ? "sm:max-w-2xl" : "sm:max-w-lg", className)}
+      >
+        <SheetHeader className="border-b border-[var(--shell-border)] px-5 py-4 pr-14">
+          <SheetTitle className="truncate text-lead">{title}</SheetTitle>
+          {description ? <SheetDescription className="break-words">{description}</SheetDescription> : null}
+        </SheetHeader>
+        <div className="min-h-0 flex-1 space-y-5 overflow-y-auto px-5 py-4">{children}</div>
+        {footer ? (
+          <div className="flex flex-wrap items-center justify-end gap-2 border-t border-[var(--shell-border)] px-5 py-3">
+            {footer}
+          </div>
+        ) : null}
+      </SheetContent>
+    </Sheet>
+  );
+}
+
+/** 抽屉/卡片内的小节:大写小标签 + 内容 */
+export function DetailSection({
+  title,
+  children,
+  actions,
+}: {
+  title: string;
+  children: ReactNode;
+  actions?: ReactNode;
+}) {
+  return (
+    <section>
+      <div className="mb-2 flex items-center justify-between gap-2">
+        <h3 className="text-label font-semibold tracking-[0.18em] text-muted-foreground uppercase">{title}</h3>
+        {actions}
+      </div>
+      {children}
+    </section>
+  );
+}