101 lines
4.5 KiB
Markdown
101 lines
4.5 KiB
Markdown
# 实现方案 —— 2026-04-18-17-48-59
|
||
|
||
## 方案目标
|
||
修复默认模板排版细节和打印样式问题，提升报告的视觉一致性和打印输出质量。
|
||
|
||
## 需求 1：缩减基本信息栏字段间空格
|
||
|
||
### 修改文件
|
||
`src/utils/defaultContent.ts`
|
||
|
||
### 修改内容
|
||
将基本信息栏 `<p>` 中字段之间的 ` ` 替换为单个 ` `。
|
||
|
||
**修改前**：
|
||
```html
|
||
姓名：${smartField('patientName')}
|
||
性别：${smartField('patientGender')}
|
||
年龄：${smartField('patientAge')}
|
||
科别：${smartField('department')}
|
||
床号：${smartField('bedNumber')}
|
||
住院号：${smartField('hospitalId')}
|
||
```
|
||
|
||
**修改后**：
|
||
```html
|
||
姓名：${smartField('patientName')}
|
||
性别：${smartField('patientGender')}
|
||
年龄：${smartField('patientAge')}
|
||
科别：${smartField('department')}
|
||
床号：${smartField('bedNumber')}
|
||
住院号：${smartField('hospitalId')}
|
||
```
|
||
|
||
## 需求 2：Logo 与医院名/标题靠拢并整体居中
|
||
|
||
### 修改文件
|
||
`src/utils/defaultContent.ts`
|
||
|
||
### 修改内容
|
||
将顶部 3 列 `<table>` 替换为 `<div style="display: flex; justify-content: center; align-items: center; gap: 12px; margin-bottom: 16px;">`。
|
||
- Logo 占位符放在 flex 子 div 中
|
||
- 医院名和标题放在另一个 flex 子 div 中（`text-align: center`）
|
||
- 整体通过 `justify-content: center` 实现居中
|
||
- `gap: 12px` 或 `margin-right: 12px` 控制 Logo 与文字间距
|
||
|
||
## 需求 3：打印时隐藏所有「×」删除按钮
|
||
|
||
### 修改文件
|
||
`src/utils/print.ts`
|
||
|
||
### 修改内容
|
||
在 `print.ts` 生成的 `<style>` 标签中，将 `.image-placeholder .delete-btn { display: none !important; }` 扩展为全局规则：
|
||
```css
|
||
.delete-btn { display: none !important; }
|
||
```
|
||
|
||
这样无论删除按钮位于 `.image-placeholder` 内还是 `.smart-field-wrapper` 内，打印时均不可见。
|
||
|
||
## 需求 4：统一全文行距为 1.5，消除段前段后间距
|
||
|
||
### 修改文件
|
||
`src/utils/defaultContent.ts` 和 `src/utils/print.ts`
|
||
|
||
### 修改内容
|
||
1. **`defaultContent.ts`**：将所有 `<p>` 标签的内联样式统一为 `line-height: 1.5; margin: 0; padding: 0;`。移除原有的 `line-height: 1.8`、默认 margin 等不一致设置。
|
||
2. **`print.ts`**：将全局 `p` 样式从 `margin: 0; padding: 4px 0; line-height: 1.6;` 修改为 `margin: 0; padding: 0; line-height: 1.5;`。
|
||
|
||
## 需求 5：下划线紧贴文字底部
|
||
|
||
### 修改文件
|
||
`src/utils/defaultContent.ts`
|
||
|
||
### 修改内容
|
||
1. **医院名称下划线**：将包裹医院名的 `div` 的 `padding-bottom: 4px` 移除或改为 `0`。同时在该 `div` 上增加 `line-height: 1`，消除中文字体自带的底部留白，使 `border-bottom` 紧贴文字。
|
||
2. **基本信息栏下划线**：将外层 `<div style="border-bottom: 1px solid #000; ...">` 的 `padding-bottom: 4px` 移除。内部 `<p>` 的 `line-height` 已统一为 1.5（需求 4），若仍有间距问题，可进一步在该 `<p>` 上设置 `line-height: 1.2` 或让下划线直接由 `<p>` 的 `border-bottom` 实现。
|
||
|
||
### 优化策略
|
||
更简洁的做法：让下划线直接由承载文字的 `<p>` 元素生成，而非由外层 `<div>` 生成。例如：
|
||
```html
|
||
<p style="font-family: SimSun; font-size: 11pt; font-weight: normal; margin: 0; padding: 0 0 2px 0; line-height: 1.2; border-bottom: 1px solid #000;">
|
||
姓名：... 性别：...
|
||
</p>
|
||
```
|
||
这样文字底部与下划线之间仅由 `padding-bottom: 2px` 或 `line-height` 控制，可精确调整。
|
||
|
||
对于医院名称，同理：
|
||
```html
|
||
<div style="font-size: 14pt; font-family: SimSun; line-height: 1; border-bottom: 1px solid #000; padding-bottom: 0; margin-bottom: 8px; display: inline-block;">
|
||
```
|
||
|
||
## 涉及文件及修改点
|
||
| 文件 | 修改点 |
|
||
|------|--------|
|
||
| `src/utils/defaultContent.ts` | 缩减空格；改 Flex 抬头；统一 line-height/margin/padding；调整下划线贴底 |
|
||
| `src/utils/print.ts` | 全局隐藏 `.delete-btn`；统一 p 标签 line-height/margin/padding |
|
||
|
||
## 风险与注意事项
|
||
1. `print.ts` 的全局 `.delete-btn { display: none !important; }` 会覆盖所有删除按钮，包括未来可能新增的其他类型。这是预期行为（打印时不应显示任何交互按钮）。
|
||
2. `line-height: 1` 在部分中文字体下可能导致字符上下紧贴甚至重叠，需在实际打印中验证。若出现问题，可微调为 `line-height: 1.1`。
|
||
3. 修改 `defaultContent.ts` 后，新建报告会加载新模板，但已有报告（保存在 localStorage 中）不会自动更新。这是预期行为。
|