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 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 type {NodeDefinition, NodeCategory} from '../types';
import { import {
PlayCircleOutlined, PlayCircleOutlined,
@ -144,69 +144,71 @@ const NodePanel: React.FC<NodePanelProps> = ({onNodeDragStart}) => {
padding: '12px 16px' padding: '12px 16px'
}; };
// 构建折叠面板的 items // 构建折叠面板的 items，只包含有节点的分类
const collapseItems = Object.entries(categoryConfig).map(([category, {label, key}]) => ({ const collapseItems = Object.entries(categoryConfig)
key, .filter(([category]) => groupedNodes[category as NodeCategory]?.length > 0) // 过滤掉没有节点的分类
label: <span style={{fontSize: '14px', fontWeight: 500}}>{label}</span>, .map(([category, {label, key}]) => ({
children: ( key,
<div style={{ label: <span style={{fontSize: '14px', fontWeight: 500}}>{label}</span>,
display: 'flex', children: (
flexDirection: 'column', <div style={{
gap: '12px', display: 'flex',
padding: '8px 4px' flexDirection: 'column',
}}> gap: '12px',
{groupedNodes[category as NodeCategory]?.map(node => ( padding: '8px 4px'
<Tooltip }}>
key={node.id} {groupedNodes[category as NodeCategory]?.map(node => (
title={ <Tooltip
<div> key={node.id}
<div style={{fontSize: '14px', fontWeight: 500}}>{node.description}</div> title={
<div style={{marginTop: 12}}> <div>
<div style={{fontSize: '13px', color: '#8c8c8c'}}>功能特点：</div> <div style={{fontSize: '14px', fontWeight: 500}}>{node.description}</div>
<ul style={{ <div style={{marginTop: 12}}>
paddingLeft: 16, <div style={{fontSize: '13px', color: '#8c8c8c'}}>功能特点：</div>
margin: '8px 0', <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', fontSize: '13px',
color: '#595959' color: '#262626',
}}> overflow: 'hidden',
{node.graphConfig.details.features.map((feature, index) => ( textOverflow: 'ellipsis',
<li key={index}>{feature}</li> whiteSpace: 'nowrap',
))} }}>{node.name}</span>
</ul>
</div> </div>
</div> </div>
} </Tooltip>
overlayStyle={tooltipStyle} ))}
overlayInnerStyle={tooltipOverlayInnerStyle} </div>
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>
),
}));
return ( return (
<Card <Card