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年