Update i18n files and Upload component (#3040)

* Update i18n files and Upload component

* 完善 i18n 和优化 Upload.tsx 文件

* 修改Upload.tsx 文件的问题...

packages/web/i18n/en/common.json

@@ -184,6 +184,7 @@
   "common.Update Successful": "Updated Successfully",
   "common.Username": "Username",
   "common.Waiting": "Waiting",
+  "common.Error": "Error",
   "common.Warning": "Warning",
   "common.Website": "Website",
   "common.all_result": "Full Results",
@@ -569,10 +570,12 @@
   "core.dataset.import.Select source": "Select Source",
   "core.dataset.import.Source name": "Source Name",
   "core.dataset.import.Sources list": "Source List",
+  "core.dataset.import.Continue upload": "Continue upload",
+  "core.dataset.import.Upload complete": "Upload complete",
   "core.dataset.import.Start upload": "Start Upload",
   "core.dataset.import.Total files": "Total {{total}} Files",
   "core.dataset.import.Training mode": "Training Mode",
-  "core.dataset.import.Upload data": "Upload Data",
+  "core.dataset.import.Upload data": "Confirm Upload",
   "core.dataset.import.Upload file progress": "File Upload Progress",
   "core.dataset.import.Upload status": "Status",
   "core.dataset.import.Web link": "Web Link",

packages/web/i18n/zh/common.json

@@ -191,6 +191,7 @@
   "common.Update Successful": "更新成功",
   "common.Username": "用户名",
   "common.Waiting": "等待中",
+  "common.Error": "错误",
   "common.Warning": "警告",
   "common.Website": "网站",
   "common.all_result": "完整结果",
@@ -575,10 +576,12 @@
   "core.dataset.import.Select source": "选择来源",
   "core.dataset.import.Source name": "来源名",
   "core.dataset.import.Sources list": "来源列表",
+  "core.dataset.import.Continue upload": "继续上传",
+  "core.dataset.import.Upload complete": "完成上传",
   "core.dataset.import.Start upload": "开始上传",
   "core.dataset.import.Total files": "共 {{total}} 个文件",
   "core.dataset.import.Training mode": "训练模式",
-  "core.dataset.import.Upload data": "上传数据",
+  "core.dataset.import.Upload data": "确认上传",
   "core.dataset.import.Upload file progress": "文件上传进度",
   "core.dataset.import.Upload status": "状态",
   "core.dataset.import.Web link": "网页链接",

projects/app/src/pages/dataset/detail/components/Import/commonProgress/Upload.tsx

@@ -1,4 +1,5 @@
-import React from 'react';
+import React, { useMemo } from 'react';
+import { QuestionOutlineIcon } from '@chakra-ui/icons';
 import {
   Box,
   TableContainer,
@@ -9,7 +10,9 @@ import {
   Td,
   Tbody,
   Flex,
-  Button
+  Button,
+  IconButton,
+  Tooltip
 } from '@chakra-ui/react';
 import { ImportDataSourceEnum } from '@fastgpt/global/core/dataset/constants';
 import { useTranslation } from 'next-i18next';
@@ -42,6 +45,32 @@ const Upload = () => {
 
   const { handleSubmit } = processParamsForm;
 
+  const { totalFilesCount, waitingFilesCount, allFinished, hasCreatingFiles } = useMemo(() => {
+    const totalFilesCount = sources.length;
+
+    const { waitingFilesCount, allFinished, hasCreatingFiles } = sources.reduce(
+      (acc, file) => {
+        if (file.createStatus === 'waiting') acc.waitingFilesCount++;
+        if (file.createStatus === 'creating') acc.hasCreatingFiles = true;
+        if (file.createStatus !== 'finish') acc.allFinished = false;
+        return acc;
+      },
+      { waitingFilesCount: 0, allFinished: true, hasCreatingFiles: false }
+    );
+
+    return { totalFilesCount, waitingFilesCount, allFinished, hasCreatingFiles };
+  }, [sources]);
+
+  const buttonText = useMemo(() => {
+    if (waitingFilesCount === totalFilesCount) {
+      return t('common:core.dataset.import.Start upload');
+    } else if (allFinished) {
+      return t('common:core.dataset.import.Upload complete');
+    } else {
+      return t('common:core.dataset.import.Continue upload');
+    }
+  }, [waitingFilesCount, totalFilesCount, allFinished, t]);
+
   const { mutate: startUpload, isLoading } = useRequest({
     mutationFn: async ({ mode, customSplitChar, qaPrompt, webSelector }: ImportFormType) => {
       if (sources.length === 0) return;
@@ -117,10 +146,12 @@ const Upload = () => {
       }
     },
     onSuccess() {
-      toast({
+      if (!sources.some((file) => file.errorMsg !== undefined)) {
-        title: t('common:core.dataset.import.Import success'),
+        toast({
-        status: 'success'
+          title: t('common:core.dataset.import.Import success'),
-      });
+          status: 'success'
+        });
+      }
 
       // close import page
       router.replace({
@@ -130,13 +161,14 @@ const Upload = () => {
         }
       });
     },
-    onError() {
+    onError(error) {
       setSources((state) =>
         state.map((source) =>
           source.createStatus === 'creating'
             ? {
                 ...source,
-                createStatus: 'waiting'
+                createStatus: 'waiting',
+                errorMsg: error.message || fileT('upload_failed')
               }
             : source
         )
@@ -157,6 +189,9 @@ const Upload = () => {
               <Th borderBottom={'none'} py={4}>
                 {t('common:core.dataset.import.Upload status')}
               </Th>
+              <Th borderRightRadius={'md'} borderBottom={'none'} py={4}>
+                {t('common:common.Action')}
+              </Th>
             </Tr>
           </Thead>
           <Tbody>
@@ -172,17 +207,41 @@ const Upload = () => {
                 </Td>
                 <Td>
                   <Box display={'inline-block'}>
-                    {item.createStatus === 'waiting' && (
+                    {item.errorMsg ? (
-                      <MyTag colorSchema={'gray'}>{t('common:common.Waiting')}</MyTag>
+                      <Tooltip label={item.errorMsg} fontSize="md">
-                    )}
+                        <Flex alignItems="center">
-                    {item.createStatus === 'creating' && (
+                          <MyTag colorSchema={'red'}>{t('common:common.Error')}</MyTag>
-                      <MyTag colorSchema={'blue'}>{t('common:common.Creating')}</MyTag>
+                          <QuestionOutlineIcon ml={2} color="red.500" w="14px" />
-                    )}
+                        </Flex>
-                    {item.createStatus === 'finish' && (
+                      </Tooltip>
-                      <MyTag colorSchema={'green'}>{t('common:common.Finish')}</MyTag>
+                    ) : (
+                      <>
+                        {item.createStatus === 'waiting' && (
+                          <MyTag colorSchema={'gray'}>{t('common:common.Waiting')}</MyTag>
+                        )}
+                        {item.createStatus === 'creating' && (
+                          <MyTag colorSchema={'blue'}>{t('common:common.Creating')}</MyTag>
+                        )}
+                        {item.createStatus === 'finish' && (
+                          <MyTag colorSchema={'green'}>{t('common:common.Finish')}</MyTag>
+                        )}
+                      </>
                     )}
                   </Box>
                 </Td>
+                <Td>
+                  {!hasCreatingFiles && item.createStatus !== 'finish' && (
+                    <IconButton
+                      variant={'grayDanger'}
+                      size={'sm'}
+                      icon={<MyIcon name={'delete'} w={'14px'} />}
+                      aria-label={'Delete file'}
+                      onClick={() => {
+                        setSources((prevFiles) => prevFiles.filter((file) => file.id !== item.id));
+                      }}
+                    />
+                  )}
+                </Td>
               </Tr>
             ))}
           </Tbody>
@@ -191,10 +250,11 @@ const Upload = () => {
 
       <Flex justifyContent={'flex-end'} mt={4}>
         <Button isLoading={isLoading} onClick={handleSubmit((data) => startUpload(data))}>
-          {sources.length > 0
+          {totalFilesCount > 0 &&
-            ? `${t('core.dataset.import.Total files', { total: sources.length })} | `
+            `${t('common:core.dataset.import.Total files', {
-            : ''}
+              total: totalFilesCount
-          {t('common:core.dataset.import.Start upload')}
+            })} | `}
+          {buttonText}
         </Button>
       </Flex>
     </Box>