# 需求分析 — 2026-04-18-00-02-08

## 原始需求摘要

1. **修复拖拽关键帧插入兼容性**：拖拽关键帧到 `.image-placeholder` 后，虚线边框和背景色未消失，且图片缺少 `max-height:100%;object-fit:contain;` 约束，可能溢出占位符。

2. **图片占位符插入改为自定义弹窗 + 分类隔离**：
   - 替换 `insertImage` 中的 `prompt` 弹窗为自定义 React Modal。
   - 占位符分为两类：
     - **手术影像占位（frame 模式）**：支持自动帧插入、一键插入、拖拽插入。
     - **静态图片占位（manual 模式）**：仅支持点击后从弹窗选择图片来源（本地上传/签名/素材），防止系统自动将手术关键帧填入 Logo 或签名位置。
   - 自动帧插入和一键插入逻辑需跳过 `data-mode="manual"` 的占位符。
   - 拖拽到 manual 占位符时需拦截并提示。

3. **表格插入改为自定义弹窗**：替换 `insertTable` 中的 `prompt` 弹窗为自定义 React Modal，中间弹出子窗口选择行数和列数。

## 需求拆解

### 功能点

- **F1**：`ReportEditor.tsx` 的 `fillPlaceholder` 函数补齐 `border='none'`、`background='transparent'`，图片 style 增加 `max-height:100%;object-fit:contain;`。
- **F2**：`ReportEditor.tsx` 和 `TemplateManage.tsx` 的 `insertImage` 改为打开自定义 Modal（替代 `prompt`）。Modal 包含：
  - 宽高输入框（默认 200*200）
  - 模式选择：手术影像占位（frame）/ 静态图片占位（manual）
  - 确认/取消按钮
- **F3**：生成 placeholder HTML 时，manual 模式添加 `data-mode="manual"` 属性。
- **F4**：`ReportEditor.tsx` 的 `autoCaptureFrames`（setTimeout 回调内）、`insertFrameToPlaceholder` 的空占位符选择器，从 `.image-placeholder:not(.has-image)` 改为 `.image-placeholder:not(.has-image):not([data-mode="manual"])`。
- **F5**：`ReportEditor.tsx` 的 `handleDrop` 增加拦截：若目标 placeholder 的 `data-mode === 'manual'`，弹出提示并阻止填充。
- **F6**：`ReportEditor.tsx` 和 `TemplateManage.tsx` 的 `insertTable` 改为打开自定义 Modal（替代 `prompt`），包含行数/列数输入和确认/取消按钮。

### 非功能点

- 向后兼容：已有报告中已有的 placeholder 结构不受影响（没有 `data-mode` 属性的占位符默认为 frame 模式）。
- Modal 样式复用现有的 `bg-black/50 backdrop-blur-sm` + `bg-white rounded-2xl` 风格。

## 影响范围预估

| 模块 | 影响程度 | 说明 |
|------|---------|------|
| `src/pages/ReportEditor.tsx` | 高 | fillPlaceholder 修复；insertImage 改为 Modal；insertTable 改为 Modal；autoCaptureFrames 选择器；insertFrameToPlaceholder 选择器；handleDrop 拦截；新增 3 个 Modal 的 JSX |
| `src/pages/TemplateManage.tsx` | 高 | insertImage 改为 Modal；insertTable 改为 Modal；新增 2 个 Modal 的 JSX |

## 待确认问题

无（用户已明确需求，且本次无需人工确认）。