生产管理系统 - 企业审核与审核历史联调

crop-x/src/app/(app)/central-config/tenant/enterprise-audit/components/AuditStatsCards.tsx

@@ -1,30 +1,38 @@
-'use client';
+/**
+ * filekorolheader: 企业审核统计卡片组件 - 统计数据展示界面
+ * 功能：待审核、已通过、已驳回、总企业数统计展示
+ * 路径：/central-config/tenant/enterprise-audit/components/AuditStatsCards
+ * 规范：遵循crop-x/docs/开发项目规范.md，使用shadcn/ui组件，TypeScript类型安全
+ */
 
-import React from 'react';
+import { Enterprise } from './enterpriseAuditApi';
 import { Card } from '@/components/ui/card';
-import { AuditStats, Enterprise } from '../types';
 
 interface AuditStatsCardsProps {
   enterprises: Enterprise[];
+  loading?: boolean;
 }
 
-export function AuditStatsCards({ enterprises }: AuditStatsCardsProps) {
-  const stats: AuditStats[] = [
+export function AuditStatsCards({
+  enterprises,
+  loading = false
+}: AuditStatsCardsProps) {
+  const stats = [
     {
       label: '待审核',
-      value: enterprises.filter(e => e.auditStatus === 'pending').length,
+      value: enterprises.filter(e => e.auditStatus === '待审核').length,
       color: 'text-yellow-600',
       bg: 'bg-yellow-100',
     },
     {
       label: '已通过',
-      value: enterprises.filter(e => e.auditStatus === 'approved').length,
+      value: enterprises.filter(e => e.auditStatus === '已通过').length,
       color: 'text-green-600',
       bg: 'bg-green-100',
     },
     {
       label: '已驳回',
-      value: enterprises.filter(e => e.auditStatus === 'rejected').length,
+      value: enterprises.filter(e => e.auditStatus === '已驳回').length,
       color: 'text-red-600',
       bg: 'bg-red-100',
     },
@@ -36,12 +44,27 @@ export function AuditStatsCards({ enterprises }: AuditStatsCardsProps) {
     },
   ];
 
+  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 ${stat.color} text-2xl font-semibold`}>{stat.value}</div>
+          <div className={`mt-2 text-2xl font-bold ${stat.color}`}>{stat.value}</div>
         </Card>
       ))}
     </div>