Chore/variable label (#23270)

2025-08-01 15:43:36 +08:00
parent fd086b06a6
commit f78b903a49
30 changed files with 595 additions and 483 deletions
--- a/web/app/components/workflow/nodes/_base/components/readonly-input-with-select-var.tsx
+++ b/web/app/components/workflow/nodes/_base/components/readonly-input-with-select-var.tsx
@@ -4,12 +4,10 @@ import React from 'react'
 import cn from 'classnames'
 import { useWorkflow } from '../../../hooks'
 import { BlockEnum } from '../../../types'
-import { VarBlockIcon } from '../../../block-icon'
-import { getNodeInfoById, isConversationVar, isENV, isSystemVar } from './variable/utils'
-import { Line3 } from '@/app/components/base/icons/src/public/common'
-import { Variable02 } from '@/app/components/base/icons/src/vender/solid/development'
-import { BubbleX, Env } from '@/app/components/base/icons/src/vender/line/others'
-import { RiMoreLine } from '@remixicon/react'
+import { getNodeInfoById, isSystemVar } from './variable/utils'
+import {
+  VariableLabelInText,
+} from '@/app/components/workflow/nodes/_base/components/variable/variable-label'
 type Props = {
  nodeId: string
  value: string
@@ -42,40 +40,17 @@ const ReadonlyInputWithSelectVar: FC<Props> = ({

      const value = vars[index].split('.')
      const isSystem = isSystemVar(value)
-      const isEnv = isENV(value)
-      const isChatVar = isConversationVar(value)
      const node = (isSystem ? startNode : getNodeInfoById(availableNodes, value[0]))?.data
-      const varName = `${isSystem ? 'sys.' : ''}${value[value.length - 1]}`
      const isShowAPart = value.length > 2

      return (<span key={index}>
        <span className='relative top-[-3px] leading-[16px]'>{str}</span>
-        <div className=' inline-flex h-[16px] items-center rounded-[5px] bg-components-badge-white-to-dark px-1.5'>
-          {!isEnv && !isChatVar && (
-            <div className='flex items-center'>
-              <div className='p-[1px]'>
-                <VarBlockIcon
-                  className='!text-text-primary'
-                  type={node?.type || BlockEnum.Start}
-                />
-              </div>
-              <div className='mx-0.5 max-w-[60px] truncate text-xs font-medium text-text-secondary' title={node?.title}>{node?.title}</div>
-              <Line3 className='mr-0.5'></Line3>
-            </div>
-          )}
-          {isShowAPart && (
-            <div className='flex items-center'>
-              <RiMoreLine className='h-3 w-3 text-text-secondary' />
-              <Line3 className='mr-0.5 text-divider-deep'></Line3>
-            </div>
-          )}
-          <div className='flex items-center text-text-accent'>
-            {!isEnv && !isChatVar && <Variable02 className='h-3.5 w-3.5 shrink-0' />}
-            {isEnv && <Env className='h-3.5 w-3.5 shrink-0 text-util-colors-violet-violet-600' />}
-            {isChatVar && <BubbleX className='h-3.5 w-3.5 text-util-colors-teal-teal-700' />}
-            <div className={cn('ml-0.5 max-w-[50px] truncate text-xs font-medium', (isEnv || isChatVar) && 'text-text-primary')} title={varName}>{varName}</div>
-          </div>
-        </div>
+        <VariableLabelInText
+          nodeTitle={node?.title}
+          nodeType={node?.type}
+          notShowFullPath={isShowAPart}
+          variables={value}
+        />
      </span>)
    })
    return html
--- a/web/app/components/workflow/nodes/_base/components/variable-tag.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable-tag.tsx
@@ -1,9 +1,6 @@
 import { useCallback, useMemo } from 'react'
 import { useNodes, useReactFlow, useStoreApi } from 'reactflow'
-import { capitalize } from 'lodash-es'
 import { useTranslation } from 'react-i18next'
-import { RiErrorWarningFill } from '@remixicon/react'
-import { VarBlockIcon } from '@/app/components/workflow/block-icon'
 import type {
  CommonNodeType,
  Node,
@@ -11,13 +8,11 @@ import type {
  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 { BubbleX, Env } from '@/app/components/base/icons/src/vender/line/others'
 import { getNodeInfoById, isConversationVar, isENV, isSystemVar } from '@/app/components/workflow/nodes/_base/components/variable/utils'
-import Tooltip from '@/app/components/base/tooltip'
-import cn from '@/utils/classnames'
 import { isExceptionVariable } from '@/app/components/workflow/utils'
+import {
+  VariableLabelInSelect,
+} from '@/app/components/workflow/nodes/_base/components/variable/variable-label'

 type VariableTagProps = {
  valueSelector: ValueSelector
@@ -73,51 +68,20 @@ const VariableTag = ({

  const { t } = useTranslation()
  return (
-    <Tooltip popupContent={!isValid && t('workflow.errorMsg.invalidVariable')}>
-      <div className={cn('border-[rgba(16, 2440,0.08)] inline-flex h-6 max-w-full items-center rounded-md border-[0.5px] border-divider-subtle bg-components-badge-white-to-dark px-1.5 text-xs shadow-xs',
-        !isValid && 'border-red-400 !bg-[#FEF3F2]',
-      )}
-        onClick={(e) => {
-          if (e.metaKey || e.ctrlKey) {
-            e.stopPropagation()
-            handleVariableJump()
-          }
-        }}
-      >
-        {(!isEnv && !isChatVar && <>
-          {node && (
-            <>
-              <VarBlockIcon
-                type={node.data.type || BlockEnum.Start}
-                className='mr-0.5 !text-text-primary'
-              />
-              <div
-                className='max-w-[60px] truncate font-medium text-text-secondary'
-                title={node?.data.title}
-              >
-                {node?.data.title}
-              </div>
-            </>
-          )}
-          <Line3 className='mx-0.5 shrink-0' />
-          <Variable02 className={cn('mr-0.5 h-3.5 w-3.5 shrink-0 text-text-accent', isException && 'text-text-warning')} />
-        </>)}
-        {isEnv && <Env className='mr-0.5 h-3.5 w-3.5 shrink-0 text-util-colors-violet-violet-600' />}
-        {isChatVar && <BubbleX className='h-3.5 w-3.5 text-util-colors-teal-teal-700' />}
-        <div
-          className={cn('ml-0.5 truncate font-medium text-text-accent', (isEnv || isChatVar) && 'text-text-secondary', isException && 'text-text-warning')}
-          title={variableName}
-        >
-          {variableName}
-        </div>
-        {
-          !isShort && varType && (
-            <div className='ml-0.5 shrink-0 text-text-tertiary'>{capitalize(varType)}</div>
-          )
+    <VariableLabelInSelect
+      variables={valueSelector}
+      nodeType={node?.data.type}
+      nodeTitle={node?.data.title}
+      variableType={!isShort ? varType : undefined}
+      onClick={(e) => {
+        if (e.metaKey || e.ctrlKey) {
+          e.stopPropagation()
+          handleVariableJump()
        }
-        {!isValid && <RiErrorWarningFill className='ml-0.5 h-3 w-3 text-[#D92D20]' />}
-      </div>
-    </Tooltip>
+      }}
+      errorMsg={!isValid ? t('workflow.errorMsg.invalidVariable') : undefined}
+      isExceptionVariable={isException}
+    />
  )
 }

--- a/web/app/components/workflow/nodes/_base/components/variable/var-reference-picker.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/var-reference-picker.tsx
@@ -23,7 +23,6 @@ import { type CredentialFormSchema, type FormOption, FormTypeEnum } from '@/app/
 import { BlockEnum } from '@/app/components/workflow/types'
 import { VarBlockIcon } from '@/app/components/workflow/block-icon'
 import { Line3 } from '@/app/components/base/icons/src/public/common'
-import { BubbleX, Env } from '@/app/components/base/icons/src/vender/line/others'
 import { Variable02 } from '@/app/components/base/icons/src/vender/solid/development'
 import {
  PortalToFollowElem,
@@ -44,6 +43,7 @@ import VarFullPathPanel from './var-full-path-panel'
 import { noop } from 'lodash-es'
 import { useFetchDynamicOptions } from '@/service/use-plugins'
 import type { Tool } from '@/app/components/tools/types'
+import { VariableIconWithColor } from '@/app/components/workflow/nodes/_base/components/variable/variable-label'

 const TRIGGER_DEFAULT_WIDTH = 227

@@ -138,7 +138,6 @@ const VarReferencePicker: FC<Props> = ({
  useEffect(() => {
    if (triggerRef.current)
      setTriggerWidth(triggerRef.current.clientWidth)
-    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [triggerRef.current])

  const [varKindType, setVarKindType] = useState<VarKindType>(defaultVarKindType)
@@ -149,7 +148,6 @@ const VarReferencePicker: FC<Props> = ({
  const [open, setOpen] = useState(false)
  useEffect(() => {
    onOpen()
-    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [open])
  const hasValue = !isConstant && value.length > 0

@@ -362,6 +360,13 @@ const VarReferencePicker: FC<Props> = ({
    return schema
  }, [dynamicOptions])

+  const variableCategory = useMemo(() => {
+    if (isEnv) return 'environment'
+    if (isChatVar) return 'conversation'
+    if (isLoopVar) return 'loop'
+    return 'system'
+  }, [isEnv, isChatVar, isLoopVar])
+
  return (
    <div className={cn(className, !readonly && 'cursor-pointer')}>
      <PortalToFollowElem
@@ -458,10 +463,11 @@ const VarReferencePicker: FC<Props> = ({
                                    </div>
                                  )}
                                  <div className='flex items-center text-text-accent'>
-                                    {!hasValue && <Variable02 className='h-3.5 w-3.5' />}
                                    {isLoading && <RiLoader4Line className='h-3.5 w-3.5 animate-spin text-text-secondary' />}
-                                    {isEnv && <Env className='h-3.5 w-3.5 text-util-colors-violet-violet-600' />}
-                                    {isChatVar && <BubbleX className='h-3.5 w-3.5 text-util-colors-teal-teal-700' />}
+                                    <VariableIconWithColor
+                                      variableCategory={variableCategory}
+                                      isExceptionVariable={isException}
+                                    />
                                    <div className={cn('ml-0.5 truncate text-xs font-medium', isEnv && '!text-text-secondary', isChatVar && 'text-util-colors-teal-teal-700', isException && 'text-text-warning')} title={varName} style={{
                                      maxWidth: maxVarNameWidth,
                                    }}>{varName}</div>
--- a/web/app/components/workflow/nodes/_base/components/variable/var-reference-vars.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/var-reference-vars.tsx
@@ -5,7 +5,6 @@ import { useHover } from 'ahooks'
 import { useTranslation } from 'react-i18next'
 import cn from '@/utils/classnames'
 import { type NodeOutPutVar, type ValueSelector, type Var, VarType } from '@/app/components/workflow/types'
-import { Variable02 } from '@/app/components/base/icons/src/vender/solid/development'
 import { ChevronRight } from '@/app/components/base/icons/src/vender/line/arrows'
 import {
  PortalToFollowElem,
@@ -13,7 +12,6 @@ import {
  PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
 import Input from '@/app/components/base/input'
-import { BubbleX, Env } from '@/app/components/base/icons/src/vender/line/others'
 import { checkKeys } from '@/utils/var'
 import type { StructuredOutput } from '../../../llm/types'
 import { Type } from '../../../llm/types'
@@ -21,8 +19,8 @@ import PickerStructurePanel from '@/app/components/workflow/nodes/_base/componen
 import { varTypeToStructType } from './utils'
 import type { Field } from '@/app/components/workflow/nodes/llm/types'
 import { FILE_STRUCT } from '@/app/components/workflow/constants'
-import { Loop } from '@/app/components/base/icons/src/vender/workflow'
 import { noop } from 'lodash-es'
+import { VariableIconWithColor } from '@/app/components/workflow/nodes/_base/components/variable/variable-label'

 type ObjectChildrenProps = {
  nodeId: string
@@ -118,7 +116,6 @@ const Item: FC<ItemProps> = ({
  const open = (isObj || isStructureOutput) && isHovering
  useEffect(() => {
    onHovering && onHovering(isHovering)
-    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [isHovering])
  const handleChosen = (e: React.MouseEvent) => {
    e.stopPropagation()
@@ -132,6 +129,12 @@ const Item: FC<ItemProps> = ({
      onChange([nodeId, ...objPath, itemData.variable], itemData)
    }
  }
+  const variableCategory = useMemo(() => {
+    if (isEnv) return 'environment'
+    if (isChatVar) return 'conversation'
+    if (isLoopVar) return 'loop'
+    return 'system'
+  }, [isEnv, isChatVar, isSys, isLoopVar])
  return (
    <PortalToFollowElem
      open={open}
@@ -150,10 +153,10 @@ const Item: FC<ItemProps> = ({
          onMouseDown={e => e.preventDefault()}
        >
          <div className='flex w-0 grow items-center'>
-            {!isEnv && !isChatVar && !isLoopVar && <Variable02 className={cn('h-3.5 w-3.5 shrink-0 text-text-accent', isException && 'text-text-warning')} />}
-            {isEnv && <Env className='h-3.5 w-3.5 shrink-0 text-util-colors-violet-violet-600' />}
-            {isChatVar && <BubbleX className='h-3.5 w-3.5 shrink-0 text-util-colors-teal-teal-700' />}
-            {isLoopVar && <Loop className='h-3.5 w-3.5 shrink-0 text-util-colors-cyan-cyan-500' />}
+            <VariableIconWithColor
+              variableCategory={variableCategory}
+              isExceptionVariable={isException}
+            />
            {!isEnv && !isChatVar && (
              <div title={itemData.variable} className='system-sm-medium ml-1 w-0 grow truncate text-text-secondary'>{itemData.variable}</div>
            )}
@@ -219,11 +222,9 @@ const ObjectChildren: FC<ObjectChildrenProps> = ({
  const isHovering = isItemHovering || isChildrenHovering
  useEffect(() => {
    onHovering && onHovering(isHovering)
-    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [isHovering])
  useEffect(() => {
    onHovering && onHovering(isItemHovering)
-    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [isItemHovering])
  // absolute top-[-2px]
  return (
--- a/web/app/components/workflow/nodes/_base/components/variable/variable-label/base/variable-icon.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/variable-label/base/variable-icon.tsx
@@ -0,0 +1,28 @@
+import { memo } from 'react'
+import cn from '@/utils/classnames'
+import { useVarIcon } from '../hooks'
+import type { VarInInspectType } from '@/types/workflow'
+
+export type VariableIconProps = {
+  className?: string
+  variables?: string[]
+  variableCategory?: VarInInspectType | string
+}
+const VariableIcon = ({
+  className,
+  variables = [],
+  variableCategory,
+}: VariableIconProps) => {
+  const VarIcon = useVarIcon(variables, variableCategory)
+
+  return VarIcon && (
+    <VarIcon
+      className={cn(
+        'size-3.5 shrink-0',
+        className,
+      )}
+    />
+  )
+}
+
+export default memo(VariableIcon)
--- a/web/app/components/workflow/nodes/_base/components/variable/variable-label/base/variable-label.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/variable-label/base/variable-label.tsx
@@ -0,0 +1,83 @@
+import { memo } from 'react'
+import { capitalize } from 'lodash-es'
+import {
+  RiErrorWarningFill,
+  RiMoreLine,
+} from '@remixicon/react'
+import type { VariablePayload } from '../types'
+import { useVarColor } from '../hooks'
+import VariableNodeLabel from './variable-node-label'
+import VariableIcon from './variable-icon'
+import VariableName from './variable-name'
+import cn from '@/utils/classnames'
+import Tooltip from '@/app/components/base/tooltip'
+
+const VariableLabel = ({
+  nodeType,
+  nodeTitle,
+  variables,
+  variableType,
+  className,
+  errorMsg,
+  onClick,
+  isExceptionVariable,
+  ref,
+  notShowFullPath,
+  rightSlot,
+}: VariablePayload) => {
+  const varColorClassName = useVarColor(variables, isExceptionVariable)
+  return (
+    <div
+      className={cn(
+        'inline-flex h-6 max-w-full items-center space-x-0.5 rounded-md border-[0.5px] border-components-panel-border-subtle bg-components-badge-white-to-dark px-1.5 shadow-xs',
+        className,
+      )}
+      onClick={onClick}
+      ref={ref}
+    >
+      <VariableNodeLabel
+        nodeType={nodeType}
+        nodeTitle={nodeTitle}
+      />
+      {
+        notShowFullPath && (
+          <>
+            <RiMoreLine className='h-3 w-3 shrink-0 text-text-secondary' />
+            <div className='system-xs-regular shrink-0 text-divider-deep'>/</div>
+          </>
+        )
+      }
+      <VariableIcon
+        variables={variables}
+        className={varColorClassName}
+      />
+      <VariableName
+        variables={variables}
+        className={cn(varColorClassName)}
+        notShowFullPath={notShowFullPath}
+      />
+      {
+        variableType && (
+          <div className='system-xs-regular shrink-0 text-text-tertiary'>
+            {capitalize(variableType)}
+          </div>
+        )
+      }
+      {
+        !!errorMsg && (
+          <Tooltip
+            popupContent={errorMsg}
+            asChild
+          >
+            <RiErrorWarningFill className='h-3 w-3 shrink-0 text-text-destructive' />
+          </Tooltip>
+        )
+      }
+      {
+        rightSlot
+      }
+    </div>
+  )
+}
+
+export default memo(VariableLabel)
--- a/web/app/components/workflow/nodes/_base/components/variable/variable-label/base/variable-name.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/variable-label/base/variable-name.tsx
@@ -0,0 +1,30 @@
+import { memo } from 'react'
+import { useVarName } from '../hooks'
+import cn from '@/utils/classnames'
+
+type VariableNameProps = {
+  variables: string[]
+  className?: string
+  notShowFullPath?: boolean
+}
+const VariableName = ({
+  variables,
+  className,
+  notShowFullPath,
+}: VariableNameProps) => {
+  const varName = useVarName(variables, notShowFullPath)
+
+  return (
+    <div
+      className={cn(
+        'system-xs-medium truncate',
+        className,
+      )}
+      title={varName}
+    >
+      {varName}
+    </div>
+  )
+}
+
+export default memo(VariableName)
--- a/web/app/components/workflow/nodes/_base/components/variable/variable-label/base/variable-node-label.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/variable-label/base/variable-node-label.tsx
@@ -0,0 +1,37 @@
+import { memo } from 'react'
+import { VarBlockIcon } from '@/app/components/workflow/block-icon'
+import type { BlockEnum } from '@/app/components/workflow/types'
+
+type VariableNodeLabelProps = {
+  nodeType?: BlockEnum
+  nodeTitle?: string
+}
+const VariableNodeLabel = ({
+  nodeType,
+  nodeTitle,
+}: VariableNodeLabelProps) => {
+  if (!nodeType)
+    return null
+
+  return (
+    <>
+      <VarBlockIcon
+        type={nodeType}
+        className='shrink-0 text-text-secondary'
+      />
+      {
+        nodeTitle && (
+          <div
+            className='system-xs-medium max-[60px] truncate text-text-secondary'
+            title={nodeTitle}
+          >
+            {nodeTitle}
+          </div>
+        )
+      }
+      <div className='system-xs-regular shrink-0 text-divider-deep'>/</div>
+    </>
+  )
+}
+
+export default memo(VariableNodeLabel)
--- a/web/app/components/workflow/nodes/_base/components/variable/variable-label/hooks.ts
+++ b/web/app/components/workflow/nodes/_base/components/variable/variable-label/hooks.ts
@@ -0,0 +1,89 @@
+import { useMemo } from 'react'
+import { Variable02 } from '@/app/components/base/icons/src/vender/solid/development'
+import { BubbleX, Env } from '@/app/components/base/icons/src/vender/line/others'
+import { Loop } from '@/app/components/base/icons/src/vender/workflow'
+import {
+  isConversationVar,
+  isENV,
+  isSystemVar,
+} from '../utils'
+import { VarInInspectType } from '@/types/workflow'
+
+export const useVarIcon = (variables: string[], variableCategory?: VarInInspectType | string) => {
+  if (variableCategory === 'loop')
+    return Loop
+
+  if (isENV(variables) || variableCategory === VarInInspectType.environment || variableCategory === 'environment')
+    return Env
+
+  if (isConversationVar(variables) || variableCategory === VarInInspectType.conversation || variableCategory === 'conversation')
+    return BubbleX
+
+  return Variable02
+}
+
+export const useVarColor = (variables: string[], isExceptionVariable?: boolean, variableCategory?: VarInInspectType | string) => {
+  return useMemo(() => {
+    if (isExceptionVariable)
+      return 'text-text-warning'
+
+    if (variableCategory === 'loop')
+      return 'text-util-colors-cyan-cyan-500'
+
+    if (isENV(variables) || variableCategory === VarInInspectType.environment || variableCategory === 'environment')
+      return 'text-util-colors-violet-violet-600'
+
+    if (isConversationVar(variables) || variableCategory === VarInInspectType.conversation || variableCategory === 'conversation')
+      return 'text-util-colors-teal-teal-700'
+
+    return 'text-text-accent'
+  }, [variables, isExceptionVariable])
+}
+
+export const useVarName = (variables: string[], notShowFullPath?: boolean) => {
+  const variableFullPathName = variables.slice(1).join('.')
+  const variablesLength = variables.length
+  const varName = useMemo(() => {
+    const isSystem = isSystemVar(variables)
+    const varName = notShowFullPath ? variables[variablesLength - 1] : variableFullPathName
+    return `${isSystem ? 'sys.' : ''}${varName}`
+  }, [variables, notShowFullPath])
+
+  return varName
+}
+
+export const useVarBgColorInEditor = (variables: string[], hasError?: boolean) => {
+  if (hasError) {
+    return {
+      hoverBorderColor: 'hover:border-state-destructive-active',
+      hoverBgColor: 'hover:bg-state-destructive-hover',
+      selectedBorderColor: '!border-state-destructive-solid',
+      selectedBgColor: '!bg-state-destructive-hover',
+    }
+  }
+
+  if (isENV(variables)) {
+    return {
+      hoverBorderColor: 'hover:border-util-colors-violet-violet-100',
+      hoverBgColor: 'hover:bg-util-colors-violet-violet-50',
+      selectedBorderColor: 'border-util-colors-violet-violet-600',
+      selectedBgColor: 'bg-util-colors-violet-violet-50',
+    }
+  }
+
+  if (isConversationVar(variables)) {
+    return {
+      hoverBorderColor: 'hover:border-util-colors-teal-teal-100',
+      hoverBgColor: 'hover:bg-util-colors-teal-teal-50',
+      selectedBorderColor: 'border-util-colors-teal-teal-600',
+      selectedBgColor: 'bg-util-colors-teal-teal-50',
+    }
+  }
+
+  return {
+    hoverBorderColor: 'hover:border-state-accent-alt',
+    hoverBgColor: 'hover:bg-state-accent-hover',
+    selectedBorderColor: 'border-state-accent-solid',
+    selectedBgColor: 'bg-state-accent-hover',
+  }
+}
--- a/web/app/components/workflow/nodes/_base/components/variable/variable-label/index.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/variable-label/index.tsx
@@ -0,0 +1,5 @@
+export { default as VariableLabelInSelect } from './variable-label-in-select'
+export { default as VariableLabelInEditor } from './variable-label-in-editor'
+export { default as VariableLabelInNode } from './variable-label-in-node'
+export { default as VariableLabelInText } from './variable-label-in-text'
+export { default as VariableIconWithColor } from './variable-icon-with-color'
--- a/web/app/components/workflow/nodes/_base/components/variable/variable-label/types.ts
+++ b/web/app/components/workflow/nodes/_base/components/variable/variable-label/types.ts
@@ -0,0 +1,19 @@
+import type { ReactNode } from 'react'
+import type {
+  BlockEnum,
+  VarType,
+} from '@/app/components/workflow/types'
+
+export type VariablePayload = {
+  className?: string
+  nodeType?: BlockEnum
+  nodeTitle?: string
+  variables: string[]
+  variableType?: VarType
+  onClick?: (e: React.MouseEvent<HTMLDivElement>) => void
+  errorMsg?: string
+  isExceptionVariable?: boolean
+  ref?: React.Ref<HTMLDivElement>
+  notShowFullPath?: boolean
+  rightSlot?: ReactNode
+}
--- a/web/app/components/workflow/nodes/_base/components/variable/variable-label/variable-icon-with-color.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/variable-label/variable-icon-with-color.tsx
@@ -0,0 +1,30 @@
+import { memo } from 'react'
+import VariableIcon from './base/variable-icon'
+import type { VariableIconProps } from './base/variable-icon'
+import { useVarColor } from './hooks'
+import cn from '@/utils/classnames'
+
+type VariableIconWithColorProps = {
+  isExceptionVariable?: boolean
+} & VariableIconProps
+
+const VariableIconWithColor = ({
+  isExceptionVariable,
+  variableCategory,
+  variables = [],
+  className,
+}: VariableIconWithColorProps) => {
+  const varColorClassName = useVarColor(variables, isExceptionVariable, variableCategory)
+  return (
+    <VariableIcon
+      variables={variables}
+      variableCategory={variableCategory}
+      className={cn(
+        varColorClassName,
+        className,
+      )}
+    />
+  )
+}
+
+export default memo(VariableIconWithColor)
--- a/web/app/components/workflow/nodes/_base/components/variable/variable-label/variable-label-in-editor.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/variable-label/variable-label-in-editor.tsx
@@ -0,0 +1,40 @@
+import { memo } from 'react'
+import type { VariablePayload } from './types'
+import VariableLabel from './base/variable-label'
+import { useVarBgColorInEditor } from './hooks'
+import cn from '@/utils/classnames'
+
+type VariableLabelInEditorProps = {
+  isSelected?: boolean
+} & VariablePayload
+const VariableLabelInEditor = ({
+  isSelected,
+  variables,
+  errorMsg,
+  ...rest
+}: VariableLabelInEditorProps) => {
+  const {
+    hoverBorderColor,
+    hoverBgColor,
+    selectedBorderColor,
+    selectedBgColor,
+  } = useVarBgColorInEditor(variables, !!errorMsg)
+
+  return (
+    <VariableLabel
+      className={cn(
+        'h-[18px] space-x-[1px] rounded-[5px] px-1 shadow-xs',
+        !isSelected && hoverBgColor,
+        !isSelected && hoverBorderColor,
+        isSelected && 'border',
+        isSelected && selectedBorderColor,
+        isSelected && selectedBgColor,
+      )}
+      variables={variables}
+      errorMsg={errorMsg}
+      {...rest}
+    />
+  )
+}
+
+export default memo(VariableLabelInEditor)
--- a/web/app/components/workflow/nodes/_base/components/variable/variable-label/variable-label-in-node.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/variable-label/variable-label-in-node.tsx
@@ -0,0 +1,17 @@
+import { memo } from 'react'
+import type { VariablePayload } from './types'
+import VariableLabel from './base/variable-label'
+import cn from '@/utils/classnames'
+
+const VariableLabelInNode = (variablePayload: VariablePayload) => {
+  return (
+    <VariableLabel
+      className={cn(
+        'w-full space-x-[1px] bg-workflow-block-parma-bg px-1 shadow-none',
+      )}
+      {...variablePayload}
+    />
+  )
+}
+
+export default memo(VariableLabelInNode)
--- a/web/app/components/workflow/nodes/_base/components/variable/variable-label/variable-label-in-select.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/variable-label/variable-label-in-select.tsx
@@ -0,0 +1,13 @@
+import { memo } from 'react'
+import type { VariablePayload } from './types'
+import VariableLabel from './base/variable-label'
+
+const VariableLabelInSelect = (variablePayload: VariablePayload) => {
+  return (
+    <VariableLabel
+      {...variablePayload}
+    />
+  )
+}
+
+export default memo(VariableLabelInSelect)
--- a/web/app/components/workflow/nodes/_base/components/variable/variable-label/variable-label-in-text.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/variable-label/variable-label-in-text.tsx
@@ -0,0 +1,17 @@
+import { memo } from 'react'
+import type { VariablePayload } from './types'
+import VariableLabel from './base/variable-label'
+import cn from '@/utils/classnames'
+
+const VariableLabelInText = (variablePayload: VariablePayload) => {
+  return (
+    <VariableLabel
+      className={cn(
+        'h-[18px] space-x-[1px] rounded-[5px] px-1 shadow-xs',
+      )}
+      {...variablePayload}
+    />
+  )
+}
+
+export default memo(VariableLabelInText)