1 Commits

Author SHA1 Message Date
Administrator
9ff2f5923a 2026-04-19-00-13-20 - 打印下划线紧贴文字(line-height: 1) 2026-04-19 00:14:27 +08:00
5 changed files with 105 additions and 1 deletions

View File

@@ -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; } .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; } .report-signature-img { max-width: 120px; max-height: 40px; width: auto; height: auto; object-fit: contain; vertical-align: middle; display: inline-block; }
@media print { @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; } .smart-field-wrapper .field-value.no-underline { border-bottom: none !important; }
} }
</style> </style>

View File

@@ -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` 确保优先级高于任何内联样式。

View File

@@ -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` 行高保持原样,未被压缩。
## 测试通过标准
打印内容中下划线紧贴文字,无多余留白,屏幕编辑态正常。

View File

@@ -1223,3 +1223,31 @@ if ((settings.autoInsertDelay || 0) > 0) {
- 任何通过 JS 直接操作 DOM 添加的内联样式(如高亮),都必须在 `@media print` 中通过 `!important` 强制抹除,防止打印件被屏幕交互样式污染。 - 任何通过 JS 直接操作 DOM 添加的内联样式(如高亮),都必须在 `@media print` 中通过 `!important` 强制抹除,防止打印件被屏幕交互样式污染。
- 当字段配置(如 `hasUnderline`)同时影响「未来插入的元素」和「已存在的 DOM 元素」时,保存逻辑必须包含对已插入 DOM 的同步更新,不能只更新 state。 - 当字段配置(如 `hasUnderline`)同时影响「未来插入的元素」和「已存在的 DOM 元素」时,保存逻辑必须包含对已插入 DOM 的同步更新,不能只更新 state。
- `contentEditable` 中的 capture 阶段点击事件是处理全局点击行为(如点击空白取消)的理想位置,但需注意不要阻断其他正常交互路径(如 placeholder 点击)。 - `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` 压缩导致其他排版异常。

View File

@@ -0,0 +1,13 @@
# 需求分析 —— 2026-04-19-00-13-20
## 需求来源
用户反馈打印时字段下划线与文字之间距离过大,视觉上不够紧凑。
## 需求概述
在打印/PDF导出时`.field-value``border-bottom`(下划线)与文字之间存在行高留白,导致横线没有紧贴文字底部。需要压缩行高以消除底部留白。
## 涉及文件
- `src/utils/print.ts`
## 需求影响范围
仅影响打印/导出PDF时的下划线视觉效果不影响屏幕编辑态。