# st-flow-design

**Repository Path**: zhanglei082319/st-flow-design

## Basic Information

- **Project Name**: st-flow-design
- **Description**: 基于logicFlow实现的工作流设计器
- **Primary Language**: Unknown
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2026-02-04
- **Last Updated**: 2026-09-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# ST Flow Design - 流程设计器

基于 Vue 3 + LogicFlow 的流程设计器前端项目，提供可视化流程编排能力。

## 业务逻辑描述

本项目为流程设计器前端应用，支持用户通过拖拽方式设计业务流程图。系统提供多种节点类型，支持流程的可视化编排、配置和导出。

## 功能设计

### 核心功能
- 流程图绘制与编辑
- 节点拖拽与连接
- 流程导航与缩略图
- 流程图导出（PNG格式）
- 流程数据JSON查看
- 节点配置管理

### 支持的节点类型

| 节点类型 | 说明 | 图形 |
|---------|------|------|
| 开始节点 | 流程起始点 | 圆形 |
| 用户任务 | 需要人工处理的任务节点 | 矩形 |
| 自动任务 | 系统自动执行的任务节点 | 矩形 |
| 条件判断 | 流程分支判断节点 | 菱形 |
| 分流节点 | 流程分支节点 | 菱形 |
| 合流节点 | 流程汇聚节点 | 菱形 |
| 等待任务 | 等待外部条件的任务节点 | 矩形 |
| 结束节点 | 流程终止点 | 圆形 |

## 关键程序详细设计

### 技术栈

- **前端框架**: Vue 3.5.27
- **构建工具**: Vite 7.3.1
- **UI组件库**: Element Plus 2.13.2
- **流程引擎**: LogicFlow 2.1.11
- **路由管理**: Vue Router 5.0.2

### 核心依赖

```json
{
  "@logicflow/core": "^2.1.11",
  "@logicflow/extension": "^2.1.13",
  "element-plus": "^2.13.2",
  "vue": "^3.5.27",
  "vue-router": "^5.0.2"
}
```

### 项目结构

```
st-flow-design/
├── src/
│   ├── views/flow/              # 流程设计器视图
│   │   ├── config/              # 配置文件
│   │   │   ├── nodeConfig.js    # 节点配置
│   │   │   └── theme.js         # 主题配置
│   │   ├── utils/               # 工具函数
│   │   │   └── common.js        # 通用工具
│   │   └── FlowEditor.vue       # 流程编辑器主组件
│   ├── router/                  # 路由配置
│   │   └── index.js
│   ├── App.vue                  # 根组件
│   └── main.js                  # 应用入口
├── package.json
└── vite.config.js
```

### LogicFlow 插件配置

项目集成了以下 LogicFlow 扩展插件：

- **DndPanel**: 拖拽面板，提供节点拖拽能力
- **Control**: 控制面板，提供工具栏功能
- **SelectionSelect**: 框选功能
- **MiniMap**: 缩略图导航
- **Snapshot**: 快照导出
- **Menu**: 右键菜单

### 自定义控制项

- **导航**: 显示/隐藏缩略图
- **导出图片**: 导出流程图为PNG格式
- **文档**: 查看流程图JSON数据
- **保存**: 保存流程配置

## 环境要求

- **Node.js**: 20.19.0+ 或 22.12.0+
- **npm**: 10.0.0+

## 快速开始

### 安装依赖

```sh
npm install
```

### 开发模式

```sh
npm run dev
```
访问 http://106.54.54.254/logic-flow/ 参考
本地运行访问 http://localhost:5173 查看应用

### 生产构建

```sh
npm run build
```

### 预览构建结果

```sh
npm run preview
```

## 开发说明

### 待实现功能

以下功能已预留接口，待后端API实现：

- `saveProcess` 组件：流程保存对话框
- `nodeConfiguration` 组件：节点配置对话框  
- `saveProcessFlow` API：保存流程数据接口
- `getByProcessId` API：根据ID获取流程数据接口

### 节点配置扩展

可通过修改 `src/views/flow/config/nodeConfig.js` 添加或修改节点类型。

### 主题定制

可通过修改 `src/views/flow/config/theme.js` 自定义流程图样式。

### 下面是系统页面参考:
![1.gif](image/1.gif)
![2.gif](image/2.gif)

## IDE 推荐

- [VS Code](https://code.visualstudio.com/)
- [Vue Official Extension](https://marketplace.visualstudio.com/items?itemName=Vue.volar)

## 浏览器支持

推荐使用现代浏览器：
- Chrome 90+
- Edge 90+
- Firefox 88+
- Safari 14+

## License

Private