# 测试方案 — 字段悬浮高亮、电子签上传与手术者签名联动（2026-04-17-11-34-24）

## 一、编译检查

- 执行 `npm run lint`（`tsc --noEmit`），确保全量 TypeScript 无编译错误。

## 二、功能验证步骤

### 测试 1：TemplateManage 字段悬浮高亮
1. 进入【模板管理】，选择默认模板。
2. 将鼠标悬浮在右侧字段库中的"姓名"按钮上（不点击）。
3. 观察编辑器中"姓名"对应的智能字段方框，确认出现蓝色外发光/背景变浅蓝色高亮。
4. 鼠标移开"姓名"按钮，确认高亮效果消失，字段框恢复原样。
5. 尝试悬浮其他字段按钮（如"手术名称"、"手术日期"），确认高亮定位准确。

### 测试 2：UserManage 电子签上传与压缩
1. 进入【用户管理】，点击任意医生用户的"编辑"按钮。
2. 在编辑弹窗中找到"电子签名"区域，点击"上传签名"。
3. 选择一张大于 500×500 像素的本地图片（如 1200×800 的 PNG/JPG）。
4. 确认上传后预览图显示正常，且图片已被等比例压缩（宽或高最大不超过 500px）。
5. 点击"保存用户"，刷新页面后再次编辑该用户，确认签名图片仍然保留。
6. 点击"清除签名"，确认预览图消失；保存后刷新，确认签名已清除。

### 测试 3：TemplateManage 新增"手术者签名"字段
1. 进入【模板管理】，查看右侧【插入字段】面板。
2. 确认分类列表中新增"图片"分类，下方有"手术者签名"按钮。
3. 点击"手术者签名"按钮，确认模板中插入一个智能字段方框（`data-bind="surgeonSignature"`）。
4. 再次点击"手术者签名"，确认弹出"已存在，请勿重复插入"的提示。

### 测试 4：ReportEditor 签名自动填充
1. 确保当前登录用户（如 admin）已通过测试 2 上传了电子签。
2. 进入【新建报告】或编辑已有报告，观察模板中的"手术者签名"方框。
3. 确认方框中自动显示了当前登录用户的签名图片（高度约 2 行文字）。
4. 在 UserManage 中清除当前用户的签名，返回 ReportEditor 刷新页面。
5. 确认"手术者签名"方框显示文本"【请上传电子签】"。

### 测试 5：签名图片排版与打印效果
1. 在 ReportEditor 中确认签名图片与周围文字行高协调，没有明显撑大段落间距。
2. 点击报告页面的"打印"按钮，在浏览器打印预览中观察签名图片。
3. 确认打印输出中签名图片高度仍然保持约 2 行文字，排版正常。

## 三、预期结果

- `npm run lint` 0 错误。
- TemplateManage 悬浮高亮响应迅速，定位准确。
- UserManage 电子签上传、压缩、清除、持久化均正常。
- TemplateManage 可插入"手术者签名"字段，且唯一性校验生效。
- ReportEditor 能自动根据当前用户签名状态填充图片或提示文本。
- 签名图片在编辑态和打印态均保持约 2 行文字高度，排版美观。