flow-playform-react/src/pages/flowEditor/components/nodeContent.tsx

import React from 'react';
import styles from '@/pages/flowEditor/node/style/base.module.less';
import { Handle, Position, useStore } from '@xyflow/react';
import { Divider } from '@arco-design/web-react';

interface NodeContentData {
  parameters?: {
    inputs?: any[];
    outputs?: any[];
  };
  showFooter?: boolean;
  type?: string;

  [key: string]: any;
}

// 渲染特殊节点（开始/结束节点）的句柄
const renderSpecialNodeHandles = (isStartNode: boolean, isEndNode: boolean, inputs: any[], outputs: any[]) => {
  return (
    <>
      <Handle
        type={isStartNode ? 'source' : 'target'}
        position={isStartNode ? Position.Right : Position.Left}
        id={isStartNode ? 'start-source' : 'end-target'}
        style={{
          background: '#2290f6',
          top: '40px',
          width: '8px',
          height: '8px',
          border: '2px solid #fff',
          boxShadow: '0 0 4px rgba(0,0,0,0.2)'
        }}
        className="node-handle"
      />

      {/* 为特殊节点的参数也添加句柄 */}
      {isStartNode && outputs.map((_, index) => (
        <Handle
          key={`output-handle-${index}`}
          type="source"
          position={Position.Right}
          id={outputs[index].name || `output-${index}`}
          style={{
            background: '#555',
            top: `${60 + index * 20}px`,
            width: '6px',
            height: '6px',
            border: '1px solid #fff',
            boxShadow: '0 0 2px rgba(0,0,0,0.2)'
          }}
          className="node-handle"
        />
      ))}

      {isEndNode && inputs.map((_, index) => (
        <Handle
          key={`input-handle-${index}`}
          type="target"
          position={Position.Left}
          id={inputs[index].name || `input-${index}`}
          style={{
            background: '#555',
            top: `${60 + index * 20}px`,
            width: '6px',
            height: '6px',
            border: '1px solid #fff',
            boxShadow: '0 0 2px rgba(0,0,0,0.2)'
          }}
          className="node-handle"
        />
      ))}
    </>
  );
};

// 渲染普通节点的句柄
const renderRegularNodeHandles = (inputs: any[], outputs: any[]) => {
  return (
    <>
      <Handle
        type="source"
        position={Position.Right}
        id="start-source"
        style={{
          background: '#2290f6',
          top: '40px',
          width: '8px',
          height: '8px',
          border: '2px solid #fff',
          boxShadow: '0 0 4px rgba(0,0,0,0.2)'
        }}
        className="node-handle"
      />
      <Handle
        type="target"
        position={Position.Left}
        id="end-target"
        style={{
          background: '#2290f6',
          top: '40px',
          width: '8px',
          height: '8px',
          border: '2px solid #fff',
          boxShadow: '0 0 4px rgba(0,0,0,0.2)'
        }}
        className="node-handle"
      />

      {/* 输入参数连接端点 */}
      {inputs.map((_, index) => (
        <Handle
          key={`input-handle-${index}`}
          type="target"
          position={Position.Left}
          id={inputs[index].name || `input-${index}`}
          style={{
            background: '#555',
            top: `${40 + (index + 1) * 20}px`,
            width: '6px',
            height: '6px',
            border: '1px solid #fff',
            boxShadow: '0 0 2px rgba(0,0,0,0.2)'
          }}
          className="node-handle"
        />
      ))}

      {/* 输出参数连接端点 */}
      {outputs.map((_, index) => (
        <Handle
          key={`output-handle-${index}`}
          type="source"
          position={Position.Right}
          id={outputs[index].name || `output-${index}`}
          style={{
            background: '#555',
            top: `${40 + (index + 1) * 20}px`,
            width: '6px',
            height: '6px',
            border: '1px solid #fff',
            boxShadow: '0 0 2px rgba(0,0,0,0.2)'
          }}
          className="node-handle"
        />
      ))}
    </>
  );
};

const NodeContent = ({ data }: { data: NodeContentData }) => {
  const inputs = data.parameters?.inputs || [];
  const outputs = data.parameters?.outputs || [];
  const showFooter = data.showFooter || false;

  // 判断节点类型
  const isStartNode = data.type === 'start';
  const isEndNode = data.type === 'end';
  const isSpecialNode = isStartNode || isEndNode;

  return (
    <>
      {/*content栏*/}
      <div className={styles['node-content']}>
        {inputs.length > 0 && !isStartNode && (
          <div className={styles['node-inputs']}>
            {inputs.map((input, index) => (
              <div key={`input-${index}`} className={styles['node-input-label']}>
                {input.name || `输入${index + 1}`}
              </div>
            ))}
          </div>
        )}

        {outputs.length > 0 && !isEndNode && (
          <div className={styles['node-outputs']}>
            {outputs.map((output, index) => (
              <div key={`output-${index}`} style={{ fontSize: '12px', padding: '2px 0' }}>
                {output.name || `输出${index + 1}`}
              </div>
            ))}
          </div>
        )}
      </div>

      {/*footer栏*/}
      {showFooter && (
        <div className={styles['node-footer']}>
          暂定的footer
        </div>
      )}

      {/* 根据节点类型渲染不同的句柄 */}
      {isSpecialNode
        ? renderSpecialNodeHandles(isStartNode, isEndNode, inputs, outputs)
        : renderRegularNodeHandles(inputs, outputs)}
    </>
  );
};

export default NodeContent;