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

style(flowEditor):优化节点内容渲染逻辑

Browse Source
master
钟良源 3 months ago
parent 7237faaebd
commit 797487aaea
1 changed files with 38 additions and 39 deletions
Show Stats Download Patch File Download Diff File

77
src/pages/flowEditor/components/nodeContentApp.tsx
Unescape Escape View File

@ -2,7 +2,6 @@ import React, { useMemo } from 'react';
import styles from '@/components/FlowEditor/node/style/baseOther.module.less'; import styles from '@/components/FlowEditor/node/style/baseOther.module.less';
import { Handle, Position, useStore } from '@xyflow/react'; import { Handle, Position, useStore } from '@xyflow/react';
import { deserializeValue, isJSON } from '@/utils/common'; import { deserializeValue, isJSON } from '@/utils/common';
import cronstrue from 'cronstrue/i18n';
interface NodeContentData { interface NodeContentData {
parameters?: { parameters?: {
@ -224,25 +223,25 @@ const NodeContent = ({ data }: { data: NodeContentData }) => {
<div className={styles['node-api-box']}> <div className={styles['node-api-box']}>
<div className={styles['node-content-api']}> <div className={styles['node-content-api']}>
{apiIns.length > 0 && ( {/*{apiIns.length > 0 && (*/}
<div className={styles['node-inputs']}> <div className={styles['node-inputs']}>
{apiIns.map((input, index) => { {apiIns.map((input, index) => {
// 查找关联的事件分组 // 查找关联的事件分组
const group = findApiGroupByTopic(input, eventGroups); const group = findApiGroupByTopic(input, eventGroups);
return ( return (
<div <div
key={input.eventId || `input-${index}`} key={input.eventId || `input-${index}`}
className={styles['node-input-label']} className={styles['node-input-label']}
style={{ style={{
color: group ? group.color : '#000' color: group ? group.color : '#000'
}} }}
> >
{isValidApi(input) ? input.name : ''} {isValidApi(input) ? input.name : ''}
</div> </div>
); );
})} })}
</div> </div>
)} {/*)}*/}
{apiOuts.length > 0 && ( {apiOuts.length > 0 && (
<div className={styles['node-outputs']}> <div className={styles['node-outputs']}>
@ -273,25 +272,25 @@ const NodeContent = ({ data }: { data: NodeContentData }) => {
{/*content栏-data部分*/} {/*content栏-data部分*/}
<div className={styles['node-data-box']}> <div className={styles['node-data-box']}>
<div className={styles['node-content']}> <div className={styles['node-content']}>
{dataIns.length > 0 && ( {/*{dataIns.length > 0 && (*/}
<div className={styles['node-inputs']}> <div className={styles['node-inputs']}>
{dataIns.map((input, index) => { {dataIns.map((input, index) => {
// 查找关联的事件分组 // 查找关联的事件分组
const group = findRelatedEventGroup(input, eventGroups, 'eventSends'); const group = findRelatedEventGroup(input, eventGroups, 'eventSends');
return ( return (
<div <div
key={input.id || `input-${index}`} key={input.id || `input-${index}`}
className={styles['node-input-label']} className={styles['node-input-label']}
style={{ style={{
color: group ? group.color : '#000' color: group ? group.color : '#000'
}} }}
> >
{isValidData(input) ? `${input.name || input.id} ${input?.dataType}` : ''} {isValidData(input) ? `${input.name || input.id} ${input?.dataType}` : ''}
</div> </div>
); );
})} })}
</div> </div>
)} {/*)}*/}
{dataOuts.length > 0 && ( {dataOuts.length > 0 && (
<div className={styles['node-outputs']}> <div className={styles['node-outputs']}>

Write Preview
Loading…
Cancel
Save