Mdeical_Sur_Report/工程分析/实现方案-2026-04-18-17-48-59.md

实现方案 —— 2026-04-18-17-48-59

方案目标

修复默认模板排版细节和打印样式问题，提升报告的视觉一致性和打印输出质量。

需求 1：缩减基本信息栏字段间空格

修改文件

src/utils/defaultContent.ts

修改内容

将基本信息栏 <p> 中字段之间的     替换为单个  。

修改前：

姓名：${smartField('patientName')}   
性别：${smartField('patientGender')}   
年龄：${smartField('patientAge')}   
科别：${smartField('department')}   
床号：${smartField('bedNumber')}   
住院号：${smartField('hospitalId')}

修改后：

姓名：${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; } 扩展为全局规则：

.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> 生成。例如：

<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 控制，可精确调整。

对于医院名称，同理：

<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 中）不会自动更新。这是预期行为。