ngskcloud
/
flow-playform-react
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(flowEditor): 统一节点数据类型显示格式

Browse Source 
- 引入 formatDataType 工具函数格式化数据类型显示
- 为所有节点类型的输入输出标签添加数据类型样式
- 修复节点上下文菜单中复合组件的校验提示
- 调整节点输入输出标签的类名以区分样式
- 在节点内容组件中标准化数据类型展示逻辑
master
钟良源 3 months ago
parent 862080357b
commit 8e5708048c
7 changed files with 67 additions and 21 deletions
Show Stats Download Patch File Download Diff File

18
src/pages/flowEditor/components/nodeContentCode.tsx
Unescape Escape View File

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

13
src/pages/flowEditor/components/nodeContentImage.tsx
Unescape Escape View File

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

12
src/pages/flowEditor/components/nodeContentLoop.tsx
Unescape Escape View File

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

16
src/pages/flowEditor/components/nodeContentOther.tsx
Unescape Escape View File

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

11
src/pages/flowEditor/components/nodeContentREST.tsx
Unescape Escape View File

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

11
src/pages/flowEditor/components/nodeContentSwitch.tsx
Unescape Escape View File

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

7
src/pages/flowEditor/components/nodeContextMenu.tsx
Unescape Escape View File

@ -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 }
});

Write Preview
Loading…
Cancel
Save