# 测试方案 — 2026-04-16-17-21-58

## 测试环境准备
1. 项目已完成上一次构建，无类型错误。
2. 使用测试账号 `admin / 123456`（超级管理员）登录系统。
3. 进入 **图文报告生成** 页面并上传视频完成抽帧，确保视频分析面板有关键帧截图。

---

## 测试项清单

### 测试项 1："插入" 按钮位于底部正确位置且不遮盖图片
**测试步骤**：
1. 将鼠标悬停到任意关键帧截图卡片上。
2. 观察 "插入" 按钮的位置。

**预期结果**：
- 按钮位于卡片底部，**时间格式（如 `00:15`）**和 **"可拖拽"** 提示之间。
- 按钮**不覆盖在图片上**，图片内容完全可见，无遮挡。

---

### 测试项 2："插入" 按钮为蓝色实体按钮样式
**测试步骤**：
1. 鼠标悬停到关键帧卡片，观察 "插入" 按钮的颜色和形状。

**预期结果**：
- 按钮为**蓝色实体胶囊按钮**（`bg-accent` 背景 + 白色文字 + 圆角 + 轻微阴影）。
- 按钮颜色与底部 "可拖拽" 的蓝色一致，视觉上协调统一。
- 不是纯文字链接样式。

---

### 测试项 3：显隐行为与 "可拖拽" 同步
**测试步骤**：
1. 鼠标移入关键帧卡片。
2. 鼠标移出关键帧卡片。

**预期结果**：
- 移入时，"插入" 按钮与 "可拖拽" 文字**同时淡入显示**。
- 移出时，"插入" 按钮与 "可拖拽" 文字**同时淡出隐藏**。

---

### 测试项 4：点击功能与事件冒泡正常
**测试步骤**：
1. 鼠标悬停到关键帧卡片，点击 **"插入"** 按钮。

**预期结果**：
- 编辑器中第一个空置的 `image-placeholder` 被自动填充（或弹出 `没有可插入图片的空位` 提示）。
- 视频播放器时间不发生变化（未触发卡片跳转）。

---

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

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

---

## 回归验证范围
- [ ] 拖拽插入功能未被破坏。
- [ ] 关键帧卡片的删除、手动徽章显示正常。
- [ ] 编辑器保存、打印功能正常。