9cedf0c437
- shadcn/ui 标准化：废弃纸感令牌，统一 bg-background/text-foreground 等 - Tailwind v4 + @theme inline，移除 tailwind.config.js - React 19 use() + Suspense 流式渲染，首屏骨架秒出 - 三级错误边界：Route → Section → Widget 层层兜底 - 错误上报：useErrorReport → sendBeacon → /api/log mock 端点 - 三层安全边界：L1 角色门禁 / L2 权限点门禁 / L3 数据范围 - 权限位图 base36 压缩：67 权限点 → ~14 字符，JWT 体积减少 ≥ 99% - notify 统一 Toast 封装，禁止业务直接 import sonner - PluginBoundary 替代 PluginLoader（错误边界 + Suspense + Skeleton 三件套） 验证：typecheck 0 错误 / lint 0 错误 / build 6 路由生成成功
51 lines
1.1 KiB
TypeScript
51 lines
1.1 KiB
TypeScript
import type { ReactNode } from "react";
|
||
|
||
import { cn } from "@/shared/lib/utils";
|
||
|
||
/**
|
||
* StatsGrid - 统计卡片网格（对齐 CICD stats-grid.tsx）
|
||
*
|
||
* 响应式列数：mobile=1, md=2, lg=N（由 columns prop 控制）
|
||
* 统一 isLoading 透传到所有子 StatCard
|
||
*
|
||
* @example
|
||
* <StatsGrid columns={4} isLoading={loading}>
|
||
* <StatCard title="学生" value={100} />
|
||
* <StatCard title="教师" value={20} />
|
||
* </StatsGrid>
|
||
*/
|
||
export interface StatsGridProps {
|
||
/** 子节点（通常是多个 StatCard） */
|
||
children: ReactNode;
|
||
/** 桌面端列数（1-5，默认 4） */
|
||
columns?: 1 | 2 | 3 | 4 | 5;
|
||
/** 自定义类名 */
|
||
className?: string;
|
||
}
|
||
|
||
const COLUMNS_CLASS: Record<number, string> = {
|
||
1: "md:grid-cols-1",
|
||
2: "md:grid-cols-2",
|
||
3: "md:grid-cols-3",
|
||
4: "md:grid-cols-4",
|
||
5: "md:grid-cols-5",
|
||
};
|
||
|
||
export function StatsGrid({
|
||
children,
|
||
columns = 4,
|
||
className,
|
||
}: StatsGridProps): ReactNode {
|
||
return (
|
||
<div
|
||
className={cn(
|
||
"grid grid-cols-1 gap-4",
|
||
COLUMNS_CLASS[columns],
|
||
className,
|
||
)}
|
||
>
|
||
{children}
|
||
</div>
|
||
);
|
||
}
|