101 lines
4.0 KiB
TypeScript
101 lines
4.0 KiB
TypeScript
/**
|
||
* filekorolheader: 统计卡片组件 - AI决策统计数据展示
|
||
* 功能：总决策数、状态分布、优先级统计、置信度展示
|
||
* 路径：/ai-crop-model/support/dashboard/components/StatisticsCards
|
||
* 规范：遵循crop-x/docs/开发项目规范.md，使用shadcn语义化样式
|
||
*/
|
||
import { Card } from '@/components/ui/card';
|
||
import { Badge } from '@/components/ui/badge';
|
||
import {
|
||
LayoutDashboard,
|
||
Sparkles,
|
||
Activity,
|
||
CheckCircle,
|
||
AlertCircle,
|
||
Zap,
|
||
} from 'lucide-react';
|
||
import { DecisionStats } from './aiDecisionDashboardReducer';
|
||
|
||
interface StatisticsCardsProps {
|
||
stats: DecisionStats;
|
||
}
|
||
|
||
export function StatisticsCards({ stats }: StatisticsCardsProps) {
|
||
return (
|
||
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
|
||
{/* 总决策数 */}
|
||
<Card className="p-4 bg-card hover:bg-muted transition-colors">
|
||
<div className="flex items-center justify-between mb-2">
|
||
<div className="text-sm text-muted-foreground">总决策数</div>
|
||
<LayoutDashboard className="w-4 h-4 text-muted-foreground" />
|
||
</div>
|
||
<div className="text-2xl font-bold">{stats.total}</div>
|
||
<div className="text-xs text-muted-foreground mt-1">
|
||
全部决策
|
||
</div>
|
||
</Card>
|
||
|
||
{/* 已生成 */}
|
||
<Card className="p-4 bg-card hover:bg-muted transition-colors">
|
||
<div className="flex items-center justify-between mb-2">
|
||
<div className="text-sm text-muted-foreground">已生成</div>
|
||
<Sparkles className="w-4 h-4 text-blue-500 dark:text-blue-400" />
|
||
</div>
|
||
<div className="text-2xl font-bold text-blue-600 dark:text-blue-400">{stats.generated}</div>
|
||
<div className="text-xs text-muted-foreground mt-1">
|
||
待执行
|
||
</div>
|
||
</Card>
|
||
|
||
{/* 执行中 */}
|
||
<Card className="p-4 bg-card hover:bg-muted transition-colors">
|
||
<div className="flex items-center justify-between mb-2">
|
||
<div className="text-sm text-muted-foreground">执行中</div>
|
||
<Activity className="w-4 h-4 text-purple-500 dark:text-purple-400" />
|
||
</div>
|
||
<div className="text-2xl font-bold text-purple-600 dark:text-purple-400">{stats.executing}</div>
|
||
<div className="text-xs text-muted-foreground mt-1">
|
||
正在执行
|
||
</div>
|
||
</Card>
|
||
|
||
{/* 已完成 */}
|
||
<Card className="p-4 bg-card hover:bg-muted transition-colors">
|
||
<div className="flex items-center justify-between mb-2">
|
||
<div className="text-sm text-muted-foreground">已完成</div>
|
||
<CheckCircle className="w-4 h-4 text-green-500 dark:text-green-400" />
|
||
</div>
|
||
<div className="text-2xl font-bold text-green-600 dark:text-green-400">{stats.completed}</div>
|
||
<div className="text-xs text-muted-foreground mt-1">
|
||
执行完成
|
||
</div>
|
||
</Card>
|
||
|
||
{/* 紧急决策 */}
|
||
<Card className="p-4 bg-card hover:bg-muted transition-colors">
|
||
<div className="flex items-center justify-between mb-2">
|
||
<div className="text-sm text-muted-foreground">紧急决策</div>
|
||
<AlertCircle className="w-4 h-4 text-red-500 dark:text-red-400" />
|
||
</div>
|
||
<div className="text-2xl font-bold text-red-600 dark:text-red-400">{stats.urgent}</div>
|
||
<div className="text-xs text-muted-foreground mt-1">
|
||
需优先处理
|
||
</div>
|
||
</Card>
|
||
|
||
{/* 平均置信度 */}
|
||
<Card className="p-4 bg-card hover:bg-muted transition-colors">
|
||
<div className="flex items-center justify-between mb-2">
|
||
<div className="text-sm text-muted-foreground">平均置信度</div>
|
||
<Zap className="w-4 h-4 text-yellow-500 dark:text-yellow-400" />
|
||
</div>
|
||
<div className="text-2xl font-bold text-yellow-600 dark:text-yellow-400">
|
||
{(stats.avgConfidence * 100).toFixed(0)}%
|
||
</div>
|
||
<div className="text-xs text-muted-foreground mt-1">
|
||
决策准确性
|
||
</div>
|
||
</Card>
|
||
</div>
|
||
);
|
||
} |