314 lines
6.6 KiB
Markdown
314 lines
6.6 KiB
Markdown
# 🧪 第二阶段功能验证指南
|
||
|
||
## 🚀 快速启动
|
||
|
||
### 1. 启动后端服务
|
||
|
||
```powershell
|
||
cd server
|
||
python main.py
|
||
```
|
||
|
||
应该看到：
|
||
```
|
||
🚀 启动 TraceStudio 服务器...
|
||
📡 访问 http://127.0.0.1:8000/docs 查看 API 文档
|
||
INFO: Started server process
|
||
INFO: Uvicorn running on http://127.0.0.1:8000
|
||
```
|
||
|
||
### 2. 启动前端服务
|
||
|
||
新开一个终端：
|
||
|
||
```powershell
|
||
cd web
|
||
npm run dev
|
||
```
|
||
|
||
应该看到：
|
||
```
|
||
VITE v7.x.x ready in xxx ms
|
||
|
||
➜ Local: http://localhost:5173/
|
||
➜ Network: use --host to expose
|
||
```
|
||
|
||
### 3. 打开浏览器
|
||
|
||
访问 http://localhost:5173
|
||
|
||
---
|
||
|
||
## ✅ 功能验证清单
|
||
|
||
### 测试 1: 算子动态加载 ✅
|
||
|
||
**步骤：**
|
||
1. 打开浏览器开发者工具（F12）
|
||
2. 切换到 Console 标签
|
||
3. 刷新页面
|
||
|
||
**期望结果：**
|
||
- ✅ Console 显示：`✅ 成功加载 8 个算子`
|
||
- ✅ 左侧显示 8 种算子（分类折叠）
|
||
- ✅ 搜索 "CSV" 能过滤显示相关算子
|
||
|
||
**截图位置：**
|
||
- 左侧算子面板
|
||
- Console 日志
|
||
|
||
---
|
||
|
||
### 测试 2: 节点预览功能 ✅
|
||
|
||
**步骤：**
|
||
1. 从左侧拖拽 "📂 CSV 数据加载器" 到画布
|
||
2. 点击画布中的节点（节点边框高亮）
|
||
3. 右侧属性面板应显示节点信息
|
||
4. 点击 "▶ 运行预览" 按钮
|
||
|
||
**期望结果：**
|
||
- ✅ 按钮变为 "⏳ 运行中..."（禁用状态）
|
||
- ✅ 1 秒后显示数据表格
|
||
- ✅ 表格头部：`timestamp | frame_time | cpu_usage | memory_mb`
|
||
- ✅ 表格内容：5 行模拟数据
|
||
- ✅ 右上角显示：`5 列 × 5 行`
|
||
- ✅ Console 显示：`✅ 预览成功: {...}`
|
||
|
||
**截图位置：**
|
||
- 右侧 Inspector 面板
|
||
- 预览表格
|
||
- Console 日志
|
||
|
||
---
|
||
|
||
### 测试 3: 执行状态反馈 ✅
|
||
|
||
**步骤：**
|
||
1. 确保画布有至少 1 个节点
|
||
2. 点击 Header 的 "▶ 运行" 按钮
|
||
|
||
**期望结果（执行开始）：**
|
||
- ✅ 按钮文字变为 "⏳ 执行中..."
|
||
- ✅ 按钮背景变为橙色渐变
|
||
- ✅ 状态指示灯变为橙色（呼吸动画）
|
||
- ✅ 状态文字变为 "执行中"
|
||
- ✅ 所有连线开始橙色流动动画
|
||
- ✅ 连线宽度增加（更明显）
|
||
- ✅ 按钮禁用，无法再次点击
|
||
|
||
**期望结果（执行完成，约 1 秒后）：**
|
||
- ✅ 按钮恢复蓝色渐变
|
||
- ✅ 按钮文字变为 "▶ 运行"
|
||
- ✅ 状态灯变为绿色
|
||
- ✅ 状态文字变为 "完成"
|
||
- ✅ 连线停止动画，变为绿色
|
||
- ✅ 按钮下方显示悬浮提示：`✅ 成功执行了包含 X 个节点和 Y 条连接的计算图`
|
||
- ✅ Console 显示：`✅ 执行成功: {...}`
|
||
|
||
**期望结果（3 秒后）：**
|
||
- ✅ 悬浮提示自动消失
|
||
- ✅ 状态灯变为灰色
|
||
- ✅ 状态文字变为 "空闲"
|
||
|
||
**截图位置：**
|
||
- Header 状态指示区
|
||
- Run 按钮及提示
|
||
- 画布连线动画
|
||
- Console 日志
|
||
|
||
---
|
||
|
||
### 测试 4: 错误处理 ✅
|
||
|
||
**步骤：**
|
||
1. 关闭后端服务（Ctrl+C）
|
||
2. 刷新前端页面
|
||
|
||
**期望结果：**
|
||
- ✅ 左侧显示红色错误提示框
|
||
- ✅ 提示内容：`⚠️ 连接失败` + 错误信息
|
||
- ✅ 提示底部：`请确保后端服务已启动（http://127.0.0.1:8000）`
|
||
- ✅ Console 显示：`❌ 无法加载算子列表: ...`
|
||
|
||
**步骤（执行错误）：**
|
||
1. 重启后端服务
|
||
2. 点击 Run 按钮
|
||
3. 后端返回错误（模拟场景）
|
||
|
||
**期望结果：**
|
||
- ✅ 状态灯变为红色
|
||
- ✅ 状态文字变为 "失败"
|
||
- ✅ 显示错误提示（红色）
|
||
- ✅ Console 显示：`❌ 执行失败: ...`
|
||
|
||
**截图位置：**
|
||
- 左侧错误提示
|
||
- Header 状态灯（红色）
|
||
- 错误提示消息
|
||
|
||
---
|
||
|
||
### 测试 5: 搜索过滤 ✅
|
||
|
||
**步骤：**
|
||
1. 在左侧搜索框输入 "CSV"
|
||
2. 输入 "Filter"
|
||
3. 输入 "不存在的算子"
|
||
4. 清空搜索框
|
||
|
||
**期望结果：**
|
||
- ✅ 输入 "CSV"：只显示 CSVLoader 相关
|
||
- ✅ 输入 "Filter"：显示 FilterRows 和 TimeRangeFilter
|
||
- ✅ 输入不存在的：显示 `未找到包含 "xxx" 的算子`
|
||
- ✅ 清空：恢复显示所有算子
|
||
- ✅ 搜索框右侧显示 "×" 清除按钮
|
||
|
||
**截图位置：**
|
||
- 搜索框
|
||
- 过滤结果
|
||
|
||
---
|
||
|
||
### 测试 6: 响应式布局 ✅
|
||
|
||
**步骤：**
|
||
1. 点击 Header 的 📦 按钮（隐藏左侧面板）
|
||
2. 点击 ⚙️ 按钮（隐藏右侧面板）
|
||
3. 再次点击恢复
|
||
|
||
**期望结果：**
|
||
- ✅ 隐藏左侧：画布向左扩展，平滑动画
|
||
- ✅ 隐藏右侧：画布向右扩展，平滑动画
|
||
- ✅ 按钮状态高亮（蓝色边框）
|
||
- ✅ 恢复后画布自动调整
|
||
|
||
**截图位置：**
|
||
- 隐藏前
|
||
- 隐藏后
|
||
- 恢复后
|
||
|
||
---
|
||
|
||
### 测试 7: 表格渲染细节 ✅
|
||
|
||
**步骤：**
|
||
1. 拖拽 "⚙️ 行过滤器" 到画布
|
||
2. 点击节点
|
||
3. 点击 "运行预览"
|
||
|
||
**期望结果：**
|
||
- ✅ 表格头部背景色为蓝色渐变
|
||
- ✅ 列名文字为蓝色
|
||
- ✅ 数值显示两位小数（如：16.70）
|
||
- ✅ 行与行之间有分隔线
|
||
- ✅ 表格可滚动（如果数据多）
|
||
- ✅ 表格字体为 monospace
|
||
|
||
**截图位置：**
|
||
- 预览表格
|
||
|
||
---
|
||
|
||
## 🎨 视觉验证要点
|
||
|
||
### 颜色主题一致性
|
||
|
||
- **主色调**：深蓝黑（#0b1220）
|
||
- **强调色**：蓝色渐变（#3b82f6 → #2563eb）
|
||
- **成功色**：绿色（#22c55e）
|
||
- **警告色**：橙色（#f59e0b）
|
||
- **错误色**：红色（#ef4444）
|
||
|
||
### 动画流畅性
|
||
|
||
- **过渡动画**：0.15-0.3s ease
|
||
- **呼吸动画**：2s ease-in-out infinite
|
||
- **滑动动画**：0.3s ease
|
||
- **连线流动**：React Flow 默认速度
|
||
|
||
### 间距一致性
|
||
|
||
- **小间距**：4-8px
|
||
- **中间距**：12-16px
|
||
- **大间距**：20-24px
|
||
|
||
---
|
||
|
||
## 📊 性能检查
|
||
|
||
### 加载时间
|
||
|
||
- ✅ 页面首次加载：< 2s
|
||
- ✅ 算子列表加载：< 500ms
|
||
- ✅ 预览请求响应：< 1s
|
||
- ✅ 执行请求响应：< 1s
|
||
|
||
### 内存占用
|
||
|
||
- ✅ 空画布：< 100MB
|
||
- ✅ 10 个节点：< 150MB
|
||
- ✅ 50 个节点：< 300MB
|
||
|
||
### 动画帧率
|
||
|
||
- ✅ 连线动画：> 30 FPS
|
||
- ✅ 状态灯呼吸：> 60 FPS
|
||
|
||
---
|
||
|
||
## 🐛 常见问题
|
||
|
||
### Q: 左侧显示"连接失败"
|
||
|
||
**A:** 检查后端是否启动
|
||
```powershell
|
||
curl http://127.0.0.1:8000
|
||
# 应返回 JSON 数据
|
||
```
|
||
|
||
### Q: 点击预览无反应
|
||
|
||
**A:** 打开 Console 查看错误
|
||
- 如果是网络错误：检查后端
|
||
- 如果是 CORS 错误：检查后端 CORS 配置
|
||
|
||
### Q: Run 按钮一直禁用
|
||
|
||
**A:** 确保画布有至少 1 个节点
|
||
|
||
### Q: 连线动画不流畅
|
||
|
||
**A:** 减少节点数量或关闭开发者工具
|
||
|
||
---
|
||
|
||
## 📸 截图清单
|
||
|
||
建议截图记录以下场景：
|
||
|
||
1. ✅ 算子列表加载成功
|
||
2. ✅ 预览表格显示
|
||
3. ✅ 执行中状态（橙色）
|
||
4. ✅ 执行完成状态（绿色）
|
||
5. ✅ 错误提示（红色）
|
||
6. ✅ 搜索过滤结果
|
||
7. ✅ 响应式布局（隐藏侧边栏）
|
||
|
||
---
|
||
|
||
## 🎯 下一步
|
||
|
||
完成所有测试后：
|
||
|
||
1. ✅ 记录任何发现的问题
|
||
2. ✅ 提交测试报告
|
||
3. ✅ 开始第三阶段开发
|
||
|
||
---
|
||
|
||
**验证状态**: ⏳ 待验证
|
||
**预计时间**: 15-20 分钟
|
||
**测试环境**: Windows 10/11, Chrome/Edge
|