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)/models/page.tsx

@@ -0,0 +1,436 @@
+'use client'
+
+import { useEffect, useState, useCallback } from 'react'
+import {
+  Plus,
+  Loader2,
+  ChevronLeft,
+  ChevronRight,
+  Pencil,
+  Trash2,
+} from 'lucide-react'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { Badge } from '@/components/ui/badge'
+import { Switch } from '@/components/ui/switch'
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table'
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+  DialogDescription,
+} from '@/components/ui/dialog'
+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 { Model, Provider } from '@/lib/types'
+
+const PAGE_SIZE = 20
+
+interface ModelForm {
+  provider_id: string
+  model_id: string
+  alias: string
+  context_window: string
+  max_output_tokens: string
+  supports_streaming: boolean
+  supports_vision: boolean
+  enabled: boolean
+  pricing_input: string
+  pricing_output: string
+}
+
+const emptyForm: ModelForm = {
+  provider_id: '',
+  model_id: '',
+  alias: '',
+  context_window: '4096',
+  max_output_tokens: '4096',
+  supports_streaming: true,
+  supports_vision: false,
+  enabled: true,
+  pricing_input: '',
+  pricing_output: '',
+}
+
+export default function ModelsPage() {
+  const [models, setModels] = useState<Model[]>([])
+  const [providers, setProviders] = useState<Provider[]>([])
+  const [total, setTotal] = useState(0)
+  const [page, setPage] = useState(1)
+  const [providerFilter, setProviderFilter] = useState<string>('all')
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState('')
+
+  // Dialog
+  const [dialogOpen, setDialogOpen] = useState(false)
+  const [editTarget, setEditTarget] = useState<Model | null>(null)
+  const [form, setForm] = useState<ModelForm>(emptyForm)
+  const [saving, setSaving] = useState(false)
+
+  // 删除
+  const [deleteTarget, setDeleteTarget] = useState<Model | null>(null)
+  const [deleting, setDeleting] = useState(false)
+
+  const fetchModels = useCallback(async () => {
+    setLoading(true)
+    setError('')
+    try {
+      const params: Record<string, unknown> = { page, page_size: PAGE_SIZE }
+      if (providerFilter !== 'all') params.provider_id = providerFilter
+      const res = await api.models.list(params)
+      setModels(res.items)
+      setTotal(res.total)
+    } catch (err) {
+      if (err instanceof ApiRequestError) setError(err.body.message)
+      else setError('加载失败')
+    } finally {
+      setLoading(false)
+    }
+  }, [page, providerFilter])
+
+  const fetchProviders = useCallback(async () => {
+    try {
+      const res = await api.providers.list({ page: 1, page_size: 100 })
+      setProviders(res.items)
+    } catch {
+      // ignore
+    }
+  }, [])
+
+  useEffect(() => {
+    fetchModels()
+    fetchProviders()
+  }, [fetchModels, fetchProviders])
+
+  const totalPages = Math.max(1, Math.ceil(total / PAGE_SIZE))
+
+  const providerMap = new Map(providers.map((p) => [p.id, p.display_name || p.name]))
+
+  function openCreateDialog() {
+    setEditTarget(null)
+    setForm(emptyForm)
+    setDialogOpen(true)
+  }
+
+  function openEditDialog(model: Model) {
+    setEditTarget(model)
+    setForm({
+      provider_id: model.provider_id,
+      model_id: model.model_id,
+      alias: model.alias,
+      context_window: model.context_window.toString(),
+      max_output_tokens: model.max_output_tokens.toString(),
+      supports_streaming: model.supports_streaming,
+      supports_vision: model.supports_vision,
+      enabled: model.enabled,
+      pricing_input: model.pricing_input.toString(),
+      pricing_output: model.pricing_output.toString(),
+    })
+    setDialogOpen(true)
+  }
+
+  async function handleSave() {
+    if (!form.model_id.trim() || !form.provider_id) return
+    setSaving(true)
+    try {
+      const payload = {
+        provider_id: form.provider_id,
+        model_id: form.model_id.trim(),
+        alias: form.alias.trim(),
+        context_window: parseInt(form.context_window, 10) || 4096,
+        max_output_tokens: parseInt(form.max_output_tokens, 10) || 4096,
+        supports_streaming: form.supports_streaming,
+        supports_vision: form.supports_vision,
+        enabled: form.enabled,
+        pricing_input: parseFloat(form.pricing_input) || 0,
+        pricing_output: parseFloat(form.pricing_output) || 0,
+      }
+      if (editTarget) {
+        await api.models.update(editTarget.id, payload)
+      } else {
+        await api.models.create(payload)
+      }
+      setDialogOpen(false)
+      fetchModels()
+    } catch (err) {
+      if (err instanceof ApiRequestError) setError(err.body.message)
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  async function handleDelete() {
+    if (!deleteTarget) return
+    setDeleting(true)
+    try {
+      await api.models.delete(deleteTarget.id)
+      setDeleteTarget(null)
+      fetchModels()
+    } catch (err) {
+      if (err instanceof ApiRequestError) setError(err.body.message)
+    } finally {
+      setDeleting(false)
+    }
+  }
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center justify-between">
+        <Select value={providerFilter} onValueChange={(v) => { setProviderFilter(v); setPage(1) }}>
+          <SelectTrigger className="w-[200px]">
+            <SelectValue placeholder="按服务商筛选" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="all">全部服务商</SelectItem>
+            {providers.map((p) => (
+              <SelectItem key={p.id} value={p.id}>
+                {p.display_name || p.name}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+        <Button onClick={openCreateDialog}>
+          <Plus className="h-4 w-4 mr-2" />
+          新建模型
+        </Button>
+      </div>
+
+      {error && (
+        <div className="rounded-md bg-destructive/10 border border-destructive/20 px-4 py-3 text-sm text-destructive">
+          {error}
+          <button onClick={() => setError('')} className="ml-2 underline cursor-pointer">关闭</button>
+        </div>
+      )}
+
+      {loading ? (
+        <div className="flex h-64 items-center justify-center">
+          <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
+        </div>
+      ) : models.length === 0 ? (
+        <div className="flex h-64 items-center justify-center text-muted-foreground text-sm">
+          暂无数据
+        </div>
+      ) : (
+        <>
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>模型 ID</TableHead>
+                <TableHead>别名</TableHead>
+                <TableHead>服务商</TableHead>
+                <TableHead>上下文窗口</TableHead>
+                <TableHead>最大输出</TableHead>
+                <TableHead>流式</TableHead>
+                <TableHead>视觉</TableHead>
+                <TableHead>启用</TableHead>
+                <TableHead className="text-right">操作</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {models.map((m) => (
+                <TableRow key={m.id}>
+                  <TableCell className="font-mono text-sm">{m.model_id}</TableCell>
+                  <TableCell>{m.alias || '-'}</TableCell>
+                  <TableCell className="text-muted-foreground">
+                    {providerMap.get(m.provider_id) || m.provider_id.slice(0, 8)}
+                  </TableCell>
+                  <TableCell className="font-mono text-xs text-muted-foreground">
+                    {formatNumber(m.context_window)}
+                  </TableCell>
+                  <TableCell className="font-mono text-xs text-muted-foreground">
+                    {formatNumber(m.max_output_tokens)}
+                  </TableCell>
+                  <TableCell>
+                    <Badge variant={m.supports_streaming ? 'success' : 'secondary'}>
+                      {m.supports_streaming ? '是' : '否'}
+                    </Badge>
+                  </TableCell>
+                  <TableCell>
+                    <Badge variant={m.supports_vision ? 'success' : 'secondary'}>
+                      {m.supports_vision ? '是' : '否'}
+                    </Badge>
+                  </TableCell>
+                  <TableCell>
+                    <Badge variant={m.enabled ? 'success' : 'destructive'}>
+                      {m.enabled ? '启用' : '禁用'}
+                    </Badge>
+                  </TableCell>
+                  <TableCell className="text-right">
+                    <div className="flex items-center justify-end gap-1">
+                      <Button variant="ghost" size="icon" onClick={() => openEditDialog(m)} title="编辑">
+                        <Pencil className="h-4 w-4" />
+                      </Button>
+                      <Button variant="ghost" size="icon" onClick={() => setDeleteTarget(m)} title="删除">
+                        <Trash2 className="h-4 w-4 text-destructive" />
+                      </Button>
+                    </div>
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+
+          <div className="flex items-center justify-between text-sm">
+            <p className="text-muted-foreground">
+              第 {page} 页 / 共 {totalPages} 页 ({total} 条)
+            </p>
+            <div className="flex items-center gap-2">
+              <Button variant="outline" size="sm" disabled={page <= 1} onClick={() => setPage(page - 1)}>
+                <ChevronLeft className="h-4 w-4 mr-1" />
+                上一页
+              </Button>
+              <Button variant="outline" size="sm" disabled={page >= totalPages} onClick={() => setPage(page + 1)}>
+                下一页
+                <ChevronRight className="h-4 w-4 ml-1" />
+              </Button>
+            </div>
+          </div>
+        </>
+      )}
+
+      {/* 创建/编辑 Dialog */}
+      <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
+        <DialogContent className="max-w-lg">
+          <DialogHeader>
+            <DialogTitle>{editTarget ? '编辑模型' : '新建模型'}</DialogTitle>
+            <DialogDescription>
+              {editTarget ? '修改模型配置' : '添加新的 AI 模型'}
+            </DialogDescription>
+          </DialogHeader>
+          <div className="space-y-4 max-h-[60vh] overflow-y-auto scrollbar-thin pr-1">
+            <div className="space-y-2">
+              <Label>服务商 *</Label>
+              <Select value={form.provider_id} onValueChange={(v) => setForm({ ...form, provider_id: v })} disabled={!!editTarget}>
+                <SelectTrigger>
+                  <SelectValue placeholder="选择服务商" />
+                </SelectTrigger>
+                <SelectContent>
+                  {providers.map((p) => (
+                    <SelectItem key={p.id} value={p.id}>
+                      {p.display_name || p.name}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="space-y-2">
+              <Label>模型 ID *</Label>
+              <Input
+                value={form.model_id}
+                onChange={(e) => setForm({ ...form, model_id: e.target.value })}
+                placeholder="gpt-4o"
+                disabled={!!editTarget}
+              />
+            </div>
+            <div className="space-y-2">
+              <Label>别名</Label>
+              <Input
+                value={form.alias}
+                onChange={(e) => setForm({ ...form, alias: e.target.value })}
+                placeholder="GPT-4o"
+              />
+            </div>
+            <div className="grid grid-cols-2 gap-4">
+              <div className="space-y-2">
+                <Label>上下文窗口</Label>
+                <Input
+                  type="number"
+                  value={form.context_window}
+                  onChange={(e) => setForm({ ...form, context_window: e.target.value })}
+                />
+              </div>
+              <div className="space-y-2">
+                <Label>最大输出 Tokens</Label>
+                <Input
+                  type="number"
+                  value={form.max_output_tokens}
+                  onChange={(e) => setForm({ ...form, max_output_tokens: e.target.value })}
+                />
+              </div>
+            </div>
+            <div className="grid grid-cols-2 gap-4">
+              <div className="space-y-2">
+                <Label>Input 定价 ($/1M tokens)</Label>
+                <Input
+                  type="number"
+                  step="0.01"
+                  value={form.pricing_input}
+                  onChange={(e) => setForm({ ...form, pricing_input: e.target.value })}
+                  placeholder="0"
+                />
+              </div>
+              <div className="space-y-2">
+                <Label>Output 定价 ($/1M tokens)</Label>
+                <Input
+                  type="number"
+                  step="0.01"
+                  value={form.pricing_output}
+                  onChange={(e) => setForm({ ...form, pricing_output: e.target.value })}
+                  placeholder="0"
+                />
+              </div>
+            </div>
+            <div className="flex items-center gap-6">
+              <div className="flex items-center gap-2">
+                <Switch checked={form.supports_streaming} onCheckedChange={(v) => setForm({ ...form, supports_streaming: v })} />
+                <Label>流式</Label>
+              </div>
+              <div className="flex items-center gap-2">
+                <Switch checked={form.supports_vision} onCheckedChange={(v) => setForm({ ...form, supports_vision: v })} />
+                <Label>视觉</Label>
+              </div>
+              <div className="flex items-center gap-2">
+                <Switch checked={form.enabled} onCheckedChange={(v) => setForm({ ...form, enabled: v })} />
+                <Label>启用</Label>
+              </div>
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setDialogOpen(false)}>取消</Button>
+            <Button onClick={handleSave} disabled={saving || !form.model_id.trim() || !form.provider_id}>
+              {saving && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+              保存
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 删除确认 */}
+      <Dialog open={!!deleteTarget} onOpenChange={() => setDeleteTarget(null)}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>确认删除</DialogTitle>
+            <DialogDescription>
+              确定要删除模型 &quot;{deleteTarget?.alias || deleteTarget?.model_id}&quot; 吗？此操作不可撤销。
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setDeleteTarget(null)}>取消</Button>
+            <Button variant="destructive" onClick={handleDelete} disabled={deleting}>
+              {deleting && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+              删除
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  )
+}