chore: list filter operate ui

web/app/components/workflow/nodes/if-else/components/condition-list/condition-operator.tsx

@@ -17,6 +17,7 @@ import cn from '@/utils/classnames'
 const i18nPrefix = 'workflow.nodes.ifElse'
 
 type ConditionOperatorProps = {
+  className?: string
   disabled?: boolean
   varType: VarType
   file?: { key: string }
@@ -24,6 +25,7 @@ type ConditionOperatorProps = {
   onSelect: (value: ComparisonOperator) => void
 }
 const ConditionOperator = ({
+  className,
   disabled,
   varType,
   file,
@@ -55,7 +57,7 @@ const ConditionOperator = ({
     >
       <PortalToFollowElemTrigger onClick={() => setOpen(v => !v)}>
         <Button
-          className={cn('shrink-0', !selectedOption && 'opacity-50')}
+          className={cn('shrink-0', !selectedOption && 'opacity-50', className)}
           size='small'
           variant='ghost'
           disabled={disabled}

web/app/components/workflow/nodes/list-filter/components/filter-condition.tsx

@@ -18,6 +18,7 @@ type Props = {
   onChange: (condition: Condition) => void
   varType: VarType
   hasSubVariable: boolean
+  readOnly: boolean
 }
 
 const FilterCondition: FC<Props> = ({
@@ -25,6 +26,7 @@ const FilterCondition: FC<Props> = ({
   varType,
   onChange,
   hasSubVariable,
+  readOnly,
 }) => {
   const { t } = useTranslation()
   const isSelect = [ComparisonOperator.in, ComparisonOperator.notIn, ComparisonOperator.allOf].includes(condition.comparison_operator)
@@ -74,10 +76,12 @@ const FilterCondition: FC<Props> = ({
       )}
       <div className='flex space-x-1'>
         <ConditionOperator
+          className='h-8 bg-components-input-bg-normal'
           varType={varType}
           value={condition.comparison_operator}
           onSelect={handleChange('comparison_operator')}
           file={hasSubVariable ? { key: condition.key } : undefined}
+          disabled={readOnly}
         />
         {!comparisonOperatorNotRequireValue(condition.comparison_operator) && (
           <>
@@ -87,7 +91,7 @@ const FilterCondition: FC<Props> = ({
                 defaultValue={condition.value}
                 onSelect={item => handleChange('value')(item.value)}
                 className='!text-[13px]'
-                wrapperClassName='grow'
+                wrapperClassName='grow h-8'
                 placeholder='Select value'
               />
             )}

web/app/components/workflow/nodes/list-filter/panel.tsx

@@ -61,6 +61,7 @@ const Panel: FC<NodePanelProps<ListFilterNodeType>> = ({
             onChange={handleFilterChange}
             varType={itemVarType}
             hasSubVariable={hasSubVariable}
+            readOnly={readOnly}
           />
         </Field>
         <Split />