75 lines
5.0 KiB
Markdown
75 lines
5.0 KiB
Markdown
# 实现方案 — 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
|
||
<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"`，宽高及布局不变）：
|
||
```html
|
||
<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 处）
|
||
|
||
原结构：
|
||
```html
|
||
<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"`，宽高及布局不变）：
|
||
```html
|
||
<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）
|
||
|
||
原结构：
|
||
```html
|
||
<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）：
|
||
```html
|
||
<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`，回滚时直接还原该文件即可。
|