From 8e5708048c49052ef30c613dbff0fb5be593c641 Mon Sep 17 00:00:00 2001
From: ZLY <zhongliangyuan@gdngsk.com>
Date: Thu, 13 Nov 2025 11:40:06 +0800
Subject: [PATCH] =?UTF-8?q?feat(flowEditor):=20=E7=BB=9F=E4=B8=80=E8=8A=82?=
 =?UTF-8?q?=E7=82=B9=E6=95=B0=E6=8D=AE=E7=B1=BB=E5=9E=8B=E6=98=BE=E7=A4=BA?=
 =?UTF-8?q?=E6=A0=BC=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 引入 formatDataType 工具函数格式化数据类型显示
- 为所有节点类型的输入输出标签添加数据类型样式
- 修复节点上下文菜单中复合组件的校验提示
- 调整节点输入输出标签的类名以区分样式
- 在节点内容组件中标准化数据类型展示逻辑
---
 .../flowEditor/components/nodeContentCode.tsx  | 18 +++++++++++++-----
 .../flowEditor/components/nodeContentImage.tsx | 13 ++++++++++---
 .../flowEditor/components/nodeContentLoop.tsx  | 12 +++++++++---
 .../flowEditor/components/nodeContentOther.tsx | 16 +++++++++++-----
 .../flowEditor/components/nodeContentREST.tsx  | 11 +++++++++--
 .../components/nodeContentSwitch.tsx           | 11 +++++++++--
 .../flowEditor/components/nodeContextMenu.tsx  |  7 ++++++-
 7 files changed, 67 insertions(+), 21 deletions(-)

diff --git a/src/pages/flowEditor/components/nodeContentCode.tsx b/src/pages/flowEditor/components/nodeContentCode.tsx
index 2de608f..e59140f 100644
--- a/src/pages/flowEditor/components/nodeContentCode.tsx
+++ b/src/pages/flowEditor/components/nodeContentCode.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import styles from '@/components/FlowEditor/node/style/baseOther.module.less';
 import { Handle, Position, useStore } from '@xyflow/react';
-import { deserializeValue, isJSON } from '@/utils/common';
+import { deserializeValue, formatDataType, isJSON } from '@/utils/common';
 import cronstrue from 'cronstrue/i18n';
 
 interface NodeContentData {
@@ -121,6 +121,7 @@ const NodeContent = ({ data }: { data: NodeContentData }) => {
           {apiIns.length > 0 && (
             <div className={styles['node-inputs']}>
               {apiIns.map((input, index) => (
+
                 <div key={input.id || `input-${index}`} className={styles['node-input-label']}>
                   {input.desc}
                 </div>
@@ -131,7 +132,7 @@ const NodeContent = ({ data }: { data: NodeContentData }) => {
           {apiOuts.length > 0 && (
             <div className={styles['node-outputs-api']}>
               {apiOuts.map((output, index) => (
-                <div key={output.id || `output-${index}`} className={styles['node-input-label']}>
+                <div key={output.id || `output-${index}`} className={styles['node-output-label']}>
                   {output.desc}
                 </div>
               ))}
@@ -155,7 +156,10 @@ const NodeContent = ({ data }: { data: NodeContentData }) => {
                 <div className={styles['node-inputs']}>
                   {dataIns.map((input, index) => (
                     <div key={input.id || `input-${index}`} className={styles['node-input-label']}>
-                      {input.id || `输入${index + 1}`} {input.dataType}
+                     <span
+                       className={styles['node-data-type']}
+                     >{input.id || `输入${index + 1}`} {formatDataType(input.dataType)}
+                      </span>
                     </div>
                   ))}
                 </div>
@@ -164,8 +168,12 @@ const NodeContent = ({ data }: { data: NodeContentData }) => {
               {dataOuts.length > 0 && !isEndNode && (
                 <div className={styles['node-outputs']}>
                   {dataOuts.map((output, index) => (
-                    <div key={output.id || `output-${index}`} className={styles['node-input-label']}>
-                      {output.dataType} {`${output.id}` || `输出${index + 1}`}
+                    <div key={output.id || `output-${index}`} className={styles['node-output-label']}>
+
+                    <span
+                      className={styles['node-data-type']}
+                    >{formatDataType(output.dataType)} {output.id || `输出${index + 1}`}
+                    </span>
                     </div>
                   ))}
                 </div>
diff --git a/src/pages/flowEditor/components/nodeContentImage.tsx b/src/pages/flowEditor/components/nodeContentImage.tsx
index 93f3c03..358198c 100644
--- a/src/pages/flowEditor/components/nodeContentImage.tsx
+++ b/src/pages/flowEditor/components/nodeContentImage.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import styles from '@/components/FlowEditor/node/style/baseOther.module.less';
 import { Handle, Position, useStore } from '@xyflow/react';
 import { Image } from '@arco-design/web-react';
+import { formatDataType } from '@/utils/common';
 
 interface NodeContentData {
   parameters?: {
@@ -151,7 +152,10 @@ const NodeContent = ({ data }: { data: NodeContentData }) => {
                 <div className={styles['node-inputs']}>
                   {dataIns.map((input, index) => (
                     <div key={input.id || `input-${index}`} className={styles['node-input-label']}>
-                      {`${input.desc} ${input.dataType}` || `输入${index + 1}`}
+                      <span
+                        className={styles['node-data-type']}
+                      >{input.id || `输入${index + 1}`} {formatDataType(input.dataType)}
+                      </span>
                     </div>
                   ))}
                 </div>
@@ -160,8 +164,11 @@ const NodeContent = ({ data }: { data: NodeContentData }) => {
               {dataOuts.length > 0 && !isEndNode && (
                 <div className={styles['node-outputs']}>
                   {dataOuts.map((output, index) => (
-                    <div key={output.id || `output-${index}`} className={styles['node-input-label']}>
-                      {output.dataType} {output.id || `输出${index + 1}`}
+                    <div key={output.id || `output-${index}`} className={styles['node-output-label']}>
+                    <span
+                      className={styles['node-data-type']}
+                    >{formatDataType(output.dataType)} {output.id || `输出${index + 1}`}
+                    </span>
                     </div>
                   ))}
                 </div>
diff --git a/src/pages/flowEditor/components/nodeContentLoop.tsx b/src/pages/flowEditor/components/nodeContentLoop.tsx
index 5f33725..cee25c5 100644
--- a/src/pages/flowEditor/components/nodeContentLoop.tsx
+++ b/src/pages/flowEditor/components/nodeContentLoop.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import styles from '@/components/FlowEditor/node/style/baseOther.module.less';
 import { Handle, Position, useStore } from '@xyflow/react';
-import { deserializeValue } from '@/utils/common';
+import { deserializeValue, formatDataType } from '@/utils/common';
 import cronstrue from 'cronstrue/i18n';
 
 interface NodeContentData {
@@ -150,7 +150,10 @@ const NodeContent = ({ data }: { data: NodeContentData }) => {
                 <div className={styles['node-inputs']}>
                   {dataIns.map((input, index) => (
                     <div key={input.id || `input-${index}`} className={styles['node-input-label']}>
-                      {input.id || `输入${index + 1}`} {input.dataType}
+                      <span
+                        className={styles['node-data-type']}
+                      >{input.id || `输入${index + 1}`} {formatDataType(input.dataType)}
+                      </span>
                     </div>
                   ))}
                 </div>
@@ -160,7 +163,10 @@ const NodeContent = ({ data }: { data: NodeContentData }) => {
                 <div className={styles['node-outputs']}>
                   {dataOuts.map((output, index) => (
                     <div key={output.id || `output-${index}`} className={styles['node-input-label']}>
-                      {output.dataType} {output.id || `输出${index + 1}`}
+                    <span
+                      className={styles['node-data-type']}
+                    >{formatDataType(output.dataType)} {output.id || `输出${index + 1}`}
+                    </span>
                     </div>
                   ))}
                 </div>
diff --git a/src/pages/flowEditor/components/nodeContentOther.tsx b/src/pages/flowEditor/components/nodeContentOther.tsx
index acb4b9f..1434ed9 100644
--- a/src/pages/flowEditor/components/nodeContentOther.tsx
+++ b/src/pages/flowEditor/components/nodeContentOther.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import styles from '@/components/FlowEditor/node/style/baseOther.module.less';
 import { Handle, Position, useStore } from '@xyflow/react';
-import { deserializeValue, isJSON } from '@/utils/common';
+import { deserializeValue, formatDataType, isJSON } from '@/utils/common';
 import cronstrue from 'cronstrue/i18n';
 import { useSelector } from 'react-redux';
 
@@ -252,7 +252,7 @@ const NodeContent = ({ data }: { data: NodeContentData }) => {
           {apiOuts.length > 0 && (
             <div className={styles['node-outputs']}>
               {apiOuts.map((output, index) => (
-                <div key={output.id || `output-${index}`} className={styles['node-input-label']}>
+                <div key={output.id || `output-${index}`} className={styles['node-output-label']}>
                   {output.desc}
                 </div>
               ))}
@@ -275,7 +275,10 @@ const NodeContent = ({ data }: { data: NodeContentData }) => {
               <div className={styles['node-inputs']}>
                 {dataIns.map((input, index) => (
                   <div key={input.id || `input-${index}`} className={styles['node-input-label']}>
-                    {input.id || `输入${index + 1}`} {input.dataType}
+                    <span
+                      className={styles['node-data-type']}
+                    >{input.id || `输入${index + 1}`} {formatDataType(input.dataType)}
+                    </span>
                   </div>
                 ))}
               </div>
@@ -283,8 +286,11 @@ const NodeContent = ({ data }: { data: NodeContentData }) => {
               {dataOuts.length > 0 && !isEndNode && (
                 <div className={styles['node-outputs']}>
                   {dataOuts.map((output, index) => (
-                    <div key={output.id || `output-${index}`} className={styles['node-input-label']}>
-                      {output.dataType} {output.id || `输出${index + 1}`}
+                    <div key={output.id || `output-${index}`} className={styles['node-output-label']}>
+                      <span
+                        className={styles['node-data-type']}
+                      >{formatDataType(output.dataType)} {output.id || `输出${index + 1}`}
+                      </span>
                     </div>
                   ))}
                 </div>
diff --git a/src/pages/flowEditor/components/nodeContentREST.tsx b/src/pages/flowEditor/components/nodeContentREST.tsx
index 5fceddb..33742e4 100644
--- a/src/pages/flowEditor/components/nodeContentREST.tsx
+++ b/src/pages/flowEditor/components/nodeContentREST.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import styles from '@/components/FlowEditor/node/style/baseOther.module.less';
 import { Handle, Position, useStore } from '@xyflow/react';
+import { formatDataType } from '@/utils/common';
 
 interface NodeContentData {
   parameters?: {
@@ -152,7 +153,10 @@ const NodeContent = ({ data }: { data: NodeContentData }) => {
                 <div className={styles['node-inputs']}>
                   {dataIns.map((input, index) => (
                     <div key={input.id || `input-${index}`} className={styles['node-input-label']}>
-                      {input.id || `输入${index + 1}`} {input.dataType}
+                      <span
+                        className={styles['node-data-type']}
+                      >{input.id || `输入${index + 1}`} {formatDataType(input.dataType)}
+                      </span>
                     </div>
                   ))}
                 </div>
@@ -162,7 +166,10 @@ const NodeContent = ({ data }: { data: NodeContentData }) => {
                 <div className={styles['node-outputs']}>
                   {dataOuts.map((output, index) => (
                     <div key={output.id || `output-${index}`} className={styles['node-input-label']}>
-                      {output.dataType} {`${output.id}` || `输出${index + 1}`}
+                      <span
+                        className={styles['node-data-type']}
+                      >{formatDataType(output.dataType)} {output.id || `输出${index + 1}`}
+                    </span>
                     </div>
                   ))}
                 </div>
diff --git a/src/pages/flowEditor/components/nodeContentSwitch.tsx b/src/pages/flowEditor/components/nodeContentSwitch.tsx
index 590b6aa..7e46d7a 100644
--- a/src/pages/flowEditor/components/nodeContentSwitch.tsx
+++ b/src/pages/flowEditor/components/nodeContentSwitch.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import styles from '@/components/FlowEditor/node/style/baseOther.module.less';
 import { Handle, Position, useStore } from '@xyflow/react';
+import { formatDataType } from '@/utils/common';
 
 interface NodeContentData {
   parameters?: {
@@ -148,7 +149,10 @@ const NodeContent = ({ data }: { data: NodeContentData }) => {
                 <div className={styles['node-inputs']}>
                   {dataIns.map((input, index) => (
                     <div key={input.id || `input-${index}`} className={styles['node-input-label']}>
-                      {input.id || `输入${index + 1}`} {input.dataType}
+                      <span
+                        className={styles['node-data-type']}
+                      >{input.id || `输入${index + 1}`} {formatDataType(input.dataType)}
+                      </span>
                     </div>
                   ))}
                 </div>
@@ -158,7 +162,10 @@ const NodeContent = ({ data }: { data: NodeContentData }) => {
                 <div className={styles['node-outputs']}>
                   {dataOuts.map((output, index) => (
                     <div key={output.id || `output-${index}`} className={styles['node-input-label']}>
-                      {output.dataType} {output.id || `输出${index + 1}`}
+                    <span
+                      className={styles['node-data-type']}
+                    >{formatDataType(output.dataType)} {output.id || `输出${index + 1}`}
+                    </span>
                     </div>
                   ))}
                 </div>
diff --git a/src/pages/flowEditor/components/nodeContextMenu.tsx b/src/pages/flowEditor/components/nodeContextMenu.tsx
index 3849e18..b0e90bd 100644
--- a/src/pages/flowEditor/components/nodeContextMenu.tsx
+++ b/src/pages/flowEditor/components/nodeContextMenu.tsx
@@ -1,6 +1,7 @@
 import React, { useEffect } from 'react';
-import { Menu } from '@arco-design/web-react';
+import { Menu, Message } from '@arco-design/web-react';
 import { Node } from '@xyflow/react';
+import { isJSON } from '@/utils/common';
 
 interface NodeContextMenuProps {
   node: Node;
@@ -36,6 +37,10 @@ const NodeContextMenu: React.FC<NodeContextMenuProps> = ({
     // 判断节点类型，如果是SUB类型则打开新标签页
     if (node.type === 'SUB') {
       // 创建自定义事件来通知打开新标签页
+      const customDef = isJSON((node as any).data.component.customDef) ? JSON.parse((node as any).data.component.customDef) : {};
+      if (Object.keys(customDef).length === 0) {
+        Message.warning('新导入的复合组件请保存后再进行编辑！');
+      }
       const openTabEvent = new CustomEvent('openSubNodeTab', {
         detail: { node }
       });