From 41c1cb5c07c1134b2a946b8cf5e35a646fd8ca6f Mon Sep 17 00:00:00 2001 From: ZLY Date: Fri, 29 Aug 2025 14:31:54 +0800 Subject: [PATCH] =?UTF-8?q?feat(flowEditor):=20=E4=B8=BA=E8=8A=82=E7=82=B9?= =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E5=9B=BE=E6=A0=87=E5=B9=B6=E4=BC=98=E5=8C=96?= =?UTF-8?q?=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 在 localNodeData 中添加节点图标 - 在侧边栏中使用 DynamicIcon 组件显示节点图标 -调整节点显示样式，增加图标与名称的间距 - 新增 DynamicIcon 组件，用于动态加载图标 --- src/components/DynamicIcon/index.tsx | 29 ++++++++++++++++ .../sideBar/config/localNodeData.ts | 33 ++++++++++--------- src/pages/flowEditor/sideBar/sideBar.tsx | 6 +++- .../sideBar/style/style.module.less | 15 +++++++++ 4 files changed, 66 insertions(+), 17 deletions(-) create mode 100644 src/components/DynamicIcon/index.tsx diff --git a/src/components/DynamicIcon/index.tsx b/src/components/DynamicIcon/index.tsx new file mode 100644 index 0000000..51b3f71 --- /dev/null +++ b/src/components/DynamicIcon/index.tsx @@ -0,0 +1,29 @@ +import React from 'react'; +import * as ArcoIcons from '@arco-design/web-react/icon'; + +export interface DynamicIconProps { + type: string; + library?: 'arco'; // 可以扩展支持更多图标库 + [key: string]: any; +} + +const DynamicIcon: React.FC = ({ + type, + library = 'arco', + ...restProps + }) => { + let IconComponent: React.ComponentType | undefined; + + if (library === 'arco') { + IconComponent = ArcoIcons[type as keyof typeof ArcoIcons]; + } // library 有其他的图标库时可添加 + + if (!IconComponent) { + console.warn(`Icon '${type}' from library '${library}' not found`); + return null; + } + + return ; +}; + +export default DynamicIcon; diff --git a/src/pages/flowEditor/sideBar/config/localNodeData.ts b/src/pages/flowEditor/sideBar/config/localNodeData.ts index 863055c..9df864d 100644 --- a/src/pages/flowEditor/sideBar/config/localNodeData.ts +++ b/src/pages/flowEditor/sideBar/config/localNodeData.ts @@ -17,28 +17,29 @@ const defaultParameters = { // 定义节点基本信息 const nodeDefinitions = [ - { nodeName: '条件选择', nodeType: 'CONDITION', nodeGroup: 'common' }, - { nodeName: '与门', nodeType: 'AND', nodeGroup: 'common' }, - { nodeName: '或门', nodeType: 'OR', nodeGroup: 'common' }, - { nodeName: '等待', nodeType: 'WAIT', nodeGroup: 'common' }, - { nodeName: '循环', nodeType: 'LOOP', nodeGroup: 'common' }, - { nodeName: '周期', nodeType: 'CYCLE', nodeGroup: 'common' }, - { nodeName: '事件接收', nodeType: 'EVENTLISTENE', nodeGroup: 'common' }, - { nodeName: '事件发送', nodeType: 'EVENTSEND', nodeGroup: 'common' }, - { nodeName: 'JSON转字符串', nodeType: 'JSON2STR', nodeGroup: 'common' }, - { nodeName: '字符串转JSON', nodeType: 'STR2JSON', nodeGroup: 'common' }, - { nodeName: 'JSON封装', nodeType: 'JSONCONVERT', nodeGroup: 'common' }, - { nodeName: '结果展示', nodeType: 'RESULT', nodeGroup: 'common' }, - { nodeName: '图片展示', nodeType: 'IMAGE', nodeGroup: 'common' }, - { nodeName: '代码编辑器', nodeType: 'CODE', nodeGroup: 'common' }, - { nodeName: 'REST调用', nodeType: 'REST', nodeGroup: 'common' }, + { nodeName: '条件选择', nodeType: 'CONDITION', nodeGroup: 'common', icon: 'IconBranch' }, + { nodeName: '与门', nodeType: 'AND', nodeGroup: 'common', icon: 'IconShareAlt' }, + { nodeName: '或门', nodeType: 'OR', nodeGroup: 'common', icon: 'IconPause' }, + { nodeName: '等待', nodeType: 'WAIT', nodeGroup: 'common', icon: 'IconClockCircle' }, + { nodeName: '循环', nodeType: 'LOOP', nodeGroup: 'common', icon: 'IconSync' }, + { nodeName: '周期', nodeType: 'CYCLE', nodeGroup: 'common', icon: 'IconSchedule' }, + { nodeName: '事件接收', nodeType: 'EVENTLISTENE', nodeGroup: 'common', icon: 'IconImport' }, + { nodeName: '事件发送', nodeType: 'EVENTSEND', nodeGroup: 'common', icon: 'IconExport' }, + { nodeName: 'JSON转字符串', nodeType: 'JSON2STR', nodeGroup: 'common', icon: 'IconCodeBlock' }, + { nodeName: '字符串转JSON', nodeType: 'STR2JSON', nodeGroup: 'common', icon: 'IconCodeSquare' }, + { nodeName: 'JSON封装', nodeType: 'JSONCONVERT', nodeGroup: 'common', icon: 'IconTranslate' }, + { nodeName: '结果展示', nodeType: 'RESULT', nodeGroup: 'common', icon: 'IconInteraction' }, + { nodeName: '图片展示', nodeType: 'IMAGE', nodeGroup: 'common', icon: 'IconImage' }, + { nodeName: '代码编辑器', nodeType: 'CODE', nodeGroup: 'common', icon: 'IconCode' }, + { nodeName: 'REST调用', nodeType: 'REST', nodeGroup: 'common', icon: 'IconCloudDownload' } ]; // 通过映射生成完整的节点数据数组 -export const localNodeData = nodeDefinitions.map(({ nodeName, nodeType, nodeGroup }) => ({ +export const localNodeData = nodeDefinitions.map(({ nodeName, nodeType, nodeGroup, icon }) => ({ nodeName, nodeType, nodeGroup, + icon, data: { parameters: { ...defaultParameters } } diff --git a/src/pages/flowEditor/sideBar/sideBar.tsx b/src/pages/flowEditor/sideBar/sideBar.tsx index f54ad7f..c7766ef 100644 --- a/src/pages/flowEditor/sideBar/sideBar.tsx +++ b/src/pages/flowEditor/sideBar/sideBar.tsx @@ -1,5 +1,6 @@ import React from 'react'; import styles from './style/style.module.less'; +import DynamicIcon from '@/components/DynamicIcon'; import { Card } from '@arco-design/web-react'; import { Collapse } from '@arco-design/web-react'; import { localNodeData } from './config/localNodeData'; @@ -32,7 +33,10 @@ const SideBar: React.FC = () => { draggable onDragStart={(event) => onDragStart(event, item)} > -
{item.nodeName}
+
+ +
{item.nodeName}
+
))} diff --git a/src/pages/flowEditor/sideBar/style/style.module.less b/src/pages/flowEditor/sideBar/style/style.module.less index bb038d8..b184dba 100644 --- a/src/pages/flowEditor/sideBar/style/style.module.less +++ b/src/pages/flowEditor/sideBar/style/style.module.less @@ -13,4 +13,19 @@ :global(.arco-collapse-item-content-box) { padding: 4px 6px; } + + :global(.arco-card-body ) { + padding: 15px 10px; + } + + .flex-box { + display: flex; + align-items: center; + + .node-name { + margin-left: 10px; + font-size: 14px; + font-weight: 700; + } + } } \ No newline at end of file