From cfb3cb91f8a99dc59ace8c19342d37175aa40dd6 Mon Sep 17 00:00:00 2001 From: Administrator Date: Sat, 18 Apr 2026 23:44:57 +0800 Subject: [PATCH] =?UTF-8?q?2026-04-18-23-39-35=20-=20=E8=BF=BD=E5=8A=A0?= =?UTF-8?q?=E7=BB=8F=E9=AA=8C=E8=AE=B0=E5=BD=9537=EF=BC=9A=E4=B8=8B?= =?UTF-8?q?=E5=88=92=E7=BA=BF=E4=BF=AE=E5=A4=8D=E4=B8=8E=E8=A1=A8=E5=8D=95?= =?UTF-8?q?=E9=80=86=E5=90=91=E8=81=94=E5=8A=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 工程分析/经验记录.md | 35 +++++++++++++++++++++++++++++++++++ 1 file changed, 35 insertions(+) diff --git a/工程分析/经验记录.md b/工程分析/经验记录.md index c1989b1..c2f87aa 100644 --- 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。 +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}`，确保浏览器打印对话框识别正确的默认文件名 +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 内部 `` 标签。 +- 双向联动时，`useEffect` 中的 DOM style 操作需要在组件卸载或 `activeFieldKey` 清空时清除，避免残留高亮。当前实现中 `activeFieldKey` 为 `null` 时会遍历清除所有高亮，逻辑已覆盖。 +- 给容器 div 添加 `onClick` 时需注意事件冒泡：容器内的子元素（如 input、button）的点击事件会自然冒泡到容器，如果子元素有自己的 onClick 处理（如 dropdown 选项），需确保已调用 `stopPropagation()`。