diff --git a/src/utils/print.ts b/src/utils/print.ts index e977e2a..9e2dcbd 100644 --- a/src/utils/print.ts +++ b/src/utils/print.ts @@ -42,7 +42,7 @@ export const printDocument = (htmlContent: string, docTitle: string = '图文报 .smart-field-wrapper .field-value { min-width: 24px; padding: 0 2px; margin: 0; border: 1px solid #cbd5e1; border-radius: 2px; display: inline-block; background: #f8fafc; color: #0f172a; line-height: inherit; font-size: inherit; vertical-align: baseline; box-sizing: border-box; outline: none; text-align: center; } .report-signature-img { max-width: 120px; max-height: 40px; width: auto; height: auto; object-fit: contain; vertical-align: middle; display: inline-block; } @media print { - .smart-field-wrapper .field-value { outline: none !important; box-shadow: none !important; border: none !important; border-bottom: 1px solid #000 !important; border-radius: 0 !important; background: transparent !important; padding: 0 2px 0px 2px !important; } + .smart-field-wrapper .field-value { outline: none !important; box-shadow: none !important; border: none !important; border-bottom: 1px solid #000 !important; border-radius: 0 !important; background: transparent !important; padding: 0 2px 0px 2px !important; line-height: 1 !important; } .smart-field-wrapper .field-value.no-underline { border-bottom: none !important; } } diff --git a/工程分析/实现方案-2026-04-19-00-13-20.md b/工程分析/实现方案-2026-04-19-00-13-20.md new file mode 100644 index 0000000..4b3434d --- /dev/null +++ b/工程分析/实现方案-2026-04-19-00-13-20.md @@ -0,0 +1,37 @@ +# 实现方案 —— 2026-04-19-00-13-20 + +## 方案目标 +使打印/PDF导出时 `.field-value` 的下划线紧贴文字底部。 + +## 修改点 + +### 修改文件:`src/utils/print.ts` + +在 `@media print` 的 `.smart-field-wrapper .field-value` 样式中增加 `line-height: 1 !important;`。 + +**原因**:即使 `padding-bottom` 已设为 `0px`,父级文档的 `line-height: 1.5` 仍会在文字下方保留不可见的行高留白。通过强制压缩行高到 `1`,可以消除底部留白,使 `border-bottom` 紧贴文字。 + +```css +@media print { + .smart-field-wrapper .field-value { + outline: none !important; + box-shadow: none !important; + border: none !important; + border-bottom: 1px solid #000 !important; + border-radius: 0 !important; + background: transparent !important; + padding: 0 2px 0px 2px !important; + line-height: 1 !important; + } + .smart-field-wrapper .field-value.no-underline { border-bottom: none !important; } +} +``` + +## 涉及文件及修改点 +| 文件 | 修改点 | +|------|--------| +| `src/utils/print.ts` | @media print 中 .field-value 增加 line-height: 1 !important | + +## 风险与注意事项 +1. `line-height: 1` 会显著压缩行高,但由于 `.field-value` 在打印时已经是 `inline-block` 且独立显示,不会影响周围段落的整体行距。 +2. `!important` 确保优先级高于任何内联样式。 diff --git a/工程分析/测试方案-2026-04-19-00-13-20.md b/工程分析/测试方案-2026-04-19-00-13-20.md new file mode 100644 index 0000000..734ca5e --- /dev/null +++ b/工程分析/测试方案-2026-04-19-00-13-20.md @@ -0,0 +1,26 @@ +# 测试方案 —— 2026-04-19-00-13-20 + +## 测试目标 +验证打印时下划线是否紧贴文字底部。 + +## 测试用例 + +### TC-1:有下划线字段紧贴文字 +**前置条件**:ReportEditor 中某字段(如术前诊断)已勾选「打印时显示下划线」。 +**步骤**: +1. 点击打印预览。 +**预期结果**:该字段的下划线(黑线)紧贴文字底部,无明显间距。 + +### TC-2:无下划线字段不受影响 +**前置条件**:某字段带有 `.no-underline` 类。 +**步骤**: +1. 点击打印预览。 +**预期结果**:该字段不显示下划线,排版正常。 + +### TC-3:屏幕编辑态不受影响 +**步骤**: +1. 在 ReportEditor 中查看字段。 +**预期结果**:屏幕上的 `.field-value` 行高保持原样,未被压缩。 + +## 测试通过标准 +打印内容中下划线紧贴文字,无多余留白,屏幕编辑态正常。 diff --git a/工程分析/经验记录.md b/工程分析/经验记录.md index c4b05ab..f2f96ce 100644 --- a/工程分析/经验记录.md +++ b/工程分析/经验记录.md @@ -1223,3 +1223,31 @@ if ((settings.autoInsertDelay || 0) > 0) { - 任何通过 JS 直接操作 DOM 添加的内联样式(如高亮),都必须在 `@media print` 中通过 `!important` 强制抹除,防止打印件被屏幕交互样式污染。 - 当字段配置(如 `hasUnderline`)同时影响「未来插入的元素」和「已存在的 DOM 元素」时,保存逻辑必须包含对已插入 DOM 的同步更新,不能只更新 state。 - `contentEditable` 中的 capture 阶段点击事件是处理全局点击行为(如点击空白取消)的理想位置,但需注意不要阻断其他正常交互路径(如 placeholder 点击)。 + + +--- + +## 记录 39:打印下划线紧贴文字——行高压缩 + +**A. 具体问题** +打印/PDF 导出时,`.field-value` 的文字与下方 `border-bottom`(下划线)之间存在明显间距,视觉上不够紧凑。 + +**B. 产生问题原因** +即使 `padding-bottom` 已设为 `0px`,父级文档设置了 `line-height: 1.5`(第 29 行),`inline-block` 元素内部仍保留了行高带来的底部留白空间。`border-bottom` 渲染在元素的盒模型底部边界,而非文字字形的实际基线/降部底部,因此出现了「文字与横线之间有间隙」的视觉效果。 + +**C. 解决问题方案** +在 `src/utils/print.ts` 的 `@media print` 中,为 `.smart-field-wrapper .field-value` 增加 `line-height: 1 !important;`。将行高压缩到文字本身的绝对高度,彻底消除底部行高留白,使 `border-bottom` 紧贴文字正下方。 + +```css +@media print { + .smart-field-wrapper .field-value { + /* ... 其他属性 ... */ + line-height: 1 !important; + } +} +``` + +**D. 后续如何避免问题** +- 当调整 `border-bottom` 与文字的距离时,如果 `padding-bottom` 已归零仍有间隙,应优先检查 `line-height` 的影响。 +- `inline-block` 元素的 `border-bottom` 位置受其内部行高影响显著,打印样式中可考虑显式设置 `line-height: 1` 以获得最紧凑的下划线效果。 +- 修改打印样式后,务必同时检查「有下划线」和「无下划线」两种字段的打印效果,避免 `line-height` 压缩导致其他排版异常。 diff --git a/工程分析/需求分析-2026-04-19-00-13-20.md b/工程分析/需求分析-2026-04-19-00-13-20.md new file mode 100644 index 0000000..ca98d24 --- /dev/null +++ b/工程分析/需求分析-2026-04-19-00-13-20.md @@ -0,0 +1,13 @@ +# 需求分析 —— 2026-04-19-00-13-20 + +## 需求来源 +用户反馈打印时字段下划线与文字之间距离过大,视觉上不够紧凑。 + +## 需求概述 +在打印/PDF导出时,`.field-value` 的 `border-bottom`(下划线)与文字之间存在行高留白,导致横线没有紧贴文字底部。需要压缩行高以消除底部留白。 + +## 涉及文件 +- `src/utils/print.ts` + +## 需求影响范围 +仅影响打印/导出PDF时的下划线视觉效果,不影响屏幕编辑态。