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

web/app/components/workflow/nodes/_base/components/readonly-input-with-select-var.tsx

@@ -1,6 +1,7 @@
 'use client'
 import type { FC } from 'react'
 import React from 'react'
+import cn from 'classnames'
 import { useWorkflow } from '../../../hooks'
 import { BlockEnum } from '../../../types'
 import { VarBlockIcon } from '../../../block-icon'
@@ -10,6 +11,7 @@ import { Variable02 } from '@/app/components/base/icons/src/vender/solid/develop
 type Props = {
   nodeId: string
   value: string
+  className?: string
 }
 
 const VAR_PLACEHOLDER = '@#!@#!'
@@ -17,6 +19,7 @@ const VAR_PLACEHOLDER = '@#!@#!'
 const ReadonlyInputWithSelectVar: FC<Props> = ({
   nodeId,
   value,
+  className,
 }) => {
   const { getBeforeNodesInSameBranchIncludeParent } = useWorkflow()
   const availableNodes = getBeforeNodesInSameBranchIncludeParent(nodeId)
@@ -64,7 +67,7 @@ const ReadonlyInputWithSelectVar: FC<Props> = ({
   })()
 
   return (
-    <div className='break-all text-xs'>
+    <div className={cn('break-all text-xs', className)}>
       {res}
     </div>
   )

web/app/components/workflow/nodes/_base/components/variable-tag.tsx

@@ -0,0 +1,66 @@
+import { useMemo } from 'react'
+import { useNodes } from 'reactflow'
+import { capitalize } from 'lodash-es'
+import { VarBlockIcon } from '@/app/components/workflow/block-icon'
+import type {
+  CommonNodeType,
+  ValueSelector,
+  VarType,
+} from '@/app/components/workflow/types'
+import { BlockEnum } from '@/app/components/workflow/types'
+import { Line3 } from '@/app/components/base/icons/src/public/common'
+import { Variable02 } from '@/app/components/base/icons/src/vender/solid/development'
+import { isSystemVar } from '@/app/components/workflow/nodes/_base/components/variable/utils'
+
+type VariableTagProps = {
+  valueSelector: ValueSelector
+  varType: VarType
+}
+const VariableTag = ({
+  valueSelector,
+  varType,
+}: VariableTagProps) => {
+  const nodes = useNodes<CommonNodeType>()
+  const node = useMemo(() => {
+    if (isSystemVar(valueSelector))
+      return nodes.find(node => node.data.type === BlockEnum.Start)
+
+    return nodes.find(node => node.id === valueSelector[0])
+  }, [nodes, valueSelector])
+
+  const variableName = isSystemVar(valueSelector) ? valueSelector.slice(0).join('.') : valueSelector.slice(1).join('.')
+
+  return (
+    <div className='inline-flex items-center px-1.5 max-w-full h-6 text-xs rounded-md border-[0.5px] border-[rgba(16, 2440,0.08)] bg-white shadow-xs'>
+      {
+        node && (
+          <VarBlockIcon
+            className='shrink-0 mr-0.5 text-[#354052]'
+            type={node!.data.type}
+          />
+        )
+      }
+      <div
+        className='max-w-[60px] truncate text-[#354052] font-medium'
+        title={node?.data.title}
+      >
+        {node?.data.title}
+      </div>
+      <Line3 className='shrink-0 mx-0.5' />
+      <Variable02 className='shrink-0 mr-0.5 w-3.5 h-3.5 text-[#155AEF]' />
+      <div
+        className='truncate text-[#155AEF] font-medium'
+        title={variableName}
+      >
+        {variableName}
+      </div>
+      {
+        varType && (
+          <div className='shrink-0 ml-0.5 text-[#676F83]'>{capitalize(varType)}</div>
+        )
+      }
+    </div>
+  )
+}
+
+export default VariableTag