TraceStudio-dev/docs/web1.0/TESTING_PHASE2.md

# 🧪 第二阶段功能验证指南

## 🚀 快速启动

### 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