feat: 新增模型管理功能（供应商 + 模型 CRUD）

- 新增 providers/models 数据库表、迁移和数据访问层
- 新增 15 个后端 API 路由（供应商/模型 CRUD + 连通性测试）
- 新增 AI 服务层（registry.ts: buildProviderRegistry + testProviderConnection）
- 新增前端模型管理页面（Tabs: 供应商/模型，含表格、表单、工具栏）
- 新增前端 hooks（use-providers, use-models）
- 新增共享类型和 MODEL_CAPABILITIES 常量
- 新增 10 个测试文件（66 个测试用例，4 个因 bun test ESM 兼容问题待修复）
- 更新开发文档（architecture, backend, frontend）
- 附带 apply-review 修复：统一错误响应、提取共享常量、清理重复测试

注意：registry.test.ts 中 4 个测试因 bun test 无法解析
createProviderRegistry ESM 导出而失败，详情见 context.md

src/web/consoles/admin/menu.tsx

@@ -1,4 +1,4 @@
-import { DashboardOutlined, FolderOutlined } from "@ant-design/icons";
+import { DashboardOutlined, FolderOutlined, RobotOutlined } from "@ant-design/icons";
 import { createElement } from "react";
 
 import type { MenuItemConfig } from "../../menu";
@@ -6,4 +6,5 @@ import type { MenuItemConfig } from "../../menu";
 export const ADMIN_MENU_ITEMS: readonly MenuItemConfig[] = [
   { icon: createElement(DashboardOutlined), label: "总览", path: "/", value: "dashboard" },
   { icon: createElement(FolderOutlined), label: "项目管理", path: "/projects", value: "projects" },
+  { icon: createElement(RobotOutlined), label: "模型管理", path: "/models", value: "models" },
 ] as const;

src/web/hooks/use-models.ts

@@ -0,0 +1,141 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+
+import type { CreateModelRequest, Model, ModelListResponse, ModelResponse, UpdateModelRequest } from "../../shared/api";
+
+const MODELS_KEY = ["models"] as const;
+
+export async function createModel(data: CreateModelRequest): Promise<Model> {
+  const response = await fetch("/api/models", {
+    body: JSON.stringify(data),
+    headers: { "Content-Type": "application/json" },
+    method: "POST",
+  });
+  return handleResponse(response);
+}
+
+export async function deleteModel(id: string): Promise<void> {
+  const response = await fetch(`/api/models/${id}`, { method: "DELETE" });
+  if (!response.ok) {
+    const body = (await response.json().catch(() => null)) as null | { error?: string };
+    throw new Error(body?.error ?? `HTTP ${response.status}`);
+  }
+}
+
+export async function disableModel(id: string): Promise<Model> {
+  const response = await fetch(`/api/models/${id}/disable`, { method: "POST" });
+  return handleResponse(response);
+}
+
+export async function enableModel(id: string): Promise<Model> {
+  const response = await fetch(`/api/models/${id}/enable`, { method: "POST" });
+  return handleResponse(response);
+}
+
+export async function fetchModel(id: string): Promise<Model> {
+  const response = await fetch(`/api/models/${id}`);
+  return handleResponse(response);
+}
+
+export async function fetchModelList(params: {
+  keyword?: string;
+  page?: number;
+  pageSize?: number;
+  providerId?: string;
+}): Promise<ModelListResponse> {
+  const searchParams = new URLSearchParams();
+  if (params.page) searchParams.set("page", String(params.page));
+  if (params.pageSize) searchParams.set("pageSize", String(params.pageSize));
+  if (params.keyword) searchParams.set("keyword", params.keyword);
+  if (params.providerId) searchParams.set("providerId", params.providerId);
+  const qs = searchParams.toString();
+  const url = `/api/models${qs ? `?${qs}` : ""}`;
+  const response = await fetch(url);
+  if (!response.ok) {
+    const body = (await response.json().catch(() => null)) as null | { error?: string };
+    throw new Error(body?.error ?? `HTTP ${response.status}`);
+  }
+  return response.json() as Promise<ModelListResponse>;
+}
+
+export async function updateModel(id: string, data: UpdateModelRequest): Promise<Model> {
+  const response = await fetch(`/api/models/${id}`, {
+    body: JSON.stringify(data),
+    headers: { "Content-Type": "application/json" },
+    method: "PATCH",
+  });
+  return handleResponse(response);
+}
+
+export function useCreateModel() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: createModel,
+    onSuccess: () => {
+      void queryClient.invalidateQueries({ queryKey: MODELS_KEY });
+    },
+  });
+}
+
+export function useDeleteModel() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: deleteModel,
+    onSuccess: () => {
+      void queryClient.invalidateQueries({ queryKey: MODELS_KEY });
+    },
+  });
+}
+
+export function useDisableModel() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: disableModel,
+    onSuccess: () => {
+      void queryClient.invalidateQueries({ queryKey: MODELS_KEY });
+    },
+  });
+}
+
+export function useEnableModel() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: enableModel,
+    onSuccess: () => {
+      void queryClient.invalidateQueries({ queryKey: MODELS_KEY });
+    },
+  });
+}
+
+export function useModel(id: string) {
+  return useQuery({
+    enabled: !!id,
+    queryFn: () => fetchModel(id),
+    queryKey: [...MODELS_KEY, "detail", id],
+  });
+}
+
+export function useModelList(params: { keyword?: string; page?: number; pageSize?: number; providerId?: string }) {
+  return useQuery({
+    queryFn: () => fetchModelList(params),
+    queryKey: [...MODELS_KEY, "list", params],
+  });
+}
+
+export function useUpdateModel() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: (args: { data: UpdateModelRequest; id: string }) => updateModel(args.id, args.data),
+    onSuccess: () => {
+      void queryClient.invalidateQueries({ queryKey: MODELS_KEY });
+    },
+  });
+}
+
+async function handleResponse(response: Response): Promise<Model> {
+  if (!response.ok) {
+    const body = (await response.json().catch(() => null)) as null | { error?: string };
+    throw new Error(body?.error ?? `HTTP ${response.status}`);
+  }
+  const data = (await response.json()) as ModelResponse;
+  return data.model;
+}

src/web/hooks/use-providers.ts

@@ -0,0 +1,164 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+
+import type {
+  CreateProviderRequest,
+  Provider,
+  ProviderListResponse,
+  ProviderResponse,
+  ProviderTestResponse,
+  UpdateProviderRequest,
+} from "../../shared/api";
+
+const PROVIDERS_KEY = ["providers"] as const;
+const MODELS_KEY = ["models"] as const;
+
+export async function createProvider(data: CreateProviderRequest): Promise<Provider> {
+  const response = await fetch("/api/providers", {
+    body: JSON.stringify(data),
+    headers: { "Content-Type": "application/json" },
+    method: "POST",
+  });
+  return handleResponse(response);
+}
+
+export async function deleteProvider(id: string): Promise<void> {
+  const response = await fetch(`/api/providers/${id}`, { method: "DELETE" });
+  if (!response.ok) {
+    const body = (await response.json().catch(() => null)) as null | { error?: string };
+    throw new Error(body?.error ?? `HTTP ${response.status}`);
+  }
+}
+
+export async function disableProvider(id: string): Promise<Provider> {
+  const response = await fetch(`/api/providers/${id}/disable`, { method: "POST" });
+  return handleResponse(response);
+}
+
+export async function enableProvider(id: string): Promise<Provider> {
+  const response = await fetch(`/api/providers/${id}/enable`, { method: "POST" });
+  return handleResponse(response);
+}
+
+export async function fetchProvider(id: string): Promise<Provider> {
+  const response = await fetch(`/api/providers/${id}`);
+  return handleResponse(response);
+}
+
+export async function fetchProviderList(params: {
+  keyword?: string;
+  page?: number;
+  pageSize?: number;
+}): Promise<ProviderListResponse> {
+  const searchParams = new URLSearchParams();
+  if (params.page) searchParams.set("page", String(params.page));
+  if (params.pageSize) searchParams.set("pageSize", String(params.pageSize));
+  if (params.keyword) searchParams.set("keyword", params.keyword);
+  const qs = searchParams.toString();
+  const url = `/api/providers${qs ? `?${qs}` : ""}`;
+  const response = await fetch(url);
+  if (!response.ok) {
+    const body = (await response.json().catch(() => null)) as null | { error?: string };
+    throw new Error(body?.error ?? `HTTP ${response.status}`);
+  }
+  return response.json() as Promise<ProviderListResponse>;
+}
+
+export async function testProviderConnection(id: string): Promise<ProviderTestResponse> {
+  const response = await fetch(`/api/providers/${id}/test`, { method: "POST" });
+  if (!response.ok) {
+    const body = (await response.json().catch(() => null)) as null | { error?: string };
+    throw new Error(body?.error ?? `HTTP ${response.status}`);
+  }
+  const data = (await response.json()) as { providerTestResponse: ProviderTestResponse };
+  return data.providerTestResponse;
+}
+
+export async function updateProvider(id: string, data: UpdateProviderRequest): Promise<Provider> {
+  const response = await fetch(`/api/providers/${id}`, {
+    body: JSON.stringify(data),
+    headers: { "Content-Type": "application/json" },
+    method: "PATCH",
+  });
+  return handleResponse(response);
+}
+
+export function useCreateProvider() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: createProvider,
+    onSuccess: () => {
+      void queryClient.invalidateQueries({ queryKey: PROVIDERS_KEY });
+    },
+  });
+}
+
+export function useDeleteProvider() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: deleteProvider,
+    onSuccess: () => {
+      void queryClient.invalidateQueries({ queryKey: PROVIDERS_KEY });
+      void queryClient.invalidateQueries({ queryKey: MODELS_KEY });
+    },
+  });
+}
+
+export function useDisableProvider() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: disableProvider,
+    onSuccess: () => {
+      void queryClient.invalidateQueries({ queryKey: PROVIDERS_KEY });
+    },
+  });
+}
+
+export function useEnableProvider() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: enableProvider,
+    onSuccess: () => {
+      void queryClient.invalidateQueries({ queryKey: PROVIDERS_KEY });
+    },
+  });
+}
+
+export function useProvider(id: string) {
+  return useQuery({
+    enabled: !!id,
+    queryFn: () => fetchProvider(id),
+    queryKey: [...PROVIDERS_KEY, "detail", id],
+  });
+}
+
+export function useProviderList(params: { keyword?: string; page?: number; pageSize?: number }) {
+  return useQuery({
+    queryFn: () => fetchProviderList(params),
+    queryKey: [...PROVIDERS_KEY, "list", params],
+  });
+}
+
+export function useTestProviderConnection() {
+  return useMutation({
+    mutationFn: testProviderConnection,
+  });
+}
+
+export function useUpdateProvider() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: (args: { data: UpdateProviderRequest; id: string }) => updateProvider(args.id, args.data),
+    onSuccess: () => {
+      void queryClient.invalidateQueries({ queryKey: PROVIDERS_KEY });
+    },
+  });
+}
+
+async function handleResponse(response: Response): Promise<Provider> {
+  if (!response.ok) {
+    const body = (await response.json().catch(() => null)) as null | { error?: string };
+    throw new Error(body?.error ?? `HTTP ${response.status}`);
+  }
+  const data = (await response.json()) as ProviderResponse;
+  return data.provider;
+}

src/web/pages/models/components/ModelFormModal.tsx

@@ -0,0 +1,182 @@
+import { App as AntApp, Button, Checkbox, Col, Form, Input, InputNumber, Modal, Row, Select, Space } from "antd";
+import { useEffect, useState } from "react";
+
+import type { CreateModelRequest, Model, ModelCapability, Provider, UpdateModelRequest } from "../../../../shared/api";
+
+interface FormValues {
+  capabilities: ModelCapability[];
+  contextLength: null | number;
+  maxOutputTokens: null | number;
+  modelId: string;
+  name: string;
+  providerId: string;
+}
+
+interface ModelFormModalProps {
+  editingModel: Model | null;
+  onCancel: () => void;
+  onCreate: (data: CreateModelRequest) => Promise<unknown>;
+  onOpenChange: (open: boolean) => void;
+  onUpdate: (args: { data: UpdateModelRequest; id: string }) => Promise<unknown>;
+  open: boolean;
+  providers: Provider[];
+  submitting: boolean;
+  testConnection?: (providerId: string) => Promise<unknown>;
+}
+
+const CAPABILITY_OPTIONS: Array<{ label: string; value: ModelCapability }> = [
+  { label: "文本", value: "text" },
+  { label: "推理", value: "reasoning" },
+  { label: "图片生成", value: "image-generation" },
+  { label: "视频生成", value: "video-generation" },
+  { label: "音频生成", value: "audio-generation" },
+  { label: "图片识别", value: "image-recognition" },
+  { label: "视频识别", value: "video-recognition" },
+  { label: "音频识别", value: "audio-recognition" },
+];
+
+export function ModelFormModal({
+  editingModel,
+  onCancel,
+  onCreate,
+  onOpenChange,
+  onUpdate,
+  open,
+  providers,
+  submitting,
+  testConnection,
+}: ModelFormModalProps) {
+  const { message } = AntApp.useApp();
+  const [form] = Form.useForm<FormValues>();
+  const [testing, setTesting] = useState(false);
+
+  useEffect(() => {
+    if (!open) return;
+    if (editingModel) {
+      form.setFieldsValue({
+        capabilities: editingModel.capabilities,
+        contextLength: editingModel.contextLength,
+        maxOutputTokens: editingModel.maxOutputTokens,
+        modelId: editingModel.modelId,
+        name: editingModel.name,
+        providerId: editingModel.providerId,
+      });
+    } else {
+      form.resetFields();
+    }
+  }, [editingModel, form, open]);
+
+  const handleFinish = async (values: FormValues) => {
+    try {
+      if (editingModel) {
+        const reqData: UpdateModelRequest = {};
+        if (values.name !== editingModel.name) reqData.name = values.name;
+        if (values.modelId !== editingModel.modelId) reqData.modelId = values.modelId;
+        if (values.providerId !== editingModel.providerId) reqData.providerId = values.providerId;
+        const capsChanged =
+          values.capabilities.length !== editingModel.capabilities.length ||
+          values.capabilities.some((c, i) => c !== editingModel.capabilities[i]);
+        if (capsChanged) reqData.capabilities = values.capabilities;
+        if (values.contextLength !== editingModel.contextLength) reqData.contextLength = values.contextLength;
+        if (values.maxOutputTokens !== editingModel.maxOutputTokens) reqData.maxOutputTokens = values.maxOutputTokens;
+        await onUpdate({ data: reqData, id: editingModel.id });
+        message.success("模型已更新");
+      } else {
+        const reqData: CreateModelRequest = {
+          capabilities: values.capabilities,
+          contextLength: values.contextLength ?? undefined,
+          maxOutputTokens: values.maxOutputTokens ?? undefined,
+          modelId: values.modelId,
+          name: values.name,
+          providerId: values.providerId,
+        };
+        await onCreate(reqData);
+        message.success("模型已创建");
+      }
+      onOpenChange(false);
+    } catch (err) {
+      if (err instanceof Error) {
+        message.error(err.message);
+      }
+    }
+  };
+
+  const handleTest = async () => {
+    if (!testConnection) return;
+    const providerId: unknown = form.getFieldValue("providerId");
+    if (typeof providerId !== "string" || !providerId) {
+      message.warning("请先选择供应商");
+      return;
+    }
+    setTesting(true);
+    try {
+      const result = await testConnection(providerId);
+      message.success((result as { message: string }).message);
+    } catch (err) {
+      message.error((err as Error).message);
+    } finally {
+      setTesting(false);
+    }
+  };
+
+  const providerOptions = providers.filter((p) => p.enabled).map((p) => ({ label: p.name, value: p.id }));
+
+  return (
+    <Modal
+      confirmLoading={submitting}
+      destroyOnHidden
+      okText="确定"
+      onCancel={onCancel}
+      onOk={() => void form.submit()}
+      open={open}
+      title={editingModel ? "编辑模型" : "新建模型"}
+      width={600}
+    >
+      <Form form={form} layout="vertical" onFinish={(values) => void handleFinish(values)}>
+        <Form.Item
+          label="模型名称"
+          name="name"
+          rules={[{ message: "请输入模型名称", required: true, whitespace: true }]}
+        >
+          <Input placeholder="请输入模型名称" />
+        </Form.Item>
+        <Form.Item label="所属供应商" name="providerId" rules={[{ message: "请选择供应商", required: true }]}>
+          <Select options={providerOptions} placeholder="请选择供应商" />
+        </Form.Item>
+        <Form.Item
+          label="模型 ID"
+          name="modelId"
+          rules={[{ message: "请输入模型 ID", required: true, whitespace: true }]}
+        >
+          <Input placeholder="gpt-4o, claude-3-opus-20240229, deepseek-chat 等" />
+        </Form.Item>
+        <Form.Item label="能力标签" name="capabilities" rules={[{ message: "请至少选择一个能力标签", required: true }]}>
+          <Checkbox.Group>
+            <Row>
+              {CAPABILITY_OPTIONS.map((opt) => (
+                <Col key={opt.value} span={12}>
+                  <Checkbox value={opt.value}>{opt.label}</Checkbox>
+                </Col>
+              ))}
+            </Row>
+          </Checkbox.Group>
+        </Form.Item>
+        <Form.Item label="上下文长度" name="contextLength">
+          <InputNumber placeholder="可选" style={{ width: "100%" }} />
+        </Form.Item>
+        <Form.Item label="最大输出 Token" name="maxOutputTokens">
+          <InputNumber placeholder="可选" style={{ width: "100%" }} />
+        </Form.Item>
+        {editingModel && testConnection && (
+          <Form.Item>
+            <Space>
+              <Button loading={testing} onClick={() => void handleTest()}>
+                测试连接
+              </Button>
+            </Space>
+          </Form.Item>
+        )}
+      </Form>
+    </Modal>
+  );
+}

src/web/pages/models/components/ModelTable.tsx

@@ -0,0 +1,179 @@
+import type { ColumnsType } from "antd/es/table";
+
+import { CheckCircleOutlined, DeleteOutlined, EditOutlined, StopOutlined } from "@ant-design/icons";
+import { App as AntApp, Button, Popconfirm, Space, Table, Tag } from "antd";
+
+import type { Model, ModelListResponse, Provider } from "../../../../shared/api";
+
+interface ModelTableProps {
+  data: ModelListResponse | undefined;
+  loading: boolean;
+  onDelete: (id: string) => Promise<unknown>;
+  onDisable: (id: string) => Promise<unknown>;
+  onEdit: (model: Model) => void;
+  onEnable: (id: string) => Promise<unknown>;
+  onPageChange: (page: number, pageSize: number) => void;
+  page: number;
+  pageSize: number;
+  providers: Provider[];
+}
+
+const CAPABILITY_LABELS: Record<string, string> = {
+  "audio-generation": "音频生成",
+  "audio-recognition": "音频识别",
+  "image-generation": "图片生成",
+  "image-recognition": "图片识别",
+  reasoning: "推理",
+  text: "文本",
+  "video-generation": "视频生成",
+  "video-recognition": "视频识别",
+};
+
+function getProviderName(providerId: string, providers: Provider[]): string {
+  return providers.find((p) => p.id === providerId)?.name ?? providerId;
+}
+
+const COLUMNS: ColumnsType<Model> = [
+  { dataIndex: "name", ellipsis: true, title: "模型名称", width: 160 },
+  { dataIndex: "modelId", ellipsis: true, title: "模型 ID", width: 180 },
+  {
+    dataIndex: "providerId",
+    ellipsis: true,
+    title: "供应商",
+    width: 120,
+  },
+  {
+    dataIndex: "capabilities",
+    render: (value: string[]) =>
+      value.map((c) => (
+        <Tag key={c} style={{ marginBottom: 2 }}>
+          {CAPABILITY_LABELS[c] ?? c}
+        </Tag>
+      )),
+    title: "能力",
+    width: 200,
+  },
+  {
+    align: "center",
+    dataIndex: "enabled",
+    render: (value: boolean) => (value ? <Tag color="blue">已启用</Tag> : <Tag>已禁用</Tag>),
+    title: "状态",
+    width: 100,
+  },
+  {
+    align: "center",
+    dataIndex: "createdAt",
+    render: (_value: unknown, record: Model) => formatDatetime(record.createdAt),
+    title: "创建时间",
+    width: 185,
+  },
+];
+
+export function ModelTable({
+  data,
+  loading,
+  onDelete,
+  onDisable,
+  onEdit,
+  onEnable,
+  onPageChange,
+  page,
+  pageSize,
+  providers,
+}: ModelTableProps) {
+  const { message } = AntApp.useApp();
+
+  const handleEnable = async (id: string) => {
+    try {
+      await onEnable(id);
+      message.success("模型已启用");
+    } catch (err) {
+      message.error((err as Error).message);
+    }
+  };
+
+  const handleDisable = async (id: string) => {
+    try {
+      await onDisable(id);
+      message.success("模型已禁用");
+    } catch (err) {
+      message.error((err as Error).message);
+    }
+  };
+
+  const handleDelete = async (id: string) => {
+    try {
+      await onDelete(id);
+      message.success("模型已删除");
+    } catch (err) {
+      message.error((err as Error).message);
+    }
+  };
+
+  const columnsWithProvider: ColumnsType<Model> = COLUMNS.map((col) =>
+    "dataIndex" in col && col.dataIndex === "providerId"
+      ? {
+          ...col,
+          render: (_value: unknown, record: Model) => getProviderName(record.providerId, providers),
+        }
+      : col,
+  );
+
+  const operationColumn: ColumnsType<Model>[number] = {
+    dataIndex: "op",
+    fixed: "right",
+    render: (_value: unknown, record: Model) => (
+      <Space size="small">
+        <Button icon={<EditOutlined />} onClick={() => onEdit(record)} size="small" type="link">
+          编辑
+        </Button>
+        {record.enabled ? (
+          <Popconfirm onConfirm={() => void handleDisable(record.id)} title="确认禁用此模型？">
+            <Button color="orange" icon={<StopOutlined />} size="small" variant="link">
+              禁用
+            </Button>
+          </Popconfirm>
+        ) : (
+          <Button icon={<CheckCircleOutlined />} onClick={() => void handleEnable(record.id)} size="small" type="link">
+            启用
+          </Button>
+        )}
+        <Popconfirm
+          description="此操作不可恢复。"
+          onConfirm={() => void handleDelete(record.id)}
+          title="确认删除此模型？"
+        >
+          <Button danger icon={<DeleteOutlined />} size="small" type="link">
+            删除
+          </Button>
+        </Popconfirm>
+      </Space>
+    ),
+    title: "操作",
+    width: 220,
+  };
+
+  return (
+    <Table
+      columns={[...columnsWithProvider, operationColumn]}
+      dataSource={data?.items ?? []}
+      loading={loading}
+      pagination={{
+        current: page,
+        hideOnSinglePage: false,
+        onChange: onPageChange,
+        pageSize,
+        showSizeChanger: true,
+        total: data?.total ?? 0,
+      }}
+      rowKey="id"
+      scroll={{ x: 1100 }}
+    />
+  );
+}
+
+function formatDatetime(dateStr: string): string {
+  const d = new Date(dateStr);
+  const pad = (n: number) => String(n).padStart(2, "0");
+  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`;
+}

src/web/pages/models/components/ModelToolbar.tsx

@@ -0,0 +1,34 @@
+import { PlusOutlined } from "@ant-design/icons";
+import { Button, Flex, Input } from "antd";
+import { useState } from "react";
+
+interface ModelToolbarProps {
+  keyword: string;
+  onSearch: (value: string) => void;
+  onSearchClear: () => void;
+  openCreateDialog: () => void;
+}
+
+export function ModelToolbar({ keyword, onSearch, onSearchClear, openCreateDialog }: ModelToolbarProps) {
+  const [draftKeyword, setDraftKeyword] = useState(keyword);
+
+  return (
+    <Flex align="center" gap="small" justify="space-between" wrap="wrap">
+      <Input.Search
+        allowClear
+        enterButton="搜索"
+        onChange={(event) => setDraftKeyword(event.target.value)}
+        onClear={() => {
+          setDraftKeyword("");
+          onSearchClear();
+        }}
+        onSearch={(value) => onSearch(value)}
+        placeholder="搜索模型名称或 ID"
+        value={draftKeyword}
+      />
+      <Button icon={<PlusOutlined />} onClick={openCreateDialog} type="primary">
+        新建模型
+      </Button>
+    </Flex>
+  );
+}

src/web/pages/models/components/ProviderFormModal.tsx

@@ -0,0 +1,113 @@
+import { App as AntApp, Form, Input, Modal, Select } from "antd";
+import { useEffect } from "react";
+
+import type { CreateProviderRequest, Provider, ProviderType, UpdateProviderRequest } from "../../../../shared/api";
+
+interface FormValues {
+  apiKey: string;
+  baseUrl: string;
+  name: string;
+  type: ProviderType;
+}
+
+interface ProviderFormModalProps {
+  editingProvider: null | Provider;
+  onCancel: () => void;
+  onCreate: (data: CreateProviderRequest) => Promise<unknown>;
+  onOpenChange: (open: boolean) => void;
+  onUpdate: (args: { data: UpdateProviderRequest; id: string }) => Promise<unknown>;
+  open: boolean;
+  submitting: boolean;
+}
+
+const TYPE_OPTIONS = [
+  { label: "OpenAI 兼容", value: "openai-compatible" },
+  { label: "OpenAI", value: "openai" },
+  { label: "Anthropic", value: "anthropic" },
+];
+
+export function ProviderFormModal({
+  editingProvider,
+  onCancel,
+  onCreate,
+  onOpenChange,
+  onUpdate,
+  open,
+  submitting,
+}: ProviderFormModalProps) {
+  const { message } = AntApp.useApp();
+  const [form] = Form.useForm<FormValues>();
+
+  useEffect(() => {
+    if (!open) return;
+    if (editingProvider) {
+      form.setFieldsValue({
+        apiKey: editingProvider.apiKey,
+        baseUrl: editingProvider.baseUrl,
+        name: editingProvider.name,
+        type: editingProvider.type,
+      });
+    } else {
+      form.resetFields();
+    }
+  }, [editingProvider, form, open]);
+
+  const handleFinish = async (values: FormValues) => {
+    try {
+      if (editingProvider) {
+        const reqData: UpdateProviderRequest = {};
+        if (values.name !== editingProvider.name) reqData.name = values.name;
+        if (values.baseUrl !== editingProvider.baseUrl) reqData.baseUrl = values.baseUrl;
+        if (values.apiKey !== editingProvider.apiKey) reqData.apiKey = values.apiKey;
+        if (values.type !== editingProvider.type) reqData.type = values.type;
+        await onUpdate({ data: reqData, id: editingProvider.id });
+        message.success("供应商已更新");
+      } else {
+        const reqData: CreateProviderRequest = {
+          apiKey: values.apiKey,
+          baseUrl: values.baseUrl,
+          name: values.name,
+          type: values.type,
+        };
+        await onCreate(reqData);
+        message.success("供应商已创建");
+      }
+      onOpenChange(false);
+    } catch (err) {
+      if (err instanceof Error) {
+        message.error(err.message);
+      }
+    }
+  };
+
+  return (
+    <Modal
+      confirmLoading={submitting}
+      destroyOnHidden
+      okText="确定"
+      onCancel={onCancel}
+      onOk={() => void form.submit()}
+      open={open}
+      title={editingProvider ? "编辑供应商" : "新建供应商"}
+    >
+      <Form form={form} layout="vertical" onFinish={(values) => void handleFinish(values)}>
+        <Form.Item
+          label="供应商名称"
+          name="name"
+          rules={[{ message: "请输入供应商名称", required: true, whitespace: true }]}
+        >
+          <Input placeholder="请输入供应商名称" />
+        </Form.Item>
+        <Form.Item label="供应商类型" name="type" rules={[{ message: "请选择供应商类型", required: true }]}>
+          <Select options={TYPE_OPTIONS} placeholder="请选择供应商类型" />
+        </Form.Item>
+        <Form.Item label="Base URL" name="baseUrl" rules={[{ message: "请输入 Base URL", required: true }]}>
+          <Input placeholder="https://api.openai.com/v1" />
+        </Form.Item>
+        <Form.Item label="API Key" name="apiKey" rules={[{ message: "请输入 API Key", required: true }]}>
+          <Input.Password placeholder="请输入 API Key" />
+        </Form.Item>
+      </Form>
+    </Modal>
+  );
+}

src/web/pages/models/components/ProviderTable.tsx

@@ -0,0 +1,169 @@
+import type { ColumnsType } from "antd/es/table";
+
+import {
+  CheckCircleOutlined,
+  DeleteOutlined,
+  EditOutlined,
+  StopOutlined,
+  ThunderboltOutlined,
+} from "@ant-design/icons";
+import { App as AntApp, Button, Popconfirm, Space, Table, Tag, Tooltip } from "antd";
+
+import type { Provider, ProviderListResponse } from "../../../../shared/api";
+
+interface ProviderTableProps {
+  data: ProviderListResponse | undefined;
+  loading: boolean;
+  onDelete: (id: string) => Promise<unknown>;
+  onDisable: (id: string) => Promise<unknown>;
+  onEdit: (provider: Provider) => void;
+  onEnable: (id: string) => Promise<unknown>;
+  onPageChange: (page: number, pageSize: number) => void;
+  onTest: (id: string) => Promise<unknown>;
+  page: number;
+  pageSize: number;
+}
+
+const TYPE_LABELS: Record<Provider["type"], string> = {
+  anthropic: "Anthropic",
+  openai: "OpenAI",
+  "openai-compatible": "OpenAI 兼容",
+};
+
+const COLUMNS: ColumnsType<Provider> = [
+  { dataIndex: "name", ellipsis: true, title: "供应商名称", width: 160 },
+  {
+    align: "center",
+    dataIndex: "type",
+    render: (value: Provider["type"]) => TYPE_LABELS[value] ?? value,
+    title: "类型",
+    width: 130,
+  },
+  { dataIndex: "baseUrl", ellipsis: true, title: "Base URL" },
+  {
+    align: "center",
+    dataIndex: "enabled",
+    render: (value: boolean) => (value ? <Tag color="blue">已启用</Tag> : <Tag>已禁用</Tag>),
+    title: "状态",
+    width: 100,
+  },
+  {
+    align: "center",
+    dataIndex: "createdAt",
+    render: (_value: unknown, record: Provider) => formatDatetime(record.createdAt),
+    title: "创建时间",
+    width: 185,
+  },
+];
+
+export function ProviderTable({
+  data,
+  loading,
+  onDelete,
+  onDisable,
+  onEdit,
+  onEnable,
+  onPageChange,
+  onTest,
+  page,
+  pageSize,
+}: ProviderTableProps) {
+  const { message } = AntApp.useApp();
+
+  const handleEnable = async (id: string) => {
+    try {
+      await onEnable(id);
+      message.success("供应商已启用");
+    } catch (err) {
+      message.error((err as Error).message);
+    }
+  };
+
+  const handleDisable = async (id: string) => {
+    try {
+      await onDisable(id);
+      message.success("供应商已禁用");
+    } catch (err) {
+      message.error((err as Error).message);
+    }
+  };
+
+  const handleDelete = async (id: string) => {
+    try {
+      await onDelete(id);
+      message.success("供应商已删除");
+    } catch (err) {
+      message.error((err as Error).message);
+    }
+  };
+
+  const handleTest = async (id: string) => {
+    try {
+      const result = await onTest(id);
+      message.success((result as { message: string }).message);
+    } catch (err) {
+      message.error((err as Error).message);
+    }
+  };
+
+  const operationColumn: ColumnsType<Provider>[number] = {
+    dataIndex: "op",
+    fixed: "right",
+    render: (_value: unknown, record: Provider) => (
+      <Space size="small">
+        <Tooltip title="测试连接">
+          <Button icon={<ThunderboltOutlined />} onClick={() => void handleTest(record.id)} size="small" type="link" />
+        </Tooltip>
+        <Button icon={<EditOutlined />} onClick={() => onEdit(record)} size="small" type="link">
+          编辑
+        </Button>
+        {record.enabled ? (
+          <Popconfirm onConfirm={() => void handleDisable(record.id)} title="确认禁用此供应商？">
+            <Button color="orange" icon={<StopOutlined />} size="small" variant="link">
+              禁用
+            </Button>
+          </Popconfirm>
+        ) : (
+          <Button icon={<CheckCircleOutlined />} onClick={() => void handleEnable(record.id)} size="small" type="link">
+            启用
+          </Button>
+        )}
+        <Popconfirm
+          description="该供应商下存在模型时无法删除。"
+          onConfirm={() => void handleDelete(record.id)}
+          title="确认删除此供应商？"
+        >
+          <Button danger icon={<DeleteOutlined />} size="small" type="link">
+            删除
+          </Button>
+        </Popconfirm>
+      </Space>
+    ),
+    title: "操作",
+    width: 280,
+  };
+
+  return (
+    <Table
+      columns={[...COLUMNS, operationColumn]}
+      dataSource={data?.items ?? []}
+      loading={loading}
+      pagination={{
+        current: page,
+        hideOnSinglePage: false,
+        onChange: onPageChange,
+        pageSize,
+        showSizeChanger: true,
+        total: data?.total ?? 0,
+      }}
+      rowKey="id"
+      scroll={{ x: 900 }}
+    />
+  );
+}
+
+function formatDatetime(dateStr: string): string {
+  const d = new Date(dateStr);
+  const pad = (n: number) => String(n).padStart(2, "0");
+  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`;
+}

src/web/pages/models/components/ProviderToolbar.tsx

@@ -0,0 +1,34 @@
+import { PlusOutlined } from "@ant-design/icons";
+import { Button, Flex, Input } from "antd";
+import { useState } from "react";
+
+interface ProviderToolbarProps {
+  keyword: string;
+  onSearch: (value: string) => void;
+  onSearchClear: () => void;
+  openCreateDialog: () => void;
+}
+
+export function ProviderToolbar({ keyword, onSearch, onSearchClear, openCreateDialog }: ProviderToolbarProps) {
+  const [draftKeyword, setDraftKeyword] = useState(keyword);
+
+  return (
+    <Flex align="center" gap="small" justify="space-between" wrap="wrap">
+      <Input.Search
+        allowClear
+        enterButton="搜索"
+        onChange={(event) => setDraftKeyword(event.target.value)}
+        onClear={() => {
+          setDraftKeyword("");
+          onSearchClear();
+        }}
+        onSearch={(value) => onSearch(value)}
+        placeholder="搜索供应商名称"
+        value={draftKeyword}
+      />
+      <Button icon={<PlusOutlined />} onClick={openCreateDialog} type="primary">
+        新建供应商
+      </Button>
+    </Flex>
+  );
+}

src/web/pages/models/index.tsx

@@ -0,0 +1,186 @@
+import { Flex, Tabs } from "antd";
+import { useState } from "react";
+
+import type { Model, Provider } from "../../../shared/api";
+
+import {
+  useCreateModel,
+  useDeleteModel,
+  useDisableModel,
+  useEnableModel,
+  useModelList,
+  useUpdateModel,
+} from "../../hooks/use-models";
+import {
+  useCreateProvider,
+  useDeleteProvider,
+  useDisableProvider,
+  useEnableProvider,
+  useProviderList,
+  useTestProviderConnection,
+  useUpdateProvider,
+} from "../../hooks/use-providers";
+import { ModelFormModal } from "./components/ModelFormModal";
+import { ModelTable } from "./components/ModelTable";
+import { ModelToolbar } from "./components/ModelToolbar";
+import { ProviderFormModal } from "./components/ProviderFormModal";
+import { ProviderTable } from "./components/ProviderTable";
+import { ProviderToolbar } from "./components/ProviderToolbar";
+
+export function ModelsPage() {
+  const [activeTab, setActiveTab] = useState<string>("providers");
+
+  const [providerPage, setProviderPage] = useState(1);
+  const [providerPageSize, setProviderPageSize] = useState(20);
+  const [providerKeyword, setProviderKeyword] = useState("");
+  const [providerDialogOpen, setProviderDialogOpen] = useState(false);
+  const [editingProvider, setEditingProvider] = useState<null | Provider>(null);
+
+  const [modelPage, setModelPage] = useState(1);
+  const [modelPageSize, setModelPageSize] = useState(20);
+  const [modelKeyword, setModelKeyword] = useState("");
+  const [modelDialogOpen, setModelDialogOpen] = useState(false);
+  const [editingModel, setEditingModel] = useState<Model | null>(null);
+
+  const { data: providerData, isLoading: providerLoading } = useProviderList({
+    keyword: providerKeyword || undefined,
+    page: providerPage,
+    pageSize: providerPageSize,
+  });
+
+  const { data: modelData, isLoading: modelLoading } = useModelList({
+    keyword: modelKeyword || undefined,
+    page: modelPage,
+    pageSize: modelPageSize,
+  });
+
+  const createProviderMutation = useCreateProvider();
+  const updateProviderMutation = useUpdateProvider();
+  const deleteProviderMutation = useDeleteProvider();
+  const enableProviderMutation = useEnableProvider();
+  const disableProviderMutation = useDisableProvider();
+  const testProviderMutation = useTestProviderConnection();
+
+  const createModelMutation = useCreateModel();
+  const updateModelMutation = useUpdateModel();
+  const deleteModelMutation = useDeleteModel();
+  const enableModelMutation = useEnableModel();
+  const disableModelMutation = useDisableModel();
+
+  const isProviderSubmitting = createProviderMutation.isPending || updateProviderMutation.isPending;
+  const isProviderActionPending =
+    deleteProviderMutation.isPending || enableProviderMutation.isPending || disableProviderMutation.isPending;
+
+  const isModelSubmitting = createModelMutation.isPending || updateModelMutation.isPending;
+  const isModelActionPending =
+    deleteModelMutation.isPending || enableModelMutation.isPending || disableModelMutation.isPending;
+
+  return (
+    <Flex flex={1} gap="var(--ant-margin-lg)" vertical>
+      <Tabs
+        activeKey={activeTab}
+        items={[
+          { key: "providers", label: "供应商" },
+          { key: "models", label: "模型" },
+        ]}
+        onChange={(key) => setActiveTab(key)}
+      />
+
+      {activeTab === "providers" && (
+        <>
+          <ProviderToolbar
+            keyword={providerKeyword}
+            onSearch={(value) => {
+              setProviderKeyword(value);
+              setProviderPage(1);
+            }}
+            onSearchClear={() => {
+              setProviderKeyword("");
+              setProviderPage(1);
+            }}
+            openCreateDialog={() => {
+              setEditingProvider(null);
+              setProviderDialogOpen(true);
+            }}
+          />
+          <ProviderTable
+            data={providerData}
+            loading={providerLoading || isProviderActionPending}
+            onDelete={(id) => deleteProviderMutation.mutateAsync(id)}
+            onDisable={(id) => disableProviderMutation.mutateAsync(id)}
+            onEdit={(provider) => {
+              setEditingProvider(provider);
+              setProviderDialogOpen(true);
+            }}
+            onEnable={(id) => enableProviderMutation.mutateAsync(id)}
+            onPageChange={(p, ps) => {
+              setProviderPage(p);
+              setProviderPageSize(ps);
+            }}
+            onTest={(id) => testProviderMutation.mutateAsync(id)}
+            page={providerPage}
+            pageSize={providerPageSize}
+          />
+          <ProviderFormModal
+            editingProvider={editingProvider}
+            onCancel={() => setProviderDialogOpen(false)}
+            onCreate={(data) => createProviderMutation.mutateAsync(data)}
+            onOpenChange={setProviderDialogOpen}
+            onUpdate={(args) => updateProviderMutation.mutateAsync(args)}
+            open={providerDialogOpen}
+            submitting={isProviderSubmitting}
+          />
+        </>
+      )}
+
+      {activeTab === "models" && (
+        <>
+          <ModelToolbar
+            keyword={modelKeyword}
+            onSearch={(value) => {
+              setModelKeyword(value);
+              setModelPage(1);
+            }}
+            onSearchClear={() => {
+              setModelKeyword("");
+              setModelPage(1);
+            }}
+            openCreateDialog={() => {
+              setEditingModel(null);
+              setModelDialogOpen(true);
+            }}
+          />
+          <ModelTable
+            data={modelData}
+            loading={modelLoading || isModelActionPending}
+            onDelete={(id) => deleteModelMutation.mutateAsync(id)}
+            onDisable={(id) => disableModelMutation.mutateAsync(id)}
+            onEdit={(model) => {
+              setEditingModel(model);
+              setModelDialogOpen(true);
+            }}
+            onEnable={(id) => enableModelMutation.mutateAsync(id)}
+            onPageChange={(p, ps) => {
+              setModelPage(p);
+              setModelPageSize(ps);
+            }}
+            page={modelPage}
+            pageSize={modelPageSize}
+            providers={providerData?.items ?? []}
+          />
+          <ModelFormModal
+            editingModel={editingModel}
+            onCancel={() => setModelDialogOpen(false)}
+            onCreate={(data) => createModelMutation.mutateAsync(data)}
+            onOpenChange={setModelDialogOpen}
+            onUpdate={(args) => updateModelMutation.mutateAsync(args)}
+            open={modelDialogOpen}
+            providers={providerData?.items ?? []}
+            submitting={isModelSubmitting}
+            testConnection={editingModel ? (id: string) => testProviderMutation.mutateAsync(id) : undefined}
+          />
+        </>
+      )}
+    </Flex>
+  );
+}

src/web/routes.tsx

@@ -4,6 +4,7 @@ import { AdminConsoleLayout } from "./consoles/admin/AdminConsoleLayout";
 import { WorkbenchProjectGate } from "./consoles/workbench/WorkbenchProjectGate";
 import { NotFoundPage } from "./pages/404";
 import { DashboardPage } from "./pages/dashboard";
+import { ModelsPage } from "./pages/models";
 import { ProjectsPage } from "./pages/projects";
 import { WorkbenchOverviewPage } from "./pages/workbench";
 
@@ -13,6 +14,7 @@ export function AppRoutes() {
       <Route element={<AdminConsoleLayout />}>
         <Route element={<DashboardPage />} path="/" />
         <Route element={<ProjectsPage />} path="/projects" />
+        <Route element={<ModelsPage />} path="/models" />
       </Route>
       <Route element={<WorkbenchProjectGate />} path="/workbench/:projectId">
         <Route element={<WorkbenchOverviewPage />} path="" />