gbflowengine

纯前端工作流引擎 + 企业级 OA 测试工作台。

| 层 | 入口 | 内容 | | --- | --- | --- | | 内核 | gbflowengine/core | 定义/节点 schema、流程运行时、分支预测、条件求值、结构校验（纯 JS，无 UI） | | 渲染 | gbflowengine/visual | FlowCanvas、ScWorkflow 及节点组件、节点状态徽标、进度详情 | | 编排 | gbflowengine/definition | FlowDefinitionDesigner：基本信息 + 表单设计 + 流程设计，支持内置节点与可配置自定义节点 | | 工作台 | gbflowengine/center | FlowCenter：企业 OA 工作台，覆盖工作台、待办、审批办理、申请台账、模板中心、流程监控、流程设计、通知与审计；数据全部保存在浏览器 |

编排层不自己造轮子，只做组合：

gbformdesign  ──> FormDesigner   （表单设计页签）
gbflowengine  ──> FlowCanvas     （流程设计页签，visual 层）
gbflowengine  ──> 定义结构 normalize / 同步 / 校验 / 导入导出

gbflowdesign 是 FlowCanvas 的独立分发入口，构建时内联本包 visual 层；引擎本身不依赖它。

企业级 OA 工作台 FlowCenter

Demo 只保留测试模式，不再提供独立的「纯流程画布」入口；流程画布只作为流程设计器里的建模工具存在。

<template>
  <FlowCenter
    title="FlowOps 流程中台"
    subtitle="测试模式 · 本地演示数据"
    :seed-instances="demoInstances"
    :custom-executors="customExecutors"
    demo
  />
</template>

<script setup>
import { FlowCenter } from 'gbflowengine'
import { createOaDemoInstances, createDemoCustomExecutors } from 'gbflowengine'
import 'gbflowengine/style.css'
import 'gbformdesign/style.css'

const demoInstances = createOaDemoInstances()
const customExecutors = createDemoCustomExecutors()
</script>

| prop | 类型 | 默认值 | 说明 | | --- | --- | --- | --- | | title / subtitle | String | 流程中台 / 企业流程 · 审批协同 | 侧栏品牌文案 | | seedInstances | Array | [] | 本机无实例存档时预置的实例 | | users / departments / roles | Array | mock 数据 | 组织数据，可通过「用户与组织」抽屉修改 | | initiatorId | String / Number | 首位用户 | 初始操作人 | | customExecutors | Object | {} | 自定义节点「已注册方法」的执行器映射；键为方法名，值为异步函数 | | customFetch | Function | null | 可选的自定义 fetch，用于 HTTP 自定义节点的网关代理 / 白名单限制 | | demo | Boolean | false | 显示测试环境标识与「重置演示数据」入口 |

页面与信息架构

侧栏
├─ 我的工作：工作台 / 待办中心 / 我的申请 / 抄送我的 / 已办事项
├─ 流程发起：模板中心
├─ 管理与治理（仅流程管理员）：流程监控 / 流程设计
└─ 消息：通知中心

顶栏：面包屑 / 全局搜索(Ctrl K) / 发起申请 / 通知 / 当前身份切换
主区：页面视图；流程详情以右侧抽屉展开，移动端全屏

| 页面 | 核心能力 | | --- | --- | | 工作台 | 待办与超时优先提醒、四类事项概览、常用模板直达、我发起的进度、流程动态 | | 待办中心 | 待我审批 / 待我提交、超时与优先级排序、保存常用视图、批量同意、连续办理；左侧列表 + 右侧审批办理 | | 审批办理 | 决策摘要、完整表单、材料清单与附件、当前节点责任链、纵向流程轨迹、审批意见快捷语、同意 / 退回修改 / 驳回 / 转办 / 加签；退回时展示后果说明 | | 我的申请 / 抄送我的 / 已办 | 按状态与时间筛选，查看完整轨迹与处理意见 | | 模板中心 | 分类、搜索、收藏、最近使用、适用场景、SLA、材料要求与发起入口；发起页支持附件选择、自动保存草稿并实时预览路径 | | 流程监控 | 流程量趋势、状态构成、部门分布、模板分布、瓶颈节点、实例追踪与图表钻取、审计日志与导出 | | 流程设计 | 流程 CRUD、导入导出、流程检测、版本发布 / 回滚 / 停用、模板上架信息；新增「自定义节点」配置（HTTP 请求 / 已注册方法、变量插值、结果变量、失败策略）；表单使用 gbformdesign，流程画布使用内置 FlowCanvas | | 通知中心 | 待办、超时、催办、抄送、流程结果；已读状态持久化；站内 / 邮件 / 移动推送策略说明 |

角色与权限

• 发起者：填写与提交、保存草稿、撤回自己的流程、查看自己的申请。
• 审批者：只看到分配给自己的任务与可执行动作；退回、转办、加签均校验身份与节点配置。
• 流程管理者：通过「我的申请 / 已办 / 抄送」与监控视图追踪进度，可查看完整轨迹。
• 流程管理员：角色 flow_admin 额外获得流程监控、流程设计、催办、终止、审计日志与管理员干预留痕能力。
• 不在流程参与范围内的用户，搜索与详情会隐藏表单、附件与审批意见；所有无关动作不会渲染，而不是点击后报错。

交互与视觉规范

• 状态语义：审批中 #2456D6、已通过 #0D8057、已驳回 #C23B32、退回 / 催促 #AA6A12、已终止 / 已撤回 #68758A。
• 动作语义：同意使用绿色主按钮；驳回使用红色；退回修改使用中性描边；转办与加签收敛到「更多」并附结果说明。所有状态均同时提供文字，不仅依赖颜色。
• 决策优先：审批页首屏只保留金额、等级、归属、发起人、当前节点与 SLA；完整表单可折叠。
• 触控规范：移动端主操作按钮、导航与筛选控件不小于 44px；审批页使用底部固定操作栏。
• 响应式：桌面为左侧导航 + 列表/详情分栏；移动端为底部导航 + 全屏审批页，节点名称、状态术语与桌面一致。
• 容错：自动保存草稿、断点续填、提交防抖、退回保留表单内容、必填校验前置、空 / 加载 / 无权限 / 超时 / 终止状态齐备。

数据与演示

• 流程定义：gb-flow-center-definitions-v1，带发布版本快照；运行中的实例只使用最新发布版本。
• 流程实例：gb-flowengine-oa-v2；「重置演示数据」会清理定义、实例、草稿、通知已读与审计记录后重新播种。
• 存储适配层优先 IndexedDB，失败或超时自动回退 localStorage / 内存，并在同一会话内避免反复等待。
• createOaDemoInstances() 生成 11 个实例，覆盖采购、费用、合同、请假、供应商准入五个模板，以及进行中、已通过、已驳回、已撤回、退回待提交、超时、催办和自定义节点自动执行场景。
• 供应商准入模板自带一个「外部风控校验」自定义节点，演示数据通过 createDemoCustomExecutors() 注册 demo.verifySupplier 方法；页面加载后自定义节点自动执行并将结果写入 supplierRisk。
• 如果本机已有旧版演示存档，可点击侧栏「重置演示数据」载入含自定义节点的五条模板。

自定义节点（扩展点）

自定义节点类型为 custom，可在流程设计器的节点面板中添加，配置项包括：

• HTTP 请求：url、method、headers、body、timeoutMs；支持 {{formVariable}} 与 {{object.field}} 变量插值。
• 已注册方法：填写 methodKey，由宿主在 customExecutors 中注册；方法返回 JSON 即节点结果。
• resultVariable：执行成功后写入流程变量；HTTP 结果结构为 { status, ok, headers, data }。
• onError：terminate 终止流程并记录异常，或 continue 记录失败任务后继续流转。

const customExecutors = {
  async 'crm.verifySupplier'({ variables, signal }) {
    const response = await fetch('/api/crm/verify', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ name: variables.supplierName }),
      signal
    })
    if (!response.ok) throw new Error(`CRM 校验失败：${response.status}`)
    return response.json()
  }
}

<FlowCenter :custom-executors="customExecutors" />

运行时采用异步 Service Task 方式：进入自定义节点后生成 kind: 'custom' 的系统任务并阻塞当前 token；宿主读取 runtime.getPendingCustomTasks()，执行 executeCustomNode(config, { variables, executors }) 后调用：

runtime.completeCustomTask(taskId, {
  success: true,
  result: { riskLevel: 'low' },
  durationMs: 420
})

失败时传 success: false, error，节点会按 onError 策略终止或继续。gbflowengine/core 直接导出 executeCustomNode、createCustomNodeConfig、normalizeCustomNodeConfig、validateCustomNodeConfig 和 interpolateCustomTemplate，可在无 UI 的宿主中复用。

安全边界：浏览器直连 HTTP 受 CORS 限制，生产环境建议通过企业网关 / 白名单 / 服务端代理；不要在节点配置中存放密钥，敏感凭据应通过网关或已注册方法注入。HTTP 响应与自定义方法返回结果限制在 200KB，并支持超时取消。内置 FlowTestPanel 是轻量联调面板，不会自动执行自定义节点；完整 OA 工作台会自动执行。

验收口径

• 首页首屏覆盖待办、超时、常用入口与全局搜索；
• 从模板到提交不超过 3 步，发起页同时展示表单与路径预测；
• 高频审批动作不超过 2 次点击，支持连续办理与批量同意；
• 所有审批、自定义节点执行与管理员干预可在流程轨迹 / 审计日志中追溯；
• 自定义节点支持 HTTP / 已注册方法、结果变量与失败策略，且执行结果可在轨迹中查看；
• 桌面与移动端使用同一状态字典与流程名称。

取舍说明

• 效率 vs 可追溯：高频任务默认连续办理与批量同意，但所有动作仍逐条写入引擎轨迹；批量操作只允许「同意」，退回与转办必须逐件处理。
• 信息精简 vs 合规留痕：审批首屏突出关键字段，完整表单与材料可展开；敏感附件与意见按参与关系过滤，查看行为写入审计。
• 批量处理 vs 单件审慎：批量入口显式标注影响范围，拒绝动作强依赖节点策略与原因说明，避免误操作。

seedInstances 仅在本机还没有新 OA 实例存档时生效；重置演示数据会重新播种。

安装

npm install gbflowengine gbformdesign element-plus vue

gbformdesign 是 peerDependencies：编排层组合它，但引擎本身不打包表单设计器。流程画布已内置在引擎 visual 层。

使用

<template>
  <FlowDefinitionDesigner ref="designer" v-model="definition" file-name="purchase" />
</template>

<script setup>
import { ref } from 'vue'
import { FlowDefinitionDesigner } from 'gbflowengine'
import 'gbflowengine/style.css'
import 'gbformdesign/style.css'

const definition = ref(null)
</script>

只取其中一段

import { createDefinition, validateDefinition, predictWorkflow, FlowRuntime } from 'gbflowengine/core'
import { FlowCanvas, ScWorkflow } from 'gbflowengine/visual'
import { FlowDefinitionDesigner } from 'gbflowengine/definition'

gbflowengine/core 不加载 Vue / Element Plus（表单 schema 走 gbformdesign/core headless 入口），可在 worker 或 Node 中运行；visual / definition / center 才需要 Vue 组件运行时。

运行时 API

import { createFlowRuntime } from 'gbflowengine/core'

const runtime = createFlowRuntime({ workflow, context })
runtime.start(formData, initiator)
runtime.approve(taskId, { user, comment })
runtime.reject(taskId, { user, comment })
runtime.transfer(taskId, { user, toUser, comment })
runtime.addSign(taskId, { user, toUser, comment }) // 追加审批人，不改变会签/或签规则
runtime.resubmit(submitTaskId, { user, data })     // 退回发起人后修改表单再提交
runtime.revoke({ user: initiator, reason })        // 发起人撤回
runtime.cancel(reason)                             // 管理员终止
runtime.getPendingCustomTasks()                    // 待执行的自定义系统任务
runtime.completeCustomTask(taskId, { success, result, error }) // 宿主完成自定义节点
runtime.tick(Date.now())                           // 补算超时任务

approve / reject / transfer / addSign / resubmit 都会校验操作人身份，未传 user 会直接抛错。getState() 返回可序列化快照，createFlowRuntime({ state }) 可恢复实例。

FlowDefinitionDesigner

| prop | 类型 | 默认值 | 说明 | | --- | --- | --- | --- | | modelValue | Object | null | 流程定义（workflow / form / meta） | | formVariables | Array | [] | 外部表单变量；缺省时由定义里的表单推导 | | readonly | Boolean | false | 只读 | | adapters | Object | {} | 人员/组织选择器数据适配 | | meta | Object | {} | 流程元信息 | | fileName | String | flow | 导出文件名前缀 | | defaultTab | String | basic | 默认页签：basic / form / flow | | showToolbar | Boolean | true | 是否显示画布工具栏 | | autoEnsureEnd | Boolean | true | 自动补结束节点 |

方法：getDefinition()、getWorkflow()、importJSON(input)、exportJSON(space)、downloadWorkflow()、validate()、saveAsPng()、zoomIn() / zoomOut() / resetZoom()。
事件：update:modelValue、change、import、export、validate。

测试模式：FlowTestPanel（嵌入用）

除了完整的 OA 工作台，包内仍提供轻量的 FlowTestPanel，方便嵌入到自己的页面做流程联调。演示站点不再单独提供纯画布入口。

<FlowTestPanel
  :definition="definition"
  :initial-instances="demoInstances"
  :users="users"
  :departments="departments"
  :roles="roles"
  @manage-users="userDrawer = true"
/>
<UserConfigDrawer v-model="userDrawer" :users="users" :departments="departments" :roles="roles" @save="applyOrg" />

能力：发起流程、实例管理、全局待办与抄送、同意 / 拒绝 / 转交、撤回与重新提交、超时自动处理、流程图与轨迹、人员/组织配置、浏览器持久化。

mock.js 里自带 mockUsers / mockDepartments / mockRoles 与 createMockAdapters()、createTestRuntime()。

开发

npm run dev         # demo，http://127.0.0.1:5177
npm run build       # 库产物 -> dist/
npm run build:demo  # demo 静态站 -> dist-demo/
npm run test        # vitest（内核 + 编排层 + 工作台模型）

License

MIT