6.6 KiB
6.6 KiB
🧪 第二阶段功能验证指南
🚀 快速启动
1. 启动后端服务
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. 启动前端服务
新开一个终端：
cd web
npm run dev
应该看到：
VITE v7.x.x ready in xxx ms
➜ Local: http://localhost:5173/
➜ Network: use --host to expose
3. 打开浏览器
✅ 功能验证清单
测试 1: 算子动态加载 ✅
步骤：
- 打开浏览器开发者工具（F12）
- 切换到 Console 标签
- 刷新页面
期望结果：
- ✅ Console 显示：
✅ 成功加载 8 个算子 - ✅ 左侧显示 8 种算子（分类折叠）
- ✅ 搜索 "CSV" 能过滤显示相关算子
截图位置：
- 左侧算子面板
- Console 日志
测试 2: 节点预览功能 ✅
步骤：
- 从左侧拖拽 "📂 CSV 数据加载器" 到画布
- 点击画布中的节点（节点边框高亮）
- 右侧属性面板应显示节点信息
- 点击 "▶ 运行预览" 按钮
期望结果：
- ✅ 按钮变为 "⏳ 运行中..."（禁用状态）
- ✅ 1 秒后显示数据表格
- ✅ 表格头部：
timestamp | frame_time | cpu_usage | memory_mb - ✅ 表格内容：5 行模拟数据
- ✅ 右上角显示：
5 列 × 5 行 - ✅ Console 显示：
✅ 预览成功: {...}
截图位置：
- 右侧 Inspector 面板
- 预览表格
- Console 日志
测试 3: 执行状态反馈 ✅
步骤：
- 确保画布有至少 1 个节点
- 点击 Header 的 "▶ 运行" 按钮
期望结果（执行开始）：
- ✅ 按钮文字变为 "⏳ 执行中..."
- ✅ 按钮背景变为橙色渐变
- ✅ 状态指示灯变为橙色（呼吸动画）
- ✅ 状态文字变为 "执行中"
- ✅ 所有连线开始橙色流动动画
- ✅ 连线宽度增加（更明显）
- ✅ 按钮禁用，无法再次点击
期望结果（执行完成，约 1 秒后）：
- ✅ 按钮恢复蓝色渐变
- ✅ 按钮文字变为 "▶ 运行"
- ✅ 状态灯变为绿色
- ✅ 状态文字变为 "完成"
- ✅ 连线停止动画，变为绿色
- ✅ 按钮下方显示悬浮提示：
✅ 成功执行了包含 X 个节点和 Y 条连接的计算图 - ✅ Console 显示：
✅ 执行成功: {...}
期望结果（3 秒后）：
- ✅ 悬浮提示自动消失
- ✅ 状态灯变为灰色
- ✅ 状态文字变为 "空闲"
截图位置：
- Header 状态指示区
- Run 按钮及提示
- 画布连线动画
- Console 日志
测试 4: 错误处理 ✅
步骤：
- 关闭后端服务（Ctrl+C）
- 刷新前端页面
期望结果：
- ✅ 左侧显示红色错误提示框
- ✅ 提示内容：
⚠️ 连接失败+ 错误信息 - ✅ 提示底部：
请确保后端服务已启动（http://127.0.0.1:8000） - ✅ Console 显示：
❌ 无法加载算子列表: ...
步骤（执行错误）：
- 重启后端服务
- 点击 Run 按钮
- 后端返回错误（模拟场景）
期望结果：
- ✅ 状态灯变为红色
- ✅ 状态文字变为 "失败"
- ✅ 显示错误提示（红色）
- ✅ Console 显示：
❌ 执行失败: ...
截图位置：
- 左侧错误提示
- Header 状态灯（红色）
- 错误提示消息
测试 5: 搜索过滤 ✅
步骤：
- 在左侧搜索框输入 "CSV"
- 输入 "Filter"
- 输入 "不存在的算子"
- 清空搜索框
期望结果：
- ✅ 输入 "CSV"：只显示 CSVLoader 相关
- ✅ 输入 "Filter"：显示 FilterRows 和 TimeRangeFilter
- ✅ 输入不存在的：显示
未找到包含 "xxx" 的算子 - ✅ 清空：恢复显示所有算子
- ✅ 搜索框右侧显示 "×" 清除按钮
截图位置：
- 搜索框
- 过滤结果
测试 6: 响应式布局 ✅
步骤：
- 点击 Header 的 📦 按钮（隐藏左侧面板）
- 点击 ⚙️ 按钮（隐藏右侧面板）
- 再次点击恢复
期望结果：
- ✅ 隐藏左侧：画布向左扩展，平滑动画
- ✅ 隐藏右侧：画布向右扩展，平滑动画
- ✅ 按钮状态高亮（蓝色边框）
- ✅ 恢复后画布自动调整
截图位置：
- 隐藏前
- 隐藏后
- 恢复后
测试 7: 表格渲染细节 ✅
步骤：
- 拖拽 "⚙️ 行过滤器" 到画布
- 点击节点
- 点击 "运行预览"
期望结果：
- ✅ 表格头部背景色为蓝色渐变
- ✅ 列名文字为蓝色
- ✅ 数值显示两位小数（如：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: 检查后端是否启动
curl http://127.0.0.1:8000
# 应返回 JSON 数据
Q: 点击预览无反应
A: 打开 Console 查看错误
- 如果是网络错误：检查后端
- 如果是 CORS 错误：检查后端 CORS 配置
Q: Run 按钮一直禁用
A: 确保画布有至少 1 个节点
Q: 连线动画不流畅
A: 减少节点数量或关闭开发者工具
📸 截图清单
建议截图记录以下场景：
- ✅ 算子列表加载成功
- ✅ 预览表格显示
- ✅ 执行中状态（橙色）
- ✅ 执行完成状态（绿色）
- ✅ 错误提示（红色）
- ✅ 搜索过滤结果
- ✅ 响应式布局（隐藏侧边栏）
🎯 下一步
完成所有测试后：
- ✅ 记录任何发现的问题
- ✅ 提交测试报告
- ✅ 开始第三阶段开发
验证状态: ⏳ 待验证
预计时间: 15-20 分钟
测试环境: Windows 10/11, Chrome/Edge