@jxyszb/warm-flow-designer

基于 Dromara Warm-Flow Vue 设计器改造的 Vue 3 流程设计器组件库，提供经典模型、仿钉钉模型、只读流程图、实例状态图、UI 适配层和可注入的数据层。

本包只负责流程设计器能力，不包含流程定义列表、发布、发起、待办、已办等业务页面。每个项目应自行实现接口模块和 src/plugins/warmFlowDesigner.js 集成文件。

环境要求

• Vue ^3.3.9
• Pinia ^2.1.7
• Vue Router ^4.2.5
• @logicflow/core ^2.1.11
• @logicflow/extension ^2.1.15
• 至少安装一种 UI 库：Element Plus、Ant Design Vue 或 Naive UI

安装

Element Plus 项目：

npm install @jxyszb/warm-flow-designer @logicflow/core @logicflow/extension

应用初始化

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import {
  WarmFlowDesigner,
  setDataProvider,
  setUiAdapter
} from '@jxyszb/warm-flow-designer'
import { elementPlusAdapter } from '@jxyszb/warm-flow-designer/element-plus'
import '@jxyszb/warm-flow-designer/style.css'

import App from './App.vue'
import { createProjectProvider } from './plugins/warmFlowDesigner'

const app = createApp(App)

setUiAdapter(elementPlusAdapter)
setDataProvider(createProjectProvider(), { strict: true })

app.use(ElementPlus)
app.use(WarmFlowDesigner)
app.mount('#app')

必须在渲染 FlowDesigner 前调用 setUiAdapter。推荐所有业务项目开启严格 DataProvider，防止漏配接口后静默访问组件包的默认 Warm-Flow 地址。

DataProvider

设计器使用以下数据能力：

interface DataProvider {
  config(): Promise<any>
  saveJson(data: any, onlyNodeSkip?: boolean): Promise<any>
  queryDef(id?: string | number): Promise<any>
  queryFlowChart(id: string | number): Promise<any>
  handlerType(): Promise<any>
  handlerResult(query?: Record<string, any>): Promise<any>
  handlerFeedback(query?: Record<string, any>): Promise<any>
  handlerDict(): Promise<any>
  publishedList(): Promise<any>
  nodeExt(): Promise<any>
  listenerList(): Promise<any>
}

严格模式示例：

setDataProvider(
  {
    config: getBaseConfig,
    queryDef: (id) => queryDefJson({ id: String(id || '') }),
    queryFlowChart: (id) => getFlowChart({ id: String(id) }),
    saveJson: saveFlowJson,
    handlerType: getHandlerTypeTab,
    handlerResult: queryHandlerPage,
    handlerFeedback: queryHandlerFeedback,
    handlerDict: queryDesignDict,
    publishedList: async () => ({ code: 200, data: [] }),
    nodeExt: getNodeExtProp,
    listenerList: getListenerList
  },
  { strict: true }
)

严格模式下调用未配置方法会得到类似错误：

[WarmFlowDesigner] DataProvider.listenerList 未配置

兼容旧版集成时可以不传第二个参数，未配置方法会回退到内置 HTTP Provider。新项目不建议依赖该回退行为。

设计流程

<template>
  <FlowDesigner
    ref="designerRef"
    :initial-json="definition"
    :only-design-show="true"
    :show-save-button="false"
    @change="handleChange"
  />
</template>

<script setup>
import { ref } from 'vue'
import { FlowDesigner } from '@jxyszb/warm-flow-designer'

const designerRef = ref(null)
const definition = ref(null)

function handleChange() {
  // 标记宿主页面存在未保存修改
}

function getSavePayload() {
  const validation = designerRef.value.validateStructure()
  if (!validation.valid) throw new Error(validation.errors.join('；'))
  return JSON.parse(designerRef.value.getFlowJson())
}
</script>

只读流程图与实例状态图

<FlowDesigner
  :initial-json="flowChart"
  :only-design-show="true"
  :disabled="true"
/>

只读状态只展示缩小、自适应、放大和下载流程图。实例节点支持以下 status：

• "0"：未办理
• "1"：待办理
• "2"：已办理

流程根对象可通过 chartStatusColor 指定三种 RGB 颜色，顺序为：已办理、待办理、未办理。

UI 适配器

Element Plus：

import { elementPlusAdapter } from '@jxyszb/warm-flow-designer/element-plus'

Ant Design Vue：

import { antdvAdapter } from '@jxyszb/warm-flow-designer/antdv'

Naive UI：

import { naiveAdapter } from '@jxyszb/warm-flow-designer/naive'

本地开发

npm install
npm run typecheck
npm run build
npm test
npm run pack:check

完整发布门禁：

npm run quality

typecheck 检查的是 npm 包公开类型与模拟下游项目的真实导入。运行时源码由四个 Vite 生产构建覆盖，二者都通过才允许发布。

本地项目联调可以临时使用：

{
  "@jxyszb/warm-flow-designer": "file:D:/framework_warehouse/myPackages/warm-flow-designer"
}

正式业务项目应安装已发布版本，避免构建结果依赖未发布的本地源码。

迁移

从 @dromara/warm-flow-designer 或本地 packages/warm-flow-designer 迁移，请阅读 MIGRATION.md。

开源说明

本项目基于 Dromara Warm-Flow 相关前端设计器改造，沿用 MIT License。原项目地址：https://gitee.com/dromara/warm-flow。