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>
      
      {
   
    
    /* 节点连接点 */}