72 lines
2.0 KiB
TypeScript
72 lines
2.0 KiB
TypeScript
/**
|
||
* filekorolheader: 企业审核统计卡片组件 - 统计数据展示界面
|
||
* 功能：待审核、已通过、已驳回、总企业数统计展示
|
||
* 路径：/central-config/tenant/enterprise-audit/components/AuditStatsCards
|
||
* 规范：遵循crop-x/docs/开发项目规范.md，使用shadcn/ui组件，TypeScript类型安全
|
||
*/
|
||
|
||
import { Enterprise } from './enterpriseAuditApi';
|
||
import { Card } from '@/components/ui/card';
|
||
|
||
interface AuditStatsCardsProps {
|
||
enterprises: Enterprise[];
|
||
loading?: boolean;
|
||
}
|
||
|
||
export function AuditStatsCards({
|
||
enterprises,
|
||
loading = false
|
||
}: AuditStatsCardsProps) {
|
||
const stats = [
|
||
{
|
||
label: '待审核',
|
||
value: enterprises.filter(e => e.auditStatus === '待审核').length,
|
||
color: 'text-yellow-600',
|
||
bg: 'bg-yellow-100',
|
||
},
|
||
{
|
||
label: '已通过',
|
||
value: enterprises.filter(e => e.auditStatus === '已通过').length,
|
||
color: 'text-green-600',
|
||
bg: 'bg-green-100',
|
||
},
|
||
{
|
||
label: '已驳回',
|
||
value: enterprises.filter(e => e.auditStatus === '已驳回').length,
|
||
color: 'text-red-600',
|
||
bg: 'bg-red-100',
|
||
},
|
||
{
|
||
label: '总企业数',
|
||
value: enterprises.length,
|
||
color: 'text-blue-600',
|
||
bg: 'bg-blue-100',
|
||
},
|
||
];
|
||
|
||
if (loading) {
|
||
return (
|
||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
||
{stats.map((_, index) => (
|
||
<Card key={index} className="p-4">
|
||
<div className="animate-pulse">
|
||
<div className="h-4 bg-gray-200 rounded mb-2"></div>
|
||
<div className="h-8 bg-gray-200 rounded"></div>
|
||
</div>
|
||
</Card>
|
||
))}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
||
{stats.map((stat, index) => (
|
||
<Card key={index} className="p-4">
|
||
<div className="text-sm text-muted-foreground">{stat.label}</div>
|
||
<div className={`mt-2 text-2xl font-bold ${stat.color}`}>{stat.value}</div>
|
||
</Card>
|
||
))}
|
||
</div>
|
||
);
|
||
} |