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]>
This commit is contained in:
rootandClaude Opus 5.5 committed
1 parent
a24bda952b
commit
e5e42b1f0d
32 files changed
+1286
-71
No files matched your search
@@ -0,0 +1,167 @@
|
||||
import type { LucideIcon } from "lucide-react";
|
||||
import type { ReactNode } from "react";
|
||||
import { Button } from "~/components/ui/button.tsx";
|
||||
import { cn } from "~/lib/utils.ts";
|
||||
import { EmptyState, ErrorState, LoadingState } from "./empty-state.tsx";
|
||||
|
||||
export type DataColumn<T> = {
|
||||
/** 列 key(React key 用) */
|
||||
key: string;
|
||||
header: ReactNode;
|
||||
cell: (row: T) => ReactNode;
|
||||
/** 窄屏隐藏该列,避免横向溢出 */
|
||||
hideBelow?: "sm" | "md" | "lg";
|
||||
align?: "left" | "right";
|
||||
className?: string;
|
||||
};
|
||||
|
||||
const HIDE: Record<NonNullable<DataColumn<unknown>["hideBelow"]>, string> = {
|
||||
sm: "hidden sm:table-cell",
|
||||
md: "hidden md:table-cell",
|
||||
lg: "hidden lg:table-cell",
|
||||
};
|
||||
|
||||
/**
|
||||
* 数据表:内置 loading / error / empty 三态与"加载更多"游标翻页。
|
||||
* 外层自带 pg-slab 卡片(plain 时不带);表格在卡片内横向滚动,页面本身不溢出。
|
||||
*
|
||||
* <DataTable columns={cols} rows={q.data?.items} rowKey={(r) => r.id}
|
||||
* loading={q.isPending} error={q.error} onRetry={q.refetch}
|
||||
* empty={{ title: "还没有记录" }} onRowClick={(r) => open(r.id)}
|
||||
* hasMore={!!next} onLoadMore={...} loadingMore={...} />
|
||||
*/
|
||||
export function DataTable<T>({
|
||||
columns,
|
||||
rows,
|
||||
rowKey,
|
||||
loading = false,
|
||||
error,
|
||||
onRetry,
|
||||
empty,
|
||||
onRowClick,
|
||||
selectedKey,
|
||||
hasMore = false,
|
||||
onLoadMore,
|
||||
loadingMore = false,
|
||||
plain = false,
|
||||
className,
|
||||
}: {
|
||||
columns: DataColumn<T>[];
|
||||
rows: T[] | undefined;
|
||||
rowKey: (row: T) => string;
|
||||
loading?: boolean;
|
||||
error?: unknown;
|
||||
onRetry?: () => void;
|
||||
empty?: { title: string; description?: ReactNode; icon?: LucideIcon; action?: ReactNode };
|
||||
onRowClick?: (row: T) => void;
|
||||
selectedKey?: string | null;
|
||||
hasMore?: boolean;
|
||||
onLoadMore?: () => void;
|
||||
loadingMore?: boolean;
|
||||
plain?: boolean;
|
||||
className?: string;
|
||||
}) {
|
||||
let body: ReactNode;
|
||||
if (loading && !rows) {
|
||||
body = <LoadingState rows={5} className="p-4" />;
|
||||
} else if (error && !rows) {
|
||||
body = <ErrorState plain error={error} onRetry={onRetry} />;
|
||||
} else if (!rows || rows.length === 0) {
|
||||
body = (
|
||||
<EmptyState
|
||||
plain
|
||||
icon={empty?.icon}
|
||||
title={empty?.title ?? "暂无数据"}
|
||||
description={empty?.description}
|
||||
action={empty?.action}
|
||||
className="py-12"
|
||||
/>
|
||||
);
|
||||
} else {
|
||||
body = (
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-left text-sm">
|
||||
<thead>
|
||||
<tr className="border-b border-border">
|
||||
{columns.map((c) => (
|
||||
<th
|
||||
key={c.key}
|
||||
scope="col"
|
||||
className={cn(
|
||||
"px-4 py-2.5 text-meta font-medium whitespace-nowrap text-muted-foreground",
|
||||
c.align === "right" && "text-right",
|
||||
c.hideBelow && HIDE[c.hideBelow],
|
||||
c.className,
|
||||
)}
|
||||
>
|
||||
{c.header}
|
||||
</th>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{rows.map((row) => {
|
||||
const key = rowKey(row);
|
||||
return (
|
||||
<tr
|
||||
key={key}
|
||||
onClick={onRowClick ? () => onRowClick(row) : undefined}
|
||||
onKeyDown={
|
||||
onRowClick
|
||||
? (e) => {
|
||||
if (e.key === "Enter" || e.key === " ") {
|
||||
e.preventDefault();
|
||||
onRowClick(row);
|
||||
}
|
||||
}
|
||||
: undefined
|
||||
}
|
||||
tabIndex={onRowClick ? 0 : undefined}
|
||||
aria-selected={selectedKey != null ? selectedKey === key : undefined}
|
||||
className={cn(
|
||||
"border-b border-border/60 transition-colors duration-micro last:border-b-0",
|
||||
onRowClick &&
|
||||
"cursor-pointer outline-none hover:bg-foreground/[0.04] focus-visible:bg-foreground/[0.06]",
|
||||
selectedKey === key && "bg-foreground/[0.05]",
|
||||
)}
|
||||
>
|
||||
{columns.map((c) => (
|
||||
<td
|
||||
key={c.key}
|
||||
className={cn(
|
||||
"px-4 py-2.5 align-middle",
|
||||
c.align === "right" && "text-right",
|
||||
c.hideBelow && HIDE[c.hideBelow],
|
||||
c.className,
|
||||
)}
|
||||
>
|
||||
{c.cell(row)}
|
||||
</td>
|
||||
))}
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={cn("min-w-0 overflow-hidden rounded-xl", !plain && "pg-slab", className)}>
|
||||
{body}
|
||||
{rows && rows.length > 0 && (hasMore || error) ? (
|
||||
<div className="flex items-center justify-center gap-3 border-t border-border/60 px-4 py-3">
|
||||
{error ? (
|
||||
<span className="text-meta text-destructive">{String((error as Error).message ?? error)}</span>
|
||||
) : null}
|
||||
{hasMore && onLoadMore ? (
|
||||
<Button variant="outline" size="sm" onClick={onLoadMore} disabled={loadingMore}>
|
||||
{loadingMore ? "加载中…" : "加载更多"}
|
||||
</Button>
|
||||
) : null}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user