zclaw_openfang/admin-v2/src/pages/Usage.tsx

// ============================================================
// 用量统计
// ============================================================

import { useState } from 'react'
import { useQuery } from '@tanstack/react-query'
import { Card, Row, Col, Select, Spin, Alert, Statistic, Typography } from 'antd'
import { ColumnWidthOutlined, ThunderboltOutlined } from '@ant-design/icons'
import type { ProColumns } from '@ant-design/pro-components'
import { ProTable } from '@ant-design/pro-components'
import { usageService } from '@/services/usage'
import { telemetryService } from '@/services/telemetry'
import type { DailyUsageStat, ModelUsageStat } from '@/types'

const { Title } = Typography

export default function Usage() {
  const [days, setDays] = useState(30)

  const { data: dailyData, isLoading: dailyLoading, error: dailyError } = useQuery({
    queryKey: ['usage-daily', days],
    queryFn: ({ signal }) => telemetryService.dailyStats({ days }, signal),
  })

  const { data: modelData, isLoading: modelLoading } = useQuery({
    queryKey: ['usage-model', days],
    queryFn: ({ signal }) => telemetryService.modelStats({}, signal),
  })

  if (dailyError) {
    return <Alert type="error" message="加载用量数据失败" description={(dailyError as Error).message} showIcon />
  }

  const totalRequests = dailyData?.reduce((s, d) => s + d.request_count, 0) ?? 0
  const totalTokens = dailyData?.reduce((s, d) => s + d.input_tokens + d.output_tokens, 0) ?? 0

  const dailyColumns: ProColumns<DailyUsageStat>[] = [
    { title: '日期', dataIndex: 'day', width: 120 },
    { title: '请求数', dataIndex: 'request_count', width: 100, render: (_, r) => r.request_count.toLocaleString() },
    { title: '输入 Token', dataIndex: 'input_tokens', width: 120, render: (_, r) => r.input_tokens.toLocaleString() },
    { title: '输出 Token', dataIndex: 'output_tokens', width: 120, render: (_, r) => r.output_tokens.toLocaleString() },
    { title: '设备数', dataIndex: 'unique_devices', width: 80 },
  ]

  const modelColumns: ProColumns<ModelUsageStat>[] = [
    { title: '模型', dataIndex: 'model_id', width: 200 },
    { title: '请求数', dataIndex: 'request_count', width: 100, render: (_, r) => r.request_count.toLocaleString() },
    { title: '输入 Token', dataIndex: 'input_tokens', width: 120, render: (_, r) => r.input_tokens.toLocaleString() },
    { title: '输出 Token', dataIndex: 'output_tokens', width: 120, render: (_, r) => r.output_tokens.toLocaleString() },
    {
      title: '平均延迟',
      dataIndex: 'avg_latency_ms',
      width: 100,
      render: (_, r) => r.avg_latency_ms ? `${Math.round(r.avg_latency_ms)}ms` : '-',
    },
    {
      title: '成功率',
      dataIndex: 'success_rate',
      width: 100,
      render: (_, r) => `${(r.success_rate * 100).toFixed(1)}%`,
    },
  ]

  return (
    <div>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 24 }}>
        <Title level={4} style={{ margin: 0 }}>用量统计</Title>
        <Select
          value={days}
          onChange={setDays}
          options={[
            { value: 7, label: '最近 7 天' },
            { value: 30, label: '最近 30 天' },
            { value: 90, label: '最近 90 天' },
          ]}
          style={{ width: 140 }}
        />
      </div>

      <Row gutter={[16, 16]} style={{ marginBottom: 24 }}>
        <Col span={12}>
          <Card>
            <Statistic title="总请求数" value={totalRequests} prefix={<ThunderboltOutlined />} />
          </Card>
        </Col>
        <Col span={12}>
          <Card>
            <Statistic title="总 Token 数" value={totalTokens} prefix={<ColumnWidthOutlined />} />
          </Card>
        </Col>
      </Row>

      <Card title="每日统计" style={{ marginBottom: 24 }} size="small">
        <ProTable<DailyUsageStat>
          columns={dailyColumns}
          dataSource={dailyData ?? []}
          loading={dailyLoading}
          rowKey="day"
          search={false}
          toolBarRender={false}
          pagination={false}
          size="small"
        />
      </Card>

      <Card title="按模型统计" size="small">
        <ProTable<ModelUsageStat>
          columns={modelColumns}
          dataSource={modelData ?? []}
          loading={modelLoading}
          rowKey="model_id"
          search={false}
          toolBarRender={false}
          pagination={false}
          size="small"
        />
      </Card>
    </div>
  )
}