LuckyFlow：用Vue3实现AI可视化编辑

我用了两天，把一个基于 Vue3 的工作流编辑器做出来了，能跑通节点定义、拖拽布置和属性配置这整套流程。它叫 LuckyFlow，前端用 Vue3 + TDesign，能拖节点、拼流程、接各种 AI 模型、管变量，而且模块化做法可以打包成 SDK，方便塞进不同系统里去用。

实现过程实则挺直接的。先有个大体架构，然后把每块按组件拆开：节点、画布、属性面板、变量管理、模型接入那几块儿分别做。节点拖拽用的是 VueFlow，画面交互和样式交给 TDesign，类型和接口全用 TypeScript 管控。调通基本交互后，加上节点属性编辑、变量联动、以及模型调用的接入点，最后把这些用组件封装好，能像 SDK 那样被引用。大体上从空仓到能跑起来，大致两天时间——有现成思路和 React 那版的参考，速度上的确 快了不少。

说回来源：我之前做过一个 React 版本的工作流引擎，叫 Flowmix/Flow，那套东西给了不少设计思路。这次做 Vue3 版本，部分逻辑是借鉴过去的实现，但代码和构件都重写了，结构更贴合 Vue 的组件化风格。市场上许多开源或商用的工作流方案都是基于 React 的，想做一套 Vue 路线的实战案例，顺手就把它做了出来。顺便说一句，换到 Vue 的确 有些习惯要调整，但整体实现还是挺顺的。

技术栈上简单列一下，方便你们参考：前端用的是 Vue 3.x，TypeScript 5.x 控制类型，UI 选了 TDesign Vue Next 1.x，图形编辑用的是 VueFlow 1.x，构建工具用 Vite 5.x。你若是想复刻这套，按这个栈搭起来最省事。目录结构我按功能和模块来分，组件、服务、数据存储、工具类都独立一层，给二次开发留足了空间。

功能上要交代清楚：画布里能自由拖节点、连线；每个节点可以配置自己的输入输出和运行参数；变量层能做全局和局部变量管理，节点之间能共享或覆盖；预留了模型适配层，支持挂接不同类型的 AI 模型（列如文本模型、图片模型之类），接口抽象出来，方便后续扩展。还有一点是，整个编辑器的交互逻辑和保存机制都做了思考，能把流程状态序列化，方便存库或导出。这些细节上花了不少时间去验证交互边界，像拖拽合并、断开连线、属性联动这些都做了容错处理。

为什么要做这个？主要是看到市面上工作流方案普遍偏重、改造成本高，而且可定制的余地有限。许多团队想快速搭一套 AI 工作流，React 的方案对 Vue 团队不太友善。于是我打算做一套轻量级的、便于二次开发的 Vue 版实现，目标是让从零开始搭建 AI 工作流的团队能更快上手，并能在内部系统里顺利集成。设计思路就是把核心能力做清楚、接口留干净，业务逻辑放外面去写。

实现中也遇到一些具体问题。列如节点属性面板里多层级数据更新频繁，得处理好响应和性能；变量作用域要分清楚，全局变量改动不应该立刻影响到未激活的节点状态；模型接入的抽象需要兼容不同调用方式，这些都需要边设计边调试。解决办法多数靠把状态管理和事件总线理清楚，再把复杂交互拆成小的事务来处理。说实话，调试这种交互细节挺磨人的，不过最后看到流程能顺畅运行，还是有点成就感。

关于上线和分发：我把项目做成组件化的结构，能打包为 SDK，方便在不同项目里复用。目录上按架构组织，模块清晰，便于后续接入鉴权、日志、审计等企业功能。目前的版本更偏研究和样例用途，想要做成商用级产品，还需要把安全、稳定、权限、运维这些企业级需求补上。

身份和背景上补充一下：我是徐小夕，做过多家上市公司的架构师，做过用户规模上亿的产品，目前全职创业，重点在 Dooring AI 的无代码搭建平台和 flowmixAI 的多模态办公软件上。前段时间我也分享过几个相关的产物：pxcharts 的多维表格编辑器、flowmixAI 的智能办公工作台、还有一个 AI 驱动的多人协同文档编辑器 JitWord。LuckyFlow 这次的思路和之前的工作流引擎有延续，所以实现速度能快一些。

如果有人想要看源码或跟进细节，我把完整项目放在我的专栏“架构师精选”里，里头包含了实现要点和代码结构说明。源码里有演示、组件拆分、以及如何把它打包成 SDK 的示例，感兴趣可以去拉取看看。