feat(web): Unified frontend code style (#1923)

Co-authored-by: Fangyin Cheng <staneyffer@gmail.com>
Co-authored-by: 谨欣 <echo.cmy@antgroup.com>
Co-authored-by: 严志勇 <yanzhiyong@tiansuixiansheng.com>
Co-authored-by: yanzhiyong <932374019@qq.com>

web/components/knowledge/doc-upload-form.tsx

@@ -1,12 +1,11 @@
-import { addDocument, apiInterceptors, uploadDocument, addYuque } from '@/client/api';
+import { addDocument, addYuque, apiInterceptors, uploadDocument } from '@/client/api';
 import { StepChangeParams } from '@/types/knowledge';
 import { InboxOutlined, MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
-import { Button, Form, Input, Spin, Upload, message } from 'antd';
+import { Button, Form, Input, Spin, Typography, Upload, message } from 'antd';
 import { RcFile, UploadChangeParam } from 'antd/es/upload';
 import { default as classNames, default as cls } from 'classnames';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Typography } from 'antd';
 
 type FileParams = {
   file: RcFile;
@@ -41,7 +40,7 @@ export default function DocUploadForm(props: IProps) {
   const [files, setFiles] = useState<any>([]);
 
   const upload = async (data: FieldType) => {
-    const { docName, textSource, text, webPageUrl, doc_token, questions = [], originFileObj } = data;
+    const { docName, textSource, text, webPageUrl, doc_token, questions = [] } = data;
     let docId: any;
     setSpinning(true);
     switch (docType) {
@@ -51,7 +50,7 @@ export default function DocUploadForm(props: IProps) {
             doc_name: docName,
             content: webPageUrl,
             doc_type: 'URL',
-            questions: questions?.map((item) => item.question),
+            questions: questions?.map(item => item.question),
           }),
         );
         break;
@@ -62,7 +61,7 @@ export default function DocUploadForm(props: IProps) {
             source: textSource,
             content: text,
             doc_type: 'TEXT',
-            questions: questions.map((item) => item.question),
+            questions: questions.map(item => item.question),
           }),
         );
         break;
@@ -74,7 +73,7 @@ export default function DocUploadForm(props: IProps) {
             content: webPageUrl,
             doc_type: 'YUQUEURL',
             doc_token: doc_token || '',
-            questions: questions?.map((item) => item.question),
+            questions: questions?.map(item => item.question),
           }),
         );
         break;
@@ -99,7 +98,7 @@ export default function DocUploadForm(props: IProps) {
     });
   };
 
-  const handleFileChange = ({ file, fileList }: UploadChangeParam) => {
+  const handleFileChange = ({ fileList }: UploadChangeParam) => {
     if (fileList.length === 0) {
       form.setFieldValue('originFileObj', null);
     }
@@ -108,26 +107,34 @@ export default function DocUploadForm(props: IProps) {
   const renderText = () => {
     return (
       <>
-        <Form.Item<FieldType> label={`${t('Name')}:`} name="docName" rules={[{ required: true, message: t('Please_input_the_name') }]}>
-          <Input className="mb-5 h-12" placeholder={t('Please_input_the_name')} />
+        <Form.Item<FieldType>
+          label={`${t('Name')}:`}
+          name='docName'
+          rules={[{ required: true, message: t('Please_input_the_name') }]}
+        >
+          <Input className='mb-5 h-12' placeholder={t('Please_input_the_name')} />
         </Form.Item>
         <Form.Item<FieldType>
           label={`${t('Text_Source')}:`}
-          name="textSource"
+          name='textSource'
           rules={[{ required: true, message: t('Please_input_the_text_source') }]}
         >
-          <Input className="mb-5  h-12" placeholder={t('Please_input_the_text_source')} />
+          <Input className='mb-5  h-12' placeholder={t('Please_input_the_text_source')} />
         </Form.Item>
-        <Form.Item<FieldType> label={`${t('Text')}:`} name="text" rules={[{ required: true, message: t('Please_input_the_description') }]}>
+        <Form.Item<FieldType>
+          label={`${t('Text')}:`}
+          name='text'
+          rules={[{ required: true, message: t('Please_input_the_description') }]}
+        >
           <TextArea rows={4} />
         </Form.Item>
         <Form.Item<FieldType> label={`${t('Correlation_problem')}:`}>
-          <Form.List name="questions">
+          <Form.List name='questions'>
             {(fields, { add, remove }) => (
               <>
-                {fields.map(({ key, name }, index) => (
+                {fields.map(({ key, name }) => (
                   <div key={key} className={cls('flex flex-1 items-center gap-8 mb-6')}>
-                    <Form.Item label="" name={[name, 'question']} className="grow">
+                    <Form.Item label='' name={[name, 'question']} className='grow'>
                       <Input placeholder={t('input_question')} />
                     </Form.Item>
                     <Form.Item>
@@ -141,7 +148,7 @@ export default function DocUploadForm(props: IProps) {
                 ))}
                 <Form.Item>
                   <Button
-                    type="dashed"
+                    type='dashed'
                     onClick={() => {
                       add();
                     }}
@@ -162,23 +169,27 @@ export default function DocUploadForm(props: IProps) {
   const renderWebPage = () => {
     return (
       <>
-        <Form.Item<FieldType> label={`${t('Name')}:`} name="docName" rules={[{ required: true, message: t('Please_input_the_name') }]}>
-          <Input className="mb-5 h-12" placeholder={t('Please_input_the_name')} />
+        <Form.Item<FieldType>
+          label={`${t('Name')}:`}
+          name='docName'
+          rules={[{ required: true, message: t('Please_input_the_name') }]}
+        >
+          <Input className='mb-5 h-12' placeholder={t('Please_input_the_name')} />
         </Form.Item>
         <Form.Item<FieldType>
           label={`${t('Web_Page_URL')}:`}
-          name="webPageUrl"
+          name='webPageUrl'
           rules={[{ required: true, message: t('Please_input_the_Web_Page_URL') }]}
         >
-          <Input className="mb-5  h-12" placeholder={t('Please_input_the_Web_Page_URL')} />
+          <Input className='mb-5  h-12' placeholder={t('Please_input_the_Web_Page_URL')} />
         </Form.Item>
         <Form.Item<FieldType> label={`${t('Correlation_problem')}:`}>
-          <Form.List name="questions">
+          <Form.List name='questions'>
             {(fields, { add, remove }) => (
               <>
-                {fields.map(({ key, name }, index) => (
+                {fields.map(({ key, name }) => (
                   <div key={key} className={cls('flex flex-1 items-center gap-8 mb-6')}>
-                    <Form.Item label="" name={[name, 'question']} className="grow">
+                    <Form.Item label='' name={[name, 'question']} className='grow'>
                       <Input placeholder={t('input_question')} />
                     </Form.Item>
                     <Form.Item>
@@ -192,7 +203,7 @@ export default function DocUploadForm(props: IProps) {
                 ))}
                 <Form.Item>
                   <Button
-                    type="dashed"
+                    type='dashed'
                     onClick={() => {
                       add();
                     }}
@@ -213,33 +224,41 @@ export default function DocUploadForm(props: IProps) {
   const renderYuquePage = () => {
     return (
       <>
-        <Form.Item<FieldType> label={`${t('Name')}:`} name="docName" rules={[{ required: true, message: t('Please_input_the_name') }]}>
-          <Input className="mb-5 h-12" placeholder={t('Please_input_the_name')} />
+        <Form.Item<FieldType>
+          label={`${t('Name')}:`}
+          name='docName'
+          rules={[{ required: true, message: t('Please_input_the_name') }]}
+        >
+          <Input className='mb-5 h-12' placeholder={t('Please_input_the_name')} />
         </Form.Item>
-        <Form.Item<FieldType> label={t('document_url')} name="webPageUrl" rules={[{ required: true, message: t('input_document_url') }]}>
-          <Input className="mb-5  h-12" placeholder={t('input_document_url')} />
+        <Form.Item<FieldType>
+          label={t('document_url')}
+          name='webPageUrl'
+          rules={[{ required: true, message: t('input_document_url') }]}
+        >
+          <Input className='mb-5  h-12' placeholder={t('input_document_url')} />
         </Form.Item>
         <Form.Item<FieldType>
           label={t('document_token')}
-          name="doc_token"
+          name='doc_token'
           tooltip={
             <>
               {t('Get_token')}
-              <Typography.Link href="https://yuque.antfin-inc.com/lark/openapi/dh8zp4" target="_blank">
+              <Typography.Link href='https://yuque.antfin-inc.com/lark/openapi/dh8zp4' target='_blank'>
                 {t('Reference_link')}
               </Typography.Link>
             </>
           }
         >
-          <Input className="mb-5  h-12" placeholder={t('input_document_token')} />
+          <Input className='mb-5  h-12' placeholder={t('input_document_token')} />
         </Form.Item>
         <Form.Item<FieldType> label={`${t('Correlation_problem')}:`}>
-          <Form.List name="questions">
+          <Form.List name='questions'>
             {(fields, { add, remove }) => (
               <>
-                {fields.map(({ key, name }, index) => (
+                {fields.map(({ key, name }) => (
                   <div key={key} className={cls('flex flex-1 items-center gap-8 mb-6')}>
-                    <Form.Item label="" name={[name, 'question']} className="grow">
+                    <Form.Item label='' name={[name, 'question']} className='grow'>
                       <Input placeholder={t('input_question')} />
                     </Form.Item>
                     <Form.Item>
@@ -253,7 +272,7 @@ export default function DocUploadForm(props: IProps) {
                 ))}
                 <Form.Item>
                   <Button
-                    type="dashed"
+                    type='dashed'
                     onClick={() => {
                       add();
                     }}
@@ -296,31 +315,31 @@ export default function DocUploadForm(props: IProps) {
   const renderDocument = () => {
     return (
       <>
-        <Form.Item<FieldType> name="originFileObj" rules={[{ required: true, message: t('Please_select_file') }]}>
+        <Form.Item<FieldType> name='originFileObj' rules={[{ required: true, message: t('Please_select_file') }]}>
           <Dragger
             multiple
             onChange={handleFileChange}
             maxCount={100}
-            accept=".pdf,.ppt,.pptx,.xls,.xlsx,.doc,.docx,.txt,.md,.zip,.csv"
+            accept='.pdf,.ppt,.pptx,.xls,.xlsx,.doc,.docx,.txt,.md,.zip,.csv'
             customRequest={uploadFile}
           >
-            <p className="ant-upload-drag-icon">
+            <p className='ant-upload-drag-icon'>
               <InboxOutlined />
             </p>
             <p style={{ color: 'rgb(22, 108, 255)', fontSize: '20px' }}>{t('Select_or_Drop_file')}</p>
-            <p className="ant-upload-hint" style={{ color: 'rgb(22, 108, 255)' }}>
+            <p className='ant-upload-hint' style={{ color: 'rgb(22, 108, 255)' }}>
               PDF, PowerPoint, Excel, Word, Text, Markdown, Zip1, Csv
             </p>
           </Dragger>
         </Form.Item>
-        <Form.Item<FieldType> label="关联问题:">
-          <Form.List name="questions">
+        <Form.Item<FieldType> label='关联问题:'>
+          <Form.List name='questions'>
             {(fields, { add, remove }) => (
               <>
-                {fields.map(({ key, name }, index) => (
+                {fields.map(({ key, name }) => (
                   <div key={key} className={cls('flex flex-1 items-center gap-8 mb-6')}>
-                    <Form.Item label="" name={[name, 'question']} className="grow">
-                      <Input placeholder="请输入问题" />
+                    <Form.Item label='' name={[name, 'question']} className='grow'>
+                      <Input placeholder='请输入问题' />
                     </Form.Item>
                     <Form.Item>
                       <MinusCircleOutlined
@@ -333,7 +352,7 @@ export default function DocUploadForm(props: IProps) {
                 ))}
                 <Form.Item>
                   <Button
-                    type="dashed"
+                    type='dashed'
                     onClick={() => {
                       add();
                     }}
@@ -368,12 +387,12 @@ export default function DocUploadForm(props: IProps) {
     <Spin spinning={spinning}>
       <Form
         form={form}
-        size="large"
+        size='large'
         className={classNames('mt-4', className)}
-        layout="vertical"
-        name="basic"
+        layout='vertical'
+        name='basic'
         initialValues={{ remember: true }}
-        autoComplete="off"
+        autoComplete='off'
         onFinish={upload}
       >
         {renderFormContainer()}
@@ -382,9 +401,9 @@ export default function DocUploadForm(props: IProps) {
             onClick={() => {
               handleStepChange({ label: 'back' });
             }}
-            className="mr-4"
+            className='mr-4'
           >{`${t('Back')}`}</Button>
-          <Button type="primary" loading={spinning} htmlType="submit">
+          <Button type='primary' loading={spinning} htmlType='submit'>
             {t('Next')}
           </Button>
         </Form.Item>