数据流光效边 (DataFlowEdge)
DataFlowEdge 是 yh-flow 独有的高级可视化连线组件，专为 AI 工作流编排、实时数据管道等场景设计。 只需在 edge.data 中设置 flowStatus 和 flowEffect，即可让每条连线随状态呈现粒子流动、发光、心跳、波浪四种视觉动效。
快速上手
只需两步：注册组件 → 在 edge.data 里配置状态
typescript
// 步骤 1：注册为自定义边类型
import { markRaw } from 'vue'
import { DataFlowEdge } from '@yh-ui/flow'
const edgeTypes = { dataflow: markRaw(DataFlowEdge) }
// 步骤 2：在 edges 数组的 data 字段中配置状态和动效
const edges = ref([
{
id: 'e1',
source: 'node-a',
target: 'node-b',
type: 'dataflow', // 对应步骤 1 注册的 key
label: '处理中',
data: {
flowStatus: 'processing', // 状态：idle | processing | success | error | warning
flowEffect: 'particles' // 动效：particles | glow | pulse | wave | none
}
}
])IMPORTANT
flowStatus、flowEffect 等配置项必须放在 edge.data 对象里，而不是 edge 的顶层字段。组件会自动从 edge.data 中读取这些值。
5 种状态演示
数据源 1
数据源 2
数据源 3
数据源 4
汇聚节点
processing/success/error/warning/idle 全状态预览
动态切换状态与动效
实时切换状态与动效，体验全部组合效果
状态说明
flowStatus 值 | 颜色 | 动画特征 | 典型场景 |
|---|---|---|---|
idle | 灰色 | 无动画 | 静止连线、待机状态 |
processing | 紫色 | 线条呼吸 | 数据传输中、API 请求中 |
success | 绿色 | 稳定发光 | 传输完成、节点执行成功 |
error | 红色 | 快速闪烁 | 传输失败、节点出错 |
warning | 橙色 | 慢速脉冲 | 超时告警、数据异常 |
动效说明
flowEffect 值 | 描述 | 最佳搭配状态 |
|---|---|---|
particles | 发光粒子沿曲线路径流动 | processing |
glow | 线条持续发光光晕 | success |
pulse | 线条亮度心跳闪烁（JS interval） | error / warning |
wave | CSS 虚线流动动画 | processing / 通用 |
none | 无特殊动效，颜色仍随状态变化 | 全部 |
API
edge.data 配置项
这些字段写在 Edge 的
data对象中
| 字段 | 类型 | 默认值 | 说明 |
|---|---|---|---|
flowStatus | DataFlowStatus | 'idle' | 状态，决定颜色与 CSS 动画 |
flowEffect | DataFlowEffect | 'particles' | 视觉动效类型 |
glowIntensity | number | 8 | 发光模糊强度（0–20） |
particleCount | number | 3 | 粒子数量（1–10） |
animationDuration | number | 2 | 粒子/pulse 动画周期（秒） |
Edge 标准字段
| 字段 | 类型 | 说明 |
|---|---|---|
type | string | 设为注册的 key，如 'dataflow' |
label | string | 连线中心标签文字 |
animated | boolean | 设为 true 时 idle 状态显示虚线流动 |
selected | boolean | 是否高亮选中状态 |
类型定义
typescript
type DataFlowStatus = 'idle' | 'processing' | 'success' | 'error' | 'warning'
type DataFlowEffect = 'particles' | 'glow' | 'pulse' | 'wave' | 'none'注册为自定义边类型
typescript
import { markRaw } from 'vue'
import { DataFlowEdge } from '@yh-ui/flow'
// 在 yh-flow 的 :edge-types 中注册
const edgeTypes = {
dataflow: markRaw(DataFlowEdge)
// 可同时注册多个自定义边类型
}TIP
把 edges 定义为 computed，将状态（如来自 Pinia store 的运行时数据）映射到 edge.data，可轻松实现 AI 工作流节点运行状态的实时可视化。