nex/frontend/src/pages/Stats/StatCards.tsx

import { Row, Col, Card, Statistic } from 'tdesign-react';
import { ChartBarIcon, ChartLineIcon, ServerIcon, Calendar1Icon } from 'tdesign-icons-react';
import type { UsageStats } from '@/types';

interface StatCardsProps {
  stats: UsageStats[];
}

export function StatCards({ stats }: StatCardsProps) {
  const totalRequests = stats.reduce((sum, s) => sum + s.requestCount, 0);
  const activeModels = new Set(stats.map((s) => s.modelName)).size;
  const activeProviders = new Set(stats.map((s) => s.providerId)).size;

  const today = new Date().toISOString().split('T')[0];
  const todayRequests = stats
    .filter((s) => s.date === today)
    .reduce((sum, s) => sum + s.requestCount, 0);

  return (
    <Row gutter={[16, 16]} style={{ marginBottom: 16 }}>
      <Col xs={12} md={6}>
        <Card bordered={false} hoverShadow>
          <Statistic
            title="总请求量"
            value={totalRequests}
            color="blue"
            prefix={<ChartBarIcon />}
            suffix="次"
            animation={{ duration: 800, valueFrom: 0 }}
            animationStart
          />
        </Card>
      </Col>
      <Col xs={12} md={6}>
        <Card bordered={false} hoverShadow>
          <Statistic
            title="活跃模型数"
            value={activeModels}
            color="green"
            prefix={<ChartLineIcon />}
            suffix="个"
            animation={{ duration: 800, valueFrom: 0 }}
            animationStart
          />
        </Card>
      </Col>
      <Col xs={12} md={6}>
        <Card bordered={false} hoverShadow>
          <Statistic
            title="活跃供应商数"
            value={activeProviders}
            color="orange"
            prefix={<ServerIcon />}
            suffix="个"
            animation={{ duration: 800, valueFrom: 0 }}
            animationStart
          />
        </Card>
      </Col>
      <Col xs={12} md={6}>
        <Card bordered={false} hoverShadow>
          <Statistic
            title="今日请求量"
            value={todayRequests}
            color="red"
            prefix={<Calendar1Icon />}
            suffix="次"
            animation={{ duration: 800, valueFrom: 0 }}
            animationStart
          />
        </Card>
      </Col>
    </Row>
  );
}