调整预设供应商按钮外观与搜索框位置 (#4183)

* 调整预设供应商按钮外观与搜索框位置 1. 调整预设供应商按钮外观,显示默认图标,大小统一; 2. 调整预设供应商搜索框位置。 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> * test(provider): 新增预设按钮外观与 inline 搜索的单元测试覆盖: 1. 所有预设按钮固定 200px 宽度,视觉对齐一致 2. preset.icon 存在时按钮内渲染 ProviderIcon 3. preset 无 icon 且无 theme.icon 时渲染占位元素保持文字对齐 4. 点击放大镜 inline 切换搜索输入框可见性,ESC 收起并清空 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> * refactor(provider-preset): responsive grid layout and search polish - Replace fixed-width preset buttons with a responsive CSS grid (auto-fill, 150px min column) - Add a leading placeholder to the custom button so its label aligns with iconed presets - Close the inline search box on outside click, restoring the old Popover behavior - Span the empty-state hint across the full grid row - Update component tests for the new layout and behaviors --------- Co-authored-by: Claude Opus 4.7 <noreply@anthropic.com> Co-authored-by: Jason <farion1231@gmail.com>
2026-07-24 12:44:18 +08:00 · 2026-06-14 18:18:43 +08:00
parent 0c46efe1be
commit b7ad1c4bf8
2 changed files with 291 additions and 119 deletions
@@ -15,6 +15,29 @@ import {
  type PresetSortMode,
 } from "@/components/providers/forms/ProviderPresetSelector";

+// Mock ProviderIcon 以避免依赖图标库的实际内容
+vi.mock("@/components/ProviderIcon", () => ({
+  ProviderIcon: ({
+    icon,
+    name,
+    color,
+    size,
+  }: {
+    icon?: string;
+    name: string;
+    color?: string;
+    size?: number;
+  }) => (
+    <span
+      data-testid="provider-icon"
+      data-icon={icon}
+      data-name={name}
+      data-color={color}
+      data-size={size}
+    />
+  ),
+}));
+
 const presetCategoryLabels = {
  official: "官方",
  cn_official: "国产官方",
@@ -295,4 +318,130 @@ describe("ProviderPresetSelector", () => {
      ),
    ).toBeInTheDocument();
  });
+
+  it("所有预设按钮填满网格列宽(w-full)实现等宽对齐", () => {
+    renderSelector();
+
+    const presetButtons = screen.getAllByRole("button");
+    const fullWidthButtons = presetButtons.filter((btn) =>
+      btn.className.includes("w-full"),
+    );
+
+    // 至少包含 custom + 4 个预设 = 5 个等宽按钮(搜索/排序按钮为 size-8 不计入)
+    expect(fullWidthButtons.length).toBeGreaterThanOrEqual(5);
+  });
+
+  it("preset.icon 存在时按钮内渲染图标元素(img/svg)", () => {
+    const entriesWithIcon = [
+      {
+        id: "with-icon",
+        preset: {
+          name: "With Icon",
+          websiteUrl: "https://icon.example.com",
+          settingsConfig: {},
+          category: "official" as ProviderCategory,
+          icon: "claude-api",
+          iconColor: "#D4915D",
+        },
+      },
+    ];
+
+    renderSelector({ entries: entriesWithIcon });
+
+    const button = screen.getByRole("button", { name: /with icon/i });
+    const icon = button.querySelector('[data-testid="provider-icon"]');
+    expect(icon).not.toBeNull();
+    expect(icon?.getAttribute("data-icon")).toBe("claude-api");
+    expect(icon?.getAttribute("data-color")).toBe("#D4915D");
+  });
+
+  it("preset 无 icon 且无 theme.icon 时,按钮内仍渲染占位元素保持文字对齐", () => {
+    const entriesWithoutIcon = [
+      {
+        id: "no-icon",
+        preset: {
+          name: "No Icon",
+          websiteUrl: "https://noicon.example.com",
+          settingsConfig: {},
+          category: "official" as ProviderCategory,
+        },
+      },
+    ];
+
+    renderSelector({ entries: entriesWithoutIcon });
+
+    const button = screen.getByRole("button", { name: /no icon/i });
+    // 占位 span(16x16)应该存在,保证文字位置与有图标的按钮对齐
+    const placeholder = button.querySelector("span[aria-hidden]");
+    expect(placeholder).not.toBeNull();
+  });
+
+  it("custom 按钮同样渲染占位元素,文字与带图标的预设按钮对齐", () => {
+    renderSelector();
+
+    const customButton = screen.getByRole("button", {
+      name: "providerPreset.custom",
+    });
+    const placeholder = customButton.querySelector("span[aria-hidden]");
+    expect(placeholder).not.toBeNull();
+  });
+
+  it("点击放大镜 inline 切换搜索输入框可见性,ESC 收起并清空", async () => {
+    const user = userEvent.setup();
+    renderSelector();
+
+    // 初始没有搜索输入框
+    expect(
+      screen.queryByRole("textbox", {
+        name: /providerPreset\.(searchInput|searchPlaceholder)|搜索预设|search/i,
+      }),
+    ).not.toBeInTheDocument();
+
+    // 点击放大镜展开输入框
+    await user.click(getSearchButton());
+    const input = getSearchInput();
+    expect(input).toBeInTheDocument();
+
+    // 输入关键字过滤
+    await user.type(input, "gateway");
+    expect(
+      screen.getByRole("button", { name: "Beta Gateway" }),
+    ).toBeInTheDocument();
+
+    // ESC 收起输入框并清空
+    await user.keyboard("{Escape}");
+    expect(
+      screen.queryByRole("textbox", {
+        name: /providerPreset\.(searchInput|searchPlaceholder)|搜索预设|search/i,
+      }),
+    ).not.toBeInTheDocument();
+    // 收起后所有预设恢复显示
+    expect(
+      screen.getByRole("button", { name: "preset.gamma" }),
+    ).toBeInTheDocument();
+  });
+
+  it("点击搜索区域外自动收起并清空", async () => {
+    const user = userEvent.setup();
+    renderSelector();
+
+    await user.click(getSearchButton());
+    await user.type(getSearchInput(), "gateway");
+    expect(getSearchInput()).toBeInTheDocument();
+
+    // 点击搜索区域外的元素(custom 按钮)应收起搜索框
+    await user.click(
+      screen.getByRole("button", { name: "providerPreset.custom" }),
+    );
+
+    expect(
+      screen.queryByRole("textbox", {
+        name: /providerPreset\.(searchInput|searchPlaceholder)|搜索预设|search/i,
+      }),
+    ).not.toBeInTheDocument();
+    // 收起后清空 query,所有预设恢复显示
+    expect(
+      screen.getByRole("button", { name: "preset.gamma" }),
+    ).toBeInTheDocument();
+  });
 });