DoTouchAI/apps/web/src/components/console/UsagePanel.tsx

/**
 * 用量面板 - 3 统计卡（今日/7 天/30 天）+ 分模型用量表 + 用量说明
 */
import { useTranslations } from 'next-intl';
import { modelUsage } from './data';
import { cls, StatCard } from './ui';

export function UsagePanel() {
  const t = useTranslations();

  return (
    <div>
      {/* 统计卡：今日 / 7 天 / 30 天请求量 */}
      <div className="grid gap-4 [grid-template-columns:repeat(auto-fit,minmax(210px,1fr))]">
        <StatCard
          label={t('c_today_req')}
          value={
            <>
              1,284 <span className="text-[14px]">{t('c_req_unit')}</span>
            </>
          }
          tone="purple"
          sub={`${t('c_tokens')}: 4.2M`}
        />
        <StatCard
          label={t('c_7days')}
          value={
            <>
              7,940 <span className="text-[14px]">{t('c_req_unit')}</span>
            </>
          }
          sub="31.5M tokens"
        />
        <StatCard
          label={t('c_30days')}
          value={
            <>
              32,118 <span className="text-[14px]">{t('c_req_unit')}</span>
            </>
          }
          tone="green"
          sub="128M tokens"
        />
      </div>

      {/* 分模型用量表 */}
      <div className={cls.secTitle}>{t('c_by_model')}</div>
      <div className="overflow-x-auto rounded-[14px] border border-white/[0.08] bg-brand-card">
        <table className="w-full min-w-[680px] border-collapse">
          <thead>
            <tr>
              <th className={cls.th}>{t('pt_model')}</th>
              <th className={cls.th}>{t('c_requests')}</th>
              <th className={cls.th}>Token in</th>
              <th className={cls.th}>Token out</th>
              <th className={cls.th}>{t('c_cost')}</th>
            </tr>
          </thead>
          <tbody>
            {modelUsage.map((row) => (
              <tr key={row.model} className="group">
                <td className={cls.td}>
                  <b>{row.model}</b>
                </td>
                <td className={cls.td}>{row.requests}</td>
                <td className={`${cls.td} ${cls.mono}`}>{row.tokensIn}</td>
                <td className={`${cls.td} ${cls.mono}`}>{row.tokensOut}</td>
                <td className={`${cls.td} ${cls.mono}`}>{row.cost}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      {/* 用量说明 */}
      <div className={cls.notice}>{t('c_usage_note')}</div>
    </div>
  );
}