Flow 节点类型

Flow 提供了多种内置节点类型，满足不同的业务场景需求。

节点类型概述

Flow 内置以下节点类型：

类型	说明	适用场景
`input`	输入节点	流程起点、数据入口
`output`	输出节点	流程终点、数据出口
`default`	默认节点	通用处理节点
`diamond`	决策节点	菱形判断节点 (四向)
`database`	数据节点	表示数据库、存储
`custom`	自定义节点	业务定制节点
`group`	分组节点	节点容器、区域划分

基础节点类型

输入节点

默认节点

判断节点

数据库

输出节点

基础节点类型

节点数据结构

interface Node<Data = NodeData> {
  id: string
  type: string
  position: { x: number; y: number }
  data: Data
  style?: NodeStyle
  class?: string
  width?: number
  height?: number
  draggable?: boolean // 是否可拖拽
  selectable?: boolean // 是否可选中
  connectable?: boolean // 是否可连接
  resizable?: boolean // 是否显示缩放手柄
  deletable?: boolean // 是否可点击删除
  selected?: boolean
  dragging?: boolean
  hidden?: boolean
  parentId?: string // 父节点 ID
  zIndex?: number
  extent?: 'parent' // 移动范围限制
  handleBounds?: any // 自定义连接点集合
}

输入节点 (input)

输入节点只有一个右侧连接点，适用于流程起点。

const node = {
  id: 'node-1',
  type: 'input',
  position: { x: 100, y: 100 },
  data: {
    label: '数据输入',
    icon: 'upload'
  }
}

输出节点 (output)

输出节点只有一个左侧连接点，适用于流程终点。

const node = {
  id: 'node-2',
  type: 'output',
  position: { x: 500, y: 100 },
  data: {
    label: '结果输出',
    icon: 'download'
  }
}

默认节点 (default)

默认节点有左侧和右侧连接点，适用于中间处理节点。

const node = {
  id: 'node-3',
  type: 'default',
  position: { x: 300, y: 100 },
  data: {
    label: '处理节点',
    description: '执行某个操作'
  }
}

决策节点 (diamond)

菱形节点是标准的流程判断节点，拥有四个连接点（上下左右均可连接）。

const node = {
  id: 'node-4',
  type: 'diamond',
  position: { x: 300, y: 300 },
  data: {
    label: '是否通过'
  }
}

数据节点 (database)

圆柱形节点，非常适合绘制架构图表示服务端数据存储系统。

const node = {
  id: 'node-5',
  type: 'database',
  position: { x: 100, y: 300 },
  data: {
    label: 'MySQL 数据库'
  }
}

分组节点 (Group)

分组节点用于将多个节点组合在一起，常用于表示流程中的阶段或区域。

阶段一

开始

处理

阶段二

处理

结束

分组节点（Group）

自定义节点

通过 custom 类型和自定义组件，可以创建完全符合业务需求的节点。

// 定义自定义节点数据
const customNode = {
  id: 'custom-1',
  type: 'custom',
  position: { x: 100, y: 100 },
  data: {
    label: '自定义节点',
    icon: 'settings',
    status: 'success',
    actions: ['编辑', '删除']
  }
}

创建自定义节点组件

<template>
  <div class="custom-node" :class="{ selected: node.selected }">
    <div class="custom-node__header">
      <span class="custom-node__icon">{{ node.data.icon }}</span>
      <span class="custom-node__label">{{ node.data.label }}</span>
    </div>
    <div class="custom-node__body">
      <span :class="['status', node.data.status]">{{ node.data.statusText }}</span>
    </div>
  </div>
  <\/template>

  <script setup lang="ts">
    import type { Node } from '@yh-ui/flow'
    defineProps<{
      node: Node
    }>()
  </script>

  <style scoped>
    .custom-node {
      padding: 12px;
      border-radius: 8px;
      background: white;
      border: 1px solid #dcdfe6;
      min-width: 150px;
    }
    .custom-node.selected {
      border-color: #409eff;
      box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
    }
  </style>
</template>

节点 Handle（连接点）

每个节点都有预设的连接点位置：

位置	说明
left	左侧连接点
right	右侧连接点
top	顶部连接点
bottom	底部连接点

四向连接点

四向连接点（Handles）

节点属性

属性	类型	说明
id	string	节点唯一标识
type	string	节点类型
position	{ x: number, y: number }	节点位置
data	NodeData	节点数据
width / height	number	节点尺寸
draggable	boolean	是否允许拖拽 (默认 true)
selectable	boolean	是否允许选中 (默认 true)
connectable	boolean	是否允许连线 (默认 true)
selected	boolean	是否选中
dragging	boolean	是否正在拖拽
hidden	boolean	是否隐藏
parentId	string	父节点 ID（用于分组）
zIndex	number	层级
handleBounds	object	连接点动态配置

下一个

• 连线类型 - 了解不同连线类型
• 交互操作 - 了解更多交互功能
• 对齐与分布 - 使用对齐和分布功能