331 lines
14 KiB
TypeScript
331 lines
14 KiB
TypeScript
'use client'
|
|
|
|
import { useState } from 'react'
|
|
import useSWR from 'swr'
|
|
import { Zap, Monitor, Smartphone } from 'lucide-react'
|
|
import {
|
|
LineChart,
|
|
Line,
|
|
XAxis,
|
|
YAxis,
|
|
CartesianGrid,
|
|
Tooltip,
|
|
ResponsiveContainer,
|
|
BarChart,
|
|
Bar,
|
|
Legend,
|
|
} from 'recharts'
|
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
|
|
import { ErrorBanner, EmptyState } from '@/components/ui/state'
|
|
import { TableSkeleton, ChartSkeleton } from '@/components/ui/skeleton'
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from '@/components/ui/select'
|
|
import {
|
|
Table,
|
|
TableBody,
|
|
TableCell,
|
|
TableHead,
|
|
TableHeader,
|
|
TableRow,
|
|
} from '@/components/ui/table'
|
|
import { Badge } from '@/components/ui/badge'
|
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
|
|
import { api } from '@/lib/api-client'
|
|
import { formatNumber } from '@/lib/utils'
|
|
import type { UsageRecord, UsageByModel, ModelUsageStat, DailyUsageStat } from '@/lib/types'
|
|
|
|
export default function UsagePage() {
|
|
const [days, setDays] = useState(7)
|
|
const [activeTab, setActiveTab] = useState('relay')
|
|
const [error, setError] = useState('')
|
|
|
|
// 4 parallel SWR calls — each loads independently
|
|
const { data: dailyData = [], isLoading: dailyLoading } = useSWR(
|
|
['usage.daily', days],
|
|
() => api.usage.daily({ days })
|
|
)
|
|
const { data: modelData = [], isLoading: modelLoading } = useSWR(
|
|
['usage.byModel', days],
|
|
() => api.usage.byModel({ days })
|
|
)
|
|
const { data: telemetryModels = [] } = useSWR(
|
|
['telemetry.modelStats'],
|
|
() => api.telemetry.modelStats()
|
|
)
|
|
const { data: telemetryDaily = [] } = useSWR(
|
|
['telemetry.dailyStats', days],
|
|
() => api.telemetry.dailyStats({ days })
|
|
)
|
|
|
|
const relayLoading = dailyLoading || modelLoading
|
|
const telemetryLoading = !telemetryModels.length && !telemetryDaily.length && (dailyLoading || modelLoading)
|
|
|
|
// === Relay 用量图表数据 ===
|
|
|
|
const relayLineData = dailyData.map((r) => ({
|
|
day: r.day.slice(5),
|
|
Input: r.input_tokens,
|
|
Output: r.output_tokens,
|
|
}))
|
|
|
|
const relayBarData = modelData.map((r) => ({
|
|
model: r.model_id,
|
|
请求量: r.count,
|
|
Input: r.input_tokens,
|
|
Output: r.output_tokens,
|
|
}))
|
|
|
|
const relayTotalInput = dailyData.reduce((s, r) => s + r.input_tokens, 0)
|
|
const relayTotalOutput = dailyData.reduce((s, r) => s + r.output_tokens, 0)
|
|
const relayTotalRequests = dailyData.reduce((s, r) => s + r.count, 0)
|
|
|
|
// === 遥测图表数据 ===
|
|
|
|
const telemetryLineData = telemetryDaily.map((r) => ({
|
|
day: r.day.slice(5),
|
|
Input: r.input_tokens,
|
|
Output: r.output_tokens,
|
|
设备数: r.unique_devices,
|
|
}))
|
|
|
|
const telemetryTotalInput = telemetryDaily.reduce((s, r) => s + r.input_tokens, 0)
|
|
const telemetryTotalOutput = telemetryDaily.reduce((s, r) => s + r.output_tokens, 0)
|
|
const telemetryTotalRequests = telemetryDaily.reduce((s, r) => s + r.request_count, 0)
|
|
|
|
// === 合计 ===
|
|
|
|
const totalInput = relayTotalInput + telemetryTotalInput
|
|
const totalOutput = relayTotalOutput + telemetryTotalOutput
|
|
const totalRequests = relayTotalRequests + telemetryTotalRequests
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
{error && <ErrorBanner message={error} onDismiss={() => setError('')} />}
|
|
{/* 时间范围 */}
|
|
<div className="flex items-center gap-3">
|
|
<span className="text-sm text-muted-foreground">时间范围:</span>
|
|
<Select value={String(days)} onValueChange={(v) => setDays(Number(v))}>
|
|
<SelectTrigger className="w-[140px]">
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="7">最近 7 天</SelectItem>
|
|
<SelectItem value="30">最近 30 天</SelectItem>
|
|
<SelectItem value="90">最近 90 天</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
|
|
{/* 汇总统计 — render immediately, use 0 while loading */}
|
|
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-5">
|
|
<Card>
|
|
<CardContent className="p-6">
|
|
<p className="text-sm text-muted-foreground">总请求数</p>
|
|
<p className="mt-1 text-2xl font-bold text-foreground">
|
|
{formatNumber(totalRequests)}
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
<Card>
|
|
<CardContent className="p-6">
|
|
<p className="text-sm text-muted-foreground">总 Input Tokens</p>
|
|
<p className="mt-1 text-2xl font-bold text-blue-400">
|
|
{formatNumber(totalInput)}
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
<Card>
|
|
<CardContent className="p-6">
|
|
<p className="text-sm text-muted-foreground">总 Output Tokens</p>
|
|
<p className="mt-1 text-2xl font-bold text-orange-400">
|
|
{formatNumber(totalOutput)}
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
<Card>
|
|
<CardContent className="p-6">
|
|
<div className="flex items-center gap-2">
|
|
<Monitor className="h-4 w-4 text-green-400" />
|
|
<p className="text-sm text-muted-foreground">中转请求</p>
|
|
</div>
|
|
<p className="mt-1 text-2xl font-bold text-green-400">
|
|
{formatNumber(relayTotalRequests)}
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
<Card>
|
|
<CardContent className="p-6">
|
|
<div className="flex items-center gap-2">
|
|
<Smartphone className="h-4 w-4 text-purple-400" />
|
|
<p className="text-sm text-muted-foreground">桌面端调用</p>
|
|
</div>
|
|
<p className="mt-1 text-2xl font-bold text-purple-400">
|
|
{formatNumber(telemetryTotalRequests)}
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
|
|
{/* Tab 切换 */}
|
|
<Tabs value={activeTab} onValueChange={setActiveTab}>
|
|
<TabsList>
|
|
<TabsTrigger value="relay">
|
|
<Monitor className="h-4 w-4 mr-1" />
|
|
中转用量
|
|
</TabsTrigger>
|
|
<TabsTrigger value="telemetry">
|
|
<Smartphone className="h-4 w-4 mr-1" />
|
|
桌面端遥测
|
|
</TabsTrigger>
|
|
</TabsList>
|
|
|
|
{/* Relay 用量 Tab */}
|
|
<TabsContent value="relay" className="space-y-6">
|
|
{relayLoading ? (
|
|
<>
|
|
<ChartSkeleton height={320} />
|
|
<ChartSkeleton height={280} />
|
|
</>
|
|
) : (
|
|
<>
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center gap-2 text-base">
|
|
<Zap className="h-4 w-4 text-primary" />
|
|
中转 Token 用量趋势
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
{relayLineData.length > 0 ? (
|
|
<ResponsiveContainer width="100%" height={320}>
|
|
<LineChart data={relayLineData}>
|
|
<CartesianGrid strokeDasharray="3 3" stroke="#1E293B" />
|
|
<XAxis dataKey="day" tick={{ fontSize: 12, fill: '#94A3B8' }} axisLine={{ stroke: '#1E293B' }} />
|
|
<YAxis tick={{ fontSize: 12, fill: '#94A3B8' }} axisLine={{ stroke: '#1E293B' }} />
|
|
<Tooltip contentStyle={{ backgroundColor: '#0F172A', border: '1px solid #1E293B', borderRadius: '8px', color: '#F8FAFC', fontSize: '12px' }} />
|
|
<Legend wrapperStyle={{ fontSize: '12px', color: '#94A3B8' }} />
|
|
<Line type="monotone" dataKey="Input" stroke="#3B82F6" strokeWidth={2} dot={false} />
|
|
<Line type="monotone" dataKey="Output" stroke="#F97316" strokeWidth={2} dot={false} />
|
|
</LineChart>
|
|
</ResponsiveContainer>
|
|
) : (
|
|
<EmptyState message="暂无中转数据" />
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="text-base">中转按模型分布</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
{relayBarData.length > 0 ? (
|
|
<ResponsiveContainer width="100%" height={Math.max(200, relayBarData.length * 40)}>
|
|
<BarChart data={relayBarData} layout="vertical">
|
|
<CartesianGrid strokeDasharray="3 3" stroke="#1E293B" />
|
|
<XAxis type="number" tick={{ fontSize: 12, fill: '#94A3B8' }} axisLine={{ stroke: '#1E293B' }} />
|
|
<YAxis type="category" dataKey="model" tick={{ fontSize: 12, fill: '#94A3B8' }} axisLine={{ stroke: '#1E293B' }} width={120} />
|
|
<Tooltip contentStyle={{ backgroundColor: '#0F172A', border: '1px solid #1E293B', borderRadius: '8px', color: '#F8FAFC', fontSize: '12px' }} />
|
|
<Legend wrapperStyle={{ fontSize: '12px', color: '#94A3B8' }} />
|
|
<Bar dataKey="Input" fill="#3B82F6" radius={[0, 2, 2, 0]} />
|
|
<Bar dataKey="Output" fill="#F97316" radius={[0, 2, 2, 0]} />
|
|
</BarChart>
|
|
</ResponsiveContainer>
|
|
) : (
|
|
<EmptyState />
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
</>
|
|
)}
|
|
</TabsContent>
|
|
|
|
{/* 遥测 Tab */}
|
|
<TabsContent value="telemetry" className="space-y-6">
|
|
{telemetryLoading ? (
|
|
<>
|
|
<ChartSkeleton height={320} />
|
|
<TableSkeleton rows={5} cols={6} hasToolbar={false} />
|
|
</>
|
|
) : (
|
|
<>
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center gap-2 text-base">
|
|
<Smartphone className="h-4 w-4 text-purple-400" />
|
|
桌面端 Token 用量趋势
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
{telemetryLineData.length > 0 ? (
|
|
<ResponsiveContainer width="100%" height={320}>
|
|
<LineChart data={telemetryLineData}>
|
|
<CartesianGrid strokeDasharray="3 3" stroke="#1E293B" />
|
|
<XAxis dataKey="day" tick={{ fontSize: 12, fill: '#94A3B8' }} axisLine={{ stroke: '#1E293B' }} />
|
|
<YAxis tick={{ fontSize: 12, fill: '#94A3B8' }} axisLine={{ stroke: '#1E293B' }} />
|
|
<Tooltip contentStyle={{ backgroundColor: '#0F172A', border: '1px solid #1E293B', borderRadius: '8px', color: '#F8FAFC', fontSize: '12px' }} />
|
|
<Legend wrapperStyle={{ fontSize: '12px', color: '#94A3B8' }} />
|
|
<Line type="monotone" dataKey="Input" stroke="#3B82F6" strokeWidth={2} dot={false} />
|
|
<Line type="monotone" dataKey="Output" stroke="#F97316" strokeWidth={2} dot={false} />
|
|
</LineChart>
|
|
</ResponsiveContainer>
|
|
) : (
|
|
<EmptyState message="暂无桌面端遥测数据（需要桌面端上报）" />
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="text-base">桌面端按模型统计</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
{telemetryModels.length > 0 ? (
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow>
|
|
<TableHead>模型</TableHead>
|
|
<TableHead className="text-right">请求数</TableHead>
|
|
<TableHead className="text-right">Input Tokens</TableHead>
|
|
<TableHead className="text-right">Output Tokens</TableHead>
|
|
<TableHead className="text-right">平均延迟</TableHead>
|
|
<TableHead className="text-right">成功率</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{telemetryModels.map((stat) => (
|
|
<TableRow key={stat.model_id}>
|
|
<TableCell className="font-mono text-sm">{stat.model_id}</TableCell>
|
|
<TableCell className="text-right">{formatNumber(stat.request_count)}</TableCell>
|
|
<TableCell className="text-right text-blue-400">{formatNumber(stat.input_tokens)}</TableCell>
|
|
<TableCell className="text-right text-orange-400">{formatNumber(stat.output_tokens)}</TableCell>
|
|
<TableCell className="text-right">
|
|
{stat.avg_latency_ms !== null ? `${Math.round(stat.avg_latency_ms)}ms` : '-'}
|
|
</TableCell>
|
|
<TableCell className="text-right">
|
|
<Badge variant={stat.success_rate >= 0.95 ? 'default' : 'destructive'}>
|
|
{(stat.success_rate * 100).toFixed(1)}%
|
|
</Badge>
|
|
</TableCell>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
) : (
|
|
<EmptyState />
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
</>
|
|
)}
|
|
</TabsContent>
|
|
</Tabs>
|
|
</div>
|
|
)
|
|
}
|