feat: 设置页新增模型卡片，支持为7种能力配置默认模型

tests/web/features/settings/SettingsPage.test.tsx

@@ -9,10 +9,15 @@ function mockSettingsResponse(theme = "system", compact = false): Response {
   return jsonResponse({ compact, theme });
 }
 
+function mockEmptyModelsResponse(): Response {
+  return jsonResponse({ items: [], page: 1, pageSize: 200, total: 0 });
+}
+
 describe("SettingsPage", () => {
   test("渲染主题卡片", () => {
     installFetchMock((call) => {
       if (call.url.includes("/api/settings")) return mockSettingsResponse();
+      if (call.url.includes("/api/models")) return mockEmptyModelsResponse();
       return jsonResponse({});
     });
 
@@ -24,6 +29,7 @@ describe("SettingsPage", () => {
   test("渲染主题模式 Radio.Group 选项", () => {
     installFetchMock((call) => {
       if (call.url.includes("/api/settings")) return mockSettingsResponse();
+      if (call.url.includes("/api/models")) return mockEmptyModelsResponse();
       return jsonResponse({});
     });
 
@@ -37,6 +43,7 @@ describe("SettingsPage", () => {
   test("渲染紧凑模式标签和开关", () => {
     installFetchMock((call) => {
       if (call.url.includes("/api/settings")) return mockSettingsResponse();
+      if (call.url.includes("/api/models")) return mockEmptyModelsResponse();
       return jsonResponse({});
     });
 
@@ -48,6 +55,7 @@ describe("SettingsPage", () => {
   test("渲染水平表单结构", () => {
     installFetchMock((call) => {
       if (call.url.includes("/api/settings")) return mockSettingsResponse();
+      if (call.url.includes("/api/models")) return mockEmptyModelsResponse();
       return jsonResponse({});
     });
 
@@ -60,6 +68,7 @@ describe("SettingsPage", () => {
   test("不再使用 Segmented", () => {
     installFetchMock((call) => {
       if (call.url.includes("/api/settings")) return mockSettingsResponse();
+      if (call.url.includes("/api/models")) return mockEmptyModelsResponse();
       return jsonResponse({});
     });
 
@@ -71,6 +80,7 @@ describe("SettingsPage", () => {
   test("不显示保存状态文本(已迁移到 toast)", () => {
     installFetchMock((call) => {
       if (call.url.includes("/api/settings")) return mockSettingsResponse();
+      if (call.url.includes("/api/models")) return mockEmptyModelsResponse();
       return jsonResponse({});
     });
 
@@ -92,4 +102,16 @@ describe("SettingsPage", () => {
       expect(radioGroup).not.toBeNull();
     });
   });
+
+  test("渲染模型卡片标题", () => {
+    installFetchMock((call) => {
+      if (call.url.includes("/api/settings")) return mockSettingsResponse();
+      if (call.url.includes("/api/models")) return mockEmptyModelsResponse();
+      return jsonResponse({});
+    });
+
+    renderWithProviders(createElement(SettingsPage));
+
+    expect(screen.getByText("模型")).not.toBeNull();
+  });
 });

tests/web/features/settings/components/ModelSettingsCard.test.tsx

@@ -0,0 +1,67 @@
+import { describe, expect, test } from "bun:test";
+import { screen, waitFor } from "@testing-library/react";
+import { createElement } from "react";
+
+import { ModelSettingsCard } from "../../../../../src/web/features/settings/components/ModelSettingsCard";
+import { installFetchMock, jsonResponse, renderWithProviders } from "../../../test-utils";
+
+function mockSettingsResponse(defaultModels?: Record<string, string | null>): Response {
+  return jsonResponse({ compact: false, defaultModels, theme: "system" });
+}
+
+function mockModelsResponse(items: Array<{ id: string; name: string }>): Response {
+  return jsonResponse({
+    items: items.map((m) => ({ ...m, capabilities: [], createdAt: "", externalId: "", providerId: "", updatedAt: "" })),
+    page: 1,
+    pageSize: 200,
+    total: items.length,
+  });
+}
+
+function mockEmptyModelsResponse(): Response {
+  return mockModelsResponse([]);
+}
+
+describe("ModelSettingsCard", () => {
+  test("渲染 7 个模型能力配置项", async () => {
+    installFetchMock((call) => {
+      if (call.url.includes("/api/settings")) return mockSettingsResponse();
+      if (call.url.includes("/api/models")) return mockEmptyModelsResponse();
+      return jsonResponse({});
+    });
+
+    renderWithProviders(createElement(ModelSettingsCard));
+
+    await waitFor(() => {
+      expect(screen.getByText("文本")).not.toBeNull();
+      expect(screen.getByText("图片识别")).not.toBeNull();
+      expect(screen.getByText("音频识别")).not.toBeNull();
+      expect(screen.getByText("视频识别")).not.toBeNull();
+      expect(screen.getByText("图片生成")).not.toBeNull();
+      expect(screen.getByText("音频生成")).not.toBeNull();
+      expect(screen.getByText("视频生成")).not.toBeNull();
+    });
+  });
+
+  test("回显已保存的默认模型值", async () => {
+    installFetchMock((call) => {
+      if (call.url.includes("/api/settings")) {
+        return mockSettingsResponse({ imageRecognition: "model-b", text: "model-a" });
+      }
+      if (call.url.includes("/api/models")) {
+        return mockModelsResponse([
+          { id: "model-a", name: "GPT-4" },
+          { id: "model-b", name: "Claude Vision" },
+        ]);
+      }
+      return jsonResponse({});
+    });
+
+    renderWithProviders(createElement(ModelSettingsCard));
+
+    await waitFor(() => {
+      expect(screen.getByText("GPT-4")).not.toBeNull();
+      expect(screen.getByText("Claude Vision")).not.toBeNull();
+    });
+  });
+});