From 7ab8c919e37fe7516e4b827964731fb379413ebc Mon Sep 17 00:00:00 2001 From: Administrator Date: Sat, 18 Apr 2026 23:24:56 +0800 Subject: [PATCH] =?UTF-8?q?2026-04-18-23-19-44=20-=20=E8=BF=BD=E5=8A=A0?= =?UTF-8?q?=E7=BB=8F=E9=AA=8C=E8=AE=B0=E5=BD=9536=EF=BC=9A=E4=B8=83?= =?UTF-8?q?=E9=A1=B9=E6=8E=92=E7=89=88=E4=B8=8E=E5=8A=9F=E8=83=BD=E4=BC=98?= =?UTF-8?q?=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 工程分析/经验记录.md | 46 ++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 46 insertions(+) diff --git a/工程分析/经验记录.md b/工程分析/经验记录.md index c327433..c1989b1 100644 --- a/工程分析/经验记录.md +++ b/工程分析/经验记录.md @@ -1104,3 +1104,49 @@ if ((settings.autoInsertDelay || 0) > 0) { - 当修改默认值（如 `useState(true)` → `useState(false)`）时，应同时检查所有回显/回退逻辑（如 `field.hasUnderline !== false` → `field.hasUnderline ?? false`），确保数据兼容性。 - 使用 `display:block; width:100%` 的绝对居中元素，必须显式设置 `text-align:center;` 以控制内部文本流的对齐方向。 - 批量替换字符串时，应通过 grep 验证所有匹配位置是否都已更新，避免遗漏（如此次 `TemplateManage.tsx` 中 handleEditorClick 的旧代码）。 + +--- + +## 记录 36：七项排版与功能优化集中实施 + +**A. 具体问题** +1. `.field-value` 输入框中的文字与正文不在同一基线上，视觉上向上偏移。 +2. 「姓名：」下方横线与文字之间距离过大。 +3. 「手术记录」标题与上方医院名称横线之间距离过大。 +4. Logo 占位符相对于医院名称文字整体偏右下。 +5. 导出 PDF 时浏览器默认文件名为「My Google AI Studio App.pdf」，而非自定义名称。 +6. 导出 JSON 文件名中的时间戳使用 UTC 时间，不符合国内用户习惯。 +7. 模板管理模块缺乏批量操作能力，只能逐个删除/导出。 + +**B. 产生问题原因** +1. `smartField()` 中使用了 `vertical-align:text-bottom` 和 `line-height:1.2;min-height:1.2em`，导致内联块元素基线计算偏移。 +2. 姓名栏 `

` 的 `padding-bottom:1px` 叠加 `line-height:1.2`，导致 border-bottom 距文字约 2-3px。 +3. 医院名称的 `margin-bottom:8px` 过大。 +4. Logo 位于 flex 容器中，使用默认的 `gap:12px` 和 `align-items:center`，位置不够精确。 +5. `printDocument()` 虽接受 `docTitle` 参数并写入 iframe 的 ``，但浏览器打印时优先使用父窗口的 `document.title`。 +6. `new Date().toISOString()` 返回 UTC 时间字符串。 +7. 模板列表 UI 仅设计了单条操作按钮，未设计复选框和批量操作状态。 + +**C. 解决问题方案** +1. **基线对齐修复**： + - `defaultContent.ts`：`vertical-align:text-bottom` → `vertical-align:baseline`；`line-height:1.2;min-height:1.2em` → `line-height:inherit;` + - `print.ts`：同步修改 `.smart-field-wrapper` 和 `.field-value` 的 `vertical-align:baseline` 和 `line-height:inherit` +2. **姓名栏间距**：`<p>` 的 `padding:0 0 1px 0` → `padding:0`；`line-height:1.2` → `line-height:1`，使 border-bottom 紧贴文字 +3. **手术记录间距**：医院名称 `margin-bottom:8px` → `margin-bottom:2px`；`padding-bottom:0` → `padding-bottom:1px` +4. **Logo 微调**：给 Logo 的 `<span>` 添加 `transform:translate(-5px,-5px)` +5. **PDF 文件名**：在 `printDocument()` 中保存并临时设置 `document.title = docTitle`，打印完成后恢复 +6. **北京时间**：统一替换所有 `new Date().toISOString()` 为 `new Date(Date.now() + 8 * 60 * 60 * 1000).toISOString().slice(0, 16)`，并保留原有的 `replace(/[:.]/g, '-')` +7. **模板批量操作**： + - 新增 `selectedIds` 状态 + - 新增 `handleBatchDelete` 和 `handleBatchExport` + - 模板卡片内增加复选框（阻止冒泡避免触发选中） + - 选中时显示批量操作浮动工具栏 + - 移除 `templates.length <= 1` 的单条删除限制，允许列表为空 + - 删除后自动同步 `currentTemplateId` 和 `selectedIds` + +**D. 后续如何避免问题** +- 排版微调时，应同时检查编辑器显示、打印预览两处的表现，因为 `print.ts` 中有独立的样式覆盖。 +- `vertical-align` 属性对内联块元素的基线影响显著，混合使用 `text-bottom`、`middle`、`baseline` 时需谨慎测试。 +- 浏览器打印的文件名行为不一致（有的用 iframe title，有的用父窗口 title），最稳妥的方案是在打印前后动态修改 `document.title`。 +- 批量操作 UI 中，复选框的点击事件必须 `stopPropagation()`，否则会触发卡片点击导致状态混乱。 +- 批量删除后必须同步清理 `selectedIds` 和 `currentTemplateId`，避免出现「选中已删除项」或「当前模板不存在」的异常状态。