# process-vue3-basic

**Repository Path**: NBegin/process-vue3-basic

## Basic Information

- **Project Name**: process-vue3-basic
- **Description**: 工作流，审批流，流程编排，流程设计，flow，workflow，process，process-vue3
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-05-11
- **Last Updated**: 2026-05-13

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## Process Designer-开源版（process-vue3 集成案例）

基于 Vue 3 + Vite + process-vue3 + Ant Design Vue 的可视化流程设计器。

#### [在线演示](https://process-vue3.pages.dev/#/)

---

## 功能特性

### 核心功能

- **可视化流程设计**：拖拽式节点添加和连接，直观的流程画布操作
- **丰富节点类型**：支持开始事件、结束事件、用户任务、服务任务、脚本任务、网关节点等 BPMN 2.0 标准节点
- **灵活属性配置**：支持节点属性的详细配置和自定义属性面板
- **流程管理**：支持流程导入导出（JSON / BPMN 2.0 XML）、流程验证、版本管理
- **多语言支持**：内置中英文，完整的国际化架构，支持自定义语言扩展
- **生命周期事件**：提供 BEFORE_INIT、AFTER_INIT、AFTER_LOAD、BEFORE_ADD_NODE、AFTER_ADD_NODE、SELECTED_NODE 等丰富事件监听机制
- **自定义扩展**：支持自定义节点（HtmlTask + Vue 组件）、自定义属性面板（tabConfig）、自定义字段类型、自定义上下文菜单
- **工具栏自定义**：支持动态配置工具栏按钮，自定义图标、文本、点击行为和权限控制
- **画布交互**：支持右键菜单、拖拽缩放、小地图导航、网格显示、坐标显示

### 高级功能

- **AI 智能助手**：集成 AI 辅助设计能力，提供智能节点推荐、流程优化建议和自然语言交互
- **流程模拟**：支持流程模拟运行，可视化展示执行路径，支持单步调试和断点
- **自动布局**：内置 Sugiyama 分层布局算法，支持层级、水平和网格三种布局模式
- **模板库**：提供丰富的预置流程模板，涵盖请假审批、报销、采购等常见业务场景
- **版本管理**：支持流程版本自动保存、历史记录、版本对比和版本回滚
- **高级校验**：支持基础校验和自定义规则校验，检查流程完整性和正确性
- **全局搜索**：按节点名称或类型快速搜索，点击结果自动定位并选中画布节点
- **画布设置**：支持网格显示、对齐辅助线、缩放比例等参数配置
- **快捷键**：提供保存、撤销、重做、删除、全选等常用快捷键

---

## 技术栈

| 技术 | 版本 | 说明 |
|------|------|------|
| Vue | ^3.5 | 渐进式 JavaScript 框架 |
| Vite | ^7.1 | 下一代前端构建工具 |
| TypeScript | ~5.8 | 类型安全 |
| Ant Design Vue | ^4.2 | UI 组件库 |
| process-vue3 | 1.0.26 | 流程设计器核心库 |
| vue-i18n | ^9.14 | 国际化 |
| Pinia | ^3.0 | 状态管理 |
| Vue Router | ^4.5 | 路由管理 |
| Less | ^4.4 | CSS 预处理器 |

---

## 项目结构

```
src/
├── components/                # 组件
│   ├── toolbar.vue            # 工具栏
│   ├── AIAssistant.vue        # AI 智能助手
│   ├── AIFloatingButton.vue   # AI 悬浮按钮
│   ├── AutoLayoutPanel.vue    # 自动布局面板
│   ├── CanvasSettings.vue     # 画布设置
│   ├── CollaborationBar.vue   # 实时协作栏
│   ├── ExpressionEditor.vue   # 表达式编辑器
│   ├── HelpDrawer.vue         # 帮助文档抽屉
│   ├── IntroductionDrawer.vue # 介绍抽屉
│   ├── JsonEditorModal.vue    # JSON 编辑器弹窗
│   ├── MiniMap.vue            # 小地图
│   ├── SearchPanel.vue        # 搜索面板
│   ├── ShortcutsPanel.vue     # 快捷键面板
│   ├── SimulationPanel.vue    # 流程模拟面板
│   ├── SimulationReport.vue   # 模拟报告
│   ├── SmartRecommendation.vue# 智能推荐
│   ├── TemplateSelector.vue   # 模板选择器
│   ├── ValidationPanel.vue    # 校验面板
│   ├── VersionCompare.vue     # 版本对比
│   ├── VersionHistoryDrawer.vue# 版本历史
│   ├── customNodes/           # 自定义节点
│   │   ├── ApprovalNode.vue   # 审批节点
│   │   ├── NoticeNode.vue     # 通知节点
│   │   ├── ScriptNode.vue     # 脚本节点
│   │   ├── customHtml.vue     # HTML 自定义节点
│   │   ├── customDataV.vue    # DataV 数据可视化节点
│   │   └── customDataV2.vue   # DataV 数据可视化节点 v2
│   └── customFields/          # 自定义字段
│       └── field-switch.vue   # 开关字段
├── composables/               # 组合式函数
│   ├── useProcessEditor.js    # 流程编辑器核心逻辑
│   ├── useSimulation.js       # 流程模拟
│   ├── useVersionHistory.js   # 版本历史管理
│   └── useFetch.ts            # 数据请求封装
├── config/                    # 配置
│   └── toolbarButtons.js      # 工具栏按钮配置
├── locales/                   # 国际化
│   ├── zh/                    # 中文语言包
│   └── en/                    # 英文语言包
├── views/                     # 页面视图
│   ├── index.vue              # 主页面
│   └── demos/                 # 示例页面 (d0 ~ d8)
└── router/                    # 路由配置
```

---

## 快速开始

```bash
# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 构建生产版本
npm run build

# 预览构建结果
npm run preview
```

---

## 工具栏功能

| 分组 | 功能 | 快捷键 |
|------|------|--------|
| 文件 | 保存、导入 JSON、导出 JSON、导入 BPMN、导出 BPMN | Ctrl+S |
| 编辑 | 撤销、重做、清空、自动布局 | Ctrl+Z / Ctrl+Y |
| 视图 | 放大、缩小、适应画布、搜索节点 | Ctrl+F |
| 运行 | 流程校验、流程模拟 | - |
| AI | AI 助手、模板库 | - |
| 更多 | 发布流程、快捷键、版本历史、介绍、帮助 | - |

---

## 效果图

### 流程设计主界面

![alt text](public/imgs/image-new.png)

### 流程属性配置

![alt text](public/imgs/image-0-m.png)

### 节点属性配置

![alt text](public/imgs/image-1-n.png)

### 自定义节点 / 自定义属性

![alt text](public/imgs/image-2-n.png)

### 图形属性配置

![alt text](public/imgs/image-3-n.png)

---

## 自定义开发

### 自定义节点

```vue
<!-- ApprovalNode.vue -->
<template>
  <div class="approval-node">
    <img :src="icon" alt="" />
    <span>审批任务</span>
  </div>
</template>
```

```js
// 在页面中注册
const customNodes = [
  {
    bpmnType: 'HtmlTask',
    bizType: 'approval',
    text: '审批节点',
    name: '审批节点',
    component: ApprovalNode,
    width: 160,
    height: 80,
    resizable: true,
  },
]
```

### 生命周期事件

```js
const { registerLifecycleHook } = useProcessEditor(editorRef)

registerLifecycleHook('AFTER_INIT', (canvas) => {
  console.log('编辑器初始化完成')
})

registerLifecycleHook('AFTER_ADD_NODE', (figure) => {
  console.log('节点已添加:', figure.id)
})
```

### 工具栏按钮配置

```js
import { toolbarButtons } from '@/config/toolbarButtons'

const buttons = toolbarButtons.getDesignButtons(i18nMessages)
```

---

## 浏览器兼容

如需本地开发调试跨域请求，可启动 Chrome 并禁用 Web 安全策略：

```bash
# Windows
chrome.exe --disable-web-security --user-data-dir="C:/ChromeDevSession"

# macOS
open -n -a "Google Chrome" --args --disable-web-security --user-data-dir="/tmp/chrome_dev_test"
```

---

## License

[Apache-2.0](LICENSE)