FUI-BPMN 流程设计器

一个基于 Vue 3 + TypeScript + BPMN.js 的流程设计器组件。

功能特性

• 🎯 基于 BPMN.js 的流程设计器
• 🎨 支持自定义样式和主题
• 📱 响应式设计，支持移动端
• 🔧 丰富的配置选项
• 🚀 高性能渲染
• 📦 支持多种打包格式

技术栈

• Vue 3 - 渐进式 JavaScript 框架
• TypeScript - JavaScript 的超集，提供类型安全
• Vite - 下一代前端构建工具
• Element Plus - Vue 3 的组件库
• BPMN.js - BPMN 2.0 建模工具包
• Less - CSS 预处理器

项目结构

fui-bpmn/
├── src/
│   ├── alignElements/          # 元素对齐功能
│   ├── autoPlace/              # 自动布局功能
│   ├── business/               # 业务逻辑
│   ├── commandStack/           # 命令栈
│   ├── config/                 # 配置相关
│   │   ├── constants/          # 常量定义
│   │   ├── contextPad/         # 上下文菜单配置
│   │   └── element/            # 元素配置
│   ├── contextPad/             # 上下文菜单
│   ├── copyPaste/              # 复制粘贴功能
│   ├── factory/                # 工厂模式
│   ├── gridSnapping/           # 网格对齐
│   ├── helper/                 # 辅助工具
│   ├── labelEditing/           # 标签编辑
│   ├── modeler/                # 建模器
│   ├── outline/                # 大纲视图
│   ├── palette/                # 工具栏
│   ├── previewModeler/         # 预览建模器
│   ├── renderer/               # 渲染器
│   ├── rule/                   # 规则引擎
│   ├── simpleModeler/          # 简单建模器
│   ├── style/                  # 样式文件
│   ├── taskModeler/            # 任务建模器
│   ├── translate/              # 国际化
│   └── utils/                  # 工具函数
├── index.html                  # HTML 入口文件
├── package.json                # 项目依赖配置
├── vite.config.ts              # Vite 配置
├── tsconfig.json               # TypeScript 配置
└── README.md                   # 项目说明

安装

npm install fui-bpmn

使用方法

方式一：全局注册

import { createApp } from 'vue'
import { FuiBpmnPlugin } from 'fui-bpmn'
import 'fui-bpmn/dist/style.css'

const app = createApp(App)
app.use(FuiBpmnPlugin)
app.mount('#app')

方式二：局部使用

<template>
  <div>
    <FuiBpmn 
      :flowNodes="flowNodes"
      :flowXml="flowXml"
      :nodeList="nodeList"
      :disabled="false"
      :type="0"
      :isPreview="false"
      @viewSubFlow="handleViewSubFlow"
    />
  </div>
</template>

<script setup>
import { FuiBpmn } from 'fui-bpmn'
import 'fui-bpmn/dist/style.css'

const flowNodes = ref({})
const flowXml = ref('')
const nodeList = ref([])

const handleViewSubFlow = (flowId) => {
  console.log('查看子流程:', flowId)
}
</script>

方式三：默认导入

<template>
  <div>
    <FuiBpmn 
      :flowNodes="flowNodes"
      :flowXml="flowXml"
      :nodeList="nodeList"
      :disabled="false"
      :type="0"
      :isPreview="false"
      @viewSubFlow="handleViewSubFlow"
    />
  </div>
</template>

<script setup>
import FuiBpmn from 'fui-bpmn'
import 'fui-bpmn/dist/style.css'

const flowNodes = ref({})
const flowXml = ref('')
const nodeList = ref([])

const handleViewSubFlow = (flowId) => {
  console.log('查看子流程:', flowId)
}
</script>

Props

| 参数 | 类型 | 默认值 | 说明 | |------|------|--------|------| | flowNodes | Object | {} | 流程节点配置数据 | | flowXml | String | '' | BPMN XML 数据 | | nodeList | Array | [] | 节点列表数据 | | disabled | Boolean | true | 是否禁用编辑功能 | | type | Number | 0 | 模型器类型 (0: 标准模型器, 1: 简单模型器, 2: 任务模型器) | | isPreview | Boolean | false | 是否为预览模式 | | lineKeyList | Array | undefined | 连线键值列表 | | openPreview | Boolean | false | 是否开启预览模式 |

Events

| 事件名 | 参数 | 说明 | |--------|------|------| | viewSubFlow | flowId | 查看子流程时触发 |

开发

# 安装依赖
npm install

# 开发模式
npm run dev

# 构建库
npm run build:lib

# 构建生产版本
npm run build:prod

# 类型检查
npm run type-check

# 代码检查
npm run lint

打包

项目支持多种打包模式：

库模式打包

npm run build:lib

生成的文件：

• dist/fui-bpmn.es.js - ES 模块格式
• dist/fui-bpmn.umd.js - UMD 格式
• dist/fui-bpmn.d.ts - TypeScript 类型声明

生产模式打包

npm run build:prod

生成优化后的生产版本，包含代码分割和压缩。

主要功能

• 流程设计 - 支持拖拽创建 BPMN 流程图
• 元素编辑 - 支持各种 BPMN 元素的属性编辑
• 工具栏 - 提供丰富的绘图工具
• 上下文菜单 - 右键菜单支持快速操作
• 网格对齐 - 自动网格对齐功能
• 复制粘贴 - 支持元素的复制粘贴操作
• 国际化 - 支持多语言切换
• 主题定制 - 支持自定义主题样式

开发指南

添加新的 BPMN 元素

1. 在 src/config/element/ 目录下创建对应的配置文件
2. 在 src/palette/ 中添加工具栏图标
3. 在 src/renderer/ 中实现自定义渲染逻辑

自定义样式

1. 修改 src/style/variables.scss 中的变量
2. 在 src/style/index.scss 中添加自定义样式

国际化

1. 在 src/translate/ 目录下添加语言文件
2. 使用 $t() 函数进行文本翻译

许可证

MIT License