style: 知识库新列表 (#2448)

* style: 知识库新列表 * i18n adjust * fix: i18n
labring · Aug 20, 2024 · 40b1d22 · 40b1d22
1 parent 2d0e6bd
commit 40b1d22
Show file tree

Hide file tree

Showing 12 changed files with 215 additions and 111 deletions.
diff --git a/packages/web/components/common/Icon/constants.ts b/packages/web/components/common/Icon/constants.ts
@@ -128,9 +128,12 @@ export const iconPaths = {
   'core/chat/speaking': () => import('./icons/core/chat/speaking.svg'),
   'core/chat/stopSpeech': () => import('./icons/core/chat/stopSpeech.svg'),
   'core/dataset/commonDataset': () => import('./icons/core/dataset/commonDataset.svg'),
+  'core/dataset/commonDatasetColor': () => import('./icons/core/dataset/commonDatasetColor.svg'),
   'core/dataset/datasetFill': () => import('./icons/core/dataset/datasetFill.svg'),
   'core/dataset/datasetLight': () => import('./icons/core/dataset/datasetLight.svg'),
   'core/dataset/externalDataset': () => import('./icons/core/dataset/externalDataset.svg'),
+  'core/dataset/externalDatasetColor': () =>
+    import('./icons/core/dataset/externalDatasetColor.svg'),
   'core/dataset/fileCollection': () => import('./icons/core/dataset/fileCollection.svg'),
   'core/dataset/fullTextRecall': () => import('./icons/core/dataset/fullTextRecall.svg'),
   'core/dataset/manualCollection': () => import('./icons/core/dataset/manualCollection.svg'),
@@ -141,6 +144,7 @@ export const iconPaths = {
   'core/dataset/tableCollection': () => import('./icons/core/dataset/tableCollection.svg'),
   'core/dataset/tag': () => import('./icons/core/dataset/tag.svg'),
   'core/dataset/websiteDataset': () => import('./icons/core/dataset/websiteDataset.svg'),
+  'core/dataset/websiteDatasetColor': () => import('./icons/core/dataset/websiteDatasetColor.svg'),
   'core/modules/basicNode': () => import('./icons/core/modules/basicNode.svg'),
   'core/modules/fixview': () => import('./icons/core/modules/fixview.svg'),
   'core/modules/flowLight': () => import('./icons/core/modules/flowLight.svg'),

diff --git a/packages/web/components/common/Icon/icons/core/dataset/commonDatasetColor.svg b/packages/web/components/common/Icon/icons/core/dataset/commonDatasetColor.svg
diff --git a/packages/web/components/common/Icon/icons/core/dataset/externalDatasetColor.svg b/packages/web/components/common/Icon/icons/core/dataset/externalDatasetColor.svg
diff --git a/packages/web/components/common/Icon/icons/core/dataset/websiteDatasetColor.svg b/packages/web/components/common/Icon/icons/core/dataset/websiteDatasetColor.svg
diff --git a/packages/web/i18n/en/common.json b/packages/web/i18n/en/common.json
@@ -500,10 +500,12 @@
       "logs": {
         "api": "API call",
         "feishu": "Lark",
+        "official_account": "Official account",
         "online": "Online use",
         "share": "External link call",
         "team": "Team chat",
-        "test": "Test"
+        "test": "Test",
+        "wecom": "Enterprise WeChat"
       },
       "markdown": {
         "Edit Question": "Edit question",
@@ -560,7 +562,7 @@
       "Avatar": "Dataset avatar",
       "Choose Dataset": "Associate dataset",
       "Collection": "Dataset",
-      "Create dataset": "Create a dataset",
+      "Create dataset": "Create a {{name}}",
       "Dataset": "Dataset",
       "Dataset ID": "Dataset ID",
       "Dataset Type": "Dataset type",
@@ -615,8 +617,7 @@
             "success": "Start syncing"
           }
         },
-        "training": {
-        }
+        "training": {}
       },
       "data": {
         "Auxiliary Data": "Auxiliary data",
@@ -1029,6 +1030,7 @@
       },
       "input is empty": "Data content cannot be empty"
     },
+    "dataset_name": "Knowledge base name",
     "deleteFolderTips": "Confirm to delete this folder and all the datasets it contains? Once deleted, data cannot be recovered. Please confirm!",
     "test": {
       "noResult": "No results found"
@@ -1316,9 +1318,7 @@
         "Sub plan": "Subscription plan",
         "Sub plan tip": "Free use of {{title}} or upgrade to a higher plan",
         "Team plan and usage": "Plan and usage",
-        "web_site_sync": "Website sync",
         "Training weight": "Training priority: {{weight}}",
-        "rerank": "Rerank",
         "Update extra ai points": "Extra AI points",
         "Update extra dataset size": "Extra storage",
         "Upgrade plan": "Upgrade plan",
@@ -1338,6 +1338,7 @@
           "Year sale": "Two months free"
         },
         "point": "integral",
+        "rerank": "Rerank",
         "standardSubLevel": {
           "enterprise": "Enterprise edition",
           "experience": "Experience edition",
@@ -1351,7 +1352,8 @@
           "extraDatasetSize": "Knowledge base expansion",
           "extraPoints": "AI points package",
           "standard": "Plan subscription"
-        }
+        },
+        "web_site_sync": "Website sync"
       },
       "usage": {
         "Ai model": "AI model",

diff --git a/packages/web/i18n/en/publish.json b/packages/web/i18n/en/publish.json
@@ -15,10 +15,15 @@
   "key_alias": "key alias, for display only ",
   "key_tips": "You can use the API Key to access certain interfaces (you can't access the app, you need to use the API key within the app to access the app)",
   "link_name": "Name of the share link",
+  "new_feishu_bot": "Added Feishu robot",
   "official_account": {
+    "api": "WeChat public account API",
+    "create_modal_title": "Create a WeChat public account to access",
+    "desc": "Directly access WeChat official account through API",
+    "edit_modal_title": "Edit WeChat public account access",
+    "name": "WeChat public account access",
     "params": "Wechat params"
   },
-  "new_feishu_bot": "Added Feishu robot",
   "publish_name": "name",
   "qpm_is_empty": "QPM cannot be empty",
   "qpm_tips": "How many times per minute can each IP ask at most",

diff --git a/packages/web/i18n/en/user.json b/packages/web/i18n/en/user.json
@@ -87,6 +87,9 @@
     "no_collaborators": "No collaborators yet"
   },
   "usage": {
-    "feishu": "Lark"
+    "feishu": "Lark",
+    "official_account": "Official account",
+    "share": "share link",
+    "wecom": "Enterprise WeChat"
   }
 }
diff --git a/packages/web/i18n/zh/common.json b/packages/web/i18n/zh/common.json
@@ -565,7 +565,7 @@
       "Avatar": "知识库头像",
       "Choose Dataset": "关联知识库",
       "Collection": "数据集",
-      "Create dataset": "创建一个知识库",
+      "Create dataset": "创建一个{{name}}",
       "Dataset": "知识库",
       "Dataset ID": "知识库 ID",
       "Dataset Type": "知识库类型",
@@ -996,6 +996,7 @@
     "Edit Folder": "编辑文件夹",
     "Edit Info": "编辑信息",
     "Export": "导出",
+    "dataset_name": "知识库名称",
     "Export Dataset Limit Error": "导出数据失败",
     "Folder Name": "输入文件夹名称",
     "Insert Data": "插入",

diff --git a/projects/app/src/pages/dataset/list/component/CreateModal.tsx b/projects/app/src/pages/dataset/list/component/CreateModal.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { Box, Flex, Button, ModalFooter, ModalBody, Input } from '@chakra-ui/react';
 import { useSelectFile } from '@/web/common/file/hooks/useSelectFile';
 import { useForm } from 'react-hook-form';
@@ -14,37 +14,63 @@ import MyModal from '@fastgpt/web/components/common/MyModal';
 import { postCreateDataset } from '@/web/core/dataset/api';
 import type { CreateDatasetParams } from '@/global/core/dataset/api.d';
 import { useTranslation } from 'next-i18next';
-import MyRadio from '@/components/common/MyRadio';
 import { DatasetTypeEnum } from '@fastgpt/global/core/dataset/constants';
 import { MongoImageTypeEnum } from '@fastgpt/global/common/file/image/constants';
 import AIModelSelector from '@/components/Select/AIModelSelector';
-import { useI18n } from '@/web/context/I18n';
+
 import QuestionTip from '@fastgpt/web/components/common/MyTooltip/QuestionTip';
 import { useSystem } from '@fastgpt/web/hooks/useSystem';
 
-const CreateModal = ({ onClose, parentId }: { onClose: () => void; parentId?: string }) => {
+export type CreateDatasetType =
+  | DatasetTypeEnum.dataset
+  | DatasetTypeEnum.externalFile
+  | DatasetTypeEnum.websiteDataset;
+
+const CreateModal = ({
+  onClose,
+  parentId,
+  type
+}: {
+  onClose: () => void;
+  parentId?: string;
+  type: CreateDatasetType;
+}) => {
   const { t } = useTranslation();
-  const { datasetT } = useI18n();
   const { toast } = useToast();
   const router = useRouter();
-  const { feConfigs, vectorModelList, datasetModelList } = useSystemStore();
+  const { vectorModelList, datasetModelList } = useSystemStore();
   const { isPc } = useSystem();
 
+  const databaseNameMap = useMemo(() => {
+    return {
+      [DatasetTypeEnum.dataset]: t('dataset:common_dataset'),
+      [DatasetTypeEnum.externalFile]: t('dataset:external_file'),
+      [DatasetTypeEnum.websiteDataset]: t('dataset:website_dataset')
+    };
+  }, [t]);
+
+  const iconMap = useMemo(() => {
+    return {
+      [DatasetTypeEnum.dataset]: 'core/dataset/commonDatasetColor',
+      [DatasetTypeEnum.externalFile]: 'core/dataset/externalDatasetColor',
+      [DatasetTypeEnum.websiteDataset]: 'core/dataset/websiteDatasetColor'
+    };
+  }, []);
+
   const filterNotHiddenVectorModelList = vectorModelList.filter((item) => !item.hidden);
 
   const { register, setValue, handleSubmit, watch } = useForm<CreateDatasetParams>({
     defaultValues: {
       parentId,
-      type: DatasetTypeEnum.dataset,
-      avatar: '/icon/logo.svg',
+      type: type || DatasetTypeEnum.dataset,
+      avatar: iconMap[type] || 'core/dataset/commonDatasetColor',
       name: '',
       intro: '',
       vectorModel: filterNotHiddenVectorModelList[0].model,
       agentModel: datasetModelList[0].model
     }
   });
   const avatar = watch('avatar');
-  const datasetType = watch('type');
   const vectorModel = watch('vectorModel');
   const agentModel = watch('agentModel');
 
@@ -88,63 +114,16 @@ const CreateModal = ({ onClose, parentId }: { onClose: () => void; parentId?: st
     }
   });
 
-  const onSelectDatasetType = useCallback(
-    (e: DatasetTypeEnum) => {
-      if (
-        !feConfigs?.isPlus &&
-        (e === DatasetTypeEnum.websiteDataset || e === DatasetTypeEnum.externalFile)
-      ) {
-        return toast({
-          status: 'warning',
-          title: t('common:common.system.Commercial version function')
-        });
-      }
-      setValue('type', e);
-    },
-    [feConfigs?.isPlus, setValue, t, toast]
-  );
-
   return (
     <MyModal
-      iconSrc="/imgs/workflow/db.png"
-      title={t('common:core.dataset.Create dataset')}
+      iconSrc={iconMap[type]}
+      title={t('common:core.dataset.Create dataset', { name: databaseNameMap[type] })}
       isOpen
       onClose={onClose}
       isCentered={!isPc}
       w={'450px'}
     >
       <ModalBody py={2}>
-        <>
-          <Box mb={1} color={'myGray.900'}>
-            {t('common:core.dataset.Dataset Type')}
-          </Box>
-          <MyRadio
-            gridGap={2}
-            gridTemplateColumns={'repeat(1,1fr)'}
-            list={[
-              {
-                title: datasetT('common_dataset'),
-                value: DatasetTypeEnum.dataset,
-                icon: 'core/dataset/commonDataset',
-                desc: datasetT('common_dataset_desc')
-              },
-              {
-                title: datasetT('website_dataset'),
-                value: DatasetTypeEnum.websiteDataset,
-                icon: 'core/dataset/websiteDataset',
-                desc: datasetT('website_dataset_desc')
-              },
-              {
-                title: datasetT('external_file'),
-                value: DatasetTypeEnum.externalFile,
-                icon: 'core/dataset/externalDataset',
-                desc: datasetT('external_file_dataset_desc')
-              }
-            ]}
-            value={datasetType}
-            onChange={onSelectDatasetType}
-          />
-        </>
         <Box mt={5}>
           <Box color={'myGray.900'}>{t('common:common.Set Name')}</Box>
           <Flex mt={1} alignItems={'center'}>

diff --git a/projects/app/src/pages/dataset/list/component/List.tsx b/projects/app/src/pages/dataset/list/component/List.tsx
@@ -49,7 +49,8 @@ function List() {
     setEditedDataset,
     onDelDataset,
     onUpdateDataset,
-    myDatasets
+    myDatasets,
+    folderDetail
   } = useContextSelector(DatasetsContext, (v) => v);
   const [editPerDatasetIndex, setEditPerDatasetIndex] = useState<number>();
   const [loadingDatasetId, setLoadingDatasetId] = useState<string>();
@@ -142,11 +143,14 @@ function List() {
     <>
       {formatDatasets.length > 0 && (
         <Grid
-          flexGrow={1}
-          py={5}
-          gridTemplateColumns={['1fr', 'repeat(2,1fr)', 'repeat(3,1fr)', 'repeat(4,1fr)']}
+          py={4}
+          gridTemplateColumns={
+            folderDetail
+              ? ['1fr', 'repeat(2,1fr)', 'repeat(2,1fr)', 'repeat(3,1fr)']
+              : ['1fr', 'repeat(2,1fr)', 'repeat(3,1fr)', 'repeat(3,1fr)', 'repeat(4,1fr)']
+          }
           gridGap={5}
-          userSelect={'none'}
+          alignItems={'stretch'}
         >
           {formatDatasets.map((dataset, index) => (
             <MyTooltip
@@ -165,14 +169,18 @@ function List() {
                 isLoading={loadingDatasetId === dataset._id}
                 display={'flex'}
                 flexDirection={'column'}
+                lineHeight={1.5}
+                h="100%"
                 py={3}
                 px={5}
                 cursor={'pointer'}
                 borderWidth={1.5}
+                border={'base'}
+                boxShadow={'2'}
                 bg={'white'}
-                borderRadius={'md'}
-                minH={'130px'}
+                borderRadius={'lg'}
                 position={'relative'}
+                minH={'150px'}
                 {...getBoxProps({
                   dataId: dataset._id,
                   isFolder: dataset.type === DatasetTypeEnum.folder