Compare commits
1 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
9ff2f5923a |
@@ -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; }
|
||||
}
|
||||
</style>
|
||||
|
||||
37
工程分析/实现方案-2026-04-19-00-13-20.md
Normal file
37
工程分析/实现方案-2026-04-19-00-13-20.md
Normal 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` 确保优先级高于任何内联样式。
|
||||
26
工程分析/测试方案-2026-04-19-00-13-20.md
Normal file
26
工程分析/测试方案-2026-04-19-00-13-20.md
Normal 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` 行高保持原样,未被压缩。
|
||||
|
||||
## 测试通过标准
|
||||
打印内容中下划线紧贴文字,无多余留白,屏幕编辑态正常。
|
||||
28
工程分析/经验记录.md
28
工程分析/经验记录.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` 压缩导致其他排版异常。
|
||||
|
||||
13
工程分析/需求分析-2026-04-19-00-13-20.md
Normal file
13
工程分析/需求分析-2026-04-19-00-13-20.md
Normal file
@@ -0,0 +1,13 @@
|
||||
# 需求分析 —— 2026-04-19-00-13-20
|
||||
|
||||
## 需求来源
|
||||
用户反馈打印时字段下划线与文字之间距离过大,视觉上不够紧凑。
|
||||
|
||||
## 需求概述
|
||||
在打印/PDF导出时,`.field-value` 的 `border-bottom`(下划线)与文字之间存在行高留白,导致横线没有紧贴文字底部。需要压缩行高以消除底部留白。
|
||||
|
||||
## 涉及文件
|
||||
- `src/utils/print.ts`
|
||||
|
||||
## 需求影响范围
|
||||
仅影响打印/导出PDF时的下划线视觉效果,不影响屏幕编辑态。
|
||||
Reference in New Issue
Block a user