ai-coding/deploy-ease-platform
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

1

Browse Source
This commit is contained in:
asp_ly 2024-12-14 19:24:34 +08:00
parent 3bb012457b
commit 296b5d3b9e
1 changed files with 63 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

124
frontend/src/pages/Workflow/Definition/Design/components/NodePanel.tsx
View File

@ -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