feat: add icon to title of operator form #918 (#1413)

### What problem does this PR solve?
feat: add icon to title of operator form #918


### Type of change

- [x] New Feature (non-breaking change which adds functionality)

web/src/locales/en.ts

@@ -567,6 +567,7 @@ The above is the content you need to summarize.`,
       operation: 'operation',
       run: 'Run',
       save: 'Save',
+      title: 'Title:',
       beginDescription: 'This is where the flow begin',
       answerDescription: `This component is used as an interface between bot and human. It receives input of user and display the result of the computation of the bot.`,
       retrievalDescription: `This component is for the process of retrieving relevent information from knowledge base. So, knowledgebases should be selected. If there's nothing retrieved, the 'Empty response' will be returned.`,

web/src/locales/zh-traditional.ts

@@ -527,6 +527,7 @@ export default {
       operation: '操作',
       run: '運行',
       save: '儲存',
+      title: '標題：',
       beginDescription: '這是流程開始的地方',
       answerDescription: `該組件用作機器人與人類之間的介面。它接收使用者的輸入並顯示機器人的計算結果。`,
       retrievalDescription: `此元件用於從知識庫中檢索相關資訊。選擇知識庫。如果沒有檢索到任何內容，將傳回「空響應」。`,

web/src/locales/zh.ts

@@ -546,6 +546,7 @@ export default {
       operation: '操作',
       run: '运行',
       save: '保存',
+      title: '标题：',
       beginDescription: '这是流程开始的地方',
       answerDescription: `该组件用作机器人与人类之间的接口。它接收用户的输入并显示机器人的计算结果。`,
       retrievalDescription: `此组件用于从知识库中检索相关信息。选择知识库。如果没有检索到任何内容，将返回“空响应”。`,

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

@@ -0,0 +1,3 @@
+.title {
+  flex-basis: 60px;
+}

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

@@ -1,5 +1,6 @@
+import { useTranslate } from '@/hooks/commonHooks';
 import { IModalProps } from '@/interfaces/common';
-import { Drawer, Form, Input } from 'antd';
+import { Drawer, Flex, Form, Input } from 'antd';
 import { useEffect } from 'react';
 import { Node } from 'reactflow';
 import AnswerForm from '../answer-form';
@@ -9,10 +10,13 @@ import { Operator } from '../constant';
 import GenerateForm from '../generate-form';
 import { useHandleFormValuesChange, useHandleNodeNameChange } from '../hooks';
 import MessageForm from '../message-form';
+import OperatorIcon from '../operator-icon';
 import RelevantForm from '../relevant-form';
 import RetrievalForm from '../retrieval-form';
 import RewriteQuestionForm from '../rewrite-question-form';
 
+import styles from './index.less';
+
 interface IProps {
   node?: Node;
 }
@@ -40,6 +44,7 @@ const FlowDrawer = ({
   const [form] = Form.useForm();
   const { name, handleNameBlur, handleNameChange } =
     useHandleNodeNameChange(node);
+  const { t } = useTranslate('flow');
 
   const { handleValuesChange } = useHandleFormValuesChange(node?.id);
 
@@ -52,11 +57,19 @@ const FlowDrawer = ({
   return (
     <Drawer
       title={
-        <Input
+        <Flex gap={'middle'} align="center">
-          value={name}
+          <OperatorIcon name={operatorName}></OperatorIcon>
-          onBlur={handleNameBlur}
+          <Flex align="center" gap={'small'} flex={1}>
-          onChange={handleNameChange}
+            <label htmlFor="" className={styles.title}>
-        ></Input>
+              {t('title')}
+            </label>
+            <Input
+              value={name}
+              onBlur={handleNameBlur}
+              onChange={handleNameChange}
+            ></Input>
+          </Flex>
+        </Flex>
       }
       placement="right"
       onClose={hideModal}

web/src/pages/flow/generate-form/index.tsx

@@ -13,8 +13,8 @@ const GenerateForm = ({ onValuesChange, form, node }: IOperatorForm) => {
   return (
     <Form
       name="basic"
-      labelCol={{ span: 6 }}
+      labelCol={{ span: 5 }}
-      wrapperCol={{ span: 18 }}
+      wrapperCol={{ span: 19 }}
       autoComplete="off"
       form={form}
       onValuesChange={onValuesChange}

web/src/pages/flow/relevant-form/index.tsx

@@ -23,8 +23,8 @@ const RelevantForm = ({ onValuesChange, form, node }: IOperatorForm) => {
   return (
     <Form
       name="basic"
-      labelCol={{ span: 6 }}
+      labelCol={{ span: 4 }}
-      wrapperCol={{ span: 18 }}
+      wrapperCol={{ span: 20 }}
       onValuesChange={onValuesChange}
       autoComplete="off"
       form={form}

web/src/pages/flow/rewrite-question-form/index.tsx

@@ -11,8 +11,8 @@ const RewriteQuestionForm = ({ onValuesChange, form }: IOperatorForm) => {
   return (
     <Form
       name="basic"
-      labelCol={{ span: 6 }}
+      labelCol={{ span: 4 }}
-      wrapperCol={{ span: 18 }}
+      wrapperCol={{ span: 20 }}
       onValuesChange={onValuesChange}
       autoComplete="off"
       form={form}