# vue-flow

**Repository Path**: djxchi/vue-flow

## Basic Information

- **Project Name**: vue-flow
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2025-03-19
- **Last Updated**: 2025-09-05

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Flow Designer

一个基于Vue3和TypeScript的流程设计工具，允许用户通过拖拽方式创建和编辑流程图，支持多种节点类型，模仿Dify工作流功能。

## 功能特点

- 支持多种节点类型：
  - **基础节点**: 开始节点、结果节点
  - **智能节点**: 大模型节点、智能体节点
  - **逻辑节点**: 条件判断节点、迭代器节点、代码节点
  - **工具节点**: 模板转换节点、HTTP节点、数据库节点
- 节点之间可以通过连线连接，形成完整的工作流
- 支持节点的拖拽和位置调整
- 根据节点类型显示特定的配置选项
- 支持缩放和平移画布
- 提供小地图辅助导航
- 支持保存和加载流程图

## 技术栈

- Vue 3
- TypeScript
- Element Plus
- jsPlumb
- Font Awesome

## 安装和运行

```bash
# 克隆项目
git clone <仓库地址>

# 进入项目目录
cd flow-designer

# 安装依赖
npm install

# 启动开发服务器
npm run dev
```

## 使用方法

1. 从左侧工具栏拖动节点到画布中
2. 点击节点可以配置节点参数
3. 通过连线工具连接节点，形成完整工作流
4. 点击保存按钮保存流程图

## 节点类型说明

1. **开始节点**: 流程的起始点，每个流程必须有一个开始节点
2. **大模型节点**: 调用AI大模型服务进行文本生成处理
3. **智能体节点**: 具备工具调用能力的AI节点
4. **条件判断节点**: 支持IF/ELSE条件分支逻辑
5. **迭代器节点**: 用于循环处理数据集合
6. **代码节点**: 执行Python或JavaScript代码
7. **模板转换节点**: 将数据根据模板转换为格式化的内容
8. **HTTP节点**: 发送HTTP请求与外部服务交互
9. **数据库节点**: 进行数据库查询操作
10. **结果节点**: 流程的终止点，输出最终结果

## 未来规划

1. 实现工作流执行功能
2. 添加更多节点类型
3. 支持工作流导入导出
4. 增加工作流测试和调试功能
5. 提供API接口，支持外部系统调用 

## 故障排除

### 启动问题

如果您在启动项目时遇到以下错误：

```
Cannot find module '@dcloudio/uni-cli-shared'
```

请检查以下几点：

1. 确保您的项目根目录或Home目录下没有错误的postcss.config.js文件
2. 如果有，可以删除或修改该文件
3. 本项目使用ES模块，postcss配置应使用ES模块语法

### PostCSS配置问题

如果遇到PostCSS相关错误，可以检查postcss.config.js文件是否使用了正确的语法：

```javascript
// 正确的ES模块语法
import autoprefixer from 'autoprefixer';

export default {
  plugins: [
    autoprefixer()
  ]
}
```

## 项目维护与注意事项

1. 本项目使用ES模块（"type": "module"在package.json中设置）
2. 所有JS/TS配置文件需使用ES模块语法或.cjs扩展名
3. 确保安装的依赖版本兼容

## 最新更新

### 2023-06-15 更新

1. **节点连线功能修复**：
   - 修复了节点之间无法正确连线的问题
   - 增强了连线的交互体验，支持连线断开和重连
   - 为每个节点添加了正确的源端点(右侧)和目标端点(左侧)

2. **节点样式优化**：
   - 美化了节点的外观，增加了圆角和阴影效果
   - 添加了节点内容区域，用于显示节点描述
   - 优化了节点图标区域，使用圆形背景
   - 添加了悬停动画效果，提升用户体验

3. **画布背景改进**：
   - 将原来的方格背景改为圆点背景，视觉效果更现代
   - 优化了画布的拖拽和缩放体验
   - 提高了背景网格的视觉区分度

### 使用提示

- 从左侧拖动节点到画布中
- 点击节点可以配置节点参数
- 节点右侧为源端点（可以拖出连线）
- 节点左侧为目标端点（可以接收连线）
- 连线可以通过点击并拖动删除