feat(portal-shell): v2.0 P0 shadcn standardization + security + streaming + error handling
- 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 路由生成成功
This commit is contained in:
50
apps/portal-shell/src/shared/components/ui/stats-grid.tsx
Normal file
50
apps/portal-shell/src/shared/components/ui/stats-grid.tsx
Normal file
@@ -0,0 +1,50 @@
|
||||
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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user