Files

admin db5df13a05 feat: smart field uniqueness, delete button, bulk export in report manage

- TemplateManage: add uniqueness check for smart fields to prevent duplicate inserts
- Add red circular delete button to smart-field-wrapper (visible on hover via CSS)
- Enhance keydown handler to delete smart fields at block-level boundaries
- Update defaultContent.ts smartField() to include delete-btn
- ReportManage: add per-row checkboxes, select-all, bulk delete
- Add single-report export modal (PDF via printDocument, JSON via Blob)
- Add bulk export actions for PDF and JSON
- Update experience record (#16)

2026-04-17 10:32:07 +08:00

3.5 KiB

Raw Blame History

需求分析 — 模板字段唯一性、删除交互与报告批量导出（2026-04-17-10-21-18）

一、需求来源

用户反馈 TemplateManage 中智能字段存在无法删除和重复插入的问题，同时要求升级 ReportManage 的报告管理能力，支持单份/多份报告的结构化导出。

二、具体需求拆解

需求 1：模板字段唯一性校验

问题：TemplateManage 中点击字段库按钮插入智能字段时，同一个字段（如"姓名"）可以被重复插入多次，导致模板混乱。

期望：每个 data-bind 对应的智能字段在编辑器中只能存在一份，若已存在则提示用户并阻止插入。

需求 2：模板字段删除交互优化

问题：默认模板中的智能字段以及手动插入的智能字段，按下 Backspace/Delete 时经常无法删除（尤其是字段位于段落开头/结尾时，浏览器默认行为会误删父级 <p>）。

期望：

键盘 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 字段值及报告元信息。

3.5 KiB Raw Blame History Unescape Escape