feat(saas): Phase 2 Admin Web 管理后台 — 完整 CRUD + Dashboard 统计

后端:
- 添加 GET /api/v1/stats/dashboard 聚合统计端点
  (账号数/活跃服务商/今日请求/今日Token用量等7项指标)
- 需要 account:admin 权限

Admin 前端 (Next.js 14 + shadcn/ui + Tailwind + Recharts):
- 设计系统: Dark Mode OLED (#020617 背景, #22C55E CTA)
- 登录页: 双栏布局, 品牌区 + 表单
- Dashboard 布局: Sidebar 导航 + Header + 主内容区
- 仪表盘: 4 统计卡片 + AreaChart 请求趋势 + BarChart Token用量
- 8 个 CRUD 页面:
  - 账号管理 (搜索/角色/状态筛选, 编辑/启用禁用)
  - 服务商 (CRUD + API Key masked)
  - 模型管理 (Provider筛选, CRUD)
  - API 密钥 (创建/撤销, 一次性显示token)
  - 用量统计 (LineChart + BarChart)
  - 中转任务 (状态筛选, 展开详情)
  - 系统配置 (分类Tab, 编辑)
  - 操作日志 (Action筛选, 展开详情)
- 14 个 shadcn 风格 UI 组件 (手写实现)
- 类型化 API 客户端 (SaaSClient, 20+ 方法, 401 自动跳转)
- AuthGuard 路由保护 + useAuth() hook

验证: tsc --noEmit 零 error, pnpm build 13 页面成功, cargo test 21 通过

admin/src/app/(dashboard)/usage/page.tsx

@@ -0,0 +1,235 @@
+'use client'
+
+import { useEffect, useState, useCallback } from 'react'
+import { Loader2, Zap } 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 {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select'
+import { api } from '@/lib/api-client'
+import { ApiRequestError } from '@/lib/api-client'
+import { formatNumber } from '@/lib/utils'
+import type { UsageRecord, UsageByModel } from '@/lib/types'
+
+export default function UsagePage() {
+  const [days, setDays] = useState(7)
+  const [dailyData, setDailyData] = useState<UsageRecord[]>([])
+  const [modelData, setModelData] = useState<UsageByModel[]>([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState('')
+
+  const fetchData = useCallback(async () => {
+    setLoading(true)
+    setError('')
+    try {
+      const [dailyRes, modelRes] = await Promise.allSettled([
+        api.usage.daily({ days }),
+        api.usage.byModel({ days }),
+      ])
+      if (dailyRes.status === 'fulfilled') setDailyData(dailyRes.value)
+      else throw new Error('Failed to fetch daily usage')
+      if (modelRes.status === 'fulfilled') setModelData(modelRes.value)
+    } catch (err) {
+      if (err instanceof ApiRequestError) setError(err.body.message)
+      else setError('加载数据失败')
+    } finally {
+      setLoading(false)
+    }
+  }, [days])
+
+  useEffect(() => {
+    fetchData()
+  }, [fetchData])
+
+  const lineChartData = dailyData.map((r) => ({
+    day: r.day.slice(5),
+    Input: r.input_tokens,
+    Output: r.output_tokens,
+  }))
+
+  const barChartData = modelData.map((r) => ({
+    model: r.model_id,
+    请求量: r.count,
+    Input: r.input_tokens,
+    Output: r.output_tokens,
+  }))
+
+  const totalInput = dailyData.reduce((s, r) => s + r.input_tokens, 0)
+  const totalOutput = dailyData.reduce((s, r) => s + r.output_tokens, 0)
+  const totalRequests = dailyData.reduce((s, r) => s + r.count, 0)
+
+  if (loading) {
+    return (
+      <div className="flex h-[60vh] items-center justify-center">
+        <div className="flex flex-col items-center gap-3">
+          <Loader2 className="h-8 w-8 animate-spin text-primary" />
+          <p className="text-sm text-muted-foreground">加载中...</p>
+        </div>
+      </div>
+    )
+  }
+
+  if (error) {
+    return (
+      <div className="flex h-[60vh] items-center justify-center">
+        <div className="text-center">
+          <p className="text-destructive">{error}</p>
+          <button onClick={() => fetchData()} className="mt-4 text-sm text-primary hover:underline cursor-pointer">
+            重新加载
+          </button>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* 时间范围 */}
+      <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>
+
+      {/* 汇总统计 */}
+      <div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
+        <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>
+      </div>
+
+      {/* Token 用量趋势 */}
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2 text-base">
+            <Zap className="h-4 w-4 text-primary" />
+            Token 用量趋势
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          {lineChartData.length > 0 ? (
+            <ResponsiveContainer width="100%" height={320}>
+              <LineChart data={lineChartData}>
+                <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>
+          ) : (
+            <div className="flex h-[320px] items-center justify-center text-muted-foreground text-sm">
+              暂无数据
+            </div>
+          )}
+        </CardContent>
+      </Card>
+
+      {/* 按模型分布 */}
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-base">按模型分布</CardTitle>
+        </CardHeader>
+        <CardContent>
+          {barChartData.length > 0 ? (
+            <ResponsiveContainer width="100%" height={320}>
+              <BarChart data={barChartData} 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>
+          ) : (
+            <div className="flex h-[320px] items-center justify-center text-muted-foreground text-sm">
+              暂无数据
+            </div>
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  )
+}