hz/ebiz-dify-ai
1
0
Fork 0
mirror of http://112.124.100.131/huang.ze/ebiz-dify-ai.git synced 2025-12-11 03:46:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: workflow if-else support elif (#6072)

Browse Source
This commit is contained in:
zxhlyh
2024-07-10 18:20:13 +08:00
committed by GitHub
parent a62325ac87
commit ebba124c5c
25 changed files with 1215 additions and 492 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
web/app/components/workflow/nodes/if-else/node.tsx
View File

@@ -3,51 +3,62 @@ import React from 'react'
import { useTranslation } from 'react-i18next'
import type { NodeProps } from 'reactflow'
import { NodeSourceHandle } from '../_base/components/node-handle'
import { isComparisonOperatorNeedTranslate, isEmptyRelatedOperator } from './utils'
import { isEmptyRelatedOperator } from './utils'
import type { IfElseNodeType } from './types'
import { Variable02 } from '@/app/components/base/icons/src/vender/solid/development'
import ConditionValue from './components/condition-value'
const i18nPrefix = 'workflow.nodes.ifElse'
const IfElseNode: FC<NodeProps<IfElseNodeType>> = (props) => {
const { data } = props
const { t } = useTranslation()
const { conditions, logical_operator } = data
const { cases } = data
const casesLength = cases.length
return (
<div className='px-3'>
<div className='relative flex items-center h-6 px-1'>
<div className='w-full text-xs font-semibold text-right text-gray-700'>IF</div>
<NodeSourceHandle
{...props}
handleId='true'
handleClassName='!top-1/2 !-right-[21px] !-translate-y-1/2'
/>
</div>
<div className='space-y-0.5'>
{conditions.map((condition, i) => (
<div key={condition.id} className='relative'>
{(condition.variable_selector?.length > 0 && condition.comparison_operator && (isEmptyRelatedOperator(condition.comparison_operator!) ? true : !!condition.value))
? (
<div className='flex items-center h-6 px-1 space-x-1 text-xs font-normal text-gray-700 bg-gray-100 rounded-md'>
<Variable02 className='w-3.5 h-3.5 text-primary-500' />
<span>{condition.variable_selector.slice(-1)[0]}</span>
<span className='text-gray-500'>{isComparisonOperatorNeedTranslate(condition.comparison_operator) ? t(`${i18nPrefix}.comparisonOperator.${condition.comparison_operator}`) : condition.comparison_operator}</span>
{!isEmptyRelatedOperator(condition.comparison_operator!) && <span>{condition.value}</span>}
{
cases.map((caseItem, index) => (
<div key={caseItem.case_id}>
<div className='relative flex items-center h-6 px-1'>
<div className='flex items-center justify-between w-full'>
<div className='text-[10px] font-semibold text-text-tertiary'>
{casesLength > 1 && `CASE ${index + 1}`}
</div>
)
: (
<div className='flex items-center h-6 px-1 space-x-1 text-xs font-normal text-gray-500 bg-gray-100 rounded-md'>
{t(`${i18nPrefix}.conditionNotSetup`)}
<div className='text-[12px] font-semibold text-text-secondary'>{index === 0 ? 'IF' : 'ELIF'}</div>
</div>
<NodeSourceHandle
{...props}
handleId={caseItem.case_id}
handleClassName='!top-1/2 !-right-[21px] !-translate-y-1/2'
/>
</div>
<div className='space-y-0.5'>
{caseItem.conditions.map((condition, i) => (
<div key={condition.id} className='relative'>
{(condition.variable_selector?.length > 0 && condition.comparison_operator && (isEmptyRelatedOperator(condition.comparison_operator!) ? true : !!condition.value))
? (
<ConditionValue
variableSelector={condition.variable_selector}
operator={condition.comparison_operator}
value={condition.value}
/>
)
: (
<div className='flex items-center h-6 px-1 space-x-1 text-xs font-normal text-text-secondary bg-workflow-block-parma-bg rounded-md'>
{t(`${i18nPrefix}.conditionNotSetup`)}
</div>
)}
{i !== caseItem.conditions.length - 1 && (
<div className='absolute z-10 right-0 bottom-[-10px] leading-4 text-[10px] font-medium text-text-accent uppercase'>{t(`${i18nPrefix}.${caseItem.logical_operator}`)}</div>
)}
</div>
)}
{i !== conditions.length - 1 && (
<div className='absolute z-10 right-0 bottom-[-10px] leading-4 text-[10px] font-medium text-primary-600 uppercase'>{t(`${i18nPrefix}.${logical_operator}`)}</div>
)}
))}
</div>
</div>
))}
</div>
))
}
<div className='relative flex items-center h-6 px-1'>
<div className='w-full text-xs font-semibold text-right text-gray-700'>ELSE</div>
<div className='w-full text-xs font-semibold text-right text-text-secondary'>ELSE</div>
<NodeSourceHandle
{...props}
handleId='false'