feat: sub var picker

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

@@ -0,0 +1,11 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+
+const FilterCondition: FC = () => {
+  return (
+    <div>
+    </div>
+  )
+}
+export default React.memo(FilterCondition)

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

@@ -0,0 +1,36 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import { SimpleSelect as Select } from '@/app/components/base/select'
+import { Variable02 } from '@/app/components/base/icons/src/vender/solid/development'
+
+const SubVariablePicker: FC = () => {
+  const renderOption = ({ item }: { item: Record<string, any> }) => {
+    return (
+      <div className='flex items-center h-6 justify-between'>
+        <div className='flex items-center h-full'>
+          <Variable02 className='mr-[5px] w-3.5 h-3.5 text-text-accent' />
+          <span className='text-text-secondary system-sm-medium'>{item.name}</span>
+        </div>
+        <span className='text-text-tertiary system-xs-regular'>{item.type}</span>
+      </div>
+    )
+  }
+  return (
+    <div>
+      <Select
+        items={[
+          { value: '1', name: 'name', type: 'string' },
+          { value: '2', name: 'age', type: 'number' },
+        ]}
+        defaultValue={'1'}
+        allowSearch
+        onSelect={() => { }}
+        placeholder='Select sub variable key'
+        optionClassName='pl-4 pr-5 py-0'
+        renderOption={renderOption}
+      />
+    </div>
+  )
+}
+export default React.memo(SubVariablePicker)

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

@@ -5,6 +5,7 @@ import VarReferencePicker from '../_base/components/variable/var-reference-picke
 import OutputVars, { VarItem } from '../_base/components/output-vars'
 import OptionCard from '../_base/components/option-card'
 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 Field from '@/app/components/workflow/nodes/_base/components/field'
@@ -59,7 +60,7 @@ const Panel: FC<NodePanelProps<ListFilterNodeType>> = ({
           {inputs.orderBy?.enabled
             ? (
               <div className='flex items-center justify-between'>
-                <div className='grow'>Variable Picker placeholder</div>
+                <div className='grow mr-2'><SubVariablePicker /></div>
                 <div className='shrink-0 flex space-x-1'>
                   <OptionCard
                     title={t(`${i18nPrefix}.asc`)}