2026-04-18-17-27-51 - 修复TemplateManage静态占位符插入、重构默认模板排版、修复Logo删除按钮交互

src/pages/TemplateManage.tsx

@@ -1266,7 +1266,29 @@ export default function TemplateManage() {
                   const text = showShortText ? '插图' : hintText;
                   html = `<span id="${id}" class="image-placeholder" data-placeholder="true" contenteditable="false"${modeAttr} style="${styleStr}"><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;">${text}</span></span>&#8203;`;
                 }
-                execCmd('insertHTML', html);
+                const wrapper = document.createElement('div');
+                wrapper.innerHTML = html;
+                const fragment = document.createDocumentFragment();
+                while (wrapper.firstChild) {
+                  fragment.appendChild(wrapper.firstChild);
+                }
+                const sel2 = window.getSelection();
+                if (sel2 && sel2.rangeCount > 0) {
+                  const range = sel2.getRangeAt(0);
+                  range.deleteContents();
+                  range.insertNode(fragment);
+                  const lastNode = fragment.lastChild;
+                  if (lastNode) {
+                    range.setStartAfter(lastNode);
+                    range.collapse(true);
+                    sel2.removeAllRanges();
+                    sel2.addRange(range);
+                  }
+                } else if (editorRef.current) {
+                  editorRef.current.appendChild(fragment);
+                }
+                editorRef.current?.focus();
+                saveTemplateContent();
                 setPlaceholderModal({...placeholderModal, isOpen: false});
               }} className="px-4 py-2 bg-accent text-white rounded text-sm">确认插入</button>
             </div>

src/utils/defaultContent.ts

@@ -1,65 +1,62 @@
 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>&#8203;`;
 
 export const defaultReportContent = `
-<!-- 医院Logo -->
-<p style="text-align: center; margin-bottom: 16px;" contenteditable="false">
-    <span class="image-placeholder" data-placeholder="true" contenteditable="false" data-mode="manual" style="display:inline-flex;align-items:center;justify-content:center;width:65px;height:65px;border:1px dashed #cbd5e1;background:#f8fafc;vertical-align:middle;margin:0 auto;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>
+<table style="width: 100%; border: none; margin-bottom: 16px;">
+    <tr>
+        <td style="width: 20%; vertical-align: bottom; border: none; text-align: left;">
+            <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="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>
+        </td>
+        <td style="width: 60%; text-align: center; vertical-align: middle; border: none;">
+            <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>
 
-<!-- 医院名称 -->
-<p style="text-align: center; font-family: SimSun; margin-bottom: 8px;" contenteditable="false">
-    <strong><u>西 安 交 通 大 学 第 一 附 属 医 院</u></strong>
-</p>
-
-<!-- 报告标题 -->
-<h1 style="font-family: SimSun; font-size: 20px; margin: 16px 0; text-align: center;" contenteditable="false">手术记录</h1>
-
-<div class="template-info-section">
-    <p style="font-family: SimSun;">
-        姓名：${smartField('patientName')} 
-        性别：${smartField('patientGender')} 
-        年龄：${smartField('patientAge')} 
-        科别：${smartField('department')} 
-        床号：${smartField('bedNumber')} 
+<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')}&nbsp;&nbsp;&nbsp;
+        性别：${smartField('patientGender')}&nbsp;&nbsp;&nbsp;
+        年龄：${smartField('patientAge')}&nbsp;&nbsp;&nbsp;
+        科别：${smartField('department')}&nbsp;&nbsp;&nbsp;
+        床号：${smartField('bedNumber')}&nbsp;&nbsp;&nbsp;
         住院号：${smartField('hospitalId')}
     </p>
-    
-    <p style="font-family: SimSun;">
-        <strong>手术日期：</strong>${smartField('surgeryDate')}
-    </p>
-    
-    <p style="font-family: SimSun;">
-        <strong>术前诊断：</strong>${smartField('preoperativeDiagnosis')}
-    </p>
-    
-    <p style="font-family: SimSun;">
-        <strong>术后诊断：</strong>${smartField('postoperativeDiagnosis')}
-    </p>
-    
-    <p style="font-family: SimSun;">
-        <strong>手术名称：</strong>${smartField('title')}
-    </p>
-    
-    <p style="font-family: SimSun;">
-        手术开始时间：${smartField('startTime')} 
-        手术终止时间：${smartField('endTime')}
-    </p>
-    
-    <p style="font-family: SimSun;">
-        手术者：${smartField('surgeon')} 
-        助手：${smartField('assistant')}
-    </p>
-    
-    <p style="font-family: SimSun;">
-        麻醉师：${smartField('anesthesiologist')} 
-        麻醉方式：${smartField('anesthesiaType')}
-    </p>
 </div>
 
-<p style="font-family: SimSun;">
+<p style="font-family: SimSun; font-size: 12pt; line-height: 1.8;">
+    <strong>手术日期：</strong>${smartField('surgeryDate')}
+</p>
+<p style="font-family: SimSun; font-size: 12pt; line-height: 1.8;">
+    <strong>术前诊断：</strong>${smartField('preoperativeDiagnosis')}
+</p>
+<p style="font-family: SimSun; font-size: 12pt; line-height: 1.8;">
+    <strong>术中诊断：</strong>${smartField('postoperativeDiagnosis')}
+</p>
+<p style="font-family: SimSun; font-size: 12pt; line-height: 1.8;">
+    <strong>手术名称：</strong>${smartField('title')}
+</p>
+
+<table style="width: 100%; border: none; font-family: SimSun; font-size: 12pt; margin-bottom: 12pt;">
+    <tr>
+        <td style="border: none; padding: 4px 0; width: 50%;">手术开始时间：${smartField('startTime')}</td>
+        <td style="border: none; padding: 4px 0; width: 50%;">手术终止时间：${smartField('endTime')}</td>
+    </tr>
+    <tr>
+        <td style="border: none; padding: 4px 0;">手术者：${smartField('surgeon')}</td>
+        <td style="border: none; padding: 4px 0;">助手：${smartField('assistant')}</td>
+    </tr>
+    <tr>
+        <td style="border: none; padding: 4px 0;">麻醉师：${smartField('anesthesiologist')}</td>
+        <td style="border: none; padding: 4px 0;">麻醉方式：${smartField('anesthesiaType')}</td>
+    </tr>
+</table>
+
+<p style="font-family: SimSun; font-size: 12pt;">
     <strong>手术步骤、术中出现的情况及处理：</strong>
 </p>