FlowNode 流程节点组件

提供节点的基本结构和样式，可扩展为具体的业务节点。

基础用法

⚙️数据处理

处理输入数据并输出结果

<template>
  <x-flow-node
    :title="'数据处理'"
    :description="'处理输入数据并输出结果'"
    :icon="'⚙️'"
    :color="'primary'"
    :show-input-handle="true"
    :show-output-handle="true"
    @click="handleClick"
    @dblclick="handleDblClick"
  />
</template>

<script setup>
import { FlowNode } from '@xto/flow'

const handleClick = (event) => {
  console.log('点击节点')
}

const handleDblClick = (event) => {
  console.log('双击节点')
}
</script>

颜色主题

支持多种颜色主题。

默认

🔵主要

✅成功

⚠️警告

❌危险

ℹ️信息

<template>
  <div style="display: flex; gap: 16px;">
    <!-- 默认 -->
    <x-flow-node :title="'默认'" :color="'default'" />
    
    <!-- 主要 -->
    <x-flow-node :title="'主要'" :color="'primary'" :icon="'🔵'" />
    
    <!-- 成功 -->
    <x-flow-node :title="'成功'" :color="'success'" :icon="'✅'" />
    
    <!-- 警告 -->
    <x-flow-node :title="'警告'" :color="'warning'" :icon="'⚠️'" />
    
    <!-- 危险 -->
    <x-flow-node :title="'危险'" :color="'danger'" :icon="'❌'" />
    
    <!-- 信息 -->
    <x-flow-node :title="'信息'" :color="'info'" :icon="'ℹ️'" />
  </div>
</template>

端口控制

控制输入输出端口的显示。

<template>
  <!-- 只有输入端口 -->
  <x-flow-node :title="'终点'" :show-output-handle="false" />

  <!-- 只有输出端口 -->
  <x-flow-node :title="'起点'" :show-input-handle="false" />

  <!-- 无端口 -->
  <x-flow-node :title="'独立节点'" :show-input-handle="false" :show-output-handle="false" />
</template>

自定义内容

使用插槽自定义节点内容。

<template>
  <x-flow-node :title="'AI 处理'">
    <!-- 默认插槽 -->
    <div class="custom-content">
      <p>模型: GPT-4</p>
      <p>温度: 0.7</p>
    </div>
    
    <!-- 底部插槽 -->
    <template #footer>
      <div class="node-footer">
        <span>状态: 运行中</span>
      </div>
    </template>
  </x-flow-node>
</template>

禁用状态

禁用节点

<template>
  <x-flow-node :title="'禁用节点'" :disabled="true" />
</template>

自定义数据

<template>
  <x-flow-node
    :title="'自定义节点'"
    :data="{ customProp: 'value', config: { ... } }"
  />
</template>

在 FlowEditor 中使用

FlowNode 通常配合 FlowEditor 使用，作为自定义节点类型。

<template>
  <x-flow-editor :nodes="nodes" :node-types="nodeTypes" />
</template>

<script setup>
import { markRaw } from 'vue'
import { FlowEditor, FlowNode } from '@xto/flow'

// 自定义节点类型
const nodeTypes = {
  custom: markRaw(FlowNode)
}

const nodes = [
  {
    id: '1',
    type: 'custom',
    position: { x: 100, y: 100 },
    data: {
      title: '处理节点',
      description: '数据处理',
      icon: '⚙️',
      color: 'primary'
    }
  }
]
</script>

API

Props

属性	说明	类型	默认值
title	节点标题	string	'节点'
description	节点描述	string	''
icon	节点图标	string	''
color	节点颜色主题	'primary' | 'success' | 'warning' | 'danger' | 'info' | 'default'	'default'
showInputHandle	是否显示输入端口	boolean	true
showOutputHandle	是否显示输出端口	boolean	true
disabled	是否禁用	boolean	false
data	自定义数据	Record<string, any>	{}

Slots

插槽名	说明
default	节点内容
footer	节点底部

Events

事件名	说明
click	点击节点时触发
dblclick	双击节点时触发