feat(web): add loop node; add chat variable;

2026-01-04 20:00:10 +08:00
parent 4e3b8870c5
commit a66fb9eade
29 changed files with 1453 additions and 279 deletions
--- a/web/src/views/Workflow/components/Nodes/AddNode.tsx
+++ b/web/src/views/Workflow/components/Nodes/AddNode.tsx
@@ -1,18 +1,167 @@
+import { useState } from 'react';
+import { Popover } from 'antd';
 import clsx from 'clsx';
 import type { ReactShapeConfig } from '@antv/x6-react-shape';
+import { nodeLibrary, graphNodeLibrary } from '../../constant';
+import { useTranslation } from 'react-i18next';

-const AddNode: ReactShapeConfig['component'] = ({ node }) => {
-  const data = node?.getData() || {}
+const AddNode: ReactShapeConfig['component'] = ({ node, graph }) => {
+  const data = node?.getData() || {};
+  const { t } = useTranslation();
+  const [open, setOpen] = useState(false);
+
+  const handleNodeSelect = (selectedNodeType: any) => {
+    const parentBBox = node.getBBox();
+    const cycleId = data.cycle;
+    
+    const newNode = graph.addNode({
+      ...(graphNodeLibrary[selectedNodeType.type] || graphNodeLibrary.default),
+      x: parentBBox.x,
+      y: parentBBox.y,
+      data: {
+        id: `${selectedNodeType.type}_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`,
+        type: selectedNodeType.type,
+        icon: selectedNodeType.icon,
+        name: t(`workflow.${selectedNodeType.type}`),
+        cycle: cycleId,
+        parentId: data.parentId,
+        config: selectedNodeType.config || {}
+      },
+    });
+
+    // 将新节点添加为父节点的子节点
+    if (cycleId) {
+      const parentNode = graph.getNodes().find((n: any) => n.getData()?.id === cycleId);
+      if (parentNode) {
+        parentNode.addChild(newNode);
+      }
+    }
+
+    const incomingEdges = graph.getIncomingEdges(node);
+    const outgoingEdges = graph.getOutgoingEdges(node);
+    
+    incomingEdges?.forEach(edge => {
+      graph.addEdge({
+        source: { cell: edge.getSourceCellId(), port: edge.getSourcePortId() },
+        target: { cell: newNode.id, port: newNode.getPorts().find((port: any) => port.group === 'left')?.id || 'left' },
+        attrs: edge.getAttrs()
+      });
+    });
+
+    outgoingEdges?.forEach(edge => {
+      const targetCell = graph.getCellById(edge.getTargetCellId()) as any;
+      const targetPortId = targetCell?.getPorts?.()?.find((port: any) => port.group === 'left')?.id || edge.getTargetPortId();
+      graph.addEdge({
+        source: { cell: newNode.id, port: newNode.getPorts().find((port: any) => port.group === 'right')?.id || 'right' },
+        target: { cell: edge.getTargetCellId(), port: targetPortId },
+        attrs: edge.getAttrs()
+      });
+    });
+
+    // 删除所有add-node类型的节点
+    graph.getNodes().forEach((n: any) => {
+      if (n.getData()?.type === 'add-node' && n.getData()?.cycle === cycleId) {
+        n.remove();
+      }
+    });
+
+    // 自动调整循环节点大小
+    const loopNode = graph.getNodes().find((n: any) => n.getData()?.id === cycleId);
+    if (loopNode) {
+      const adjustLoopSize = () => {
+        const childNodes = graph.getNodes().filter((n: any) => n.getData()?.cycle === cycleId);
+        if (childNodes.length > 0) {
+          const bounds = childNodes.reduce((acc, child) => {
+            const bbox = child.getBBox();
+            return {
+              minX: Math.min(acc.minX, bbox.x),
+              minY: Math.min(acc.minY, bbox.y),
+              maxX: Math.max(acc.maxX, bbox.x + bbox.width),
+              maxY: Math.max(acc.maxY, bbox.y + bbox.height)
+            };
+          }, { minX: Infinity, minY: Infinity, maxX: -Infinity, maxY: -Infinity });
+          
+          const padding = 20;
+          const newWidth = Math.max(240, bounds.maxX - bounds.minX + padding * 2);
+          const newHeight = Math.max(120, bounds.maxY - bounds.minY + padding * 2);
+          
+          loopNode.prop('size', { width: newWidth, height: newHeight });
+        }
+      };
+      
+      adjustLoopSize();
+      
+      // 监听子节点移动事件
+      const childNodes = graph.getNodes().filter((n: any) => n.getData()?.cycle === cycleId);
+      childNodes.forEach((childNode: any) => {
+        childNode.on('change:position', adjustLoopSize);
+      });
+    }
+    setOpen(false);
+  };
+
+  const content = (
+    <div style={{ maxHeight: '300px', overflowY: 'auto', minWidth: '240px' }}>
+      {nodeLibrary.map((category, categoryIndex) => {
+        const filteredNodes = category.nodes.filter(nodeType => 
+          nodeType.type !== 'start' && nodeType.type !== 'end' && nodeType.type !== 'loop' && nodeType.type !== 'cycle-start'
+        );
+        
+        if (filteredNodes.length === 0) return null;
+        
+        return (
+          <div key={category.category}>
+            {categoryIndex > 0 && <div style={{ height: '1px', background: '#f0f0f0', margin: '4px 0' }} />}
+            <div style={{ padding: '4px 12px', fontSize: '12px', color: '#999', fontWeight: 'bold' }}>
+              {t(`workflow.${category.category}`)}
+            </div>
+            {filteredNodes.map((nodeType) => (
+              <div
+                key={nodeType.type}
+                style={{
+                  padding: '8px 12px',
+                  cursor: 'pointer',
+                  display: 'flex',
+                  alignItems: 'center',
+                  gap: '8px',
+                }}
+                onClick={() => handleNodeSelect(nodeType)}
+                onMouseEnter={(e) => {
+                  e.currentTarget.style.background = '#f0f8ff';
+                }}
+                onMouseLeave={(e) => {
+                  e.currentTarget.style.background = 'white';
+                }}
+              >
+                <img src={nodeType.icon} className="rb:w-4 rb:h-4" />
+                <span style={{ fontSize: '14px' }}>{t(`workflow.${nodeType.type}`)}</span>
+              </div>
+            ))}
+          </div>
+        );
+      })}
+    </div>
+  );

  return (
-    <div className={clsx('rb:group rb:relative rb:h-10 rb:w-30 rb:border rb:rounded-xl rb:flex rb:items-center rb:justify-center rb:text-[12px] rb:p-1 rb:box-border', {
-      'rb:border-orange-500 rb:border-[3px] rb:bg-white rb:text-gray-700': data.isSelected,
-      'rb:border-[#d1d5db] rb:bg-white rb:text-[#374151]': !data.isSelected
-    })}>
-      <span className="rb:overflow-hidden rb:whitespace-nowrap rb:text-ellipsis">
-        {data.icon} {data.label}
-      </span>
-    </div>
+    <Popover
+      content={content}
+      trigger="click"
+      open={open}
+      onOpenChange={setOpen}
+      placement="bottomLeft"
+    >
+      <div 
+        className={clsx('rb:group rb:relative rb:h-11 rb:w-22 rb:border rb:rounded-xl rb:flex rb:items-center rb:justify-center rb:text-[12px] rb:p-1 rb:box-border rb:cursor-pointer', {
+          'rb:border-orange-500 rb:border-[3px] rb:bg-white rb:text-gray-700': data.isSelected,
+          'rb:border-[#d1d5db] rb:bg-white rb:text-[#374151]': !data.isSelected
+        })}
+      >
+        <span className="rb:overflow-hidden rb:whitespace-nowrap rb:text-ellipsis">
+          {data.icon} {data.label}
+        </span>
+      </div>
+    </Popover>
  );
 };

--- a/web/src/views/Workflow/components/Nodes/ConditionNode.tsx
+++ b/web/src/views/Workflow/components/Nodes/ConditionNode.tsx
@@ -7,7 +7,7 @@ const ConditionNode: ReactShapeConfig['component'] = ({ node }) => {
  const { t } = useTranslation()

  return (
-    <div className={clsx('rb:cursor-pointer rb:group rb:relative rb:h-full rb:w-60 rb:p-2.5 rb:border rb:rounded-xl rb:bg-white rb:hover:shadow-[0px_2px_6px_0px_rgba(33,35,50,0.12)]', {
+    <div className={clsx('rb:cursor-pointer rb:group rb:relative rb:h-full rb:w-full rb:p-2.5 rb:border rb:rounded-xl rb:bg-white rb:hover:shadow-[0px_2px_6px_0px_rgba(33,35,50,0.12)]', {
      'rb:border-[#155EEF]': data.isSelected,
      'rb:border-[#DFE4ED]': !data.isSelected
    })}>
--- a/web/src/views/Workflow/components/Nodes/GroupStartNode.tsx
+++ b/web/src/views/Workflow/components/Nodes/GroupStartNode.tsx
@@ -1,17 +1,11 @@
 import clsx from 'clsx';
 import type { ReactShapeConfig } from '@antv/x6-react-shape';
+import startIcon from '@/assets/images/workflow/start.png';

-const GroupStartNode: ReactShapeConfig['component'] = ({ node }) => {
-  const data = node?.getData() || {}
-
+const GroupStartNode: ReactShapeConfig['component'] = () => {
  return (
-    <div className={clsx('rb:group rb:relative rb:h-10 rb:w-20 rb:border rb:rounded-xl rb:flex rb:items-center rb:justify-center rb:text-[12px] rb:p-1 rb:box-border', {
-      'rb:border-orange-500 rb:border-[3px] rb:bg-white rb:text-gray-700': data.isSelected,
-      'rb:border-[#d1d5db] rb:bg-white rb:text-[#374151]': !data.isSelected
-    })}>
-      <span className="rb:overflow-hidden rb:whitespace-nowrap rb:text-ellipsis">
-        {data.icon} {data.label}
-      </span>
+    <div className={clsx('rb:cursor-pointer rb:group rb:relative rb:h-full rb:w-full rb:p-2.5 rb:border rb:rounded-xl rb:bg-white rb:hover:shadow-[0px_2px_6px_0px_rgba(33,35,50,0.12)] rb:border-[#DFE4ED]')}>
+      <img src={startIcon} className="rb:w-6 rb:h-6" />
    </div>
  );
 };
--- a/web/src/views/Workflow/components/Nodes/IterationNode.tsx
+++ b/web/src/views/Workflow/components/Nodes/IterationNode.tsx
@@ -1,98 +0,0 @@
-import { useEffect } from 'react';
-import clsx from 'clsx';
-import { Dropdown } from 'antd';
-import { SmallDashOutlined } from '@ant-design/icons';
-import type { ReactShapeConfig } from '@antv/x6-react-shape';
-import { graphNodeLibrary } from '../../constant';
-
-interface NodeData {
-  isSelected?: boolean;
-  type?: string;
-  label?: string;
-  icon?: string;
-  parentId?: string;
-  isGroup?: boolean;
-}
-
-const IterationNode: ReactShapeConfig['component'] = ({ node, graph }) => {
-  const data = node.getData() as NodeData;
-
-  useEffect(() => {
-    initNodes()
-  }, [])
-
-  const initNodes = () => {
-    // 添加默认子节点
-    const parentBBox = node.getBBox();
-    const centerX = parentBBox.x + 24; // 默认节点宽度的一半
-    const centerY = parentBBox.y + 50; // 默认节点高度的一半
-    
-    const childNode1 = graph.addNode({
-      ...graphNodeLibrary.groupStart,
-      x: centerX,
-      y: centerY,
-      data: {
-        type: 'default',
-        label: '开始',
-        // icon: '📌',
-        parentId: node.id,
-        isDefault: true // 标记为默认节点，不可删除
-      },
-    });
-    const childNode2 = graph.addNode({
-      ...graphNodeLibrary.addStart,
-      x: centerX + 150,
-      y: centerY,
-      data: {
-        type: 'default',
-        label: '添加节点',
-        icon: '+',
-        parentId: node.id,
-      },
-    });
-    node.addChild(childNode1)
-    node.addChild(childNode2)
-  }
-  
-  return (
-    <div className={clsx('rb:group rb:border-2 rb:border-dashed rb:rounded-xl rb:relative rb:min-w-75 rb:min-h-50 rb:p-4', {
-      'rb:border-orange-500 rb:border-[3px] rb:bg-white rb:text-gray-700': data?.isSelected,
-      'rb:border-[#d1d5db] rb:bg-white rb:text-[#374151]': !data?.isSelected
-    })}>
-      {/* 标题区域 */}
-      <div className="rb:absolute rb:-top-3 rb:left-4 rb:bg-[#10b981] rb:rounded-[20px] rb:p-[8px_16px] rb:flex rb:items-center rb:gap-2 rb:text-white rb:text-[14px] rb:font-bold rb:z-10">
-        <div className="rb:w-5 rb:h-5 rb:bg-[#FFFFFF] rb:rounded-sm rb:flex rb:items-center rb:justify-center rb:text-[12px] rb:text-[#10b981]">
-          🔁
-        </div>
-        迭代
-      </div>
-      <Dropdown
-        menu={{items: [
-          {
-            key: '1',
-            label: '删除',
-          },
-          {
-            key: '2',
-            label: '复制',
-          },
-          {
-            key: '3',
-            label: '删除',
-          }
-        ]}}
-      >
-        <SmallDashOutlined 
-          className={clsx("rb:cursor-pointer rb:right-1 rb:top-1 rb:invisible rb:absolute rb:group-hover:visible", {
-            'rb:visible': data.isSelected
-          })}
-        />
-      </Dropdown>
-      
-      {/* 画布内容区域 */}
-      <div className="rb:mt-6 rb:min-h-37.5 rb:w-full rb:bg-[radial-gradient(circle,#e5e7eb_1px,transparent_1px)] rb:bg-size-[12px_12px]"></div>
-    </div>
-  );
-};
-
-export default IterationNode;
--- a/web/src/views/Workflow/components/Nodes/LoopNode.tsx
+++ b/web/src/views/Workflow/components/Nodes/LoopNode.tsx
@@ -1,19 +1,10 @@
 import { useEffect } from 'react';
 import { useTranslation } from 'react-i18next'
 import clsx from 'clsx';
-import { Dropdown } from 'antd';
-import { SmallDashOutlined } from '@ant-design/icons';
 import type { ReactShapeConfig } from '@antv/x6-react-shape';
 import { graphNodeLibrary } from '../../constant';

-interface NodeData {
-  isSelected?: boolean;
-  type?: string;
-  label?: string;
-  icon?: string;
-  parentId?: string;
-  isGroup?: boolean;
-}
+import { edge_color } from '../../hooks/useWorkflowGraph'

 const LoopNode: ReactShapeConfig['component'] = ({ node, graph }) => {
  const data = node.getData() || {};
@@ -21,63 +12,145 @@ const LoopNode: ReactShapeConfig['component'] = ({ node, graph }) => {

  useEffect(() => {
    initNodes()
+    // 检查是否需要添加add-node
+    checkAndAddAddNode()
  }, [])

+  const checkAndAddAddNode = () => {
+    if (!graph) return;
+    
+    const childNodes = graph.getNodes().filter((n: any) => n.getData()?.cycle === data.id);
+    const cycleStartNodes = childNodes.filter((n: any) => n.getData()?.type === 'cycle-start');
+    
+    // 如果只有一个cycle-start节点且没有其他类型的子节点，则添加add-node
+    if (cycleStartNodes.length === 1 && childNodes.length === 1) {
+      const cycleStartNode = cycleStartNodes[0];
+      const cycleStartBBox = cycleStartNode.getBBox();
+      
+      const addNode = graph.addNode({
+        ...graphNodeLibrary.addStart,
+        x: cycleStartBBox.x + 64,
+        y: cycleStartBBox.y,
+        data: {
+          type: 'add-node',
+          label: '添加节点',
+          icon: '+',
+          parentId: node.id,
+          cycle: data.id,
+        },
+      });
+      
+      node.addChild(addNode);
+      
+      // 连接cycle-start和add-node
+      const sourcePorts = cycleStartNode.getPorts();
+      const targetPorts = addNode.getPorts();
+      const sourcePort = sourcePorts.find((port: any) => port.group === 'right')?.id || 'right';
+      const targetPort = targetPorts.find((port: any) => port.group === 'left')?.id || 'left';
+      
+      graph.addEdge({
+        source: { cell: cycleStartNode.id, port: sourcePort },
+        target: { cell: addNode.id, port: targetPort },
+        attrs: {
+          line: {
+            stroke: edge_color,
+            strokeWidth: 1,
+            targetMarker: {
+              name: 'block',
+              size: 8,
+            },
+          },
+        },
+      });
+    }
+  }
+
  const initNodes = () => {
+    // 检查是否存在cycle为当前节点ID的子节点，若存在则不调用initNodes，避免重复创建
+    const existingCycleNodes = graph.getNodes().filter((n: any) => 
+      n.getData()?.cycle === data.id
+    );
+    if (existingCycleNodes.length > 0) return;
    // 添加默认子节点
    const parentBBox = node.getBBox();
    const centerX = parentBBox.x + 24; // 默认节点宽度的一半
    const centerY = parentBBox.y + 50; // 默认节点高度的一半
    
-    const childNode1 = graph.addNode({
-      ...graphNodeLibrary.groupStart,
+    const cycleStartNode = graph.addNode({
+      ...graphNodeLibrary.cycleStart,
      x: centerX,
      y: centerY,
      data: {
-        type: 'default',
-        label: '开始',
-        // icon: '📌',
+        type: 'cycle-start',
        parentId: node.id,
-        isDefault: true // 标记为默认节点，不可删除
+        isDefault: true, // 标记为默认节点，不可删除
+        cycle: data.id,
      },
    });
-    const childNode2 = graph.addNode({
+    const addNode = graph.addNode({
      ...graphNodeLibrary.addStart,
-      x: centerX + 150,
+      x: centerX + 64,
      y: centerY,
      data: {
-        type: 'default',
+        type: 'add-node',
        label: '添加节点',
        icon: '+',
        parentId: node.id,
+        cycle: data.id,
      },
    });
-    node.addChild(childNode1)
-    node.addChild(childNode2)
+    node.addChild(cycleStartNode)
+    node.addChild(addNode)
+    const sourcePorts = cycleStartNode.getPorts()
+    const targetPorts = addNode.getPorts()
+    let sourcePort = sourcePorts.find((port: any) => port.group === 'right')?.id || 'right';
+
+    const edgeConfig = {
+      source: {
+        cell: cycleStartNode.id,
+        port: sourcePort
+      },
+      target: {
+        cell: addNode.id,
+        port: targetPorts.find((port: any) => port.group === 'left')?.id || 'left'
+      },
+      attrs: {
+        line: {
+          stroke: edge_color,
+          strokeWidth: 1,
+          targetMarker: {
+            name: 'block',
+            size: 8,
+          },
+        },
+      },
+    }
+
+    graph.addEdge(edgeConfig)
  }

-    return (
-      <div className={clsx('rb:cursor-pointer rb:group rb:relative rb:h-16 rb:w-60 rb:p-2.5 rb:border rb:rounded-xl rb:bg-white rb:hover:shadow-[0px_2px_6px_0px_rgba(33,35,50,0.12)]', {
-        'rb:border-[#155EEF]': data.isSelected,
-        'rb:border-[#DFE4ED]': !data.isSelected
-      })}>
-        <div className="rb:flex rb:items-center rb:justify-between">
-          <div className="rb:flex rb:items-center rb:gap-2 rb:flex-1">
-            <img src={data.icon} className="rb:w-5 rb:h-5" />
-            <div className="rb:wrap-break-word rb:line-clamp-1">{data.name ?? t(`workflow.${data.type}`)}</div>
-          </div>
-          
-          <div 
-            className="rb:w-5 rb:h-5 rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/deleteBorder.svg')] rb:hover:bg-[url('@/assets/images/deleteBg.svg')]" 
-            onClick={(e) => {
-              e.stopPropagation()
-              node.remove()
-            }}
-          ></div>
+  return (
+    <div className={clsx('rb:cursor-pointer rb:group rb:relative rb:h-full rb:w-full rb:p-2.5 rb:border rb:rounded-xl rb:bg-white rb:hover:shadow-[0px_2px_6px_0px_rgba(33,35,50,0.12)]', {
+      'rb:border-[#155EEF]': data.isSelected,
+      'rb:border-[#DFE4ED]': !data.isSelected
+    })}>
+      <div className="rb:flex rb:items-center rb:justify-between">
+        <div className="rb:flex rb:items-center rb:gap-2 rb:flex-1">
+          <img src={data.icon} className="rb:w-5 rb:h-5" />
+          <div className="rb:wrap-break-word rb:line-clamp-1">{data.name ?? t(`workflow.${data.type}`)}</div>
        </div>
-        <div className="rb:mt-6 rb:min-h-37.5 rb:w-full rb:bg-[radial-gradient(circle,#e5e7eb_1px,transparent_1px)] rb:bg-size-[12px_12px]"></div>
+        
+        <div 
+          className="rb:w-5 rb:h-5 rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/deleteBorder.svg')] rb:hover:bg-[url('@/assets/images/deleteBg.svg')]" 
+          onClick={(e) => {
+            e.stopPropagation()
+            node.remove()
+          }}
+        ></div>
      </div>
-    );
+      <div className="rb:mt-3 rb:min-h-[calc(100%-36px)] rb:w-full rb:bg-[radial-gradient(circle,#e5e7eb_1px,transparent_1px)] rb:bg-size-[12px_12px]"></div>
+    </div>
+  );
 };

 export default LoopNode;
--- a/web/src/views/Workflow/components/Nodes/NormalNode.tsx
+++ b/web/src/views/Workflow/components/Nodes/NormalNode.tsx
@@ -7,7 +7,7 @@ const NormalNode: ReactShapeConfig['component'] = ({ node }) => {
  const { t } = useTranslation()

  return (
-    <div className={clsx('rb:cursor-pointer rb:group rb:relative rb:h-16 rb:w-60 rb:p-2.5 rb:border rb:rounded-xl rb:bg-white rb:hover:shadow-[0px_2px_6px_0px_rgba(33,35,50,0.12)]', {
+    <div className={clsx('rb:cursor-pointer rb:group rb:relative rb:h-full rb:w-full rb:p-2.5 rb:border rb:rounded-xl rb:bg-white rb:hover:shadow-[0px_2px_6px_0px_rgba(33,35,50,0.12)]', {
      'rb:border-[#155EEF]': data.isSelected,
      'rb:border-[#DFE4ED]': !data.isSelected
    })}>