feat(workbench): 新增收集箱页面 — 素材列表/详情分栏布局 + 新增/选中/删除 mock 交互

src/web/features/inbox/components/AddMaterialModal.tsx

@@ -0,0 +1,67 @@
+import { App as AntApp, DatePicker, Form, Input, Modal } from "antd";
+import dayjs from "dayjs";
+import { useEffect } from "react";
+
+import type { Material } from "../types";
+
+interface AddMaterialModalProps {
+  onAdd: (material: Material) => void;
+  onOpenChange: (open: boolean) => void;
+  open: boolean;
+}
+
+interface FormValues {
+  associatedDate: dayjs.Dayjs;
+  description: string;
+}
+
+export function AddMaterialModal({ onAdd, onOpenChange, open }: AddMaterialModalProps) {
+  const { message } = AntApp.useApp();
+  const [form] = Form.useForm<FormValues>();
+
+  useEffect(() => {
+    if (!open) return;
+    form.resetFields();
+  }, [form, open]);
+
+  const handleFinish = (values: FormValues) => {
+    const material: Material = {
+      associatedDate: values.associatedDate.format("YYYY-MM-DD"),
+      createdAt: new Date().toISOString(),
+      description: values.description,
+      id: crypto.randomUUID(),
+    };
+    onAdd(material);
+    message.success("素材已添加");
+    onOpenChange(false);
+  };
+
+  return (
+    <Modal
+      destroyOnHidden
+      okText="确定"
+      onCancel={() => onOpenChange(false)}
+      onOk={() => void form.submit()}
+      open={open}
+      title="新增素材"
+    >
+      <Form
+        form={form}
+        initialValues={{ associatedDate: dayjs() }}
+        layout="vertical"
+        onFinish={(values) => void handleFinish(values)}
+      >
+        <Form.Item
+          label="描述"
+          name="description"
+          rules={[{ message: "请输入描述", required: true, whitespace: true }]}
+        >
+          <Input.TextArea maxLength={500} placeholder="请输入素材描述" />
+        </Form.Item>
+        <Form.Item label="关联时间" name="associatedDate" rules={[{ message: "请选择关联时间", required: true }]}>
+          <DatePicker className="app-inbox-datepicker" />
+        </Form.Item>
+      </Form>
+    </Modal>
+  );
+}

src/web/features/inbox/components/MaterialCard.tsx

@@ -0,0 +1,37 @@
+import { DeleteOutlined } from "@ant-design/icons";
+import { Button, Card, Flex, Typography } from "antd";
+
+import type { Material } from "../types";
+
+import { formatRelativeTime } from "../../../shared/utils/time";
+
+interface MaterialCardProps {
+  material: Material;
+  onDelete: () => void;
+  onSelect: () => void;
+  selected: boolean;
+}
+
+export function MaterialCard({ material, onDelete, onSelect, selected }: MaterialCardProps) {
+  return (
+    <Card className={selected ? "app-inbox-card-selected" : undefined} hoverable onClick={onSelect} size="small">
+      <Typography.Paragraph ellipsis={{ rows: 3 }}>{material.description}</Typography.Paragraph>
+      <Flex align="center" justify="space-between">
+        <Typography.Text type="secondary">
+          {material.associatedDate} · {formatRelativeTime(material.createdAt)}
+        </Typography.Text>
+        <Button
+          aria-label="删除"
+          danger
+          icon={<DeleteOutlined />}
+          onClick={(e) => {
+            e.stopPropagation();
+            onDelete();
+          }}
+          size="small"
+          type="text"
+        />
+      </Flex>
+    </Card>
+  );
+}

src/web/features/inbox/components/MaterialContent.tsx

@@ -0,0 +1,32 @@
+import { Card, Descriptions, Empty, Typography } from "antd";
+
+import type { Material } from "../types";
+
+import { formatRelativeTime } from "../../../shared/utils/time";
+
+interface MaterialContentProps {
+  material: Material | null;
+}
+
+export function MaterialContent({ material }: MaterialContentProps) {
+  if (!material) {
+    return (
+      <div className="app-inbox-content">
+        <Empty description="请在左侧选择素材" />
+      </div>
+    );
+  }
+
+  return (
+    <div className="app-inbox-content">
+      <Typography.Title level={4}>素材详情</Typography.Title>
+      <Card>
+        <Typography.Paragraph>{material.description}</Typography.Paragraph>
+        <Descriptions column={1} size="small">
+          <Descriptions.Item label="关联时间">{material.associatedDate}</Descriptions.Item>
+          <Descriptions.Item label="创建时间">{formatRelativeTime(material.createdAt)}</Descriptions.Item>
+        </Descriptions>
+      </Card>
+    </div>
+  );
+}

src/web/features/inbox/components/MaterialList.tsx

@@ -0,0 +1,39 @@
+import { PlusOutlined } from "@ant-design/icons";
+import { Button, Empty } from "antd";
+
+import type { Material } from "../types";
+
+import { MaterialCard } from "./MaterialCard";
+
+interface MaterialListProps {
+  materials: readonly Material[];
+  onAddClick: () => void;
+  onDelete: (id: string) => void;
+  onSelect: (id: string) => void;
+  selectedId: null | string;
+}
+
+export function MaterialList({ materials, onAddClick, onDelete, onSelect, selectedId }: MaterialListProps) {
+  return (
+    <div className="app-inbox-sidebar">
+      <Button block icon={<PlusOutlined />} onClick={onAddClick} type="primary">
+        新增素材
+      </Button>
+      <div className="app-inbox-list">
+        {materials.length === 0 ? (
+          <Empty description="暂无素材" image={Empty.PRESENTED_IMAGE_SIMPLE} />
+        ) : (
+          materials.map((material) => (
+            <MaterialCard
+              key={material.id}
+              material={material}
+              onDelete={() => onDelete(material.id)}
+              onSelect={() => onSelect(material.id)}
+              selected={material.id === selectedId}
+            />
+          ))
+        )}
+      </div>
+    </div>
+  );
+}

src/web/features/inbox/index.tsx

@@ -0,0 +1,39 @@
+import { useState } from "react";
+
+import type { Material } from "./types";
+
+import { AddMaterialModal } from "./components/AddMaterialModal";
+import { MaterialContent } from "./components/MaterialContent";
+import { MaterialList } from "./components/MaterialList";
+
+export function InboxPage() {
+  const [materials, setMaterials] = useState<Material[]>([]);
+  const [modalOpen, setModalOpen] = useState(false);
+  const [selectedId, setSelectedId] = useState<null | string>(null);
+
+  const selectedMaterial = materials.find((m) => m.id === selectedId) ?? null;
+
+  const handleAdd = (material: Material) => {
+    setMaterials((prev) => [...prev, material].sort((a, b) => b.associatedDate.localeCompare(a.associatedDate)));
+    setSelectedId(material.id);
+  };
+
+  const handleDelete = (id: string) => {
+    setMaterials((prev) => prev.filter((m) => m.id !== id));
+    if (selectedId === id) setSelectedId(null);
+  };
+
+  return (
+    <div className="app-inbox-page">
+      <MaterialList
+        materials={materials}
+        onAddClick={() => setModalOpen(true)}
+        onDelete={handleDelete}
+        onSelect={setSelectedId}
+        selectedId={selectedId}
+      />
+      <MaterialContent material={selectedMaterial} />
+      <AddMaterialModal onAdd={handleAdd} onOpenChange={setModalOpen} open={modalOpen} />
+    </div>
+  );
+}

src/web/features/inbox/types.ts

@@ -0,0 +1,6 @@
+export interface Material {
+  associatedDate: string;
+  createdAt: string;
+  description: string;
+  id: string;
+}

src/web/layouts/workbench-layout/routes.ts

@@ -1,10 +1,11 @@
-import { MessageOutlined } from "@ant-design/icons";
+import { InboxOutlined, MessageOutlined } from "@ant-design/icons";
 import { createElement } from "react";
 
 import type { MenuItemConfig } from "../../menu";
 
 export const WORKBENCH_MENU_ITEMS: readonly MenuItemConfig[] = [
   { icon: createElement(MessageOutlined), label: "聊天室", path: "", value: "chat" },
+  { icon: createElement(InboxOutlined), label: "收集箱", path: "inbox", value: "inbox" },
 ] as const;
 
 export function buildWorkbenchPath(projectId: string, relativePath = ""): string {

src/web/routes.tsx

@@ -2,6 +2,7 @@ import { Route, Routes } from "react-router";
 
 import { ChatPage } from "./features/chat/ChatPage";
 import { DashboardPage } from "./features/dashboard";
+import { InboxPage } from "./features/inbox";
 import { ModelsPage } from "./features/models";
 import { NotFoundPage } from "./features/not-found";
 import { ProjectsPage } from "./features/projects";
@@ -19,6 +20,7 @@ export function AppRoutes() {
       <Route element={<WorkbenchProjectGate />} path="/workbench/:projectId">
         <Route element={<ChatPage />} path="" />
         <Route element={<ChatPage />} path="chat" />
+        <Route element={<InboxPage />} path="inbox" />
       </Route>
       <Route element={<NotFoundPage />} path="*" />
     </Routes>

src/web/styles.css

@@ -264,3 +264,46 @@ body {
 .x-markdown-dark .x-md-table-wrap {
   overflow-x: auto;
 }
+
+.app-inbox-page {
+  display: flex;
+  height: 100%;
+  overflow: hidden;
+}
+
+.app-inbox-sidebar {
+  display: flex;
+  width: 280px;
+  flex-direction: column;
+  gap: var(--ant-margin-sm);
+  padding: var(--ant-padding-sm);
+  border-right: 1px solid var(--ant-color-border-secondary);
+  background: var(--ant-color-bg-container);
+}
+
+.app-inbox-list {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: var(--ant-margin-xs);
+  min-height: 0;
+  overflow-y: auto;
+}
+
+.app-inbox-content {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-height: 0;
+  min-width: 0;
+  padding: var(--ant-padding-xl);
+  overflow-y: auto;
+}
+
+.app-inbox-card-selected {
+  box-shadow: 0 0 0 1px var(--ant-color-primary);
+}
+
+.app-inbox-datepicker {
+  width: 100%;
+}

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

@@ -0,0 +1,77 @@
+import { fireEvent, screen, waitFor } from "@testing-library/react";
+import { describe, expect, test, vi } from "bun:test";
+import { createElement } from "react";
+
+import type { Material } from "../../../../src/web/features/inbox/types";
+
+import { AddMaterialModal } from "../../../../src/web/features/inbox/components/AddMaterialModal";
+import { renderWithProviders } from "../../test-utils";
+
+describe("AddMaterialModal", () => {
+  test("打开时渲染表单字段", () => {
+    renderWithProviders(
+      createElement(AddMaterialModal, {
+        onAdd: vi.fn(),
+        onOpenChange: vi.fn(),
+        open: true,
+      }),
+    );
+    expect(screen.getByText("新增素材")).not.toBeNull();
+    expect(screen.getByText("描述")).not.toBeNull();
+    expect(screen.getByText("关联时间")).not.toBeNull();
+  });
+
+  test("关闭时不渲染", () => {
+    renderWithProviders(
+      createElement(AddMaterialModal, {
+        onAdd: vi.fn(),
+        onOpenChange: vi.fn(),
+        open: false,
+      }),
+    );
+    expect(screen.queryByText("新增素材")).toBeNull();
+  });
+
+  test("提交空表单显示必填校验", async () => {
+    renderWithProviders(
+      createElement(AddMaterialModal, {
+        onAdd: vi.fn(),
+        onOpenChange: vi.fn(),
+        open: true,
+      }),
+    );
+
+    fireEvent.click(screen.getByText("确 定"));
+
+    await waitFor(() => {
+      expect(screen.getByText("请输入描述")).not.toBeNull();
+    });
+  });
+
+  test("点击确定触发表单提交", async () => {
+    const onAdd = vi.fn<(material: Material) => void>();
+    renderWithProviders(
+      createElement(AddMaterialModal, {
+        onAdd,
+        onOpenChange: vi.fn(),
+        open: true,
+      }),
+    );
+
+    const textarea = screen.getByPlaceholderText("请输入素材描述");
+    fireEvent.change(textarea, { target: { value: "测试描述" } });
+
+    fireEvent.click(screen.getByText("确 定"));
+
+    await waitFor(() => {
+      expect(onAdd).toHaveBeenCalledTimes(1);
+    });
+
+    const callArgs = onAdd.mock.calls[0];
+    expect(callArgs).toBeDefined();
+    const calledMaterial = callArgs![0];
+    expect(calledMaterial.description).toBe("测试描述");
+    expect(calledMaterial.associatedDate).toMatch(/^\d{4}-\d{2}-\d{2}$/);
+    expect(calledMaterial.id).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,63 @@
+import { fireEvent, screen, waitFor } from "@testing-library/react";
+import { describe, expect, test } from "bun:test";
+import { createElement } from "react";
+
+import { InboxPage } from "../../../../src/web/features/inbox";
+import { renderWithProviders } from "../../test-utils";
+
+describe("InboxPage", () => {
+  test("初始状态显示空状态提示", () => {
+    renderWithProviders(createElement(InboxPage));
+    expect(screen.getByText("暂无素材")).not.toBeNull();
+    expect(screen.getByText("请在左侧选择素材")).not.toBeNull();
+  });
+
+  test("新增素材后列表追加且自动选中", async () => {
+    renderWithProviders(createElement(InboxPage));
+
+    fireEvent.click(screen.getByRole("button", { name: /新增素材/ }));
+
+    await waitFor(() => {
+      expect(screen.getByText("新增素材", { selector: ".ant-modal-title" })).not.toBeNull();
+    });
+
+    const textarea = screen.getByPlaceholderText("请输入素材描述");
+    fireEvent.change(textarea, { target: { value: "新增的素材" } });
+
+    fireEvent.click(screen.getByText("确 定"));
+
+    await waitFor(() => {
+      expect(screen.getByText("新增的素材")).not.toBeNull();
+    });
+
+    expect(screen.getByText("素材详情")).not.toBeNull();
+    expect(screen.queryByText("暂无素材")).toBeNull();
+    expect(screen.queryByText("请在左侧选择素材")).toBeNull();
+  });
+
+  test("删除素材后列表更新", async () => {
+    renderWithProviders(createElement(InboxPage));
+
+    fireEvent.click(screen.getByRole("button", { name: /新增素材/ }));
+
+    await waitFor(() => {
+      expect(screen.getByText("新增素材", { selector: ".ant-modal-title" })).not.toBeNull();
+    });
+
+    const textarea = screen.getByPlaceholderText("请输入素材描述");
+    fireEvent.change(textarea, { target: { value: "待删除的素材" } });
+
+    fireEvent.click(screen.getByText("确 定"));
+
+    await waitFor(() => {
+      expect(screen.getByText("待删除的素材")).not.toBeNull();
+    });
+
+    fireEvent.click(screen.getByLabelText("删除"));
+
+    await waitFor(() => {
+      expect(screen.getByText("暂无素材")).not.toBeNull();
+      expect(screen.getByText("请在左侧选择素材")).not.toBeNull();
+    });
+  });
+});

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

@@ -0,0 +1,74 @@
+import { fireEvent, screen } from "@testing-library/react";
+import { describe, expect, test, vi } from "bun:test";
+import { createElement } from "react";
+
+import type { Material } from "../../../../src/web/features/inbox/types";
+
+import { MaterialCard } from "../../../../src/web/features/inbox/components/MaterialCard";
+import { renderWithProviders } from "../../test-utils";
+
+const MOCK_MATERIAL: Material = {
+  associatedDate: "2026-06-03",
+  createdAt: new Date().toISOString(),
+  description: "测试素材描述",
+  id: "test-id",
+};
+
+describe("MaterialCard", () => {
+  test("渲染素材描述和日期信息", () => {
+    renderWithProviders(
+      createElement(MaterialCard, {
+        material: MOCK_MATERIAL,
+        onDelete: vi.fn(),
+        onSelect: vi.fn(),
+        selected: false,
+      }),
+    );
+    expect(screen.getByText("测试素材描述")).not.toBeNull();
+    expect(screen.getByText(/2026-06-03/)).not.toBeNull();
+  });
+
+  test("点击卡片触发 onSelect", () => {
+    const onSelect = vi.fn();
+    renderWithProviders(
+      createElement(MaterialCard, {
+        material: MOCK_MATERIAL,
+        onDelete: vi.fn(),
+        onSelect,
+        selected: false,
+      }),
+    );
+    const card = screen.getByText("测试素材描述").closest(".ant-card")!;
+    fireEvent.click(card);
+    expect(onSelect).toHaveBeenCalledTimes(1);
+  });
+
+  test("点击删除按钮触发 onDelete 且不触发 onSelect", () => {
+    const onDelete = vi.fn();
+    const onSelect = vi.fn();
+    renderWithProviders(
+      createElement(MaterialCard, {
+        material: MOCK_MATERIAL,
+        onDelete,
+        onSelect,
+        selected: false,
+      }),
+    );
+    fireEvent.click(screen.getByLabelText("删除"));
+    expect(onDelete).toHaveBeenCalledTimes(1);
+    expect(onSelect).not.toHaveBeenCalled();
+  });
+
+  test("选中状态添加 app-inbox-card-selected 类", () => {
+    renderWithProviders(
+      createElement(MaterialCard, {
+        material: MOCK_MATERIAL,
+        onDelete: vi.fn(),
+        onSelect: vi.fn(),
+        selected: true,
+      }),
+    );
+    const card = screen.getByText("测试素材描述").closest(".app-inbox-card-selected");
+    expect(card).not.toBeNull();
+  });
+});

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

@@ -0,0 +1,29 @@
+import { screen } from "@testing-library/react";
+import { describe, expect, test } from "bun:test";
+import { createElement } from "react";
+
+import type { Material } from "../../../../src/web/features/inbox/types";
+
+import { MaterialContent } from "../../../../src/web/features/inbox/components/MaterialContent";
+import { renderWithProviders } from "../../test-utils";
+
+const MOCK_MATERIAL: Material = {
+  associatedDate: "2026-06-03",
+  createdAt: new Date().toISOString(),
+  description: "详细描述内容",
+  id: "test-id",
+};
+
+describe("MaterialContent", () => {
+  test("未选中时显示空状态提示", () => {
+    renderWithProviders(createElement(MaterialContent, { material: null }));
+    expect(screen.getByText("请在左侧选择素材")).not.toBeNull();
+  });
+
+  test("选中时展示素材详情", () => {
+    renderWithProviders(createElement(MaterialContent, { material: MOCK_MATERIAL }));
+    expect(screen.getByText("素材详情")).not.toBeNull();
+    expect(screen.getByText("详细描述内容")).not.toBeNull();
+    expect(screen.getByText("2026-06-03")).not.toBeNull();
+  });
+});

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

@@ -0,0 +1,67 @@
+import { screen } from "@testing-library/react";
+import { describe, expect, test, vi } from "bun:test";
+import { createElement } from "react";
+
+import type { Material } from "../../../../src/web/features/inbox/types";
+
+import { MaterialList } from "../../../../src/web/features/inbox/components/MaterialList";
+import { renderWithProviders } from "../../test-utils";
+
+const MOCK_MATERIALS: Material[] = [
+  {
+    associatedDate: "2026-06-03",
+    createdAt: new Date().toISOString(),
+    description: "素材一",
+    id: "id-1",
+  },
+  {
+    associatedDate: "2026-06-02",
+    createdAt: new Date().toISOString(),
+    description: "素材二",
+    id: "id-2",
+  },
+];
+
+describe("MaterialList", () => {
+  test("列表为空时显示暂无素材", () => {
+    renderWithProviders(
+      createElement(MaterialList, {
+        materials: [],
+        onAddClick: vi.fn(),
+        onDelete: vi.fn(),
+        onSelect: vi.fn(),
+        selectedId: null,
+      }),
+    );
+    expect(screen.getByText("暂无素材")).not.toBeNull();
+  });
+
+  test("渲染素材卡片列表", () => {
+    renderWithProviders(
+      createElement(MaterialList, {
+        materials: MOCK_MATERIALS,
+        onAddClick: vi.fn(),
+        onDelete: vi.fn(),
+        onSelect: vi.fn(),
+        selectedId: null,
+      }),
+    );
+    expect(screen.getByText("素材一")).not.toBeNull();
+    expect(screen.getByText("素材二")).not.toBeNull();
+  });
+
+  test("点击新增素材按钮触发 onAddClick", () => {
+    const onAddClick = vi.fn();
+    renderWithProviders(
+      createElement(MaterialList, {
+        materials: [],
+        onAddClick,
+        onDelete: vi.fn(),
+        onSelect: vi.fn(),
+        selectedId: null,
+      }),
+    );
+    screen.getByText("新增素材").click();
+    expect(onAddClick).toHaveBeenCalledTimes(1);
+  });
+});

tests/web/routes/workbench.test.tsx

@@ -120,4 +120,34 @@ describe("Workbench 路由", () => {
       { timeout: 10000 },
     );
   });
+
+  test("Workbench 收集箱路由可达", async () => {
+    createMockHandler();
+
+    renderWithProviders(createElement(App), {
+      initialRoute: `/workbench/${MOCK_PROJECT.id}/inbox`,
+    });
+
+    await waitFor(
+      () => {
+        expect(screen.getByText("新增素材")).not.toBeNull();
+      },
+      { timeout: 10000 },
+    );
+  });
+
+  test("Workbench 显示收集箱菜单", async () => {
+    createMockHandler();
+
+    renderWithProviders(createElement(App), {
+      initialRoute: `/workbench/${MOCK_PROJECT.id}`,
+    });
+
+    await waitFor(
+      () => {
+        expect(screen.getByText("收集箱")).not.toBeNull();
+      },
+      { timeout: 10000 },
+    );
+  });
 });