aiflowui 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.en.md +36 -0
- package/README.md +267 -0
- package/dist-lib/aiflowui.es.js +7686 -0
- package/dist-lib/aiflowui.umd.js +1 -0
- package/dist-lib/style.css +1 -0
- package/package.json +56 -0
package/README.en.md
ADDED
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
# vueflow-zy
|
|
2
|
+
|
|
3
|
+
#### Description
|
|
4
|
+
{**When you're done, you can delete the content in this README and update the file with details for others getting started with your repository**}
|
|
5
|
+
|
|
6
|
+
#### Software Architecture
|
|
7
|
+
Software architecture description
|
|
8
|
+
|
|
9
|
+
#### Installation
|
|
10
|
+
|
|
11
|
+
1. xxxx
|
|
12
|
+
2. xxxx
|
|
13
|
+
3. xxxx
|
|
14
|
+
|
|
15
|
+
#### Instructions
|
|
16
|
+
|
|
17
|
+
1. xxxx
|
|
18
|
+
2. xxxx
|
|
19
|
+
3. xxxx
|
|
20
|
+
|
|
21
|
+
#### Contribution
|
|
22
|
+
|
|
23
|
+
1. Fork the repository
|
|
24
|
+
2. Create Feat_xxx branch
|
|
25
|
+
3. Commit your code
|
|
26
|
+
4. Create Pull Request
|
|
27
|
+
|
|
28
|
+
|
|
29
|
+
#### Gitee Feature
|
|
30
|
+
|
|
31
|
+
1. You can use Readme\_XXX.md to support different languages, such as Readme\_en.md, Readme\_zh.md
|
|
32
|
+
2. Gitee blog [blog.gitee.com](https://blog.gitee.com)
|
|
33
|
+
3. Explore open source project [https://gitee.com/explore](https://gitee.com/explore)
|
|
34
|
+
4. The most valuable open source project [GVP](https://gitee.com/gvp)
|
|
35
|
+
5. The manual of Gitee [https://gitee.com/help](https://gitee.com/help)
|
|
36
|
+
6. The most popular members [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)
|
package/README.md
ADDED
|
@@ -0,0 +1,267 @@
|
|
|
1
|
+
# AIPass 工作流编排系统
|
|
2
|
+
|
|
3
|
+
基于 Vue 3 + Vue Flow 的可视化 AI 工作流编排系统，支持拖拽式节点编排、参数配置和 JSON 导出。
|
|
4
|
+
|
|
5
|
+
## 项目特性
|
|
6
|
+
|
|
7
|
+
### 第一阶段功能 ✅
|
|
8
|
+
|
|
9
|
+
- ✅ **项目基础架构**
|
|
10
|
+
- Vue 3 + TypeScript + Vite
|
|
11
|
+
- Element Plus UI 组件库
|
|
12
|
+
- Tailwind CSS 样式框架
|
|
13
|
+
- Pinia 状态管理
|
|
14
|
+
- Vue Flow 工作流画布
|
|
15
|
+
|
|
16
|
+
- ✅ **核心组件**
|
|
17
|
+
- 三栏布局：工具箱 + 画布 + 配置面板
|
|
18
|
+
- 可折叠节点工具箱
|
|
19
|
+
- 交互式工作流画布（点状背景）
|
|
20
|
+
- 动态配置面板
|
|
21
|
+
|
|
22
|
+
- ✅ **基础节点**
|
|
23
|
+
- 开始节点（绿色，单例限制）
|
|
24
|
+
- 结束节点（红色，支持多个）
|
|
25
|
+
- 数据源节点（蓝色，支持图片流/视频流/数据集）
|
|
26
|
+
- 小模型节点（紫色，完整参数配置）
|
|
27
|
+
|
|
28
|
+
- ✅ **交互功能**
|
|
29
|
+
- 拖拽添加节点
|
|
30
|
+
- 节点连接（顶部输入/底部输出）
|
|
31
|
+
- 节点选择和删除
|
|
32
|
+
- 画布缩放和平移
|
|
33
|
+
- 网格对齐（15px）
|
|
34
|
+
|
|
35
|
+
- ✅ **配置功能**
|
|
36
|
+
- 实时参数配置
|
|
37
|
+
- 自动保存更改
|
|
38
|
+
- 动态表单生成（基于 input_schema）
|
|
39
|
+
- 多边形区域坐标输入
|
|
40
|
+
|
|
41
|
+
- ✅ **导出功能**
|
|
42
|
+
- JSON 预览
|
|
43
|
+
- 复制到剪贴板
|
|
44
|
+
- 下载 JSON 文件
|
|
45
|
+
- 工作流验证（错误/警告）
|
|
46
|
+
|
|
47
|
+
## 技术栈
|
|
48
|
+
|
|
49
|
+
- **前端框架**: Vue 3.5 (Composition API)
|
|
50
|
+
- **构建工具**: Vite 7.3
|
|
51
|
+
- **类型系统**: TypeScript 5.9 (严格模式)
|
|
52
|
+
- **UI 组件库**: Element Plus 2.13
|
|
53
|
+
- **工作流引擎**: Vue Flow 1.48
|
|
54
|
+
- **状态管理**: Pinia 3.0
|
|
55
|
+
- **样式方案**: Tailwind CSS 3.4
|
|
56
|
+
|
|
57
|
+
## 快速开始
|
|
58
|
+
|
|
59
|
+
### 安装依赖
|
|
60
|
+
|
|
61
|
+
\`\`\`bash
|
|
62
|
+
npm install
|
|
63
|
+
\`\`\`
|
|
64
|
+
|
|
65
|
+
### 启动开发服务器
|
|
66
|
+
|
|
67
|
+
\`\`\`bash
|
|
68
|
+
npm run dev
|
|
69
|
+
\`\`\`
|
|
70
|
+
|
|
71
|
+
访问 http://localhost:3000
|
|
72
|
+
|
|
73
|
+
### 构建生产版本
|
|
74
|
+
|
|
75
|
+
\`\`\`bash
|
|
76
|
+
npm run build
|
|
77
|
+
\`\`\`
|
|
78
|
+
|
|
79
|
+
### 预览生产构建
|
|
80
|
+
|
|
81
|
+
\`\`\`bash
|
|
82
|
+
npm run preview
|
|
83
|
+
\`\`\`
|
|
84
|
+
|
|
85
|
+
## 使用指南
|
|
86
|
+
|
|
87
|
+
### 1. 添加节点
|
|
88
|
+
|
|
89
|
+
从左侧工具箱拖拽节点到画布：
|
|
90
|
+
|
|
91
|
+
- **基础节点**
|
|
92
|
+
- 开始节点：工作流入口（只能有一个）
|
|
93
|
+
- 结束节点：工作流出口（可以有多个）
|
|
94
|
+
|
|
95
|
+
- **数据节点**
|
|
96
|
+
- 数据源：配置输入数据类型
|
|
97
|
+
|
|
98
|
+
- **算法节点**
|
|
99
|
+
- 小模型：配置检测模型参数
|
|
100
|
+
|
|
101
|
+
### 2. 连接节点
|
|
102
|
+
|
|
103
|
+
- 从节点底部的圆点拖拽到另一个节点顶部的圆点
|
|
104
|
+
- 创建工作流执行路径
|
|
105
|
+
|
|
106
|
+
### 3. 配置节点
|
|
107
|
+
|
|
108
|
+
1. 点击节点选中
|
|
109
|
+
2. 右侧配置面板显示参数
|
|
110
|
+
3. 修改参数（自动保存）
|
|
111
|
+
|
|
112
|
+
**小模型节点参数**：
|
|
113
|
+
- 告警区域：多边形坐标 `[[x1,y1], [x2,y2], ...]`
|
|
114
|
+
- 阈值：检测阈值 (0-1)
|
|
115
|
+
- 告警间隔：毫秒
|
|
116
|
+
- 目标数量：检测目标数
|
|
117
|
+
- 尺寸限制：最小/最大宽度和高度
|
|
118
|
+
|
|
119
|
+
### 4. 导出工作流
|
|
120
|
+
|
|
121
|
+
工具栏提供三种导出方式：
|
|
122
|
+
|
|
123
|
+
- **预览 JSON**：查看完整配置
|
|
124
|
+
- **复制 JSON**：复制到剪贴板
|
|
125
|
+
- **导出 JSON**：下载文件
|
|
126
|
+
|
|
127
|
+
### 5. 验证规则
|
|
128
|
+
|
|
129
|
+
导出前会自动验证：
|
|
130
|
+
|
|
131
|
+
**错误（阻止导出）**：
|
|
132
|
+
- 必须有且仅有一个开始节点
|
|
133
|
+
- 必须至少有一个结束节点
|
|
134
|
+
- 开始节点必须有输出连接
|
|
135
|
+
- 结束节点必须有输入连接
|
|
136
|
+
|
|
137
|
+
**警告（允许导出）**：
|
|
138
|
+
- 开始节点不应有输入
|
|
139
|
+
- 结束节点不应有输出
|
|
140
|
+
- 中间节点未正确连接
|
|
141
|
+
- 节点未连接到工作流
|
|
142
|
+
|
|
143
|
+
## 项目结构
|
|
144
|
+
|
|
145
|
+
\`\`\`
|
|
146
|
+
src/
|
|
147
|
+
├── components/
|
|
148
|
+
│ ├── workflow/
|
|
149
|
+
│ │ ├── WorkflowEditor.vue # 主编辑器容器
|
|
150
|
+
│ │ ├── WorkflowCanvas.vue # Vue Flow 画布
|
|
151
|
+
│ │ ├── NodeToolbox.vue # 节点工具箱
|
|
152
|
+
│ │ ├── NodeConfigPanel.vue # 配置面板
|
|
153
|
+
│ │ └── nodes/
|
|
154
|
+
│ │ ├── StartNode.vue # 开始节点
|
|
155
|
+
│ │ ├── EndNode.vue # 结束节点
|
|
156
|
+
│ │ ├── DataSourceNode.vue # 数据源节点
|
|
157
|
+
│ │ └── SmallModelNode.vue # 小模型节点
|
|
158
|
+
│ └── config/
|
|
159
|
+
├── stores/
|
|
160
|
+
│ └── workflowStore.ts # Pinia 状态管理
|
|
161
|
+
├── types/
|
|
162
|
+
│ ├── workflow.ts # 工作流类型定义
|
|
163
|
+
│ └── schema.ts # JSON Schema 类型
|
|
164
|
+
├── utils/
|
|
165
|
+
│ ├── nodeFactory.ts # 节点工厂函数
|
|
166
|
+
│ ├── validator.ts # 验证逻辑
|
|
167
|
+
│ └── schemaParser.ts # Schema 解析器
|
|
168
|
+
├── composables/
|
|
169
|
+
│ ├── useWorkflowExport.ts # 导出功能
|
|
170
|
+
│ └── useNodeConfig.ts # 配置功能
|
|
171
|
+
├── App.vue # 根组件
|
|
172
|
+
├── main.ts # 应用入口
|
|
173
|
+
└── style.css # 全局样式
|
|
174
|
+
\`\`\`
|
|
175
|
+
|
|
176
|
+
## 导出 JSON 格式
|
|
177
|
+
|
|
178
|
+
\`\`\`json
|
|
179
|
+
{
|
|
180
|
+
"nodes": [
|
|
181
|
+
{
|
|
182
|
+
"id": "start_xxx",
|
|
183
|
+
"type": "start",
|
|
184
|
+
"position": { "x": 100, "y": 100 },
|
|
185
|
+
"data": { "label": "开始" }
|
|
186
|
+
},
|
|
187
|
+
{
|
|
188
|
+
"id": "smallModel_xxx",
|
|
189
|
+
"type": "smallModel",
|
|
190
|
+
"position": { "x": 100, "y": 200 },
|
|
191
|
+
"data": {
|
|
192
|
+
"label": "小模型",
|
|
193
|
+
"modelName": "默认模型",
|
|
194
|
+
"arguments": {
|
|
195
|
+
"areas": [[100,100], [200,100], [200,200], [100,200]],
|
|
196
|
+
"threshold": 0.6,
|
|
197
|
+
"interval": 10000,
|
|
198
|
+
"targetNumber": 0
|
|
199
|
+
}
|
|
200
|
+
}
|
|
201
|
+
}
|
|
202
|
+
],
|
|
203
|
+
"edges": [
|
|
204
|
+
{
|
|
205
|
+
"id": "edge_xxx",
|
|
206
|
+
"source": "start_xxx",
|
|
207
|
+
"target": "smallModel_xxx"
|
|
208
|
+
}
|
|
209
|
+
],
|
|
210
|
+
"config": {
|
|
211
|
+
"dataSource": {},
|
|
212
|
+
"workflow": {
|
|
213
|
+
"nodeCount": 2,
|
|
214
|
+
"edgeCount": 1
|
|
215
|
+
}
|
|
216
|
+
}
|
|
217
|
+
}
|
|
218
|
+
\`\`\`
|
|
219
|
+
|
|
220
|
+
## 第二阶段规划
|
|
221
|
+
|
|
222
|
+
以下功能将在第二阶段实现：
|
|
223
|
+
|
|
224
|
+
- 🔲 检测目标节点（复杂配置）
|
|
225
|
+
- 🔲 分支/条件逻辑
|
|
226
|
+
- 🔲 并行执行（AND/OR）
|
|
227
|
+
- 🔲 高级数据源配置
|
|
228
|
+
- 🔲 OCR、人脸、车牌识别节点
|
|
229
|
+
- 🔲 工作流模板
|
|
230
|
+
- 🔲 撤销/重做功能
|
|
231
|
+
- 🔲 自动布局算法
|
|
232
|
+
- 🔲 画布绘制多边形区域
|
|
233
|
+
- 🔲 迷你地图导航
|
|
234
|
+
|
|
235
|
+
## 开发说明
|
|
236
|
+
|
|
237
|
+
### 添加新节点类型
|
|
238
|
+
|
|
239
|
+
1. 在 `src/types/workflow.ts` 定义节点数据接口
|
|
240
|
+
2. 在 `src/utils/nodeFactory.ts` 添加工厂函数
|
|
241
|
+
3. 在 `src/components/workflow/nodes/` 创建节点组件
|
|
242
|
+
4. 在 `WorkflowCanvas.vue` 注册节点类型
|
|
243
|
+
5. 在 `NodeToolbox.vue` 添加工具箱项
|
|
244
|
+
|
|
245
|
+
### 自定义验证规则
|
|
246
|
+
|
|
247
|
+
在 `src/utils/validator.ts` 中修改 `validateWorkflow` 和 `validateNodeData` 函数。
|
|
248
|
+
|
|
249
|
+
### 修改导出格式
|
|
250
|
+
|
|
251
|
+
在 `src/composables/useWorkflowExport.ts` 中调整 `exportToJSON` 函数。
|
|
252
|
+
|
|
253
|
+
## 浏览器支持
|
|
254
|
+
|
|
255
|
+
- Chrome >= 90
|
|
256
|
+
- Firefox >= 88
|
|
257
|
+
- Safari >= 14
|
|
258
|
+
- Edge >= 90
|
|
259
|
+
|
|
260
|
+
## 许可证
|
|
261
|
+
|
|
262
|
+
ISC
|
|
263
|
+
|
|
264
|
+
## 作者
|
|
265
|
+
|
|
266
|
+
AIPass Team
|
|
267
|
+
\`\`\`
|