# 快速测试：字段映射功能

## 测试步骤

### 1. 打开工作流设计器

访问：http://localhost:5666/workflow/vue-flow-design

### 2. 创建测试工作流

1. 从左侧拖拽 **HTTP Request** 节点到画布（这将是节点 n1）
2. 再拖拽一个 **HTTP Request** 节点到画布（这将是节点 n2）
3. 将 n1 连接到 n2（从 n1 的输出点拖拽到 n2 的输入点）

### 3. 配置第一个节点 (n1)

1. 点击第一个 HTTP Request 节点
2. 右侧配置面板中：
   - 节点名称：改为 "获取用户信息"
   - URL: `https://api.example.com/users/1`
   - Method: 保持 `GET`

### 4. 配置第二个节点 (n2) - 测试字段映射

1. 点击第二个 HTTP Request 节点
2. 节点名称：改为 "更新用户状态"
3. 找到 **URL** 字段

#### 测试方法1：使用字段选择器

1. 点击 URL 字段右侧的 **🕐 字段选择器**图标按钮
2. 在弹出的对话框中：
   - 左侧应该显示 "获取用户信息 (n1)"
   - 点击选择该节点
   - 右侧会显示字段树（展开 nodes → n1 → output → body）
   - 选择任意叶子节点（例如 `body.email`）
3. 点击后对话框会关闭
4. **检查结果**：
   - URL 输入框应该显示：`${nodes.n1.output.body.email}`
   - 输入框下方应该显示蓝色的字段映射信息卡片：
     ```
     🔗 来自节点 获取用户信息 的字段 output.body.email [×]
     ```

#### 测试方法2：使用表达式按钮

1. 点击 URL 字段右侧的 **ƒ 表达式切换**按钮（函数图标）
2. 输入框应该变为表达式模式
3. 手动输入：`${nodes.n1.output.body.name}`
4. **检查结果**：
   - 输入框下方应该自动显示字段映射信息：
     ```
     🔗 来自节点 获取用户信息 的字段 output.body.name [×]
     ```

#### 测试方法3：清除字段映射

1. 点击字段映射信息卡片右侧的 **×** 按钮
2. **检查结果**：
   - 输入框应该变为空
   - 字段映射信息卡片消失
   - 表达式模式关闭，恢复为普通文本输入

### 5. 测试其他字段

对 **Headers** 和 **Body** 字段进行相同的测试。

### 6. 保存配置

1. 点击配置面板底部的 **保存** 按钮
2. 配置应该被保存到节点中

## 预期效果

### 视觉效果

1. **字段选择器按钮**：在支持字段映射的字段右侧，应该看到两个按钮：
   - **ƒ** - 表达式切换按钮（灰色，激活时变蓝）
   - **🕐** - 字段选择器按钮

2. **字段映射信息卡片**：
   - 背景色：浅蓝色 (#f0f7ff)
   - 边框：蓝色 (#bae7ff)
   - 包含：
     - 🔗 图标
     - "来自节点" + 节点名称（蓝色粗体）
     - "的字段" + 字段路径（橙色代码样式）
     - × 删除按钮（红色）

3. **字段选择器对话框**：
   - 宽度：700px
   - 左侧：上游节点列表（最大宽度 250px）
   - 右侧：字段树（带搜索框）
   - 叶子节点显示绿色 "可选" 标签

### 功能效果

1. ✅ 点击字段选择器按钮能打开对话框
2. ✅ 对话框左侧显示所有上游节点（不包括当前节点）
3. ✅ 选择节点后，右侧显示该节点的输出字段树
4. ✅ 点击叶子节点后，表达式自动填入输入框
5. ✅ 字段映射信息卡片自动显示
6. ✅ 卡片显示正确的节点名称和字段路径
7. ✅ 点击 × 按钮能清除映射
8. ✅ 表达式切换按钮能正常工作

## 常见问题

### Q1: 字段选择器按钮不显示
**A**: 检查字段定义中是否设置了 `supportsFieldMapping: true`

### Q2: 字段树为空
**A**: 检查上游节点的元数据中是否定义了 `outputSchema`

### Q3: 字段映射信息不显示
**A**: 
- 检查表达式格式是否正确（必须是 `${nodes.<nodeId>.<fieldPath>}` 格式）
- 检查引用的节点是否存在
- 打开浏览器控制台查看是否有错误

### Q4: 点击字段选择器按钮没有反应
**A**: 
- 检查浏览器控制台是否有错误
- 确保 FieldMappingSelector 组件正确导入
- 检查是否有未捕获的异常

## 调试

打开浏览器控制台（F12），查看：

1. **Vue Devtools**：
   - 查看 NodeConfigPanel 组件的状态
   - 检查 `formData`、`fieldExpressionMode` 的值

2. **Console 输出**：
   - 表达式解析错误会输出到控制台
   - 组件错误也会显示

3. **Network 面板**：
   - 检查是否有模块加载失败

## 下一步

测试成功后，尝试：

1. 创建更复杂的工作流（3个或更多节点）
2. 测试嵌套字段映射（如 `output.body.user.address.city`）
3. 测试不同类型的节点（Database Query、Condition 等）
4. 测试字段映射的保存和加载

