一个基于 Vue 3 的可视化工作流构建器，类似于影刀的任务流程编辑器。支持拖拽操作、任务嵌套、条件分支和循环控制。
- 🎨 直观的拖拽界面 - 从左侧任务面板拖拽任务到右侧画布
- 🏗️ 积木式构建 - 像搭积木一样从上到下构建工作流
- 🔀 控制流支持 - 支持 IF/ELSE、WHILE、FOREACH、TRY/CATCH 等控制结构
- 📦 任务嵌套 - 控制流任务可以包含子任务，支持无限层级嵌套
- ⚙️ 实时配置 - 点击任务可展开配置面板，实时修改任务参数
▶️ 可视化执行 - 运行工作流时实时显示执行状态和日志- 🎯 任务管理 - 支持任务的上移、下移、删除等操作
| 任务 | 图标 | 说明 |
|---|---|---|
| 打开网页 | 🌐 | 在浏览器中打开指定URL |
| 点击元素 | 👆 | 点击页面上的元素 |
| 输入文本 | ⌨️ | 在输入框中输入文本 |
| 等待 | ⏱️ | 等待指定的时间 |
| 获取文本 | 📝 | 获取元素的文本内容并保存到变量 |
| 截图 | 📸 | 截取当前页面的屏幕截图 |
| 任务 | 图标 | 说明 |
|---|---|---|
| IF 条件 | ❓ | 条件判断，支持 THEN 和 ELSE 分支 |
| WHILE 循环 | 🔄 | 条件循环，满足条件时重复执行 |
| FOREACH 遍历 | 📋 | 遍历数组，对每个元素执行子任务 |
| TRY 异常处理 | 🛡️ | 异常捕获，支持 TRY 和 CATCH 块 |
npm installnpm run dev浏览器会自动打开 http://localhost:3000
npm run buildnpm run preview从左侧任务面板拖拽任务到右侧画布区域：
- 拖拽基础任务到画布根部
- 拖拽控制流任务可以创建嵌套结构
- 控制流任务展开后可以拖拽子任务到对应的分支中
点击任务块展开配置面板：
- 打开网页: 设置要访问的URL
- 点击元素: 设置元素的CSS选择器
- 输入文本: 设置选择器和要输入的文本
- 等待: 设置等待时间（毫秒）
- 获取文本: 设置选择器和保存变量名
- IF条件: 设置条件表达式（如
count > 5） - WHILE循环: 设置循环条件和最大迭代次数
- FOREACH遍历: 设置要遍历的数组和循环变量名
每个任务都有以下操作按钮：
- ▶/▼ - 展开/收起任务（仅控制流任务）
- ↑ - 将任务上移
- ↓ - 将任务下移
- × - 删除任务
点击顶部工具栏的"运行工作流"按钮：
- 工作流会从上到下依次执行
- 当前执行的任务会高亮显示
- 执行日志会显示在右下角面板中
- 可以查看每个任务的执行状态和结果
点击"清空"按钮可以清除画布上的所有任务。
1. 打开网页 (https://www.baidu.com)
2. 等待 (2000ms)
3. 输入文本 (#kw: "Vue 3")
4. 点击元素 (#su)
5. 等待 (3000ms)
6. 截图 (result.png)
1. 获取文本 (#title → pageTitle)
2. IF (pageTitle.includes("Vue"))
THEN:
- 点击元素 (#btn-vue)
- 输入文本 (#input: "Vue is awesome")
ELSE:
- 点击元素 (#btn-other)
- 输入文本 (#input: "Other framework")
3. 截图 (result.png)
1. FOREACH (["Vue", "React", "Angular"] → framework)
循环体:
- 输入文本 (#search: {framework})
- 点击元素 (#submit)
- 等待 (2000ms)
- 截图 ({framework}.png)
1. TRY
TRY块:
- 打开网页 (https://example.com)
- 点击元素 (#risky-button)
- 输入文本 (#input: "test")
CATCH块:
- 截图 (error.png)
- 打开网页 (https://backup.com)
/workspace
├── src/
│ ├── components/
│ │ ├── WorkflowBuilder.vue # 主组件
│ │ ├── TaskPanel.vue # 左侧任务面板
│ │ ├── TaskCanvas.vue # 右侧画布
│ │ ├── TaskBlock.vue # 任务块组件
│ │ └── DropZone.vue # 拖放区域组件
│ ├── utils/
│ │ └── taskExecutor.js # 任务执行引擎
│ ├── App.vue # 应用根组件
│ └── main.js # 应用入口
├── index.html # HTML模板
├── vite.config.js # Vite配置
├── package.json # 项目配置
└── README.md # 项目文档
- Vue 3 - 渐进式JavaScript框架
- Vite - 下一代前端构建工具
- 原生拖拽API - HTML5 Drag and Drop
- CSS3 - 现代样式和动画
使用HTML5原生拖拽API实现：
draggable="true"- 使元素可拖拽@dragstart- 开始拖拽时保存任务数据@dragover- 允许拖放@drop- 处理拖放并创建新任务
使用递归组件实现多层嵌套：
TaskBlock组件递归渲染子任务DropZone组件处理不同分支的拖放- 每个控制流任务可以包含多个子任务数组
使用异步递归实现顺序执行：
- 从上到下遍历任务列表
- 每个任务执行前后触发回调
- 控制流任务递归执行子任务
- 支持变量传递和条件评估
欢迎提交 Issue 和 Pull Request！
MIT License
灵感来源于影刀RPA平台的可视化流程编辑器。
作者: Cursor AI Assistant
创建时间: 2025年11月29日