2026-04-18-23-39-35 - 追加经验记录37：下划线修复与表单逆向联动

2026-04-18 23:44:57 +08:00
parent d5529a4998
commit cfb3cb91f8
1 changed files with 35 additions and 0 deletions
--- a/工程分析/经验记录.md
+++ b/工程分析/经验记录.md
@@ -1150,3 +1150,38 @@ if ((settings.autoInsertDelay || 0) > 0) {
 - 浏览器打印的文件名行为不一致（有的用 iframe title，有的用父窗口 title），最稳妥的方案是在打印前后动态修改 `document.title`。
 - 批量操作 UI 中，复选框的点击事件必须 `stopPropagation()`，否则会触发卡片点击导致状态混乱。
 - 批量删除后必须同步清理 `selectedIds` 和 `currentTemplateId`，避免出现「选中已删除项」或「当前模板不存在」的异常状态。
+
+---
+
+## 记录 37：下划线默认修复、PDF 文件名、间距缩紧、表单逆向联动
+
+**A. 具体问题**
+1. 模板管理中「患者姓名」「住院号」的「打印时显示下划线」默认仍为勾选状态，且勾选与否在打印时都失去下划线效果。
+2. 导出 PDF 时浏览器默认文件名为「My Google AI Studio App.pdf」，与 JSON 文件名不一致。
+3. `.field-value` 内文字偏右，打印时左右间距过大。
+4. ReportEditor 中点击右侧表单输入框时，中间模板内的对应字段不会高亮，也不会滚动定位。
+
+**B. 产生问题原因**
+1. `DEFAULT_FORM_FIELDS` 中 `patientName` 和 `hospitalId` 硬编码了 `hasUnderline: true`；`defaultContent.ts` 中 `smartField()` 直接给所有字段加 `.no-underline`；`print.ts` 中 `@media print` 的 `.field-value` 默认显示下划线、`.no-underline` 时隐藏，逻辑正确但默认模板中的字段全部带有 `.no-underline`。
+2. `printDocument()` 虽设置了 `document.title = docTitle`，但 iframe 内部的 HTML 缺少 `<title>` 标签，某些浏览器优先使用父窗口的原始 title。
+3. `smartField()` 中 `padding:0 4px; margin:0 2px` 撑开了左右间距。
+4. 之前只实现了「点击中间模板 → 右侧表单高亮滚动」的单向联动，右侧表单缺少触发 `activeFieldKey` 的事件绑定。
+
+**C. 解决问题方案**
+1. **下划线修复**：
+   - `src/types.ts`：`DEFAULT_FORM_FIELDS` 中 `patientName` 和 `hospitalId` 的 `hasUnderline: true` → `false`
+   - `src/utils/print.ts`：`@media print` 下 `.field-value` 的 `padding-bottom:1px` → `0px`，使下划线紧贴文字
+2. **PDF 文件名**：在 iframe HTML 的 `<head>` 中注入 `<title>${docTitle}</title>`，确保浏览器打印对话框识别正确的默认文件名
+3. **间距缩紧**：
+   - `src/utils/defaultContent.ts`：`padding:0 4px;margin:0 2px;min-width:32px` → `padding:0 2px;margin:0;min-width:24px;text-align:center`
+   - `src/utils/print.ts`：同步缩小非打印和打印样式中的 padding/margin
+4. **表单逆向联动**：
+   - `src/pages/ReportEditor.tsx`：新增 `useEffect` 监听 `activeFieldKey`，实时修改中间模板中对应 `.field-value` 的 `backgroundColor` 和 `boxShadow`，并调用 `scrollIntoView({ block: 'center' })`
+   - 给右侧所有字段类型（text/date/single_select/multi_select/time）的容器 `div` 添加 `onClick={() => setActiveFieldKey(field.key)}`
+   - 给之前缺少高亮样式的通用 time 字段容器补充了 `activeFieldKey` 高亮类名
+
+**D. 后续如何避免问题**
+- 当修改 `DEFAULT_FORM_FIELDS` 的默认值时，需意识到已有用户的 `localStorage` 中保存的旧配置不会自动更新。如果默认值变更影响核心功能，应考虑在应用启动时做配置迁移或版本校验。
+- iframe 打印的文件名行为在不同浏览器间存在差异（Chrome 用父窗口 title，Safari 可能用 iframe title），最稳妥的方案是同时设置父窗口 `document.title` 和 iframe 内部 `<title>` 标签。
+- 双向联动时，`useEffect` 中的 DOM style 操作需要在组件卸载或 `activeFieldKey` 清空时清除，避免残留高亮。当前实现中 `activeFieldKey` 为 `null` 时会遍历清除所有高亮，逻辑已覆盖。
+- 给容器 div 添加 `onClick` 时需注意事件冒泡：容器内的子元素（如 input、button）的点击事件会自然冒泡到容器，如果子元素有自己的 onClick 处理（如 dropdown 选项），需确保已调用 `stopPropagation()`。