cherry-ai/frontend/app/workflow/page.tsx

// File: frontend/app/workflow/page.tsx (更新)
// Description: 工作流编辑器主页面，引入模块化组件

'use client';

import React, { useState, useCallback, useRef, DragEvent, useMemo } from 'react';
import ReactFlow, {
  ReactFlowProvider,
  MiniMap,
  Controls,
  Background,
  useNodesState,
  useEdgesState,
  addEdge,
  Node,
  Edge,
  Connection,
  Position,
  MarkerType,
  NodeChange,
  EdgeChange,
  applyNodeChanges,
  applyEdgeChanges,
  useReactFlow,
  XYPosition,
  BackgroundVariant,
} from 'reactflow';

// 引入自定义节点和侧边栏组件
import { StartNode } from './components/StartNode';
import { OutputNode } from './components/OutputNode';
import { LLMNode } from './components/LLMNode';
import { WorkflowSidebar } from './components/WorkflowSidebar';
// 引入类型 (如果需要)
// import type { LLMNodeData } from './components/types';

import 'reactflow/dist/style.css';

// --- 初始节点和边数据 ---
const initialNodes: Node[] = [
  { id: 'start-initial', type: 'startNode', data: { label: '开始' }, position: { x: 150, y: 50 } },
  {
    id: 'llm-initial',
    type: 'llmNode',
    data: {
        model: 'gpt-3.5-turbo',
        temperature: 0.7,
        systemPrompt: '你是一个乐于助人的 AI 助手。',
        inputConnected: false,
        apiKey: '',
    },
    position: { x: 350, y: 150 }
  },
  { id: 'end-initial', type: 'outputNode', data: { label: '结束' }, position: { x: 650, y: 350 } },
];
const initialEdges: Edge[] = [];

// --- 工作流编辑器组件 ---
function WorkflowEditor() {
  const reactFlowWrapper = useRef<HTMLDivElement>(null); // Ref 指向 React Flow 容器
  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
  const { project } = useReactFlow(); // 使用 hook 获取 project 方法

  // --- 注册自定义节点类型 ---
  const nodeTypes = useMemo(() => ({
    startNode: StartNode,
    outputNode: OutputNode,
    llmNode: LLMNode, // LLMNode 现在需要一种方式来调用 updateNodeData
    // inputNode: CustomInputNode,
    // ragNode: RAGNode,
  }), []); // 移除 updateNodeData 依赖，因为它不应该直接传递

  const onConnect = useCallback(
    (connection: Connection) => {
        setEdges((eds) => addEdge({ ...connection, markerEnd: { type: MarkerType.ArrowClosed } }, eds));
        if (connection.targetHandle === 'input-text' && connection.target) {
             setNodes((nds) =>
                nds.map((node) => {
                    if (node.id === connection.target) {
                        return { ...node, data: { ...node.data, inputConnected: true } };
                    }
                    return node;
                })
            );
        }
    },
    [setEdges, setNodes] // 保持 updateNodeData 依赖
  );
  
  const onEdgesChangeIntercepted = useCallback(
    (changes: EdgeChange[]) => {
      changes.forEach(change => {
        if (change.type === 'remove') {
          const edgeToRemove = edges.find(edge => edge.id === change.id);
          if (edgeToRemove?.targetHandle === 'input-text' && edgeToRemove.target) {
             setNodes((nds) =>
                nds.map((node) => {
                    if (node.id === edgeToRemove.target) {
                        return { ...node, data: { ...node.data, inputConnected: false } };
                    }
                    return node;
                })
            );
          }
        }
      });
      onEdgesChange(changes);
    },
    [edges, onEdgesChange, setNodes] // 保持 updateNodeData 依赖
  );

  // 处理画布上的拖拽悬停事件
  const onDragOver = useCallback((event: DragEvent) => {
    event.preventDefault(); // 必须阻止默认行为才能触发 onDrop
    event.dataTransfer.dropEffect = 'move'; // 设置放置效果
  }, []);

  // 处理画布上的放置事件
  const onDrop = useCallback(
    (event: DragEvent) => {
      event.preventDefault(); // 阻止默认行为（如打开文件）

      if (!reactFlowWrapper.current) {
        return;
      }

      // 从 dataTransfer 中获取节点信息
      const nodeInfoString = event.dataTransfer.getData('application/reactflow');
      if (!nodeInfoString) {
        console.warn("No reactflow data found in dataTransfer");
        return;
      }

      let nodeInfo;
      try {
        nodeInfo = JSON.parse(nodeInfoString);
      } catch (error) {
        console.error("Failed to parse node info from dataTransfer", error);
        return;
      }

      const { nodeType, defaultData } = nodeInfo;
      if (!nodeType) {
         console.warn("Node type not found in dataTransfer");
         return;
      }

      // 获取鼠标相对于 React Flow 画布的位置
      // 需要计算鼠标位置相对于 reactFlowWrapper 的偏移量
      const reactFlowBounds = reactFlowWrapper.current.getBoundingClientRect();
      const position = project({
        x: event.clientX - reactFlowBounds.left,
        y: event.clientY - reactFlowBounds.top,
      });

      // 创建新节点
      const newNode: Node = {
        id: `${nodeType}-${Date.now()}`, // 使用更唯一的 ID
        type: nodeType, // 设置节点类型
        position,
        data: { label: defaultData?.label || `${nodeType} node`, ...defaultData },
        // 根据节点类型设置 Handle 位置 (可选，也可以在自定义节点内部定义)
        // sourcePosition: Position.Bottom,
        // targetPosition: Position.Top,
      };

      console.log('Node dropped:', newNode);
      // 将新节点添加到状态中
      setNodes((nds) => nds.concat(newNode));
    },
    [project, setNodes] // 依赖 project 方法和 setNodes
  );

  return (
    <div className="flex flex-col h-full bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
      <h1 className="text-xl font-semibold p-4 border-b dark:border-gray-700 text-gray-800 dark:text-gray-200">
        工作流编辑器
      </h1>
      {/* 主容器使用 Flexbox */}
      <div className="flex flex-1 overflow-hidden">
        {/* 侧边栏 */}
        <WorkflowSidebar />
        {/* React Flow 画布容器 */}
        <div className="flex-1 h-full" ref={reactFlowWrapper}> {/* 添加 ref */}
          <ReactFlow
            nodes={nodes}
            edges={edges}
            onNodesChange={onNodesChange}
            onEdgesChange={onEdgesChangeIntercepted}
            onConnect={onConnect}
            onDragOver={onDragOver} // 添加 onDragOver
            onDrop={onDrop}         // 添加 onDrop
            nodeTypes={nodeTypes} // <--- 传递自定义节点类型
            fitView
            className="bg-gray-50 dark:bg-gray-900"
          >
            <Controls />
            <MiniMap nodeStrokeWidth={3} zoomable pannable />
            <Background gap={16} color="#ccc" variant={BackgroundVariant.Dots} />
          </ReactFlow>
        </div>
      </div>
    </div>
  );
}

// --- 主页面组件，包含 Provider ---
export default function WorkflowPage() {
  return (
    <ReactFlowProvider>
      <WorkflowEditor />
    </ReactFlowProvider>
  );
}