Dify 工作流组件完全开发指南

原创

已于 2025-03-11 11:58:50 修改 · 2.5k 阅读

于 2025-03-11 11:53:23 首次发布

1. 如何添加新的工作流节点组件

1.1 添加新节点的步骤

要在 Dify 工作流中添加一个新的节点类型，需要完成以下步骤：

1.1.1 更新节点类型枚举

首先，在 app/components/workflow/types.ts 文件中的 BlockEnum 中添加新节点类型：

export enum BlockEnum {
   
   
  // 现有节点类型
  // ...
  // 添加新节点类型
  NewNodeType = 'new-node-type',
}

1.1.2 创建节点组件

在 app/components/workflow/nodes/ 目录下创建新节点的目录和组件文件：

// app/components/workflow/nodes/new-node-type/index.tsx

import {
   
    FC, memo, useCallback } from 'react'
import {
   
    Handle, Position } from 'reactflow'
import {
   
    useTranslation } from 'react-i18next'

import {
   
    BlockEnum, CommonNodeType } from '../../types'
import {
   
    useStore } from '../../store'
import NodeWrapper from '../node-wrapper'

// 定义节点数据类型
export type NewNodeDataType = {
   
   
  // 节点特定属性
  config: {
   
   
    param1: string
    param2: number
    // 其他参数
  }
}

// 节点组件属性
type NewNodeProps = {
   
   
  id: string
  data: CommonNodeType<NewNodeDataType>
}

// 节点组件实现
const NewNode: FC<NewNodeProps> = ({
   
    id, data }) => {
   
   
  const {
   
    t } = useTranslation()
  const {
   
    config } = data
  
  // 处理节点交互
  const handleClick = useCallback(() => {
   
   
    // 节点点击处理逻辑
  }, [])
  
  return (
    <NodeWrapper id={
   
   id} data={
   
   data} onClick={
   
   handleClick}>
      <div className="node-content">
        {
   
   /* 节点内容显示 */}
        <div className="param-display">
          <span className="label">{
   
   t('workflow.node.newNode.param1')}:</span>
          <span className="value">{
   
   config.param1}</span>
        </div>
        {
   
   /* 更多内容 */}
      </div>
      
      {