2026-04-17-00-13-09 - 手术时间方框联动、动态字段分类管理体系、字段显隐控制、UI紧凑化优化

工程分析/经验记录.md

@@ -309,3 +309,36 @@ if ((settings.autoInsertDelay || 0) > 0) {
 - 对于需要在富文本中保护的固定文本，优先采用 `contenteditable="false"` 的包装器，而不是仅靠样式区分的普通 `<span>`。
 - 在 `State -> DOM` 的同步中务必加入差异判断，避免不必要的 DOM 重写导致输入焦点异常。
 - 数组类型字段（如 `surgeon`）在同步到方格前应先 `join(', ')` 转换为字符串，保持显示一致性。
+
+---
+
+## 记录 13：手术时间方框化、动态字段分类体系与 UI 紧凑化
+
+**A. 具体问题**
+1. 手术开始/终止时间在模板中是纯文本"时 分"，无法与右侧表单联动。
+2. `TemplateManage` 的字段库是静态列表，无法按医院需求自定义字段；`ReportEditor` 的右侧表单全部硬编码，每新增一个字段就要改代码。
+3. `field-value` 方格使用了 `min-width: 60px` 和上下 `padding`，导致行间距被撑大，排版松散。
+
+**B. 产生问题原因**
+1. 时间字段在 `defaultContent.ts` 中没有使用 `data-bind` 智能控件，且右侧表单将时间拆分为 `startHour`/`startMinute` 两个独立字段，缺少与方格的双向转换层。
+2. 早期设计采用了"硬编码表单"思路，字段名、类型、选项全部写死在 `ReportEditor.tsx` 的 JSX 中，不具备扩展性。
+3. `inline-block` 元素自带上下 `padding` 和 `border`，超出了默认行高，浏览器不得不增大整行高度以容纳它。
+
+**C. 解决问题方案**
+1. **时间方框联动**：
+   - 在 `defaultContent.ts` 中替换为 `data-bind="startTime"` 和 `data-bind="endTime"` 的方格。
+   - 在 `ReportEditor.tsx` 的 `handleEditorInput` 中，对 `startTime`/`endTime` 使用 `split(':')` 解析，反向更新 `startHour`/`startMinute`；在 `useEffect(reportData)` 中拼接 `HH:mm` 同步回方格。
+2. **动态字段体系**：
+   - 在 `types.ts` 中新增 `FieldType`、`FormField`、`DEFAULT_FORM_FIELDS`，定义字段的 key/label/分类/类型/显隐/锁定状态/选项。
+   - 使用 `localStorage` 的 `formFieldsConfig` 持久化字段配置。
+   - `TemplateManage.tsx` 右侧字段库重构为 Tab 结构：【插入字段】按"填空/单选/多选/时间"分组；【字段管理】支持新增、删除（非锁定字段）、显隐开关。
+   - `ReportEditor.tsx` 右侧基本信息表单改为遍历 `formFieldsConfig`、按 `type` switch-case 动态渲染（文本框/下拉框/多选标签/时间拆分下拉框）。
+3. **UI 紧凑化**：
+   - 将 `min-width` 从 `60px` 缩至 `32px`。
+   - 去除上下 `padding`，使用 `line-height: 1.2`、`font-size: inherit`、`vertical-align: text-bottom`。
+   - 背景色改为 `#f8fafc`（编辑态更明显），打印时恢复透明并只保留下划线。
+
+**D. 后续如何避免问题**
+- 对于需要将多个子字段映射到单一 UI 控件的场景，应在事件处理器和 `useEffect` 中各维护一层"拼接/解析"转换逻辑，保持底层数据结构不变。
+- 当表单字段超过 5 个且存在频繁变更需求时，应尽早从硬编码 JSX 转向"配置驱动渲染"（Config-Driven UI），降低后续维护成本。
+- 在 `contentEditable` 中插入 `inline-block` 元素时，务必通过 `line-height`、`vertical-align` 和最小化 `padding` 控制其对行高的影响，避免破坏段落排版的紧凑性。