nkk-flow

nkk-flow

Vue 3 + LogicFlow 审批流画布封装。核心入口是 useFlow，页面只需要提供容器、业务流程 JSON 和可选配置。

安装

npm install nkk-flow @logicflow/core @logicflow/extension @vueuse/core vue

在应用入口引入样式（库的 style.css 已内置 LogicFlow 官方样式 + 主题变量，只需一行）：

import 'nkk-flow/style.css'

基础用法

import { onBeforeUnmount, onMounted, ref } from 'vue'
import { useFlow, type FlowProcessJson, type FlowOptions } from 'nkk-flow'

const graphRef = ref<HTMLElement | null>(null)
let flowApi: ReturnType<typeof useFlow> | null = null

const options: FlowOptions = {
  editable: true,
  tools: ['MiniMap'],
}

onMounted(() => {
  if (!graphRef.value) return
  flowApi = useFlow(graphRef.value, flowJson as FlowProcessJson, options)
})

onBeforeUnmount(() => {
  flowApi?.destroy()
})

<template>
  <div ref="graphRef" style="height: 100%; width: 100%;" />
</template>

主要配置

useFlow(element, flowJson, options?)

editable：是否允许编辑。默认 true。关闭后会隐藏删除、标题编辑、添加节点和添加分支入口。

tools：内置工具白名单，当前支持 zoom、MiniMap。默认空数组（不展示任何工具），按需显式传入，例如 tools: ['zoom', 'MiniMap']。

nodePicker.options：控制点击连线 + 后可添加的节点类型。

nodePicker.nodeFactories：自定义某个类型新增时生成的业务 JSON。

nodeDrawer.orgTree / nodeDrawer.people / nodeDrawer.roles：组织数据由宿主注入，库本身不发任何 HTTP 请求。宿主侧自行从后端拉取后传入，审批人/部门/角色选择器才能显示数据。

nodeDrawer.nodeConfigs：追加或覆盖节点配置抽屉表单。

events：监听节点点击、删除、标题修改、插入、抽屉保存等事件。

配套 API（createFlowApi）

useFlow 是纯画布封装，不内置网络请求；但 nkk-flow 与后端 nkk-kit-flow-web 配套，库内已封装好组织数据 / 表单元数据 / 分类 / 流程定义等接口的路径、参数和数据转换。调用方只需把宿主侧的 http client 注入 createFlowApi，即可拿到现成函数，不必自己写路径和转换逻辑。

import { useFlow, createFlowApi } from 'nkk-flow'
import request from '@/utils/http' // 宿主侧自己的 axios 封装

// 注入 http client，拿到配套 API
const flowApi = createFlowApi(request)

// 一次性获取抽屉所需组织数据（内部完成员工树 → orgTree + people 转换）
const { orgTree, people, roles } = await flowApi.fetchDrawerOrgData()

useFlow(container, flowJson, {
  nodeDrawer: { orgTree, people, roles },
})

createFlowApi(client, options?) 的 options.prefix 默认 /api/flow，对应 nkk-kit-flow-web 的标准部署形态（context-path: /api + flow.api-prefix: /flow）；若宿主改写了 context-path 或 api-prefix，可在此覆盖。

返回的 API 包含：

• fetchDrawerOrgData()：一次性拿到 orgTree / people / roles，直接注入 nodeDrawer
• getFormOptions(sourceType?) / getFormFields(formKey, params?)：表单下拉与字段元数据
• getCategoryTree()：流程分类树
• publishProcess(data) / getProcess(id) / listProcessesByCategory(params?) / enableProcess(id) / disableProcess(id) / updateProcessInfo(id, data) / listProcessVersions(key)：流程定义全生命周期

条件分支节点需要的表单字段元数据，通过 flowApi.setMetaFormFields() 注入：

const flowApi = useFlow(container, flowJson, options)
flowApi.setMetaFormFields(formFieldsFromBackend)

扩展节点配置抽屉

每个节点配置表单独立成组件，组件接收 payload 和 context，并通过 defineExpose 暴露 getPatch()。

<script setup lang="ts">
import type { FlowNodeConfigFormExpose, FlowNodeConfigFormProps } from 'nkk-flow'

const props = defineProps<FlowNodeConfigFormProps>()

function getPatch() {
  return {
    customValue: props.payload.title,
  }
}

defineExpose<FlowNodeConfigFormExpose>({ getPatch })
</script>

注册到 useFlow：

useFlow(container, flowJson, {
  nodeDrawer: {
    nodeConfigs: [
      {
        type: 2,
        kind: 'cc',
        title: '抄送节点',
        description: '配置抄送人员',
        component: CcNodeConfig,
      },
    ],
  },
})

自定义新增节点 JSON

useFlow(container, flowJson, {
  nodePicker: {
    options: [{ type: 2, label: '抄送节点', description: '通知相关人员。' }],
    nodeFactories: {
      2: ({ nextNode, createNodeKey }) => ({
        nodeName: '抄送节点',
        nodeKey: createNodeKey('cc'),
        type: 2,
        nodeAssigneeList: [],
        childNode: nextNode ?? {},
      }),
    },
  },
})

当前内置节点类型

-1：结束

0：发起人

1：审批节点

2：抄送节点

3：条件分支

4：条件路由

5：延迟等待

6：触发器

7：并行路由

8：包容路由

9：自动通过

10：自动拒绝

开发脚本

npm run build
npm run build:lib