108 lines
3.2 KiB
Markdown
108 lines
3.2 KiB
Markdown
# 节点连接使用说明
|
||
|
||
## ✅ 节点连接功能已实现
|
||
|
||
现在所有节点都可以正常连接了！
|
||
|
||
## 🔗 如何连接节点
|
||
|
||
### 方法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年
|