@guodun/flow-design

Vue 3 流程设计器组件库，提供 KFlowDesigner 等组件；发布形态为 ESM + CJS + 独立 TypeScript 声明（preserveModules 按需目录）。

安装

pnpm add @guodun/flow-design
# 或
npm install @guodun/flow-design
# 或
yarn add @guodun/flow-design

Peer 依赖：vue ^3.5（需自行安装或由宿主项目已有 Vue 满足）。

@guodun/theme-chalk 等依赖会随本包安装；具体版本以发布到 npm 的 package.json 的 dependencies 为准。

样式

从 @guodun/flow-design 主入口或按需子路径引入组件时，对应 JS 会带上对合并样式 theme-chalk/flow-design.css 的引用，宿主打包器（Vite / Webpack 等）会一并处理。

若仍出现无样式（例如非常规打包或 SSR 仅执行部分入口），可在应用入口显式增加一行：

import '@guodun/flow-design/style.css'

破坏性变更（KIcon / 图标字体）：自本版本起，图标根类名由通用名 iconfont 改为 guodun-flow-iconfont，font-family 为 guodun-flow-iconfont，避免与宿主项目里其它 iconfont 样式冲突。若你曾通过全局选择器覆盖 .iconfont 来自定义 KIcon 外观，请改为针对 .guodun-flow-iconfont。

流程节点标题栏的删除按钮使用 内联 SVG，不依赖字体图标，避免删除图标在第三方环境中显示错乱。

使用

方式 A：全局注册

默认导出为 Vue 插件，会在应用内注册 KFlowDesigner：

import { createApp } from 'vue'
import FlowDesign from '@guodun/flow-design'
import App from './App.vue'

const app = createApp(App)
app.use(FlowDesign)
app.mount('#app')

模板中可直接使用 <KFlowDesigner />（无需再 import 组件）。

方式 B：按需具名导入

未使用全局注册时，可只引入所需组件（与方式 A 二选一即可）：

import { KFlowDesigner } from '@guodun/flow-design'

在选项式 API 中注册到 components，或在 <script setup> 中导入后直接在模板中使用 KFlowDesigner。

方式 C：按需自动引入（推荐）

使用 unplugin-vue-components 与 GuodunResolver，按模板中的标签（如 KFlowDesigner、KIcon、KTooltip）自动解析子路径并引入，无需手写组件 import：

import Components from 'unplugin-vue-components/vite'
import { GuodunResolver } from '@guodun/flow-design/resolver'

export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [GuodunResolver()],
    }),
  ],
})

从 npm 安装本包 后，一般 不需要 再配置 resolve.alias：package.json 的 exports 已暴露 @guodun/flow-design/es/*，与解析器生成的路径一致。若在 monorepo 内指向源码开发，可按需为 @guodun/flow-design / @guodun/flow-design/es 配置别名（参见本仓库 Playground）。

最小示例（<script setup> + 类型）

以下假定已通过方式 A / C 使模板中可使用 KFlowDesigner：

<script setup lang="ts">
import type { FlowDesignerExpose, INode } from '@guodun/flow-design'
import { ref } from 'vue'

const flowDesignerRef = ref<FlowDesignerExpose | null>(null)
const initData: INode[] = []

function handleClickNode(nodeData: INode) {
  console.log('click-node', nodeData)
}

function getData() {
  const list = flowDesignerRef.value?.getNodeList?.()
  console.log('node list', list)
}
</script>

<template>
  <KFlowDesigner
    ref="flowDesignerRef"
    :init-node-list="initData"
    @click-node="handleClickNode"
  />
</template>

业务中可为 :function-node-config 传入功能节点配置数组（NodeConfigType[]），以支持添加审批人、抄送人等节点；详见类型导出与 monorepo 内 Playground 示例。

本库组件 不依赖 ant-design-vue；若参考本仓库 Playground 页面，可自行安装 Ant Design Vue 作为页面壳与按钮等 UI。

开发

在 monorepo 根目录：

pnpm install
pnpm --filter @guodun/flow-design build

构建产物与导出

• dist/es：ESM（import）

• dist/lib：CommonJS（require，扩展名 .cjs）

• dist/types：TypeScript 声明（与格式无关，仅一份）

• 主入口：@guodun/flow-design（package.json 的 import / require / types）

• ESM 子路径：@guodun/flow-design/es/*

• CJS 子路径：@guodun/flow-design/lib/*

• Resolver：@guodun/flow-design/resolver

• 合并样式（可选显式引入）：@guodun/flow-design/style.css → dist/es/theme-chalk/flow-design.css