perf: auto load icons (#688)

* perf: icon

* perf: icon

* doc

* perf: simple edit ui

* doc

* doc

* doc

* doc

projects/app/src/pages/dataset/detail/components/CollectionCard.tsx

@@ -28,7 +28,7 @@ import { useQuery } from '@tanstack/react-query';
 import { debounce } from 'lodash';
 import { useConfirm } from '@/web/common/hooks/useConfirm';
 import { useTranslation } from 'next-i18next';
-import MyIcon from '@/components/Icon';
+import MyIcon from '@fastgpt/web/components/common/Icon';
 import MyInput from '@/components/MyInput';
 import dayjs from 'dayjs';
 import { useRequest } from '@/web/common/hooks/useRequest';
@@ -386,7 +386,7 @@ const CollectionCard = () => {
                       color={'white'}
                       h={['28px', '35px']}
                     >
-                      <MyIcon name={'importLight'} mr={2} w={'14px'} />
+                      <MyIcon name={'common/importLight'} mr={2} w={'14px'} />
                       <Box>{t('dataset.collections.Create And Import')}</Box>
                     </Flex>
                   </MenuButton>

projects/app/src/pages/dataset/detail/components/DataCard.tsx

@@ -29,7 +29,7 @@ import { getErrText } from '@fastgpt/global/common/error/utils';
 import { useConfirm } from '@/web/common/hooks/useConfirm';
 import { useTranslation } from 'next-i18next';
 import { useRouter } from 'next/router';
-import MyIcon from '@/components/Icon';
+import MyIcon from '@fastgpt/web/components/common/Icon';
 import MyInput from '@/components/MyInput';
 import { useLoading } from '@/web/common/hooks/useLoading';
 import InputDataModal, { RawSourceText, type InputDataType } from '../components/InputDataModal';
@@ -167,7 +167,7 @@ const DataCard = () => {
       <Flex alignItems={'center'}>
         <IconButton
           mr={3}
-          icon={<MyIcon name={'backFill'} w={['14px', '18px']} color={'primary.500'} />}
+          icon={<MyIcon name={'common/backFill'} w={['14px', '18px']} color={'primary.500'} />}
           variant={'whitePrimary'}
           size={'smSquare'}
           borderRadius={'50%'}

projects/app/src/pages/dataset/detail/components/Import/FileSelect.tsx

@@ -1,4 +1,4 @@
-import MyIcon from '@/components/Icon';
+import MyIcon from '@fastgpt/web/components/common/Icon';
 import { useLoading } from '@/web/common/hooks/useLoading';
 import { useSelectFile } from '@/web/common/file/hooks/useSelectFile';
 import { useToast } from '@/web/common/hooks/useToast';
@@ -392,7 +392,7 @@ const FileSelect = ({
       onDrop={handleDrop}
     >
       <Flex justifyContent={'center'} alignItems={'center'}>
-        <MyIcon mr={1} name={'uploadFile'} w={'16px'} />
+        <MyIcon mr={1} name={'file/uploadFile'} w={'16px'} />
         {isDragging ? (
           t('file.Release the mouse to upload the file')
         ) : (

projects/app/src/pages/dataset/detail/components/Import/ImportModal.tsx

@@ -98,19 +98,19 @@ const ImportData = ({
             gridTemplateColumns={['repeat(1,1fr)', 'repeat(3,1fr)']}
             list={[
               {
-                icon: 'indexImport',
+                icon: 'file/indexImport',
                 title: t('core.dataset.import.Chunk Split'),
                 desc: t('core.dataset.import.Chunk Split Tip'),
                 value: ImportTypeEnum.chunk
               },
               {
-                icon: 'qaImport',
+                icon: 'file/qaImport',
                 title: t('core.dataset.import.QA Import'),
                 desc: t('core.dataset.import.QA Import Tip'),
                 value: ImportTypeEnum.qa
               },
               {
-                icon: 'csvImport',
+                icon: 'file/csv',
                 title: t('core.dataset.import.CSV Import'),
                 desc: t('core.dataset.import.CSV Import Tip'),
                 value: ImportTypeEnum.csv

projects/app/src/pages/dataset/detail/components/Import/Provider.tsx

@@ -22,8 +22,8 @@ import {
 } from '@fastgpt/global/core/dataset/constant';
 import { Box, Flex, Image, useTheme } from '@chakra-ui/react';
 import { CloseIcon } from '@chakra-ui/icons';
-import DeleteIcon, { hoverDeleteStyles } from '@/components/Icon/delete';
-import MyIcon from '@/components/Icon';
+import DeleteIcon, { hoverDeleteStyles } from '@fastgpt/web/components/common/Icon/delete';
+import MyIcon from '@fastgpt/web/components/common/Icon';
 import { chunksUpload } from '@/web/core/dataset/utils';
 import { postCreateTrainingBill } from '@/web/support/wallet/bill/api';
 import { useTranslation } from 'next-i18next';

projects/app/src/pages/dataset/detail/components/InputDataModal.tsx

@@ -9,7 +9,7 @@ import {
 } from '@/web/core/dataset/api';
 import { useToast } from '@/web/common/hooks/useToast';
 import { getErrText } from '@fastgpt/global/common/error/utils';
-import MyIcon from '@/components/Icon';
+import MyIcon from '@fastgpt/web/components/common/Icon';
 import MyModal from '@/components/MyModal';
 import MyTooltip from '@/components/MyTooltip';
 import { QuestionOutlineIcon } from '@chakra-ui/icons';
@@ -26,7 +26,7 @@ import { DatasetDataIndexTypeEnum } from '@fastgpt/global/core/dataset/constant'
 import { DatasetDataIndexItemType } from '@fastgpt/global/core/dataset/type';
 import SideTabs from '@/components/SideTabs';
 import { useLoading } from '@/web/common/hooks/useLoading';
-import DeleteIcon from '@/components/Icon/delete';
+import DeleteIcon from '@fastgpt/web/components/common/Icon/delete';
 import { defaultCollectionDetail } from '@/constants/dataset';
 import { getDocPath } from '@/web/common/system/doc';
 
@@ -83,7 +83,7 @@ const InputDataModal = ({
   });
 
   const tabList = [
-    { label: t('dataset.data.edit.Content'), id: TabEnum.content, icon: 'overviewLight' },
+    { label: t('dataset.data.edit.Content'), id: TabEnum.content, icon: 'common/overviewLight' },
     {
       label: t('dataset.data.edit.Index', { amount: indexes.length }),
       id: TabEnum.index,

projects/app/src/pages/dataset/detail/components/Test.tsx

@@ -18,7 +18,7 @@ import {
 import { useDatasetStore } from '@/web/core/dataset/store/dataset';
 import { useSearchTestStore, SearchTestStoreItemType } from '@/web/core/dataset/store/searchTest';
 import { postSearchText } from '@/web/core/dataset/api';
-import MyIcon from '@/components/Icon';
+import MyIcon from '@fastgpt/web/components/common/Icon';
 import { useRequest } from '@/web/common/hooks/useRequest';
 import { formatTimeToChatTime } from '@/utils/tools';
 import { getErrText } from '@fastgpt/global/common/error/utils';
@@ -190,7 +190,7 @@ const Test = ({ datasetId }: { datasetId: string }) => {
                 // {
                 //   label: (
                 //     <Flex alignItems={'center'}>
-                //       <MyIcon mr={2} name={'csvImport'} w={'14px'} color={'primary.600'} />
+                //       <MyIcon mr={2} name={'file/csv'} w={'14px'} color={'primary.600'} />
                 //       <Box fontSize={'sm'} fontWeight={'bold'} flex={1}>
                 //         {t('core.dataset.test.Batch test')}
                 //       </Box>
@@ -244,7 +244,7 @@ const Test = ({ datasetId }: { datasetId: string }) => {
                   }}
                   onClick={onOpen}
                 >
-                  <MyIcon mr={2} name={'csvImport'} w={'24px'} />
+                  <MyIcon mr={2} name={'file/csv'} w={'24px'} />
                   <Box>
                     {selectFile ? selectFile.name : t('core.dataset.test.Batch test Placeholder')}
                   </Box>

projects/app/src/pages/dataset/detail/index.tsx

@@ -7,7 +7,7 @@ import { getErrText } from '@fastgpt/global/common/error/utils';
 import { useSystemStore } from '@/web/common/system/useSystemStore';
 import Tabs from '@/components/Tabs';
 import dynamic from 'next/dynamic';
-import MyIcon from '@/components/Icon';
+import MyIcon from '@fastgpt/web/components/common/Icon';
 import SideTabs from '@/components/SideTabs';
 import PageContainer from '@/components/PageContainer';
 import Avatar from '@/components/Avatar';
@@ -54,10 +54,10 @@ const Detail = ({ datasetId, currentTab }: { datasetId: string; currentTab: `${T
   const { userInfo } = useUserStore();
 
   const tabList = [
-    { label: t('core.dataset.Dataset'), id: TabEnum.collectionCard, icon: 'overviewLight' },
+    { label: t('core.dataset.Dataset'), id: TabEnum.collectionCard, icon: 'common/overviewLight' },
     { label: t('core.dataset.test.Search Test'), id: TabEnum.test, icon: 'kbTest' },
     ...(userInfo?.team.canWrite && datasetDetail.isOwner
-      ? [{ label: t('common.Config'), id: TabEnum.info, icon: 'settingLight' }]
+      ? [{ label: t('common.Config'), id: TabEnum.info, icon: 'common/settingLight' }]
       : [])
   ];
 
@@ -240,7 +240,7 @@ const Detail = ({ datasetId, currentTab }: { datasetId: string; currentTab: `${T
               >
                 <IconButton
                   mr={3}
-                  icon={<MyIcon name={'backFill'} w={'18px'} color={'primary.500'} />}
+                  icon={<MyIcon name={'common/backFill'} w={'18px'} color={'primary.500'} />}
                   bg={'white'}
                   boxShadow={'1px 1px 9px rgba(0,0,0,0.15)'}
                   size={'smSquare'}

projects/app/src/pages/dataset/list/component/MoveModal.tsx

@@ -13,7 +13,7 @@ import {
 import Avatar from '@/components/Avatar';
 import MyTooltip from '@/components/MyTooltip';
 import MyModal from '@/components/MyModal';
-import MyIcon from '@/components/Icon';
+import MyIcon from '@fastgpt/web/components/common/Icon';
 import { DatasetTypeEnum } from '@fastgpt/global/core/dataset/constant';
 import { useTranslation } from 'next-i18next';
 import { useQuery } from '@tanstack/react-query';

projects/app/src/pages/dataset/list/index.tsx

@@ -25,7 +25,7 @@ import {
 } from '@/web/core/dataset/api';
 import { useTranslation } from 'next-i18next';
 import Avatar from '@/components/Avatar';
-import MyIcon from '@/components/Icon';
+import MyIcon from '@fastgpt/web/components/common/Icon';
 import { serviceSideProps } from '@/web/common/utils/i18n';
 import dynamic from 'next/dynamic';
 import {