gbflowdesign

Vue 3 **流程设计器（画布）**的独立分发入口：节点增删、分支、缩放、JSON 导入导出、PNG 导出。

画布只做流程本身——不碰表单、不碰流程定义的元信息。实现由 gbflowengine/visual 提供，本包在构建时把引擎 core / visual 源码内联进产物；表单设计由 gbformdesign 负责。

职责边界

| 包 | 负责 | | --- | --- | | gbflowengine | 引擎内核（schema / runtime / prediction / 校验）+ FlowCanvas 画布 + 流程定义编排（基本信息 + 表单 + 流程） | | gbflowdesign（本包） | FlowCanvas 的独立分发入口：复用并内联 gbflowengine/visual | | gbformdesign | 表单设计器与表单数据模型 |

gbformdesign ──> gbflowengine（内核 / visual / 编排）
                      └──> gbflowdesign（独立画布入口，内联 visual）

依赖方向固定为 gbflowdesign -> gbflowengine；引擎不反向依赖本包，仓库禁止任何包循环依赖。gbformdesign 保持外部依赖（条件变量需要表单字段类型）。

安装

npm install gbflowdesign gbformdesign element-plus vue

产物已内联 gbflowengine/visual，无需单独安装引擎；若项目已在用 gbflowengine，也可以直接 import { FlowCanvas } from 'gbflowengine/visual'，不必引入本包。

使用

<template>
  <FlowCanvas
    v-model="workflow"
    :form-variables="formVariables"
    file-name="purchase"
  />
</template>

<script setup>
import { ref } from 'vue'
import { FlowCanvas } from 'gbflowdesign'
import 'gbflowdesign/style.css'

const workflow = ref({ nodeId: 0, nodeName: '发起人', type: 'start', childNode: null })
// 条件分支可选的变量，通常由表单字段推导（可用 gbflowengine 的 enrichFormVariables）
const formVariables = ref([])
</script>

props

| prop | 类型 | 默认值 | 说明 | | --- | --- | --- | --- | | modelValue | Object | null | 流程节点树（{ nodeId, nodeName, type, childNode }） | | formVariables | Array | [] | 条件分支可选的表单变量，需由调用方提供（本包不做表单推导） | | readonly | Boolean | false | 只读 | | meta | Object | {} | 导出时写入的元信息 | | fileName | String | workflow | 导出文件名前缀 | | showToolbar | Boolean | true | 是否显示工具栏 | | autoEnsureEnd | Boolean | true | 自动补结束节点 | | exportBuilder | Function | null | 自定义导出载荷（定义模式下由编排层注入） |

事件

update:modelValue、change、import、export、validate。

实例方法

getWorkflow()、getDefinition()、importJSON(input)、exportJSON(space)、downloadWorkflow()、validate()、saveAsPng()、zoomIn() / zoomOut() / resetZoom()。

saveAsPng() 依赖宿主提供 window.html2canvas。

开发

npm run dev         # demo，http://127.0.0.1:5176
npm run build       # 库产物 -> dist/
npm run build:demo  # demo 静态站 -> dist-demo/
npm run test        # vitest（SSR 渲染冒烟）

License

MIT