# LocalFlow 新功能使用指南

本指南介绍最新添加的四个功能的使用方法。

---

## 1. 拖拽节点到画板 🖱️

### 操作步骤
1. 点击左侧工具栏的**节点浏览器**图标（📋）
2. 在节点列表中找到需要的节点类型
3. **按住鼠标左键**拖拽节点
4. 移动到画板上的目标位置
5. **释放鼠标**完成添加

### 提示
- 也可以**双击节点**直接添加到画板中心
- 支持所有5种节点类型的拖拽

---

## 2. 删除画板中的节点 🗑️

### 方法一：键盘快捷键
1. 用鼠标**点击选中**要删除的节点
2. 按下 `Delete` 键或 `Backspace` 键
3. 节点和相关连接线自动删除

### 方法二：右键菜单
1. **右键点击**要删除的节点
2. 在菜单中选择**"删除节点"**
3. 节点和相关连接线自动删除

### 特性
- 删除节点时会自动清理所有相关的连接线
- 如果删除的是当前选中的节点，属性面板会自动清空
- 支持连续删除多个节点

---

## 3. 属性面板快速响应 ⚡

### 改进说明
之前快速点击多个节点时，属性面板可能显示错误的节点信息或出现延迟。

### 现在的体验
- **快速切换节点**时，属性面板始终显示最后选中节点的信息
- **无卡顿**，响应流畅
- **智能防抖**，避免不必要的UI重建

### 使用方法
正常点击节点即可，系统会自动优化更新过程。

---

## 4. 首页工作流管理 📊

### 查看工作流列表

启动应用后，首页会自动显示所有已保存的工作流，以卡片形式呈现。

每个卡片显示：
- 📊 工作流图标
- 工作流名称
- **打开**按钮
- **删除**按钮

### 打开工作流

1. 在首页找到要打开的工作流
2. 点击卡片上的**"打开"**按钮
3. 工作流会在新标签页中打开
4. 所有节点和连接会恢复到保存时的位置

### 删除工作流

1. 点击卡片上的**"删除"**按钮
2. 在确认对话框中选择**"Yes"**
3. 工作流目录会被完全删除
4. 列表自动刷新

### 创建新工作流

1. 点击首页右上角的**"+ 新建工作流"**按钮
2. 新的工作流标签页会自动打开
3. 开始添加节点和建立连接
4. 点击工作流工具栏的**"💾 保存"**按钮保存
5. 返回首页，新工作流会自动出现在列表中

### 空状态提示

如果还没有创建任何工作流，首页会显示：
```
暂无工作流
点击上方按钮创建新工作流
```

---

## 完整工作流程示例

### 场景：创建一个简单的计算工作流

1. **创建工作流**
   - 首页点击 "新建工作流"

2. **添加节点**
   - 打开节点浏览器
   - 拖拽"变量赋值"节点到画板，命名为 `x = 10`
   - 拖拽"变量赋值"节点到画板，命名为 `y = 20`
   - 拖拽"变量计算"节点到画板，设置表达式 `x + y`

3. **连接节点**
   - 从第一个节点的输出端口拖线到计算节点的输入端口
   - 从第二个节点的输出端口拖线到计算节点的输入端口

4. **配置节点**
   - 点击节点打开右侧属性面板
   - 填写节点配置信息
   - 点击"应用"按钮

5. **执行工作流**
   - 点击工具栏的 "▶ 执行工作流" 按钮
   - 查看执行结果

6. **保存工作流**
   - 点击 "💾 保存" 按钮
   - 工作流保存到 `workflows/工作流 N/` 目录

7. **返回首页**
   - 切换到 "Overview" 标签页
   - 看到新保存的工作流卡片

8. **重新打开**
   - 点击卡片的"打开"按钮
   - 工作流在新标签页中恢复

---

## 快捷键汇总

| 快捷键 | 功能 |
|--------|------|
| `Delete` | 删除选中的节点 |
| `Backspace` | 删除选中的节点 |
| 鼠标滚轮 | 缩放画板 |
| 鼠标左键拖拽（空白处） | 平移画板 |
| 鼠标左键拖拽（端口） | 创建连接线 |
| 鼠标右键（空白处） | 添加节点菜单 |
| 鼠标右键（节点） | 节点操作菜单 |
| 双击节点（浏览器） | 添加到画板中心 |

---

## 技术细节

### 节点位置保存

工作流保存时会记录每个节点的坐标：

```json
{
  "workflow_name": "我的工作流",
  "nodes": [
    {
      "node_id": "node_123",
      "node_type": "variable_assign",
      "config": {...},
      "position": {"x": 100.0, "y": 200.0}
    }
  ],
  "edges": [["node_123", "node_456"]]
}
```

### 工作流目录结构

```
workflows/
├── 工作流 1/
│   ├── workflow.json      # 工作流定义
│   └── scripts/           # 节点脚本（执行时生成）
└── 工作流 2/
    ├── workflow.json
    └── scripts/
```

---

## 故障排除

### 问题：拖拽节点无反应
- **解决**：确保节点浏览器已打开（左侧工具栏图标）
- 确认从节点列表项拖拽，而不是空白区域

### 问题：删除节点后连接线还在
- **解决**：这不应该发生。如果出现，请重启应用
- 提交 issue 到项目仓库

### 问题：首页不显示工作流
- **检查**：`workflows/` 目录下是否有对应的文件夹
- 每个工作流文件夹必须包含 `workflow.json` 文件
- 尝试点击"新建工作流"，保存后再查看

### 问题：打开工作流后节点位置不对
- **原因**：旧版本保存的工作流没有位置信息
- **解决**：重新排列节点并保存，下次打开就会恢复位置

---

## 反馈与支持

如果遇到问题或有改进建议，请：
- 查看 `IMPROVEMENTS.md` 了解技术实现
- 运行 `test_improvements.py` 进行自检
- 提交 issue 或 pull request

---

**享受使用 LocalFlow！** 🚀