admin
db5df13a05
- 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)
57 lines
3.5 KiB
Markdown
57 lines
3.5 KiB
Markdown
# 需求分析 — 模板字段唯一性、删除交互与报告批量导出（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` 字段值及报告元信息。
|