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>
+  );
+}