# Vue Flow Design 自测流程

## 测试环境
- 启动命令: `pnpm dev` 选择 `@vben/web-antd`
- 访问地址: http://localhost:5666/workflow/vue-flow-design

## 测试检查清单

### 1. 页面加载 ✓
- [ ] 页面正常加载无报错
- [ ] 左侧节点面板显示正常（HTTP请求、数据转换、条件判断、结束节点）
- [ ] 中间画布区域显示正常
- [ ] 右侧配置面板显示正常（初始为空）
- [ ] 顶部工具栏显示（保存、加载、清空）

### 2. 节点拖拽功能 ✓
- [ ] 从左侧拖拽"HTTP请求"节点到画布
- [ ] 从左侧拖拽"数据转换"节点到画布
- [ ] 从左侧拖拽"条件判断"节点到画布
- [ ] 从左侧拖拽"结束节点"到画布
- [ ] 节点在画布中正确显示图标和名称

### 3. 节点连接功能 ✓
- [ ] 从 HTTP请求 节点的输出端点连接到 数据转换 节点的输入端点
- [ ] 从 数据转换 节点的输出端点连接到 条件判断 节点的输入端点
- [ ] 从 条件判断 节点连接到 结束节点
- [ ] 连接线显示正确的箭头

### 4. 节点配置功能 ✓
- [ ] 点击 HTTP请求 节点，右侧显示配置面板
- [ ] 配置 URL: `https://api.example.com/users`
- [ ] 配置 Method: GET
- [ ] 配置 Headers（可选）

### 5. 字段映射功能 ✓
- [ ] 点击 数据转换 节点
- [ ] 添加字段映射
- [ ] 点击"选择字段"按钮，弹出字段选择器
- [ ] 在字段选择器中看到前置节点的字段树
- [ ] 选择一个字段，自动填充表达式 `${nodes.xxx.output.field}`
- [ ] 支持手动编辑表达式
- [ ] 字段映射保存正确

### 6. 条件表达式功能 ✓
- [ ] 点击 条件判断 节点
- [ ] 配置条件表达式（如 `${nodes.n1.output.status} === 200`）
- [ ] 条件表达式支持字段选择
- [ ] 表达式语法高亮显示（等宽字体）

### 7. 工作流保存与加载 ✓
- [ ] 点击"保存工作流"按钮
- [ ] 输入工作流名称并保存
- [ ] 点击"加载工作流"按钮
- [ ] 看到已保存的工作流列表
- [ ] 选择并加载工作流
- [ ] 工作流正确恢复（节点、连接、配置）

### 8. 工作流清空 ✓
- [ ] 点击"清空画布"按钮
- [ ] 确认清空
- [ ] 画布恢复为空白状态

### 9. Mock 数据测试 ✓
- [ ] 打开浏览器控制台
- [ ] 查看 Mock 工作流数据已正确加载
- [ ] 验证节点类型定义正确
- [ ] 验证字段树数据结构正确

### 10. 响应式布局 ✓
- [ ] 拖动右侧配置面板边界，调整宽度
- [ ] 验证画布自适应调整
- [ ] 验证节点位置保持正确

## 已知问题
- 暂无

## 测试结果
- 测试日期: 
- 测试人员: 
- 测试结果: ✓ 通过 / ✗ 失败
- 备注:

