# 实现方案 — 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）
原结构：
```html
×
插入图片
```
新结构（仅添加 `data-mode="manual"`，宽高及布局不变）：
```html
×
插入图片
```
### 二、表格内术中影像占位符（lines 90/97/104/113/120/127，共 6 处）
原结构：
```html
×
插入/点击放置图片
```
新结构（仅添加 `data-mode="frame"`，宽高及布局不变）：
```html
×
插入/点击放置图片
```
### 三、手术者签名占位符（line 154）
原结构：
```html
×插入图片
```
新结构（添加 `data-mode="manual"`，并将提示文本改为「插入/点击放置图片」，因为 width=200px ≥ 80px）：
```html
×插入/点击放置图片
```
## 风险点与应对措施
| 风险 | 应对措施 |
|------|---------|
| 修改默认模板后，新建报告的布局发生偏移 | 仅添加 `data-mode` 属性并修改文本，保持 `style` 中 `width/height/margin/display` 等所有布局属性绝对不变。 |
| 默认模板中占位符是 ``，而新弹窗在表格内生成 `` | 用户明确要求「只保存当前框的大小不变」，因此不改动标签类型，保持 `` 以避免表格布局被破坏。 |
## 回滚策略
- 仅修改单个文件 `src/utils/defaultContent.ts`，回滚时直接还原该文件即可。