fix(desktop): session persistence — refresh/login/context/empty-content 4-bug fix

1. App.tsx: add restoreSession() call on startup to prevent redirect
   to login page after refresh (isRestoring guard + BootstrapScreen)
2. CloneManager: call syncAgents() after loadClones() to restore
   currentAgent and conversation history on app load
3. zclaw-memory: add get_or_create_session() so frontend session UUID
   is persisted directly — kernel no longer creates mismatched IDs
4. openai.rs: assistant message content must be non-empty for
   Kimi/Qwen APIs — replace empty content with meaningful placeholders

Also includes admin-v2 ModelServices unified page (merge providers +
models + API keys into expandable row layout)

admin-v2/src/pages/Accounts.tsx

@@ -5,10 +5,10 @@
 import { useState } from 'react'
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
 import { Button, message, Tag, Modal, Form, Input, Select, Popconfirm, Space } from 'antd'
-import { PlusOutlined } from '@ant-design/icons'
 import type { ProColumns } from '@ant-design/pro-components'
 import { ProTable } from '@ant-design/pro-components'
 import { accountService } from '@/services/accounts'
+import { PageHeader } from '@/components/PageHeader'
 import type { AccountPublic } from '@/types'
 
 const roleLabels: Record<string, string> = {
@@ -116,7 +116,10 @@ export default function Accounts() {
       hideInSearch: true,
       render: (_, record) => (
         <Space>
-          <Button size="small" onClick={() => { setEditingId(record.id); form.setFieldsValue(record); setModalOpen(true) }}>
+          <Button
+            size="small"
+            onClick={() => { setEditingId(record.id); form.setFieldsValue(record); setModalOpen(true) }}
+          >
             编辑
           </Button>
           {record.status === 'active' ? (
@@ -142,6 +145,8 @@ export default function Accounts() {
 
   return (
     <div>
+      <PageHeader title="账号管理" description="管理系统用户账号、角色与权限" />
+
       <ProTable<AccountPublic>
         columns={columns}
         dataSource={data?.items ?? []}
@@ -158,13 +163,13 @@ export default function Accounts() {
       />
 
       <Modal
-        title="编辑账号"
+        title={<span className="text-base font-semibold">编辑账号</span>}
         open={modalOpen}
         onOk={handleSave}
         onCancel={() => { setModalOpen(false); setEditingId(null); form.resetFields() }}
         confirmLoading={updateMutation.isPending}
       >
-        <Form form={form} layout="vertical">
+        <Form form={form} layout="vertical" className="mt-4">
           <Form.Item name="display_name" label="显示名">
             <Input />
           </Form.Item>

admin-v2/src/pages/AgentTemplates.tsx

@@ -4,8 +4,8 @@
 
 import { useState } from 'react'
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
-import { Button, message, Tag, Modal, Form, Input, Select, InputNumber, Space, Popconfirm, Descriptions, MinusCircleOutlined } from 'antd'
-import { PlusOutlined } from '@ant-design/icons'
+import { Button, message, Tag, Modal, Form, Input, Select, InputNumber, Space, Popconfirm, Descriptions } from 'antd'
+import { PlusOutlined, MinusCircleOutlined } from '@ant-design/icons'
 import type { ProColumns } from '@ant-design/pro-components'
 import { ProTable } from '@ant-design/pro-components'
 import { agentTemplateService } from '@/services/agent-templates'

admin-v2/src/pages/ApiKeys.tsx

@@ -1,165 +0,0 @@
-// ============================================================
-// API 密钥管理
-// ============================================================
-
-import { useState } from 'react'
-import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
-import { Button, message, Tag, Modal, Form, Input, InputNumber, Select, Popconfirm, Space, Typography } from 'antd'
-import { PlusOutlined, CopyOutlined } from '@ant-design/icons'
-import type { ProColumns } from '@ant-design/pro-components'
-import { ProTable } from '@ant-design/pro-components'
-import { apiKeyService } from '@/services/api-keys'
-import type { TokenInfo } from '@/types'
-
-const { Text } = Typography
-
-export default function ApiKeys() {
-  const queryClient = useQueryClient()
-  const [form] = Form.useForm()
-  const [modalOpen, setModalOpen] = useState(false)
-  const [newToken, setNewToken] = useState<string | null>(null)
-
-  const { data, isLoading } = useQuery({
-    queryKey: ['api-keys'],
-    queryFn: ({ signal }) => apiKeyService.list(signal),
-  })
-
-  const createMutation = useMutation({
-    mutationFn: (data: { name: string; expires_days?: number; permissions: string[] }) =>
-      apiKeyService.create(data),
-    onSuccess: (result: TokenInfo) => {
-      message.success('创建成功')
-      queryClient.invalidateQueries({ queryKey: ['api-keys'] })
-      if (result.token) {
-        setNewToken(result.token)
-      }
-      setModalOpen(false)
-      form.resetFields()
-    },
-    onError: (err: Error) => message.error(err.message || '创建失败'),
-  })
-
-  const revokeMutation = useMutation({
-    mutationFn: (id: string) => apiKeyService.revoke(id),
-    onSuccess: () => {
-      message.success('已撤销')
-      queryClient.invalidateQueries({ queryKey: ['api-keys'] })
-    },
-    onError: (err: Error) => message.error(err.message || '撤销失败'),
-  })
-
-  const columns: ProColumns<TokenInfo>[] = [
-    { title: '名称', dataIndex: 'name', width: 160 },
-    { title: '前缀', dataIndex: 'token_prefix', width: 120, render: (_, r) => <Text code>{r.token_prefix}...</Text> },
-    {
-      title: '权限',
-      dataIndex: 'permissions',
-      width: 200,
-      render: (_, r) => r.permissions?.map((p) => <Tag key={p}>{p}</Tag>),
-    },
-    {
-      title: '过期时间',
-      dataIndex: 'expires_at',
-      width: 180,
-      render: (_, r) => r.expires_at ? new Date(r.expires_at).toLocaleString('zh-CN') : '永不过期',
-    },
-    {
-      title: '最后使用',
-      dataIndex: 'last_used_at',
-      width: 180,
-      render: (_, r) => r.last_used_at ? new Date(r.last_used_at).toLocaleString('zh-CN') : '-',
-    },
-    {
-      title: '创建时间',
-      dataIndex: 'created_at',
-      width: 180,
-      render: (_, r) => new Date(r.created_at).toLocaleString('zh-CN'),
-    },
-    {
-      title: '操作',
-      width: 100,
-      render: (_, record) => (
-        <Popconfirm title="确定撤销此密钥？撤销后无法恢复。" onConfirm={() => revokeMutation.mutate(record.id)}>
-          <Button size="small" danger>撤销</Button>
-        </Popconfirm>
-      ),
-    },
-  ]
-
-  const handleCreate = async () => {
-    const values = await form.validateFields()
-    createMutation.mutate(values)
-  }
-
-  const copyToken = () => {
-    if (newToken) {
-      navigator.clipboard.writeText(newToken)
-      message.success('已复制到剪贴板')
-    }
-  }
-
-  return (
-    <div>
-      <ProTable<TokenInfo>
-        columns={columns}
-        dataSource={data?.items ?? []}
-        loading={isLoading}
-        rowKey="id"
-        search={false}
-        toolBarRender={() => [
-          <Button key="add" type="primary" icon={<PlusOutlined />} onClick={() => { form.resetFields(); setModalOpen(true) }}>
-            创建密钥
-          </Button>,
-        ]}
-        pagination={{
-          total: data?.total ?? 0,
-          pageSize: data?.page_size ?? 20,
-          current: data?.page ?? 1,
-          showSizeChanger: false,
-        }}
-      />
-
-      <Modal
-        title="创建 API 密钥"
-        open={modalOpen}
-        onOk={handleCreate}
-        onCancel={() => { setModalOpen(false); form.resetFields() }}
-        confirmLoading={createMutation.isPending}
-      >
-        <Form form={form} layout="vertical">
-          <Form.Item name="name" label="名称" rules={[{ required: true }]}>
-            <Input placeholder="给密钥起个名字" />
-          </Form.Item>
-          <Form.Item name="expires_days" label="有效期 (天)">
-            <InputNumber min={1} placeholder="留空则永不过期" style={{ width: '100%' }} />
-          </Form.Item>
-          <Form.Item name="permissions" label="权限" rules={[{ required: true }]}>
-            <Select mode="multiple" placeholder="选择权限" options={[
-              { value: 'relay:use', label: '中转使用' },
-              { value: 'model:read', label: '模型读取' },
-              { value: 'config:read', label: '配置读取' },
-            ]} />
-          </Form.Item>
-        </Form>
-      </Modal>
-
-      <Modal
-        title="密钥创建成功"
-        open={!!newToken}
-        onOk={() => setNewToken(null)}
-        onCancel={() => setNewToken(null)}
-      >
-        <p>请立即保存此密钥，关闭后将无法再次查看：</p>
-        <Input.TextArea
-          value={newToken || ''}
-          rows={3}
-          readOnly
-          addonAfter={<CopyOutlined onClick={copyToken} style={{ cursor: 'pointer' }} />}
-        />
-        <Button type="primary" icon={<CopyOutlined />} onClick={copyToken} style={{ marginTop: 8 }}>
-          复制密钥
-        </Button>
-      </Modal>
-    </div>
-  )
-}

admin-v2/src/pages/Dashboard.tsx

@@ -3,7 +3,7 @@
 // ============================================================
 
 import { useQuery } from '@tanstack/react-query'
-import { Card, Col, Row, Statistic, Table, Tag, Typography, Spin, Alert } from 'antd'
+import { Card, Col, Row, Statistic, Table, Tag, Spin } from 'antd'
 import {
   TeamOutlined,
   CloudServerOutlined,
@@ -13,34 +13,18 @@ import {
 } from '@ant-design/icons'
 import { statsService } from '@/services/stats'
 import { logService } from '@/services/logs'
+import { PageHeader } from '@/components/PageHeader'
+import { ErrorState } from '@/components/ErrorState'
+import { actionLabels, actionColors } from '@/constants/status'
 import type { OperationLog } from '@/types'
 
-const { Title } = Typography
-
-const actionLabels: Record<string, string> = {
-  login: '登录', logout: '登出',
-  create_account: '创建账号', update_account: '更新账号', delete_account: '删除账号',
-  create_provider: '创建服务商', update_provider: '更新服务商', delete_provider: '删除服务商',
-  create_model: '创建模型', update_model: '更新模型', delete_model: '删除模型',
-  create_token: '创建密钥', revoke_token: '撤销密钥',
-  update_config: '更新配置',
-  create_prompt: '创建提示词', update_prompt: '更新提示词', archive_prompt: '归档提示词',
-  desktop_audit: '桌面端审计',
-}
-
-const actionColors: Record<string, string> = {
-  login: 'green', logout: 'default',
-  create_account: 'blue', update_account: 'orange', delete_account: 'red',
-  create_provider: 'blue', update_provider: 'orange', delete_provider: 'red',
-  create_model: 'blue', update_model: 'orange', delete_model: 'red',
-  create_token: 'blue', revoke_token: 'red',
-  update_config: 'orange',
-  create_prompt: 'blue', update_prompt: 'orange', archive_prompt: 'red',
-  desktop_audit: 'default',
-}
-
 export default function Dashboard() {
-  const { data: stats, isLoading: statsLoading, error: statsError } = useQuery({
+  const {
+    data: stats,
+    isLoading: statsLoading,
+    error: statsError,
+    refetch: refetchStats,
+  } = useQuery({
     queryKey: ['dashboard-stats'],
     queryFn: ({ signal }) => statsService.dashboard(signal),
   })
@@ -51,15 +35,28 @@ export default function Dashboard() {
   })
 
   if (statsError) {
-    return <Alert type="error" message="加载仪表盘数据失败" description={(statsError as Error).message} showIcon />
+    return (
+      <>
+        <PageHeader title="仪表盘" description="系统概览与最近活动" />
+        <ErrorState
+          message={(statsError as Error).message}
+          onRetry={() => refetchStats()}
+        />
+      </>
+    )
   }
 
   const statCards = [
-    { title: '总账号', value: stats?.total_accounts ?? 0, icon: <TeamOutlined />, color: '#1677ff' },
-    { title: '活跃服务商', value: stats?.active_providers ?? 0, icon: <CloudServerOutlined />, color: '#52c41a' },
-    { title: '活跃模型', value: stats?.active_models ?? 0, icon: <ApiOutlined />, color: '#722ed1' },
-    { title: '今日请求', value: stats?.tasks_today ?? 0, icon: <ThunderboltOutlined />, color: '#fa8c16' },
-    { title: '今日 Token', value: ((stats?.tokens_today_input ?? 0) + (stats?.tokens_today_output ?? 0)), icon: <ColumnWidthOutlined />, color: '#eb2f96' },
+    { title: '总账号', value: stats?.total_accounts ?? 0, icon: <TeamOutlined />, color: '#863bff' },
+    { title: '活跃服务商', value: stats?.active_providers ?? 0, icon: <CloudServerOutlined />, color: '#47bfff' },
+    { title: '活跃模型', value: stats?.active_models ?? 0, icon: <ApiOutlined />, color: '#22c55e' },
+    { title: '今日请求', value: stats?.tasks_today ?? 0, icon: <ThunderboltOutlined />, color: '#f59e0b' },
+    {
+      title: '今日 Token',
+      value: (stats?.tokens_today_input ?? 0) + (stats?.tokens_today_output ?? 0),
+      icon: <ColumnWidthOutlined />,
+      color: '#ef4444',
+    },
   ]
 
   const logColumns = [
@@ -74,7 +71,13 @@ export default function Dashboard() {
         </Tag>
       ),
     },
-    { title: '目标类型', dataIndex: 'target_type', key: 'target_type', width: 100, render: (v: string | null) => v || '-' },
+    {
+      title: '目标类型',
+      dataIndex: 'target_type',
+      key: 'target_type',
+      width: 100,
+      render: (v: string | null) => v || '-',
+    },
     {
       title: '时间',
       dataIndex: 'created_at',
@@ -86,19 +89,34 @@ export default function Dashboard() {
 
   return (
     <div>
-      <Title level={4} style={{ marginBottom: 24 }}>仪表盘</Title>
+      <PageHeader title="仪表盘" description="系统概览与最近活动" />
 
-      <Row gutter={[16, 16]} style={{ marginBottom: 24 }}>
+      {/* Stat Cards */}
+      <Row gutter={[16, 16]} className="mb-6">
         {statsLoading ? (
-          <Col span={24}><Spin /></Col>
+          <Col span={24}>
+            <div className="flex justify-center py-8">
+              <Spin size="large" />
+            </div>
+          </Col>
         ) : (
           statCards.map((card) => (
             <Col xs={24} sm={12} md={8} lg={4} key={card.title}>
-              <Card>
+              <Card
+                className="hover:shadow-md transition-shadow duration-200"
+                styles={{ body: { padding: '20px 24px' } }}
+              >
                 <Statistic
-                  title={card.title}
+                  title={
+                    <span className="text-neutral-500 dark:text-neutral-400 text-xs font-medium uppercase tracking-wide">
+                      {card.title}
+                    </span>
+                  }
                   value={card.value}
-                  prefix={<span style={{ color: card.color }}>{card.icon}</span>}
+                  valueStyle={{ fontSize: 28, fontWeight: 600, color: card.color }}
+                  prefix={
+                    <span style={{ color: card.color, marginRight: 4 }}>{card.icon}</span>
+                  }
                 />
               </Card>
             </Col>
@@ -106,7 +124,16 @@ export default function Dashboard() {
         )}
       </Row>
 
-      <Card title="最近操作日志" size="small">
+      {/* Recent Logs */}
+      <Card
+        title={
+          <span className="text-sm font-semibold text-neutral-700 dark:text-neutral-300">
+            最近操作日志
+          </span>
+        }
+        size="small"
+        styles={{ body: { padding: 0 } }}
+      >
         <Table<OperationLog>
           columns={logColumns}
           dataSource={logsData?.items ?? []}

admin-v2/src/pages/Login.tsx

@@ -6,13 +6,11 @@ import { useState } from 'react'
 import { useNavigate, useSearchParams } from 'react-router-dom'
 import { LoginForm, ProFormText } from '@ant-design/pro-components'
 import { LockOutlined, UserOutlined, SafetyOutlined } from '@ant-design/icons'
-import { message, Divider, Typography } from 'antd'
+import { message } from 'antd'
 import { authService } from '@/services/auth'
 import { useAuthStore } from '@/stores/authStore'
 import type { LoginRequest } from '@/types'
 
-const { Title, Text } = Typography
-
 export default function Login() {
   const navigate = useNavigate()
   const [searchParams] = useSearchParams()
@@ -50,51 +48,75 @@ export default function Login() {
   }
 
   return (
-    <div style={{ minHeight: '100vh', display: 'flex' }}>
-      {/* 左侧品牌区 */}
-      <div
-        style={{
-          flex: '1 1 0',
-          display: 'flex',
-          flexDirection: 'column',
-          alignItems: 'center',
-          justifyContent: 'center',
-          background: 'linear-gradient(135deg, #001529 0%, #003a70 50%, #001529 100%)',
-          position: 'relative',
-          overflow: 'hidden',
-        }}
+    <div className="min-h-screen flex">
+      {/* Left Brand Panel — hidden on mobile */}
+      <div className="hidden md:flex flex-1 flex-col items-center justify-center relative overflow-hidden"
+        style={{ background: 'linear-gradient(135deg, #0c0a09 0%, #1c1917 40%, #292524 100%)' }}
       >
-        <Title level={1} style={{ color: '#fff', marginBottom: 8, letterSpacing: 4 }}>
-          ZCLAW
-        </Title>
-        <Text style={{ color: 'rgba(255,255,255,0.65)', fontSize: 16 }}>AI Agent 管理平台</Text>
-        <Divider style={{ borderColor: 'rgba(22,119,255,0.3)', width: 100, minWidth: 100 }} />
-        <Text style={{ color: 'rgba(255,255,255,0.45)', fontSize: 13, maxWidth: 320, textAlign: 'center' }}>
-          统一管理 AI 服务商、模型配置、API 密钥、用量监控与系统配置
-        </Text>
+        {/* Decorative gradient orb */}
+        <div
+          className="absolute w-[400px] h-[400px] rounded-full opacity-20 blur-3xl"
+          style={{ background: 'linear-gradient(135deg, #863bff, #47bfff)', top: '20%', left: '10%' }}
+        />
+        <div
+          className="absolute w-[300px] h-[300px] rounded-full opacity-10 blur-3xl"
+          style={{ background: 'linear-gradient(135deg, #47bfff, #863bff)', bottom: '10%', right: '15%' }}
+        />
+
+        {/* Brand content */}
+        <div className="relative z-10 text-center px-8">
+          <div
+            className="inline-flex items-center justify-center w-16 h-16 rounded-2xl mb-6"
+            style={{ background: 'linear-gradient(135deg, #863bff, #47bfff)' }}
+          >
+            <span className="text-white text-2xl font-bold">Z</span>
+          </div>
+          <h1 className="text-4xl font-bold text-white mb-3 tracking-tight">ZCLAW</h1>
+          <p className="text-white/50 text-base mb-8">AI Agent 管理平台</p>
+          <div className="w-16 h-px mx-auto mb-8" style={{ background: 'linear-gradient(90deg, transparent, #863bff, #47bfff, transparent)' }} />
+          <p className="text-white/30 text-sm max-w-sm mx-auto leading-relaxed">
+            统一管理 AI 服务商、模型配置、API 密钥、用量监控与系统配置
+          </p>
+        </div>
       </div>
 
-      {/* 右侧登录表单 */}
-      <div
-        style={{
-          flex: '0 0 480px',
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          padding: 48,
-        }}
-      >
-        <div style={{ width: '100%', maxWidth: 360 }}>
-          <Title level={3} style={{ marginBottom: 4 }}>登录</Title>
-          <Text type="secondary" style={{ display: 'block', marginBottom: 32 }}>
+      {/* Right Login Form */}
+      <div className="flex-1 md:flex-none md:w-[480px] flex items-center justify-center p-8 bg-white dark:bg-neutral-950">
+        <div className="w-full max-w-[360px]">
+          {/* Mobile logo (visible only on mobile) */}
+          <div className="md:hidden flex items-center gap-3 mb-10">
+            <div
+              className="flex items-center justify-center w-10 h-10 rounded-xl"
+              style={{ background: 'linear-gradient(135deg, #863bff, #47bfff)' }}
+            >
+              <span className="text-white font-bold">Z</span>
+            </div>
+            <span className="text-xl font-bold text-neutral-900 dark:text-white">ZCLAW</span>
+          </div>
+
+          <h2 className="text-2xl font-semibold text-neutral-900 dark:text-white mb-1">
+            登录
+          </h2>
+          <p className="text-sm text-neutral-500 dark:text-neutral-400 mb-8">
             输入您的账号信息以继续
-          </Text>
+          </p>
 
           <LoginForm
             onFinish={handleSubmit}
             submitter={{
               searchConfig: { submitText: '登录' },
-              submitButtonProps: { loading, block: true },
+              submitButtonProps: {
+                loading,
+                block: true,
+                style: {
+                  height: 44,
+                  borderRadius: 8,
+                  fontWeight: 500,
+                  fontSize: 15,
+                  background: 'linear-gradient(135deg, #863bff, #47bfff)',
+                  border: 'none',
+                },
+              },
             }}
           >
             <ProFormText

admin-v2/src/pages/ModelServices.tsx

@@ -0,0 +1,427 @@
+import { useState } from 'react'
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
+import { Button, message, Tag, Modal, Form, Input, InputNumber, Switch, Space, Popconfirm, Tabs, Table, Typography } from 'antd'
+import { PlusOutlined } from '@ant-design/icons'
+import type { ProColumns } from '@ant-design/pro-components'
+import { ProTable } from '@ant-design/pro-components'
+import { providerService } from '@/services/providers'
+import { modelService } from '@/services/models'
+import type { Provider, ProviderKey, Model } from '@/types'
+
+const { Text } = Typography
+
+// ============================================================
+// 子组件: 模型表格
+// ============================================================
+function ProviderModelsTable({ providerId }: { providerId: string }) {
+  const queryClient = useQueryClient()
+  const [form] = Form.useForm()
+  const [modalOpen, setModalOpen] = useState(false)
+  const [editingId, setEditingId] = useState<string | null>(null)
+
+  const { data, isLoading } = useQuery({
+    queryKey: ['provider-models', providerId],
+    queryFn: ({ signal }) => modelService.list({ provider_id: providerId! }, signal),
+  })
+
+  const createMutation = useMutation({
+    mutationFn: (data: Partial<Omit<Model, 'id'>>) => modelService.create(data),
+    onSuccess: () => {
+      message.success('模型已创建')
+      queryClient.invalidateQueries({ queryKey: ['provider-models', providerId] })
+      setModalOpen(false)
+      form.resetFields()
+    },
+    onError: (err: Error) => message.error(err.message || '创建失败'),
+  })
+
+  const updateMutation = useMutation({
+    mutationFn: ({ id, data }: { id: string; data: Partial<Omit<Model, 'id'>> }) =>
+      modelService.update(id, data),
+    onSuccess: () => {
+      message.success('模型已更新')
+      queryClient.invalidateQueries({ queryKey: ['provider-models', providerId] })
+      setModalOpen(false)
+    },
+    onError: (err: Error) => message.error(err.message || '更新失败'),
+  })
+
+  const deleteMutation = useMutation({
+    mutationFn: (id: string) => modelService.delete(id),
+    onSuccess: () => {
+      message.success('模型已删除')
+      queryClient.invalidateQueries({ queryKey: ['provider-models', providerId] })
+    },
+    onError: (err: Error) => message.error(err.message || '删除失败'),
+  })
+
+  const handleSave = async () => {
+    const values = await form.validateFields()
+    if (editingId) {
+      updateMutation.mutate({ id: editingId, data: values })
+    } else {
+      createMutation.mutate({ ...values, provider_id: providerId })
+    }
+  }
+
+  const columns: ProColumns<Model>[] = [
+    { title: '模型 ID', dataIndex: 'model_id', width: 180, render: (_, r) => <Text code>{r.model_id}</Text> },
+    { title: '别名', dataIndex: 'alias', width: 120 },
+    { title: '上下文窗口', dataIndex: 'context_window', width: 100, render: (_, r) => r.context_window?.toLocaleString() },
+    { title: '最大输出', dataIndex: 'max_output_tokens', width: 90, render: (_, r) => r.max_output_tokens?.toLocaleString() },
+    { title: '流式', dataIndex: 'supports_streaming', width: 60, render: (_, r) => r.supports_streaming ? <Tag color="green">是</Tag> : <Tag>否</Tag> },
+    { title: '视觉', dataIndex: 'supports_vision', width: 60, render: (_, r) => r.supports_vision ? <Tag color="blue">是</Tag> : <Tag>否</Tag> },
+    { title: '状态', dataIndex: 'enabled', width: 60, render: (_, r) => r.enabled ? <Tag color="green">启用</Tag> : <Tag>禁用</Tag> },
+    {
+      title: '操作', width: 120, render: (_, record) => (
+        <Space>
+          <Button size="small" onClick={() => { setEditingId(record.id); form.setFieldsValue(record); setModalOpen(true) }}>编辑</Button>
+          <Popconfirm title="确定删除此模型?" onConfirm={() => deleteMutation.mutate(record.id)}>
+            <Button size="small" danger>删除</Button>
+          </Popconfirm>
+        </Space>
+      ),
+    },
+  ]
+
+  const models = data?.items ?? []
+
+  return (
+    <div>
+      <div style={{ marginBottom: 8 }}>
+        <Button size="small" type="primary" icon={<PlusOutlined />} onClick={() => { setEditingId(null); form.resetFields(); setModalOpen(true) }}>
+          添加模型
+        </Button>
+      </div>
+      <Table<Model>
+        columns={columns}
+        dataSource={models}
+        loading={isLoading}
+        rowKey="id"
+        size="small"
+        pagination={false}
+      />
+      <Modal
+        title={editingId ? '编辑模型' : '添加模型'}
+        open={modalOpen}
+        onOk={handleSave}
+        onCancel={() => { setModalOpen(false); setEditingId(null); form.resetFields() }}
+        confirmLoading={createMutation.isPending || updateMutation.isPending}
+        width={560}
+      >
+        <Form form={form} layout="vertical">
+          <Form.Item name="model_id" label="模型 ID" rules={[{ required: true }]}>
+            <Input placeholder="如 gpt-4o" />
+          </Form.Item>
+          <Form.Item name="alias" label="别名">
+            <Input placeholder="可选" />
+          </Form.Item>
+          <div style={{ display: 'flex', gap: 16 }}>
+            <Form.Item name="context_window" label="上下文窗口" style={{ flex: 1 }}>
+              <InputNumber min={0} placeholder="128000" style={{ width: '100%' }} />
+            </Form.Item>
+            <Form.Item name="max_output_tokens" label="最大输出 Token" style={{ flex: 1 }}>
+              <InputNumber min={0} placeholder="4096" style={{ width: '100%' }} />
+            </Form.Item>
+          </div>
+          <div style={{ display: 'flex', gap: 16 }}>
+            <Form.Item name="enabled" label="启用" valuePropName="checked" style={{ flex: 1 }}>
+              <Switch />
+            </Form.Item>
+            <Form.Item name="supports_streaming" label="支持流式" valuePropName="checked" style={{ flex: 1 }}>
+              <Switch defaultChecked />
+            </Form.Item>
+            <Form.Item name="supports_vision" label="支持视觉" valuePropName="checked" style={{ flex: 1 }}>
+              <Switch />
+            </Form.Item>
+          </div>
+          <div style={{ display: 'flex', gap: 16 }}>
+            <Form.Item name="pricing_input" label="输入价格 (每百万Token)" style={{ flex: 1 }}>
+              <InputNumber min={0} step={0.01} placeholder="0" style={{ width: '100%' }} />
+            </Form.Item>
+            <Form.Item name="pricing_output" label="输出价格 (每百万Token)" style={{ flex: 1 }}>
+              <InputNumber min={0} step={0.01} placeholder="0" style={{ width: '100%' }} />
+            </Form.Item>
+          </div>
+        </Form>
+      </Modal>
+    </div>
+  )
+}
+
+// ============================================================
+// 子组件: Key Pool 表格
+// ============================================================
+function ProviderKeysTable({ providerId }: { providerId: string }) {
+  const queryClient = useQueryClient()
+  const [addKeyForm] = Form.useForm()
+  const [addKeyOpen, setAddKeyOpen] = useState(false)
+
+  const { data, isLoading } = useQuery({
+    queryKey: ['provider-keys', providerId],
+    queryFn: ({ signal }) => providerService.listKeys(providerId!, signal),
+  })
+
+  const addKeyMutation = useMutation({
+    mutationFn: (data: { key_label: string; key_value: string; priority?: number; max_rpm?: number; max_tpm?: number }) =>
+      providerService.addKey(providerId, data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['provider-keys', providerId] })
+      message.success('密钥已添加')
+      setAddKeyOpen(false)
+      addKeyForm.resetFields()
+    },
+    onError: () => message.error('添加失败'),
+  })
+
+  const toggleKeyMutation = useMutation({
+    mutationFn: ({ keyId, active }: { keyId: string; active: boolean }) =>
+      providerService.toggleKey(providerId, keyId, active),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['provider-keys', providerId] })
+      message.success('状态已切换')
+    },
+    onError: () => message.error('切换失败'),
+  })
+
+  const deleteKeyMutation = useMutation({
+    mutationFn: (keyId: string) => providerService.deleteKey(providerId, keyId),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['provider-keys', providerId] })
+      message.success('密钥已删除')
+    },
+    onError: () => message.error('删除失败'),
+  })
+
+  const keyColumns: ProColumns<ProviderKey>[] = [
+    { title: '标签', dataIndex: 'key_label', width: 120 },
+    { title: '优先级', dataIndex: 'priority', width: 70 },
+    { title: '请求数', dataIndex: 'total_requests', width: 80 },
+    { title: 'Token 数', dataIndex: 'total_tokens', width: 90 },
+    {
+      title: '状态', dataIndex: 'is_active', width: 70,
+      render: (_, r) => r.is_active ? <Tag color="green">活跃</Tag> : <Tag color="orange">冷却</Tag>,
+    },
+    {
+      title: '操作', width: 120,
+      render: (_, record) => (
+        <Space>
+          <Popconfirm
+            title={record.is_active ? '确定禁用此密钥?' : '确定启用此密钥?'}
+            onConfirm={() => toggleKeyMutation.mutate({ keyId: record.id, active: !record.is_active })}
+          >
+            <Button size="small" type={record.is_active ? 'default' : 'primary'}>
+              {record.is_active ? '禁用' : '启用'}
+            </Button>
+          </Popconfirm>
+          <Popconfirm title="确定删除此密钥?此操作不可恢复。" onConfirm={() => deleteKeyMutation.mutate(record.id)}>
+            <Button size="small" danger>删除</Button>
+          </Popconfirm>
+        </Space>
+      ),
+    },
+  ]
+
+  const keys = data ?? []
+
+  return (
+    <div>
+      <div style={{ marginBottom: 8 }}>
+        <Button size="small" type="primary" icon={<PlusOutlined />} onClick={() => { addKeyForm.resetFields(); setAddKeyOpen(true) }}>
+          添加密钥
+        </Button>
+      </div>
+      <Table<ProviderKey>
+        columns={keyColumns}
+        dataSource={keys}
+        loading={isLoading}
+        rowKey="id"
+        size="small"
+        pagination={false}
+      />
+      <Modal
+        title="添加密钥"
+        open={addKeyOpen}
+        onOk={() => {
+          addKeyForm.validateFields().then((v) => addKeyMutation.mutate(v))
+        }}
+        onCancel={() => setAddKeyOpen(false)}
+        confirmLoading={addKeyMutation.isPending}
+      >
+        <Form form={addKeyForm} layout="vertical">
+          <Form.Item name="key_label" label="标签" rules={[{ required: true }]}>
+            <Input placeholder="如: my-openai-key" />
+          </Form.Item>
+          <Form.Item name="key_value" label="API Key" rules={[{ required: true }]}>
+            <Input.Password placeholder="sk-..." />
+          </Form.Item>
+          <div style={{ display: 'flex', gap: 16 }}>
+            <Form.Item name="priority" label="优先级" initialValue={0} style={{ flex: 1 }}>
+              <InputNumber min={0} style={{ width: '100%' }} />
+            </Form.Item>
+            <Form.Item name="max_rpm" label="最大 RPM" style={{ flex: 1 }}>
+              <InputNumber min={0} style={{ width: '100%' }} />
+            </Form.Item>
+            <Form.Item name="max_tpm" label="最大 TPM" style={{ flex: 1 }}>
+              <InputNumber min={0} style={{ width: '100%' }} />
+            </Form.Item>
+          </div>
+        </Form>
+      </Modal>
+    </div>
+  )
+}
+
+// ============================================================
+// 主页面: 模型服务
+// ============================================================
+export default function ModelServices() {
+  const queryClient = useQueryClient()
+  const [form] = Form.useForm()
+  const [modalOpen, setModalOpen] = useState(false)
+  const [editingId, setEditingId] = useState<string | null>(null)
+
+  const { data, isLoading } = useQuery({
+    queryKey: ['providers'],
+    queryFn: ({ signal }) => providerService.list(signal),
+  })
+
+  const createMutation = useMutation({
+    mutationFn: (data: Partial<Omit<Provider, 'id' | 'created_at' | 'updated_at'>>) =>
+      providerService.create(data),
+    onSuccess: () => {
+      message.success('服务商已创建')
+      queryClient.invalidateQueries({ queryKey: ['providers'] })
+      setModalOpen(false)
+      form.resetFields()
+    },
+    onError: (err: Error) => message.error(err.message || '创建失败'),
+  })
+
+  const updateMutation = useMutation({
+    mutationFn: ({ id, data }: { id: string; data: Partial<Omit<Provider, 'id' | 'created_at' | 'updated_at'>> }) =>
+      providerService.update(id, data),
+    onSuccess: () => {
+      message.success('服务商已更新')
+      queryClient.invalidateQueries({ queryKey: ['providers'] })
+      setModalOpen(false)
+    },
+    onError: (err: Error) => message.error(err.message || '更新失败'),
+  })
+
+  const deleteMutation = useMutation({
+    mutationFn: (id: string) => providerService.delete(id),
+    onSuccess: () => {
+      message.success('服务商已删除')
+      queryClient.invalidateQueries({ queryKey: ['providers'] })
+    },
+    onError: (err: Error) => message.error(err.message || '删除失败'),
+  })
+
+  const handleSave = async () => {
+    const values = await form.validateFields()
+    if (editingId) {
+      updateMutation.mutate({ id: editingId, data: values })
+    } else {
+      createMutation.mutate(values)
+    }
+  }
+
+  const columns: ProColumns<Provider>[] = [
+    { title: '名称', dataIndex: 'display_name', width: 150 },
+    { title: '标识', dataIndex: 'name', width: 120, render: (_, r) => <Text code>{r.name}</Text> },
+    { title: 'Base URL', dataIndex: 'base_url', width: 260, ellipsis: true },
+    { title: '协议', dataIndex: 'api_protocol', width: 90, hideInSearch: true },
+    { title: 'RPM', dataIndex: 'rate_limit_rpm', width: 80, hideInSearch: true, render: (_, r) => r.rate_limit_rpm ?? '-' },
+    {
+      title: '状态', dataIndex: 'enabled', width: 70, hideInSearch: true,
+      render: (_, r) => r.enabled ? <Tag color="green">启用</Tag> : <Tag>禁用</Tag>,
+    },
+    {
+      title: '操作', width: 140, hideInSearch: true,
+      render: (_, record) => (
+        <Space>
+          <Button size="small" onClick={() => { setEditingId(record.id); form.setFieldsValue(record); setModalOpen(true) }}>编辑</Button>
+          <Popconfirm title="确定删除此服务商?" onConfirm={() => deleteMutation.mutate(record.id)}>
+            <Button size="small" danger>删除</Button>
+          </Popconfirm>
+        </Space>
+      ),
+    },
+  ]
+
+  return (
+    <div>
+      <ProTable<Provider>
+        columns={columns}
+        dataSource={data?.items ?? []}
+        loading={isLoading}
+        rowKey="id"
+        search={{}}
+        toolBarRender={() => [
+          <Button key="add" type="primary" icon={<PlusOutlined />} onClick={() => { setEditingId(null); form.resetFields(); setModalOpen(true) }}>
+            新建服务商
+          </Button>,
+        ]}
+        pagination={{
+          total: data?.total ?? 0,
+          pageSize: data?.page_size ?? 20,
+          current: data?.page ?? 1,
+          showSizeChanger: false,
+        }}
+        expandable={{
+          expandedRowRender: (record) => (
+            <Tabs
+              size="small"
+              style={{ marginTop: 8 }}
+              items={[
+                {
+                  key: 'models',
+                  label: `模型`,
+                  children: <ProviderModelsTable providerId={record.id} />,
+                },
+                {
+                  key: 'keys',
+                  label: 'Key Pool',
+                  children: <ProviderKeysTable providerId={record.id} />,
+                },
+              ]}
+            />
+          ),
+        }}
+      />
+
+      <Modal
+        title={editingId? '编辑服务商' : '新建服务商'}
+        open={modalOpen}
+        onOk={handleSave}
+        onCancel={() => { setModalOpen(false); setEditingId(null); form.resetFields() }}
+        confirmLoading={createMutation.isPending || updateMutation.isPending}
+        width={560}
+      >
+        <Form form={form} layout="vertical">
+          <Form.Item name="name" label="标识" rules={[{ required: true }]}>
+            <Input disabled={!!editingId} placeholder="如 openai, anthropic" />
+          </Form.Item>
+          <Form.Item name="display_name" label="显示名称" rules={[{ required: true }]}>
+            <Input placeholder="如 OpenAI" />
+          </Form.Item>
+          <Form.Item name="base_url" label="Base URL" rules={[{ required: true }]}>
+            <Input placeholder="https://api.openai.com/v1" />
+          </Form.Item>
+          <Form.Item name="api_protocol" label="API 协议">
+            <Input placeholder="openai" />
+          </Form.Item>
+          <div style={{ display: 'flex', gap: 16 }}>
+            <Form.Item name="enabled" label="启用" valuePropName="checked" style={{ flex: 1 }}>
+              <Switch />
+            </Form.Item>
+            <Form.Item name="rate_limit_rpm" label="RPM 限制" style={{ flex: 1 }}>
+              <InputNumber min={0} style={{ width: '100%' }} />
+            </Form.Item>
+          </div>
+        </Form>
+      </Modal>
+    </div>
+  )
+}

admin-v2/src/pages/Models.tsx

@@ -1,191 +0,0 @@
-// ============================================================
-// 模型管理
-// ============================================================
-
-import { useState } from 'react'
-import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
-import { Button, message, Tag, Modal, Form, Input, InputNumber, Switch, Select, Space, Popconfirm } from 'antd'
-import { PlusOutlined } from '@ant-design/icons'
-import type { ProColumns } from '@ant-design/pro-components'
-import { ProTable } from '@ant-design/pro-components'
-import { modelService } from '@/services/models'
-import { providerService } from '@/services/providers'
-import type { Model } from '@/types'
-
-export default function Models() {
-  const queryClient = useQueryClient()
-  const [form] = Form.useForm()
-  const [modalOpen, setModalOpen] = useState(false)
-  const [editingId, setEditingId] = useState<string | null>(null)
-
-  const { data, isLoading } = useQuery({
-    queryKey: ['models'],
-    queryFn: ({ signal }) => modelService.list(signal),
-  })
-
-  const { data: providersData } = useQuery({
-    queryKey: ['providers-for-select'],
-    queryFn: ({ signal }) => providerService.list(signal),
-  })
-
-  const createMutation = useMutation({
-    mutationFn: (data: Partial<Omit<Model, 'id'>>) => modelService.create(data),
-    onSuccess: () => {
-      message.success('创建成功')
-      queryClient.invalidateQueries({ queryKey: ['models'] })
-      setModalOpen(false)
-      form.resetFields()
-    },
-    onError: (err: Error) => message.error(err.message || '创建失败'),
-  })
-
-  const updateMutation = useMutation({
-    mutationFn: ({ id, data }: { id: string; data: Partial<Omit<Model, 'id'>> }) =>
-      modelService.update(id, data),
-    onSuccess: () => {
-      message.success('更新成功')
-      queryClient.invalidateQueries({ queryKey: ['models'] })
-      setModalOpen(false)
-    },
-    onError: (err: Error) => message.error(err.message || '更新失败'),
-  })
-
-  const deleteMutation = useMutation({
-    mutationFn: (id: string) => modelService.delete(id),
-    onSuccess: () => {
-      message.success('删除成功')
-      queryClient.invalidateQueries({ queryKey: ['models'] })
-    },
-    onError: (err: Error) => message.error(err.message || '删除失败'),
-  })
-
-  const columns: ProColumns<Model>[] = [
-    { title: '模型 ID', dataIndex: 'model_id', width: 180, render: (_, r) => <code>{r.model_id}</code> },
-    { title: '别名', dataIndex: 'alias', width: 140 },
-    {
-      title: '服务商',
-      dataIndex: 'provider_id',
-      width: 140,
-      hideInSearch: true,
-      render: (_, r) => {
-        const provider = providersData?.items?.find((p) => p.id === r.provider_id)
-        return provider?.display_name || r.provider_id.substring(0, 8)
-      },
-    },
-    { title: '上下文窗口', dataIndex: 'context_window', width: 110, hideInSearch: true, render: (_, r) => r.context_window?.toLocaleString() },
-    { title: '最大输出', dataIndex: 'max_output_tokens', width: 100, hideInSearch: true, render: (_, r) => r.max_output_tokens?.toLocaleString() },
-    {
-      title: '流式',
-      dataIndex: 'supports_streaming',
-      width: 70,
-      hideInSearch: true,
-      render: (_, r) => r.supports_streaming ? <Tag color="green">是</Tag> : <Tag>否</Tag>,
-    },
-    {
-      title: '视觉',
-      dataIndex: 'supports_vision',
-      width: 70,
-      hideInSearch: true,
-      render: (_, r) => r.supports_vision ? <Tag color="blue">是</Tag> : <Tag>否</Tag>,
-    },
-    {
-      title: '状态',
-      dataIndex: 'enabled',
-      width: 70,
-      hideInSearch: true,
-      render: (_, r) => r.enabled ? <Tag color="green">启用</Tag> : <Tag>禁用</Tag>,
-    },
-    {
-      title: '操作',
-      width: 160,
-      hideInSearch: true,
-      render: (_, record) => (
-        <Space>
-          <Button size="small" onClick={() => { setEditingId(record.id); form.setFieldsValue(record); setModalOpen(true) }}>
-            编辑
-          </Button>
-          <Popconfirm title="确定删除此模型？" onConfirm={() => deleteMutation.mutate(record.id)}>
-            <Button size="small" danger>删除</Button>
-          </Popconfirm>
-        </Space>
-      ),
-    },
-  ]
-
-  const handleSave = async () => {
-    const values = await form.validateFields()
-    if (editingId) {
-      updateMutation.mutate({ id: editingId, data: values })
-    } else {
-      createMutation.mutate(values)
-    }
-  }
-
-  return (
-    <div>
-      <ProTable<Model>
-        columns={columns}
-        dataSource={data?.items ?? []}
-        loading={isLoading}
-        rowKey="id"
-        search={{}}
-        toolBarRender={() => [
-          <Button key="add" type="primary" icon={<PlusOutlined />} onClick={() => { setEditingId(null); form.resetFields(); setModalOpen(true) }}>
-            新建模型
-          </Button>,
-        ]}
-        pagination={{
-          total: data?.total ?? 0,
-          pageSize: data?.page_size ?? 20,
-          current: data?.page ?? 1,
-          showSizeChanger: false,
-        }}
-      />
-
-      <Modal
-        title={editingId ? '编辑模型' : '新建模型'}
-        open={modalOpen}
-        onOk={handleSave}
-        onCancel={() => { setModalOpen(false); setEditingId(null); form.resetFields() }}
-        confirmLoading={createMutation.isPending || updateMutation.isPending}
-        width={600}
-      >
-        <Form form={form} layout="vertical">
-          <Form.Item name="provider_id" label="服务商" rules={[{ required: true }]}>
-            <Select
-              options={(providersData?.items ?? []).map((p) => ({ value: p.id, label: p.display_name }))}
-              placeholder="选择服务商"
-            />
-          </Form.Item>
-          <Form.Item name="model_id" label="模型 ID" rules={[{ required: true }]}>
-            <Input placeholder="如 gpt-4o" />
-          </Form.Item>
-          <Form.Item name="alias" label="别名">
-            <Input />
-          </Form.Item>
-          <Form.Item name="context_window" label="上下文窗口">
-            <InputNumber min={0} style={{ width: '100%' }} />
-          </Form.Item>
-          <Form.Item name="max_output_tokens" label="最大输出 Token">
-            <InputNumber min={0} style={{ width: '100%' }} />
-          </Form.Item>
-          <Form.Item name="enabled" label="启用" valuePropName="checked">
-            <Switch />
-          </Form.Item>
-          <Form.Item name="supports_streaming" label="支持流式" valuePropName="checked">
-            <Switch />
-          </Form.Item>
-          <Form.Item name="supports_vision" label="支持视觉" valuePropName="checked">
-            <Switch />
-          </Form.Item>
-          <Form.Item name="pricing_input" label="输入价格 (每百万 Token)">
-            <InputNumber min={0} step={0.01} style={{ width: '100%' }} />
-          </Form.Item>
-          <Form.Item name="pricing_output" label="输出价格 (每百万 Token)">
-            <InputNumber min={0} step={0.01} style={{ width: '100%' }} />
-          </Form.Item>
-        </Form>
-      </Modal>
-    </div>
-  )
-}

admin-v2/src/pages/Providers.tsx

@@ -1,290 +0,0 @@
-// ============================================================
-// 服务商管理
-// ============================================================
-
-import { useState } from 'react'
-import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
-import { Button, message, Tag, Modal, Form, Input, InputNumber, Switch, Space, Popconfirm, Typography } from 'antd'
-import { PlusOutlined } from '@ant-design/icons'
-import type { ProColumns } from '@ant-design/pro-components'
-import { ProTable } from '@ant-design/pro-components'
-import { providerService } from '@/services/providers'
-import type { Provider, ProviderKey } from '@/types'
-
-const { Text } = Typography
-
-export default function Providers() {
-  const queryClient = useQueryClient()
-  const [form] = Form.useForm()
-  const [modalOpen, setModalOpen] = useState(false)
-  const [editingId, setEditingId] = useState<string | null>(null)
-  const [keyModalProviderId, setKeyModalProviderId] = useState<string | null>(null)
-  const [addKeyOpen, setAddKeyOpen] = useState(false)
-  const [addKeyForm] = Form.useForm()
-
-  const { data, isLoading } = useQuery({
-    queryKey: ['providers'],
-    queryFn: ({ signal }) => providerService.list(signal),
-  })
-
-  const { data: keysData, isLoading: keysLoading } = useQuery({
-    queryKey: ['provider-keys', keyModalProviderId],
-    queryFn: ({ signal }) => providerService.listKeys(keyModalProviderId!, signal),
-    enabled: !!keyModalProviderId,
-  })
-
-  const createMutation = useMutation({
-    mutationFn: (data: Partial<Omit<Provider, 'id' | 'created_at' | 'updated_at'>>) =>
-      providerService.create(data),
-    onSuccess: () => {
-      message.success('创建成功')
-      queryClient.invalidateQueries({ queryKey: ['providers'] })
-      setModalOpen(false)
-      form.resetFields()
-    },
-    onError: (err: Error) => message.error(err.message || '创建失败'),
-  })
-
-  const updateMutation = useMutation({
-    mutationFn: ({ id, data }: { id: string; data: Partial<Omit<Provider, 'id' | 'created_at' | 'updated_at'>> }) =>
-      providerService.update(id, data),
-    onSuccess: () => {
-      message.success('更新成功')
-      queryClient.invalidateQueries({ queryKey: ['providers'] })
-      setModalOpen(false)
-    },
-    onError: (err: Error) => message.error(err.message || '更新失败'),
-  })
-
-  const deleteMutation = useMutation({
-    mutationFn: (id: string) => providerService.delete(id),
-    onSuccess: () => {
-      message.success('删除成功')
-      queryClient.invalidateQueries({ queryKey: ['providers'] })
-    },
-    onError: (err: Error) => message.error(err.message || '删除失败'),
-  })
-
-  const addKeyMutation = useMutation({
-    mutationFn: ({ providerId, data }: { providerId: string; data: { key_label: string; key_value: string; priority?: number; max_rpm?: number; max_tpm?: number } }) =>
-      providerService.addKey(providerId, data),
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['provider-keys', keyModalProviderId] })
-      message.success('密钥已添加')
-      setAddKeyOpen(false)
-      addKeyForm.resetFields()
-    },
-    onError: () => message.error('添加失败'),
-  })
-
-  const toggleKeyMutation = useMutation({
-    mutationFn: ({ providerId, keyId, active }: { providerId: string; keyId: string; active: boolean }) =>
-      providerService.toggleKey(providerId, keyId, active),
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['provider-keys', keyModalProviderId] })
-      message.success('状态已切换')
-    },
-    onError: () => message.error('切换失败'),
-  })
-
-  const deleteKeyMutation = useMutation({
-    mutationFn: ({ providerId, keyId }: { providerId: string; keyId: string }) =>
-      providerService.deleteKey(providerId, keyId),
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['provider-keys', keyModalProviderId] })
-      message.success('密钥已删除')
-    },
-    onError: () => message.error('删除失败'),
-  })
-
-  const columns: ProColumns<Provider>[] = [
-    { title: '名称', dataIndex: 'display_name', width: 140 },
-    { title: '标识', dataIndex: 'name', width: 120, render: (_, r) => <Text code>{r.name}</Text> },
-    { title: '协议', dataIndex: 'api_protocol', width: 100, hideInSearch: true },
-    { title: 'RPM 限制', dataIndex: 'rate_limit_rpm', width: 100, hideInSearch: true, render: (_, r) => r.rate_limit_rpm ?? '-' },
-    {
-      title: '状态',
-      dataIndex: 'enabled',
-      width: 80,
-      hideInSearch: true,
-      render: (_, r) => r.enabled ? <Tag color="green">启用</Tag> : <Tag>禁用</Tag>,
-    },
-    {
-      title: '操作',
-      width: 260,
-      hideInSearch: true,
-      render: (_, record) => (
-        <Space>
-          <Button size="small" onClick={() => { setEditingId(record.id); form.setFieldsValue(record); setModalOpen(true) }}>
-            编辑
-          </Button>
-          <Button size="small" onClick={() => setKeyModalProviderId(record.id)}>
-            Key Pool
-          </Button>
-          <Popconfirm title="确定删除此服务商？" onConfirm={() => deleteMutation.mutate(record.id)}>
-            <Button size="small" danger>删除</Button>
-          </Popconfirm>
-        </Space>
-      ),
-    },
-  ]
-
-  const keyColumns: ProColumns<ProviderKey>[] = [
-    { title: '标签', dataIndex: 'key_label', width: 120 },
-    { title: '优先级', dataIndex: 'priority', width: 80 },
-    { title: '请求数', dataIndex: 'total_requests', width: 80 },
-    { title: 'Token 数', dataIndex: 'total_tokens', width: 100 },
-    {
-      title: '状态',
-      dataIndex: 'is_active',
-      width: 80,
-      render: (_, r) => r.is_active ? <Tag color="green">活跃</Tag> : <Tag>冷却</Tag>,
-    },
-    {
-      title: '操作',
-      width: 160,
-      render: (_, record) => (
-        <Space>
-          <Popconfirm
-            title={record.is_active ? '确定禁用此密钥？' : '确定启用此密钥？'}
-            onConfirm={() => toggleKeyMutation.mutate({
-              providerId: keyModalProviderId!,
-              keyId: record.id,
-              active: !record.is_active,
-            })}
-          >
-            <Button size="small" type={record.is_active ? 'default' : 'primary'}>
-              {record.is_active ? '禁用' : '启用'}
-            </Button>
-          </Popconfirm>
-          <Popconfirm
-            title="确定删除此密钥？此操作不可恢复。"
-            onConfirm={() => deleteKeyMutation.mutate({
-              providerId: keyModalProviderId!,
-              keyId: record.id,
-            })}
-          >
-            <Button size="small" danger>删除</Button>
-          </Popconfirm>
-        </Space>
-      ),
-    },
-  ]
-
-  const handleSave = async () => {
-    const values = await form.validateFields()
-    if (editingId) {
-      updateMutation.mutate({ id: editingId, data: values })
-    } else {
-      createMutation.mutate(values)
-    }
-  }
-
-  return (
-    <div>
-      <ProTable<Provider>
-        columns={columns}
-        dataSource={data?.items ?? []}
-        loading={isLoading}
-        rowKey="id"
-        search={{}}
-        toolBarRender={() => [
-          <Button key="add" type="primary" icon={<PlusOutlined />} onClick={() => { setEditingId(null); form.resetFields(); setModalOpen(true) }}>
-            新建服务商
-          </Button>,
-        ]}
-        pagination={{
-          total: data?.total ?? 0,
-          pageSize: data?.page_size ?? 20,
-          current: data?.page ?? 1,
-          showSizeChanger: false,
-        }}
-      />
-
-      <Modal
-        title={editingId ? '编辑服务商' : '新建服务商'}
-        open={modalOpen}
-        onOk={handleSave}
-        onCancel={() => { setModalOpen(false); setEditingId(null); form.resetFields() }}
-        confirmLoading={createMutation.isPending || updateMutation.isPending}
-      >
-        <Form form={form} layout="vertical">
-          <Form.Item name="name" label="标识" rules={[{ required: true }]}>
-            <Input disabled={!!editingId} />
-          </Form.Item>
-          <Form.Item name="display_name" label="显示名称" rules={[{ required: true }]}>
-            <Input />
-          </Form.Item>
-          <Form.Item name="base_url" label="Base URL" rules={[{ required: true }]}>
-            <Input />
-          </Form.Item>
-          <Form.Item name="api_protocol" label="API 协议">
-            <Input placeholder="openai" />
-          </Form.Item>
-          <Form.Item name="enabled" label="启用" valuePropName="checked">
-            <Switch />
-          </Form.Item>
-          <Form.Item name="rate_limit_rpm" label="RPM 限制">
-            <InputNumber min={0} style={{ width: '100%' }} />
-          </Form.Item>
-        </Form>
-      </Modal>
-
-      <Modal
-        title="Key Pool"
-        open={!!keyModalProviderId}
-        onCancel={() => setKeyModalProviderId(null)}
-        footer={(_, { OkBtn, CancelBtn }) => (
-          <Space>
-            <CancelBtn />
-            <Button type="primary" onClick={() => { addKeyForm.resetFields(); setAddKeyOpen(true) }}>
-              添加密钥
-            </Button>
-          </Space>
-        )}
-        width={700}
-      >
-        <ProTable<ProviderKey>
-          columns={keyColumns}
-          dataSource={keysData ?? []}
-          loading={keysLoading}
-          rowKey="id"
-          search={false}
-          toolBarRender={false}
-          pagination={false}
-          size="small"
-        />
-      </Modal>
-
-      <Modal
-        title="添加密钥"
-        open={addKeyOpen}
-        onOk={() => {
-          addKeyForm.validateFields().then((v) =>
-            addKeyMutation.mutate({ providerId: keyModalProviderId!, data: v })
-          )
-        }}
-        onCancel={() => setAddKeyOpen(false)}
-        confirmLoading={addKeyMutation.isPending}
-      >
-        <Form form={addKeyForm} layout="vertical">
-          <Form.Item name="key_label" label="标签" rules={[{ required: true }]}>
-            <Input />
-          </Form.Item>
-          <Form.Item name="key_value" label="API Key" rules={[{ required: true }]}>
-            <Input.Password />
-          </Form.Item>
-          <Form.Item name="priority" label="优先级" initialValue={0}>
-            <InputNumber min={0} style={{ width: '100%' }} />
-          </Form.Item>
-          <Form.Item name="max_rpm" label="最大 RPM (可选)">
-            <InputNumber min={0} style={{ width: '100%' }} />
-          </Form.Item>
-          <Form.Item name="max_tpm" label="最大 TPM (可选)">
-            <InputNumber min={0} style={{ width: '100%' }} />
-          </Form.Item>
-        </Form>
-      </Modal>
-    </div>
-  )
-}

admin-v2/src/pages/Relay.tsx

@@ -2,16 +2,16 @@
 // 中转任务
 // ============================================================
 
+import { useState } from 'react'
 import { useQuery } from '@tanstack/react-query'
-import { Tag, Select, Typography } from 'antd'
+import { Tag, Select } from 'antd'
 import type { ProColumns } from '@ant-design/pro-components'
 import { ProTable } from '@ant-design/pro-components'
 import { relayService } from '@/services/relay'
-import { useState } from 'react'
+import { PageHeader } from '@/components/PageHeader'
+import { ErrorState } from '@/components/ErrorState'
 import type { RelayTask } from '@/types'
 
-const { Title } = Typography
-
 const statusLabels: Record<string, string> = {
   queued: '排队中',
   running: '运行中',
@@ -32,26 +32,57 @@ export default function Relay() {
   const [statusFilter, setStatusFilter] = useState<string | undefined>(undefined)
   const [page, setPage] = useState(1)
 
-  const { data, isLoading } = useQuery({
+  const {
+    data,
+    isLoading,
+    error,
+    refetch,
+  } = useQuery({
     queryKey: ['relay-tasks', page, statusFilter],
     queryFn: ({ signal }) => relayService.list({ page, page_size: 20, status: statusFilter }, signal),
   })
 
+  if (error) {
+    return (
+      <>
+        <PageHeader title="中转任务" description="查看和管理 AI 模型中转请求" />
+        <ErrorState message={(error as Error).message} onRetry={() => refetch()} />
+      </>
+    )
+  }
+
   const columns: ProColumns<RelayTask>[] = [
-    { title: 'ID', dataIndex: 'id', width: 120, render: (_, r) => <code>{r.id.substring(0, 8)}...</code> },
+    {
+      title: 'ID',
+      dataIndex: 'id',
+      width: 120,
+      render: (_, r) => (
+        <code className="text-xs px-1.5 py-0.5 rounded bg-neutral-100 dark:bg-neutral-800">
+          {r.id.substring(0, 8)}...
+        </code>
+      ),
+    },
     {
       title: '状态',
       dataIndex: 'status',
       width: 100,
-      render: (_, r) => <Tag color={statusColors[r.status] || 'default'}>{statusLabels[r.status] || r.status}</Tag>,
+      render: (_, r) => (
+        <Tag color={statusColors[r.status] || 'default'}>
+          {statusLabels[r.status] || r.status}
+        </Tag>
+      ),
     },
     { title: '模型', dataIndex: 'model_id', width: 160 },
     { title: '优先级', dataIndex: 'priority', width: 70 },
     { title: '尝试次数', dataIndex: 'attempt_count', width: 80 },
     {
-      title: 'Token',
+      title: 'Token (入/出)',
       width: 140,
-      render: (_, r) => `${r.input_tokens.toLocaleString()} / ${r.output_tokens.toLocaleString()}`,
+      render: (_, r) => (
+        <span className="text-sm">
+          {r.input_tokens.toLocaleString()} / {r.output_tokens.toLocaleString()}
+        </span>
+      ),
     },
     { title: '错误信息', dataIndex: 'error_message', width: 200, ellipsis: true },
     {
@@ -64,30 +95,36 @@ export default function Relay() {
       title: '完成时间',
       dataIndex: 'completed_at',
       width: 180,
-      render: (_, r) => r.completed_at ? new Date(r.completed_at).toLocaleString('zh-CN') : '-',
+      render: (_, r) => (r.completed_at ? new Date(r.completed_at).toLocaleString('zh-CN') : '-'),
     },
   ]
 
   return (
     <div>
-      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 24 }}>
-        <Title level={4} style={{ margin: 0 }}>中转任务</Title>
-        <Select
-          value={statusFilter}
-          onChange={(v) => { setStatusFilter(v === 'all' ? undefined : v); setPage(1) }}
-          placeholder="状态筛选"
-          style={{ width: 140 }}
-          allowClear
-          options={[
-            { value: 'all', label: '全部' },
-            { value: 'queued', label: '排队中' },
-            { value: 'running', label: '运行中' },
-            { value: 'completed', label: '已完成' },
-            { value: 'failed', label: '失败' },
-            { value: 'cancelled', label: '已取消' },
-          ]}
-        />
-      </div>
+      <PageHeader
+        title="中转任务"
+        description="查看和管理 AI 模型中转请求"
+        actions={
+          <Select
+            value={statusFilter}
+            onChange={(v) => {
+              setStatusFilter(v === 'all' ? undefined : v)
+              setPage(1)
+            }}
+            placeholder="状态筛选"
+            className="w-36"
+            allowClear
+            options={[
+              { value: 'all', label: '全部' },
+              { value: 'queued', label: '排队中' },
+              { value: 'running', label: '运行中' },
+              { value: 'completed', label: '已完成' },
+              { value: 'failed', label: '失败' },
+              { value: 'cancelled', label: '已取消' },
+            ]}
+          />
+        }
+      />
 
       <ProTable<RelayTask>
         columns={columns}

admin-v2/src/pages/Usage.tsx

@@ -4,20 +4,24 @@
 
 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 { Card, Col, Row, Select, Statistic } from 'antd'
+import { ThunderboltOutlined, ColumnWidthOutlined } 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 { PageHeader } from '@/components/PageHeader'
+import { ErrorState } from '@/components/ErrorState'
 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({
+  const {
+    data: dailyData,
+    isLoading: dailyLoading,
+    error: dailyError,
+    refetch,
+  } = useQuery({
     queryKey: ['usage-daily', days],
     queryFn: ({ signal }) => telemetryService.dailyStats({ days }, signal),
   })
@@ -28,7 +32,12 @@ export default function Usage() {
   })
 
   if (dailyError) {
-    return <Alert type="error" message="加载用量数据失败" description={(dailyError as Error).message} showIcon />
+    return (
+      <>
+        <PageHeader title="用量统计" description="查看模型使用情况和 Token 消耗" />
+        <ErrorState message={(dailyError as Error).message} onRetry={() => refetch()} />
+      </>
+    )
   }
 
   const totalRequests = dailyData?.reduce((s, d) => s + d.request_count, 0) ?? 0
@@ -36,22 +45,52 @@ export default function Usage() {
 
   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: '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: '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` : '-',
+      render: (_, r) => (r.avg_latency_ms ? `${Math.round(r.avg_latency_ms)}ms` : '-'),
     },
     {
       title: '成功率',
@@ -63,34 +102,66 @@ export default function Usage() {
 
   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>
+      <PageHeader
+        title="用量统计"
+        description="查看模型使用情况和 Token 消耗"
+        actions={
+          <Select
+            value={days}
+            onChange={setDays}
+            options={[
+              { value: 7, label: '最近 7 天' },
+              { value: 30, label: '最近 30 天' },
+              { value: 90, label: '最近 90 天' },
+            ]}
+            className="w-36"
+          />
+        }
+      />
 
-      <Row gutter={[16, 16]} style={{ marginBottom: 24 }}>
-        <Col span={12}>
-          <Card>
-            <Statistic title="总请求数" value={totalRequests} prefix={<ThunderboltOutlined />} />
+      {/* Summary Cards */}
+      <Row gutter={[16, 16]} className="mb-6">
+        <Col xs={24} sm={12}>
+          <Card className="hover:shadow-md transition-shadow duration-200">
+            <Statistic
+              title={
+                <span className="text-neutral-500 dark:text-neutral-400 text-xs font-medium uppercase tracking-wide">
+                  总请求数
+                </span>
+              }
+              value={totalRequests}
+              prefix={<ThunderboltOutlined style={{ color: '#863bff' }} />}
+              valueStyle={{ fontWeight: 600, color: '#863bff' }}
+            />
           </Card>
         </Col>
-        <Col span={12}>
-          <Card>
-            <Statistic title="总 Token 数" value={totalTokens} prefix={<ColumnWidthOutlined />} />
+        <Col xs={24} sm={12}>
+          <Card className="hover:shadow-md transition-shadow duration-200">
+            <Statistic
+              title={
+                <span className="text-neutral-500 dark:text-neutral-400 text-xs font-medium uppercase tracking-wide">
+                  总 Token 数
+                </span>
+              }
+              value={totalTokens}
+              prefix={<ColumnWidthOutlined style={{ color: '#47bfff' }} />}
+              valueStyle={{ fontWeight: 600, color: '#47bfff' }}
+            />
           </Card>
         </Col>
       </Row>
 
-      <Card title="每日统计" style={{ marginBottom: 24 }} size="small">
+      {/* Daily Stats */}
+      <Card
+        title={
+          <span className="text-sm font-semibold text-neutral-700 dark:text-neutral-300">
+            每日统计
+          </span>
+        }
+        className="mb-6"
+        size="small"
+        styles={{ body: { padding: 0 } }}
+      >
         <ProTable<DailyUsageStat>
           columns={dailyColumns}
           dataSource={dailyData ?? []}
@@ -103,7 +174,16 @@ export default function Usage() {
         />
       </Card>
 
-      <Card title="按模型统计" size="small">
+      {/* Model Stats */}
+      <Card
+        title={
+          <span className="text-sm font-semibold text-neutral-700 dark:text-neutral-300">
+            按模型统计
+          </span>
+        }
+        size="small"
+        styles={{ body: { padding: 0 } }}
+      >
         <ProTable<ModelUsageStat>
           columns={modelColumns}
           dataSource={modelData ?? []}