feat: filed fold

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

@@ -2,11 +2,14 @@
 import type { FC } from 'react'
 import React from 'react'
 import cn from 'classnames'
+import { useBoolean } from 'ahooks'
 import { HelpCircle } from '@/app/components/base/icons/src/vender/line/general'
 import TooltipPlus from '@/app/components/base/tooltip-plus'
+import { ChevronDown, ChevronRight } from '@/app/components/base/icons/src/vender/line/arrows'
 type Props = {
   title: string
   tooltip?: string
+  supportFold?: boolean
   children?: JSX.Element | string | null
   operations?: JSX.Element
   inline?: boolean
@@ -18,7 +21,12 @@ const Filed: FC<Props> = ({
   children,
   operations,
   inline,
+  supportFold,
 }) => {
+  const [fold, {
+    toggle: toggleFold,
+  }] = useBoolean(true)
+  const FoldHandler = fold ? ChevronRight : ChevronDown
   return (
     <div className={cn(inline && 'flex justify-between items-center')}>
       <div className='flex justify-between items-center'>
@@ -31,9 +39,14 @@ const Filed: FC<Props> = ({
           )}
 
         </div>
+        <div className='flex'>
           {operations && <div>{operations}</div>}
+          {supportFold && (
+            <FoldHandler className='w-3.5 h-3.5 text-gray-500 cursor-pointer' onClick={toggleFold} />
+          )}
+        </div>
       </div>
-      {children && <div className={cn(!inline && 'mt-1')}>{children}</div>}
+      {children && (!supportFold || (supportFold && !fold)) && <div className={cn(!inline && 'mt-1')}>{children}</div>}
     </div>
   )
 }

web/app/components/workflow/nodes/question-classifier/panel.tsx

@@ -61,6 +61,7 @@ const Panel: FC = () => {
       </Field>
       <Field
         title={t(`${i18nPrefix}.advancedSetting`)}
+        supportFold
       >
         <AdvancedSetting
           instruction={inputs.instruction}