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

@@ -1,3 +1,9 @@
 .title {
   flex-basis: 60px;
 }
+
+.formWrapper {
+  :global(.ant-form-item-label) {
+    font-weight: 600;
+  }
+}

web/src/pages/flow/flow-drawer/index.tsx

@@ -118,6 +118,7 @@ const FlowDrawer = ({
       mask={false}
       width={470}
     >
+      <section className={styles.formWrapper}>
         {visible && (
           <OperatorForm
             onValuesChange={handleValuesChange}
@@ -125,6 +126,7 @@ const FlowDrawer = ({
             node={node}
           ></OperatorForm>
         )}
+      </section>
     </Drawer>
   );
 };

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'}

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'}

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

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>