From bfaef2cca61f8e431a6e33bf85f977df656d0eaa Mon Sep 17 00:00:00 2001
From: balibabu <cike8899@users.noreply.github.com>
Date: Fri, 11 Oct 2024 11:06:14 +0800
Subject: [PATCH] feat: Arrange the form of generate, categorize, switch,
 retrieval operators vertically #1739 (#2800)

### What problem does this PR solve?

feat: Arrange the form of generate, categorize, switch, retrieval
operators vertically #1739

### Type of change

- [ ] Bug Fix (non-breaking change which fixes an issue)
- [x] New Feature (non-breaking change which adds functionality)
- [ ] Documentation Update
- [ ] Refactoring
- [ ] Performance Improvement
- [ ] Other (please describe):
---
 web/src/pages/flow/flow-drawer/index.less       |  6 ++++++
 web/src/pages/flow/flow-drawer/index.tsx        | 16 +++++++++-------
 .../pages/flow/form/categorize-form/index.tsx   |  3 +--
 web/src/pages/flow/form/generate-form/index.tsx |  3 +--
 .../pages/flow/form/retrieval-form/index.tsx    |  3 +--
 web/src/pages/flow/form/switch-form/index.tsx   | 17 +----------------
 6 files changed, 19 insertions(+), 29 deletions(-)

diff --git a/web/src/pages/flow/flow-drawer/index.less b/web/src/pages/flow/flow-drawer/index.less
index c6740fa7c..b3a5fcb43 100644
--- a/web/src/pages/flow/flow-drawer/index.less
+++ b/web/src/pages/flow/flow-drawer/index.less
@@ -1,3 +1,9 @@
 .title {
   flex-basis: 60px;
 }
+
+.formWrapper {
+  :global(.ant-form-item-label) {
+    font-weight: 600;
+  }
+}
diff --git a/web/src/pages/flow/flow-drawer/index.tsx b/web/src/pages/flow/flow-drawer/index.tsx
index c481405e9..639675ec3 100644
--- a/web/src/pages/flow/flow-drawer/index.tsx
+++ b/web/src/pages/flow/flow-drawer/index.tsx
@@ -118,13 +118,15 @@ const FlowDrawer = ({
       mask={false}
       width={470}
     >
-      {visible && (
-        <OperatorForm
-          onValuesChange={handleValuesChange}
-          form={form}
-          node={node}
-        ></OperatorForm>
-      )}
+      <section className={styles.formWrapper}>
+        {visible && (
+          <OperatorForm
+            onValuesChange={handleValuesChange}
+            form={form}
+            node={node}
+          ></OperatorForm>
+        )}
+      </section>
     </Drawer>
   );
 };
diff --git a/web/src/pages/flow/form/categorize-form/index.tsx b/web/src/pages/flow/form/categorize-form/index.tsx
index a1ac944dc..9e8129f8e 100644
--- a/web/src/pages/flow/form/categorize-form/index.tsx
+++ b/web/src/pages/flow/form/categorize-form/index.tsx
@@ -18,12 +18,11 @@ const CategorizeForm = ({ form, onValuesChange, node }: IOperatorForm) => {
   return (
     <Form
       name="basic"
-      labelCol={{ span: 6 }}
-      wrapperCol={{ span: 18 }}
       autoComplete="off"
       form={form}
       onValuesChange={handleValuesChange}
       initialValues={{ items: [{}] }}
+      layout={'vertical'}
     >
       <Form.Item
         name={'llm_id'}
diff --git a/web/src/pages/flow/form/generate-form/index.tsx b/web/src/pages/flow/form/generate-form/index.tsx
index 483c3cce8..0e36bd4f6 100644
--- a/web/src/pages/flow/form/generate-form/index.tsx
+++ b/web/src/pages/flow/form/generate-form/index.tsx
@@ -13,11 +13,10 @@ const GenerateForm = ({ onValuesChange, form, node }: IOperatorForm) => {
   return (
     <Form
       name="basic"
-      labelCol={{ span: 10 }}
-      wrapperCol={{ span: 14 }}
       autoComplete="off"
       form={form}
       onValuesChange={onValuesChange}
+      layout={'vertical'}
     >
       <Form.Item
         name={'llm_id'}
diff --git a/web/src/pages/flow/form/retrieval-form/index.tsx b/web/src/pages/flow/form/retrieval-form/index.tsx
index 8ee93888c..d9cbfb28f 100644
--- a/web/src/pages/flow/form/retrieval-form/index.tsx
+++ b/web/src/pages/flow/form/retrieval-form/index.tsx
@@ -24,13 +24,12 @@ const RetrievalForm = ({ onValuesChange, form }: IOperatorForm) => {
   return (
     <Form
       name="basic"
-      labelCol={{ span: 12 }}
-      wrapperCol={{ span: 12 }}
       onFinish={onFinish}
       onFinishFailed={onFinishFailed}
       autoComplete="off"
       onValuesChange={onValuesChange}
       form={form}
+      layout={'vertical'}
     >
       <SimilaritySlider
         isTooltipShown
diff --git a/web/src/pages/flow/form/switch-form/index.tsx b/web/src/pages/flow/form/switch-form/index.tsx
index dfc089b6c..b17d7b19d 100644
--- a/web/src/pages/flow/form/switch-form/index.tsx
+++ b/web/src/pages/flow/form/switch-form/index.tsx
@@ -13,14 +13,6 @@ import { useBuildComponentIdSelectOptions } from '../../hooks';
 import { IOperatorForm, ISwitchForm } from '../../interface';
 import { getOtherFieldValues } from '../../utils';
 
-const subLabelCol = {
-  span: 11,
-};
-
-const subWrapperCol = {
-  span: 13,
-};
-
 const SwitchForm = ({ onValuesChange, node, form }: IOperatorForm) => {
   const { t } = useTranslation();
   const buildCategorizeToOptions = useBuildFormSelectOptions(
@@ -53,13 +45,12 @@ const SwitchForm = ({ onValuesChange, node, form }: IOperatorForm) => {
 
   return (
     <Form
-      labelCol={{ span: 8 }}
-      wrapperCol={{ span: 16 }}
       form={form}
       name="dynamic_form_complex"
       autoComplete="off"
       initialValues={{ conditions: [{}] }}
       onValuesChange={onValuesChange}
+      layout={'vertical'}
     >
       <Form.List name="conditions">
         {(fields, { add, remove }) => (
@@ -125,8 +116,6 @@ const SwitchForm = ({ onValuesChange, node, form }: IOperatorForm) => {
                             <Form.Item
                               label={t('flow.componentId')}
                               name={[subField.name, 'cpn_id']}
-                              labelCol={subLabelCol}
-                              wrapperCol={subWrapperCol}
                             >
                               <Select
                                 placeholder={t('flow.componentId')}
@@ -136,8 +125,6 @@ const SwitchForm = ({ onValuesChange, node, form }: IOperatorForm) => {
                             <Form.Item
                               label={t('flow.operator')}
                               name={[subField.name, 'operator']}
-                              labelCol={subLabelCol}
-                              wrapperCol={subWrapperCol}
                             >
                               <Select
                                 placeholder={t('flow.operator')}
@@ -147,8 +134,6 @@ const SwitchForm = ({ onValuesChange, node, form }: IOperatorForm) => {
                             <Form.Item
                               label={t('flow.value')}
                               name={[subField.name, 'value']}
-                              labelCol={subLabelCol}
-                              wrapperCol={subWrapperCol}
                             >
                               <Input placeholder={t('flow.value')} />
                             </Form.Item>