# 调试字段映射显示问题

## 问题现象
在配置面板中看不到字段映射信息显示。

## 调试步骤

### 1. 打开浏览器控制台（F12）

### 2. 检查组件是否正确加载

在控制台运行：
```javascript
// 检查 parseFieldExpression 函数是否存在
import('../src/views/workflow/vue-flow-design/utils/expression.js').then(module => {
  console.log('parseFieldExpression:', module.parseFieldExpression)
  console.log('isExpression:', module.isExpression)
})
```

### 3. 手动测试表达式解析

```javascript
// 在控制台运行
import('../src/views/workflow/vue-flow-design/utils/expression.js').then(module => {
  const result = module.parseFieldExpression('${nodes.n1.output.body.email}')
  console.log('解析结果:', result)
  // 应该输出: { nodeId: 'n1', fieldPath: 'output.body.email' }
})
```

### 4. 检查节点配置数据

点击 Database Query 节点后，在控制台运行：
```javascript
// 获取 Vue 实例（需要 Vue Devtools）
const app = document.querySelector('#app').__vueParentComponent
console.log('节点配置:', app)
```

### 5. 检查字段定义

看看 Database Query 节点的字段定义中是否正确设置了：
- `supportsExpression: true`
- `supportsFieldMapping: true`

### 6. 使用 Vue Devtools 检查

1. 安装 Vue Devtools（如果还没有）
2. 打开 Vue Devtools
3. 选择 `NodeConfigPanel` 组件
4. 查看组件状态：
   - `formData` - 表单数据
   - `fieldExpressionMode` - 字段表达式模式
   - `selectedNode` - 当前选中的节点

### 7. 手动设置表达式测试

1. 点击 Database Query 节点
2. 在 SQL Query 字段中手动输入：`${nodes.n1.output.body.email}`
3. 看看是否显示字段映射信息

如果还是不显示，在控制台检查：
```javascript
// 检查是否有错误
console.error('检查错误')
```

## 可能的问题

### 问题1: 字段定义没有设置 supportsFieldMapping

检查 `nodeTypes.ts` 中 Database Query 的字段定义：

```typescript
{
  name: 'query',
  label: 'SQL Query',
  type: 'textarea',
  required: true,
  supportsExpression: true,      // ✅ 必须有
  supportsFieldMapping: true,    // ✅ 必须有
}
```

### 问题2: parseFieldExpression 函数返回 null

可能原因：
- 表达式格式不正确
- 正则表达式匹配失败

### 问题3: getFieldMappingInfo 返回 null

可能原因：
- `isExpression()` 返回 false
- `parseFieldExpression()` 返回 null
- 找不到源节点

### 问题4: 组件没有重新渲染

尝试：
- 切换到其他节点再切换回来
- 刷新页面
- 清除浏览器缓存

## 快速修复建议

如果以上都不行，添加调试日志：

在 `NodeConfigPanel.vue` 的 `getFieldMappingInfo` 函数中添加：

```typescript
function getFieldMappingInfo(fieldName: string) {
  const value = formData.value[fieldName]
  console.log('🔍 检查字段映射:', { fieldName, value })
  
  if (!isExpression(value)) {
    console.log('❌ 不是表达式')
    return null
  }
  console.log('✅ 是表达式')

  const parsed = parseFieldExpression(value)
  console.log('📝 解析结果:', parsed)
  
  if (!parsed) {
    console.log('❌ 解析失败')
    return null
  }

  const sourceNode = workflowStore.vueFlowNodes.find((n) => n.id === parsed.nodeId)
  console.log('🔍 查找源节点:', { nodeId: parsed.nodeId, found: !!sourceNode })
  
  if (!sourceNode) {
    console.log('❌ 找不到源节点')
    return null
  }

  const result = {
    nodeId: parsed.nodeId,
    nodeName: sourceNode.data.name || parsed.nodeId,
    fieldPath: parsed.fieldPath,
  }
  console.log('✅ 返回结果:', result)
  return result
}
```

然后刷新页面，查看控制台输出。

