lanyuanxiaoyao/Alfred
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(inbox): 素材持久化 CRUD — 数据库表 + API + 前端接入

Browse Source 
- 新增 materials 表（id/projectId/description/associatedDate/status/createdAt/updatedAt）
- 新增 4 个后端 API 路由（list/create/get/delete）+ 13 个测试
- 新增 use-materials hooks（TanStack Query）
- 收集箱页面重构为三层架构（InboxPage + MaterialSidebar + MaterialDetailPanel）
- MaterialCard: Popconfirm 删除确认 + 粗粒度时间格式
- MaterialContent: 展示状态标签 + createdAt
- 更新开发文档 backend.md / frontend.md
This commit is contained in:
兰缘小妖
2026-06-03 14:53:23 +08:00
parent 5b09a16bc3
commit 21b557c255
29 changed files with 1629 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
tests/web/features/inbox/AddMaterialModal.test.tsx
View File

@@ -2,11 +2,21 @@ 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 type { CreateMaterialRequest, Material } from "../../../../src/shared/api";
import { AddMaterialModal } from "../../../../src/web/features/inbox/components/AddMaterialModal";
import { renderWithProviders } from "../../test-utils";
const MOCK_CREATED: Material = {
associatedDate: "2026-06-03",
createdAt: "2026-06-03T00:00:00.000Z",
description: "测试描述",
id: "new-id",
projectId: "project-1",
status: "pending",
updatedAt: "2026-06-03T00:00:00.000Z",
};
describe("AddMaterialModal", () => {
test("打开时渲染表单字段", () => {
renderWithProviders(
@@ -49,7 +59,8 @@ describe("AddMaterialModal", () => {
});
test("点击确定触发表单提交", async () => {
const onAdd = vi.fn<(material: Material) => void>();
const onAdd = vi.fn<(body: CreateMaterialRequest) => Promise<Material>>();
onAdd.mockResolvedValue(MOCK_CREATED);
renderWithProviders(
createElement(AddMaterialModal, {
onAdd,
@@ -69,9 +80,29 @@ describe("AddMaterialModal", () => {
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();
const calledBody = callArgs![0];
expect(calledBody.description).toBe("测试描述");
expect(calledBody.associatedDate).toMatch(/^\d{4}-\d{2}-\d{2}$/);
});
test("提交失败显示错误提示", async () => {
const onAdd = vi.fn<(body: CreateMaterialRequest) => Promise<Material>>();
onAdd.mockRejectedValue(new Error("网络错误"));
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);
});
});
});

113
tests/web/features/inbox/InboxPage.test.tsx
View File

@@ -2,18 +2,85 @@ import { fireEvent, screen, waitFor } from "@testing-library/react";
import { describe, expect, test } from "bun:test";
import { createElement } from "react";
import type { Project } from "../../../../src/shared/api";
import { InboxPage } from "../../../../src/web/features/inbox";
import { renderWithProviders } from "../../test-utils";
import { ProjectContext } from "../../../../src/web/shared/hooks/use-current-project";
import { installFetchMock, jsonResponse, renderWithProviders } from "../../test-utils";
const MOCK_PROJECT: Project = {
archivedAt: null,
createdAt: "2026-01-01T00:00:00.000Z",
description: "",
id: "project-1",
name: "测试项目",
status: "active",
updatedAt: "2026-01-01T00:00:00.000Z",
};
const EMPTY_LIST = { items: [], page: 1, pageSize: 20, total: 0 };
function makeMaterial(overrides: Partial<{ description: string; id: string }> = {}) {
return {
associatedDate: "2026-06-03",
createdAt: "2026-06-03T00:00:00.000Z",
description: overrides.description ?? "测试素材",
id: overrides.id ?? "mat-1",
projectId: "project-1",
status: "pending",
updatedAt: "2026-06-03T00:00:00.000Z",
};
}
function renderInboxPage() {
return renderWithProviders(
createElement(ProjectContext.Provider, {
children: createElement(InboxPage),
value: MOCK_PROJECT,
}),
);
}
describe("InboxPage", () => {
test("初始状态显示空状态提示", () => {
renderWithProviders(createElement(InboxPage));
expect(screen.getByText("暂无素材")).not.toBeNull();
test("初始状态显示空列表和空详情", async () => {
const calls = installFetchMock((call) => {
if (call.url.includes("/materials")) return jsonResponse(EMPTY_LIST);
return jsonResponse({});
});
renderInboxPage();
await waitFor(() => {
expect(screen.getByText("暂无素材")).not.toBeNull();
});
expect(screen.getByText("请在左侧选择素材")).not.toBeNull();
const listCall = calls.find((c) => c.url.includes("/materials") && c.method === "GET");
expect(listCall).toBeDefined();
});
test("新增素材后列表追加且自动选中", async () => {
renderWithProviders(createElement(InboxPage));
const createdId = "mat-new";
const created = makeMaterial({ description: "新增的素材", id: createdId });
installFetchMock((call) => {
if (call.method === "POST" && call.url.includes("/materials")) {
return jsonResponse({ material: created }, { status: 201 });
}
if (call.method === "GET" && call.url.includes("/materials/" + createdId)) {
return jsonResponse({ material: created });
}
if (call.method === "GET" && call.url.includes("/materials")) {
return jsonResponse({ ...EMPTY_LIST, items: [created], total: 1 });
}
return jsonResponse({});
});
renderInboxPage();
await waitFor(() => {
expect(screen.getByRole("button", { name: /新增素材/ })).not.toBeNull();
});
fireEvent.click(screen.getByRole("button", { name: /新增素材/ }));
@@ -27,27 +94,28 @@ describe("InboxPage", () => {
fireEvent.click(screen.getByText("确 定"));
await waitFor(() => {
expect(screen.getByText("新增的素材")).not.toBeNull();
const cards = screen.getAllByText("新增的素材");
expect(cards.length).toBeGreaterThanOrEqual(1);
});
expect(screen.getByText("素材详情")).not.toBeNull();
expect(screen.queryByText("暂无素材")).toBeNull();
expect(screen.queryByText("请在左侧选择素材")).toBeNull();
});
test("删除素材后列表更新", async () => {
renderWithProviders(createElement(InboxPage));
let deleted = false;
const material = makeMaterial({ description: "待删除的素材", id: "mat-del" });
fireEvent.click(screen.getByRole("button", { name: /新增素材/ }));
await waitFor(() => {
expect(screen.getByText("新增素材", { selector: ".ant-modal-title" })).not.toBeNull();
installFetchMock((call) => {
if (call.method === "DELETE" && call.url.includes("/materials/" + material.id)) {
deleted = true;
return new Response(null, { status: 204 });
}
if (call.method === "GET" && call.url.includes("/materials")) {
if (deleted) return jsonResponse(EMPTY_LIST);
return jsonResponse({ ...EMPTY_LIST, items: [material], total: 1 });
}
return jsonResponse({});
});
const textarea = screen.getByPlaceholderText("请输入素材描述");
fireEvent.change(textarea, { target: { value: "待删除的素材" } });
fireEvent.click(screen.getByText("确 定"));
renderInboxPage();
await waitFor(() => {
expect(screen.getByText("待删除的素材")).not.toBeNull();
@@ -55,9 +123,14 @@ describe("InboxPage", () => {
fireEvent.click(screen.getByLabelText("删除"));
await waitFor(() => {
expect(screen.getByText("确认删除该素材？")).not.toBeNull();
});
fireEvent.click(screen.getByText("删 除"));
await waitFor(() => {
expect(screen.getByText("暂无素材")).not.toBeNull();
expect(screen.getByText("请在左侧选择素材")).not.toBeNull();
});
});
});

30
tests/web/features/inbox/MaterialCard.test.tsx
View File

@@ -1,21 +1,24 @@
import { fireEvent, screen } from "@testing-library/react";
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 type { Material } from "../../../../src/shared/api";
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(),
createdAt: "2026-06-03T00:00:00.000Z",
description: "测试素材描述",
id: "test-id",
projectId: "project-1",
status: "pending",
updatedAt: "2026-06-03T00:00:00.000Z",
};
describe("MaterialCard", () => {
test("渲染素材描述和日期信息", () => {
test("渲染素材描述和创建时间", () => {
renderWithProviders(
createElement(MaterialCard, {
material: MOCK_MATERIAL,
@@ -25,7 +28,7 @@ describe("MaterialCard", () => {
}),
);
expect(screen.getByText("测试素材描述")).not.toBeNull();
expect(screen.getByText(/2026-06-03/)).not.toBeNull();
expect(screen.getByText("今天")).not.toBeNull();
});
test("点击卡片触发 onSelect", () => {
@@ -43,7 +46,7 @@ describe("MaterialCard", () => {
expect(onSelect).toHaveBeenCalledTimes(1);
});
test("点击删除按钮触发 onDelete 且不触发 onSelect", () => {
test("点击删除按钮弹出确认框，确认后触发 onDelete", async () => {
const onDelete = vi.fn();
const onSelect = vi.fn();
renderWithProviders(
@@ -55,11 +58,20 @@ describe("MaterialCard", () => {
}),
);
fireEvent.click(screen.getByLabelText("删除"));
expect(onDelete).toHaveBeenCalledTimes(1);
await waitFor(() => {
expect(screen.getByText("确认删除该素材？")).not.toBeNull();
});
fireEvent.click(screen.getByText("删 除"));
await waitFor(() => {
expect(onDelete).toHaveBeenCalledTimes(1);
});
expect(onSelect).not.toHaveBeenCalled();
});
test("选中状态添加 app-inbox-card-selected 类", () => {
test("选中状态不再使用 app-inbox-card-selected 类", () => {
renderWithProviders(
createElement(MaterialCard, {
material: MOCK_MATERIAL,
@@ -69,6 +81,6 @@ describe("MaterialCard", () => {
}),
);
const card = screen.getByText("测试素材描述").closest(".app-inbox-card-selected");
expect(card).not.toBeNull();
expect(card).toBeNull();
});
});

27
tests/web/features/inbox/MaterialContent.test.tsx
View File

@@ -2,28 +2,39 @@ 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 type { Material } from "../../../../src/shared/api";
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(),
createdAt: "2026-06-03T00:00:00.000Z",
description: "详细描述内容",
id: "test-id",
projectId: "project-1",
status: "pending",
updatedAt: "2026-06-03T00:00:00.000Z",
};
describe("MaterialContent", () => {
test("未选中时显示空状态提示", () => {
renderWithProviders(createElement(MaterialContent, { material: null }));
expect(screen.getByText("请在左侧选择素材")).not.toBeNull();
});
test("选中时展示素材详情", () => {
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();
expect(screen.getByText("待审核")).not.toBeNull();
});
test("展示已通过状态", () => {
const approved: Material = { ...MOCK_MATERIAL, status: "approved" };
renderWithProviders(createElement(MaterialContent, { material: approved }));
expect(screen.getByText("已通过")).not.toBeNull();
});
test("展示已放弃状态", () => {
const discarded: Material = { ...MOCK_MATERIAL, status: "discarded" };
renderWithProviders(createElement(MaterialContent, { material: discarded }));
expect(screen.getByText("已放弃")).not.toBeNull();
});
});

29
tests/web/features/inbox/MaterialList.test.tsx
View File

@@ -2,7 +2,7 @@ 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 type { Material } from "../../../../src/shared/api";
import { MaterialList } from "../../../../src/web/features/inbox/components/MaterialList";
import { renderWithProviders } from "../../test-utils";
@@ -10,15 +10,21 @@ import { renderWithProviders } from "../../test-utils";
const MOCK_MATERIALS: Material[] = [
{
associatedDate: "2026-06-03",
createdAt: new Date().toISOString(),
createdAt: "2026-06-03T00:00:00.000Z",
description: "素材一",
id: "id-1",
projectId: "project-1",
status: "pending",
updatedAt: "2026-06-03T00:00:00.000Z",
},
{
associatedDate: "2026-06-02",
createdAt: new Date().toISOString(),
createdAt: "2026-06-02T00:00:00.000Z",
description: "素材二",
id: "id-2",
projectId: "project-1",
status: "pending",
updatedAt: "2026-06-02T00:00:00.000Z",
},
];
@@ -26,6 +32,7 @@ describe("MaterialList", () => {
test("列表为空时显示暂无素材", () => {
renderWithProviders(
createElement(MaterialList, {
loading: false,
materials: [],
onAddClick: vi.fn(),
onDelete: vi.fn(),
@@ -39,6 +46,7 @@ describe("MaterialList", () => {
test("渲染素材卡片列表", () => {
renderWithProviders(
createElement(MaterialList, {
loading: false,
materials: MOCK_MATERIALS,
onAddClick: vi.fn(),
onDelete: vi.fn(),
@@ -54,6 +62,7 @@ describe("MaterialList", () => {
const onAddClick = vi.fn();
renderWithProviders(
createElement(MaterialList, {
loading: false,
materials: [],
onAddClick,
onDelete: vi.fn(),
@@ -64,4 +73,18 @@ describe("MaterialList", () => {
screen.getByText("新增素材").click();
expect(onAddClick).toHaveBeenCalledTimes(1);
});
test("加载中显示 Spin", () => {
renderWithProviders(
createElement(MaterialList, {
loading: true,
materials: [],
onAddClick: vi.fn(),
onDelete: vi.fn(),
onSelect: vi.fn(),
selectedId: null,
}),
);
expect(document.querySelector(".ant-spin")).not.toBeNull();
});
});