feat: 用自定义侧边栏替换聊天室 Conversations 组件，提取公共 SidebarGroup 和 date-group

tests/web/components/ChatPage.test.tsx

@@ -0,0 +1,177 @@
+import { fireEvent, screen, waitFor } from "@testing-library/react";
+import { describe, expect, test, vi } from "bun:test";
+import { createElement } from "react";
+
+import type { Model, Project } from "../../../src/shared/api";
+
+import { ChatPage } from "../../../src/web/features/chat/ChatPage";
+import { ProjectContext } from "../../../src/web/shared/hooks/use-current-project";
+import { installFetchMock, jsonResponse, renderWithProviders } from "../test-utils";
+
+const PROJECT_ID = "proj-1";
+
+const MOCK_PROJECT: Project = {
+  archivedAt: null,
+  createdAt: "2026-01-01T00:00:00.000Z",
+  description: "",
+  id: PROJECT_ID,
+  name: "测试项目",
+  status: "active",
+  updatedAt: "2026-01-01T00:00:00.000Z",
+};
+
+const TEXT_MODEL: Model = {
+  capabilities: ["text"],
+  contextLength: null,
+  createdAt: "2024-01-01T00:00:00.000Z",
+  id: "model-1",
+  maxOutputTokens: null,
+  modelId: "gpt-4o",
+  name: "GPT-4o",
+  providerId: "pv1",
+  updatedAt: "2024-01-01T00:00:00.000Z",
+};
+
+const CONVERSATION = {
+  createdAt: "2026-06-03T00:00:00.000Z",
+  id: "conv-1",
+  modelId: "model-1",
+  projectId: PROJECT_ID,
+  title: "测试对话",
+  updatedAt: "2026-06-03T00:00:00.000Z",
+};
+
+function renderChatPage() {
+  return renderWithProviders(
+    createElement(ProjectContext.Provider, {
+      children: createElement(ChatPage),
+      value: MOCK_PROJECT,
+    }),
+  );
+}
+
+function setupFetchMock() {
+  return installFetchMock((call) => {
+    if (call.url.includes("/models")) {
+      return jsonResponse({ items: [TEXT_MODEL], total: 1 });
+    }
+    if (call.url.includes("/conversations") && call.method === "GET") {
+      return jsonResponse({ items: [CONVERSATION], page: 1, pageSize: 200, total: 1 });
+    }
+    if (call.url.endsWith("/conversations") && call.method === "POST") {
+      return jsonResponse({ conversation: { ...CONVERSATION, id: "conv-new", title: "新会话" } }, { status: 201 });
+    }
+    if (call.method === "DELETE" && call.url.includes("/conversations/")) {
+      return new Response(null, { status: 204 });
+    }
+    if (call.url.includes("/messages")) {
+      return jsonResponse({ items: [], total: 0 });
+    }
+    if (/\/conversations\/conv-1$/.exec(call.url)) {
+      return jsonResponse({ conversation: CONVERSATION });
+    }
+    return jsonResponse({ error: "not found" }, { status: 404 });
+  });
+}
+
+void vi.mock("@ai-sdk/react", () => ({
+  useChat: () => ({
+    messages: [],
+    regenerate: () => undefined,
+    sendMessage: () => undefined,
+    setMessages: (msgs: unknown) => msgs,
+    status: "ready",
+    stop: () => undefined,
+  }),
+}));
+
+void vi.mock("ai", () => ({
+  DefaultChatTransport: function () {
+    return undefined;
+  },
+}));
+
+describe("ChatPage", () => {
+  test("渲染对话侧边栏和欢迎页", async () => {
+    setupFetchMock();
+    renderChatPage();
+
+    await waitFor(() => {
+      expect(screen.getByText("测试对话")).not.toBeNull();
+    });
+
+    expect(screen.getByText("你好，我是阿福")).not.toBeNull();
+  });
+
+  test("点击新对话按钮创建并选中对话", async () => {
+    const calls = setupFetchMock();
+    renderChatPage();
+
+    await waitFor(() => {
+      expect(screen.getByText("新对话")).not.toBeNull();
+    });
+
+    fireEvent.click(screen.getByText("新对话"));
+
+    await waitFor(() => {
+      const createCall = calls.find((c) => c.url.endsWith("/conversations") && c.method === "POST");
+      expect(createCall).toBeTruthy();
+    });
+  });
+
+  test("点击对话切换选中", async () => {
+    setupFetchMock();
+    renderChatPage();
+
+    await waitFor(() => {
+      expect(screen.getByText("测试对话")).not.toBeNull();
+    });
+
+    fireEvent.click(screen.getByText("测试对话"));
+
+    await waitFor(() => {
+      expect(screen.queryByText("你好，我是阿福")).toBeNull();
+    });
+  });
+
+  test("删除对话后列表更新", async () => {
+    let deleted = false;
+    installFetchMock((call) => {
+      if (call.method === "DELETE" && call.url.includes("/conversations/conv-1")) {
+        deleted = true;
+        return new Response(null, { status: 204 });
+      }
+      if (call.url.includes("/models")) {
+        return jsonResponse({ items: [TEXT_MODEL], total: 1 });
+      }
+      if (call.url.includes("/conversations") && call.method === "GET") {
+        if (deleted) {
+          return jsonResponse({ items: [], page: 1, pageSize: 200, total: 0 });
+        }
+        return jsonResponse({ items: [CONVERSATION], page: 1, pageSize: 200, total: 1 });
+      }
+      if (call.url.includes("/messages")) {
+        return jsonResponse({ items: [], total: 0 });
+      }
+      return jsonResponse({ error: "not found" }, { status: 404 });
+    });
+
+    renderChatPage();
+
+    await waitFor(() => {
+      expect(screen.getByText("测试对话")).not.toBeNull();
+    });
+
+    fireEvent.click(screen.getByLabelText("删除"));
+
+    await waitFor(() => {
+      expect(screen.getByText("确认删除该对话？")).not.toBeNull();
+    });
+
+    fireEvent.click(screen.getByText("删 除"));
+
+    await waitFor(() => {
+      expect(screen.getByText("暂无对话")).not.toBeNull();
+    });
+  });
+});

tests/web/components/ConversationCard.test.tsx

@@ -0,0 +1,95 @@
+import { fireEvent, screen, waitFor } from "@testing-library/react";
+import { describe, expect, test, vi } from "bun:test";
+import { createElement } from "react";
+
+import type { Conversation } from "../../../src/shared/api";
+
+import { ConversationCard } from "../../../src/web/features/chat/components/ConversationCard";
+import { renderWithProviders } from "../test-utils";
+
+const MOCK_CONVERSATION: Conversation = {
+  createdAt: "2026-06-03T00:00:00.000Z",
+  id: "conv-1",
+  modelId: "model-1",
+  projectId: "proj-1",
+  title: "测试对话",
+  updatedAt: "2026-06-03T00:00:00.000Z",
+};
+
+describe("ConversationCard", () => {
+  test("渲染对话标题", () => {
+    renderWithProviders(
+      createElement(ConversationCard, {
+        conversation: MOCK_CONVERSATION,
+        onDelete: vi.fn(),
+        onSelect: vi.fn(),
+        selected: false,
+      }),
+    );
+    expect(screen.getByText("测试对话")).not.toBeNull();
+  });
+
+  test("点击卡片触发 onSelect", () => {
+    const onSelect = vi.fn();
+    renderWithProviders(
+      createElement(ConversationCard, {
+        conversation: MOCK_CONVERSATION,
+        onDelete: vi.fn(),
+        onSelect,
+        selected: false,
+      }),
+    );
+    const item = screen.getByText("测试对话").closest(".app-sidebar-list-item")!;
+    fireEvent.click(item);
+    expect(onSelect).toHaveBeenCalledTimes(1);
+  });
+
+  test("点击删除按钮弹出确认框，确认后触发 onDelete", async () => {
+    const onDelete = vi.fn();
+    renderWithProviders(
+      createElement(ConversationCard, {
+        conversation: MOCK_CONVERSATION,
+        onDelete,
+        onSelect: vi.fn(),
+        selected: false,
+      }),
+    );
+    fireEvent.click(screen.getByLabelText("删除"));
+
+    await waitFor(() => {
+      expect(screen.getByText("确认删除该对话？")).not.toBeNull();
+    });
+
+    fireEvent.click(screen.getByText("删 除"));
+
+    await waitFor(() => {
+      expect(onDelete).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  test("选中时包含 app-sidebar-list-item--selected 类名", () => {
+    renderWithProviders(
+      createElement(ConversationCard, {
+        conversation: MOCK_CONVERSATION,
+        onDelete: vi.fn(),
+        onSelect: vi.fn(),
+        selected: true,
+      }),
+    );
+    const item = screen.getByText("测试对话").closest(".app-sidebar-list-item--selected");
+    expect(item).not.toBeNull();
+  });
+
+  test("未选中时不包含 app-sidebar-list-item--selected 类名", () => {
+    renderWithProviders(
+      createElement(ConversationCard, {
+        conversation: MOCK_CONVERSATION,
+        onDelete: vi.fn(),
+        onSelect: vi.fn(),
+        selected: false,
+      }),
+    );
+    const item = screen.getByText("测试对话").closest(".app-sidebar-list-item--selected");
+    expect(item).toBeNull();
+  });
+});

tests/web/components/ConversationList.test.tsx

@@ -0,0 +1,160 @@
+import { fireEvent, screen, waitFor } from "@testing-library/react";
+import { describe, expect, test, vi } from "bun:test";
+import { createElement } from "react";
+
+import type { Conversation } from "../../../src/shared/api";
+
+import { ConversationList } from "../../../src/web/features/chat/components/ConversationList";
+import { renderWithProviders } from "../test-utils";
+
+const CONVERSATIONS: Conversation[] = [
+  {
+    createdAt: "2026-06-03T00:00:00.000Z",
+    id: "conv-1",
+    modelId: "model-1",
+    projectId: "proj-1",
+    title: "今天对话",
+    updatedAt: "2026-06-03T00:00:00.000Z",
+  },
+  {
+    createdAt: "2026-06-02T00:00:00.000Z",
+    id: "conv-2",
+    modelId: "model-1",
+    projectId: "proj-1",
+    title: "昨天对话",
+    updatedAt: "2026-06-02T00:00:00.000Z",
+  },
+  {
+    createdAt: "2026-05-01T00:00:00.000Z",
+    id: "conv-3",
+    modelId: "model-1",
+    projectId: "proj-1",
+    title: "更早对话",
+    updatedAt: "2026-05-01T00:00:00.000Z",
+  },
+];
+
+describe("ConversationList", () => {
+  test("列表为空时显示暂无对话", () => {
+    renderWithProviders(
+      createElement(ConversationList, {
+        conversations: [],
+        loading: false,
+        onAddClick: vi.fn(),
+        onDelete: vi.fn(),
+        onSelect: vi.fn(),
+        selectedId: null,
+      }),
+    );
+    expect(screen.getByText("暂无对话")).not.toBeNull();
+  });
+
+  test("渲染对话列表并按日期分组", () => {
+    renderWithProviders(
+      createElement(ConversationList, {
+        conversations: CONVERSATIONS,
+        loading: false,
+        onAddClick: vi.fn(),
+        onDelete: vi.fn(),
+        onSelect: vi.fn(),
+        selectedId: null,
+      }),
+    );
+    expect(screen.getByText("今天对话")).not.toBeNull();
+    expect(screen.getByText("昨天对话")).not.toBeNull();
+    expect(screen.getByText("更早对话")).not.toBeNull();
+  });
+
+  test("加载中显示 Skeleton", () => {
+    renderWithProviders(
+      createElement(ConversationList, {
+        conversations: [],
+        loading: true,
+        onAddClick: vi.fn(),
+        onDelete: vi.fn(),
+        onSelect: vi.fn(),
+        selectedId: null,
+      }),
+    );
+    expect(document.querySelector(".ant-skeleton")).not.toBeNull();
+  });
+
+  test("点击新对话按钮触发 onAddClick", () => {
+    const onAddClick = vi.fn();
+    renderWithProviders(
+      createElement(ConversationList, {
+        conversations: [],
+        loading: false,
+        onAddClick,
+        onDelete: vi.fn(),
+        onSelect: vi.fn(),
+        selectedId: null,
+      }),
+    );
+    screen.getByText("新对话").click();
+    expect(onAddClick).toHaveBeenCalledTimes(1);
+  });
+
+  test("点击搜索按钮过滤对话标题", async () => {
+    renderWithProviders(
+      createElement(ConversationList, {
+        conversations: CONVERSATIONS,
+        loading: false,
+        onAddClick: vi.fn(),
+        onDelete: vi.fn(),
+        onSelect: vi.fn(),
+        selectedId: null,
+      }),
+    );
+    const searchInput = screen.getByPlaceholderText("搜索对话");
+    fireEvent.change(searchInput, { target: { value: "今天" } });
+    expect(screen.getByText("昨天对话")).not.toBeNull();
+
+    fireEvent.keyDown(searchInput, { key: "Enter" });
+
+    await waitFor(() => {
+      expect(screen.getByText("今天对话")).not.toBeNull();
+      expect(screen.queryByText("昨天对话")).toBeNull();
+      expect(screen.queryByText("更早对话")).toBeNull();
+    });
+  });
+
+  test("输入文字未点击搜索时不触发过滤", () => {
+    renderWithProviders(
+      createElement(ConversationList, {
+        conversations: CONVERSATIONS,
+        loading: false,
+        onAddClick: vi.fn(),
+        onDelete: vi.fn(),
+        onSelect: vi.fn(),
+        selectedId: null,
+      }),
+    );
+    const searchInput = screen.getByPlaceholderText("搜索对话");
+    fireEvent.change(searchInput, { target: { value: "今天" } });
+
+    expect(screen.getByText("今天对话")).not.toBeNull();
+    expect(screen.getByText("昨天对话")).not.toBeNull();
+    expect(screen.getByText("更早对话")).not.toBeNull();
+  });
+
+  test("搜索无匹配结果时显示无匹配对话", async () => {
+    renderWithProviders(
+      createElement(ConversationList, {
+        conversations: CONVERSATIONS,
+        loading: false,
+        onAddClick: vi.fn(),
+        onDelete: vi.fn(),
+        onSelect: vi.fn(),
+        selectedId: null,
+      }),
+    );
+    const searchInput = screen.getByPlaceholderText("搜索对话");
+    fireEvent.change(searchInput, { target: { value: "不存在的对话" } });
+    fireEvent.keyDown(searchInput, { key: "Enter" });
+
+    await waitFor(() => {
+      expect(screen.getByText("无匹配对话")).not.toBeNull();
+    });
+  });
+});

tests/web/components/ConversationSidebar.test.tsx

@@ -0,0 +1,104 @@
+import { fireEvent, screen, waitFor } from "@testing-library/react";
+import { describe, expect, test, vi } from "bun:test";
+import { createElement } from "react";
+
+import { ConversationSidebar } from "../../../src/web/features/chat/components/ConversationSidebar";
+import { installFetchMock, jsonResponse, renderWithProviders } from "../test-utils";
+
+const PROJECT_ID = "proj-1";
+
+const CONVERSATION = {
+  createdAt: "2026-06-03T00:00:00.000Z",
+  id: "conv-1",
+  modelId: "model-1",
+  projectId: PROJECT_ID,
+  title: "测试对话",
+  updatedAt: "2026-06-03T00:00:00.000Z",
+};
+
+function setupSuccessMock() {
+  return installFetchMock((call) => {
+    if (call.url.includes("/conversations") && call.method === "GET") {
+      return jsonResponse({ items: [CONVERSATION], page: 1, pageSize: 200, total: 1 });
+    }
+    return jsonResponse({ error: "not found" }, { status: 404 });
+  });
+}
+
+describe("ConversationSidebar", () => {
+  test("加载成功后渲染对话列表", async () => {
+    setupSuccessMock();
+    renderWithProviders(
+      createElement(ConversationSidebar, {
+        onAddClick: vi.fn(),
+        onDelete: vi.fn(),
+        onSelect: vi.fn(),
+        projectId: PROJECT_ID,
+        selectedId: null,
+      }),
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText("测试对话")).not.toBeNull();
+    });
+  });
+
+  test("加载失败时显示错误和重试按钮", async () => {
+    installFetchMock((call) => {
+      if (call.url.includes("/conversations") && call.method === "GET") {
+        return jsonResponse({ error: "服务器错误" }, { status: 500 });
+      }
+      return jsonResponse({ error: "not found" }, { status: 404 });
+    });
+
+    renderWithProviders(
+      createElement(ConversationSidebar, {
+        onAddClick: vi.fn(),
+        onDelete: vi.fn(),
+        onSelect: vi.fn(),
+        projectId: PROJECT_ID,
+        selectedId: null,
+      }),
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText("加载对话列表失败")).not.toBeNull();
+    });
+
+    expect(screen.getByText("重试")).not.toBeNull();
+  });
+
+  test("点击重试重新请求", async () => {
+    let callCount = 0;
+    installFetchMock((call) => {
+      if (call.url.includes("/conversations") && call.method === "GET") {
+        callCount++;
+        if (callCount === 1) {
+          return jsonResponse({ error: "服务器错误" }, { status: 500 });
+        }
+        return jsonResponse({ items: [CONVERSATION], page: 1, pageSize: 200, total: 1 });
+      }
+      return jsonResponse({ error: "not found" }, { status: 404 });
+    });
+
+    renderWithProviders(
+      createElement(ConversationSidebar, {
+        onAddClick: vi.fn(),
+        onDelete: vi.fn(),
+        onSelect: vi.fn(),
+        projectId: PROJECT_ID,
+        selectedId: null,
+      }),
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText("加载对话列表失败")).not.toBeNull();
+    });
+
+    fireEvent.click(screen.getByText("重试"));
+
+    await waitFor(() => {
+      expect(screen.getByText("测试对话")).not.toBeNull();
+    });
+  });
+});

tests/web/features/inbox/MaterialCard.test.tsx

@@ -18,7 +18,7 @@ const MOCK_MATERIAL: Material = {
 };
 
 describe("MaterialCard", () => {
-  test("渲染素材描述、时间和状态标签", () => {
+  test("渲染素材描述和状态标签", () => {
     renderWithProviders(
       createElement(MaterialCard, {
         material: MOCK_MATERIAL,
@@ -28,7 +28,6 @@ describe("MaterialCard", () => {
       }),
     );
     expect(screen.getByText("测试素材描述")).not.toBeNull();
-    expect(screen.getByText("今天")).not.toBeNull();
     expect(screen.getByText("待审核")).not.toBeNull();
   });
 

tests/web/utils/date-group.test.ts

@@ -0,0 +1,104 @@
+import { describe, expect, test } from "bun:test";
+
+import { getDateGroup, groupByDate } from "../../../src/web/shared/utils/date-group";
+
+function makeDate(daysAgo: number): string {
+  const d = new Date();
+  d.setDate(d.getDate() - daysAgo);
+  return d.toISOString();
+}
+
+describe("getDateGroup", () => {
+  test("今天的日期返回 today", () => {
+    const now = new Date();
+    const result = getDateGroup(now.toISOString(), now);
+    expect(result).toBe("today");
+  });
+
+  test("昨天的日期返回 yesterday", () => {
+    const now = new Date();
+    const yesterday = new Date(now);
+    yesterday.setDate(yesterday.getDate() - 1);
+    const result = getDateGroup(yesterday.toISOString(), now);
+    expect(result).toBe("yesterday");
+  });
+
+  test("本周内的日期返回 thisWeek", () => {
+    const now = new Date();
+    const dayOfWeek = now.getDay();
+    const mondayOffset = dayOfWeek === 0 ? 6 : dayOfWeek - 1;
+    const wednesday = new Date(now);
+    wednesday.setDate(now.getDate() - (dayOfWeek === 0 ? 6 : dayOfWeek - 1) + 2);
+    if (wednesday > now) {
+      const tuesday = new Date(now);
+      tuesday.setDate(now.getDate() - mondayOffset + 1);
+      if (tuesday < now && tuesday.getDate() !== now.getDate() - 1) {
+        const result = getDateGroup(tuesday.toISOString(), now);
+        expect(result).toBe("thisWeek");
+        return;
+      }
+    }
+    const tuesday = new Date(now);
+    tuesday.setDate(now.getDate() - mondayOffset + 1);
+    if (tuesday.toDateString() !== now.toDateString()) {
+      const yesterday = new Date(now);
+      yesterday.setDate(yesterday.getDate() - 1);
+      if (tuesday.toDateString() !== yesterday.toDateString()) {
+        const result = getDateGroup(tuesday.toISOString(), now);
+        expect(result).toBe("thisWeek");
+        return;
+      }
+    }
+    expect(true).toBe(true);
+  });
+
+  test("本月内的日期返回 thisMonth", () => {
+    const now = new Date(2026, 5, 15);
+    const earlier = new Date(2026, 5, 3);
+    const result = getDateGroup(earlier.toISOString(), now);
+    expect(result).toBe("thisMonth");
+  });
+
+  test("更早的日期返回 earlier", () => {
+    const now = new Date(2026, 5, 15);
+    const earlier = new Date(2026, 3, 1);
+    const result = getDateGroup(earlier.toISOString(), now);
+    expect(result).toBe("earlier");
+  });
+});
+
+describe("groupByDate", () => {
+  test("按 dateField 分组并返回有序结果", () => {
+    const now = new Date();
+    const items = [
+      { id: "1", title: "今天", updatedAt: now.toISOString() },
+      { id: "2", title: "昨天", updatedAt: makeDate(1) },
+      { id: "3", title: "更早", updatedAt: makeDate(60) },
+    ];
+
+    const groups = groupByDate(items, "updatedAt");
+
+    const todayGroup = groups.find((g) => g.key === "today")!;
+    expect(todayGroup.items.length).toBe(1);
+    expect(todayGroup.items[0]!.id).toBe("1");
+
+    const yesterdayGroup = groups.find((g) => g.key === "yesterday")!;
+    expect(yesterdayGroup.items.length).toBe(1);
+
+    const earlierGroup = groups.find((g) => g.key === "earlier")!;
+    expect(earlierGroup.items.length).toBe(1);
+
+    const emptyGroups = groups.filter((g) => g.key === "thisWeek" || g.key === "thisMonth");
+    emptyGroups.forEach((g) => {
+      expect(g.items.length).toBe(0);
+    });
+  });
+
+  test("空数组返回所有空分组", () => {
+    const groups = groupByDate([] as Array<{ updatedAt: string }>, "updatedAt");
+    expect(groups.length).toBe(5);
+    groups.forEach((g) => {
+      expect(g.items.length).toBe(0);
+    });
+  });
+});