# kb-workflow

**Repository Path**: FengHJie/kb-workflow

## Basic Information

- **Project Name**: kb-workflow
- **Description**: 1324567891
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-10-13
- **Last Updated**: 2025-10-14

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# AI 工作流系统

基于 Vue 3 + TypeScript + Element Plus + VueFlow 构建的大模型工作流可视化编排系统，提供直观的拖拽式界面，让用户能够轻松设计和执行复杂的 AI 工作流程。

## 🌟 项目亮点

- 支持 12 种不同功能的节点类型，满足各种 AI 工作流需求
- 可视化拖拽式设计，无需编码即可构建复杂工作流
- 实时工作流执行与状态监控
- 工作流的保存、加载与导入导出功能
- 支持多种交互模式，包括鼠标友好模式和触控板友好模式
- 提供示例工作流和知识生成工作流快速创建功能

## 🚀 快速开始

### 安装依赖

```bash
npm install
```

### 启动开发服务器

```bash
npm run dev
```

服务器将在 http://localhost:3000 自动启动并打开浏览器。

### 构建生产版本

```bash
npm run build
```

### 预览生产版本

```bash
npm run preview
```

## 🛠️ 技术栈

- **Vue 3** - 渐进式 JavaScript 框架
- **TypeScript** - 类型安全
- **Element Plus** - UI 组件库
- **VueFlow** - 流程图可视化
- **Pinia** - 状态管理
- **Vite** - 构建工具
- **UUID** - 唯一标识符生成

## 📊 功能特性

### 12 种节点类型详解

1. **输入节点** - 接收外部输入数据，支持文本、数字、JSON 和文件类型
2. **输出节点** - 输出工作流结果，支持文本和 JSON 格式
3. **大模型调用节点** - 调用 GPT、Claude 等大语言模型，支持模型选择、提示词配置、温度调整等
4. **工作流节点** - 嵌套调用其他工作流，实现工作流的复用与组合
5. **批处理节点** - 批量处理数据，支持设置批处理大小和并行处理
6. **意图识别节点** - 识别用户意图，支持自定义意图、关键词和描述
7. **变量聚合节点** - 聚合多个变量，支持合并、连接、求和、平均值等操作
8. **代码节点** - 执行自定义 JavaScript/Python 代码，支持输入变量和输出变量配置
9. **选择器节点** - 根据条件选择分支，支持多分支条件配置
10. **循环节点** - 循环处理数据，支持数组遍历和迭代控制
11. **知识库检索节点** - 从知识库检索信息，支持查询、TopK 设置
12. **知识库写入节点** - 写入数据到知识库，支持内容和元数据配置

### 核心功能

- **可视化拖拽式工作流编排**：直观的界面让您轻松设计复杂工作流
- **节点配置面板**：每个节点都有专门的配置界面，支持丰富的参数设置
- **工作流保存与加载**：自动保存到本地存储，确保工作不会丢失
- **多工作流管理**：支持创建和管理多个工作流项目
- **节点连接与数据流**：灵活的节点连接机制，支持复杂的数据流设计
- **实时画布操作**：支持节点拖拽、缩放、对齐等操作
- **工作流执行引擎**：强大的执行引擎，支持异步执行和状态追踪
- **执行历史追踪**：记录每个节点的执行状态、输入输出和时间戳
- **变量状态监控**：实时查看和管理工作流中的变量状态
- **输入变量配置**：支持为工作流配置不同类型的输入变量

## 📖 使用指南

### 创建工作流

1. 点击顶部工具栏中的"新建工作流"按钮
2. 输入工作流名称和描述
3. 点击"创建"按钮完成工作流创建
4. 系统会自动创建基础的输入-大模型-输出三个节点

### 编排工作流

1. 点击底部悬浮的"+"按钮，打开节点工具栏
2. 从节点工具栏中拖拽节点到画布的合适位置
3. 拖拽节点的连接点（小圆圈）到目标节点的连接点，创建连接线
4. 点击画布上的节点，在右侧面板中配置节点参数
5. 点击顶部工具栏的"保存"按钮保存工作流

### 执行工作流

1. 点击顶部工具栏的"执行"按钮，打开执行面板
2. 在执行面板中，点击"配置输入"按钮设置输入变量
3. 点击"开始执行"按钮运行工作流
4. 在执行面板中查看执行历史、节点状态和变量值

### 导入导出工作流

1. **导出**：打开工作流后，可以通过浏览器的开发者工具获取工作流的 JSON 数据
2. **导入**：点击顶部工具栏的"导入 JSON"按钮，粘贴工作流 JSON 数据，点击"导入"

### 使用示例工作流

1. 点击顶部工具栏的"示例工作流"按钮，系统会自动创建一个知识生成工作流
2. 这个示例工作流演示了如何从知识库检索内容并结合用户提示生成输出
3. 您可以直接使用这个示例工作流，或者基于它进行修改

### 交互模式切换

1. 点击顶部工具栏的交互模式切换按钮
2. 选择"鼠标友好模式"或"触控板友好模式"
3. 根据您的设备选择最适合的交互方式

## 📁 项目结构

```
src/
├── components/          # Vue 组件
│   ├── WorkflowCanvas.vue      # 工作流画布组件，处理节点展示和连接
│   ├── WorkflowNode.vue        # 节点组件，显示单个节点的外观和行为
│   ├── NodeToolbar.vue         # 节点工具栏，提供节点选择和拖拽功能
│   ├── NodeConfigPanel.vue     # 节点配置面板，用于配置节点参数
│   └── ExecutionPanel.vue      # 执行面板，显示工作流执行状态和结果
├── config/             # 配置文件
│   └── nodeMetadata.ts         # 节点元数据，定义各节点的类型、图标、颜色等
├── engine/             # 执行引擎
│   └── WorkflowExecutor.ts     # 工作流执行器，负责工作流的实际运行逻辑
├── stores/             # 状态管理
│   ├── workflow.ts             # 工作流状态管理，处理工作流的增删改查
│   └── knowledgeWorkflow.ts    # 知识生成工作流的特定实现
├── types/              # 类型定义
│   └── workflow.ts             # 工作流相关的 TypeScript 类型定义
├── App.vue             # 主应用组件，整合各组件和功能
└── main.ts             # 应用入口，初始化 Vue 应用
```

## 🚀 扩展开发

### 添加自定义节点

1. 在 `types/workflow.ts` 中定义新的节点类型和配置接口
2. 在 `config/nodeMetadata.ts` 中添加新节点的元数据信息
3. 在 `engine/WorkflowExecutor.ts` 中实现新节点的执行逻辑
4. 在 `components/NodeConfigPanel.vue` 中添加新节点的配置界面
5. 重新启动开发服务器以查看新节点

### 集成真实 API

1. 修改 `engine/WorkflowExecutor.ts` 中的模拟方法
2. 替换为真实的 API 调用，例如大模型 API、知识库 API 等
3. 确保添加必要的错误处理和超时控制
4. 考虑添加 API 密钥管理功能

### 自定义工作流模板

1. 在 `stores/workflow.ts` 中添加新的工作流创建方法
2. 定义工作流的节点和连接方式
3. 在 `App.vue` 中添加相应的按钮和事件处理
4. 确保工作流模板有合理的节点布局

## ❓ 常见问题

### Lint 警告说明

如果在 v0 编辑器中看到 `useHookAtTopLevel` 的警告，这是误报，可以安全忽略。这是一个 Vue 3 项目，但 v0 的 linter 错误地应用了 React 的规则。详情请查看 [LINT_ERRORS.md](./LINT_ERRORS.md)。

### 工作流保存位置

工作流数据保存在浏览器的 localStorage 中，刷新页面不会丢失数据。但请注意，清除浏览器数据会导致工作流丢失，建议定期导出重要的工作流。

### 节点连接问题

- 确保从源节点的输出端口连接到目标节点的输入端口
- 检查节点类型是否支持连接（例如输入节点没有输入端口）
- 如果连接失败，可以尝试先删除现有连接，然后重新创建

### 执行失败排查

- 检查节点配置是否正确，特别是必填项
- 查看浏览器控制台是否有错误信息
- 检查节点之间的连接是否正确
- 尝试简化工作流，逐步添加节点以定位问题

## 📄 许可证

MIT License

## 🤝 贡献指南

欢迎对项目进行贡献！如果您有任何问题或建议，请在项目中创建 issue 或提交 pull request。

## 📞 联系我们

如有任何问题或反馈，请联系项目维护者。