73 lines
2.2 KiB
Markdown
73 lines
2.2 KiB
Markdown
# 测试方案 — 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` 构建成功。
|
||
|
||
---
|
||
|
||
## 回归验证范围
|
||
- [ ] 拖拽插入功能未被破坏。
|
||
- [ ] 关键帧卡片的删除、手动徽章显示正常。
|
||
- [ ] 编辑器保存、打印功能正常。
|