aiagent/节点连接使用说明.md

# 节点连接使用说明

## ✅ 节点连接功能已实现

现在所有节点都可以正常连接了！

## 🔗 如何连接节点

### 方法1：拖拽连接（推荐）

1. **将鼠标悬停在节点的连接点上**
   - 开始节点：底部有绿色连接点
   - LLM/输入/转换/输出节点：顶部和底部都有连接点
   - 条件节点：顶部有输入点，底部有两个输出点（true/false）
   - 结束节点：顶部有红色连接点

2. **点击并拖拽连接点**
   - 从源节点的输出点（底部）拖拽
   - 拖到目标节点的输入点（顶部）
   - 释放鼠标完成连接

3. **连接线会自动创建**
   - 连接线是蓝色的，带有动画效果
   - 连接线是平滑的曲线（smoothstep类型）

### 方法2：点击连接点

1. 点击源节点的输出连接点
2. 然后点击目标节点的输入连接点
3. 连接会自动创建

## 📋 节点连接规则

### 开始节点
- ✅ 只有输出（底部）
- ✅ 可以连接到：LLM、输入、条件、转换、输出节点

### LLM节点
- ✅ 有输入（顶部）和输出（底部）
- ✅ 可以接收：开始、输入、条件、转换节点的输出
- ✅ 可以连接到：条件、转换、输出、结束节点

### 条件节点
- ✅ 有输入（顶部）和两个输出（底部）
  - 左侧输出：true分支（绿色）
  - 右侧输出：false分支（红色）
- ✅ 可以接收：开始、LLM、输入、转换节点的输出
- ✅ 可以连接到：LLM、转换、输出、结束节点

### 输入/转换/输出节点
- ✅ 有输入（顶部）和输出（底部）
- ✅ 可以接收：开始、LLM、条件、转换节点的输出
- ✅ 可以连接到：LLM、条件、转换、输出、结束节点

### 结束节点
- ✅ 只有输入（顶部）
- ✅ 可以接收：所有有输出的节点

## 🎨 连接点样式

- **输入点（顶部）**：小圆点，颜色与节点颜色一致
- **输出点（底部）**：小圆点，颜色与节点颜色一致
- **条件节点输出点**：
  - true分支：绿色
  - false分支：红色

## 🗑️ 删除连接

1. **点击连接线**：连接线会高亮显示
2. **按Delete键**：删除选中的连接线
3. **或通过代码**：在 `onEdgeClick` 事件中实现删除功能

## 💡 提示

1. **连接点位置**：
   - 输入点在节点顶部中心
   - 输出点在节点底部中心
   - 条件节点有两个输出点（左右分布）

2. **连接验证**：
   - Vue Flow会自动验证连接是否有效
   - 不能连接到自己的输入点
   - 不能创建重复的连接

3. **连接保存**：
   - 连接会自动保存到工作流数据中
   - 点击"保存"按钮会保存所有节点和连接

## 🐛 如果连接不工作

1. **检查节点是否有连接点**：
   - 刷新页面后，节点应该显示连接点（小圆点）
   - 如果看不到连接点，检查浏览器控制台是否有错误

2. **检查Vue Flow样式**：
   - 确保已导入Vue Flow的CSS样式
   - 连接点需要样式才能正确显示

3. **检查控制台**：
   - 打开浏览器控制台（F12）
   - 查看是否有"连接节点"的日志
   - 查看是否有错误信息

---

**状态**: ✅ 已实现
**最后更新**: 2024年