Mdeical_Sur_Report/工程分析/实现方案-2026-04-18-00-43-19.md

实现方案 — 2026-04-18-00-43-19

根因分析

此前对「插入图片占位符」进行了弹窗改造，生成的占位符 HTML 新增了 data-mode="frame|manual" 属性，用于区分手术影像占位（允许拖拽/自动插入关键帧）和静态图片占位（仅允许点击上传/签名/素材）。

但 defaultContent.ts 中的默认模板仍使用旧版 image-placeholder 结构，缺少 data-mode 属性。这导致：

• 默认模板中的签名、Logo 等静态占位符在新建报告时，可被关键帧拖拽误填充。
• autoCaptureFrames、insertFrameToPlaceholder 等逻辑通过 :not([data-mode="manual"]) 选择器过滤时，无该属性的占位符会被错误地当作手术影像占位处理。

修改文件清单

• src/utils/defaultContent.ts

具体代码变更

一、医院 Logo 占位符（line 6）

原结构：

<span class="image-placeholder" data-placeholder="true" contenteditable="false" 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>

新结构（仅添加 data-mode="manual"，宽高及布局不变）：

<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>

二、表格内术中影像占位符（lines 90/97/104/113/120/127，共 6 处）

原结构：

<span class="image-placeholder" data-placeholder="true" contenteditable="false" style="display:inline-flex;align-items:center;justify-content:center;width:100%;height:150px;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>

新结构（仅添加 data-mode="frame"，宽高及布局不变）：

<span class="image-placeholder" data-placeholder="true" contenteditable="false" data-mode="frame" style="display:inline-flex;align-items:center;justify-content:center;width:100%;height:150px;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>

三、手术者签名占位符（line 154）

原结构：

<span class="image-placeholder" data-placeholder="true" contenteditable="false" 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>

新结构（添加 data-mode="manual"，并将提示文本改为「插入/点击放置图片」，因为 width=200px ≥ 80px）：

<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>

风险点与应对措施

风险	应对措施
修改默认模板后，新建报告的布局发生偏移	仅添加 data-mode 属性并修改文本，保持 style 中 width/height/margin/display 等所有布局属性绝对不变。
默认模板中占位符是 <span>，而新弹窗在表格内生成 <div>	用户明确要求「只保存当前框的大小不变」，因此不改动标签类型，保持 <span> 以避免表格布局被破坏。

回滚策略

• 仅修改单个文件 src/utils/defaultContent.ts，回滚时直接还原该文件即可。