2026-04-18-19-08-43 - 追加经验记录31：六项UI优化实施记录

工程分析/经验记录.md

@@ -942,3 +942,32 @@ if ((settings.autoInsertDelay || 0) > 0) {
 **D. 后续如何避免问题**
 - 当为 `image-placeholder` 引入新的核心属性（如 `data-mode`、`data-allow-source`）时，必须同步检索 `defaultContent.ts` 和任何预置模板文件，确保静态模板中的占位符结构与运行时插入逻辑保持一致。
 - 默认模板修改后，应通过「新建报告 → 检查 DOM」快速验证所有占位符是否携带了最新属性。
+
+---
+
+## 记录 31：六项 UI/UX 优化集中实施
+
+**A. 具体问题**
+用户提出六项体验优化需求：基础信息字段打印无下划线、编辑器字段联动高亮、视频上传按钮整合、视频面板间距紧凑化、签名与日期之间空行、图片占位符填充后高度自适应。
+
+**B. 产生问题原因**
+均为长期使用中积累的交互和排版细节问题：
+1. 默认模板的基础字段（姓名/性别/年龄/科别/床号/住院号）打印时默认带下划线，但临床场景中这些字段通常不需要下划线。
+2. 编辑器中点击正文 `field-value` 后右侧没有视觉反馈，用户不知道对应哪个输入框。
+3. 视频上传按钮独立占一行，浪费垂直空间。
+4. 视频面板各区域间距过大，挤压了关键帧列表的展示空间。
+5. 签名和日期之间缺少空行，排版拥挤。
+6. 图片占位符填充后仍保留固定高度（如 200px），导致图片下方出现大片空白。
+
+**C. 解决问题方案**
+1. **基础字段无下划线**：在 `defaultContent.ts` 的 `smartField()` 中硬编码 6 个 key（`patientName`, `patientGender`, `patientAge`, `department`, `bedNumber`, `hospitalId`），自动注入 `.no-underline` 类；同时保留 `hasUnderline` 配置机制供 TemplateManage 自定义。
+2. **字段联动高亮**：新增 `activeFieldKey` 状态；点击 `field-value` 时设置该状态并滚动到对应 `id={`input-${bindKey}`}` 元素；为右侧所有字段类型（text/date/single_select/multi_select/time）的容器统一添加 `p-2 -mx-2 rounded-xl transition-all duration-300 ${activeFieldKey === field.key ? 'bg-blue-50 ring-1 ring-accent shadow-sm' : ''}`。
+3. **视频按钮整合**：删除独立的大按钮，在缩略图滚动容器的首位插入缩小版按钮（`shrink-0 w-24 h-[68px]`），样式与视频卡片一致。
+4. **视频间距紧凑**：将 `space-y-4` 逐层改为 `space-y-2`；关键帧摘取标题区域改为 `pt-1 border-t border-border`。
+5. **签名空行**：在签名 `<p>` 和日期 `<p>` 之间插入 `<p style="margin:0;padding:0;line-height:1.5;">&nbsp;</p>`。
+6. **占位符高度自适应**：在 `fillPlaceholderSrc`、`fillPlaceholder`、`autoCaptureFrames`（ReportEditor）以及 `fillPlaceholderSrc`（TemplateManage）中，填充图片后统一设置 `placeholder.style.height = 'auto'; placeholder.style.width = 'auto'; placeholder.style.lineHeight = 'normal';`，并将图片 style 中的 `max-height:100%;object-fit:contain` 改为 `height:auto`。
+
+**D. 后续如何避免问题**
+- 当为 `image-placeholder` 修改填充后的样式行为时，必须同步检索所有填充入口（`fillPlaceholderSrc`、`fillPlaceholder`、自动帧插入、拖拽填充等），并同步到 `TemplateManage.tsx`。
+- 右侧表单字段容器样式如果统一（如高亮背景），应在所有字段类型的渲染分支中同步添加，避免某些类型遗漏。
+- 默认模板修改后应通过「新建报告 → 检查 DOM 结构」快速验证。