frontend/src/components/WorkflowEditor.jsx

/**

 * 工作流编辑器组件

 * 使用React Flow实现可视化工作流编辑

 */
import { useState, useCallback, useRef } from 'react';
import ReactFlow, {
  ReactFlowProvider,
  addEdge,
  useNodesState,
  useEdgesState,
  Controls,
  MiniMap,
  Background,
  Panel,
  MarkerType
} from 'reactflow';
import 'reactflow/dist/style.css';
import {
  Card,
  Button,
  Drawer,
  Form,
  Input,
  Select,
  Space,
  Typography,
  message,
  Modal,
  Divider,
  Tag
} from 'antd';
import {
  PlusOutlined,
  SaveOutlined,
  ClearOutlined,
  PlayCircleOutlined,
  QuestionCircleOutlined,
  CodeOutlined,
  FileTextOutlined,
  BranchesOutlined,
  CheckCircleOutlined
} from '@ant-design/icons';

const { Title, Text } = Typography;
const { TextArea } = Input;
const { Option } = Select;

// 节点类型定义
const nodeTypes = {
  start: {
    label: '开始节点',
    icon: <PlayCircleOutlined />,
    color: '#52c41a'
  },
  question: {
    label: '提问节点',
    icon: <QuestionCircleOutlined />,
    color: '#1890ff'
  },
  knowledge: {
    label: '知识查询',
    icon: <FileTextOutlined />,
    color: '#722ed1'
  },
  code: {
    label: '代码执行',
    icon: <CodeOutlined />,
    color: '#fa8c16'
  },
  condition: {
    label: '条件分支',
    icon: <BranchesOutlined />,
    color: '#f5222d'
  },
  end: {
    label: '结束节点',
    icon: <CheckCircleOutlined />,
    color: '#52c41a'
  }
};

// 自定义节点组件
const CustomNode = ({ data, selected }) => {
  const nodeType = nodeTypes[data.type] || nodeTypes.question;

  return (
    <div

      style={{

        padding: '10px 15px',

        borderRadius: '8px',

        background: '#fff',

        border: `2px solid ${selected ? nodeType.color : '#d9d9d9'}`,

        boxShadow: selected ? `0 0 0 2px ${nodeType.color}20` : '0 2px 4px rgba(0,0,0,0.1)',

        minWidth: '150px',

        textAlign: 'center'

      }}

    >

      <Space>

        <span style={{ color: nodeType.color, fontSize: '16px' }}>

          {nodeType.icon}

        </span>

        <Text strong>{data.label}</Text>

      </Space>

      {data.description && (

        <div style={{ marginTop: '4px' }}>

          <Text type="secondary" style={{ fontSize: '12px' }}>

            {data.description}

          </Text>

        </div>

      )}

    </div>
  );
};

// 初始节点
const initialNodes = [
  {
    id: 'start',
    type: 'custom',
    position: { x: 250, y: 50 },
    data: {
      type: 'start',
      label: '开始',
      description: '工作流起点'
    }
  }
];

const WorkflowEditor = ({ value, onChange, onSave }) => {
  const [nodes, setNodes, onNodesChange] = useNodesState(value?.nodes || initialNodes);
  const [edges, setEdges, onEdgesChange] = useEdgesState(value?.edges || []);
  const [drawerVisible, setDrawerVisible] = useState(false);
  const [selectedNode, setSelectedNode] = useState(null);
  const [nodeForm] = Form.useForm();
  const reactFlowWrapper = useRef(null);
  const reactFlowInstance = useRef(null);

  // 连接节点
  const onConnect = useCallback(
    (params) => {
      const newEdge = {
        ...params,
        type: 'smoothstep',
        animated: true,
        style: { stroke: '#1890ff', strokeWidth: 2 },
        markerEnd: {
          type: MarkerType.ArrowClosed,
          color: '#1890ff'
        }
      };
      setEdges((eds) => addEdge(newEdge, eds));
    },
    [setEdges]
  );

  // 添加节点
  const addNode = (type) => {
    const newNode = {
      id: `${type}_${Date.now()}`,
      type: 'custom',
      position: {
        x: Math.random() * 400 + 100,
        y: Math.random() * 300 + 100
      },
      data: {
        type,
        label: nodeTypes[type].label,
        description: '',
        config: {}
      }
    };

    setNodes((nds) => nds.concat(newNode));
    message.success(`已添加${nodeTypes[type].label}`);
  };

  // 选中节点
  const onNodeClick = (event, node) => {
    setSelectedNode(node);
    nodeForm.setFieldsValue({
      label: node.data.label,
      description: node.data.description,
      ...node.data.config
    });
    setDrawerVisible(true);
  };

  // 删除节点
  const deleteNode = (nodeId) => {
    setNodes((nds) => nds.filter((n) => n.id !== nodeId));
    setEdges((eds) => eds.filter((e) => e.source !== nodeId && e.target !== nodeId));
    message.success('节点已删除');
  };

  // 更新节点
  const updateNode = (values) => {
    setNodes((nds) =>
      nds.map((node) => {
        if (node.id === selectedNode.id) {
          return {
            ...node,
            data: {
              ...node.data,
              label: values.label,
              description: values.description,
              config: {
                ...values,
                label: undefined,
                description: undefined
              }
            }
          };
        }
        return node;
      })
    );
    setDrawerVisible(false);
    message.success('节点已更新');
  };

  // 清空画布
  const clearCanvas = () => {
    Modal.confirm({
      title: '确认清空',
      content: '确定要清空所有节点和连接吗？',
      onOk: () => {
        setNodes([initialNodes[0]]);
        setEdges([]);
        message.success('画布已清空');
      }
    });
  };

  // 保存工作流
  const handleSave = () => {
    const workflow = {
      nodes,
      edges,
      timestamp: Date.now()
    };

    if (onChange) {
      onChange(workflow);
    }

    if (onSave) {
      onSave(workflow);
    }

    message.success('工作流已保存');
  };

  // 验证工作流
  const validateWorkflow = () => {
    if (nodes.length < 2) {
      message.warning('工作流至少需要包含开始和结束节点');
      return false;
    }

    const hasStart = nodes.some(n => n.data.type === 'start');
    const hasEnd = nodes.some(n => n.data.type === 'end');

    if (!hasStart || !hasEnd) {
      message.warning('工作流必须包含开始和结束节点');
      return false;
    }

    return true;
  };

  return (
    <div style={{ width: '100%', height: '600px' }}>

      <ReactFlowProvider>

        <div ref={reactFlowWrapper} style={{ width: '100%', height: '100%' }}>

          <ReactFlow

            nodes={nodes}

            edges={edges}

            onNodesChange={onNodesChange}

            onEdgesChange={onEdgesChange}

            onConnect={onConnect}

            onNodeClick={onNodeClick}

            onInit={(instance) => { reactFlowInstance.current = instance; }}

            nodeTypes={{ custom: CustomNode }}

            fitView

          >

            <Controls />

            <MiniMap

              nodeColor={node => nodeTypes[node.data.type]?.color || '#ccc'}

              style={{

                height: 120,

                background: '#f0f2f5'

              }}

            />

            <Background variant="dots" gap={12} size={1} />



            {/* 工具面板 */}

            <Panel position="top-left">

              <Card size="small" style={{ minWidth: '200px' }}>

                <Space direction="vertical" style={{ width: '100%' }}>

                  <Text strong>添加节点</Text>

                  <Space wrap>

                    {Object.entries(nodeTypes).map(([key, type]) => (

                      <Button

                        key={key}

                        size="small"

                        icon={type.icon}

                        onClick={() => addNode(key)}

                        style={{ fontSize: '12px' }}

                      >

                        {type.label}

                      </Button>

                    ))}

                  </Space>

                </Space>

              </Card>

            </Panel>



            {/* 操作按钮 */}

            <Panel position="top-right">

              <Space>

                <Button

                  type="primary"

                  icon={<SaveOutlined />}

                  onClick={handleSave}

                  disabled={!validateWorkflow()}

                >

                  保存工作流

                </Button>

                <Button

                  danger

                  icon={<ClearOutlined />}

                  onClick={clearCanvas}

                >

                  清空画布

                </Button>

              </Space>

            </Panel>

          </ReactFlow>

        </div>

      </ReactFlowProvider>



      {/* 节点编辑抽屉 */}

      <Drawer

        title="编辑节点"

        placement="right"

        width={400}

        open={drawerVisible}

        onClose={() => setDrawerVisible(false)}

        footer={

          <Space>

            <Button onClick={() => setDrawerVisible(false)}>取消</Button>

            <Button

              danger

              onClick={() => {

                deleteNode(selectedNode.id);

                setDrawerVisible(false);

              }}

            >

              删除节点

            </Button>

            <Button type="primary" onClick={() => nodeForm.submit()}>

              保存

            </Button>

          </Space>

        }

      >

        {selectedNode && (

          <Form

            form={nodeForm}

            layout="vertical"

            onFinish={updateNode}

          >

            <Form.Item

              name="label"

              label="节点名称"

              rules={[{ required: true, message: '请输入节点名称' }]}

            >

              <Input />

            </Form.Item>



            <Form.Item

              name="description"

              label="节点描述"

            >

              <TextArea rows={2} />

            </Form.Item>



            <Divider />



            {/* 根据节点类型显示不同的配置项 */}

            {selectedNode.data.type === 'question' && (

              <Form.Item

                name="prompt"

                label="提示词模板"

              >

                <TextArea rows={4} placeholder="输入提示词模板..." />

              </Form.Item>

            )}



            {selectedNode.data.type === 'knowledge' && (

              <Form.Item

                name="knowledge_base"

                label="知识库"

              >

                <Select placeholder="选择知识库">

                  <Option value="default">默认知识库</Option>

                </Select>

              </Form.Item>

            )}



            {selectedNode.data.type === 'code' && (

              <Form.Item

                name="code"

                label="代码"

              >

                <TextArea rows={6} placeholder="输入Python代码..." style={{ fontFamily: 'monospace' }} />

              </Form.Item>

            )}



            {selectedNode.data.type === 'condition' && (

              <>

                <Form.Item

                  name="condition"

                  label="条件表达式"

                >

                  <Input placeholder="例如: score > 80" />

                </Form.Item>

                <Form.Item

                  name="true_branch"

                  label="满足条件时"

                >

                  <Input placeholder="跳转到节点..." />

                </Form.Item>

                <Form.Item

                  name="false_branch"

                  label="不满足条件时"

                >

                  <Input placeholder="跳转到节点..." />

                </Form.Item>

              </>

            )}

          </Form>

        )}

      </Drawer>
    </div>
  );
};

export default WorkflowEditor;