admin
424407a17e
- Add signature?: string to User type and 'signature' to FieldType - Add surgeonSignature field to DEFAULT_FORM_FIELDS (category: 图片) - UserManage: add canvas-based image compression (max 500px) and signature upload UI - TemplateManage: add hover highlight on field buttons via direct DOM style manipulation - TemplateManage: add '图片' category to field library for surgeonSignature insertion - ReportEditor: auto-fill surgeonSignature with currentUser.signature image or placeholder text - index.css & print.ts: add .report-signature-img styling (height 2.4em, vertical-align middle) - Update experience record (#18)
2.9 KiB
2.9 KiB
测试方案 — 字段悬浮高亮、电子签上传与手术者签名联动（2026-04-17-11-34-24）
一、编译检查
- 执行
npm run lint（tsc --noEmit），确保全量 TypeScript 无编译错误。
二、功能验证步骤
测试 1：TemplateManage 字段悬浮高亮
- 进入【模板管理】，选择默认模板。
- 将鼠标悬浮在右侧字段库中的"姓名"按钮上（不点击）。
- 观察编辑器中"姓名"对应的智能字段方框，确认出现蓝色外发光/背景变浅蓝色高亮。
- 鼠标移开"姓名"按钮，确认高亮效果消失，字段框恢复原样。
- 尝试悬浮其他字段按钮（如"手术名称"、"手术日期"），确认高亮定位准确。
测试 2：UserManage 电子签上传与压缩
- 进入【用户管理】，点击任意医生用户的"编辑"按钮。
- 在编辑弹窗中找到"电子签名"区域，点击"上传签名"。
- 选择一张大于 500×500 像素的本地图片（如 1200×800 的 PNG/JPG）。
- 确认上传后预览图显示正常，且图片已被等比例压缩（宽或高最大不超过 500px）。
- 点击"保存用户"，刷新页面后再次编辑该用户，确认签名图片仍然保留。
- 点击"清除签名"，确认预览图消失；保存后刷新，确认签名已清除。
测试 3：TemplateManage 新增"手术者签名"字段
- 进入【模板管理】，查看右侧【插入字段】面板。
- 确认分类列表中新增"图片"分类，下方有"手术者签名"按钮。
- 点击"手术者签名"按钮，确认模板中插入一个智能字段方框（
data-bind="surgeonSignature"）。 - 再次点击"手术者签名"，确认弹出"已存在，请勿重复插入"的提示。
测试 4：ReportEditor 签名自动填充
- 确保当前登录用户（如 admin）已通过测试 2 上传了电子签。
- 进入【新建报告】或编辑已有报告，观察模板中的"手术者签名"方框。
- 确认方框中自动显示了当前登录用户的签名图片（高度约 2 行文字）。
- 在 UserManage 中清除当前用户的签名，返回 ReportEditor 刷新页面。
- 确认"手术者签名"方框显示文本"【请上传电子签】"。
测试 5：签名图片排版与打印效果
- 在 ReportEditor 中确认签名图片与周围文字行高协调，没有明显撑大段落间距。
- 点击报告页面的"打印"按钮，在浏览器打印预览中观察签名图片。
- 确认打印输出中签名图片高度仍然保持约 2 行文字，排版正常。
三、预期结果
npm run lint0 错误。- TemplateManage 悬浮高亮响应迅速，定位准确。
- UserManage 电子签上传、压缩、清除、持久化均正常。
- TemplateManage 可插入"手术者签名"字段，且唯一性校验生效。
- ReportEditor 能自动根据当前用户签名状态填充图片或提示文本。
- 签名图片在编辑态和打印态均保持约 2 行文字高度，排版美观。