@jipu123/roulette-flow

基于 Vue 3、@vue-flow/core 和 elkjs 的工作流编辑组件。

支持：

• 开始 / 结束 / 选择器 / 分流器节点
• 点击添加、拖拽添加
• 连线创建、更新、删除
• 节点删除
• 撤销 / 反撤销
• 自动布局
• 视口重置
• 全屏模式
• 导入 / 导出工作流 JSON
• 只读模式

安装

从 npm 安装

bun add @jipu123/roulette-flow

或：

npm install @jipu123/roulette-flow

从 Git 安装

bun add git+ssh://[email protected]/jipu123/roulette-flow.git#v0.1.0

使用

<script setup lang="ts">
import { computed, ref } from 'vue'
import { WorkflowCard } from '@jipu123/roulette-flow'
import '@jipu123/roulette-flow/style.css'
import type { WorkflowCardExpose, WorkflowDocument } from '@jipu123/roulette-flow'

const workflowCard = ref<WorkflowCardExpose | null>(null)
const isLocked = ref(false)
const lockLabel = computed(() => (isLocked.value ? '解锁' : '锁定'))

const items = [
  { id: 1, label: '事件 A', weight: 1, color: '#10b981' },
  { id: 2, label: '事件 B', weight: 1, color: '#0ea5e9' },
]

const handleExport = () => {
  const document = workflowCard.value?.exportWorkflow()
  if (!document) return

  console.log(document)
}

const handleImport = (document: WorkflowDocument) => {
  workflowCard.value?.importWorkflow(document)
}
</script>

<template>
  <button @click="isLocked = !isLocked">{{ lockLabel }}</button>
  <button @click="handleExport">导出</button>

  <WorkflowCard
    ref="workflowCard"
    :items="items"
    title="Flow"
    :is-locked="isLocked"
  />
</template>

样式

使用组件时需要显式引入样式：

import '@jipu123/roulette-flow/style.css'

导出

包入口导出：

• WorkflowCard
• WorkflowCardExpose
• WorkflowDocument
• WorkflowNodeData
• RouletteItem
• SelectorNodeData
• SplitterNodeData

Props

WorkflowCard 支持以下 props：

{
  items: Array<{
    id: number
    label: string
    weight: number
    color: string
  }>
  title: string
  compact?: boolean
  isLocked?: boolean
}

items

当前主要用于触发基础节点重建与演示数据透传。

title

业务标题字段，当前版本保留在入口参数中。

compact

紧凑模式：

• 默认缩放更小
• 画布高度更紧凑

isLocked

只读模式：

• 隐藏组件库
• 禁止新增节点
• 禁止拖动节点
• 禁止创建、修改、删除连线
• 禁止删除节点
• 禁止节点内部表单编辑
• 显示只读模式标识

Expose

组件通过 ref 暴露以下方法：

exportWorkflow: () => {
  nodes: Node[]
  edges: Edge[]
}

importWorkflow: (document: {
  nodes: Node[]
  edges: Edge[]
}) => void

导出工作流

const document = workflowCard.value?.exportWorkflow()
if (!document) return

导入工作流

workflowCard.value?.importWorkflow(document)

工作流数据结构

{
  nodes: Node[]
  edges: Edge[]
}

选择器节点数据

{
  isRandom: boolean
  eventRows: string[]
}

分流器节点数据

{
  isRandom: boolean
  branchRows: string[]
}

交互说明

添加节点

• 小屏：点击组件库项添加
• 大屏：可拖拽到画布，也可点击添加

删除节点

• 大屏：节点右键
• 小屏：节点长按
• 开始节点、结束节点不会被删除
• 删除节点时会同时删除关联连线

删除连线

• 大屏：连线右键
• 小屏：连线长按

自动布局

使用 elkjs 的 layered 布局算法，方向为从左到右。

撤销 / 反撤销

对节点和边的结构修改使用快照方式管理。

开发

bun install
bun run dev

构建：

bun run build