# 需求分析 — 模板字段唯一性、删除交互与报告批量导出(2026-04-17-10-21-18) ## 一、需求来源 用户反馈 TemplateManage 中智能字段存在无法删除和重复插入的问题,同时要求升级 ReportManage 的报告管理能力,支持单份/多份报告的结构化导出。 ## 二、具体需求拆解 ### 需求 1:模板字段唯一性校验 **问题**:`TemplateManage` 中点击字段库按钮插入智能字段时,同一个字段(如"姓名")可以被重复插入多次,导致模板混乱。 **期望**:每个 `data-bind` 对应的智能字段在编辑器中只能存在一份,若已存在则提示用户并阻止插入。 ### 需求 2:模板字段删除交互优化 **问题**:默认模板中的智能字段以及手动插入的智能字段,按下 Backspace/Delete 时经常无法删除(尤其是字段位于段落开头/结尾时,浏览器默认行为会误删父级 `

`)。 **期望**: - 键盘 Backspace/Delete 能正确删除相邻的智能字段。 - 为智能字段增加可视化删除按钮(类似图片占位符的 ×),用户可直接点击删除。 ### 需求 3:ReportManage 单报告导出(PDF / JSON) **期望**:在报告管理列表的每行操作列增加"导出"按钮,点击后弹出选项: - **导出 PDF**:调用现有的 `printDocument` 打印报告 HTML 内容,由用户在浏览器打印弹窗中选择"另存为 PDF"。 - **导出 JSON**:下载结构化 JSON 文件,文件内包含该报告所有 `data-bind` 对应字段的值( patientName、hospitalId、title、surgeryDate 等 ),以及报告元信息(id、createdAt 等)。 ### 需求 4:ReportManage 批量操作(复选框 + 批量删除 / 批量导出) **期望**: - 表格每行最左侧增加复选框,表头增加全选/反选复选框。 - 当有报告被选中时,表格上方显示批量操作栏,包含: - **批量删除**:确认后从 `localStorage` 中移除所有选中报告。 - **批量导出 PDF**:将选中报告的 `content` 按分页符拼接后调用 `printDocument`,一次性生成多页 PDF。 - **批量导出 JSON**:将选中报告数组导出为单个 JSON 文件下载。 ## 三、影响范围分析 | 文件 | 改动说明 | |------|----------| | `src/pages/TemplateManage.tsx` | `insertSmartField` 增加唯一性校验;增强 `keydown` 删除逻辑;给 `smart-field-wrapper` 增加删除按钮及点击事件处理。 | | `src/utils/defaultContent.ts` | 默认模板中预生成的 `smartField()` 需要包含删除按钮 HTML。 | | `src/index.css` | 增加 `.smart-field-wrapper .delete-btn` 的样式。 | | `src/pages/ReportManage.tsx` | 增加 `selectedIds` 状态、复选框列、批量操作栏、导出弹窗/下拉、单报告导出函数、批量导出函数。 | | `src/utils/print.ts` | 可能需要提供 `printDocument` 的复用,无需修改。 | ## 四、验收标准 - [ ] `TemplateManage` 中已存在的字段再次插入时弹出提示并被阻止。 - [ ] `TemplateManage` 中点击智能字段左上角的 × 可直接删除该字段。 - [ ] `TemplateManage` 中按 Backspace/Delete 可正确删除光标相邻的智能字段(包括段落边界场景)。 - [ ] `ReportManage` 操作列出现"导出"按钮,支持单报告 PDF/JSON 导出。 - [ ] `ReportManage` 表格出现复选框,支持全选/反选。 - [ ] 选中报告后显示批量操作栏,支持批量删除、批量 PDF 导出、批量 JSON 导出。 - [ ] 导出 JSON 的文件内容包含所有 `data-bind` 字段值及报告元信息。