3. 可视化编辑器架构：前端拖拽引擎、后端流程引擎、数据模型（JSON/XML）概述
审批工作流的可视化配置能力，依赖于一套清晰的分层架构。本章将从前端交互、后端执行、数据持久三个维度，拆解可视化编辑器的核心组成。理解这三层如何协作，是设计可扩展、高可用的审批流程系统的前提。
3.1 三层架构总览
可视化编辑器采用经典的前后端分离架构，通过标准化的数据模型进行通信。前端负责“所见即所得”的拖拽编排，后端负责“流程逻辑”的解析与驱动，数据模型则作为两者之间的契约。
架构要点：前端只关心“如何画”和“如何交互”，后端只关心“如何执行”和“如何流转”。数据模型是两者之间的“通用语言”，任何一方的变更都必须以数据模型的版本兼容为前提。
3.2 前端拖拽引擎
前端拖拽引擎是用户直接操作的界面层，负责将抽象的流程定义转化为可视化的节点与连线。其核心能力包括：
- 画布管理：提供无限缩放、平移的编辑区域，支持网格吸附与对齐辅助线。
- 节点拖拽：从左侧组件面板拖拽审批节点（如“部门经理审批”、“财务会签”）到画布，自动生成对应的图形元素。
- 连线交互：支持从节点输出端口拖拽连线到另一节点的输入端口，自动生成有向连线，并支持条件分支标签。
- 属性面板：点击节点或连线时，右侧弹出属性编辑区，可配置审批人、超时策略、驳回规则等业务参数。
- 实时校验：在拖拽过程中即时检测流程合法性（如是否存在孤立节点、循环依赖），并给出视觉反馈。
| 功能模块 | 技术实现要点 | 典型交互反馈 |
|---|---|---|
| 画布 | 基于 SVG 或 Canvas 的虚拟滚动 | 鼠标滚轮缩放、拖拽平移 |
| 节点 | 自定义组件 + 拖拽事件监听 | 拖拽时半透明跟随、释放后自动对齐 |
| 连线 | 贝塞尔曲线 + 锚点吸附算法 | 拖拽时实时预览曲线、松开后自动吸附 |
| 属性面板 | 动态表单渲染引擎 | 选中节点后右侧面板联动更新 |
3.3 后端流程引擎
后端流程引擎是审批工作流的“大脑”，负责将前端生成的流程定义转化为可执行的审批实例。其核心职责包括：
- 流程解析：将 JSON/XML 格式的流程定义加载为内存中的流程模型，校验节点与连线的合法性。
- 状态机管理：维护每个审批实例的当前状态（如“待提交”、“审批中”、“已通过”、“已驳回”），并驱动状态迁移。
- 任务分发：根据节点配置的审批人规则（如“部门主管”、“指定角色”、“动态候选人”），生成待办任务并推送给对应人员。
- 审批路由：根据审批结果（通过/驳回/转交）和连线条件，决定下一步流向哪个节点。
- 历史归档：记录每个审批节点的操作时间、操作人、审批意见，形成完整的审批轨迹。
关键设计原则：后端流程引擎必须与前端数据模型解耦。引擎只依赖标准化的流程定义数据，不关心前端如何渲染。这使得同一套流程引擎可以同时服务于 Web 端、移动端甚至 API 调用。
3.4 数据模型：JSON 与 XML 方案对比
数据模型是连接前端与后端的桥梁。在企业级采购系统中，JSON 和 XML 是两种主流的流程定义格式。下表对比了两种方案在审批工作流场景下的适用性：
| 对比维度 | JSON 方案 | XML 方案 |
|---|---|---|
| 可读性 | 结构紧凑，易于阅读和调试 | 标签冗余，可读性较差 |
| Schema 校验 | JSON Schema 成熟，工具链丰富 | XSD 校验严格，但配置复杂 |
| 前端解析性能 | 原生支持，解析速度快 | 需要 DOM 解析器，性能略低 |
| 命名空间支持 | 不支持原生命名空间 | 原生支持，适合复杂系统集成 |
| 企业级应用场景 | 轻量级、微服务架构首选 | 传统 ERP、遗留系统集成常用 |
以下是一个简化的审批流程 JSON 定义示例，展示了一个“采购申请审批”流程的核心结构：
{
"processId": "PR_2025_001",
"processName": "采购申请审批",
"version": "1.0",
"nodes": [
{
"nodeId": "start_001",
"type": "start",
"label": "开始",
"position": { "x": 100, "y": 200 }
},
{
"nodeId": "approve_dept",
"type": "approval",
"label": "部门经理审批",
"assignee": "dept_manager",
"timeout": 48,
"position": { "x": 300, "y": 200 }
},
{
"nodeId": "approve_finance",
"type": "approval",
"label": "财务审批",
"assignee": "finance_role",
"timeout": 24,
"position": { "x": 500, "y": 200 }
},
{
"nodeId": "end_001",
"type": "end",
"label": "结束",
"position": { "x": 700, "y": 200 }
}
],
"edges": [
{ "from": "start_001", "to": "approve_dept", "condition": "" },
{ "from": "approve_dept", "to": "approve_finance", "condition": "approved" },
{ "from": "approve_dept", "to": "end_001", "condition": "rejected" },
{ "from": "approve_finance", "to": "end_001", "condition": "" }
]
}3.5 三层协作流程
一个完整的审批流程从设计到执行，经历以下协作步骤：
- 前端设计：用户在画布上拖拽节点、绘制连线，通过属性面板配置审批规则。前端实时维护内存中的流程定义对象。
- 序列化保存：点击“保存”时，前端将内存对象序列化为 JSON/XML 字符串，通过 API 发送至后端存储。
- 后端校验与存储：后端接收数据后，进行 Schema 校验和业务规则校验（如检查是否存在未连线的节点），通过后存入数据库。
- 流程实例化：当用户提交审批单时，后端加载对应的流程定义，创建流程实例，并推进至第一个审批节点。
- 运行时反馈：后端将实例状态、待办任务等信息推送给前端，前端实时更新审批进度视图。
常见设计误区：将前端拖拽引擎与后端流程引擎耦合过紧。例如，前端直接调用后端 API 来校验连线逻辑，会导致每次拖拽操作都产生网络延迟。正确的做法是：前端只做基础的结构校验（如节点是否完整），复杂的业务规则校验（如审批人权限）留给后端在保存或实例化时执行。
3.6 架构选型建议
针对企业级采购系统的审批工作流场景，推荐以下技术选型方向：
- 前端拖拽引擎：优先选择基于 React Flow 或 Vue Flow 的开源方案，它们提供了成熟的节点自定义、连线交互和插件机制，可大幅降低开发成本。
- 后端流程引擎：对于复杂的企业级场景，建议采用 Flowable 或 Camunda 等 BPMN 2.0 兼容引擎；对于轻量级场景，可基于状态机模式自研。
- 数据模型格式：新系统优先选择 JSON 格式，配合 JSON Schema 进行校验；若需与遗留 ERP 系统集成，可考虑 XML 格式并建立双向转换适配器。
通过清晰的三层架构设计，采购管理平台的审批工作流编辑器能够实现“前端灵活编排、后端稳定执行、数据模型统一管控”的目标，为后续的流程模板复用、版本管理和多租户扩展奠定坚实基础。