Mdeical_Sur_Report/工程分析/实现方案-2026-04-18-18-08-37.md

实现方案 —— 2026-04-18-18-08-37

方案目标

修复并增强编辑器工具栏的字体/字号/行距功能，调整默认模板排版细节。

需求 1：修复字体选择并新增字号、行距功能

修改文件

src/pages/ReportEditor.tsx 和 src/pages/TemplateManage.tsx

实现步骤

1. 修复字体选择：确保工具栏中的字体选择 <select> 使用 execCmd('fontName', value)。若失效，检查是否有全局 CSS font-family: !important 覆盖。如有，在打印样式中保留覆盖，但在编辑器样式中移除。
2. 新增字号选择：在工具栏字体选择旁边增加 <select>：

   <select onChange={e => { if (e.target.value) { execCmd('fontSize', e.target.value); } e.target.value = ''; }}>
     <option value="">字号</option>
     <option value="3">12pt</option>
     <option value="4">14pt</option>
     <option value="5">18pt</option>
   </select>
   

   execCommand('fontSize') 使用 1-7 的相对字号，3 对应 12pt，4 对应 14pt，5 对应 18pt。
3. 新增行距选择：execCommand 不支持行距，需手写 changeLineHeight 函数：

   const changeLineHeight = (height: string) => {
     const sel = window.getSelection();
     if (!sel || !sel.rangeCount) return;
     let node = sel.getRangeAt(0).commonAncestorContainer;
     if (node.nodeType === Node.TEXT_NODE) node = node.parentNode as Node;
     const block = (node as HTMLElement).closest('p, div, td, h1, h2, h3');
     if (block) {
       (block as HTMLElement).style.lineHeight = height;
       if (editorRef.current) contentRef.current = editorRef.current.innerHTML;
       saveDraftToStorage();
     }
   };
   

   在工具栏增加行距 <select> 绑定此函数。

需求 2：修复手术者签名右对齐时图片框换行

修改文件

src/utils/defaultContent.ts

修改内容

将「手术者签名」所在 <p> 增加 white-space: nowrap;，并将图片占位符的 display 改为 inline-block：

<p style="text-align: right; font-family: SimSun; line-height: 1.5; margin: 0; padding: 0; white-space: nowrap;">
    手术者签名：<span class="image-placeholder" ... style="display:inline-block; vertical-align:middle; ...">...</span>
</p>

需求 3：缩减「手术记录」与「姓名」之间的距离

修改文件

src/utils/defaultContent.ts

修改内容

将顶部 Flex 容器的 margin-bottom: 16px 缩小为 margin-bottom: 4px。

需求 4：消除「手术名称」与「手术开始时间」之间的多余间距

修改文件

src/utils/defaultContent.ts

修改内容

将双列信息 <table> 的 margin-bottom: 12pt 改为 margin-bottom: 0; margin-top: 0;。同时确保「手术名称」<p> 的 margin: 0; padding: 0;。

需求 5：统一「手术日期」及以下内容为 12pt、1.5 行距、无段间距

修改文件

src/utils/defaultContent.ts

修改内容

为所有手术步骤段落（1~5）以及手术后情况段落补充 font-size: 12pt;：

<p style="font-family: SimSun; font-size: 12pt; line-height: 1.5; margin: 0; padding: 0;">

涉及文件及修改点

文件	修改点
src/pages/ReportEditor.tsx	工具栏新增字号选择、行距选择；修复字体选择
src/pages/TemplateManage.tsx	工具栏新增字号选择、行距选择；修复字体选择
src/utils/defaultContent.ts	签名行 white-space: nowrap; 顶部 margin-bottom: 4px; 表格 margin: 0; 补全 font-size: 12pt

风险与注意事项

1. execCommand('fontSize') 生成的是 <font size="N"> 标签，与现代 HTML5 规范不完全兼容，但在 contentEditable 中是浏览器广泛支持的方式。
2. changeLineHeight 直接操作 DOM style，在 ReportEditor 中修改后需同步 contentRef.current 和调用 saveDraftToStorage()。
3. TemplateManage 中修改行距后需调用 saveTemplateContent()。
4. white-space: nowrap 在签名行可能导致超长内容溢出，但考虑到签名行通常较短，风险可控。