74 lines
2.1 KiB
Markdown
74 lines
2.1 KiB
Markdown
# 测试方案 — 2026-04-16-17-15-37
|
||
|
||
## 测试环境准备
|
||
1. 项目已完成上一次构建，无类型错误。
|
||
2. 使用测试账号 `admin / 123456`（超级管理员）登录系统。
|
||
3. 进入 **图文报告生成** 页面并上传视频完成抽帧，确保视频分析面板有关键帧截图。
|
||
|
||
---
|
||
|
||
## 测试项清单
|
||
|
||
### 测试项 1："插入" 按钮位于图片中央且为实体按钮样式
|
||
**测试步骤**：
|
||
1. 将鼠标悬停到任意关键帧截图卡片上。
|
||
2. 观察按钮的位置、颜色、形状。
|
||
|
||
**预期结果**：
|
||
- 按钮显示在图片的**正中央**。
|
||
- 按钮是**实体胶囊按钮**（带背景色、圆角、阴影），不是纯文字链接。
|
||
- 按钮颜色为**绿色系**（`emerald-500`），与底部 "可拖拽" 的蓝色明显不同。
|
||
|
||
---
|
||
|
||
### 测试项 2："插入" 按钮显隐行为正确
|
||
**测试步骤**：
|
||
1. 鼠标移入关键帧卡片。
|
||
2. 鼠标移出关键帧卡片。
|
||
|
||
**预期结果**：
|
||
- 移入时按钮与 "可拖拽" 文字同时淡入显示。
|
||
- 移出时按钮与 "可拖拽" 文字同时淡出隐藏。
|
||
- 未悬停时图片上无遮挡文字。
|
||
|
||
---
|
||
|
||
### 测试项 3：点击按钮功能保持正常
|
||
**测试步骤**：
|
||
1. 鼠标悬停到关键帧卡片，点击中央的 **"插入"** 按钮。
|
||
|
||
**预期结果**：
|
||
- 编辑器中第一个空置的 `image-placeholder` 被填充为该帧图片。
|
||
- 视频播放器时间不发生变化（未触发卡片跳转）。
|
||
- 若无可插入空位，弹出 `没有可插入图片的空位` 提示。
|
||
|
||
---
|
||
|
||
### 测试项 4："手动" 徽章不被遮挡
|
||
**测试步骤**：
|
||
1. 查看手动截取的关键帧截图。
|
||
|
||
**预期结果**：
|
||
- 左上角的 **"手动"** 徽章清晰可见，未被中央按钮遮挡。
|
||
|
||
---
|
||
|
||
### 测试项 5：构建与类型检查回归
|
||
**测试步骤**：
|
||
1. 在项目根目录执行：
|
||
```bash
|
||
npm run lint
|
||
npm run build
|
||
```
|
||
|
||
**预期结果**：
|
||
- `npm run lint` 无 TypeScript 编译错误。
|
||
- `npm run build` 构建成功。
|
||
|
||
---
|
||
|
||
## 回归验证范围
|
||
- [ ] 拖拽插入功能未被破坏。
|
||
- [ ] 关键帧卡片的删除、视频跳转功能正常。
|
||
- [ ] 编辑器保存、打印功能正常。
|