Vue Flow 工作流设计器

一个基于 Vue 3 + TypeScript + Vue Flow 的现代化工作流设计器，支持拖拽创建、编辑和连接各种工作流节点，并可将设计结果导出为 Elsa 框架格式。

✨ 功能特性

🎯 核心功能

• 拖拽创建节点：从左侧菜单拖拽节点到画布
• 节点连接：支持节点之间的连线，带动画效果
• 节点编辑：双击节点编辑属性（审批人、抄送人）
• 节点删除：右键删除节点和连接线
• 工作流导入导出：支持JSON格式的导入导出
• Elsa格式转换：双向转换Vue Flow ↔ Elsa格式
• Elsa格式导出：一键转换为Elsa工作流框架格式

📦 节点类型

• 开始节点：绿色圆形图标，表示工作流开始
• 审批节点：蓝色方形图标，可设置审批人
• 抄送节点：黄色方形图标，可设置抄送人
• 结束节点：红色圆形图标，表示工作流结束

🎨 界面特性

• 左右布局：左侧节点库，右侧设计画布
• 工具栏：清空、导入、导出、保存等功能
• 人员选择：支持下拉选择和树形选择两种方式
• 响应式设计：适配不同屏幕尺寸
• 现代化UI：基于Element Plus的美观界面

🚀 快速开始

环境要求

• Node.js >= 16.0.0
• npm >= 8.0.0

安装依赖

npm install

启动开发服务器

npm run dev

构建生产版本

npm run build

预览生产版本

npm run preview

📖 使用指南

基本操作

1. 添加节点

• 从左侧菜单拖拽节点类型到画布
• 节点会自动添加到拖拽位置
• 支持实时预览拖拽效果

2. 连接节点

• 从一个节点的连接点拖拽到另一个节点
• 支持平滑的连线动画
• 连接线宽度为3px，颜色为蓝色

3. 编辑节点

• 审批节点：双击编辑审批人
• 抄送节点：双击编辑抄送人
• 支持人员选择弹窗，提供下拉和树形两种选择方式

4. 删除操作

• 删除节点：右键点击节点选择删除
• 删除连接线：右键点击连接线选择删除
• 删除节点时会自动删除相关连线

5. 工具栏操作

• 清空画布：删除所有节点和连线
• 导出工作流：保存为JSON文件
• 导入工作流：从JSON文件加载
• 导入Elsa格式：从Elsa工作流文件导入并转换为Vue Flow格式
• 保存为Elsa格式：转换为Elsa工作流格式并打印到控制台

人员选择功能

下拉选择模式

• 支持多选和搜索过滤
• 显示人员姓名、部门、职位信息
• 已选择人员以标签形式显示

树形选择模式

• 按部门分组显示人员
• 支持部门和个人选择
• 更直观的层级结构

🏗️ 项目结构

src/
├── components/
│   └── VueFlow/
│       ├── FullWorkflowDesigner.vue    # 主设计器组件
│       ├── PersonSelector.vue          # 人员选择弹窗组件
│       ├── nodes/                      # 节点组件目录
│       │   ├── StartNode.vue          # 开始节点
│       │   ├── ApproveNode.vue        # 审批节点
│       │   ├── SendNode.vue           # 抄送节点
│       │   └── EndNode.vue            # 结束节点
│       └── README.md                  # 组件说明文档
├── App.vue                            # 根组件
├── main.ts                           # 入口文件
└── style.css                         # 全局样式

🛠️ 技术栈

• Vue 3 - 渐进式JavaScript框架
• TypeScript - 类型安全的JavaScript超集
• Vue Flow - 流程图和节点编辑器
• Element Plus - Vue 3 UI组件库
• Vite - 快速的前端构建工具

核心依赖

{
  "@vue-flow/core": "^1.46.3",
  "@vue-flow/background": "^1.3.2",
  "@vue-flow/controls": "^1.1.3",
  "@vue-flow/minimap": "^1.5.4",
  "element-plus": "^2.9.1",
  "vue": "^3.5.13"
}

📋 API 文档

主要组件

FullWorkflowDesigner

主工作流设计器组件，提供完整的工作流设计功能。

Props: 无

Events:

• @save-elsa: 保存为Elsa格式时触发

PersonSelector

人员选择弹窗组件，支持下拉和树形两种选择方式。

Props:

• modelValue: boolean - 弹窗显示状态
• title: string - 弹窗标题
• selectedPersonIds?: string[] - 已选择的人员ID列表

Events:

• @update:modelValue - 更新弹窗显示状态
• @confirm - 确认选择时触发，参数为人员ID和人员信息

节点类型

StartNode

开始节点组件，表示工作流的起始点。

Features:

• 绿色圆形图标
• 底部连接点
• 不可编辑属性

ApproveNode

审批节点组件，用于设置审批流程。

Features:

• 蓝色方形图标
• 顶部和底部连接点
• 可编辑审批人属性
• 支持人员选择弹窗

SendNode

抄送节点组件，用于设置抄送通知。

Features:

• 黄色方形图标
• 顶部和底部连接点
• 可编辑抄送人属性
• 支持人员选择弹窗

EndNode

结束节点组件，表示工作流的结束点。

Features:

• 红色圆形图标
• 顶部连接点
• 不可编辑属性

🔧 自定义开发

添加新节点类型

1. 在 nodes/ 目录下创建新的节点组件
2. 在 FullWorkflowDesigner.vue 中注册新节点类型
3. 在 nodeTypes 数组中添加节点配置

示例：

// 在 customNodeTypes 中添加
const customNodeTypes: any = {
  // ... 现有节点
  custom: CustomNode
}

// 在 nodeTypes 中添加
const nodeTypes = [
  // ... 现有类型
  { type: 'custom', label: '自定义', icon: 'CustomIcon' }
]

自定义节点属性

每个节点组件都可以通过 props.data 接收自定义数据：

const props = defineProps<{
  data?: {
    label?: string
    customProperty?: any
  }
}>()

样式定制

组件使用CSS变量和scoped样式，可以通过以下方式定制：

• 修改节点颜色：编辑各节点组件中的CSS变量
• 调整布局：修改 FullWorkflowDesigner.vue 中的样式
• 自定义主题：通过Element Plus主题系统

📊 Elsa格式转换

双向转换支持

本项目支持Vue Flow格式与Elsa格式之间的双向转换：

• Vue Flow → Elsa：将设计的工作流转换为Elsa格式
• Elsa → Vue Flow：将Elsa工作流导入并转换为Vue Flow格式

导出到Elsa格式

数据结构

导出的Elsa格式包含以下主要部分：

{
  id: string,                    // 工作流ID
  name: string,                  // 工作流名称
  description: string,           // 工作流描述
  version: number,              // 版本号
  activities: Activity[],       // 活动列表
  connections: Connection[],    // 连接列表
  variables: any[],            // 变量列表
  customAttributes: any[],     // 自定义属性
  persistenceBehavior: {       // 持久化行为配置
    // ... 持久化相关配置
  }
}

活动类型映射

| Vue Flow节点类型 | Elsa活动类型 | 说明 | |----------------|-------------|------| | start | Start | 工作流开始 | | approve | Approval | 审批活动 | | send | SendEmail | 邮件发送活动 | | end | Finish | 工作流结束 |

从Elsa格式导入

支持的Elsa活动类型

• Start → 开始节点
• Approval → 审批节点（自动提取审批人信息）
• SendEmail → 抄送节点（自动提取收件人信息）
• Finish → 结束节点

自动属性映射

• 审批人信息：从Approver属性自动提取
• 收件人信息：从Recipients属性自动提取
• 位置信息：从x、y坐标自动映射
• 连接关系：从connections数组自动重建

导入流程

1. 点击工具栏的"导入Elsa格式"按钮
2. 选择Elsa工作流JSON文件
3. 系统自动解析并转换为Vue Flow格式
4. 在画布中显示转换后的工作流

错误处理

• 格式验证：检查Elsa格式的完整性
• 类型识别：智能识别未知活动类型
• 属性提取：安全提取节点属性
• 错误提示：详细的错误信息和解决建议

📄 更新日志

v1.0.0 (2024-01-XX)

• ✨ 初始版本发布
• 🎯 支持四种节点类型（开始、审批、抄送、结束）
• 🖱️ 拖拽创建和编辑节点
• 🔗 节点连接和连接线管理
• 👥 人员选择弹窗（下拉和树形选择）
• 💾 工作流导入导出功能
• 🔄 Elsa格式数据转换
• 🎨 现代化UI设计
• 📱 响应式布局支持

享受使用 Vue Flow 工作流设计器！ 🎉