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

- 新增 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

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

@@ -1,21 +1,21 @@
-import { Card, Descriptions, Empty, Typography } from "antd";
+import { Card, Descriptions, Tag, Typography } from "antd";
 
 import type { Material } from "../types";
 
 import { formatRelativeTime } from "../../../shared/utils/time";
 
 interface MaterialContentProps {
-  material: Material | null;
+  material: Material;
 }
 
+const STATUS_MAP: Record<string, { color: string; label: string }> = {
+  approved: { color: "green", label: "已通过" },
+  discarded: { color: "red", label: "已放弃" },
+  pending: { color: "gold", label: "待审核" },
+};
+
 export function MaterialContent({ material }: MaterialContentProps) {
-  if (!material) {
-    return (
-      <div className="app-inbox-content">
-        <Empty description="请在左侧选择素材" />
-      </div>
-    );
-  }
+  const statusInfo = STATUS_MAP[material.status] ?? { color: "default", label: material.status };
 
   return (
     <div className="app-inbox-content">
@@ -23,6 +23,9 @@ export function MaterialContent({ material }: MaterialContentProps) {
       <Card>
         <Typography.Paragraph>{material.description}</Typography.Paragraph>
         <Descriptions column={1} size="small">
+          <Descriptions.Item label="状态">
+            <Tag color={statusInfo.color}>{statusInfo.label}</Tag>
+          </Descriptions.Item>
           <Descriptions.Item label="关联时间">{material.associatedDate}</Descriptions.Item>
           <Descriptions.Item label="创建时间">{formatRelativeTime(material.createdAt)}</Descriptions.Item>
         </Descriptions>