FlowBoard Vue

一个基于 AntV X6 的轻量级、配置驱动的 Vue 3 流程看板组件。

特性

• 🚀 配置驱动: 通过简单的 JSON 数据定义流程图。
• 🎨 状态映射: 轻松定义不同状态下的节点/连线样式。
• 📐 自动布局: 内置 Dagre 自动布局算法。
• � 交互增强: 支持鼠标中键平移、Ctrl+滚轮缩放、左键框选放大 (Rubberband Zoom)。
• �📱 响应式: 自动适应容器大小，支持缩放和平移。
• 🔌 TypeScript: 完整的类型定义支持。

安装

npm install flowboard-vue element-plus @antv/x6 @antv/layout

快速开始

<template>
  <div style="height: 600px; width: 100%;">
    <FlowBoard 
      :data="flowData" 
      :config="flowConfig"
      :status-map="statusMap"
      @node:click="handleNodeClick"
    />
  </div>
</template>

<script setup lang="ts">
import { FlowBoard, FlowData, FlowConfig } from 'flowboard-vue';
import 'flowboard-vue/style.css'; // 如果有样式文件
import 'element-plus/dist/index.css'; // 引入 Element Plus 样式

const flowData = {
  nodes: [
    { id: '1', type: 'start', label: '开始', status: 'done' },
    { id: '2', type: 'task', label: '处理中', status: 'running' },
    { id: '3', type: 'end', label: '结束', status: 'pending' },
  ],
  edges: [
    { source: '1', target: '2', status: 'done' },
    { source: '2', target: '3' },
  ]
};

const flowConfig: FlowConfig = {
  layout: { enable: true, type: 'dagre', direction: 'LR' },
  canvas: { 
    fitView: true,
    rubberbandZoom: true, // 启用左键框选放大
    pannable: true,       // 启用平移 (Ctrl + 左键 或 中键)
    zoomable: true        // 启用缩放
  }
};

const statusMap = {
  done: { color: '#67C23A', bgColor: '#f0f9eb' },
  running: { color: '#409EFF', animated: true },
};

const handleNodeClick = (node) => {
  console.log('点击:', node);
};
</script>

API

Props

| Name | Type | Default | Description | |------|------|---------|-------------| | data | FlowData | required | 流程图数据 (nodes, edges) | | config | FlowConfig | {} | 全局配置 (layout, canvas) | | statusMap | StatusMap | {} | 状态样式映射表 | | width | string | '100%' | 容器宽度 | | height | string | '100%' | 容器高度 | | showControls | boolean | true | 是否显示内置控制栏 |

Configuration (FlowConfig)

interface FlowConfig {
  layout?: {
    enable: boolean;       // 是否启用自动布局
    type: 'dagre' | 'grid';// 布局类型
    direction?: 'LR' | 'TB';// 布局方向 (LR: 从左到右, TB: 从上到下)
    rankSep?: number;      // 层级间距
    nodeSep?: number;      // 节点间距
  };
  canvas?: {
    readonly?: boolean;      // 是否只读 (禁止拖拽节点)
    zoomable?: boolean;      // 是否可缩放 (Ctrl + 滚轮)
    pannable?: boolean;      // 是否可平移 (Ctrl + 左键拖拽 或 中键拖拽)
    fitView?: boolean;       // 是否初始化时自适应内容
    grid?: boolean;          // 是否显示网格
    minZoom?: number;        // 最小缩放比例
    maxZoom?: number;        // 最大缩放比例
    selection?: boolean;     // 是否启用选中功能 (需按住 Ctrl/Meta)
    rubberband?: boolean;    // 是否启用框选节点 (需 selection=true)
    rubberbandZoom?: boolean;// 是否启用左键框选放大 (默认关闭)
  };
  nodeShapes?: Record<string, any>; // 自定义节点图形配置
}

Events

• node:click: (node: FlowNode) => void
• edge:click: (edge: FlowEdge) => void
• ready: (graph: Graph) => void

Slots

• controls: 自定义控制栏
• node-tooltip: 自定义节点提示

开发

1. 安装依赖: npm install
2. 启动演示: npm run dev
3. 打包库: npm run build