rootandClaude Opus 5.5
e5e42b1f0d
- 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]>
72 lines
2.1 KiB
TypeScript
72 lines
2.1 KiB
TypeScript
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>
|
|
);
|
|
}
|