feat: if else node

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

@@ -1,8 +1,40 @@
 import type { FC } from 'react'
+import { useTranslation } from 'react-i18next'
+import { mockData } from './mock'
+import { ComparisonOperator } from './types'
+import { isEmptyRelatedOperator } from './utils'
+import { Variable02 } from '@/app/components/base/icons/src/vender/solid/development'
+const i18nPrefix = 'workflow.nodes.ifElse'
+
+const notTranslateKey = [
+  ComparisonOperator.equal, ComparisonOperator.notEqual,
+  ComparisonOperator.largerThan, ComparisonOperator.largerThanOrEqual,
+  ComparisonOperator.lessThan, ComparisonOperator.lessThanOrEqual,
+]
 
 const Node: FC = () => {
+  const { t } = useTranslation()
+  const { conditions, logical_operator } = mockData
+
   return (
-    <div>if else</div>
+    <div className='px-3'>
+      <div className='mb-0.5 leading-4 text-[10px] font-medium text-gray-500 uppercase'>{t(`${i18nPrefix}.conditions`)}</div>
+      <div className='space-y-0.5'>
+        {conditions.map((condition, i) => (
+          <div key={condition.id} className='relative'>
+            <div className='flex items-center h-6 bg-gray-100 rounded-md  px-1 space-x-1 text-xs font-normal text-gray-700'>
+              <Variable02 className='w-3.5 h-3.5 text-primary-500' />
+              <span>{condition.variable_selector.slice(-1)[0]}</span>
+              <span className='text-gray-500'>{notTranslateKey.includes(condition.comparison_operator) ? condition.comparison_operator : t(`${i18nPrefix}.comparisonOperator.${condition.comparison_operator}`)}</span>
+              {!isEmptyRelatedOperator(condition.comparison_operator) && <span>{condition.value}</span>}
+            </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>
   )
 }
 

web/app/components/workflow/nodes/if-else/utils.ts

@@ -0,0 +1,5 @@
+import { ComparisonOperator } from './types'
+
+export const isEmptyRelatedOperator = (operator: ComparisonOperator) => {
+  return [ComparisonOperator.empty, ComparisonOperator.notEmpty, ComparisonOperator.isNull, ComparisonOperator.isNotNull].includes(operator)
+}

web/i18n/lang/workflow.en.ts

@@ -43,6 +43,23 @@ const translation = {
         output: 'Transformed content',
       },
     },
+    ifElse: {
+      conditions: 'Conditions',
+      and: 'and',
+      or: 'or',
+      comparisonOperator: {
+        'contains': 'contains',
+        'not contains': 'not contains',
+        'start with': 'start with',
+        'end with': 'end with',
+        'is': 'is',
+        'is not': 'is not',
+        'empty': 'empty',
+        'not empty': 'not empty',
+        'null': 'is null',
+        'not null': 'is not null',
+      },
+    },
   },
 }
 

web/i18n/lang/workflow.zh.ts

@@ -43,6 +43,23 @@ const translation = {
         output: '转换后内容',
       },
     },
+    ifElse: {
+      conditions: '条件',
+      and: '且',
+      or: '或',
+      comparisonOperator: {
+        'contains': '包含',
+        'not contains': '不包含',
+        'start with': '开始是',
+        'end with': '结束是',
+        'is': '是',
+        'is not': '不是',
+        'empty': '为空',
+        'not empty': '不为空',
+        'null': '空',
+        'not null': '不为空',
+      },
+    },
   },
 }