feat:重构UI

apps/web/app/admin/stats/page.tsx

@@ -1,8 +1,36 @@
 'use client'
 
-import { useState, useEffect } from 'react'
+import { useEffect, useMemo, useState } from 'react'
+import Link from 'next/link'
+import { useRouter } from 'next/navigation'
+import { BarChart3, RefreshCcw } from 'lucide-react'
 
-const API_BASE = process.env.NEXT_PUBLIC_API_BASE_URL || 'http://localhost:8000'
+import { Badge } from '@/components/ui/badge'
+import { Button } from '@/components/ui/button'
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card'
+import { Input } from '@/components/ui/input'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select'
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table'
+import { AdminUnauthorizedError, adminFetchJson } from '@/lib/admin-api'
 
 interface Stats {
   date: string
@@ -11,6 +39,14 @@ interface Stats {
   output_tokens: number
   cached_count: number
   error_count: number
+  hourly: {
+    hour: number
+    request_count: number
+    input_tokens: number
+    output_tokens: number
+    cached_count: number
+    error_count: number
+  }[]
 }
 
 interface Realtime {
@@ -19,79 +55,288 @@ interface Realtime {
 }
 
 export default function StatsPage() {
-  const [providerId, setProviderId] = useState(1)
+  const router = useRouter()
+  const [providers, setProviders] = useState<{ id: number; name: string; model_id: string; is_default: boolean }[]>([])
+  const [providerId, setProviderId] = useState<string>('')
+  const [date, setDate] = useState(() => new Date().toISOString().slice(0, 10))
   const [stats, setStats] = useState<Stats | null>(null)
   const [realtime, setRealtime] = useState<Realtime>({ rpm: 0, tpm: 0 })
+  const [error, setError] = useState('')
+  const [isLoading, setIsLoading] = useState(false)
 
-  const getToken = () => localStorage.getItem('admin_token') || ''
+  const totalTokens = useMemo(() => {
+    if (!stats) return 0
+    return stats.input_tokens + stats.output_tokens
+  }, [stats])
 
-  const fetchStats = async () => {
-    const res = await fetch(
-      `${API_BASE}/api/v1/admin/stats/daily/${providerId}`,
-      { headers: { Authorization: `Bearer ${getToken()}` } }
-    )
-    if (res.ok) setStats(await res.json())
+  const cacheHitRate = useMemo(() => {
+    if (!stats || stats.request_count <= 0) return 0
+    return stats.cached_count / stats.request_count
+  }, [stats])
+
+  const errorRate = useMemo(() => {
+    if (!stats || stats.request_count <= 0) return 0
+    return stats.error_count / stats.request_count
+  }, [stats])
+
+  const maxHourlyRequest = useMemo(() => {
+    if (!stats) return 0
+    return Math.max(0, ...stats.hourly.map(h => h.request_count))
+  }, [stats])
+
+  const fetchProviders = async () => {
+    setError('')
+    try {
+      const data = await adminFetchJson<{
+        id: number
+        name: string
+        model_id: string
+        is_default: boolean
+      }[]>('/api/v1/admin/providers')
+      setProviders(data)
+      const defaultOne = data.find(p => p.is_default) || data[0] || null
+      if (defaultOne) setProviderId(String(defaultOne.id))
+    } catch (err: any) {
+      if (err instanceof AdminUnauthorizedError) {
+        router.replace('/login')
+        return
+      }
+      setError(err?.message || '加载 Provider 失败')
+    }
   }
 
   const fetchRealtime = async () => {
-    const res = await fetch(
-      `${API_BASE}/api/v1/admin/stats/realtime/${providerId}`,
-      { headers: { Authorization: `Bearer ${getToken()}` } }
-    )
-    if (res.ok) setRealtime(await res.json())
+    if (!providerId) return
+    try {
+      const data = await adminFetchJson<Realtime>(`/api/v1/admin/stats/realtime/${providerId}`)
+      setRealtime(data)
+    } catch (err: any) {
+      if (err instanceof AdminUnauthorizedError) {
+        router.replace('/login')
+        return
+      }
+    }
+  }
+
+  const fetchStats = async () => {
+    if (!providerId) return
+    setIsLoading(true)
+    setError('')
+    try {
+      const data = await adminFetchJson<Stats>(`/api/v1/admin/stats/daily/${providerId}?date=${date}`)
+      setStats(data)
+    } catch (err: any) {
+      if (err instanceof AdminUnauthorizedError) {
+        router.replace('/login')
+        return
+      }
+      setError(err?.message || '加载统计失败')
+    } finally {
+      setIsLoading(false)
+    }
   }
 
   useEffect(() => {
+    fetchProviders()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  useEffect(() => {
+    if (!providerId) return
     fetchStats()
     fetchRealtime()
     const interval = setInterval(fetchRealtime, 5000)
     return () => clearInterval(interval)
-  }, [providerId])
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [providerId, date])
 
   return (
-    <div>
-      <h1 className="text-2xl font-bold mb-6">使用统计</h1>
-
-      {/* 实时指标 */}
-      <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
-        <div className="bg-white p-4 rounded shadow">
-          <h3 className="text-gray-500 text-sm">RPM (每分钟请求)</h3>
-          <p className="text-2xl font-bold">{realtime.rpm}</p>
+    <div className="space-y-6">
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
+        <div>
+          <h1 className="text-2xl font-bold tracking-tight">使用统计</h1>
+          <p className="text-sm text-muted-foreground">
+            实时 RPM/TPM + 指定日期的明细（按小时）
+          </p>
         </div>
-        <div className="bg-white p-4 rounded shadow">
-          <h3 className="text-gray-500 text-sm">TPM (每分钟Token)</h3>
-          <p className="text-2xl font-bold">{realtime.tpm}</p>
+        <div className="flex items-center gap-2">
+          <Button variant="outline" onClick={fetchStats} disabled={isLoading || !providerId}>
+            <RefreshCcw className="mr-2 h-4 w-4" />
+            刷新
+          </Button>
+          <Button asChild variant="secondary">
+            <Link href="/admin/providers">
+              <BarChart3 className="mr-2 h-4 w-4" />
+              管理 Provider
+            </Link>
+          </Button>
         </div>
       </div>
 
-      {/* 今日统计 */}
-      {stats && (
-        <div className="bg-white p-6 rounded shadow">
-          <h2 className="text-lg font-bold mb-4">今日统计 ({stats.date})</h2>
-          <div className="grid grid-cols-2 md:grid-cols-5 gap-4">
-            <div>
-              <p className="text-gray-500 text-sm">总请求</p>
-              <p className="text-xl font-bold">{stats.request_count}</p>
-            </div>
-            <div>
-              <p className="text-gray-500 text-sm">输入 Token</p>
-              <p className="text-xl font-bold">{stats.input_tokens}</p>
-            </div>
-            <div>
-              <p className="text-gray-500 text-sm">输出 Token</p>
-              <p className="text-xl font-bold">{stats.output_tokens}</p>
-            </div>
-            <div>
-              <p className="text-gray-500 text-sm">缓存命中</p>
-              <p className="text-xl font-bold">{stats.cached_count}</p>
-            </div>
-            <div>
-              <p className="text-gray-500 text-sm">错误数</p>
-              <p className="text-xl font-bold text-red-600">{stats.error_count}</p>
-            </div>
-          </div>
+      {error && (
+        <div className="rounded-md border border-destructive/30 bg-destructive/10 px-3 py-2 text-sm text-destructive">
+          {error}
         </div>
       )}
+
+      <Card className="border-muted bg-background/50 backdrop-blur-sm">
+        <CardHeader className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between sm:space-y-0">
+          <div>
+            <CardTitle>筛选</CardTitle>
+            <CardDescription>选择 Provider 与日期</CardDescription>
+          </div>
+          <div className="grid grid-cols-1 sm:grid-cols-2 gap-2 w-full sm:w-[520px]">
+            <Select value={providerId} onValueChange={setProviderId}>
+              <SelectTrigger>
+                <SelectValue placeholder="选择 Provider" />
+              </SelectTrigger>
+              <SelectContent>
+                {providers.map(p => (
+                  <SelectItem key={p.id} value={String(p.id)}>
+                    {p.name} ({p.model_id}){p.is_default ? ' · 默认' : ''}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+
+            <Input type="date" value={date} onChange={(e) => setDate(e.target.value)} />
+          </div>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+            <Card className="border-muted">
+              <CardHeader className="pb-2">
+                <CardDescription>RPM</CardDescription>
+                <CardTitle className="text-3xl">{realtime.rpm}</CardTitle>
+              </CardHeader>
+            </Card>
+            <Card className="border-muted">
+              <CardHeader className="pb-2">
+                <CardDescription>TPM</CardDescription>
+                <CardTitle className="text-3xl">{realtime.tpm}</CardTitle>
+              </CardHeader>
+            </Card>
+            <Card className="border-muted">
+              <CardHeader className="pb-2">
+                <CardDescription>缓存命中率</CardDescription>
+                <CardTitle className="text-3xl">
+                  {stats ? `${(cacheHitRate * 100).toFixed(1)}%` : '--'}
+                </CardTitle>
+              </CardHeader>
+              <CardContent className="text-sm text-muted-foreground">
+                {stats ? `${stats.cached_count} / ${stats.request_count}` : ''}
+              </CardContent>
+            </Card>
+            <Card className="border-muted">
+              <CardHeader className="pb-2">
+                <CardDescription>错误率</CardDescription>
+                <CardTitle className="text-3xl">
+                  {stats ? `${(errorRate * 100).toFixed(1)}%` : '--'}
+                </CardTitle>
+              </CardHeader>
+              <CardContent className="text-sm text-muted-foreground">
+                {stats ? `${stats.error_count} / ${stats.request_count}` : ''}
+              </CardContent>
+            </Card>
+          </div>
+
+          {stats && (
+            <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
+              <Card className="border-muted">
+                <CardHeader className="pb-2">
+                  <CardDescription>总请求</CardDescription>
+                  <CardTitle className="text-3xl">{stats.request_count}</CardTitle>
+                </CardHeader>
+              </Card>
+              <Card className="border-muted">
+                <CardHeader className="pb-2">
+                  <CardDescription>总 Token</CardDescription>
+                  <CardTitle className="text-3xl">{totalTokens}</CardTitle>
+                </CardHeader>
+              </Card>
+              <Card className="border-muted">
+                <CardHeader className="pb-2">
+                  <CardDescription>输入 Token</CardDescription>
+                  <CardTitle className="text-3xl">{stats.input_tokens}</CardTitle>
+                </CardHeader>
+              </Card>
+              <Card className="border-muted">
+                <CardHeader className="pb-2">
+                  <CardDescription>输出 Token</CardDescription>
+                  <CardTitle className="text-3xl">{stats.output_tokens}</CardTitle>
+                </CardHeader>
+              </Card>
+            </div>
+          )}
+        </CardContent>
+      </Card>
+
+      <Card className="border-muted bg-background/50 backdrop-blur-sm">
+        <CardHeader>
+          <CardTitle>按小时趋势</CardTitle>
+          <CardDescription>以请求数为主（0-23 点）</CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          {!stats ? (
+            <div className="text-sm text-muted-foreground">暂无数据</div>
+          ) : (
+            <>
+              <div className="flex items-end gap-1 h-28 overflow-x-auto rounded-md border bg-background p-3">
+                {stats.hourly.map((h) => {
+                  const pct = maxHourlyRequest ? h.request_count / maxHourlyRequest : 0
+                  return (
+                    <div key={h.hour} className="flex flex-col items-center gap-1 min-w-[18px]">
+                      <div
+                        className="w-3 rounded-sm bg-primary/70"
+                        style={{ height: `${Math.max(2, Math.round(pct * 96))}px` }}
+                        title={`${h.hour}:00  请求:${h.request_count}  缓存:${h.cached_count}  错误:${h.error_count}`}
+                      />
+                      <div className="text-[10px] text-muted-foreground">{h.hour}</div>
+                    </div>
+                  )
+                })}
+              </div>
+
+              <div className="rounded-lg border">
+                <Table>
+                  <TableHeader>
+                    <TableRow>
+                      <TableHead>小时</TableHead>
+                      <TableHead>请求</TableHead>
+                      <TableHead>Token</TableHead>
+                      <TableHead>缓存</TableHead>
+                      <TableHead>错误</TableHead>
+                      <TableHead>状态</TableHead>
+                    </TableRow>
+                  </TableHeader>
+                  <TableBody>
+                    {stats.hourly.map((h) => (
+                      <TableRow key={h.hour}>
+                        <TableCell className="font-mono text-xs">{String(h.hour).padStart(2, '0')}:00</TableCell>
+                        <TableCell>{h.request_count}</TableCell>
+                        <TableCell>{h.input_tokens + h.output_tokens}</TableCell>
+                        <TableCell>{h.cached_count}</TableCell>
+                        <TableCell>{h.error_count}</TableCell>
+                        <TableCell>
+                          {h.error_count > 0 ? (
+                            <Badge variant="warning">注意</Badge>
+                          ) : h.request_count > 0 ? (
+                            <Badge variant="success">正常</Badge>
+                          ) : (
+                            <Badge variant="outline" className="text-muted-foreground">
+                              空闲
+                            </Badge>
+                          )}
+                        </TableCell>
+                      </TableRow>
+                    ))}
+                  </TableBody>
+                </Table>
+              </div>
+            </>
+          )}
+        </CardContent>
+      </Card>
     </div>
   )
-}
+}