自定义节点模板 (Custom Node Templates)

yh-flow 提供了强大的自定义节点模板系统，允许您注册可重用的节点模板，通过配置数据快速创建标准化节点。

核心概念

模板注册

使用 registerCustomNodeTemplate 函数注册自定义节点模板：

import { registerCustomNodeTemplate, type CustomNodeTemplate } from '@yh-ui/flow'
import MyCustomNode from './MyCustomNode.vue'

const template: CustomNodeTemplate = {
  type: 'my-custom',
  component: MyCustomNode,
  defaultData: {
    label: '默认标题',
    icon: 'star',
    status: 'active'
  },
  defaultWidth: 200,
  defaultHeight: 80,
  description: '这是一个自定义业务节点模板'
}

// 注册模板
registerCustomNodeTemplate(template)

从模板创建节点

注册模板后，可以使用 createNodeFromTemplate 方法快速创建节点：

import { createNodeFromTemplate } from '@yh-ui/flow'

// 从模板创建节点
const newNode = createNodeFromTemplate(
  'my-custom', // 模板类型
  'node-1', // 节点 ID
  { x: 100, y: 200 }, // 位置
  {
    // 可选的覆盖配置
    data: { label: '自定义标题' }
  }
)

使用示例

模板画布

模板工作区示例

API 参考

注册函数

函数	说明	参数
registerCustomNodeTemplate(template)	注册自定义节点模板	template: CustomNodeTemplate
getCustomNodeTemplate(type)	获取指定类型的模板	type: string
getAllCustomNodeTemplates()	获取所有已注册的模板	-
hasCustomNodeTemplate(type)	检查模板是否存在	type: string
createNodeFromTemplate(type, id, position, overrides)	从模板创建节点	详见下方

createNodeFromTemplate 参数

参数	类型	必填	说明
type	string	是	模板类型
id	string	是	新节点 ID
position	{ x: number, y: number }	是	节点位置
overrides	Partial<Node>	否	覆盖默认配置

CustomNodeTemplate 接口

interface CustomNodeTemplate {
  type: string // 模板唯一标识
  component: Component // Vue 组件
  defaultData?: Record<string, unknown> // 默认数据
  defaultWidth?: number // 默认宽度
  defaultHeight?: number // 默认高度
  handles?: NodeHandleBounds // 连接点配置
  description?: string // 模板描述
}

最佳实践

1. 统一管理模板：在单独的文件中集中管理所有自定义模板
2. 提供默认数据：通过 defaultData 为业务节点提供合理的默认值
3. 类型安全：为自定义节点数据定义 TypeScript 接口，确保类型安全
4. 组件复用：同一个组件可以注册为不同类型的模板，通过 defaultData 区分

TIP

结合 Flow 实例的 createNodeFromTemplate 方法，可以在拖拽放置节点时自动从模板创建。