From 296b5d3b9ec3fcf1bb2d40176f9cfebda93b10ae Mon Sep 17 00:00:00 2001
From: asp_ly <dengqichen@iscmtech.com>
Date: Sat, 14 Dec 2024 19:24:34 +0800
Subject: [PATCH] 1

---
 .../Design/components/NodePanel.tsx           | 124 +++++++++---------
 1 file changed, 63 insertions(+), 61 deletions(-)

diff --git a/frontend/src/pages/Workflow/Definition/Design/components/NodePanel.tsx b/frontend/src/pages/Workflow/Definition/Design/components/NodePanel.tsx
index b276cc2f..698e2505 100644
--- a/frontend/src/pages/Workflow/Definition/Design/components/NodePanel.tsx
+++ b/frontend/src/pages/Workflow/Definition/Design/components/NodePanel.tsx
@@ -1,5 +1,5 @@
 import React, {useState, useEffect} from 'react';
-import {Card, Collapse, Tooltip, message} from 'antd';
+import {Card, Collapse, Tooltip, message, Spin} from 'antd';
 import type {NodeDefinition, NodeCategory} from '../types';
 import {
     PlayCircleOutlined,
@@ -144,69 +144,71 @@ const NodePanel: React.FC<NodePanelProps> = ({onNodeDragStart}) => {
         padding: '12px 16px'
     };
 
-    // 构建折叠面板的 items
-    const collapseItems = Object.entries(categoryConfig).map(([category, {label, key}]) => ({
-        key,
-        label: <span style={{fontSize: '14px', fontWeight: 500}}>{label}</span>,
-        children: (
-            <div style={{
-                display: 'flex',
-                flexDirection: 'column',
-                gap: '12px',
-                padding: '8px 4px'
-            }}>
-                {groupedNodes[category as NodeCategory]?.map(node => (
-                    <Tooltip
-                        key={node.id}
-                        title={
-                            <div>
-                                <div style={{fontSize: '14px', fontWeight: 500}}>{node.description}</div>
-                                <div style={{marginTop: 12}}>
-                                    <div style={{fontSize: '13px', color: '#8c8c8c'}}>功能特点：</div>
-                                    <ul style={{
-                                        paddingLeft: 16,
-                                        margin: '8px 0',
+    // 构建折叠面板的 items，只包含有节点的分类
+    const collapseItems = Object.entries(categoryConfig)
+        .filter(([category]) => groupedNodes[category as NodeCategory]?.length > 0) // 过滤掉没有节点的分类
+        .map(([category, {label, key}]) => ({
+            key,
+            label: <span style={{fontSize: '14px', fontWeight: 500}}>{label}</span>,
+            children: (
+                <div style={{
+                    display: 'flex',
+                    flexDirection: 'column',
+                    gap: '12px',
+                    padding: '8px 4px'
+                }}>
+                    {groupedNodes[category as NodeCategory]?.map(node => (
+                        <Tooltip
+                            key={node.id}
+                            title={
+                                <div>
+                                    <div style={{fontSize: '14px', fontWeight: 500}}>{node.description}</div>
+                                    <div style={{marginTop: 12}}>
+                                        <div style={{fontSize: '13px', color: '#8c8c8c'}}>功能特点：</div>
+                                        <ul style={{
+                                            paddingLeft: 16,
+                                            margin: '8px 0',
+                                            fontSize: '13px',
+                                            color: '#595959'
+                                        }}>
+                                            {node.graphConfig.details.features.map((feature, index) => (
+                                                <li key={index}>{feature}</li>
+                                            ))}
+                                        </ul>
+                                    </div>
+                                </div>
+                            }
+                            overlayStyle={tooltipStyle}
+                            overlayInnerStyle={tooltipOverlayInnerStyle}
+                            placement="right"
+                            arrow={false}
+                        >
+                            <div
+                                draggable
+                                onDragStart={(e) => handleDragStart(node, e)}
+                                style={getNodeItemStyle(node)}
+                            >
+                                <div style={{
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    justifyContent: 'center',
+                                    gap: '6px'
+                                }}>
+                                    {renderNodeIcon(node)}
+                                    <span style={{
                                         fontSize: '13px',
-                                        color: '#595959'
-                                    }}>
-                                        {node.graphConfig.details.features.map((feature, index) => (
-                                            <li key={index}>{feature}</li>
-                                        ))}
-                                    </ul>
+                                        color: '#262626',
+                                        overflow: 'hidden',
+                                        textOverflow: 'ellipsis',
+                                        whiteSpace: 'nowrap',
+                                    }}>{node.name}</span>
                                 </div>
                             </div>
-                        }
-                        overlayStyle={tooltipStyle}
-                        overlayInnerStyle={tooltipOverlayInnerStyle}
-                        placement="right"
-                        arrow={false}
-                    >
-                        <div
-                            draggable
-                            onDragStart={(e) => handleDragStart(node, e)}
-                            style={getNodeItemStyle(node)}
-                        >
-                            <div style={{
-                                display: 'flex',
-                                alignItems: 'center',
-                                justifyContent: 'center',
-                                gap: '6px'
-                            }}>
-                                {renderNodeIcon(node)}
-                                <span style={{
-                                    fontSize: '13px',
-                                    color: '#262626',
-                                    overflow: 'hidden',
-                                    textOverflow: 'ellipsis',
-                                    whiteSpace: 'nowrap',
-                                }}>{node.name}</span>
-                            </div>
-                        </div>
-                    </Tooltip>
-                ))}
-            </div>
-        ),
-    }));
+                        </Tooltip>
+                    ))}
+                </div>
+            )
+        }));
 
     return (
         <Card