admin
f7c7270053
- Replace direct DOM remove() with Range+execCommand('delete') in TemplateManage click and keydown handlers to restore undo stack
- Append ​ zero-width space to smart-field-wrapper HTML in insertSmartField and defaultContent.ts to prevent unwanted line breaks
- Refactor ReportEditor surgeonSignature rendering to depend on isSigned field
- Add isSigned to DEFAULT_FORM_FIELDS (single_select: 已签字/未签字)
- Change surgeonSignature to visibleInForm=true, isSystemLocked=false
- Constrain signature image with max-width:120px, max-height:40px, object-fit:contain in CSS and print.ts
- Add weak-blocking signature validation prompts in saveReport('completed')
- Update experience record (#19)
68 lines
4.4 KiB
Markdown
68 lines
4.4 KiB
Markdown
# 需求分析 — 撤销栈修复、字段删除交互优化与签名字段闭环（2026-04-17-12-34-56）
|
||
|
||
## 一、需求来源
|
||
|
||
用户反馈 TemplateManage 中删除字段后撤销失效、插入字段导致非预期换行、Backspace/Delete 误删父级内容；同时希望优化手术者签名的业务逻辑闭环，包括尺寸约束、表单显隐控制及完成报告时的弱阻断提示。
|
||
|
||
## 二、具体需求拆解
|
||
|
||
### 需求 1：修复撤销（Undo）失效
|
||
|
||
**问题**：在 TemplateManage 中点击红色 × 或通过键盘删除智能字段后，点击工具栏的"撤销"按钮无法恢复被删除的字段。
|
||
|
||
**原因**：当前代码使用 `smartField.remove()` 和 `target.remove()` 直接操作 DOM，绕过了浏览器的原生撤销栈（undo stack）。
|
||
|
||
**期望**：删除字段的操作能被浏览器的 `execCommand('undo')` 正确撤销。
|
||
|
||
### 需求 2：修复插入字段换行与 Backspace/Delete 误删
|
||
|
||
**问题**：
|
||
- 在 TemplateManage 中插入"手术日期"或"手术者签名"后，字段框有时会直接跳到下一行。
|
||
- Backspace 键无法删除字段（无反应）。
|
||
- Delete 键会误删字段前面的大段文本（如"手术步骤、术中出现的情况及处理："）。
|
||
|
||
**期望**：
|
||
- 插入的字段保持在当前行内，不强制换行。
|
||
- Backspace/Delete 键能精准删除光标相邻的单个字段节点，不影响周围文本。
|
||
|
||
### 需求 3：签名图片尺寸约束与字段管理
|
||
|
||
**问题**：
|
||
- 当前签名图片没有最大尺寸限制，可能过大。
|
||
- "手术者签名"字段不在 ReportEditor 的右侧基本信息表单中显示，无法控制是否签字。
|
||
|
||
**期望**：
|
||
- 签名图片设置最大宽度 `120px`、最大高度 `40px`，等比例缩放（`object-fit: contain`）。
|
||
- 将 `surgeonSignature` 字段改为 `visibleInForm: true`、`isSystemLocked: false`，使其可在字段管理中显隐控制。
|
||
- 在 ReportEditor 右侧表单中增加"手术者签名确认"（`isSigned`）单选下拉框，选项为"已签字"、"未签字"，默认"未签字"。
|
||
- 模板中的 `surgeonSignature` 字段根据 `isSigned` 的值渲染：
|
||
- `isSigned === '已签字'` 且用户有签名图 → 显示等比例缩放后的签名图片。
|
||
- 其他情况 → 显示"【未签字】"。
|
||
|
||
### 需求 4：完成报告时的签名校验提示
|
||
|
||
**期望**：点击"完成报告"时：
|
||
- 若模板中存在 `data-bind="surgeonSignature"` 的字段，但 `isSigned !== '已签字'`，弹出 `confirm` 提示"模板中包含【手术者签名】字段，但您未选择'已签字'。是否继续完成报告？"，用户选择"取消"则中断保存，选择"确定"则继续保存。
|
||
- 若 `isSigned === '已签字'` 但当前用户未上传电子签名图片，弹出 `confirm` 提示"您选择了'已签字'，但账号尚未上传电子签名图片。报告中将不显示签名图片，是否继续完成？"，同样弱阻断（可继续保存）。
|
||
|
||
## 三、影响范围分析
|
||
|
||
| 文件 | 改动说明 |
|
||
|------|----------|
|
||
| `src/pages/TemplateManage.tsx` | 点击删除和键盘删除逻辑全部改用 `Selection + Range + execCommand('delete')`；`insertSmartField` 的 HTML 末尾增加 `​`（零宽空格）防止强制换行。 |
|
||
| `src/types.ts` | `surgeonSignature` 改为 `visibleInForm: true, isSystemLocked: false`；新增 `isSigned` 字段到 `DEFAULT_FORM_FIELDS`。 |
|
||
| `src/pages/ReportEditor.tsx` | `reportData` 初始值增加 `isSigned: '未签字'`；签名同步逻辑改为基于 `isSigned` 判断；`saveReport('completed')` 增加签名校验提示。 |
|
||
| `src/index.css` | 调整 `.report-signature-img` 为 `max-width: 120px; max-height: 40px; object-fit: contain;`。 |
|
||
| `src/utils/print.ts` | 打印样式中同步签名图片尺寸约束。 |
|
||
|
||
## 四、验收标准
|
||
|
||
- [ ] TemplateManage 中删除字段后，点击"撤销"按钮能正确恢复字段。
|
||
- [ ] TemplateManage 中插入字段后保持在当前行，不跳到下一行。
|
||
- [ ] Backspace/Delete 键能精准删除单个字段节点，不误删周围文本。
|
||
- [ ] ReportEditor 中签名图片最大 120×40px，等比例缩放。
|
||
- [ ] ReportEditor 右侧表单出现"手术者签名确认"下拉框（已签字/未签字）。
|
||
- [ ] 选择"已签字"且有签名图时，模板中显示签名图片；选择"未签字"或无签名图时显示"【未签字】"。
|
||
- [ ] 点击"完成报告"时，签名状态异常会弹出弱阻断提示，用户可取消或继续保存。
|
||
- [ ] `npm run lint` 无编译错误。
|