2026-04-18-17-48-59 - 模板排版微调:字段间距、Flex居中抬头、打印隐藏删除按钮、统一1.5行距、下划线贴底
This commit is contained in:
@@ -1,82 +1,75 @@
|
|||||||
const smartField = (key: string) => `<span class="smart-field-wrapper" contenteditable="false" style="white-space:nowrap;position:relative;"><span class="field-value" data-bind="${key}" contenteditable="true" style="min-width:32px;padding:0 4px;margin:0 2px;border:1px solid #cbd5e1;border-radius:2px;display:inline-block;background:#f8fafc;color:#0f172a;line-height:1.2;font-size:inherit;vertical-align:text-bottom;box-sizing:border-box;min-height:1.2em;outline:none;"> </span><span class="delete-btn" contenteditable="false">×</span></span>​`;
|
const smartField = (key: string) => `<span class="smart-field-wrapper" contenteditable="false" style="white-space:nowrap;position:relative;"><span class="field-value" data-bind="${key}" contenteditable="true" style="min-width:32px;padding:0 4px;margin:0 2px;border:1px solid #cbd5e1;border-radius:2px;display:inline-block;background:#f8fafc;color:#0f172a;line-height:1.2;font-size:inherit;vertical-align:text-bottom;box-sizing:border-box;min-height:1.2em;outline:none;"> </span><span class="delete-btn" contenteditable="false">×</span></span>​`;
|
||||||
|
|
||||||
export const defaultReportContent = `
|
export const defaultReportContent = `
|
||||||
<table style="width: 100%; border: none; margin-bottom: 16px;">
|
<div style="display: flex; justify-content: center; align-items: center; gap: 12px; margin-bottom: 16px;">
|
||||||
<tr>
|
<span class="image-placeholder" data-placeholder="true" contenteditable="false" data-mode="manual" style="position:relative;display:inline-flex;align-items:center;justify-content:center;width:65px;height:65px;border:1px dashed #cbd5e1;background:#f8fafc;vertical-align:middle;cursor:pointer;">
|
||||||
<td style="width: 20%; vertical-align: bottom; border: none; text-align: left;">
|
<span class="delete-btn" contenteditable="false">×</span>
|
||||||
<span class="image-placeholder" data-placeholder="true" contenteditable="false" data-mode="manual" style="position:relative;display:inline-flex;align-items:center;justify-content:center;width:65px;height:65px;border:1px dashed #cbd5e1;background:#f8fafc;vertical-align:middle;cursor:pointer;">
|
<span class="placeholder-text" style="color:#94a3b8;font-size:11px;pointer-events:none;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;">插入图片</span>
|
||||||
<span class="delete-btn" contenteditable="false">×</span>
|
</span>
|
||||||
<span class="placeholder-text" style="color:#94a3b8;font-size:11px;pointer-events:none;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;">插入图片</span>
|
<div style="text-align: center;">
|
||||||
</span>
|
<div style="font-size: 14pt; font-family: SimSun; border-bottom: 1px solid #000; padding-bottom: 0; margin-bottom: 8px; display: inline-block; line-height: 1;">西 安 交 通 大 学 第 一 附 属 医 院</div>
|
||||||
</td>
|
<div style="font-size: 16pt; font-family: SimSun;">手术记录</div>
|
||||||
<td style="width: 60%; text-align: center; vertical-align: middle; border: none;">
|
</div>
|
||||||
<div style="font-size: 14pt; font-family: SimSun; border-bottom: 1px solid #000; padding-bottom: 4px; margin-bottom: 8px; display: inline-block;">西 安 交 通 大 学 第 一 附 属 医 院</div>
|
|
||||||
<div style="font-size: 16pt; font-family: SimSun;">手术记录</div>
|
|
||||||
</td>
|
|
||||||
<td style="width: 20%; border: none;"></td>
|
|
||||||
</tr>
|
|
||||||
</table>
|
|
||||||
|
|
||||||
<div style="border-bottom: 1px solid #000; padding-bottom: 4px; margin-bottom: 12px;">
|
|
||||||
<p style="font-family: SimSun; font-size: 11pt; font-weight: normal; margin: 0; line-height: 1.8;">
|
|
||||||
姓名:${smartField('patientName')}
|
|
||||||
性别:${smartField('patientGender')}
|
|
||||||
年龄:${smartField('patientAge')}
|
|
||||||
科别:${smartField('department')}
|
|
||||||
床号:${smartField('bedNumber')}
|
|
||||||
住院号:${smartField('hospitalId')}
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p style="font-family: SimSun; font-size: 12pt; line-height: 1.8;">
|
<p style="font-family: SimSun; font-size: 11pt; font-weight: normal; margin: 0; padding: 0 0 1px 0; line-height: 1.2; border-bottom: 1px solid #000;">
|
||||||
|
姓名:${smartField('patientName')}
|
||||||
|
性别:${smartField('patientGender')}
|
||||||
|
年龄:${smartField('patientAge')}
|
||||||
|
科别:${smartField('department')}
|
||||||
|
床号:${smartField('bedNumber')}
|
||||||
|
住院号:${smartField('hospitalId')}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p style="font-family: SimSun; font-size: 12pt; line-height: 1.5; margin: 0; padding: 0;">
|
||||||
<strong>手术日期:</strong>${smartField('surgeryDate')}
|
<strong>手术日期:</strong>${smartField('surgeryDate')}
|
||||||
</p>
|
</p>
|
||||||
<p style="font-family: SimSun; font-size: 12pt; line-height: 1.8;">
|
<p style="font-family: SimSun; font-size: 12pt; line-height: 1.5; margin: 0; padding: 0;">
|
||||||
<strong>术前诊断:</strong>${smartField('preoperativeDiagnosis')}
|
<strong>术前诊断:</strong>${smartField('preoperativeDiagnosis')}
|
||||||
</p>
|
</p>
|
||||||
<p style="font-family: SimSun; font-size: 12pt; line-height: 1.8;">
|
<p style="font-family: SimSun; font-size: 12pt; line-height: 1.5; margin: 0; padding: 0;">
|
||||||
<strong>术中诊断:</strong>${smartField('postoperativeDiagnosis')}
|
<strong>术中诊断:</strong>${smartField('postoperativeDiagnosis')}
|
||||||
</p>
|
</p>
|
||||||
<p style="font-family: SimSun; font-size: 12pt; line-height: 1.8;">
|
<p style="font-family: SimSun; font-size: 12pt; line-height: 1.5; margin: 0; padding: 0;">
|
||||||
<strong>手术名称:</strong>${smartField('title')}
|
<strong>手术名称:</strong>${smartField('title')}
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<table style="width: 100%; border: none; font-family: SimSun; font-size: 12pt; margin-bottom: 12pt;">
|
<table style="width: 100%; border: none; font-family: SimSun; font-size: 12pt; margin-bottom: 12pt;">
|
||||||
<tr>
|
<tr>
|
||||||
<td style="border: none; padding: 4px 0; width: 50%;">手术开始时间:${smartField('startTime')}</td>
|
<td style="border: none; padding: 0; width: 50%; line-height: 1.5;">手术开始时间:${smartField('startTime')}</td>
|
||||||
<td style="border: none; padding: 4px 0; width: 50%;">手术终止时间:${smartField('endTime')}</td>
|
<td style="border: none; padding: 0; width: 50%; line-height: 1.5;">手术终止时间:${smartField('endTime')}</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td style="border: none; padding: 4px 0;">手术者:${smartField('surgeon')}</td>
|
<td style="border: none; padding: 0; line-height: 1.5;">手术者:${smartField('surgeon')}</td>
|
||||||
<td style="border: none; padding: 4px 0;">助手:${smartField('assistant')}</td>
|
<td style="border: none; padding: 0; line-height: 1.5;">助手:${smartField('assistant')}</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td style="border: none; padding: 4px 0;">麻醉师:${smartField('anesthesiologist')}</td>
|
<td style="border: none; padding: 0; line-height: 1.5;">麻醉师:${smartField('anesthesiologist')}</td>
|
||||||
<td style="border: none; padding: 4px 0;">麻醉方式:${smartField('anesthesiaType')}</td>
|
<td style="border: none; padding: 0; line-height: 1.5;">麻醉方式:${smartField('anesthesiaType')}</td>
|
||||||
</tr>
|
</tr>
|
||||||
</table>
|
</table>
|
||||||
|
|
||||||
<p style="font-family: SimSun; font-size: 12pt;">
|
<p style="font-family: SimSun; font-size: 12pt; line-height: 1.5; margin: 0; padding: 0;">
|
||||||
<strong>手术步骤、术中出现的情况及处理:</strong>
|
<strong>手术步骤、术中出现的情况及处理:</strong>
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<p style="font-family: SimSun;">
|
<p style="font-family: SimSun; line-height: 1.5; margin: 0; padding: 0;">
|
||||||
1.患者仰卧位,麻醉成功后,常规消毒术野、铺无菌巾,于脐下穿刺建立CO2气腹,气腹压力为12mmHg,进镜探查无穿刺损伤,分别于剑突下2.0cm、右锁中线肋缘下2.0cm各点穿刺置穿刺器,插入相应手术器械。
|
1.患者仰卧位,麻醉成功后,常规消毒术野、铺无菌巾,于脐下穿刺建立CO2气腹,气腹压力为12mmHg,进镜探查无穿刺损伤,分别于剑突下2.0cm、右锁中线肋缘下2.0cm各点穿刺置穿刺器,插入相应手术器械。
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<p style="font-family: SimSun;">
|
<p style="font-family: SimSun; line-height: 1.5; margin: 0; padding: 0;">
|
||||||
2.腹腔镜探查:腹腔内无腹水形成,无明显粘连,肝脏色红质软,无明显结节硬化改变,胆囊大小约 cm× cm× cm,壁轻度水肿,张力可,胆囊三角解剖关系清楚,胆囊管及胆总管无明显扩张。胃、十二指肠、小肠、结肠、脾脏及盆腔未见明显异常。术中诊断:胆囊结石伴慢性胆囊炎。遂行腹腔镜胆囊切除术。
|
2.腹腔镜探查:腹腔内无腹水形成,无明显粘连,肝脏色红质软,无明显结节硬化改变,胆囊大小约 cm× cm× cm,壁轻度水肿,张力可,胆囊三角解剖关系清楚,胆囊管及胆总管无明显扩张。胃、十二指肠、小肠、结肠、脾脏及盆腔未见明显异常。术中诊断:胆囊结石伴慢性胆囊炎。遂行腹腔镜胆囊切除术。
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<p style="font-family: SimSun;">
|
<p style="font-family: SimSun; line-height: 1.5; margin: 0; padding: 0;">
|
||||||
3.切除胆囊:钳夹胆囊颈部并解剖胆囊三角,游离出胆囊动脉及胆囊管,明确胆囊与胆总管的关系,距胆总管0.3cm处近端以一枚可吸收夹,远端夹一枚钛夹夹闭胆囊管,两夹间以剪刀剪断胆囊管,另用一枚可吸收夹夹闭胆囊动脉后离断。顺行游离胆囊浆膜,完整切除胆囊后装入标本袋取出。胆囊床严密止血并覆盖止血材料。
|
3.切除胆囊:钳夹胆囊颈部并解剖胆囊三角,游离出胆囊动脉及胆囊管,明确胆囊与胆总管的关系,距胆总管0.3cm处近端以一枚可吸收夹,远端夹一枚钛夹夹闭胆囊管,两夹间以剪刀剪断胆囊管,另用一枚可吸收夹夹闭胆囊动脉后离断。顺行游离胆囊浆膜,完整切除胆囊后装入标本袋取出。胆囊床严密止血并覆盖止血材料。
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<p style="font-family: SimSun;">
|
<p style="font-family: SimSun; line-height: 1.5; margin: 0; padding: 0;">
|
||||||
4.检查腹腔内无活动性出血及漏胆后,清点器械纱布无误,拔除腔镜器械,排出腹腔残余气体,缝合各刺孔,术毕。
|
4.检查腹腔内无活动性出血及漏胆后,清点器械纱布无误,拔除腔镜器械,排出腹腔残余气体,缝合各刺孔,术毕。
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<p style="font-family: SimSun;">
|
<p style="font-family: SimSun; line-height: 1.5; margin: 0; padding: 0;">
|
||||||
5.手术顺利,麻醉满意。切除的标本经家属过目后送病理。术中出血约 ml,术中输血成分,输血量,是否有输血不良反应。
|
5.手术顺利,麻醉满意。切除的标本经家属过目后送病理。术中出血约 ml,术中输血成分,输血量,是否有输血不良反应。
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
@@ -88,21 +81,21 @@ export const defaultReportContent = `
|
|||||||
<span class="delete-btn" contenteditable="false">×</span>
|
<span class="delete-btn" contenteditable="false">×</span>
|
||||||
<span class="placeholder-text" style="color:#94a3b8;font-size:11px;pointer-events:none;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;">插入/点击放置图片</span>
|
<span class="placeholder-text" style="color:#94a3b8;font-size:11px;pointer-events:none;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;">插入/点击放置图片</span>
|
||||||
</div>
|
</div>
|
||||||
<p style="color: #64748b; font-size: 13px; margin: 0;">图A 腹腔镜探查</p>
|
<p style="color: #64748b; font-size: 13px; margin: 0; padding: 0; line-height: 1.5;">图A 腹腔镜探查</p>
|
||||||
</td>
|
</td>
|
||||||
<td style="width: 33%; text-align: center; padding: 10px; vertical-align: top; border: 1px solid #e2e8f0;">
|
<td style="width: 33%; text-align: center; padding: 10px; vertical-align: top; border: 1px solid #e2e8f0;">
|
||||||
<div class="image-placeholder" data-placeholder="true" contenteditable="false" data-mode="frame" style="border: 1px dashed #cbd5e1; background: #f8fafc; width: 100%; height: 100%; max-width: 200px; max-height: 200px; min-height: 60px; margin: 0px auto; display: flex; align-items: center; justify-content: center; cursor: pointer;">
|
<div class="image-placeholder" data-placeholder="true" contenteditable="false" data-mode="frame" style="border: 1px dashed #cbd5e1; background: #f8fafc; width: 100%; height: 100%; max-width: 200px; max-height: 200px; min-height: 60px; margin: 0px auto; display: flex; align-items: center; justify-content: center; cursor: pointer;">
|
||||||
<span class="delete-btn" contenteditable="false">×</span>
|
<span class="delete-btn" contenteditable="false">×</span>
|
||||||
<span class="placeholder-text" style="color:#94a3b8;font-size:11px;pointer-events:none;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;">插入/点击放置图片</span>
|
<span class="placeholder-text" style="color:#94a3b8;font-size:11px;pointer-events:none;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;">插入/点击放置图片</span>
|
||||||
</div>
|
</div>
|
||||||
<p style="color: #64748b; font-size: 13px; margin: 0;">图B 胆囊管夹闭与离断</p>
|
<p style="color: #64748b; font-size: 13px; margin: 0; padding: 0; line-height: 1.5;">图B 胆囊管夹闭与离断</p>
|
||||||
</td>
|
</td>
|
||||||
<td style="width: 33%; text-align: center; padding: 10px; vertical-align: top; border: 1px solid #e2e8f0;">
|
<td style="width: 33%; text-align: center; padding: 10px; vertical-align: top; border: 1px solid #e2e8f0;">
|
||||||
<div class="image-placeholder" data-placeholder="true" contenteditable="false" data-mode="frame" style="border: 1px dashed #cbd5e1; background: #f8fafc; width: 100%; height: 100%; max-width: 200px; max-height: 200px; min-height: 60px; margin: 0px auto; display: flex; align-items: center; justify-content: center; cursor: pointer;">
|
<div class="image-placeholder" data-placeholder="true" contenteditable="false" data-mode="frame" style="border: 1px dashed #cbd5e1; background: #f8fafc; width: 100%; height: 100%; max-width: 200px; max-height: 200px; min-height: 60px; margin: 0px auto; display: flex; align-items: center; justify-content: center; cursor: pointer;">
|
||||||
<span class="delete-btn" contenteditable="false">×</span>
|
<span class="delete-btn" contenteditable="false">×</span>
|
||||||
<span class="placeholder-text" style="color:#94a3b8;font-size:11px;pointer-events:none;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;">插入/点击放置图片</span>
|
<span class="placeholder-text" style="color:#94a3b8;font-size:11px;pointer-events:none;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;">插入/点击放置图片</span>
|
||||||
</div>
|
</div>
|
||||||
<p style="color: #64748b; font-size: 13px; margin: 0;">图C 胆囊动脉夹闭与离断</p>
|
<p style="color: #64748b; font-size: 13px; margin: 0; padding: 0; line-height: 1.5;">图C 胆囊动脉夹闭与离断</p>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
@@ -111,47 +104,47 @@ export const defaultReportContent = `
|
|||||||
<span class="delete-btn" contenteditable="false">×</span>
|
<span class="delete-btn" contenteditable="false">×</span>
|
||||||
<span class="placeholder-text" style="color:#94a3b8;font-size:11px;pointer-events:none;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;">插入/点击放置图片</span>
|
<span class="placeholder-text" style="color:#94a3b8;font-size:11px;pointer-events:none;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;">插入/点击放置图片</span>
|
||||||
</div>
|
</div>
|
||||||
<p style="color: #64748b; font-size: 13px; margin: 0;">图D 胆囊剥离与床面止血</p>
|
<p style="color: #64748b; font-size: 13px; margin: 0; padding: 0; line-height: 1.5;">图D 胆囊剥离与床面止血</p>
|
||||||
</td>
|
</td>
|
||||||
<td style="width: 33%; text-align: center; padding: 10px; vertical-align: top; border: 1px solid #e2e8f0;">
|
<td style="width: 33%; text-align: center; padding: 10px; vertical-align: top; border: 1px solid #e2e8f0;">
|
||||||
<div class="image-placeholder" data-placeholder="true" contenteditable="false" data-mode="frame" style="border: 1px dashed #cbd5e1; background: #f8fafc; width: 100%; height: 100%; max-width: 200px; max-height: 200px; min-height: 60px; margin: 0px auto; display: flex; align-items: center; justify-content: center; cursor: pointer;">
|
<div class="image-placeholder" data-placeholder="true" contenteditable="false" data-mode="frame" style="border: 1px dashed #cbd5e1; background: #f8fafc; width: 100%; height: 100%; max-width: 200px; max-height: 200px; min-height: 60px; margin: 0px auto; display: flex; align-items: center; justify-content: center; cursor: pointer;">
|
||||||
<span class="delete-btn" contenteditable="false">×</span>
|
<span class="delete-btn" contenteditable="false">×</span>
|
||||||
<span class="placeholder-text" style="color:#94a3b8;font-size:11px;pointer-events:none;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;">插入/点击放置图片</span>
|
<span class="placeholder-text" style="color:#94a3b8;font-size:11px;pointer-events:none;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;">插入/点击放置图片</span>
|
||||||
</div>
|
</div>
|
||||||
<p style="color: #64748b; font-size: 13px; margin: 0;">图E 胆囊取出与钛夹确认</p>
|
<p style="color: #64748b; font-size: 13px; margin: 0; padding: 0; line-height: 1.5;">图E 胆囊取出与钛夹确认</p>
|
||||||
</td>
|
</td>
|
||||||
<td style="width: 33%; text-align: center; padding: 10px; vertical-align: top; border: 1px solid #e2e8f0;">
|
<td style="width: 33%; text-align: center; padding: 10px; vertical-align: top; border: 1px solid #e2e8f0;">
|
||||||
<div class="image-placeholder" data-placeholder="true" contenteditable="false" data-mode="frame" style="border: 1px dashed #cbd5e1; background: #f8fafc; width: 100%; height: 100%; max-width: 200px; max-height: 200px; min-height: 60px; margin: 0px auto; display: flex; align-items: center; justify-content: center; cursor: pointer;">
|
<div class="image-placeholder" data-placeholder="true" contenteditable="false" data-mode="frame" style="border: 1px dashed #cbd5e1; background: #f8fafc; width: 100%; height: 100%; max-width: 200px; max-height: 200px; min-height: 60px; margin: 0px auto; display: flex; align-items: center; justify-content: center; cursor: pointer;">
|
||||||
<span class="delete-btn" contenteditable="false">×</span>
|
<span class="delete-btn" contenteditable="false">×</span>
|
||||||
<span class="placeholder-text" style="color:#94a3b8;font-size:11px;pointer-events:none;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;">插入/点击放置图片</span>
|
<span class="placeholder-text" style="color:#94a3b8;font-size:11px;pointer-events:none;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;">插入/点击放置图片</span>
|
||||||
</div>
|
</div>
|
||||||
<p style="color: #64748b; font-size: 13px; margin: 0;">图F 止血材料覆盖及检查</p>
|
<p style="color: #64748b; font-size: 13px; margin: 0; padding: 0; line-height: 1.5;">图F 止血材料覆盖及检查</p>
|
||||||
</td>
|
</td>
|
||||||
</tr></tbody>
|
</tr></tbody>
|
||||||
</table>
|
</table>
|
||||||
|
|
||||||
<div class="template-info-section">
|
<div class="template-info-section">
|
||||||
<p style="font-family: SimSun;">
|
<p style="font-family: SimSun; line-height: 1.5; margin: 0; padding: 0;">
|
||||||
<strong>手术后情况</strong>:${smartField('postOpCondition')}
|
<strong>手术后情况</strong>:${smartField('postOpCondition')}
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<p style="font-family: SimSun;">
|
<p style="font-family: SimSun; line-height: 1.5; margin: 0; padding: 0;">
|
||||||
<strong>切除标本描述</strong>:${smartField('specimenDescription')}
|
<strong>切除标本描述</strong>:${smartField('specimenDescription')}
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<p style="font-family: SimSun;">
|
<p style="font-family: SimSun; line-height: 1.5; margin: 0; padding: 0;">
|
||||||
<strong>是否送病理检查</strong>:${smartField('pathologyCheck')}
|
<strong>是否送病理检查</strong>:${smartField('pathologyCheck')}
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<p style="font-family: SimSun;">
|
<p style="font-family: SimSun; line-height: 1.5; margin: 0; padding: 0;">
|
||||||
<strong>冰冻病理结果</strong>:${smartField('frozenPathology')}
|
<strong>冰冻病理结果</strong>:${smartField('frozenPathology')}
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<p style="font-family: SimSun;">
|
<p style="font-family: SimSun; line-height: 1.5; margin: 0; padding: 0;">
|
||||||
手术者签名:<span class="image-placeholder" data-placeholder="true" contenteditable="false" data-mode="manual" style="display:inline-flex;align-items:center;justify-content:center;width:200px;height:40px;border:1px dashed #cbd5e1;background:#f8fafc;vertical-align:middle;margin:0 4px;cursor:pointer;"><span class="delete-btn" contenteditable="false">×</span><span class="placeholder-text" style="color:#94a3b8;font-size:11px;pointer-events:none;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;">插入/点击放置图片</span></span>
|
手术者签名:<span class="image-placeholder" data-placeholder="true" contenteditable="false" data-mode="manual" style="display:inline-flex;align-items:center;justify-content:center;width:200px;height:40px;border:1px dashed #cbd5e1;background:#f8fafc;vertical-align:middle;margin:0 4px;cursor:pointer;"><span class="delete-btn" contenteditable="false">×</span><span class="placeholder-text" style="color:#94a3b8;font-size:11px;pointer-events:none;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;">插入/点击放置图片</span></span>
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<p style="text-align: right; font-family: SimSun;">
|
<p style="text-align: right; font-family: SimSun; line-height: 1.5; margin: 0; padding: 0;">
|
||||||
${smartField('reportDate')}
|
${smartField('reportDate')}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -23,7 +23,7 @@ export const printDocument = (htmlContent: string) => {
|
|||||||
body { margin: 0; padding: 0; font-family: SimSun, "Microsoft YaHei", serif; color: #1E293B; background: white; }
|
body { margin: 0; padding: 0; font-family: SimSun, "Microsoft YaHei", serif; color: #1E293B; background: white; }
|
||||||
.content { width: 100%; min-height: 277mm; margin: 0 auto; }
|
.content { width: 100%; min-height: 277mm; margin: 0 auto; }
|
||||||
img { max-width: 100%; height: auto; display: block; margin: 8px auto; }
|
img { max-width: 100%; height: auto; display: block; margin: 8px auto; }
|
||||||
p { margin: 0; padding: 4px 0; line-height: 1.6; }
|
p { margin: 0; padding: 0; line-height: 1.5; }
|
||||||
h1 { font-size: 20px; margin: 16px 0 12px; font-weight: 600; text-align: center; }
|
h1 { font-size: 20px; margin: 16px 0 12px; font-weight: 600; text-align: center; }
|
||||||
strong, b { font-weight: 600; }
|
strong, b { font-weight: 600; }
|
||||||
u { text-decoration: underline; }
|
u { text-decoration: underline; }
|
||||||
@@ -31,7 +31,7 @@ export const printDocument = (htmlContent: string) => {
|
|||||||
td { padding: 8px; border: 1px solid #e2e8f0; vertical-align: top; }
|
td { padding: 8px; border: 1px solid #e2e8f0; vertical-align: top; }
|
||||||
.image-placeholder { border: 2px dashed #cbd5e1; border-radius: 8px; padding: 16px; margin-bottom: 8px; background: #f8fafc; min-height: 70px; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; }
|
.image-placeholder { border: 2px dashed #cbd5e1; border-radius: 8px; padding: 16px; margin-bottom: 8px; background: #f8fafc; min-height: 70px; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; }
|
||||||
.image-placeholder.has-image { border: none; background: transparent; padding: 0; min-height: 0; }
|
.image-placeholder.has-image { border: none; background: transparent; padding: 0; min-height: 0; }
|
||||||
.image-placeholder .delete-btn { display: none !important; }
|
.delete-btn { display: none !important; }
|
||||||
.image-placeholder:not(.has-image) { display: none !important; }
|
.image-placeholder:not(.has-image) { display: none !important; }
|
||||||
.template-info-section { position: relative; margin-bottom: 16px; }
|
.template-info-section { position: relative; margin-bottom: 16px; }
|
||||||
.smart-field-wrapper { display: inline-flex; align-items: center; margin: 0 2px; vertical-align: text-bottom; }
|
.smart-field-wrapper { display: inline-flex; align-items: center; margin: 0 2px; vertical-align: text-bottom; }
|
||||||
|
|||||||
100
工程分析/实现方案-2026-04-18-17-48-59.md
Normal file
100
工程分析/实现方案-2026-04-18-17-48-59.md
Normal file
@@ -0,0 +1,100 @@
|
|||||||
|
# 实现方案 —— 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 中)不会自动更新。这是预期行为。
|
||||||
111
工程分析/测试方案-2026-04-18-17-48-59.md
Normal file
111
工程分析/测试方案-2026-04-18-17-48-59.md
Normal file
@@ -0,0 +1,111 @@
|
|||||||
|
# 测试方案 —— 2026-04-18-17-48-59
|
||||||
|
|
||||||
|
## 测试目标
|
||||||
|
验证默认模板排版微调和打印样式修复是否正确生效。
|
||||||
|
|
||||||
|
## 测试用例
|
||||||
|
|
||||||
|
### TC-01:基本信息栏字段间距
|
||||||
|
**前置条件**:新建报告,加载默认模板
|
||||||
|
**操作步骤**:
|
||||||
|
1. 查看「姓名:性别:年龄:科别:床号:住院号:」一行
|
||||||
|
|
||||||
|
**预期结果**:
|
||||||
|
- 各字段之间仅有一个空格间距
|
||||||
|
- 字段分布紧凑,不会过度分散
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### TC-02:抬头整体居中
|
||||||
|
**前置条件**:新建报告,加载默认模板
|
||||||
|
**操作步骤**:
|
||||||
|
1. 查看报告最顶部
|
||||||
|
|
||||||
|
**预期结果**:
|
||||||
|
- Logo 与「西 安 交 通 大 学 第 一 附 属 医 院 + 手术记录」作为一个整体水平居中
|
||||||
|
- Logo 与文字之间间距较小(约 12px)
|
||||||
|
- 不会出现 Logo 偏左、文字偏右的分离感
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### TC-03:打印时不显示删除按钮
|
||||||
|
**前置条件**:新建报告,填写部分字段内容
|
||||||
|
**操作步骤**:
|
||||||
|
1. 点击打印按钮
|
||||||
|
2. 检查打印预览
|
||||||
|
|
||||||
|
**预期结果**:
|
||||||
|
- 所有红色「×」删除按钮均不可见
|
||||||
|
- `.image-placeholder` 中的 × 不可见
|
||||||
|
- `.smart-field-wrapper` 中的 × 不可见
|
||||||
|
- 已填充的图片占位符正常显示图片
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### TC-04:全文行距统一
|
||||||
|
**前置条件**:新建报告,加载默认模板
|
||||||
|
**操作步骤**:
|
||||||
|
1. 查看手术日期、术前诊断等段落
|
||||||
|
2. 查看手术步骤段落
|
||||||
|
|
||||||
|
**预期结果**:
|
||||||
|
- 所有段落行距一致,为 1.5 倍
|
||||||
|
- 段落之间无额外 margin/padding 间距
|
||||||
|
- 整体排版紧凑均匀
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### TC-05:打印行距验证
|
||||||
|
**前置条件**:报告有内容
|
||||||
|
**操作步骤**:
|
||||||
|
1. 点击打印
|
||||||
|
2. 检查打印预览中的段落间距
|
||||||
|
|
||||||
|
**预期结果**:
|
||||||
|
- 打印输出行距为 1.5 倍
|
||||||
|
- 无段前段后 padding
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### TC-06:医院名称下划线贴底
|
||||||
|
**前置条件**:新建报告
|
||||||
|
**操作步骤**:
|
||||||
|
1. 查看「西 安 交 通 大 学 第 一 附 属 医 院」下方横线
|
||||||
|
|
||||||
|
**预期结果**:
|
||||||
|
- 下边框紧贴文字底部
|
||||||
|
- 无明显的 padding-bottom 间隙
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### TC-07:基本信息栏下划线贴底
|
||||||
|
**前置条件**:新建报告
|
||||||
|
**操作步骤**:
|
||||||
|
1. 查看「姓名:...住院号:」整行下方的横线
|
||||||
|
|
||||||
|
**预期结果**:
|
||||||
|
- 下边框紧贴文字底部
|
||||||
|
- 无明显的 padding-bottom 间隙
|
||||||
|
- 横线与文字之间仅有极小间距(≤ 2px)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### TC-08:打印下划线验证
|
||||||
|
**前置条件**:报告有内容
|
||||||
|
**操作步骤**:
|
||||||
|
1. 点击打印
|
||||||
|
2. 检查医院名和基本信息栏的下划线位置
|
||||||
|
|
||||||
|
**预期结果**:
|
||||||
|
- 打印时下边框紧贴文字底部
|
||||||
|
- 与屏幕预览一致
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 回归测试范围
|
||||||
|
- 验证 smart-field-wrapper 的双向绑定(表单→正文、正文→表单)正常工作
|
||||||
|
- 验证 image-placeholder 的点击上传、拖拽填充、删除功能不受影响
|
||||||
|
- 验证手术图片说明表格的 6 图格布局正常
|
||||||
|
|
||||||
|
## 测试结论
|
||||||
|
TC-01~TC-08 全部通过,即可确认五项排版优化均正确实现。
|
||||||
30
工程分析/需求分析-2026-04-18-17-48-59.md
Normal file
30
工程分析/需求分析-2026-04-18-17-48-59.md
Normal file
@@ -0,0 +1,30 @@
|
|||||||
|
# 需求分析 —— 2026-04-18-17-48-59
|
||||||
|
|
||||||
|
## 需求来源
|
||||||
|
用户基于打印预览效果,提出默认模板排版微调和打印样式修复需求。
|
||||||
|
|
||||||
|
## 需求概述
|
||||||
|
|
||||||
|
### 需求 1:缩减基本信息栏字段间空格
|
||||||
|
当前默认模板中「姓名:性别:年龄:科别:床号:住院号:」之间使用了 ` `(三个不间断空格),间距过大。需缩减为单个空格 ` `。
|
||||||
|
|
||||||
|
### 需求 2:Logo 与医院名/标题靠拢并整体居中
|
||||||
|
当前顶部使用 3 列 table(20%-60%-20%),Logo 固定在左侧 20% 区域,与中间标题距离过远。需改为 Flex 布局,使 Logo 与文字内容作为一个整体水平居中,且两者间距缩小。
|
||||||
|
|
||||||
|
### 需求 3:打印时隐藏所有「×」删除按钮
|
||||||
|
打印预览中,`.smart-field-wrapper` 内的 `.delete-btn`(红色×)仍然可见。`print.ts` 中仅隐藏了 `.image-placeholder .delete-btn`,遗漏了文本字段中的删除按钮。需全局隐藏 `.delete-btn`。
|
||||||
|
|
||||||
|
### 需求 4:统一全文行距为 1.5,消除段前段后间距
|
||||||
|
当前模板中各 `<p>` 标签的 `line-height` 不统一(有 1.8、默认行高等),且部分段落有默认 margin/padding。需统一为 `line-height: 1.5; margin: 0; padding: 0;`。
|
||||||
|
|
||||||
|
### 需求 5:下划线紧贴文字底部
|
||||||
|
「西 安 交 通 大 学 第 一 附 属 医 院」下方的 `border-bottom` 和「姓名:」等基本信息栏下方的 `border-bottom` 与文字间距过大。需移除 `padding-bottom`,并通过 `line-height: 1` 或类似手段消除字体底部留白,使横线紧贴文字底部。
|
||||||
|
|
||||||
|
## 涉及文件
|
||||||
|
- `src/utils/defaultContent.ts`(需求 1、2、4、5)
|
||||||
|
- `src/utils/print.ts`(需求 3、4)
|
||||||
|
|
||||||
|
## 需求影响范围
|
||||||
|
- 默认报告模板的视觉效果
|
||||||
|
- 打印输出样式
|
||||||
|
- 无业务逻辑变更
|
||||||
Reference in New Issue
Block a user