# 需求分析 — 字段悬浮高亮、电子签上传与手术者签名联动（2026-04-17-11-34-24）

## 一、需求来源

用户提出四个关联需求：优化 TemplateManage 字段定位体验、增加用户电子签上传功能、在模板中新增手术者签名字段、并优化签名图片在编辑器及打印中的排版表现。

## 二、具体需求拆解

### 需求 1：TemplateManage 字段悬浮高亮定位

**期望**：当鼠标悬浮在右侧字段库中的某个字段按钮上时，编辑器中已插入的对应 `data-bind` 字段的 `.field-value` 框会有明显的视觉高亮（如边框发光、背景色变化），帮助用户快速定位该字段在模板中的位置。

### 需求 2：UserManage 电子签上传与前端压缩

**期望**：
- 在【用户管理】的用户编辑/新增弹窗中增加"电子签名"上传区域。
- 支持从本地选择图片文件（PNG/JPG 等）。
- 上传后利用 Canvas 在前端自动等比例压缩，使图片的长、宽最大不超过 500 像素。
- 压缩后的图片以 Base64（JPEG，质量 0.8，白色背景填充透明 PNG）形式存储在用户对象的 `signature` 字段中，并持久化到 `localStorage`。

### 需求 3：TemplateManage 新增"手术者签名"字段

**期望**：
- 在 `DEFAULT_FORM_FIELDS` 中新增一个系统锁定字段 `surgeonSignature`，分类为"图片"，类型为 `signature`。
- `TemplateManage` 的【插入字段】侧边栏中增加"图片"分类，包含"手术者签名"按钮。
- `ReportEditor` 中，当渲染到 `data-bind="surgeonSignature"` 的智能字段时，自动从 `currentUser.signature` 读取电子签图片并填充到 `.field-value` 中；若当前用户没有上传签名，则显示提示文本"【请上传电子签】"。

### 需求 4：签名图片在模板中的排版优化

**期望**：
- 签名图片在 `.field-value` 中显示时，高度应恰好约等于 2 行文字（约 `2.4em`），宽度等比例自适应。
- 图片垂直对齐方式需与周围文字协调，避免把行高撑得过大。
- 打印输出时（`printDocument` 及 `@media print`），签名图片保持同样的高度约束和排版效果。

## 三、影响范围分析

| 文件 | 改动说明 |
|------|----------|
| `src/types.ts` | `User` 接口增加 `signature?: string`；`FieldType` 增加 `'signature'`；`DEFAULT_FORM_FIELDS` 追加 `surgeonSignature` 字段。 |
| `src/pages/UserManage.tsx` | 用户编辑弹窗增加电子签上传组件；增加 `compressImage` 前端压缩工具函数；保存时将 `signature` 写入用户对象。 |
| `src/pages/TemplateManage.tsx` | 插入字段分类增加"图片"；字段按钮增加 `onMouseEnter` / `onMouseLeave` 事件实现悬浮高亮；`insertSmartField` 增加 `surgeonSignature` 的 HTML 输出（与普通字段一致但 `data-bind="surgeonSignature"`）。 |
| `src/pages/ReportEditor.tsx` | 在"表单 → 编辑器"同步的 `useEffect` 中，对 `surgeonSignature` 做特殊处理：填充 `<img>` 或提示文本。 |
| `src/index.css` | 增加 `.report-signature-img` 的样式规则（高度 `2.4em`、宽度 `auto`、`vertical-align: middle` 等）；增加打印媒体查询中的签名图片样式。 |
| `src/utils/print.ts` | 在打印 iframe 的 `<style>` 中增加 `.report-signature-img` 的样式规则。 |

## 四、验收标准

- [ ] 鼠标悬浮在 TemplateManage 右侧字段按钮上时，编辑器中对应字段框出现高亮边框/背景变化；移开后恢复。
- [ ] UserManage 中可上传电子签图片，上传后预览显示压缩后的图片。
- [ ] 压缩后的图片宽/高均不超过 500px，文件体积显著减小。
- [ ] TemplateManage 的插入字段列表中出现"图片"分类及"手术者签名"按钮，可正常插入。
- [ ] ReportEditor 中，`surgeonSignature` 字段自动显示当前登录用户的电子签图片；无签名时显示"【请上传电子签】"。
- [ ] 签名图片在编辑器中高度约 2 行文字，不破坏行高排版；打印输出效果一致。
- [ ] `npm run lint` 无编译错误。