Files

admin 424407a17e feat: field hover highlight, e-signature upload, surgeon signature linkage

- 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)

2026-04-17 12:04:23 +08:00

4.0 KiB

Raw Blame History

需求分析 — 字段悬浮高亮、电子签上传与手术者签名联动（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 无编译错误。

4.0 KiB Raw Blame History Unescape Escape