docs: audit reports + feature docs + skills + admin-v2 + config sync

Update audit tracker, roadmap, architecture docs, add admin-v2 Roles page + Billing tests, sync CLAUDE.md, Cargo.toml, docker-compose.yml, add deep-research / frontend-design / chart-visualization skills Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-04-02 19:25:00 +08:00
parent 28299807b6
commit 8898bb399e
48 changed files with 7388 additions and 173 deletions
--- a/admin-v2/src/layouts/AdminLayout.tsx
+++ b/admin-v2/src/layouts/AdminLayout.tsx
@@ -18,6 +18,7 @@ import {
  ApiOutlined,
  BookOutlined,
  CrownOutlined,
+  SafetyOutlined,
 } from '@ant-design/icons'
 import { Avatar, Dropdown, Tooltip, Drawer } from 'antd'
 import { useAuthStore } from '@/stores/authStore'
@@ -39,6 +40,7 @@ interface NavItem {
 const navItems: NavItem[] = [
  { path: '/', name: '仪表盘', icon: <DashboardOutlined />, group: '核心' },
  { path: '/accounts', name: '账号管理', icon: <TeamOutlined />, permission: 'account:admin', group: '资源管理' },
+  { path: '/roles', name: '角色与权限', icon: <SafetyOutlined />, permission: 'account:admin', group: '资源管理' },
  { path: '/model-services', name: '模型服务', icon: <CloudServerOutlined />, permission: 'provider:manage', group: '资源管理' },
  { path: '/agent-templates', name: 'Agent 模板', icon: <RobotOutlined />, permission: 'model:read', group: '资源管理' },
  { path: '/api-keys', name: 'API 密钥', icon: <ApiOutlined />, permission: 'provider:manage', group: '资源管理' },
@@ -201,6 +203,7 @@ function MobileDrawer({
 const breadcrumbMap: Record<string, string> = {
  '/': '仪表盘',
  '/accounts': '账号管理',
+  '/roles': '角色与权限',
  '/model-services': '模型服务',
  '/providers': '模型服务',
  '/models': '模型服务',
--- a/admin-v2/src/pages/Roles.tsx
+++ b/admin-v2/src/pages/Roles.tsx
@@ -0,0 +1,509 @@
+// ============================================================
+// 角色与权限模板管理
+// ============================================================
+
+import { useState } from 'react'
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
+import {
+  Button,
+  message,
+  Tag,
+  Modal,
+  Form,
+  Input,
+  Select,
+  Space,
+  Popconfirm,
+  Tabs,
+  Tooltip,
+} from 'antd'
+import { PlusOutlined, SafetyOutlined, CheckCircleOutlined } from '@ant-design/icons'
+import type { ProColumns } from '@ant-design/pro-components'
+import { ProTable } from '@ant-design/pro-components'
+import { roleService } from '@/services/roles'
+import { PageHeader } from '@/components/PageHeader'
+import type {
+  Role,
+  PermissionTemplate,
+  CreateRoleRequest,
+  UpdateRoleRequest,
+  CreateTemplateRequest,
+} from '@/types'
+
+// ============================================================
+// 常见权限选项
+// ============================================================
+const permissionOptions = [
+  { value: 'account:admin', label: 'account:admin' },
+  { value: 'provider:manage', label: 'provider:manage' },
+  { value: 'model:read', label: 'model:read' },
+  { value: 'model:write', label: 'model:write' },
+  { value: 'relay:use', label: 'relay:use' },
+  { value: 'knowledge:read', label: 'knowledge:read' },
+  { value: 'knowledge:write', label: 'knowledge:write' },
+  { value: 'billing:read', label: 'billing:read' },
+  { value: 'billing:write', label: 'billing:write' },
+  { value: 'config:read', label: 'config:read' },
+  { value: 'config:write', label: 'config:write' },
+  { value: 'prompt:read', label: 'prompt:read' },
+  { value: 'prompt:write', label: 'prompt:write' },
+  { value: 'admin:full', label: 'admin:full' },
+]
+
+// ============================================================
+// Roles Tab
+// ============================================================
+function RolesTab() {
+  const queryClient = useQueryClient()
+  const [form] = Form.useForm()
+  const [modalOpen, setModalOpen] = useState(false)
+  const [editingId, setEditingId] = useState<string | null>(null)
+
+  const { data, isLoading } = useQuery({
+    queryKey: ['roles'],
+    queryFn: ({ signal }) => roleService.list(signal),
+  })
+
+  const createMutation = useMutation({
+    mutationFn: (data: CreateRoleRequest) => roleService.create(data),
+    onSuccess: () => {
+      message.success('角色已创建')
+      queryClient.invalidateQueries({ queryKey: ['roles'] })
+      setModalOpen(false)
+      form.resetFields()
+    },
+    onError: (err: Error) => message.error(err.message || '创建失败'),
+  })
+
+  const updateMutation = useMutation({
+    mutationFn: ({ id, data }: { id: string; data: UpdateRoleRequest }) =>
+      roleService.update(id, data),
+    onSuccess: () => {
+      message.success('角色已更新')
+      queryClient.invalidateQueries({ queryKey: ['roles'] })
+      setModalOpen(false)
+    },
+    onError: (err: Error) => message.error(err.message || '更新失败'),
+  })
+
+  const deleteMutation = useMutation({
+    mutationFn: (id: string) => roleService.delete(id),
+    onSuccess: () => {
+      message.success('角色已删除')
+      queryClient.invalidateQueries({ queryKey: ['roles'] })
+    },
+    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 openEdit = async (record: Role) => {
+    setEditingId(record.id)
+    const permissions = await roleService.getPermissions(record.id).catch(() => record.permissions)
+    form.setFieldsValue({ ...record, permissions })
+    setModalOpen(true)
+  }
+
+  const openCreate = () => {
+    setEditingId(null)
+    form.resetFields()
+    setModalOpen(true)
+  }
+
+  const closeModal = () => {
+    setModalOpen(false)
+    setEditingId(null)
+    form.resetFields()
+  }
+
+  const columns: ProColumns<Role>[] = [
+    {
+      title: '角色名称',
+      dataIndex: 'name',
+      width: 160,
+      render: (_, record) => (
+        <span className="font-medium text-neutral-900 dark:text-neutral-100">
+          {record.name}
+        </span>
+      ),
+    },
+    {
+      title: '描述',
+      dataIndex: 'description',
+      width: 240,
+      ellipsis: true,
+      render: (_, record) => record.description || '-',
+    },
+    {
+      title: '权限数',
+      dataIndex: 'permissions',
+      width: 100,
+      render: (_, record) => (
+        <Tooltip title={record.permissions?.join(', ') || '无权限'}>
+          <Tag>{record.permissions?.length ?? 0} 项</Tag>
+        </Tooltip>
+      ),
+    },
+    {
+      title: '关联账号',
+      dataIndex: 'account_count',
+      width: 100,
+      render: (_, record) => record.account_count ?? 0,
+    },
+    {
+      title: '创建时间',
+      dataIndex: 'created_at',
+      width: 180,
+      render: (_, record) =>
+        record.created_at ? new Date(record.created_at).toLocaleString('zh-CN') : '-',
+    },
+    {
+      title: '操作',
+      width: 160,
+      render: (_, record) => (
+        <Space>
+          <Button size="small" onClick={() => openEdit(record)}>
+            编辑
+          </Button>
+          <Popconfirm
+            title="确定删除此角色?"
+            description="删除后关联的账号将失去此角色权限"
+            onConfirm={() => deleteMutation.mutate(record.id)}
+          >
+            <Button size="small" danger>
+              删除
+            </Button>
+          </Popconfirm>
+        </Space>
+      ),
+    },
+  ]
+
+  return (
+    <div>
+      <ProTable<Role>
+        columns={columns}
+        dataSource={data ?? []}
+        loading={isLoading}
+        rowKey="id"
+        search={false}
+        toolBarRender={() => [
+          <Button key="add" type="primary" icon={<PlusOutlined />} onClick={openCreate}>
+            新建角色
+          </Button>,
+        ]}
+        pagination={{ showSizeChanger: false }}
+      />
+
+      <Modal
+        title={editingId ? '编辑角色' : '新建角色'}
+        open={modalOpen}
+        onOk={handleSave}
+        onCancel={closeModal}
+        confirmLoading={createMutation.isPending || updateMutation.isPending}
+        width={560}
+      >
+        <Form form={form} layout="vertical" className="mt-4">
+          <Form.Item
+            name="name"
+            label="角色名称"
+            rules={[{ required: true, message: '请输入角色名称' }]}
+          >
+            <Input placeholder="如 editor, viewer" />
+          </Form.Item>
+          <Form.Item name="description" label="描述">
+            <Input.TextArea rows={2} placeholder="角色用途说明" />
+          </Form.Item>
+          <Form.Item name="permissions" label="权限">
+            <Select
+              mode="multiple"
+              placeholder="选择权限"
+              options={permissionOptions}
+              maxTagCount={5}
+              allowClear
+              filterOption={(input, option) =>
+                (option?.label as string)?.toLowerCase().includes(input.toLowerCase())
+              }
+            />
+          </Form.Item>
+        </Form>
+      </Modal>
+    </div>
+  )
+}
+
+// ============================================================
+// Permission Templates Tab
+// ============================================================
+function TemplatesTab() {
+  const queryClient = useQueryClient()
+  const [form] = Form.useForm()
+  const [modalOpen, setModalOpen] = useState(false)
+  const [applyOpen, setApplyOpen] = useState(false)
+  const [applyForm] = Form.useForm()
+  const [selectedTemplate, setSelectedTemplate] = useState<PermissionTemplate | null>(null)
+
+  const { data, isLoading } = useQuery({
+    queryKey: ['permission-templates'],
+    queryFn: ({ signal }) => roleService.listTemplates(signal),
+  })
+
+  const createMutation = useMutation({
+    mutationFn: (data: CreateTemplateRequest) => roleService.createTemplate(data),
+    onSuccess: () => {
+      message.success('模板已创建')
+      queryClient.invalidateQueries({ queryKey: ['permission-templates'] })
+      setModalOpen(false)
+      form.resetFields()
+    },
+    onError: (err: Error) => message.error(err.message || '创建失败'),
+  })
+
+  const deleteMutation = useMutation({
+    mutationFn: (id: string) => roleService.deleteTemplate(id),
+    onSuccess: () => {
+      message.success('模板已删除')
+      queryClient.invalidateQueries({ queryKey: ['permission-templates'] })
+    },
+    onError: (err: Error) => message.error(err.message || '删除失败'),
+  })
+
+  const applyMutation = useMutation({
+    mutationFn: ({ templateId, accountIds }: { templateId: string; accountIds: string[] }) =>
+      roleService.applyTemplate(templateId, accountIds),
+    onSuccess: () => {
+      message.success('模板已应用到所选账号')
+      queryClient.invalidateQueries({ queryKey: ['permission-templates'] })
+      setApplyOpen(false)
+      applyForm.resetFields()
+      setSelectedTemplate(null)
+    },
+    onError: (err: Error) => message.error(err.message || '应用失败'),
+  })
+
+  const openApply = (record: PermissionTemplate) => {
+    setSelectedTemplate(record)
+    applyForm.resetFields()
+    setApplyOpen(true)
+  }
+
+  const handleApply = async () => {
+    const values = await applyForm.validateFields()
+    if (!selectedTemplate) return
+    const accountIds = values.account_ids
+      ?.split(',')
+      .map((s: string) => s.trim())
+      .filter(Boolean)
+    if (!accountIds?.length) {
+      message.warning('请输入至少一个账号 ID')
+      return
+    }
+    applyMutation.mutate({ templateId: selectedTemplate.id, accountIds })
+  }
+
+  const columns: ProColumns<PermissionTemplate>[] = [
+    {
+      title: '模板名称',
+      dataIndex: 'name',
+      width: 180,
+      render: (_, record) => (
+        <span className="font-medium text-neutral-900 dark:text-neutral-100">
+          {record.name}
+        </span>
+      ),
+    },
+    {
+      title: '描述',
+      dataIndex: 'description',
+      width: 240,
+      ellipsis: true,
+      render: (_, record) => record.description || '-',
+    },
+    {
+      title: '权限数',
+      dataIndex: 'permissions',
+      width: 100,
+      render: (_, record) => (
+        <Tooltip title={record.permissions?.join(', ') || '无权限'}>
+          <Tag>{record.permissions?.length ?? 0} 项</Tag>
+        </Tooltip>
+      ),
+    },
+    {
+      title: '创建时间',
+      dataIndex: 'created_at',
+      width: 180,
+      render: (_, record) =>
+        record.created_at ? new Date(record.created_at).toLocaleString('zh-CN') : '-',
+    },
+    {
+      title: '操作',
+      width: 180,
+      render: (_, record) => (
+        <Space>
+          <Button
+            size="small"
+            icon={<CheckCircleOutlined />}
+            onClick={() => openApply(record)}
+          >
+            应用
+          </Button>
+          <Popconfirm
+            title="确定删除此模板?"
+            description="删除后已应用的账号不受影响"
+            onConfirm={() => deleteMutation.mutate(record.id)}
+          >
+            <Button size="small" danger>
+              删除
+            </Button>
+          </Popconfirm>
+        </Space>
+      ),
+    },
+  ]
+
+  return (
+    <div>
+      <ProTable<PermissionTemplate>
+        columns={columns}
+        dataSource={data ?? []}
+        loading={isLoading}
+        rowKey="id"
+        search={false}
+        toolBarRender={() => [
+          <Button
+            key="add"
+            type="primary"
+            icon={<PlusOutlined />}
+            onClick={() => {
+              form.resetFields()
+              setModalOpen(true)
+            }}
+          >
+            新建模板
+          </Button>,
+        ]}
+        pagination={{ showSizeChanger: false }}
+      />
+
+      {/* Create Template Modal */}
+      <Modal
+        title="新建权限模板"
+        open={modalOpen}
+        onOk={async () => {
+          const values = await form.validateFields()
+          createMutation.mutate(values)
+        }}
+        onCancel={() => {
+          setModalOpen(false)
+          form.resetFields()
+        }}
+        confirmLoading={createMutation.isPending}
+        width={560}
+      >
+        <Form form={form} layout="vertical" className="mt-4">
+          <Form.Item
+            name="name"
+            label="模板名称"
+            rules={[{ required: true, message: '请输入模板名称' }]}
+          >
+            <Input placeholder="如 basic-user, power-user" />
+          </Form.Item>
+          <Form.Item name="description" label="描述">
+            <Input.TextArea rows={2} placeholder="模板用途说明" />
+          </Form.Item>
+          <Form.Item name="permissions" label="权限">
+            <Select
+              mode="multiple"
+              placeholder="选择权限"
+              options={permissionOptions}
+              maxTagCount={5}
+              allowClear
+              filterOption={(input, option) =>
+                (option?.label as string)?.toLowerCase().includes(input.toLowerCase())
+              }
+            />
+          </Form.Item>
+        </Form>
+      </Modal>
+
+      {/* Apply Template Modal */}
+      <Modal
+        title={`应用模板: ${selectedTemplate?.name ?? ''}`}
+        open={applyOpen}
+        onOk={handleApply}
+        onCancel={() => {
+          setApplyOpen(false)
+          setSelectedTemplate(null)
+          applyForm.resetFields()
+        }}
+        confirmLoading={applyMutation.isPending}
+        width={480}
+      >
+        <Form form={applyForm} layout="vertical" className="mt-4">
+          <div className="mb-4 text-sm text-neutral-500 dark:text-neutral-400">
+            将模板的 {selectedTemplate?.permissions?.length ?? 0} 项权限应用到指定账号。
+            请输入账号 ID，多个 ID 用逗号分隔。
+          </div>
+          <Form.Item
+            name="account_ids"
+            label="账号 ID"
+            rules={[{ required: true, message: '请输入账号 ID' }]}
+          >
+            <Input.TextArea
+              rows={3}
+              placeholder="如: acc_abc123, acc_def456"
+            />
+          </Form.Item>
+        </Form>
+      </Modal>
+    </div>
+  )
+}
+
+// ============================================================
+// Main Page: Roles & Permissions
+// ============================================================
+export default function Roles() {
+  return (
+    <div>
+      <PageHeader
+        title="角色与权限"
+        description="管理角色、权限模板，并将权限批量应用到账号"
+      />
+
+      <Tabs
+        defaultActiveKey="roles"
+        items={[
+          {
+            key: 'roles',
+            label: (
+              <span className="flex items-center gap-1.5">
+                <SafetyOutlined />
+                角色
+              </span>
+            ),
+            children: <RolesTab />,
+          },
+          {
+            key: 'templates',
+            label: (
+              <span className="flex items-center gap-1.5">
+                <CheckCircleOutlined />
+                权限模板
+              </span>
+            ),
+            children: <TemplatesTab />,
+          },
+        ]}
+      />
+    </div>
+  )
+}
--- a/admin-v2/src/router/index.tsx
+++ b/admin-v2/src/router/index.tsx
@@ -21,6 +21,7 @@ export const router = createBrowserRouter([
    children: [
      { index: true, lazy: () => import('@/pages/Dashboard').then((m) => ({ Component: m.default })) },
      { path: 'accounts', lazy: () => import('@/pages/Accounts').then((m) => ({ Component: m.default })) },
+      { path: 'roles', lazy: () => import('@/pages/Roles').then((m) => ({ Component: m.default })) },
      { path: 'model-services', lazy: () => import('@/pages/ModelServices').then((m) => ({ Component: m.default })) },
      { path: 'providers', lazy: () => import('@/pages/ModelServices').then((m) => ({ Component: m.default })) },
      { path: 'models', lazy: () => import('@/pages/ModelServices').then((m) => ({ Component: m.default })) },
--- a/admin-v2/src/services/roles.ts
+++ b/admin-v2/src/services/roles.ts
@@ -0,0 +1,50 @@
+// ============================================================
+// 角色与权限模板 服务层
+// ============================================================
+
+import request, { withSignal } from './request'
+import type {
+  Role,
+  PermissionTemplate,
+  CreateRoleRequest,
+  UpdateRoleRequest,
+  CreateTemplateRequest,
+} from '@/types'
+
+export const roleService = {
+  // ── Roles ─────────────────────────────────────────────────
+  list: (signal?: AbortSignal) =>
+    request.get<Role[]>('/roles', withSignal({}, signal)).then((r) => r.data),
+
+  get: (id: string, signal?: AbortSignal) =>
+    request.get<Role>(`/roles/${id}`, withSignal({}, signal)).then((r) => r.data),
+
+  create: (data: CreateRoleRequest, signal?: AbortSignal) =>
+    request.post<Role>('/roles', data, withSignal({}, signal)).then((r) => r.data),
+
+  update: (id: string, data: UpdateRoleRequest, signal?: AbortSignal) =>
+    request.put<Role>(`/roles/${id}`, data, withSignal({}, signal)).then((r) => r.data),
+
+  delete: (id: string, signal?: AbortSignal) =>
+    request.delete(`/roles/${id}`, withSignal({}, signal)).then((r) => r.data),
+
+  // ── Role Permissions ──────────────────────────────────────
+  getPermissions: (roleId: string, signal?: AbortSignal) =>
+    request.get<string[]>(`/roles/${roleId}/permissions`, withSignal({}, signal)).then((r) => r.data),
+
+  // ── Permission Templates ──────────────────────────────────
+  listTemplates: (signal?: AbortSignal) =>
+    request.get<PermissionTemplate[]>('/permission-templates', withSignal({}, signal)).then((r) => r.data),
+
+  getTemplate: (id: string, signal?: AbortSignal) =>
+    request.get<PermissionTemplate>(`/permission-templates/${id}`, withSignal({}, signal)).then((r) => r.data),
+
+  createTemplate: (data: CreateTemplateRequest, signal?: AbortSignal) =>
+    request.post<PermissionTemplate>('/permission-templates', data, withSignal({}, signal)).then((r) => r.data),
+
+  deleteTemplate: (id: string, signal?: AbortSignal) =>
+    request.delete(`/permission-templates/${id}`, withSignal({}, signal)).then((r) => r.data),
+
+  applyTemplate: (templateId: string, accountIds: string[], signal?: AbortSignal) =>
+    request.post(`/permission-templates/${templateId}/apply`, { account_ids: accountIds }, withSignal({}, signal)).then((r) => r.data),
+}
--- a/admin-v2/src/types/index.ts
+++ b/admin-v2/src/types/index.ts
@@ -282,3 +282,45 @@ export interface DailyUsageStat {
  output_tokens: number
  unique_devices: number
 }
+
+/** 角色 */
+export interface Role {
+  id: string
+  name: string
+  description: string
+  permissions: string[]
+  account_count?: number
+  created_at: string
+  updated_at: string
+}
+
+/** 权限模板 */
+export interface PermissionTemplate {
+  id: string
+  name: string
+  description: string
+  permissions: string[]
+  created_at: string
+  updated_at: string
+}
+
+/** 创建角色请求 */
+export interface CreateRoleRequest {
+  name: string
+  description?: string
+  permissions?: string[]
+}
+
+/** 更新角色请求 */
+export interface UpdateRoleRequest {
+  name?: string
+  description?: string
+  permissions?: string[]
+}
+
+/** 创建权限模板请求 */
+export interface CreateTemplateRequest {
+  name: string
+  description?: string
+  permissions?: string[]
+}
--- a/admin-v2/tests/pages/Config.test.tsx
+++ b/admin-v2/tests/pages/Config.test.tsx
@@ -0,0 +1,219 @@
+// ============================================================
+// Config 页面测试
+// ============================================================
+
+import { describe, it, expect, beforeEach, afterEach } from 'vitest'
+import { render, screen, waitFor } from '@testing-library/react'
+import { http, HttpResponse } from 'msw'
+import { setupServer } from 'msw/node'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+
+import Config from '@/pages/Config'
+
+// ── Mock data ────────────────────────────────────────────────
+
+const mockConfigItems = [
+  {
+    id: 'cfg-001',
+    category: 'general',
+    key_path: 'general.app_name',
+    value_type: 'string',
+    current_value: 'ZCLAW',
+    default_value: 'ZCLAW',
+    source: 'database',
+    description: '应用程序名称',
+    requires_restart: false,
+    created_at: '2026-01-01T00:00:00Z',
+    updated_at: '2026-01-01T00:00:00Z',
+  },
+  {
+    id: 'cfg-002',
+    category: 'general',
+    key_path: 'general.debug_mode',
+    value_type: 'boolean',
+    current_value: 'false',
+    default_value: 'false',
+    source: 'default',
+    description: '调试模式开关',
+    requires_restart: true,
+    created_at: '2026-01-01T00:00:00Z',
+    updated_at: '2026-01-01T00:00:00Z',
+  },
+  {
+    id: 'cfg-003',
+    category: 'general',
+    key_path: 'general.max_connections',
+    value_type: 'integer',
+    current_value: null,
+    default_value: '100',
+    source: 'default',
+    description: '最大连接数',
+    requires_restart: false,
+    created_at: '2026-01-01T00:00:00Z',
+    updated_at: '2026-01-01T00:00:00Z',
+  },
+]
+
+const mockResponse = {
+  items: mockConfigItems,
+  total: 3,
+  page: 1,
+  page_size: 50,
+}
+
+// ── MSW server ───────────────────────────────────────────────
+
+const server = setupServer()
+
+beforeEach(() => {
+  server.listen({ onUnhandledRequest: 'bypass' })
+})
+
+afterEach(() => {
+  server.close()
+})
+
+// ── Helper: render with QueryClient ──────────────────────────
+
+function renderWithProviders(ui: React.ReactElement) {
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: { retry: false },
+    },
+  })
+  return render(
+    <QueryClientProvider client={queryClient}>
+      {ui}
+    </QueryClientProvider>,
+  )
+}
+
+// ── Tests ────────────────────────────────────────────────────
+
+describe('Config page', () => {
+  it('renders page header', async () => {
+    server.use(
+      http.get('*/api/v1/config/items', () => {
+        return HttpResponse.json(mockResponse)
+      }),
+    )
+
+    renderWithProviders(<Config />)
+
+    expect(screen.getByText('系统配置')).toBeInTheDocument()
+    expect(screen.getByText('管理系统运行参数和功能开关')).toBeInTheDocument()
+  })
+
+  it('fetches and displays config items', async () => {
+    server.use(
+      http.get('*/api/v1/config/items', () => {
+        return HttpResponse.json(mockResponse)
+      }),
+    )
+
+    renderWithProviders(<Config />)
+
+    await waitFor(() => {
+      expect(screen.getByText('general.app_name')).toBeInTheDocument()
+    })
+    expect(screen.getByText('general.debug_mode')).toBeInTheDocument()
+  })
+
+  it('shows loading spinner while fetching', async () => {
+    server.use(
+      http.get('*/api/v1/config/items', async () => {
+        await new Promise((resolve) => setTimeout(resolve, 500))
+        return HttpResponse.json(mockResponse)
+      }),
+    )
+
+    renderWithProviders(<Config />)
+
+    // Ant Design Spin component renders a .ant-spin element
+    const spinner = document.querySelector('.ant-spin')
+    expect(spinner).toBeTruthy()
+
+    // Wait for loading to complete so afterEach cleanup is clean
+    await waitFor(() => {
+      expect(screen.getByText('general.app_name')).toBeInTheDocument()
+    })
+  })
+
+  it('shows error state on API failure', async () => {
+    server.use(
+      http.get('*/api/v1/config/items', () => {
+        return HttpResponse.json(
+          { error: 'internal_error', message: '服务器内部错误' },
+          { status: 500 },
+        )
+      }),
+    )
+
+    renderWithProviders(<Config />)
+
+    // Config page does not have a dedicated ErrorState; the ProTable simply
+    // renders empty when the query fails. We verify the page header is still
+    // rendered and the table body has no data rows (shows "暂无数据").
+    await waitFor(() => {
+      const emptyElements = screen.queryAllByText('暂无数据')
+      expect(emptyElements.length).toBeGreaterThanOrEqual(1)
+    })
+    // Page header is still present even on error
+    expect(screen.getByText('系统配置')).toBeInTheDocument()
+  })
+
+  it('renders config key_path and current_value columns', async () => {
+    server.use(
+      http.get('*/api/v1/config/items', () => {
+        return HttpResponse.json(mockResponse)
+      }),
+    )
+
+    renderWithProviders(<Config />)
+
+    // key_path values are rendered in <code> elements
+    await waitFor(() => {
+      expect(screen.getByText('general.app_name')).toBeInTheDocument()
+    })
+    expect(screen.getByText('general.debug_mode')).toBeInTheDocument()
+
+    // current_value "ZCLAW" appears in both the current_value column and default_value column
+    const zclawElements = screen.getAllByText('ZCLAW')
+    expect(zclawElements.length).toBeGreaterThanOrEqual(1)
+  })
+
+  it('renders requires_restart column with tags', async () => {
+    server.use(
+      http.get('*/api/v1/config/items', () => {
+        return HttpResponse.json(mockResponse)
+      }),
+    )
+
+    renderWithProviders(<Config />)
+
+    await waitFor(() => {
+      expect(screen.getByText('general.app_name')).toBeInTheDocument()
+    })
+
+    // requires_restart=true renders "是" (orange tag)
+    expect(screen.getByText('是')).toBeInTheDocument()
+    // requires_restart=false renders "否" (may appear multiple times for two items)
+    const noTags = screen.getAllByText('否')
+    expect(noTags.length).toBeGreaterThanOrEqual(1)
+  })
+
+  it('renders category tabs', async () => {
+    server.use(
+      http.get('*/api/v1/config/items', () => {
+        return HttpResponse.json(mockResponse)
+      }),
+    )
+
+    renderWithProviders(<Config />)
+
+    expect(screen.getByText('通用')).toBeInTheDocument()
+    expect(screen.getByText('认证')).toBeInTheDocument()
+    expect(screen.getByText('中转')).toBeInTheDocument()
+    expect(screen.getByText('模型')).toBeInTheDocument()
+  })
+})
--- a/admin-v2/tests/pages/Dashboard.test.tsx
+++ b/admin-v2/tests/pages/Dashboard.test.tsx
@@ -0,0 +1,242 @@
+// ============================================================
+// Dashboard 页面测试
+// ============================================================
+
+import { describe, it, expect, beforeEach, afterEach } from 'vitest'
+import { render, screen, waitFor } from '@testing-library/react'
+import { http, HttpResponse } from 'msw'
+import { setupServer } from 'msw/node'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+
+import Dashboard from '@/pages/Dashboard'
+
+// ── Mock data ────────────────────────────────────────────────
+
+const mockStats = {
+  total_accounts: 12,
+  active_accounts: 8,
+  tasks_today: 156,
+  active_providers: 3,
+  active_models: 7,
+  tokens_today_input: 24000,
+  tokens_today_output: 8500,
+}
+
+const mockLogs = {
+  items: [
+    {
+      id: 1,
+      account_id: 'acc-001',
+      action: 'login',
+      target_type: 'account',
+      target_id: 'acc-001',
+      details: null,
+      ip_address: '192.168.1.1',
+      created_at: '2026-03-30T10:00:00Z',
+    },
+    {
+      id: 2,
+      account_id: 'acc-002',
+      action: 'create_provider',
+      target_type: 'provider',
+      target_id: 'prov-001',
+      details: { name: 'OpenAI' },
+      ip_address: '10.0.0.1',
+      created_at: '2026-03-30T09:30:00Z',
+    },
+  ],
+  total: 2,
+  page: 1,
+  page_size: 10,
+}
+
+// ── MSW server ───────────────────────────────────────────────
+
+const server = setupServer()
+
+beforeEach(() => {
+  server.listen({ onUnhandledRequest: 'bypass' })
+})
+
+afterEach(() => {
+  server.close()
+})
+
+// ── Helper: render with QueryClient ──────────────────────────
+
+function renderWithProviders(ui: React.ReactElement) {
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: { retry: false },
+    },
+  })
+  return render(
+    <QueryClientProvider client={queryClient}>
+      {ui}
+    </QueryClientProvider>,
+  )
+}
+
+// ── Tests ────────────────────────────────────────────────────
+
+describe('Dashboard page', () => {
+  it('renders page header', async () => {
+    server.use(
+      http.get('*/api/v1/stats/dashboard', () => {
+        return HttpResponse.json(mockStats)
+      }),
+      http.get('*/api/v1/logs/operations', () => {
+        return HttpResponse.json(mockLogs)
+      }),
+    )
+
+    renderWithProviders(<Dashboard />)
+
+    expect(screen.getByText('仪表盘')).toBeInTheDocument()
+    expect(screen.getByText('系统概览与最近活动')).toBeInTheDocument()
+  })
+
+  it('renders stat cards with correct values', async () => {
+    server.use(
+      http.get('*/api/v1/stats/dashboard', () => {
+        return HttpResponse.json(mockStats)
+      }),
+      http.get('*/api/v1/logs/operations', () => {
+        return HttpResponse.json(mockLogs)
+      }),
+    )
+
+    renderWithProviders(<Dashboard />)
+
+    await waitFor(() => {
+      expect(screen.getByText('12')).toBeInTheDocument()
+    })
+
+    // Stat titles
+    expect(screen.getByText('总账号')).toBeInTheDocument()
+    expect(screen.getByText('活跃服务商')).toBeInTheDocument()
+    expect(screen.getByText('活跃模型')).toBeInTheDocument()
+    expect(screen.getByText('今日请求')).toBeInTheDocument()
+    expect(screen.getByText('今日 Token')).toBeInTheDocument()
+
+    // Token total: 24000 + 8500 = 32500
+    expect(screen.getByText('32,500')).toBeInTheDocument()
+  })
+
+  it('renders recent logs table with action labels', async () => {
+    server.use(
+      http.get('*/api/v1/stats/dashboard', () => {
+        return HttpResponse.json(mockStats)
+      }),
+      http.get('*/api/v1/logs/operations', () => {
+        return HttpResponse.json(mockLogs)
+      }),
+    )
+
+    renderWithProviders(<Dashboard />)
+
+    // Wait for action labels from constants/status.ts
+    await waitFor(() => {
+      expect(screen.getByText('登录')).toBeInTheDocument()
+    })
+    expect(screen.getByText('创建服务商')).toBeInTheDocument()
+  })
+
+  it('renders target types in logs table', async () => {
+    server.use(
+      http.get('*/api/v1/stats/dashboard', () => {
+        return HttpResponse.json(mockStats)
+      }),
+      http.get('*/api/v1/logs/operations', () => {
+        return HttpResponse.json(mockLogs)
+      }),
+    )
+
+    renderWithProviders(<Dashboard />)
+
+    await waitFor(() => {
+      expect(screen.getByText('登录')).toBeInTheDocument()
+    })
+    expect(screen.getByText('account')).toBeInTheDocument()
+    expect(screen.getByText('provider')).toBeInTheDocument()
+  })
+
+  it('shows loading spinner before stats load', async () => {
+    server.use(
+      http.get('*/api/v1/stats/dashboard', async () => {
+        await new Promise((resolve) => setTimeout(resolve, 500))
+        return HttpResponse.json(mockStats)
+      }),
+      http.get('*/api/v1/logs/operations', () => {
+        return HttpResponse.json(mockLogs)
+      }),
+    )
+
+    renderWithProviders(<Dashboard />)
+
+    // Ant Design Spin component renders a .ant-spin element
+    const spinner = document.querySelector('.ant-spin')
+    expect(spinner).toBeTruthy()
+
+    // Wait for loading to complete so afterEach cleanup is clean
+    await waitFor(() => {
+      expect(screen.getByText('总账号')).toBeInTheDocument()
+    })
+  })
+
+  it('shows error state when stats request fails', async () => {
+    server.use(
+      http.get('*/api/v1/stats/dashboard', () => {
+        return HttpResponse.json(
+          { error: 'internal_error', message: '服务器内部错误' },
+          { status: 500 },
+        )
+      }),
+      http.get('*/api/v1/logs/operations', () => {
+        return HttpResponse.json(mockLogs)
+      }),
+    )
+
+    renderWithProviders(<Dashboard />)
+
+    await waitFor(() => {
+      expect(screen.getByText('服务器内部错误')).toBeInTheDocument()
+    })
+  })
+
+  it('renders stat cards with zero values when stats are null', async () => {
+    server.use(
+      http.get('*/api/v1/stats/dashboard', () => {
+        return HttpResponse.json({})
+      }),
+      http.get('*/api/v1/logs/operations', () => {
+        return HttpResponse.json({ items: [], total: 0, page: 1, page_size: 10 })
+      }),
+    )
+
+    renderWithProviders(<Dashboard />)
+
+    // All stats should fallback to 0
+    await waitFor(() => {
+      const zeros = screen.getAllByText('0')
+      expect(zeros.length).toBeGreaterThanOrEqual(2)
+    })
+  })
+
+  it('renders recent logs section header', async () => {
+    server.use(
+      http.get('*/api/v1/stats/dashboard', () => {
+        return HttpResponse.json(mockStats)
+      }),
+      http.get('*/api/v1/logs/operations', () => {
+        return HttpResponse.json(mockLogs)
+      }),
+    )
+
+    renderWithProviders(<Dashboard />)
+
+    await waitFor(() => {
+      expect(screen.getByText('最近操作日志')).toBeInTheDocument()
+    })
+  })
+})
--- a/admin-v2/tests/pages/Login.test.tsx
+++ b/admin-v2/tests/pages/Login.test.tsx
@@ -0,0 +1,219 @@
+// ============================================================
+// Login 页面测试
+// ============================================================
+
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
+import { render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { MemoryRouter } from 'react-router-dom'
+
+import Login from '@/pages/Login'
+
+// ── Mock data ────────────────────────────────────────────────
+
+const mockLoginResponse = {
+  token: 'jwt-token-123',
+  refresh_token: 'refresh-token-456',
+  account: {
+    id: 'acc-001',
+    username: 'testadmin',
+    email: 'admin@zclaw.ai',
+    display_name: 'Admin',
+    role: 'super_admin',
+    status: 'active',
+    totp_enabled: false,
+    last_login_at: null,
+    created_at: '2026-01-01T00:00:00Z',
+    llm_routing: 'relay',
+  },
+}
+
+const mockAccount = {
+  id: 'acc-001',
+  username: 'testadmin',
+  email: 'admin@zclaw.ai',
+  display_name: 'Admin',
+  role: 'super_admin',
+  status: 'active',
+  totp_enabled: false,
+  last_login_at: null,
+  created_at: '2026-01-01T00:00:00Z',
+  llm_routing: 'relay',
+}
+
+// ── Hoisted mocks ────────────────────────────────────────────
+
+const { mockLogin, mockNavigate, mockAuthServiceLogin } = vi.hoisted(() => ({
+  mockLogin: vi.fn(),
+  mockNavigate: vi.fn(),
+  mockAuthServiceLogin: vi.fn(),
+}))
+
+vi.mock('@/stores/authStore', () => ({
+  useAuthStore: Object.assign(
+    vi.fn((selector: (s: Record<string, unknown>) => unknown) =>
+      selector({ login: mockLogin }),
+    ),
+    { getState: () => ({ token: null, refreshToken: null, logout: vi.fn() }) },
+  ),
+}))
+
+vi.mock('@/services/auth', () => ({
+  authService: {
+    login: mockAuthServiceLogin,
+  },
+}))
+
+vi.mock('react-router-dom', async () => {
+  const actual = await vi.importActual<typeof import('react-router-dom')>('react-router-dom')
+  return {
+    ...actual,
+    useNavigate: () => mockNavigate,
+  }
+})
+
+beforeEach(() => {
+  mockLogin.mockClear()
+  mockNavigate.mockClear()
+  mockAuthServiceLogin.mockClear()
+})
+
+// ── Helper: render with providers ────────────────────────────
+
+function renderLogin(initialEntries = ['/login']) {
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: { retry: false },
+    },
+  })
+  return render(
+    <QueryClientProvider client={queryClient}>
+      <MemoryRouter initialEntries={initialEntries}>
+        <Login />
+      </MemoryRouter>
+    </QueryClientProvider>,
+  )
+}
+
+/** Click the LoginForm submit button (Ant Design renders "登 录" with a space) */
+function getSubmitButton(): HTMLElement {
+  const btn = document.querySelector<HTMLButtonElement>(
+    'button.ant-btn-primary[type="button"]',
+  )
+  if (!btn) throw new Error('Submit button not found')
+  return btn
+}
+
+// ── Tests ────────────────────────────────────────────────────
+
+describe('Login page', () => {
+  it('renders the login form with username and password fields', () => {
+    renderLogin()
+
+    expect(screen.getByText('登录到 ZCLAW')).toBeInTheDocument()
+    expect(screen.getByPlaceholderText('请输入用户名')).toBeInTheDocument()
+    expect(screen.getByPlaceholderText('请输入密码')).toBeInTheDocument()
+    const submitButton = getSubmitButton()
+    expect(submitButton).toBeTruthy()
+  })
+
+  it('shows the ZCLAW brand logo', () => {
+    renderLogin()
+
+    expect(screen.getByText('Z')).toBeInTheDocument()
+    expect(screen.getByText(/ZCLAW Admin/)).toBeInTheDocument()
+  })
+
+  it('successful login calls authStore.login and navigates to /', async () => {
+    const user = userEvent.setup()
+    mockAuthServiceLogin.mockResolvedValue(mockLoginResponse)
+
+    renderLogin()
+
+    await user.type(screen.getByPlaceholderText('请输入用户名'), 'testadmin')
+    await user.type(screen.getByPlaceholderText('请输入密码'), 'password123')
+    await user.click(getSubmitButton())
+
+    await waitFor(() => {
+      expect(mockLogin).toHaveBeenCalledWith(
+        'jwt-token-123',
+        'refresh-token-456',
+        mockAccount,
+      )
+    })
+
+    expect(mockNavigate).toHaveBeenCalledWith('/', { replace: true })
+  })
+
+  it('navigates to redirect path after login', async () => {
+    const user = userEvent.setup()
+    mockAuthServiceLogin.mockResolvedValue(mockLoginResponse)
+
+    renderLogin(['/login?from=/settings'])
+
+    await user.type(screen.getByPlaceholderText('请输入用户名'), 'testadmin')
+    await user.type(screen.getByPlaceholderText('请输入密码'), 'password123')
+    await user.click(getSubmitButton())
+
+    await waitFor(() => {
+      expect(mockNavigate).toHaveBeenCalledWith('/settings', { replace: true })
+    })
+  })
+
+  it('shows TOTP field when server returns TOTP-related error', async () => {
+    const user = userEvent.setup()
+    const error = new Error('请输入两步验证码 (TOTP)')
+    Object.assign(error, { status: 403 })
+    mockAuthServiceLogin.mockRejectedValue(error)
+
+    renderLogin()
+
+    // Initially no TOTP field
+    expect(screen.queryByPlaceholderText('请输入 6 位验证码')).not.toBeInTheDocument()
+
+    await user.type(screen.getByPlaceholderText('请输入用户名'), 'testadmin')
+    await user.type(screen.getByPlaceholderText('请输入密码'), 'password123')
+    await user.click(getSubmitButton())
+
+    // After TOTP error, TOTP field appears
+    await waitFor(() => {
+      expect(screen.getByPlaceholderText('请输入 6 位验证码')).toBeInTheDocument()
+    })
+  })
+
+  it('shows error message on invalid credentials', async () => {
+    const user = userEvent.setup()
+    const error = new Error('用户名或密码错误')
+    mockAuthServiceLogin.mockRejectedValue(error)
+
+    renderLogin()
+
+    await user.type(screen.getByPlaceholderText('请输入用户名'), 'wrong')
+    await user.type(screen.getByPlaceholderText('请输入密码'), 'wrong')
+    await user.click(getSubmitButton())
+
+    await waitFor(() => {
+      expect(screen.getByText('用户名或密码错误')).toBeInTheDocument()
+    })
+  })
+
+  it('does not call authStore.login on failed login', async () => {
+    const user = userEvent.setup()
+    const error = new Error('用户名或密码错误')
+    mockAuthServiceLogin.mockRejectedValue(error)
+
+    renderLogin()
+
+    await user.type(screen.getByPlaceholderText('请输入用户名'), 'wrong')
+    await user.type(screen.getByPlaceholderText('请输入密码'), 'wrong')
+    await user.click(getSubmitButton())
+
+    await waitFor(() => {
+      expect(screen.getByText('用户名或密码错误')).toBeInTheDocument()
+    })
+
+    expect(mockLogin).not.toHaveBeenCalled()
+    expect(mockNavigate).not.toHaveBeenCalled()
+  })
+})
--- a/admin-v2/tests/pages/Logs.test.tsx
+++ b/admin-v2/tests/pages/Logs.test.tsx
@@ -0,0 +1,210 @@
+// ============================================================
+// Logs 页面测试
+// ============================================================
+
+import { describe, it, expect, beforeEach, afterEach } from 'vitest'
+import { render, screen, waitFor } from '@testing-library/react'
+import { http, HttpResponse } from 'msw'
+import { setupServer } from 'msw/node'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+
+import Logs from '@/pages/Logs'
+
+// ── Mock data ────────────────────────────────────────────────
+
+const mockLogs = {
+  items: [
+    {
+      id: 1,
+      account_id: 'acc-001',
+      action: 'login',
+      target_type: 'account',
+      target_id: 'acc-001',
+      details: null,
+      ip_address: '192.168.1.1',
+      created_at: '2026-03-30T10:00:00Z',
+    },
+    {
+      id: 2,
+      account_id: 'acc-002',
+      action: 'create_provider',
+      target_type: 'provider',
+      target_id: 'prov-001',
+      details: { name: 'OpenAI' },
+      ip_address: '10.0.0.1',
+      created_at: '2026-03-30T09:30:00Z',
+    },
+    {
+      id: 3,
+      account_id: 'acc-001',
+      action: 'delete_model',
+      target_type: 'model',
+      target_id: 'mdl-001',
+      details: null,
+      ip_address: '192.168.1.1',
+      created_at: '2026-03-29T14:00:00Z',
+    },
+  ],
+  total: 3,
+  page: 1,
+  page_size: 20,
+}
+
+// ── MSW server ───────────────────────────────────────────────
+
+const server = setupServer()
+
+beforeEach(() => {
+  server.listen({ onUnhandledRequest: 'bypass' })
+})
+
+afterEach(() => {
+  server.close()
+})
+
+// ── Helper: render with QueryClient ──────────────────────────
+
+function renderWithProviders(ui: React.ReactElement) {
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: { retry: false },
+    },
+  })
+  return render(
+    <QueryClientProvider client={queryClient}>
+      {ui}
+    </QueryClientProvider>,
+  )
+}
+
+// ── Tests ────────────────────────────────────────────────────
+
+describe('Logs page', () => {
+  it('renders page header', async () => {
+    server.use(
+      http.get('*/api/v1/logs/operations', () => {
+        return HttpResponse.json(mockLogs)
+      }),
+    )
+
+    renderWithProviders(<Logs />)
+
+    expect(screen.getByText('操作日志')).toBeInTheDocument()
+    expect(screen.getByText('系统审计与操作记录')).toBeInTheDocument()
+  })
+
+  it('fetches and displays log entries', async () => {
+    server.use(
+      http.get('*/api/v1/logs/operations', () => {
+        return HttpResponse.json(mockLogs)
+      }),
+    )
+
+    renderWithProviders(<Logs />)
+
+    // Wait for action labels rendered from constants/status.ts
+    await waitFor(() => {
+      expect(screen.getByText('登录')).toBeInTheDocument()
+    })
+    expect(screen.getByText('创建服务商')).toBeInTheDocument()
+    expect(screen.getByText('删除模型')).toBeInTheDocument()
+  })
+
+  it('shows loading spinner while fetching', async () => {
+    server.use(
+      http.get('*/api/v1/logs/operations', async () => {
+        await new Promise((resolve) => setTimeout(resolve, 500))
+        return HttpResponse.json(mockLogs)
+      }),
+    )
+
+    renderWithProviders(<Logs />)
+
+    // Ant Design Spin component renders a .ant-spin element
+    const spinner = document.querySelector('.ant-spin')
+    expect(spinner).toBeTruthy()
+
+    // Wait for loading to complete so afterEach cleanup is clean
+    await waitFor(() => {
+      expect(screen.getByText('登录')).toBeInTheDocument()
+    })
+  })
+
+  it('shows ErrorState on API failure with retry button', async () => {
+    server.use(
+      http.get('*/api/v1/logs/operations', () => {
+        return HttpResponse.json(
+          { error: 'internal_error', message: '服务器内部错误' },
+          { status: 500 },
+        )
+      }),
+    )
+
+    renderWithProviders(<Logs />)
+
+    // ErrorState renders the error message
+    await waitFor(() => {
+      expect(screen.getByText('服务器内部错误')).toBeInTheDocument()
+    })
+    // Ant Design Button splits two-character text with a space: "重 试"
+    const retryButton = screen.getByRole('button', { name: /重.?试/ })
+    expect(retryButton).toBeInTheDocument()
+  })
+
+  it('renders action as a colored tag', async () => {
+    server.use(
+      http.get('*/api/v1/logs/operations', () => {
+        return HttpResponse.json(mockLogs)
+      }),
+    )
+
+    renderWithProviders(<Logs />)
+
+    await waitFor(() => {
+      expect(screen.getByText('登录')).toBeInTheDocument()
+    })
+
+    // Verify the action tags have the correct Ant Design color classes
+    const loginTag = screen.getByText('登录').closest('.ant-tag')
+    expect(loginTag).toBeTruthy()
+    // actionColors.login = 'green' → Ant Design renders ant-tag-green or ant-tag-color-green
+    expect(loginTag?.className).toMatch(/green/)
+  })
+
+  it('renders IP address column', async () => {
+    server.use(
+      http.get('*/api/v1/logs/operations', () => {
+        return HttpResponse.json(mockLogs)
+      }),
+    )
+
+    renderWithProviders(<Logs />)
+
+    await waitFor(() => {
+      expect(screen.getByText('登录')).toBeInTheDocument()
+    })
+
+    // 192.168.1.1 appears twice (two log entries from the same IP)
+    const ip1Elements = screen.getAllByText('192.168.1.1')
+    expect(ip1Elements.length).toBeGreaterThanOrEqual(1)
+    expect(screen.getByText('10.0.0.1')).toBeInTheDocument()
+  })
+
+  it('renders target_type column', async () => {
+    server.use(
+      http.get('*/api/v1/logs/operations', () => {
+        return HttpResponse.json(mockLogs)
+      }),
+    )
+
+    renderWithProviders(<Logs />)
+
+    await waitFor(() => {
+      expect(screen.getByText('登录')).toBeInTheDocument()
+    })
+
+    expect(screen.getByText('account')).toBeInTheDocument()
+    expect(screen.getByText('provider')).toBeInTheDocument()
+    expect(screen.getByText('model')).toBeInTheDocument()
+  })
+})
--- a/admin-v2/tests/pages/ModelServices.test.tsx
+++ b/admin-v2/tests/pages/ModelServices.test.tsx
@@ -0,0 +1,184 @@
+// ============================================================
+// ModelServices 页面测试
+// ============================================================
+
+import { describe, it, expect, beforeEach, afterEach } from 'vitest'
+import { render, screen, waitFor } from '@testing-library/react'
+import { http, HttpResponse } from 'msw'
+import { setupServer } from 'msw/node'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+
+import ModelServices from '@/pages/ModelServices'
+
+// ── Mock data ────────────────────────────────────────────────
+
+const mockProviders = {
+  items: [
+    {
+      id: 'prov-001',
+      name: 'openai',
+      display_name: 'OpenAI',
+      base_url: 'https://api.openai.com/v1',
+      api_protocol: 'openai',
+      enabled: true,
+      rate_limit_rpm: 500,
+      rate_limit_tpm: null,
+      created_at: '2026-01-01T00:00:00Z',
+      updated_at: '2026-03-15T10:00:00Z',
+    },
+    {
+      id: 'prov-002',
+      name: 'anthropic',
+      display_name: 'Anthropic',
+      base_url: 'https://api.anthropic.com',
+      api_protocol: 'anthropic',
+      enabled: false,
+      rate_limit_rpm: 200,
+      rate_limit_tpm: null,
+      created_at: '2026-02-01T00:00:00Z',
+      updated_at: '2026-03-01T00:00:00Z',
+    },
+    {
+      id: 'prov-003',
+      name: 'deepseek',
+      display_name: 'DeepSeek',
+      base_url: 'https://api.deepseek.com/v1',
+      api_protocol: 'openai',
+      enabled: true,
+      rate_limit_rpm: null,
+      rate_limit_tpm: null,
+      created_at: '2026-03-01T00:00:00Z',
+      updated_at: '2026-03-01T00:00:00Z',
+    },
+  ],
+  total: 3,
+  page: 1,
+  page_size: 20,
+}
+
+// ── MSW server ───────────────────────────────────────────────
+
+const server = setupServer()
+
+beforeEach(() => {
+  server.listen({ onUnhandledRequest: 'bypass' })
+})
+
+afterEach(() => {
+  server.close()
+})
+
+// ── Helper: render with QueryClient ──────────────────────────
+
+function renderWithProviders(ui: React.ReactElement) {
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: { retry: false },
+    },
+  })
+  return render(
+    <QueryClientProvider client={queryClient}>
+      {ui}
+    </QueryClientProvider>,
+  )
+}
+
+// ── Tests ────────────────────────────────────────────────────
+
+describe('ModelServices page', () => {
+  it('renders page header', async () => {
+    server.use(
+      http.get('*/api/v1/providers', () => {
+        return HttpResponse.json(mockProviders)
+      }),
+    )
+
+    renderWithProviders(<ModelServices />)
+
+    expect(screen.getByText('模型服务')).toBeInTheDocument()
+    expect(screen.getByText('管理 AI 服务商、模型配置和 Key 池')).toBeInTheDocument()
+  })
+
+  it('fetches and displays providers', async () => {
+    server.use(
+      http.get('*/api/v1/providers', () => {
+        return HttpResponse.json(mockProviders)
+      }),
+    )
+
+    renderWithProviders(<ModelServices />)
+
+    await waitFor(() => {
+      expect(screen.getByText('OpenAI')).toBeInTheDocument()
+    })
+
+    expect(screen.getByText('Anthropic')).toBeInTheDocument()
+    expect(screen.getByText('DeepSeek')).toBeInTheDocument()
+
+    // Provider identifiers rendered as code
+    // openai also appears in base_url, so use getAllByText
+    expect(screen.getAllByText('openai').length).toBeGreaterThanOrEqual(1)
+    expect(screen.getAllByText('anthropic').length).toBeGreaterThanOrEqual(1)
+    expect(screen.getAllByText('deepseek').length).toBeGreaterThanOrEqual(1)
+  })
+
+  it('shows loading spinner before data arrives', async () => {
+    server.use(
+      http.get('*/api/v1/providers', async () => {
+        await new Promise((resolve) => setTimeout(resolve, 500))
+        return HttpResponse.json(mockProviders)
+      }),
+    )
+
+    renderWithProviders(<ModelServices />)
+
+    const spinner = document.querySelector('.ant-spin')
+    expect(spinner).toBeTruthy()
+
+    // Wait for loading to complete so afterEach cleanup is clean
+    await waitFor(() => {
+      expect(screen.getByText('OpenAI')).toBeInTheDocument()
+    })
+  })
+
+  it('renders provider status as tag', async () => {
+    server.use(
+      http.get('*/api/v1/providers', () => {
+        return HttpResponse.json(mockProviders)
+      }),
+    )
+
+    renderWithProviders(<ModelServices />)
+
+    await waitFor(() => {
+      expect(screen.getByText('OpenAI')).toBeInTheDocument()
+    })
+
+    // enabled: true -> "启用" tag, enabled: false -> "禁用" tag
+    const enabledTags = screen.getAllByText('启用')
+    expect(enabledTags.length).toBe(2) // openai + deepseek
+
+    expect(screen.getByText('禁用')).toBeInTheDocument() // anthropic
+  })
+
+  it('shows empty table on API failure', async () => {
+    server.use(
+      http.get('*/api/v1/providers', () => {
+        return HttpResponse.json(
+          { error: 'internal_error', message: '获取服务商列表失败' },
+          { status: 500 },
+        )
+      }),
+    )
+
+    renderWithProviders(<ModelServices />)
+
+    // Page header should still render
+    expect(screen.getByText('模型服务')).toBeInTheDocument()
+
+    // Provider names should NOT be rendered
+    await waitFor(() => {
+      expect(screen.queryByText('OpenAI')).not.toBeInTheDocument()
+    })
+  })
+})
--- a/admin-v2/tests/pages/Prompts.test.tsx
+++ b/admin-v2/tests/pages/Prompts.test.tsx
@@ -0,0 +1,178 @@
+// ============================================================
+// Prompts 页面测试
+// ============================================================
+
+import { describe, it, expect, beforeEach, afterEach } from 'vitest'
+import { render, screen, waitFor } from '@testing-library/react'
+import { http, HttpResponse } from 'msw'
+import { setupServer } from 'msw/node'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+
+import Prompts from '@/pages/Prompts'
+
+// ── Mock data ────────────────────────────────────────────────
+
+const mockPrompts = {
+  items: [
+    {
+      id: 'pt-001',
+      name: 'system-default',
+      category: 'system',
+      description: 'Default system prompt for all agents',
+      source: 'builtin' as const,
+      current_version: 3,
+      status: 'active' as const,
+      created_at: '2026-01-15T08:00:00Z',
+      updated_at: '2026-03-20T12:00:00Z',
+    },
+    {
+      id: 'pt-002',
+      name: 'custom-research',
+      category: 'tool',
+      description: 'Custom research prompt template',
+      source: 'custom' as const,
+      current_version: 1,
+      status: 'active' as const,
+      created_at: '2026-03-01T10:00:00Z',
+      updated_at: '2026-03-01T10:00:00Z',
+    },
+    {
+      id: 'pt-003',
+      name: 'legacy-summary',
+      category: 'system',
+      description: 'Legacy summary prompt',
+      source: 'builtin' as const,
+      current_version: 5,
+      status: 'archived' as const,
+      created_at: '2025-06-01T00:00:00Z',
+      updated_at: '2026-02-28T00:00:00Z',
+    },
+  ],
+  total: 3,
+  page: 1,
+  page_size: 20,
+}
+
+// ── MSW server ───────────────────────────────────────────────
+
+const server = setupServer()
+
+beforeEach(() => {
+  server.listen({ onUnhandledRequest: 'bypass' })
+})
+
+afterEach(() => {
+  server.close()
+})
+
+// ── Helper: render with QueryClient ──────────────────────────
+
+function renderWithProviders(ui: React.ReactElement) {
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: { retry: false },
+    },
+  })
+  return render(
+    <QueryClientProvider client={queryClient}>
+      {ui}
+    </QueryClientProvider>,
+  )
+}
+
+// ── Tests ────────────────────────────────────────────────────
+
+describe('Prompts page', () => {
+  it('renders page title and create button', async () => {
+    server.use(
+      http.get('*/api/v1/prompts', () => {
+        return HttpResponse.json(mockPrompts)
+      }),
+    )
+
+    renderWithProviders(<Prompts />)
+
+    expect(screen.getByText('提示词管理')).toBeInTheDocument()
+    expect(screen.getByText('管理系统提示词模板和版本历史')).toBeInTheDocument()
+    expect(screen.getByText('新建提示词')).toBeInTheDocument()
+  })
+
+  it('fetches and displays prompt templates', async () => {
+    server.use(
+      http.get('*/api/v1/prompts', () => {
+        return HttpResponse.json(mockPrompts)
+      }),
+    )
+
+    renderWithProviders(<Prompts />)
+
+    await waitFor(() => {
+      expect(screen.getByText('system-default')).toBeInTheDocument()
+    })
+
+    expect(screen.getByText('custom-research')).toBeInTheDocument()
+    expect(screen.getByText('legacy-summary')).toBeInTheDocument()
+
+    // Category "tool" appears once in data
+    expect(screen.getByText('tool')).toBeInTheDocument()
+  })
+
+  it('shows loading spinner before data arrives', async () => {
+    server.use(
+      http.get('*/api/v1/prompts', async () => {
+        await new Promise((resolve) => setTimeout(resolve, 500))
+        return HttpResponse.json(mockPrompts)
+      }),
+    )
+
+    renderWithProviders(<Prompts />)
+
+    const spinner = document.querySelector('.ant-spin')
+    expect(spinner).toBeTruthy()
+
+    // Wait for loading to complete so afterEach cleanup is clean
+    await waitFor(() => {
+      expect(screen.getByText('system-default')).toBeInTheDocument()
+    })
+  })
+
+  it('renders source as tag with correct labels', async () => {
+    server.use(
+      http.get('*/api/v1/prompts', () => {
+        return HttpResponse.json(mockPrompts)
+      }),
+    )
+
+    renderWithProviders(<Prompts />)
+
+    await waitFor(() => {
+      expect(screen.getByText('system-default')).toBeInTheDocument()
+    })
+
+    // sourceLabels: { builtin: '内置', custom: '自定义' }
+    // '内置' appears twice (2 builtin items), '自定义' appears once
+    const builtinTags = screen.getAllByText('内置')
+    expect(builtinTags.length).toBe(2)
+    expect(screen.getByText('自定义')).toBeInTheDocument()
+  })
+
+  it('shows error state on API failure', async () => {
+    server.use(
+      http.get('*/api/v1/prompts', () => {
+        return HttpResponse.json(
+          { error: 'internal_error', message: '获取提示词列表失败' },
+          { status: 500 },
+        )
+      }),
+    )
+
+    renderWithProviders(<Prompts />)
+
+    // React Query error propagation: ProTable receives empty data
+    // but the query error should be visible via the table state
+    // Check that no prompt names are rendered
+    await waitFor(() => {
+      expect(screen.queryByText('system-default')).not.toBeInTheDocument()
+    })
+  })
+})
--- a/admin-v2/tests/pages/Relay.test.tsx
+++ b/admin-v2/tests/pages/Relay.test.tsx
@@ -0,0 +1,234 @@
+// ============================================================
+// Relay 页面测试
+// ============================================================
+
+import { describe, it, expect, beforeEach, afterEach } from 'vitest'
+import { render, screen, waitFor } from '@testing-library/react'
+import { http, HttpResponse } from 'msw'
+import { setupServer } from 'msw/node'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+
+import Relay from '@/pages/Relay'
+
+// ── Mock data ────────────────────────────────────────────────
+
+const mockRelayTasks = {
+  items: [
+    {
+      id: 'task-001-abcdef',
+      account_id: 'acc-001',
+      provider_id: 'prov-001',
+      model_id: 'gpt-4o',
+      status: 'completed',
+      priority: 0,
+      attempt_count: 1,
+      max_attempts: 3,
+      input_tokens: 1500,
+      output_tokens: 800,
+      error_message: null,
+      queued_at: '2026-03-30T10:00:00Z',
+      started_at: '2026-03-30T10:00:01Z',
+      completed_at: '2026-03-30T10:00:05Z',
+      created_at: '2026-03-30T10:00:00Z',
+    },
+    {
+      id: 'task-002-ghijkl',
+      account_id: 'acc-002',
+      provider_id: 'prov-002',
+      model_id: 'claude-3.5-sonnet',
+      status: 'failed',
+      priority: 0,
+      attempt_count: 3,
+      max_attempts: 3,
+      input_tokens: 2000,
+      output_tokens: 0,
+      error_message: 'Rate limit exceeded',
+      queued_at: '2026-03-30T09:00:00Z',
+      started_at: '2026-03-30T09:00:01Z',
+      completed_at: '2026-03-30T09:01:00Z',
+      created_at: '2026-03-30T09:00:00Z',
+    },
+    {
+      id: 'task-003-mnopqr',
+      account_id: 'acc-001',
+      provider_id: 'prov-001',
+      model_id: 'gpt-4o-mini',
+      status: 'queued',
+      priority: 1,
+      attempt_count: 0,
+      max_attempts: 3,
+      input_tokens: 0,
+      output_tokens: 0,
+      error_message: null,
+      queued_at: '2026-03-30T11:00:00Z',
+      started_at: null,
+      completed_at: null,
+      created_at: '2026-03-30T11:00:00Z',
+    },
+  ],
+  total: 3,
+  page: 1,
+  page_size: 20,
+}
+
+// ── MSW server ───────────────────────────────────────────────
+
+const server = setupServer()
+
+beforeEach(() => {
+  server.listen({ onUnhandledRequest: 'bypass' })
+})
+
+afterEach(() => {
+  server.close()
+})
+
+// ── Helper: render with QueryClient ──────────────────────────
+
+function renderWithProviders(ui: React.ReactElement) {
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: { retry: false },
+    },
+  })
+  return render(
+    <QueryClientProvider client={queryClient}>
+      {ui}
+    </QueryClientProvider>,
+  )
+}
+
+// ── Tests ────────────────────────────────────────────────────
+
+describe('Relay page', () => {
+  it('renders page header', async () => {
+    server.use(
+      http.get('*/api/v1/relay/tasks', () => {
+        return HttpResponse.json(mockRelayTasks)
+      }),
+    )
+
+    renderWithProviders(<Relay />)
+
+    expect(screen.getByText('中转任务')).toBeInTheDocument()
+    expect(screen.getByText('查看和管理 AI 模型中转请求')).toBeInTheDocument()
+  })
+
+  it('fetches and displays relay tasks', async () => {
+    server.use(
+      http.get('*/api/v1/relay/tasks', () => {
+        return HttpResponse.json(mockRelayTasks)
+      }),
+    )
+
+    renderWithProviders(<Relay />)
+
+    await waitFor(() => {
+      expect(screen.getByText('已完成')).toBeInTheDocument()
+    })
+    expect(screen.getByText('失败')).toBeInTheDocument()
+    expect(screen.getByText('排队中')).toBeInTheDocument()
+  })
+
+  it('shows loading spinner while fetching', async () => {
+    server.use(
+      http.get('*/api/v1/relay/tasks', async () => {
+        await new Promise((resolve) => setTimeout(resolve, 500))
+        return HttpResponse.json(mockRelayTasks)
+      }),
+    )
+
+    renderWithProviders(<Relay />)
+
+    // Ant Design Spin component renders a .ant-spin element
+    const spinner = document.querySelector('.ant-spin')
+    expect(spinner).toBeTruthy()
+
+    // Wait for loading to complete so afterEach cleanup is clean
+    await waitFor(() => {
+      expect(screen.getByText('已完成')).toBeInTheDocument()
+    })
+  })
+
+  it('shows ErrorState on API failure with retry button', async () => {
+    server.use(
+      http.get('*/api/v1/relay/tasks', () => {
+        return HttpResponse.json(
+          { error: 'internal_error', message: '服务器内部错误' },
+          { status: 500 },
+        )
+      }),
+    )
+
+    renderWithProviders(<Relay />)
+
+    await waitFor(() => {
+      expect(screen.getByText('服务器内部错误')).toBeInTheDocument()
+    })
+    // Ant Design Button splits two-character text with a space: "重 试"
+    const retryButton = screen.getByRole('button', { name: /重.?试/ })
+    expect(retryButton).toBeInTheDocument()
+  })
+
+  it('renders status as colored tag', async () => {
+    server.use(
+      http.get('*/api/v1/relay/tasks', () => {
+        return HttpResponse.json(mockRelayTasks)
+      }),
+    )
+
+    renderWithProviders(<Relay />)
+
+    await waitFor(() => {
+      expect(screen.getByText('已完成')).toBeInTheDocument()
+    })
+
+    // Verify the status tags have correct Ant Design color classes
+    const completedTag = screen.getByText('已完成').closest('.ant-tag')
+    expect(completedTag).toBeTruthy()
+    // statusColors.completed = 'green'
+    expect(completedTag?.className).toMatch(/green/)
+
+    const failedTag = screen.getByText('失败').closest('.ant-tag')
+    expect(failedTag).toBeTruthy()
+    // statusColors.failed = 'red'
+    expect(failedTag?.className).toMatch(/red/)
+  })
+
+  it('renders model_id column', async () => {
+    server.use(
+      http.get('*/api/v1/relay/tasks', () => {
+        return HttpResponse.json(mockRelayTasks)
+      }),
+    )
+
+    renderWithProviders(<Relay />)
+
+    await waitFor(() => {
+      expect(screen.getByText('已完成')).toBeInTheDocument()
+    })
+
+    expect(screen.getByText('gpt-4o')).toBeInTheDocument()
+    expect(screen.getByText('claude-3.5-sonnet')).toBeInTheDocument()
+    expect(screen.getByText('gpt-4o-mini')).toBeInTheDocument()
+  })
+
+  it('renders token count column', async () => {
+    server.use(
+      http.get('*/api/v1/relay/tasks', () => {
+        return HttpResponse.json(mockRelayTasks)
+      }),
+    )
+
+    renderWithProviders(<Relay />)
+
+    await waitFor(() => {
+      expect(screen.getByText('已完成')).toBeInTheDocument()
+    })
+
+    // Token (入/出): 1,500 / 800
+    expect(screen.getByText(/1,500 \/ 800/)).toBeInTheDocument()
+    // 2,000 / 0
+    expect(screen.getByText(/2,000 \/ 0/)).toBeInTheDocument()
+  })
+})
--- a/admin-v2/tests/pages/Usage.test.tsx
+++ b/admin-v2/tests/pages/Usage.test.tsx
@@ -0,0 +1,248 @@
+// ============================================================
+// Usage 页面测试
+// ============================================================
+
+import { describe, it, expect, beforeEach, afterEach } from 'vitest'
+import { render, screen, waitFor } from '@testing-library/react'
+import { http, HttpResponse } from 'msw'
+import { setupServer } from 'msw/node'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+
+import Usage from '@/pages/Usage'
+
+// ── Mock data ────────────────────────────────────────────────
+
+const mockDailyStats = [
+  {
+    day: '2026-03-28',
+    request_count: 120,
+    input_tokens: 24000,
+    output_tokens: 8000,
+    unique_devices: 5,
+  },
+  {
+    day: '2026-03-29',
+    request_count: 80,
+    input_tokens: 16000,
+    output_tokens: 5000,
+    unique_devices: 3,
+  },
+  {
+    day: '2026-03-30',
+    request_count: 200,
+    input_tokens: 40000,
+    output_tokens: 12000,
+    unique_devices: 7,
+  },
+]
+
+const mockModelStats = [
+  {
+    model_id: 'gpt-4o',
+    request_count: 300,
+    input_tokens: 60000,
+    output_tokens: 18000,
+    avg_latency_ms: 450.3,
+    success_rate: 0.98,
+  },
+  {
+    model_id: 'claude-sonnet-4-20250514',
+    request_count: 100,
+    input_tokens: 20000,
+    output_tokens: 7000,
+    avg_latency_ms: 620.7,
+    success_rate: 0.95,
+  },
+]
+
+// ── MSW server ───────────────────────────────────────────────
+
+const server = setupServer()
+
+beforeEach(() => {
+  server.listen({ onUnhandledRequest: 'bypass' })
+})
+
+afterEach(() => {
+  server.close()
+})
+
+// ── Helper: render with QueryClient ──────────────────────────
+
+function renderWithProviders(ui: React.ReactElement) {
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: { retry: false },
+    },
+  })
+  return render(
+    <QueryClientProvider client={queryClient}>
+      {ui}
+    </QueryClientProvider>,
+  )
+}
+
+// ── Tests ────────────────────────────────────────────────────
+
+describe('Usage page', () => {
+  it('renders page title and summary cards', async () => {
+    server.use(
+      http.get('*/api/v1/telemetry/daily', () => {
+        return HttpResponse.json(mockDailyStats)
+      }),
+      http.get('*/api/v1/telemetry/stats', () => {
+        return HttpResponse.json(mockModelStats)
+      }),
+    )
+
+    renderWithProviders(<Usage />)
+
+    expect(screen.getByText('用量统计')).toBeInTheDocument()
+    expect(screen.getByText('查看模型使用情况和 Token 消耗')).toBeInTheDocument()
+
+    // Summary card titles
+    expect(screen.getByText('总请求数')).toBeInTheDocument()
+    expect(screen.getByText('总 Token 数')).toBeInTheDocument()
+
+    // Total requests: 120 + 80 + 200 = 400
+    await waitFor(() => {
+      expect(screen.getByText('400')).toBeInTheDocument()
+    })
+
+    // Total tokens: (24000+8000) + (16000+5000) + (40000+12000) = 105,000
+    expect(screen.getByText('105,000')).toBeInTheDocument()
+  })
+
+  it('fetches and displays daily stats table', async () => {
+    server.use(
+      http.get('*/api/v1/telemetry/daily', () => {
+        return HttpResponse.json(mockDailyStats)
+      }),
+      http.get('*/api/v1/telemetry/stats', () => {
+        return HttpResponse.json(mockModelStats)
+      }),
+    )
+
+    renderWithProviders(<Usage />)
+
+    // Table column headers
+    expect(screen.getByText('每日统计')).toBeInTheDocument()
+
+    // Wait for data rows to render
+    await waitFor(() => {
+      expect(screen.getByText('2026-03-28')).toBeInTheDocument()
+    })
+
+    // Formatted request counts
+    expect(screen.getByText('120')).toBeInTheDocument()
+    expect(screen.getByText('80')).toBeInTheDocument()
+    expect(screen.getByText('200')).toBeInTheDocument()
+
+    // Device counts
+    expect(screen.getByText('5')).toBeInTheDocument()
+  })
+
+  it('fetches and displays model stats table', async () => {
+    server.use(
+      http.get('*/api/v1/telemetry/daily', () => {
+        return HttpResponse.json(mockDailyStats)
+      }),
+      http.get('*/api/v1/telemetry/stats', () => {
+        return HttpResponse.json(mockModelStats)
+      }),
+    )
+
+    renderWithProviders(<Usage />)
+
+    expect(screen.getByText('按模型统计')).toBeInTheDocument()
+
+    await waitFor(() => {
+      expect(screen.getByText('gpt-4o')).toBeInTheDocument()
+    })
+
+    expect(screen.getByText('claude-sonnet-4-20250514')).toBeInTheDocument()
+
+    // Success rate: 0.98 -> "98.0%"
+    expect(screen.getByText('98.0%')).toBeInTheDocument()
+
+    // Avg latency: 450.3 -> "450ms"
+    expect(screen.getByText('450ms')).toBeInTheDocument()
+  })
+
+  it('shows loading spinner before data loads', async () => {
+    server.use(
+      http.get('*/api/v1/telemetry/daily', async () => {
+        await new Promise((resolve) => setTimeout(resolve, 500))
+        return HttpResponse.json(mockDailyStats)
+      }),
+      http.get('*/api/v1/telemetry/stats', async () => {
+        await new Promise((resolve) => setTimeout(resolve, 500))
+        return HttpResponse.json(mockModelStats)
+      }),
+    )
+
+    renderWithProviders(<Usage />)
+
+    // Ant Design Spin component renders a .ant-spin element
+    const spinner = document.querySelector('.ant-spin')
+    expect(spinner).toBeTruthy()
+
+    // Wait for loading to complete so afterEach cleanup is clean
+    await waitFor(() => {
+      expect(screen.getByText('用量统计')).toBeInTheDocument()
+    })
+  })
+
+  it('shows ErrorState when daily stats request fails', async () => {
+    server.use(
+      http.get('*/api/v1/telemetry/daily', () => {
+        return HttpResponse.json(
+          { error: 'internal_error', message: '服务器内部错误' },
+          { status: 500 },
+        )
+      }),
+      http.get('*/api/v1/telemetry/stats', () => {
+        return HttpResponse.json(mockModelStats)
+      }),
+    )
+
+    renderWithProviders(<Usage />)
+
+    await waitFor(() => {
+      expect(screen.getByText('服务器内部错误')).toBeInTheDocument()
+    })
+
+    // ErrorState renders a retry button (antd v6 may split Chinese characters)
+    expect(screen.getByRole('button', { name: /重.*试/ })).toBeInTheDocument()
+  })
+
+  it('calculates totals correctly from daily data', async () => {
+    server.use(
+      http.get('*/api/v1/telemetry/daily', () => {
+        return HttpResponse.json([
+          {
+            day: '2026-03-30',
+            request_count: 1500,
+            input_tokens: 10000,
+            output_tokens: 3000,
+            unique_devices: 2,
+          },
+        ])
+      }),
+      http.get('*/api/v1/telemetry/stats', () => {
+        return HttpResponse.json([])
+      }),
+    )
+
+    renderWithProviders(<Usage />)
+
+    // Total requests: 1500 (formatted as "1,500" by Statistic)
+    await waitFor(() => {
+      const elements = screen.getAllByText('1,500')
+      expect(elements.length).toBeGreaterThanOrEqual(1)
+    })
+
+    // Total tokens: 10000 + 3000 = 13,000
+    expect(screen.getAllByText('13,000').length).toBeGreaterThanOrEqual(1)
+  })
+})