feat: fiter condion

web/app/components/base/input/index.tsx

@@ -2,7 +2,7 @@
 import type { SVGProps } from 'react'
 import React, { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import s from './style.module.css'
+import cn from '@/utils/classnames'
 
 type InputProps = {
   placeholder?: string
@@ -27,10 +27,10 @@ const Input = ({ value, defaultValue, onChange, className = '', wrapperClassName
   const { t } = useTranslation()
   return (
     <div className={`relative inline-flex w-full ${wrapperClassName}`}>
-      {showPrefix && <span className={s.prefix}>{prefixIcon ?? <GlassIcon className='h-3.5 w-3.5 stroke-current text-gray-700 stroke-2' />}</span>}
+      {showPrefix && <span className={'whitespace-nowrap absolute left-2 self-center'}>{prefixIcon ?? <GlassIcon className='h-3.5 w-3.5 stroke-current text-gray-700 stroke-2' />}</span>}
       <input
         type={type ?? 'text'}
-        className={`${s.input} ${showPrefix ? '!pl-7' : ''} ${className}`}
+        className={cn(`inline-flex h-7 w-full py-1 px-2 rounded-lg text-xs leading-normal bg-gray-100 caret-primary-600 hover:bg-gray-100 focus:ring-1 focus:ring-inset focus:ring-gray-200 focus-visible:outline-none focus:bg-white placeholder:text-gray-400 ${showPrefix ? '!pl-7' : ''}`, className)}
         placeholder={placeholder ?? (showPrefix ? t('common.operation.search') ?? '' : 'please input')}
         value={localValue}
         onChange={(e) => {

web/app/components/base/input/style.module.css

@@ -1,7 +0,0 @@
-.input {
-  @apply inline-flex h-7 w-full py-1 px-2 rounded-lg text-xs leading-normal;
-  @apply bg-gray-100 caret-primary-600 hover:bg-gray-100 focus:ring-1 focus:ring-inset focus:ring-gray-200 focus-visible:outline-none focus:bg-white placeholder:text-gray-400;
-}
-.prefix {
-  @apply whitespace-nowrap absolute left-2 self-center
-}

web/app/components/base/select/index.tsx

@@ -199,7 +199,7 @@ const SimpleSelect: FC<ISelectProps> = ({
         }
       }}
     >
-      <div className={`relative h-9 ${wrapperClassName}`}>
+      <div className={classNames('relative h-9', wrapperClassName)}>
         <Listbox.Button className={`w-full h-full rounded-lg border-0 bg-gray-100 py-1.5 pl-3 pr-10 sm:text-sm sm:leading-6 focus-visible:outline-none focus-visible:bg-gray-200 group-hover:bg-gray-200 ${disabled ? 'cursor-not-allowed' : 'cursor-pointer'} ${className}`}>
           <span className={classNames('block truncate text-left', !selectedItem?.name && 'text-gray-400')}>{selectedItem?.name ?? localPlaceholder}</span>
           <span className="absolute inset-y-0 right-0 flex items-center pr-2">

web/app/components/workflow/nodes/_base/components/field.tsx

@@ -13,6 +13,7 @@ import TooltipPlus from '@/app/components/base/tooltip-plus'
 type Props = {
   className?: string
   title: JSX.Element | string | DefaultTFuncReturn
+  isSubTitle?: boolean
   tooltip?: string
   supportFold?: boolean
   children?: JSX.Element | string | null
@@ -23,6 +24,7 @@ type Props = {
 const Filed: FC<Props> = ({
   className,
   title,
+  isSubTitle,
   tooltip,
   children,
   operations,
@@ -38,7 +40,7 @@ const Filed: FC<Props> = ({
         onClick={() => supportFold && toggleFold()}
         className={cn('flex justify-between items-center', supportFold && 'cursor-pointer')}>
         <div className='flex items-center h-6'>
-          <div className='system-sm-semibold-uppercase text-text-secondary'>{title}</div>
+          <div className={cn(isSubTitle ? 'system-xs-medium-uppercase text-text-tertiary' : 'system-sm-semibold-uppercase text-text-secondary')}>{title}</div>
           {tooltip && (
             <TooltipPlus popupContent={
               <div className='w-[120px]'>

web/app/components/workflow/nodes/_base/components/split.tsx

@@ -11,7 +11,7 @@ const Split: FC<Props> = ({
   className,
 }) => {
   return (
-    <div className={cn(className, 'h-[0.5px] bg-black/5')}>
+    <div className={cn(className, 'h-[0.5px] bg-divider-subtle')}>
     </div>
   )
 }

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

@@ -1,10 +1,24 @@
 'use client'
 import type { FC } from 'react'
 import React from 'react'
+import SubVariablePicker from './sub-variable-picker'
+import { SimpleSelect as Select } from '@/app/components/base/select'
+import Input from '@/app/components/base/input'
 
 const FilterCondition: FC = () => {
   return (
     <div>
+      <SubVariablePicker />
+      <div className='mt-2 flex space-x-1'>
+        <Select
+          wrapperClassName='shrink-0 h-8'
+          items={[
+            { value: '1', name: 'include', type: '' },
+          ]}
+          onSelect={() => { }}
+        />
+        <Input className='grow h-8' />
+      </div>
     </div>
   )
 }

web/app/components/workflow/nodes/list-filter/components/sub-variable-picker.tsx

@@ -24,7 +24,6 @@ const SubVariablePicker: FC = () => {
           { value: '2', name: 'age', type: 'number' },
         ]}
         defaultValue={'1'}
-        allowSearch
         onSelect={() => { }}
         placeholder='Select sub variable key'
         optionClassName='pl-4 pr-5 py-0'

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

@@ -4,10 +4,12 @@ import { useTranslation } from 'react-i18next'
 import VarReferencePicker from '../_base/components/variable/var-reference-picker'
 import OutputVars, { VarItem } from '../_base/components/output-vars'
 import OptionCard from '../_base/components/option-card'
+import Split from '../_base/components/split'
 import useConfig from './use-config'
 import SubVariablePicker from './components/sub-variable-picker'
 import { type ListFilterNodeType, OrderBy } from './types'
 import LimitConfig from './components/limit-config'
+import FilterCondition from './components/filter-condition'
 import Field from '@/app/components/workflow/nodes/_base/components/field'
 import { type NodePanelProps } from '@/app/components/workflow/types'
 import Switch from '@/app/components/base/switch'
@@ -46,6 +48,13 @@ const Panel: FC<NodePanelProps<ListFilterNodeType>> = ({
           />
         </Field>
 
+        <Field
+          title={t(`${i18nPrefix}.filterCondition`)}
+          isSubTitle
+        >
+          <FilterCondition />
+        </Field>
+        <Split />
         <Field
           title={t(`${i18nPrefix}.orderBy`)}
           operations={

web/i18n/en-US/workflow.ts

@@ -501,6 +501,7 @@ const translation = {
     },
     listFilter: {
       inputVar: 'Input Variable',
+      filterCondition: 'Filter Condition',
       limit: 'Limit',
       orderBy: 'Order by',
       asc: 'ASC',

web/i18n/zh-Hans/workflow.ts

@@ -501,6 +501,7 @@ const translation = {
     },
     listFilter: {
       inputVar: '输入变量',
+      filterCondition: '过滤条件',
       limit: '限制',
       orderBy: '排序',
       asc: '升序',