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

* style: 知识库新列表 * i18n adjust * fix: i18n

style: 知识库新列表 (#2448)
* style: 知识库新列表 * i18n adjust * fix: i18n
40b1d22d · papapatrick · GitHub · 2d0e6bd0 · 40b1d22d · 40b1d22d
Commit 40b1d22d authored Aug 20, 2024 by papapatrick Committed by GitHub Aug 20, 2024
12 changed files
--- 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'),

--- a/packages/web/components/common/Icon/icons/core/dataset/commonDatasetColor.svg
+++ b/packages/web/components/common/Icon/icons/core/dataset/commonDatasetColor.svg
+<svg  viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="100%" height="100%" fill="url(#paint0_linear_7964_19459)" rx="2" ry="2" />
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.28019 5.36532C4.17847 5.56497 4.17847 5.82633 4.17847 6.34905V8.02905C4.17847 8.55176 4.17847 8.81312 4.28019 9.01277C4.36968 9.18839 4.51246 9.33117 4.68808 9.42065C4.88773 9.52238 5.14908 9.52238 5.6718 9.52238H14.3984C14.9211 9.52238 15.1825 9.52238 15.3821 9.42065C15.5578 9.33117 15.7005 9.18839 15.79 9.01277C15.8918 8.81312 15.8918 8.55176 15.8918 8.02905V6.34905C15.8918 5.82633 15.8918 5.56497 15.79 5.36532C15.7005 5.1897 15.5578 5.04692 15.3821 4.95744C15.1825 4.85571 14.9211 4.85571 14.3984 4.85571H5.6718C5.14908 4.85571 4.88773 4.85571 4.68808 4.95744C4.51246 5.04692 4.36968 5.1897 4.28019 5.36532ZM6.6542 8.06405C7.13745 8.06405 7.5292 7.6723 7.5292 7.18905C7.5292 6.7058 7.13745 6.31405 6.6542 6.31405C6.17095 6.31405 5.7792 6.7058 5.7792 7.18905C5.7792 7.6723 6.17095 8.06405 6.6542 8.06405Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.28019 10.9873C4.17847 11.1869 4.17847 11.4483 4.17847 11.971V13.651C4.17847 14.1737 4.17847 14.4351 4.28019 14.6347C4.36968 14.8103 4.51246 14.9531 4.68808 15.0426C4.88773 15.1443 5.14908 15.1443 5.6718 15.1443H14.3984C14.9211 15.1443 15.1825 15.1443 15.3821 15.0426C15.5578 14.9531 15.7005 14.8103 15.79 14.6347C15.8918 14.4351 15.8918 14.1737 15.8918 13.651V11.971C15.8918 11.4483 15.8918 11.1869 15.79 10.9873C15.7005 10.8116 15.5578 10.6689 15.3821 10.5794C15.1825 10.4777 14.9211 10.4777 14.3984 10.4777H5.6718C5.14908 10.4777 4.88773 10.4777 4.68808 10.5794C4.51246 10.6689 4.36968 10.8116 4.28019 10.9873ZM6.6542 13.686C7.13745 13.686 7.5292 13.2942 7.5292 12.811C7.5292 12.3277 7.13745 11.936 6.6542 11.936C6.17095 11.936 5.7792 12.3277 5.7792 12.811C5.7792 13.2942 6.17095 13.686 6.6542 13.686Z" fill="white"/>
+<defs>
+<linearGradient id="paint0_linear_7964_19459" x1="1.5" y1="20" x2="20" y2="1.6056e-06" gradientUnits="userSpaceOnUse">
+<stop stop-color="#4484FF"/>
+<stop offset="1" stop-color="#5CA7FF"/>
+</linearGradient>
+</defs>
+</svg> 
--- a/packages/web/components/common/Icon/icons/core/dataset/externalDatasetColor.svg
+++ b/packages/web/components/common/Icon/icons/core/dataset/externalDatasetColor.svg
+<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="100%" height="100%" fill="url(#paint0_linear_7967_30275)"  rx="2" ry="2" />
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.7552 4.8767C12.3073 4.92969 11.9962 5.33456 12.0603 5.78101L13.3235 14.5762C13.3876 15.0226 13.8027 15.3416 14.2506 15.2886L16.1502 15.0639C16.5981 15.0109 16.9093 14.606 16.8451 14.1596L15.582 5.36443C15.5178 4.91798 15.1028 4.59901 14.6548 4.65199L12.7552 4.8767ZM4.0675 5.52248C4.0675 5.07145 4.43314 4.70582 4.88417 4.70582H6.80225C7.25328 4.70582 7.61892 5.07145 7.61892 5.52248V14.4772C7.61892 14.9282 7.25328 15.2938 6.80225 15.2938H4.88417C4.43314 15.2938 4.0675 14.9282 4.0675 14.4772V5.52248ZM8.20321 5.52248C8.20321 5.07145 8.56885 4.70582 9.01988 4.70582H10.938C11.389 4.70582 11.7546 5.07145 11.7546 5.52248V14.4772C11.7546 14.9282 11.389 15.2938 10.938 15.2938H9.01988C8.56885 15.2938 8.20321 14.9282 8.20321 14.4772V5.52248Z" fill="white"/>
+<defs>
+<linearGradient id="paint0_linear_7967_30275" x1="1.5" y1="20" x2="20" y2="1.6056e-06" gradientUnits="userSpaceOnUse">
+<stop stop-color="#C172FF"/>
+<stop offset="1" stop-color="#F19EFF"/> 
+</linearGradient>
+</defs>
+</svg>
--- a/packages/web/components/common/Icon/icons/core/dataset/websiteDatasetColor.svg
+++ b/packages/web/components/common/Icon/icons/core/dataset/websiteDatasetColor.svg
+<svg  viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="100%" height="100%" fill="url(#paint0_linear_7967_30271)"  rx="2" ry="2" />
+<path d="M12.8568 4.51367H7.14332C6.70594 4.51366 6.34265 4.51366 6.04623 4.53788C5.73762 4.56309 5.45049 4.61744 5.17975 4.75539C4.76247 4.968 4.4232 5.30727 4.21059 5.72455C4.07264 5.99529 4.01829 6.28242 3.99308 6.59103C3.96886 6.88745 3.96886 7.25074 3.96887 7.68812V10.1329C3.96886 10.5702 3.96886 10.9335 3.99308 11.23C4.01829 11.5386 4.07264 11.8257 4.21059 12.0964C4.4232 12.5137 4.76247 12.853 5.17975 13.0656C5.45049 13.2036 5.73762 13.2579 6.04623 13.2831C6.34263 13.3073 6.70588 13.3073 7.14321 13.3073H9.41671V14.3198H7.82091C7.49874 14.3198 7.23758 14.581 7.23758 14.9031C7.23758 15.2253 7.49874 15.4865 7.82091 15.4865H12.1792C12.5014 15.4865 12.7625 15.2253 12.7625 14.9031C12.7625 14.581 12.5014 14.3198 12.1792 14.3198H10.5834V13.3073H12.8568C13.2941 13.3073 13.6575 13.3073 13.9539 13.2831C14.2625 13.2579 14.5496 13.2036 14.8203 13.0656C15.2376 12.853 15.5769 12.5137 15.7895 12.0964C15.9275 11.8257 15.9818 11.5386 16.007 11.23C16.0312 10.9335 16.0312 10.5703 16.0312 10.1329V7.6881C16.0312 7.25075 16.0312 6.88744 16.007 6.59103C15.9818 6.28242 15.9275 5.99529 15.7895 5.72455C15.5769 5.30727 15.2376 4.968 14.8203 4.75539C14.5496 4.61744 14.2625 4.56309 13.9539 4.53788C13.6574 4.51366 13.2942 4.51366 12.8568 4.51367Z" fill="white"/>
+<defs>
+<linearGradient id="paint0_linear_7967_30271" x1="1.5" y1="20" x2="20" y2="1.6056e-06" gradientUnits="userSpaceOnUse">
+<stop stop-color="#747AFF"/>
+<stop offset="1" stop-color="#A899FF"/>
+</linearGradient> 
+</defs>
+</svg>
--- 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",

--- 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",

--- 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"
  }
 }
--- 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": "插入",

--- a/projects/app/src/pages/dataset/list/component/CreateModal.tsx
+++ b/projects/app/src/pages/dataset/list/component/CreateModal.tsx
-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,29 +14,56 @@ 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,
+      type: type || DatasetTypeEnum.dataset,
-      avatar: '/icon/logo.svg',
+      avatar: iconMap[type] || 'core/dataset/commonDatasetColor',
      name: '',
      intro: '',
      vectorModel: filterNotHiddenVectorModelList[0].model,
@@ -44,7 +71,6 @@ const CreateModal = ({ onClose, parentId }: { onClose: () => void; parentId?: st
    }
  });
  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"
+      iconSrc={iconMap[type]}
-      title={t('common:core.dataset.Create dataset')}
+      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'}>

--- 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={4}
-          py={5}
+          gridTemplateColumns={
-          gridTemplateColumns={['1fr', 'repeat(2,1fr)', 'repeat(3,1fr)', 'repeat(4,1fr)']}
+            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'}
+                borderRadius={'lg'}
-                minH={'130px'}
                position={'relative'}
+                minH={'150px'}
                {...getBoxProps({
                  dataId: dataset._id,
                  isFolder: dataset.type === DatasetTypeEnum.folder

--- a/projects/app/src/pages/dataset/list/context.tsx
+++ b/projects/app/src/pages/dataset/list/context.tsx
@@ -37,6 +37,8 @@ export type DatasetContextType = {
  setEditedDataset: (data?: EditResourceInfoFormType) => void;
  onDelDataset: (id: string) => Promise<void>;
  onUpdateDataset: (data: DatasetUpdateBody) => Promise<void>;
+  searchKey: string;
+  setSearchKey: React.Dispatch<React.SetStateAction<string>>;
 };
 export const DatasetsContext = createContext<DatasetContextType>({
@@ -57,7 +59,11 @@ export const DatasetsContext = createContext<DatasetContextType>({
  onUpdateDataset: function (_data: DatasetUpdateBody): Promise<void> {
    throw new Error('Function not implemented.');
  },
-  myDatasets: []
+  myDatasets: [],
+  searchKey: '',
+  setSearchKey: function (value: React.SetStateAction<string>): void {
+    throw new Error('Function not implemented.');
+  }
 });
 function DatasetContextProvider({ children }: { children: React.ReactNode }) {
@@ -65,7 +71,7 @@ function DatasetContextProvider({ children }: { children: React.ReactNode }) {
  const { commonT } = useI18n();
  const { t } = useTranslation();
  const [moveDatasetId, setMoveDatasetId] = useState<string>();
+  const [searchKey, setSearchKey] = useState('');
  const { parentId = null } = router.query as { parentId?: string | null };
  const {
@@ -75,11 +81,12 @@ function DatasetContextProvider({ children }: { children: React.ReactNode }) {
  } = useRequest2(
    () =>
      getDatasets({
+        searchKey,
        parentId
      }),
    {
      manual: false,
-      refreshDeps: [parentId]
+      refreshDeps: [parentId, searchKey]
    }
  );
@@ -145,7 +152,9 @@ function DatasetContextProvider({ children }: { children: React.ReactNode }) {
    onDelDataset,
    onUpdateDataset,
    myDatasets,
-    loadMyDatasets
+    loadMyDatasets,
+    searchKey,
+    setSearchKey
  };
  return (

--- a/projects/app/src/pages/dataset/list/index.tsx
+++ b/projects/app/src/pages/dataset/list/index.tsx
-import React, { useState } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
-import { Box, Flex, Image, Button, useDisclosure } from '@chakra-ui/react';
+import {
+  Box,
+  Flex,
+  Image,
+  Button,
+  useDisclosure,
+  InputGroup,
+  InputLeftElement,
+  Input
+} from '@chakra-ui/react';
 import { useRouter } from 'next/router';
 import PageContainer from '@/components/PageContainer';
 import { useTranslation } from 'next-i18next';
@@ -28,6 +37,10 @@ import {
  getCollaboratorList
 } from '@/web/core/dataset/api/collaborator';
 import { useSystem } from '@fastgpt/web/hooks/useSystem';
+import { CreateDatasetType } from './component/CreateModal';
+import { DatasetTypeEnum } from '@fastgpt/global/core/dataset/constants';
+import { useToast } from '@fastgpt/web/hooks/useToast';
+import MyBox from '@fastgpt/web/components/common/MyBox';
 const EditFolderModal = dynamic(
  () => import('@fastgpt/web/components/common/MyModal/EditFolderModal')
@@ -52,32 +65,62 @@ const Dataset = () => {
    setEditedDataset,
    setMoveDatasetId,
    onDelDataset,
-    onUpdateDataset
+    onUpdateDataset,
+    searchKey,
+    setSearchKey
  } = useContextSelector(DatasetsContext, (v) => v);
  const { userInfo } = useUserStore();
+  const { toast } = useToast();
  const [editFolderData, setEditFolderData] = useState<EditFolderFormType>();
+  const [createDatasetType, setCreateDatasetType] = useState<CreateDatasetType>();
-  const {
+  const onSelectDatasetType = useCallback(
-    isOpen: isOpenCreateModal,
+    (e: CreateDatasetType) => {
-    onOpen: onOpenCreateModal,
+      if (
-    onClose: onCloseCreateModal
+        !feConfigs?.isPlus &&
-  } = useDisclosure();
+        (e === DatasetTypeEnum.websiteDataset || e === DatasetTypeEnum.externalFile)
+      ) {
+        return toast({
+          status: 'warning',
+          title: t('common:common.system.Commercial version function')
+        });
+      }
+      setCreateDatasetType(e);
+    },
+    [t, toast]
+  );
+  const RenderSearchInput = useMemo(
+    () => (
+      <InputGroup maxW={['auto', '250px']} pr={4}>
+        <InputLeftElement h={'full'} alignItems={'center'} display={'flex'}>
+          <MyIcon name={'common/searchLight'} w={'1rem'} />
+        </InputLeftElement>
+        <Input
+          value={searchKey}
+          onChange={(e) => setSearchKey(e.target.value)}
+          placeholder={t('common:dataset.dataset_name')}
+          maxLength={30}
+          bg={'white'}
+        />
+      </InputGroup>
+    ),
+    [searchKey, setSearchKey, t]
+  );
  return (
-    <PageContainer
+    <MyBox
      isLoading={myDatasets.length === 0 && isFetchingDatasets}
-      insertProps={{ px: folderDetail ? [4, 6] : [5, '10'] }}
+      flexDirection={'column'}
+      h={'100%'}
    >
-      <Flex pt={[4, 6]}>
+      <Flex pt={[4, 6]} pl={3} pr={10}>
        <Flex flexGrow={1} flexDirection="column">
          <Flex alignItems={'flex-start'} justifyContent={'space-between'}>
            <ParentPaths
              paths={paths}
              FirstPathDom={
                <Flex flex={1} alignItems={'center'}>
-                  <Image src={'/imgs/workflow/db.png'} alt={''} mr={2} h={'24px'} />
+                  <Box pl={2} letterSpacing={1} fontSize={'1.25rem'} fontWeight={'bold'}>
-                  <Box className="textlg" letterSpacing={1} fontSize={'24px'} fontWeight={'bold'}>
                    {t('common:core.dataset.My Dataset')}
                  </Box>
                </Flex>
@@ -90,10 +133,14 @@ const Dataset = () => {
                });
              }}
            />
+            {isPc && RenderSearchInput}
            {userInfo?.team?.permission.hasWritePer && (
              <MyMenu
                offset={[-30, 5]}
                width={120}
+                iconSize="2rem"
                Button={
                  <Button variant={'primary'} px="0">
                    <Flex alignItems={'center'} px={'20px'}>
@@ -106,22 +153,31 @@ const Dataset = () => {
                  {
                    children: [
                      {
-                        label: (
+                        icon: 'core/dataset/commonDatasetColor',
-                          <Flex>
+                        label: t('dataset:common_dataset'),
-                            <MyIcon name={FolderIcon} w={'20px'} mr={1} />
+                        description: t('dataset:common_dataset_desc'),
-                            {t('common:Folder')}
+                        onClick: () => setCreateDatasetType(DatasetTypeEnum.dataset)
-                          </Flex>
+                      },
-                        ),
+                      {
-                        onClick: () => setEditFolderData({})
+                        icon: 'core/dataset/websiteDatasetColor',
+                        label: t('dataset:website_dataset'),
+                        description: t('dataset:website_dataset_desc'),
+                        onClick: () => setCreateDatasetType(DatasetTypeEnum.websiteDataset)
                      },
                      {
-                        label: (
+                        icon: 'core/dataset/externalDatasetColor',
-                          <Flex>
+                        label: t('dataset:external_file'),
-                            <Image src={'/imgs/workflow/db.png'} alt={''} w={'20px'} mr={1} />
+                        description: t('dataset:external_file_dataset_desc'),
-                            {t('common:core.dataset.Dataset')}
+                        onClick: () => setCreateDatasetType(DatasetTypeEnum.externalFile)
-                          </Flex>
+                      }
-                        ),
+                    ]
-                        onClick: onOpenCreateModal
+                  },
+                  {
+                    children: [
+                      {
+                        icon: FolderIcon,
+                        label: t('common:Folder'),
+                        onClick: () => setEditFolderData({})
                      }
                    ]
                  }
@@ -129,6 +185,9 @@ const Dataset = () => {
              />
            )}
          </Flex>
+          {!isPc && <Box mt={2}>{RenderSearchInput}</Box>}
          <Box flexGrow={1}>
            <List />
          </Box>
@@ -231,13 +290,16 @@ const Dataset = () => {
          }}
        />
      )}
-      {isOpenCreateModal && (
+      {createDatasetType && (
-        <CreateModal onClose={onCloseCreateModal} parentId={parentId || undefined} />
+        <CreateModal
+          type={createDatasetType}
+          onClose={() => setCreateDatasetType(undefined)}
+          parentId={parentId || undefined}
+        />
      )}
-    </PageContainer>
+    </MyBox>
  );
 };
 export async function getServerSideProps(content: any) {
  return {
    props: {