AIPass 工作流编排系统

基于 Vue 3 + Vue Flow 的可视化 AI 工作流编排系统，支持拖拽式节点编排、参数配置和 JSON 导出。

项目特性

第一阶段功能 ✅

• ✅ 项目基础架构

  • Vue 3 + TypeScript + Vite
  • Element Plus UI 组件库
  • Tailwind CSS 样式框架
  • Pinia 状态管理
  • Vue Flow 工作流画布

• ✅ 核心组件

  • 三栏布局：工具箱 + 画布 + 配置面板
  • 可折叠节点工具箱
  • 交互式工作流画布（点状背景）
  • 动态配置面板

• ✅ 基础节点

  • 开始节点（绿色，单例限制）
  • 结束节点（红色，支持多个）
  • 数据源节点（蓝色，支持图片流/视频流/数据集）
  • 小模型节点（紫色，完整参数配置）

• ✅ 交互功能

  • 拖拽添加节点
  • 节点连接（顶部输入/底部输出）
  • 节点选择和删除
  • 画布缩放和平移
  • 网格对齐（15px）

• ✅ 配置功能

  • 实时参数配置
  • 自动保存更改
  • 动态表单生成（基于 input_schema）
  • 多边形区域坐标输入

• ✅ 导出功能

  • JSON 预览
  • 复制到剪贴板
  • 下载 JSON 文件
  • 工作流验证（错误/警告）

技术栈

• 前端框架: Vue 3.5 (Composition API)
• 构建工具: Vite 7.3
• 类型系统: TypeScript 5.9 (严格模式)
• UI 组件库: Element Plus 2.13
• 工作流引擎: Vue Flow 1.48
• 状态管理: Pinia 3.0
• 样式方案: Tailwind CSS 3.4

快速开始

安装依赖

```bash npm install ```

启动开发服务器

```bash npm run dev ```

访问 http://localhost:3000

构建生产版本

```bash npm run build ```

预览生产构建

```bash npm run preview ```

使用指南

1. 添加节点

从左侧工具箱拖拽节点到画布：

• 基础节点

  • 开始节点：工作流入口（只能有一个）
  • 结束节点：工作流出口（可以有多个）

• 数据节点

  • 数据源：配置输入数据类型

• 算法节点

  • 小模型：配置检测模型参数

2. 连接节点

• 从节点底部的圆点拖拽到另一个节点顶部的圆点
• 创建工作流执行路径

3. 配置节点

1. 点击节点选中
2. 右侧配置面板显示参数
3. 修改参数（自动保存）

小模型节点参数：

• 告警区域：多边形坐标 [[x1,y1], [x2,y2], ...]
• 阈值：检测阈值 (0-1)
• 告警间隔：毫秒
• 目标数量：检测目标数
• 尺寸限制：最小/最大宽度和高度

4. 导出工作流

工具栏提供三种导出方式：

• 预览 JSON：查看完整配置
• 复制 JSON：复制到剪贴板
• 导出 JSON：下载文件

5. 验证规则

导出前会自动验证：

错误（阻止导出）：

• 必须有且仅有一个开始节点
• 必须至少有一个结束节点
• 开始节点必须有输出连接
• 结束节点必须有输入连接

警告（允许导出）：

• 开始节点不应有输入
• 结束节点不应有输出
• 中间节点未正确连接
• 节点未连接到工作流

项目结构

``` src/ ├── components/ │ ├── workflow/ │ │ ├── WorkflowEditor.vue # 主编辑器容器 │ │ ├── WorkflowCanvas.vue # Vue Flow 画布 │ │ ├── NodeToolbox.vue # 节点工具箱 │ │ ├── NodeConfigPanel.vue # 配置面板 │ │ └── nodes/ │ │ ├── StartNode.vue # 开始节点 │ │ ├── EndNode.vue # 结束节点 │ │ ├── DataSourceNode.vue # 数据源节点 │ │ └── SmallModelNode.vue # 小模型节点 │ └── config/ ├── stores/ │ └── workflowStore.ts # Pinia 状态管理 ├── types/ │ ├── workflow.ts # 工作流类型定义 │ └── schema.ts # JSON Schema 类型 ├── utils/ │ ├── nodeFactory.ts # 节点工厂函数 │ ├── validator.ts # 验证逻辑 │ └── schemaParser.ts # Schema 解析器 ├── composables/ │ ├── useWorkflowExport.ts # 导出功能 │ └── useNodeConfig.ts # 配置功能 ├── App.vue # 根组件 ├── main.ts # 应用入口 └── style.css # 全局样式 ```

导出 JSON 格式

```json { "nodes": [ { "id": "start_xxx", "type": "start", "position": { "x": 100, "y": 100 }, "data": { "label": "开始" } }, { "id": "smallModel_xxx", "type": "smallModel", "position": { "x": 100, "y": 200 }, "data": { "label": "小模型", "modelName": "默认模型", "arguments": { "areas": [[100,100], [200,100], [200,200], [100,200]], "threshold": 0.6, "interval": 10000, "targetNumber": 0 } } } ], "edges": [ { "id": "edge_xxx", "source": "start_xxx", "target": "smallModel_xxx" } ], "config": { "dataSource": {}, "workflow": { "nodeCount": 2, "edgeCount": 1 } } } ```

第二阶段规划

以下功能将在第二阶段实现：

• 🔲 检测目标节点（复杂配置）
• 🔲 分支/条件逻辑
• 🔲 并行执行（AND/OR）
• 🔲 高级数据源配置
• 🔲 OCR、人脸、车牌识别节点
• 🔲 工作流模板
• 🔲 撤销/重做功能
• 🔲 自动布局算法
• 🔲 画布绘制多边形区域
• 🔲 迷你地图导航

开发说明

添加新节点类型

1. 在 src/types/workflow.ts 定义节点数据接口
2. 在 src/utils/nodeFactory.ts 添加工厂函数
3. 在 src/components/workflow/nodes/ 创建节点组件
4. 在 WorkflowCanvas.vue 注册节点类型
5. 在 NodeToolbox.vue 添加工具箱项

自定义验证规则

在 src/utils/validator.ts 中修改 validateWorkflow 和 validateNodeData 函数。

修改导出格式

在 src/composables/useWorkflowExport.ts 中调整 exportToJSON 函数。

浏览器支持

• Chrome >= 90
• Firefox >= 88
• Safari >= 14
• Edge >= 90

许可证

ISC

作者

AIPass Team ```