From f95eb2df0d72c613115598031fa1318f856e6e33 Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Thu, 29 Feb 2024 15:26:06 +0800
Subject: [PATCH] feat: filed fold

---
 .../workflow/nodes/_base/components/field.tsx   | 17 +++++++++++++++--
 .../nodes/question-classifier/panel.tsx         |  1 +
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/web/app/components/workflow/nodes/_base/components/field.tsx b/web/app/components/workflow/nodes/_base/components/field.tsx
index 76e713f932..af9598ea65 100644
--- a/web/app/components/workflow/nodes/_base/components/field.tsx
+++ b/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>
-        {operations && <div>{operations}</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>
   )
 }
diff --git a/web/app/components/workflow/nodes/question-classifier/panel.tsx b/web/app/components/workflow/nodes/question-classifier/panel.tsx
index c046b8e951..2a88c486c8 100644
--- a/web/app/components/workflow/nodes/question-classifier/panel.tsx
+++ b/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}