# 测试方案 — 2026-04-16-17-07-04

## 测试环境准备
1. 项目已构建通过，无类型错误。
2. 使用测试账号 `admin / 123456`（超级管理员）登录系统。
3. 进入 **图文报告生成** 页面，确认编辑器中已加载默认模板（包含若干 `image-placeholder` 图片占位符）。
4. 在 **视频分析** 面板中上传至少一个手术视频，等待系统自动抽帧完成。

---

## 测试项清单

### 测试项 1："插入" 按钮显隐行为正确
**测试步骤**：
1. 在视频分析面板中查看自动抽帧的关键帧列表。
2. 将鼠标移入某张关键帧截图卡片上。
3. 再将鼠标移出该卡片。

**预期结果**：
- 鼠标移入时，截图卡片底部同时显示 **"插入"** 和 **"可拖拽"** 两个提示文字。
- 鼠标移出时，两者同时隐藏。
- "插入" 位于截图时间（如 `00:15`）和 "可拖拽" 之间。

---

### 测试项 2：点击 "插入" 自动填充第一个空置占位符
**测试步骤**：
1. 确认编辑器中存在至少一个尚未填充图片的 `.image-placeholder`（未显示图片的灰色虚线框）。
2. 在视频分析面板中，将鼠标悬停到第一张关键帧截图上，点击 **"插入"**。
3. 再次点击第二张关键帧截图的 **"插入"**。

**预期结果**：
- 第一次点击后，编辑器中**第一个**空置占位符被填充为第一张关键帧图片。
- 第二次点击后，编辑器中**第二个**空置占位符被填充为第二张关键帧图片。
- 填充后的占位符变为正常图片显示，且带有删除按钮 `×`。

---

### 测试项 3：无空占位符时给出提示
**测试步骤**：
1. 连续点击 "插入" 直到编辑器中所有 `image-placeholder` 都被填满。
2. 再次点击任意关键帧的 **"插入"**。

**预期结果**：
- 浏览器弹出提示框：**"没有可插入图片的空位"**。
- 不会报错，现有已填充的图片不受影响。

---

### 测试项 4：点击 "插入" 不触发视频跳转
**测试步骤**：
1. 点击某张关键帧卡片的 **"插入"** 按钮。
2. 观察左侧视频播放器。

**预期结果**：
- 视频播放器的当前时间**不发生变化**（不会因为点击了卡片本身而跳转到该帧位置）。

---

### 测试项 5：原有拖拽功能保持正常
**测试步骤**：
1. 手动拖拽视频分析面板中的某张关键帧截图到编辑器中的空置 `image-placeholder` 上。

**预期结果**：
- 拖拽释放后，该占位符正确显示被拖拽的图片。
- 拖拽功能与 "插入" 按钮功能互不干扰。

---

### 测试项 6：构建与类型检查回归
**测试步骤**：
1. 在项目根目录执行：
   ```bash
   npm run lint
   npm run build
   ```

**预期结果**：
- `npm run lint` 无 TypeScript 编译错误。
- `npm run build` 构建成功。

---

## 回归验证范围
- [ ] `SystemSettings.tsx` 未被修改，系统设置功能保持正常。
- [ ] `storage.ts` 未被修改，存储读写保持正常。
- [ ] 编辑器打印、保存草稿、完成报告功能保持正常。
- [ ] 关键帧的 "手动截取"、删除功能保持正常。