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
2026-05-29 12:40:10 +08:00
parent 2ea4bd4410
commit 933c2133f0
56 changed files with 4706 additions and 9 deletions
--- a/src/server/ai/registry.ts
+++ b/src/server/ai/registry.ts
@@ -0,0 +1,74 @@
+import type Database from "bun:sqlite";
+
+import { createAnthropic } from "@ai-sdk/anthropic";
+import { createOpenAI } from "@ai-sdk/openai";
+import { createOpenAICompatible } from "@ai-sdk/openai-compatible";
+import { createProviderRegistry, generateText } from "ai";
+
+import type { AIProviderConfig } from "./types";
+
+export function buildProviderRegistry(db: Database) {
+  const enabledProviders = getEnabledProviders(db);
+
+  const providerEntries: Record<string, ReturnType<typeof createProvider>> = {};
+  for (const p of enabledProviders) {
+    providerEntries[p.id] = createProvider({
+      apiKey: p.api_key,
+      baseUrl: p.base_url,
+      name: p.name,
+      type: p.type,
+    });
+  }
+
+  return createProviderRegistry(providerEntries);
+}
+
+export async function testProviderConnection(config: AIProviderConfig): Promise<{ message: string; ok: boolean }> {
+  try {
+    const provider = createProvider(config);
+    const model = provider.languageModel("test");
+
+    await generateText({
+      maxOutputTokens: 1,
+      model,
+      prompt: "Hi",
+    });
+
+    return { message: "连接成功", ok: true };
+  } catch (e: unknown) {
+    const msg = e instanceof Error ? e.message : String(e);
+    return { message: `连接失败: ${msg}`, ok: false };
+  }
+}
+
+function createProvider(config: AIProviderConfig) {
+  switch (config.type) {
+    case "anthropic":
+      return createAnthropic({ apiKey: config.apiKey, baseURL: config.baseUrl });
+    case "openai":
+      return createOpenAI({ apiKey: config.apiKey, baseURL: config.baseUrl });
+    case "openai-compatible":
+      return createOpenAICompatible({
+        apiKey: config.apiKey,
+        baseURL: config.baseUrl,
+        name: config.name,
+      });
+  }
+}
+
+function getEnabledProviders(db: Database): Array<{
+  api_key: string;
+  base_url: string;
+  id: string;
+  name: string;
+  type: "anthropic" | "openai" | "openai-compatible";
+}> {
+  const stmt = db.prepare("SELECT id, name, type, base_url, api_key FROM providers WHERE enabled = 1");
+  return stmt.all() as Array<{
+    api_key: string;
+    base_url: string;
+    id: string;
+    name: string;
+    type: "anthropic" | "openai" | "openai-compatible";
+  }>;
+}
--- a/src/server/ai/types.ts
+++ b/src/server/ai/types.ts
@@ -0,0 +1,21 @@
+import type { ModelCapability, ProviderType } from "../../shared/api";
+
+export type { ModelCapability, ProviderType };
+
+export interface AIModelConfig {
+  capabilities: ModelCapability[];
+  modelId: string;
+  providerId: string;
+}
+
+export interface AIProviderConfig {
+  apiKey: string;
+  baseUrl: string;
+  name: string;
+  type: ProviderType;
+}
+
+export interface AIRegistryConfig {
+  models: AIModelConfig[];
+  providers: AIProviderConfig[];
+}
--- a/src/server/db/models.ts
+++ b/src/server/db/models.ts
@@ -0,0 +1,237 @@
+import type Database from "bun:sqlite";
+
+import { and, desc, eq, like, or, sql } from "drizzle-orm";
+import { drizzle } from "drizzle-orm/bun-sqlite";
+
+import type { CreateModelRequest, Model, ModelCapability, UpdateModelRequest } from "../../shared/api";
+
+import { models, providers } from "./schema";
+
+export function createModel(
+  raw: Database,
+  request: CreateModelRequest,
+): { error: string; status: number } | { model: Model } {
+  const db = wrap(raw);
+
+  const provider = db.select().from(providers).where(eq(providers.id, request.providerId)).get();
+  if (!provider) return { error: "供应商不存在", status: 400 };
+
+  const name = request.name.trim();
+  if (!name) return { error: "模型名称不能为空", status: 400 };
+
+  const modelId = request.modelId.trim();
+  if (!modelId) return { error: "模型 ID 不能为空", status: 400 };
+
+  const capabilities = request.capabilities;
+  if (!capabilities || capabilities.length === 0) {
+    return { error: "至少选择一个能力标签", status: 400 };
+  }
+
+  const id = crypto.randomUUID();
+  const now = new Date().toISOString();
+
+  try {
+    db.insert(models)
+      .values({
+        capabilities: JSON.stringify(capabilities),
+        contextLength: request.contextLength ?? null,
+        createdAt: now,
+        enabled: true,
+        id,
+        maxOutputTokens: request.maxOutputTokens ?? null,
+        modelId,
+        name,
+        providerId: request.providerId,
+        updatedAt: now,
+      })
+      .run();
+  } catch (e: unknown) {
+    const msg = e instanceof Error ? e.message : String(e);
+    if (msg.includes("UNIQUE constraint")) {
+      return { error: "该供应商下模型 ID 已存在", status: 409 };
+    }
+    throw e;
+  }
+
+  const row = db.select().from(models).where(eq(models.id, id)).get();
+  return { model: toModel(row!) };
+}
+
+export function deleteModel(raw: Database, id: string): { error: string; status: number } | { success: true } {
+  const db = wrap(raw);
+  const existing = db.select().from(models).where(eq(models.id, id)).get();
+  if (!existing) return { error: "模型不存在", status: 404 };
+
+  db.delete(models).where(eq(models.id, id)).run();
+  return { success: true };
+}
+
+export function disableModel(raw: Database, id: string): { error: string; status: number } | { model: Model } {
+  const db = wrap(raw);
+  const existing = db.select().from(models).where(eq(models.id, id)).get();
+  if (!existing) return { error: "模型不存在", status: 404 };
+  if (!existing.enabled) return { error: "模型已禁用", status: 409 };
+
+  const now = new Date().toISOString();
+  db.update(models).set({ enabled: false, updatedAt: now }).where(eq(models.id, id)).run();
+
+  const updated = db.select().from(models).where(eq(models.id, id)).get();
+  return { model: toModel(updated!) };
+}
+
+export function enableModel(raw: Database, id: string): { error: string; status: number } | { model: Model } {
+  const db = wrap(raw);
+  const existing = db.select().from(models).where(eq(models.id, id)).get();
+  if (!existing) return { error: "模型不存在", status: 404 };
+  if (existing.enabled) return { error: "模型已启用", status: 409 };
+
+  const now = new Date().toISOString();
+  db.update(models).set({ enabled: true, updatedAt: now }).where(eq(models.id, id)).run();
+
+  const updated = db.select().from(models).where(eq(models.id, id)).get();
+  return { model: toModel(updated!) };
+}
+
+export function getModel(raw: Database, id: string): { error: string; status: number } | { model: Model } {
+  const db = wrap(raw);
+  const row = db.select().from(models).where(eq(models.id, id)).get();
+
+  if (!row) return { error: "模型不存在", status: 404 };
+  return { model: toModel(row) };
+}
+
+export function getModelsByProviderId(raw: Database, providerId: string): number {
+  const db = wrap(raw);
+  const result = db
+    .select({ count: sql<number>`count(*)` })
+    .from(models)
+    .where(eq(models.providerId, providerId))
+    .get();
+  return Number(result?.count ?? 0);
+}
+
+export function listModels(
+  raw: Database,
+  options: { keyword?: string; page: number; pageSize: number; providerId?: string },
+): { items: Model[]; page: number; pageSize: number; total: number } {
+  const db = wrap(raw);
+  const conditions = [];
+
+  if (options.providerId) {
+    conditions.push(eq(models.providerId, options.providerId));
+  }
+
+  if (options.keyword) {
+    const pattern = `%${options.keyword}%`;
+    conditions.push(or(like(models.name, pattern), like(models.modelId, pattern))!);
+  }
+
+  const where = conditions.length > 0 ? and(...conditions) : undefined;
+
+  const countResult = db
+    .select({ count: sql<number>`count(*)` })
+    .from(models)
+    .where(where)
+    .get();
+
+  const total = Number(countResult?.count ?? 0);
+
+  const rows = db
+    .select()
+    .from(models)
+    .where(where)
+    .orderBy(desc(models.createdAt))
+    .limit(options.pageSize)
+    .offset((options.page - 1) * options.pageSize)
+    .all();
+
+  return {
+    items: rows.map(toModel),
+    page: options.page,
+    pageSize: options.pageSize,
+    total,
+  };
+}
+
+export function updateModel(
+  raw: Database,
+  id: string,
+  request: UpdateModelRequest,
+): { error: string; status: number } | { model: Model } {
+  const db = wrap(raw);
+  const existing = db.select().from(models).where(eq(models.id, id)).get();
+  if (!existing) return { error: "模型不存在", status: 404 };
+
+  const updates: Partial<typeof models.$inferInsert> = {
+    updatedAt: new Date().toISOString(),
+  };
+
+  const name = request.name?.trim();
+  if (name === "") return { error: "模型名称不能为空", status: 400 };
+  if (name !== undefined && name !== existing.name) {
+    updates.name = name;
+  }
+
+  const modelId = request.modelId?.trim();
+  if (modelId === "") return { error: "模型 ID 不能为空", status: 400 };
+  if (modelId !== undefined) {
+    updates.modelId = modelId;
+  }
+
+  if (request.providerId !== undefined) {
+    const provider = db.select().from(providers).where(eq(providers.id, request.providerId)).get();
+    if (!provider) return { error: "供应商不存在", status: 400 };
+    updates.providerId = request.providerId;
+  }
+
+  if (request.capabilities !== undefined) {
+    if (request.capabilities.length === 0) {
+      return { error: "至少选择一个能力标签", status: 400 };
+    }
+    updates.capabilities = JSON.stringify(request.capabilities);
+  }
+
+  if (request.contextLength !== undefined) {
+    updates.contextLength = request.contextLength;
+  }
+
+  if (request.maxOutputTokens !== undefined) {
+    updates.maxOutputTokens = request.maxOutputTokens;
+  }
+
+  if (Object.keys(updates).length === 1 && updates.updatedAt) {
+    return { model: toModel(existing) };
+  }
+
+  try {
+    db.update(models).set(updates).where(eq(models.id, id)).run();
+  } catch (e: unknown) {
+    const msg = e instanceof Error ? e.message : String(e);
+    if (msg.includes("UNIQUE constraint")) {
+      return { error: "该供应商下模型 ID 已存在", status: 409 };
+    }
+    throw e;
+  }
+
+  const updated = db.select().from(models).where(eq(models.id, id)).get();
+  return { model: toModel(updated!) };
+}
+
+function toModel(row: typeof models.$inferSelect): Model {
+  return {
+    capabilities: JSON.parse(row.capabilities) as ModelCapability[],
+    contextLength: row.contextLength,
+    createdAt: row.createdAt,
+    enabled: row.enabled,
+    id: row.id,
+    maxOutputTokens: row.maxOutputTokens,
+    modelId: row.modelId,
+    name: row.name,
+    providerId: row.providerId,
+    updatedAt: row.updatedAt,
+  };
+}
+
+function wrap(raw: Database) {
+  return drizzle(raw);
+}
--- a/src/server/db/providers.ts
+++ b/src/server/db/providers.ts
@@ -0,0 +1,202 @@
+import type Database from "bun:sqlite";
+
+import { and, desc, eq, like, sql } from "drizzle-orm";
+import { drizzle } from "drizzle-orm/bun-sqlite";
+
+import type { CreateProviderRequest, Provider, UpdateProviderRequest } from "../../shared/api";
+
+import { providers } from "./schema";
+
+export function createProvider(
+  raw: Database,
+  request: CreateProviderRequest,
+): { error: string; status: number } | { provider: Provider } {
+  const db = wrap(raw);
+  const name = request.name.trim();
+  if (!name) return { error: "供应商名称不能为空", status: 400 };
+
+  const baseUrl = request.baseUrl.trim();
+  if (!baseUrl) return { error: "Base URL 不能为空", status: 400 };
+
+  const apiKey = request.apiKey.trim();
+  if (!apiKey) return { error: "API Key 不能为空", status: 400 };
+
+  const id = crypto.randomUUID();
+  const now = new Date().toISOString();
+
+  try {
+    db.insert(providers)
+      .values({
+        apiKey,
+        baseUrl,
+        createdAt: now,
+        enabled: true,
+        id,
+        name,
+        type: request.type,
+        updatedAt: now,
+      })
+      .run();
+  } catch (e: unknown) {
+    const msg = e instanceof Error ? e.message : String(e);
+    if (msg.includes("UNIQUE constraint")) {
+      return { error: "供应商名称已存在", status: 409 };
+    }
+    throw e;
+  }
+
+  const row = db.select().from(providers).where(eq(providers.id, id)).get();
+  return { provider: toProvider(row!) };
+}
+
+export function deleteProvider(raw: Database, id: string): { error: string; status: number } | { success: true } {
+  const db = wrap(raw);
+  const existing = db.select().from(providers).where(eq(providers.id, id)).get();
+  if (!existing) return { error: "供应商不存在", status: 404 };
+
+  db.delete(providers).where(eq(providers.id, id)).run();
+  return { success: true };
+}
+
+export function disableProvider(raw: Database, id: string): { error: string; status: number } | { provider: Provider } {
+  const db = wrap(raw);
+  const existing = db.select().from(providers).where(eq(providers.id, id)).get();
+  if (!existing) return { error: "供应商不存在", status: 404 };
+  if (!existing.enabled) return { error: "供应商已禁用", status: 409 };
+
+  const now = new Date().toISOString();
+  db.update(providers).set({ enabled: false, updatedAt: now }).where(eq(providers.id, id)).run();
+
+  const updated = db.select().from(providers).where(eq(providers.id, id)).get();
+  return { provider: toProvider(updated!) };
+}
+
+export function enableProvider(raw: Database, id: string): { error: string; status: number } | { provider: Provider } {
+  const db = wrap(raw);
+  const existing = db.select().from(providers).where(eq(providers.id, id)).get();
+  if (!existing) return { error: "供应商不存在", status: 404 };
+  if (existing.enabled) return { error: "供应商已启用", status: 409 };
+
+  const now = new Date().toISOString();
+  db.update(providers).set({ enabled: true, updatedAt: now }).where(eq(providers.id, id)).run();
+
+  const updated = db.select().from(providers).where(eq(providers.id, id)).get();
+  return { provider: toProvider(updated!) };
+}
+
+export function getProvider(raw: Database, id: string): { error: string; status: number } | { provider: Provider } {
+  const db = wrap(raw);
+  const row = db.select().from(providers).where(eq(providers.id, id)).get();
+
+  if (!row) return { error: "供应商不存在", status: 404 };
+  return { provider: toProvider(row) };
+}
+
+export function listProviders(
+  raw: Database,
+  options: { keyword?: string; page: number; pageSize: number },
+): { items: Provider[]; page: number; pageSize: number; total: number } {
+  const db = wrap(raw);
+  const conditions = [];
+
+  if (options.keyword) {
+    const pattern = `%${options.keyword}%`;
+    conditions.push(like(providers.name, pattern));
+  }
+
+  const where = conditions.length > 0 ? and(...conditions) : undefined;
+
+  const countResult = db
+    .select({ count: sql<number>`count(*)` })
+    .from(providers)
+    .where(where)
+    .get();
+
+  const total = Number(countResult?.count ?? 0);
+
+  const rows = db
+    .select()
+    .from(providers)
+    .where(where)
+    .orderBy(desc(providers.createdAt))
+    .limit(options.pageSize)
+    .offset((options.page - 1) * options.pageSize)
+    .all();
+
+  return {
+    items: rows.map(toProvider),
+    page: options.page,
+    pageSize: options.pageSize,
+    total,
+  };
+}
+
+export function updateProvider(
+  raw: Database,
+  id: string,
+  request: UpdateProviderRequest,
+): { error: string; status: number } | { provider: Provider } {
+  const db = wrap(raw);
+  const existing = db.select().from(providers).where(eq(providers.id, id)).get();
+  if (!existing) return { error: "供应商不存在", status: 404 };
+
+  const updates: Partial<typeof providers.$inferInsert> = {
+    updatedAt: new Date().toISOString(),
+  };
+
+  const name = request.name?.trim();
+  if (name === "") return { error: "供应商名称不能为空", status: 400 };
+  if (name !== undefined && name !== existing.name) {
+    updates.name = name;
+  }
+
+  const baseUrl = request.baseUrl?.trim();
+  if (baseUrl === "") return { error: "Base URL 不能为空", status: 400 };
+  if (baseUrl !== undefined) {
+    updates.baseUrl = baseUrl;
+  }
+
+  const apiKey = request.apiKey?.trim();
+  if (apiKey === "") return { error: "API Key 不能为空", status: 400 };
+  if (apiKey !== undefined) {
+    updates.apiKey = apiKey;
+  }
+
+  if (request.type !== undefined) {
+    updates.type = request.type;
+  }
+
+  if (Object.keys(updates).length === 1 && updates.updatedAt) {
+    return { provider: toProvider(existing) };
+  }
+
+  try {
+    db.update(providers).set(updates).where(eq(providers.id, id)).run();
+  } catch (e: unknown) {
+    const msg = e instanceof Error ? e.message : String(e);
+    if (msg.includes("UNIQUE constraint")) {
+      return { error: "供应商名称已存在", status: 409 };
+    }
+    throw e;
+  }
+
+  const updated = db.select().from(providers).where(eq(providers.id, id)).get();
+  return { provider: toProvider(updated!) };
+}
+
+function toProvider(row: typeof providers.$inferSelect): Provider {
+  return {
+    apiKey: row.apiKey,
+    baseUrl: row.baseUrl,
+    createdAt: row.createdAt,
+    enabled: row.enabled,
+    id: row.id,
+    name: row.name,
+    type: row.type,
+    updatedAt: row.updatedAt,
+  };
+}
+
+function wrap(raw: Database) {
+  return drizzle(raw);
+}
--- a/src/server/db/schema.ts
+++ b/src/server/db/schema.ts
@@ -1,4 +1,4 @@
-import { sqliteTable, text } from "drizzle-orm/sqlite-core";
+import { index, integer, sqliteTable, text, uniqueIndex } from "drizzle-orm/sqlite-core";

 export const projects = sqliteTable("projects", {
  archivedAt: text("archived_at"),
@@ -12,6 +12,41 @@ export const projects = sqliteTable("projects", {
  updatedAt: text("updated_at").notNull(),
 });

+export const providers = sqliteTable("providers", {
+  apiKey: text("api_key").notNull(),
+  baseUrl: text("base_url").notNull(),
+  createdAt: text("created_at").notNull(),
+  enabled: integer("enabled", { mode: "boolean" }).notNull().default(true),
+  id: text("id").primaryKey(),
+  name: text("name").notNull().unique(),
+  type: text("type", { enum: ["anthropic", "openai", "openai-compatible"] })
+    .notNull()
+    .default("openai-compatible"),
+  updatedAt: text("updated_at").notNull(),
+});
+
+export const models = sqliteTable(
+  "models",
+  {
+    capabilities: text("capabilities").notNull(),
+    contextLength: integer("context_length"),
+    createdAt: text("created_at").notNull(),
+    enabled: integer("enabled", { mode: "boolean" }).notNull().default(true),
+    id: text("id").primaryKey(),
+    maxOutputTokens: integer("max_output_tokens"),
+    modelId: text("model_id").notNull(),
+    name: text("name").notNull(),
+    providerId: text("provider_id")
+      .notNull()
+      .references(() => providers.id),
+    updatedAt: text("updated_at").notNull(),
+  },
+  (table) => [
+    uniqueIndex("models_provider_id_model_id_unique").on(table.providerId, table.modelId),
+    index("models_provider_id_idx").on(table.providerId),
+  ],
+);
+
 export const schemaMigrations = sqliteTable("schema_migrations", {
  appliedAt: text("applied_at").notNull(),
  checksum: text("checksum").notNull(),
--- a/src/server/routes/models/create.ts
+++ b/src/server/routes/models/create.ts
@@ -0,0 +1,47 @@
+import type Database from "bun:sqlite";
+
+import type { CreateModelRequest, RuntimeMode } from "../../../shared/api";
+
+import { MODEL_CAPABILITIES } from "../../../shared/api";
+import { createModel } from "../../db/models";
+import { createApiError, jsonResponse } from "../../helpers";
+
+export async function handleCreateModel(req: Request, db: Database, mode: RuntimeMode): Promise<Response> {
+  let body: CreateModelRequest;
+  try {
+    body = (await req.json()) as CreateModelRequest;
+  } catch {
+    return jsonResponse(createApiError("Invalid JSON body", 400), { mode, status: 400 });
+  }
+
+  if (!body.name || typeof body.name !== "string") {
+    return jsonResponse(createApiError("name is required", 400), { mode, status: 400 });
+  }
+
+  if (!body.modelId || typeof body.modelId !== "string") {
+    return jsonResponse(createApiError("modelId is required", 400), { mode, status: 400 });
+  }
+
+  if (!body.providerId || typeof body.providerId !== "string") {
+    return jsonResponse(createApiError("providerId is required", 400), { mode, status: 400 });
+  }
+
+  if (!Array.isArray(body.capabilities) || body.capabilities.length === 0) {
+    return jsonResponse(createApiError("capabilities is required and must be a non-empty array", 400), {
+      mode,
+      status: 400,
+    });
+  }
+
+  const invalidCaps = body.capabilities.filter((c) => !MODEL_CAPABILITIES.includes(c));
+  if (invalidCaps.length > 0) {
+    return jsonResponse(createApiError(`Invalid capabilities: ${invalidCaps.join(", ")}`, 400), { mode, status: 400 });
+  }
+
+  const result = createModel(db, body);
+  if ("error" in result) {
+    return jsonResponse(createApiError(result.error, result.status), { mode, status: result.status });
+  }
+
+  return jsonResponse(result, { mode, status: 201 });
+}
--- a/src/server/routes/models/delete.ts
+++ b/src/server/routes/models/delete.ts
@@ -0,0 +1,22 @@
+import type Database from "bun:sqlite";
+
+import type { RuntimeMode } from "../../../shared/api";
+
+import { deleteModel } from "../../db/models";
+import { createApiError, jsonResponse } from "../../helpers";
+import { validateIdParam } from "../../middleware";
+
+export function handleDeleteModel(req: Request, db: Database, mode: RuntimeMode): Response {
+  const url = new URL(req.url);
+  const idStr = url.pathname.split("/")[3];
+
+  const validated = validateIdParam(idStr ?? "", mode);
+  if (validated instanceof Response) return validated;
+
+  const result = deleteModel(db, validated.id);
+  if ("error" in result) {
+    return jsonResponse(createApiError(result.error, result.status), { mode, status: result.status });
+  }
+
+  return new Response(null, { status: 204 });
+}
--- a/src/server/routes/models/disable.ts
+++ b/src/server/routes/models/disable.ts
@@ -0,0 +1,22 @@
+import type Database from "bun:sqlite";
+
+import type { RuntimeMode } from "../../../shared/api";
+
+import { disableModel } from "../../db/models";
+import { createApiError, jsonResponse } from "../../helpers";
+import { validateIdParam } from "../../middleware";
+
+export function handleDisableModel(req: Request, db: Database, mode: RuntimeMode): Response {
+  const url = new URL(req.url);
+  const idStr = url.pathname.split("/")[3];
+
+  const validated = validateIdParam(idStr ?? "", mode);
+  if (validated instanceof Response) return validated;
+
+  const result = disableModel(db, validated.id);
+  if ("error" in result) {
+    return jsonResponse(createApiError(result.error, result.status), { mode, status: result.status });
+  }
+
+  return jsonResponse(result, { mode });
+}
--- a/src/server/routes/models/enable.ts
+++ b/src/server/routes/models/enable.ts
@@ -0,0 +1,22 @@
+import type Database from "bun:sqlite";
+
+import type { RuntimeMode } from "../../../shared/api";
+
+import { enableModel } from "../../db/models";
+import { createApiError, jsonResponse } from "../../helpers";
+import { validateIdParam } from "../../middleware";
+
+export function handleEnableModel(req: Request, db: Database, mode: RuntimeMode): Response {
+  const url = new URL(req.url);
+  const idStr = url.pathname.split("/")[3];
+
+  const validated = validateIdParam(idStr ?? "", mode);
+  if (validated instanceof Response) return validated;
+
+  const result = enableModel(db, validated.id);
+  if ("error" in result) {
+    return jsonResponse(createApiError(result.error, result.status), { mode, status: result.status });
+  }
+
+  return jsonResponse(result, { mode });
+}
--- a/src/server/routes/models/get.ts
+++ b/src/server/routes/models/get.ts
@@ -0,0 +1,22 @@
+import type Database from "bun:sqlite";
+
+import type { RuntimeMode } from "../../../shared/api";
+
+import { getModel } from "../../db/models";
+import { createApiError, jsonResponse } from "../../helpers";
+import { validateIdParam } from "../../middleware";
+
+export function handleGetModel(req: Request, db: Database, mode: RuntimeMode): Response {
+  const url = new URL(req.url);
+  const idStr = url.pathname.split("/")[3];
+
+  const validated = validateIdParam(idStr ?? "", mode);
+  if (validated instanceof Response) return validated;
+
+  const result = getModel(db, validated.id);
+  if ("error" in result) {
+    return jsonResponse(createApiError(result.error, result.status), { mode, status: result.status });
+  }
+
+  return jsonResponse(result, { mode });
+}
--- a/src/server/routes/models/list.ts
+++ b/src/server/routes/models/list.ts
@@ -0,0 +1,27 @@
+import type Database from "bun:sqlite";
+
+import type { RuntimeMode } from "../../../shared/api";
+
+import { listModels } from "../../db/models";
+import { jsonResponse } from "../../helpers";
+import { validatePagination } from "../../middleware";
+
+export function handleListModels(req: Request, db: Database, mode: RuntimeMode): Response {
+  const url = new URL(req.url);
+  const pageParam = url.searchParams.get("page");
+  const pageSizeParam = url.searchParams.get("pageSize");
+  const keyword = url.searchParams.get("keyword");
+  const providerId = url.searchParams.get("providerId");
+
+  const pagination = validatePagination(pageParam, pageSizeParam, mode);
+  if (pagination instanceof Response) return pagination;
+
+  const result = listModels(db, {
+    keyword: keyword ?? undefined,
+    page: pagination.page,
+    pageSize: pagination.pageSize,
+    providerId: providerId ?? undefined,
+  });
+
+  return jsonResponse(result, { mode });
+}
--- a/src/server/routes/models/update.ts
+++ b/src/server/routes/models/update.ts
@@ -0,0 +1,43 @@
+import type Database from "bun:sqlite";
+
+import type { RuntimeMode, UpdateModelRequest } from "../../../shared/api";
+
+import { MODEL_CAPABILITIES } from "../../../shared/api";
+import { updateModel } from "../../db/models";
+import { createApiError, jsonResponse } from "../../helpers";
+import { validateIdParam } from "../../middleware";
+
+export async function handleUpdateModel(req: Request, db: Database, mode: RuntimeMode): Promise<Response> {
+  const url = new URL(req.url);
+  const idStr = url.pathname.split("/")[3];
+
+  const validated = validateIdParam(idStr ?? "", mode);
+  if (validated instanceof Response) return validated;
+
+  let body: UpdateModelRequest;
+  try {
+    body = (await req.json()) as UpdateModelRequest;
+  } catch {
+    return jsonResponse(createApiError("Invalid JSON body", 400), { mode, status: 400 });
+  }
+
+  if (body.capabilities !== undefined) {
+    if (!Array.isArray(body.capabilities) || body.capabilities.length === 0) {
+      return jsonResponse(createApiError("capabilities must be a non-empty array", 400), { mode, status: 400 });
+    }
+    const invalidCaps = body.capabilities.filter((c) => !MODEL_CAPABILITIES.includes(c));
+    if (invalidCaps.length > 0) {
+      return jsonResponse(createApiError(`Invalid capabilities: ${invalidCaps.join(", ")}`, 400), {
+        mode,
+        status: 400,
+      });
+    }
+  }
+
+  const result = updateModel(db, validated.id, body);
+  if ("error" in result) {
+    return jsonResponse(createApiError(result.error, result.status), { mode, status: result.status });
+  }
+
+  return jsonResponse(result, { mode });
+}
--- a/src/server/routes/providers/create.ts
+++ b/src/server/routes/providers/create.ts
@@ -0,0 +1,41 @@
+import type Database from "bun:sqlite";
+
+import type { CreateProviderRequest, RuntimeMode } from "../../../shared/api";
+
+import { createProvider } from "../../db/providers";
+import { createApiError, jsonResponse } from "../../helpers";
+
+export async function handleCreateProvider(req: Request, db: Database, mode: RuntimeMode): Promise<Response> {
+  let body: CreateProviderRequest;
+  try {
+    body = (await req.json()) as CreateProviderRequest;
+  } catch {
+    return jsonResponse(createApiError("Invalid JSON body", 400), { mode, status: 400 });
+  }
+
+  if (!body.name || typeof body.name !== "string") {
+    return jsonResponse(createApiError("name is required", 400), { mode, status: 400 });
+  }
+
+  if (!body.baseUrl || typeof body.baseUrl !== "string") {
+    return jsonResponse(createApiError("baseUrl is required", 400), { mode, status: 400 });
+  }
+
+  if (!body.apiKey || typeof body.apiKey !== "string") {
+    return jsonResponse(createApiError("apiKey is required", 400), { mode, status: 400 });
+  }
+
+  if (!body.type || !["anthropic", "openai", "openai-compatible"].includes(body.type)) {
+    return jsonResponse(createApiError("type must be one of: openai, anthropic, openai-compatible", 400), {
+      mode,
+      status: 400,
+    });
+  }
+
+  const result = createProvider(db, body);
+  if ("error" in result) {
+    return jsonResponse(createApiError(result.error, result.status), { mode, status: result.status });
+  }
+
+  return jsonResponse(result, { mode, status: 201 });
+}
--- a/src/server/routes/providers/delete.ts
+++ b/src/server/routes/providers/delete.ts
@@ -0,0 +1,28 @@
+import type Database from "bun:sqlite";
+
+import type { RuntimeMode } from "../../../shared/api";
+
+import { getModelsByProviderId } from "../../db/models";
+import { deleteProvider } from "../../db/providers";
+import { createApiError, jsonResponse } from "../../helpers";
+import { validateIdParam } from "../../middleware";
+
+export function handleDeleteProvider(req: Request, db: Database, mode: RuntimeMode): Response {
+  const url = new URL(req.url);
+  const idStr = url.pathname.split("/")[3];
+
+  const validated = validateIdParam(idStr ?? "", mode);
+  if (validated instanceof Response) return validated;
+
+  const modelCount = getModelsByProviderId(db, validated.id);
+  if (modelCount > 0) {
+    return jsonResponse(createApiError("该供应商下存在模型，无法删除", 409), { mode, status: 409 });
+  }
+
+  const result = deleteProvider(db, validated.id);
+  if ("error" in result) {
+    return jsonResponse(createApiError(result.error, result.status), { mode, status: result.status });
+  }
+
+  return new Response(null, { status: 204 });
+}
--- a/src/server/routes/providers/disable.ts
+++ b/src/server/routes/providers/disable.ts
@@ -0,0 +1,22 @@
+import type Database from "bun:sqlite";
+
+import type { RuntimeMode } from "../../../shared/api";
+
+import { disableProvider } from "../../db/providers";
+import { createApiError, jsonResponse } from "../../helpers";
+import { validateIdParam } from "../../middleware";
+
+export function handleDisableProvider(req: Request, db: Database, mode: RuntimeMode): Response {
+  const url = new URL(req.url);
+  const idStr = url.pathname.split("/")[3];
+
+  const validated = validateIdParam(idStr ?? "", mode);
+  if (validated instanceof Response) return validated;
+
+  const result = disableProvider(db, validated.id);
+  if ("error" in result) {
+    return jsonResponse(createApiError(result.error, result.status), { mode, status: result.status });
+  }
+
+  return jsonResponse(result, { mode });
+}
--- a/src/server/routes/providers/enable.ts
+++ b/src/server/routes/providers/enable.ts
@@ -0,0 +1,22 @@
+import type Database from "bun:sqlite";
+
+import type { RuntimeMode } from "../../../shared/api";
+
+import { enableProvider } from "../../db/providers";
+import { createApiError, jsonResponse } from "../../helpers";
+import { validateIdParam } from "../../middleware";
+
+export function handleEnableProvider(req: Request, db: Database, mode: RuntimeMode): Response {
+  const url = new URL(req.url);
+  const idStr = url.pathname.split("/")[3];
+
+  const validated = validateIdParam(idStr ?? "", mode);
+  if (validated instanceof Response) return validated;
+
+  const result = enableProvider(db, validated.id);
+  if ("error" in result) {
+    return jsonResponse(createApiError(result.error, result.status), { mode, status: result.status });
+  }
+
+  return jsonResponse(result, { mode });
+}
--- a/src/server/routes/providers/get.ts
+++ b/src/server/routes/providers/get.ts
@@ -0,0 +1,22 @@
+import type Database from "bun:sqlite";
+
+import type { RuntimeMode } from "../../../shared/api";
+
+import { getProvider } from "../../db/providers";
+import { createApiError, jsonResponse } from "../../helpers";
+import { validateIdParam } from "../../middleware";
+
+export function handleGetProvider(req: Request, db: Database, mode: RuntimeMode): Response {
+  const url = new URL(req.url);
+  const idStr = url.pathname.split("/")[3];
+
+  const validated = validateIdParam(idStr ?? "", mode);
+  if (validated instanceof Response) return validated;
+
+  const result = getProvider(db, validated.id);
+  if ("error" in result) {
+    return jsonResponse(createApiError(result.error, result.status), { mode, status: result.status });
+  }
+
+  return jsonResponse(result, { mode });
+}
--- a/src/server/routes/providers/list.ts
+++ b/src/server/routes/providers/list.ts
@@ -0,0 +1,25 @@
+import type Database from "bun:sqlite";
+
+import type { RuntimeMode } from "../../../shared/api";
+
+import { listProviders } from "../../db/providers";
+import { jsonResponse } from "../../helpers";
+import { validatePagination } from "../../middleware";
+
+export function handleListProviders(req: Request, db: Database, mode: RuntimeMode): Response {
+  const url = new URL(req.url);
+  const pageParam = url.searchParams.get("page");
+  const pageSizeParam = url.searchParams.get("pageSize");
+  const keyword = url.searchParams.get("keyword");
+
+  const pagination = validatePagination(pageParam, pageSizeParam, mode);
+  if (pagination instanceof Response) return pagination;
+
+  const result = listProviders(db, {
+    keyword: keyword ?? undefined,
+    page: pagination.page,
+    pageSize: pagination.pageSize,
+  });
+
+  return jsonResponse(result, { mode });
+}
--- a/src/server/routes/providers/test.ts
+++ b/src/server/routes/providers/test.ts
@@ -0,0 +1,34 @@
+import type Database from "bun:sqlite";
+
+import type { RuntimeMode } from "../../../shared/api";
+
+import { testProviderConnection } from "../../ai/registry";
+import { getProvider } from "../../db/providers";
+import { createApiError, jsonResponse } from "../../helpers";
+import { validateIdParam } from "../../middleware";
+
+export async function handleTestProvider(req: Request, db: Database, mode: RuntimeMode): Promise<Response> {
+  const url = new URL(req.url);
+  const idStr = url.pathname.split("/")[3];
+
+  const validated = validateIdParam(idStr ?? "", mode);
+  if (validated instanceof Response) return validated;
+
+  const providerResult = getProvider(db, validated.id);
+  if ("error" in providerResult) {
+    return jsonResponse(createApiError(providerResult.error, providerResult.status), {
+      mode,
+      status: providerResult.status,
+    });
+  }
+
+  const provider = providerResult.provider;
+  const testResult = await testProviderConnection({
+    apiKey: provider.apiKey,
+    baseUrl: provider.baseUrl,
+    name: provider.name,
+    type: provider.type,
+  });
+
+  return jsonResponse({ providerTestResponse: testResult }, { mode });
+}
--- a/src/server/routes/providers/update.ts
+++ b/src/server/routes/providers/update.ts
@@ -0,0 +1,36 @@
+import type Database from "bun:sqlite";
+
+import type { RuntimeMode, UpdateProviderRequest } from "../../../shared/api";
+
+import { updateProvider } from "../../db/providers";
+import { createApiError, jsonResponse } from "../../helpers";
+import { validateIdParam } from "../../middleware";
+
+export async function handleUpdateProvider(req: Request, db: Database, mode: RuntimeMode): Promise<Response> {
+  const url = new URL(req.url);
+  const idStr = url.pathname.split("/")[3];
+
+  const validated = validateIdParam(idStr ?? "", mode);
+  if (validated instanceof Response) return validated;
+
+  let body: UpdateProviderRequest;
+  try {
+    body = (await req.json()) as UpdateProviderRequest;
+  } catch {
+    return jsonResponse(createApiError("Invalid JSON body", 400), { mode, status: 400 });
+  }
+
+  if (body.type !== undefined && !["anthropic", "openai", "openai-compatible"].includes(body.type)) {
+    return jsonResponse(createApiError("type must be one of: openai, anthropic, openai-compatible", 400), {
+      mode,
+      status: 400,
+    });
+  }
+
+  const result = updateProvider(db, validated.id, body);
+  if ("error" in result) {
+    return jsonResponse(createApiError(result.error, result.status), { mode, status: result.status });
+  }
+
+  return jsonResponse(result, { mode });
+}
--- a/src/server/server.ts
+++ b/src/server/server.ts
@@ -43,6 +43,42 @@ export function startServer(options: StartServerOptions) {
          return handleMeta(mode, resolvedVersion);
        },
      },
+      "/api/models": {
+        GET: async (req) => {
+          const { handleListModels } = await import("./routes/models/list");
+          return handleListModels(req, db, mode);
+        },
+        POST: async (req) => {
+          const { handleCreateModel } = await import("./routes/models/create");
+          return handleCreateModel(req, db, mode);
+        },
+      },
+      "/api/models/:id": {
+        DELETE: async (req) => {
+          const { handleDeleteModel } = await import("./routes/models/delete");
+          return handleDeleteModel(req, db, mode);
+        },
+        GET: async (req) => {
+          const { handleGetModel } = await import("./routes/models/get");
+          return handleGetModel(req, db, mode);
+        },
+        PATCH: async (req) => {
+          const { handleUpdateModel } = await import("./routes/models/update");
+          return handleUpdateModel(req, db, mode);
+        },
+      },
+      "/api/models/:id/disable": {
+        POST: async (req) => {
+          const { handleDisableModel } = await import("./routes/models/disable");
+          return handleDisableModel(req, db, mode);
+        },
+      },
+      "/api/models/:id/enable": {
+        POST: async (req) => {
+          const { handleEnableModel } = await import("./routes/models/enable");
+          return handleEnableModel(req, db, mode);
+        },
+      },
      "/api/projects": {
        GET: async (req) => {
          const { handleListProjects } = await import("./routes/projects/list");
@@ -79,6 +115,48 @@ export function startServer(options: StartServerOptions) {
          return handleRestoreProject(req, db, mode);
        },
      },
+      "/api/providers": {
+        GET: async (req) => {
+          const { handleListProviders } = await import("./routes/providers/list");
+          return handleListProviders(req, db, mode);
+        },
+        POST: async (req) => {
+          const { handleCreateProvider } = await import("./routes/providers/create");
+          return handleCreateProvider(req, db, mode);
+        },
+      },
+      "/api/providers/:id": {
+        DELETE: async (req) => {
+          const { handleDeleteProvider } = await import("./routes/providers/delete");
+          return handleDeleteProvider(req, db, mode);
+        },
+        GET: async (req) => {
+          const { handleGetProvider } = await import("./routes/providers/get");
+          return handleGetProvider(req, db, mode);
+        },
+        PATCH: async (req) => {
+          const { handleUpdateProvider } = await import("./routes/providers/update");
+          return handleUpdateProvider(req, db, mode);
+        },
+      },
+      "/api/providers/:id/disable": {
+        POST: async (req) => {
+          const { handleDisableProvider } = await import("./routes/providers/disable");
+          return handleDisableProvider(req, db, mode);
+        },
+      },
+      "/api/providers/:id/enable": {
+        POST: async (req) => {
+          const { handleEnableProvider } = await import("./routes/providers/enable");
+          return handleEnableProvider(req, db, mode);
+        },
+      },
+      "/api/providers/:id/test": {
+        POST: async (req) => {
+          const { handleTestProvider } = await import("./routes/providers/test");
+          return handleTestProvider(req, db, mode);
+        },
+      },
    },
  });

--- a/src/shared/api.ts
+++ b/src/shared/api.ts
@@ -3,11 +3,32 @@ export interface ApiErrorResponse {
  status: number;
 }

+export interface CreateModelRequest {
+  capabilities: ModelCapability[];
+  contextLength?: null | number;
+  maxOutputTokens?: null | number;
+  modelId: string;
+  name: string;
+  providerId: string;
+}
+
 export interface CreateProjectRequest {
  description?: string;
  name: string;
 }

+// ==========================================
+// 在此定义你的业务类型
+// 前后端共享的类型都放在这个文件中
+// ==========================================
+
+export interface CreateProviderRequest {
+  apiKey: string;
+  baseUrl: string;
+  name: string;
+  type: ProviderType;
+}
+
 export interface MetaResponse {
  ok: true;
  service: string;
@@ -15,10 +36,50 @@ export interface MetaResponse {
  version: string;
 }

-// ==========================================
-// 在此定义你的业务类型
-// 前后端共享的类型都放在这个文件中
-// ==========================================
+export interface Model {
+  capabilities: ModelCapability[];
+  contextLength: null | number;
+  createdAt: string;
+  enabled: boolean;
+  id: string;
+  maxOutputTokens: null | number;
+  modelId: string;
+  name: string;
+  providerId: string;
+  updatedAt: string;
+}
+
+export type ModelCapability =
+  | "audio-generation"
+  | "audio-recognition"
+  | "image-generation"
+  | "image-recognition"
+  | "reasoning"
+  | "text"
+  | "video-generation"
+  | "video-recognition";
+
+export const MODEL_CAPABILITIES: readonly ModelCapability[] = [
+  "audio-generation",
+  "audio-recognition",
+  "image-generation",
+  "image-recognition",
+  "reasoning",
+  "text",
+  "video-generation",
+  "video-recognition",
+];
+
+export interface ModelListResponse {
+  items: Model[];
+  page: number;
+  pageSize: number;
+  total: number;
+}
+
+export interface ModelResponse {
+  model: Model;
+}

 export interface Project {
  archivedAt: null | string;
@@ -43,9 +104,54 @@ export interface ProjectResponse {

 export type ProjectStatus = "active" | "archived";

+export interface Provider {
+  apiKey: string;
+  baseUrl: string;
+  createdAt: string;
+  enabled: boolean;
+  id: string;
+  name: string;
+  type: ProviderType;
+  updatedAt: string;
+}
+
+export interface ProviderListResponse {
+  items: Provider[];
+  page: number;
+  pageSize: number;
+  total: number;
+}
+
+export interface ProviderResponse {
+  provider: Provider;
+}
+
+export interface ProviderTestResponse {
+  message: string;
+  ok: boolean;
+}
+
+export type ProviderType = "anthropic" | "openai" | "openai-compatible";
+
 export type RuntimeMode = "development" | "production" | "test";

+export interface UpdateModelRequest {
+  capabilities?: ModelCapability[];
+  contextLength?: null | number;
+  maxOutputTokens?: null | number;
+  modelId?: string;
+  name?: string;
+  providerId?: string;
+}
+
 export interface UpdateProjectRequest {
  description?: string;
  name?: string;
 }
+
+export interface UpdateProviderRequest {
+  apiKey?: string;
+  baseUrl?: string;
+  name?: string;
+  type?: ProviderType;
+}
--- a/src/web/consoles/admin/menu.tsx
+++ b/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;
--- a/src/web/hooks/use-models.ts
+++ b/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;
+}
--- a/src/web/hooks/use-providers.ts
+++ b/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;
+}
--- a/src/web/pages/models/components/ModelFormModal.tsx
+++ b/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>
+  );
+}
--- a/src/web/pages/models/components/ModelTable.tsx
+++ b/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())}`;
+}
--- a/src/web/pages/models/components/ModelToolbar.tsx
+++ b/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>
+  );
+}
--- a/src/web/pages/models/components/ProviderFormModal.tsx
+++ b/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>
+  );
+}
--- a/src/web/pages/models/components/ProviderTable.tsx
+++ b/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())}`;
+}
--- a/src/web/pages/models/components/ProviderToolbar.tsx
+++ b/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>
+  );
+}
--- a/src/web/pages/models/index.tsx
+++ b/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>
+  );
+}
--- a/src/web/routes.tsx
+++ b/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="" />