LuckyFlow：用Vue3实现的一款AI可视化工作流编辑器

上期和大家分享我精心打磨的CRM系统------NO-CRM：

耗时一周，我把可视化+零代码+AI融入到了CRM系统，使用体验超酷！https://blog.csdn.net/KlausLily/article/details/155347026

收到了很多粉丝的反馈，最近有粉丝反馈能不能出一个Vue版工作流设计的实战项目：

我调研了一下市面上的工作流开源或者商业方案，发现大部分都是 React 写的，所以我觉得确实可以出一期实战内容，设计一款基于 Vue3 版本的工作流引擎，让大家更好的开发AI工作流项目。

下面就是我实现的 Vue3 工作流的演示效果：

LuckyFlow 是一款基于 Vue 3 + TDesign 开发的可视化 AI 工作流设计器，支持拖拽式节点编排、多种 AI 模型集成、变量管理等功能。项目采用组件化架构设计，可打包为 SDK 集成到不同框架的系统中使用。

当前项目的实现我借鉴了我之前设计的React版工作流引擎 Flwomix/Flow。所以实现起来还算顺利，大概花了2天时间，就实现了Vue3版的工作流设计器。

✨ 核心功能

1. 可视化画布

基于 VueFlow 的流程图编辑器
支持节点拖拽、缩放、平移
自动连线与连线删除
网格背景与缩放控件

2. 丰富的节点类型

开始/结束节点

流程控制
大模型节点

调用 LLM 生成内容，支持温度、Token 等参数配置
知识库节点

向量检索，支持相似度阈值配置
提示词模板

可复用的提示词管理
HTTP 请求节点

调用外部 API
代码执行节点

JavaScript/Python/TypeScript 代码运行
数据转换节点

JSON 数据映射转换
延迟节点

流程延迟控制
条件分支节点

条件判断与分支
循环节点

数组遍历与并发控制

3. 全局变量管理

输入变量、过程变量、输出变量分类
支持 string/number/boolean/array/object 类型
变量引用插入（{``{varName}} 语法）

整体架构设计

复制代码

┌─────────────────────────────────────────────────────────────┐
│                      应用集成层                               │
│  (React App / Vue App / Vanilla JS / Other Frameworks)      │
└─────────────────────────────────────────────────────────────┘
                            ↓
┌─────────────────────────────────────────────────────────────┐
│                    LuckyFlow SDK API                         │
│  ┌──────────────┐  ┌──────────────┐  ┌──────────────┐       │
│  │ 完整应用模式  │  │  组件模式     │  │  引擎模式     │        │
│  │ LuckyFlowApp │  │ Components   │  │ Core Engine  │      │
│  └──────────────┘  └──────────────┘  └──────────────┘      │
└─────────────────────────────────────────────────────────────┘
                            ↓
┌─────────────────────────────────────────────────────────────┐
│                      UI 组件层                               │
│  ┌──────────────┐  ┌──────────────┐  ┌──────────────┐      │
│  │ NodePalette  │  │WorkflowCanvas│  │ConfigPanel   │      │
│  ├──────────────┤  ├──────────────┤  ├──────────────┤      │
│  │WorkflowNode  │  │VariablePanel │  │  其他组件     │      │
│  └──────────────┘  └──────────────┘  └──────────────┘      │
└─────────────────────────────────────────────────────────────┘
                            ↓
┌─────────────────────────────────────────────────────────────┐
│                      核心层 (Core)                           │
│  ┌──────────────┐  ┌──────────────┐  ┌──────────────┐       │
│  │ 类型定义      │  │ 工作流引擎    │  │ 模型适配器    │        │
│  │ types.ts     │  │ engine.ts    │  │ adapters/    │      │
│  └──────────────┘  └──────────────┘  └──────────────┘      │
└─────────────────────────────────────────────────────────────┘
                            ↓
┌─────────────────────────────────────────────────────────────┐
│                    第三方依赖层                               │
│        VueFlow  │  TDesign  │  Vue 3  │  其他依赖            │
└─────────────────────────────────────────────────────────────┘

设计原则

分层解耦

Core 层不依赖 UI 层，可独立使用
类型安全

完整的 TypeScript 类型定义
可扩展

插件化节点、模型提供商架构
框架无关

Core 层可用于任何框架
渐进增强

支持三种集成模式，满足不同场景

所以对应的目录结构我也是按照架构设计来组织的，大家可以参考一下：

复制代码

luckyflow/├── src/│   ├── core/              # 核心层 - 类型定义与业务逻辑│   │   ├── types.ts       # TypeScript 类型定义│   │   └── engine.ts      # 工作流引擎（校验、执行）│   ├── components/        # UI 组件层 - 可视化组件│   │   ├── NodePalette.vue        # 节点面板│   │   ├── WorkflowCanvas.vue     # 画布组件│   │   ├── WorkflowNode.vue       # 自定义节点│   │   ├── NodeConfigPanel.vue    # 配置面板│   │   └── VariablePanel.vue      # 变量管理│   ├── App.vue            # 集成层 - 应用入口│   ├── main.ts            # 应用启动│   └── styles/            # 样式文件│       └── index.css      # 全局样式

整个设计器实现了从节点定义，到节点拖拽，到节点的属性配置的全流程，大家可以基于这套方案开发公司内部的AI工作流产品。

下面是节点选中编辑的效果：

不同的节点能配置不同的属性。

🛠️ 技术栈

技术	版本	用途
Vue	3.x	前端框架
TypeScript	5.x	类型系统
TDesign Vue Next	1.x	UI 组件库
VueFlow	1.x	流程图编辑器
Vite	5.x	构建工具

大家可以基于我列出的技术栈，自行实现.

设计它的初衷主要是目前市面上的工作流方案比较臃肿，可定制的空间比较少，二开成本较低，我设计的这套方案比较轻量，适合从零搭建AI工作流的团队，可以基于自身业务快速扩展和迭代，并且能轻松集成到内部系统。

当然本项目主要用于大家研究学习和参考，如果要做到商业化级别，大家还需要进行二次开发和产品化。