Chore/variable label (#23270)

web/app/components/workflow/variable-inspect/group.tsx

@@ -11,16 +11,12 @@ import {
 import ActionButton from '@/app/components/base/action-button'
 import Tooltip from '@/app/components/base/tooltip'
 import BlockIcon from '@/app/components/workflow/block-icon'
-import {
-  BubbleX,
-  Env,
-} from '@/app/components/base/icons/src/vender/line/others'
-import { Variable02 } from '@/app/components/base/icons/src/vender/solid/development'
 import type { currentVarType } from './panel'
 import { VarInInspectType } from '@/types/workflow'
 import type { NodeWithVar, VarInInspect } from '@/types/workflow'
 import cn from '@/utils/classnames'
 import { useToolIcon } from '../hooks'
+import { VariableIconWithColor } from '@/app/components/workflow/nodes/_base/components/variable/variable-label'
 
 type Props = {
   nodeData?: NodeWithVar
@@ -158,9 +154,11 @@ const Group = ({
               )}
               onClick={() => handleSelectVar(varItem, varType)}
             >
-              {isEnv && <Env className='h-4 w-4 shrink-0 text-util-colors-violet-violet-600' />}
-              {isChatVar && <BubbleX className='h-4 w-4 shrink-0 text-util-colors-teal-teal-700' />}
-              {(isSystem || nodeData) && <Variable02 className={cn('h-4 w-4 shrink-0 text-text-accent', ['error_type', 'error_message'].includes(varItem.name) && 'text-text-warning')} />}
+              <VariableIconWithColor
+                variableCategory={varType}
+                isExceptionVariable={['error_type', 'error_message'].includes(varItem.name)}
+                className='size-4'
+              />
               <div className='system-sm-medium grow truncate text-text-secondary'>{varItem.name}</div>
               <div className='system-xs-regular shrink-0 text-text-tertiary'>{varItem.value_type}</div>
             </div>