Files

admin f7c7270053 fix: undo stack, field insertion wrap, backspace/delete precision; feat: signature size limit & isSigned control

- Replace direct DOM remove() with Range+execCommand('delete') in TemplateManage click and keydown handlers to restore undo stack
- Append &#8203; 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)

2026-04-17 12:41:07 +08:00

4.4 KiB

Raw Blame History

需求分析 — 撤销栈修复、字段删除交互优化与签名字段闭环（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 无编译错误。

4.4 KiB Raw Blame History Unescape Escape