4.6.7-alpha commit (#743)

Co-authored-by: Archer <545436317@qq.com>
Co-authored-by: heheer <71265218+newfish-cmyk@users.noreply.github.com>

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

@@ -43,7 +43,7 @@ import {
   DatasetCollectionTypeMap,
   TrainingModeEnum,
   TrainingTypeMap
-} from '@fastgpt/global/core/dataset/constant';
+} from '@fastgpt/global/core/dataset/constants';
 import { formatTime2YMDHM } from '@fastgpt/global/common/string/time';
 import { formatFileSize } from '@fastgpt/global/common/file/tools';
 import { getFileAndOpen } from '@/web/core/dataset/utils';
@@ -65,7 +65,8 @@ const DataCard = () => {
   const [searchText, setSearchText] = useState('');
   const { toast } = useToast();
   const { openConfirm, ConfirmModal } = useConfirm({
-    content: t('dataset.Confirm to delete the data')
+    content: t('dataset.Confirm to delete the data'),
+    type: 'delete'
   });
   const { isOpen, onOpen, onClose } = useDisclosure();
 
@@ -173,202 +174,224 @@ const DataCard = () => {
   }, [collection, t]);
 
   return (
-    <Box ref={BoxRef} position={'relative'} px={5} py={[1, 5]} h={'100%'} overflow={'overlay'}>
-      <Flex alignItems={'center'}>
-        <IconButton
-          mr={3}
-          icon={<MyIcon name={'common/backFill'} w={['14px', '18px']} color={'primary.500'} />}
-          variant={'whitePrimary'}
-          size={'smSquare'}
-          borderRadius={'50%'}
-          aria-label={''}
-          onClick={() =>
-            router.replace({
-              query: {
-                datasetId: router.query.datasetId,
-                parentId: router.query.parentId,
-                currentTab: TabEnum.collectionCard
-              }
-            })
-          }
-        />
-        <Flex className="textEllipsis" flex={'1 0 0'} mr={[3, 5]} alignItems={'center'}>
-          <Box lineHeight={1.2}>
-            <RawSourceBox
-              sourceName={collection?.name}
-              sourceId={collection?.fileId || collection?.rawLink}
-              fontSize={['md', 'lg']}
-              color={'black'}
-              textDecoration={'none'}
-            />
-            <Box fontSize={'sm'} color={'myGray.500'}>
-              {t('core.dataset.collection.id')}:{' '}
-              <Box as={'span'} userSelect={'all'}>
-                {collection?._id}
+    <Box position={'relative'} py={[1, 5]} h={'100%'}>
+      <Flex ref={BoxRef} flexDirection={'column'} h={'100%'}>
+        <Flex alignItems={'center'} px={5}>
+          <IconButton
+            mr={3}
+            icon={<MyIcon name={'common/backFill'} w={['14px', '18px']} color={'primary.500'} />}
+            variant={'whitePrimary'}
+            size={'smSquare'}
+            borderRadius={'50%'}
+            aria-label={''}
+            onClick={() =>
+              router.replace({
+                query: {
+                  datasetId: router.query.datasetId,
+                  parentId: router.query.parentId,
+                  currentTab: TabEnum.collectionCard
+                }
+              })
+            }
+          />
+          <Flex className="textEllipsis" flex={'1 0 0'} mr={[3, 5]} alignItems={'center'}>
+            <Box lineHeight={1.2}>
+              <RawSourceBox
+                sourceName={collection?.name}
+                sourceId={collection?.fileId || collection?.rawLink}
+                fontSize={['md', 'lg']}
+                color={'black'}
+                textDecoration={'none'}
+              />
+              <Box fontSize={'sm'} color={'myGray.500'}>
+                {t('core.dataset.collection.id')}:{' '}
+                <Box as={'span'} userSelect={'all'}>
+                  {collection?._id}
+                </Box>
               </Box>
             </Box>
-          </Box>
+          </Flex>
+          {canWrite && (
+            <Box>
+              <Button
+                mx={2}
+                variant={'whitePrimary'}
+                size={['sm', 'md']}
+                onClick={() => {
+                  if (!collection) return;
+                  setEditDataId('');
+                }}
+              >
+                {t('dataset.Insert Data')}
+              </Button>
+            </Box>
+          )}
+          {isPc && (
+            <MyTooltip label={t('core.dataset.collection.metadata.Read Metadata')}>
+              <IconButton
+                variant={'whiteBase'}
+                size={['sm', 'md']}
+                icon={<MyIcon name={'menu'} w={'18px'} />}
+                aria-label={''}
+                onClick={onOpen}
+              />
+            </MyTooltip>
+          )}
         </Flex>
-        {canWrite && (
+        <Flex my={3} alignItems={'center'} px={5}>
           <Box>
-            <Button
-              mx={2}
-              variant={'whitePrimary'}
-              size={['sm', 'md']}
-              onClick={() => {
-                if (!collection) return;
-                setEditDataId('');
-              }}
-            >
-              {t('dataset.Insert Data')}
-            </Button>
+            <Box as={'span'} fontSize={['md', 'lg']}>
+              {t('core.dataset.data.Total Amount', { total })}
+            </Box>
           </Box>
-        )}
-        {isPc && (
-          <MyTooltip label={t('core.dataset.collection.metadata.Read Metadata')}>
-            <IconButton
-              variant={'whiteBase'}
-              size={['sm', 'md']}
-              icon={<MyIcon name={'menu'} w={'18px'} />}
-              aria-label={''}
-              onClick={onOpen}
-            />
-          </MyTooltip>
-        )}
-      </Flex>
-      <Flex my={3} alignItems={'center'}>
-        <Box>
-          <Box as={'span'} fontSize={['md', 'lg']}>
-            {t('core.dataset.data.Total Amount', { total })}
-          </Box>
-        </Box>
-        <Box flex={1} mr={1} />
-        <MyInput
-          leftIcon={
-            <MyIcon
-              name="common/searchLight"
-              position={'absolute'}
-              w={'14px'}
-              color={'myGray.500'}
-            />
-          }
-          w={['200px', '300px']}
-          placeholder={t('core.dataset.data.Search data placeholder')}
-          value={searchText}
-          onChange={(e) => {
-            setSearchText(e.target.value);
-            getFirstData();
-          }}
-          onBlur={() => {
-            if (searchText === lastSearch.current) return;
-            getFirstData();
-          }}
-          onKeyDown={(e) => {
-            if (searchText === lastSearch.current) return;
-            if (e.key === 'Enter') {
-              getFirstData();
+          <Box flex={1} mr={1} />
+          <MyInput
+            leftIcon={
+              <MyIcon
+                name="common/searchLight"
+                position={'absolute'}
+                w={'14px'}
+                color={'myGray.500'}
+              />
             }
-          }}
-        />
-      </Flex>
-      <Grid
-        minH={'100px'}
-        gridTemplateColumns={['1fr', 'repeat(2,1fr)', 'repeat(3,1fr)', 'repeat(4,1fr)']}
-        gridGap={4}
-      >
-        {datasetDataList.map((item, index) => (
-          <Card
-            key={item._id}
-            cursor={'pointer'}
-            p={3}
-            userSelect={'none'}
-            boxShadow={'none'}
-            bg={'myWhite.500'}
-            border={theme.borders.sm}
-            position={'relative'}
-            overflow={'hidden'}
-            _hover={{
-              borderColor: 'myGray.200',
-              boxShadow: 'lg',
-              bg: 'white',
-              '& .footer': { h: 'auto', p: 3 }
+            w={['200px', '300px']}
+            placeholder={t('core.dataset.data.Search data placeholder')}
+            value={searchText}
+            onChange={(e) => {
+              setSearchText(e.target.value);
+              getFirstData();
             }}
-            onClick={() => {
-              if (!collection) return;
-              setEditDataId(item._id);
+            onBlur={() => {
+              if (searchText === lastSearch.current) return;
+              getFirstData();
             }}
+            onKeyDown={(e) => {
+              if (searchText === lastSearch.current) return;
+              if (e.key === 'Enter') {
+                getFirstData();
+              }
+            }}
+          />
+        </Flex>
+        <Box flex={'1 0 0'} overflow={'auto'} px={5}>
+          <Grid
+            gridTemplateColumns={['1fr', 'repeat(2,1fr)', 'repeat(3,1fr)', 'repeat(4,1fr)']}
+            gridGap={4}
           >
-            <Flex zIndex={1} alignItems={'center'} justifyContent={'space-between'}>
-              <Box border={theme.borders.base} px={2} fontSize={'sm'} mr={1} borderRadius={'md'}>
-                # {item.chunkIndex ?? '-'}
-              </Box>
-              <Box className={'textEllipsis'} color={'myGray.500'} fontSize={'xs'}>
-                ID:{item._id}
+            {datasetDataList.map((item, index) => (
+              <Card
+                key={item._id}
+                cursor={'pointer'}
+                p={3}
+                userSelect={'none'}
+                boxShadow={'none'}
+                bg={'myWhite.500'}
+                border={theme.borders.sm}
+                position={'relative'}
+                overflow={'hidden'}
+                _hover={{
+                  borderColor: 'myGray.200',
+                  boxShadow: 'lg',
+                  bg: 'white',
+                  '& .footer': { h: 'auto', p: 3 }
+                }}
+                onClick={() => {
+                  if (!collection) return;
+                  setEditDataId(item._id);
+                }}
+              >
+                <Flex zIndex={1} alignItems={'center'} justifyContent={'space-between'}>
+                  <Box
+                    border={theme.borders.base}
+                    px={2}
+                    fontSize={'sm'}
+                    mr={1}
+                    borderRadius={'md'}
+                  >
+                    # {item.chunkIndex ?? '-'}
+                  </Box>
+                  <Box className={'textEllipsis'} color={'myGray.500'} fontSize={'xs'}>
+                    ID:{item._id}
+                  </Box>
+                </Flex>
+                <Box
+                  maxH={'135px'}
+                  minH={'90px'}
+                  overflow={'hidden'}
+                  wordBreak={'break-all'}
+                  pt={1}
+                  pb={3}
+                  fontSize={'13px'}
+                >
+                  <Box color={'black'} mb={1}>
+                    {item.q}
+                  </Box>
+                  <Box color={'myGray.700'}>{item.a}</Box>
+
+                  <Flex
+                    className="footer"
+                    position={'absolute'}
+                    top={0}
+                    bottom={0}
+                    left={0}
+                    right={0}
+                    h={'0'}
+                    overflow={'hidden'}
+                    p={0}
+                    bg={'linear-gradient(to top, white,white 20%, rgba(255,255,255,0) 60%)'}
+                    alignItems={'flex-end'}
+                    fontSize={'sm'}
+                  >
+                    <Flex alignItems={'center'}>
+                      <MyIcon name="common/text/t" w={'14px'} mr={1} color={'myGray.500'} />
+                      {item.q.length + (item.a?.length || 0)}
+                    </Flex>
+                    <Box flex={1} />
+                    {canWrite && (
+                      <IconButton
+                        display={'flex'}
+                        icon={<DeleteIcon />}
+                        variant={'whiteDanger'}
+                        size={'xsSquare'}
+                        aria-label={'delete'}
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          openConfirm(async () => {
+                            try {
+                              setIsLoading(true);
+                              await delOneDatasetDataById(item._id);
+                              getData(pageNum);
+                            } catch (error) {
+                              toast({
+                                title: getErrText(error),
+                                status: 'error'
+                              });
+                            }
+                            setIsLoading(false);
+                          })();
+                        }}
+                      />
+                    )}
+                  </Flex>
+                </Box>
+              </Card>
+            ))}
+          </Grid>
+          {total > pageSize && (
+            <Flex mt={2} justifyContent={'center'}>
+              <Pagination />
+            </Flex>
+          )}
+          {total === 0 && (
+            <Flex flexDirection={'column'} alignItems={'center'} pt={'10vh'}>
+              <MyIcon name="empty" w={'48px'} h={'48px'} color={'transparent'} />
+              <Box mt={2} color={'myGray.500'}>
+                {t('core.dataset.data.Empty Tip')}
               </Box>
             </Flex>
-            <Box
-              maxH={'135px'}
-              minH={'90px'}
-              overflow={'hidden'}
-              wordBreak={'break-all'}
-              pt={1}
-              pb={3}
-              fontSize={'13px'}
-            >
-              <Box color={'black'} mb={1}>
-                {item.q}
-              </Box>
-              <Box color={'myGray.700'}>{item.a}</Box>
-
-              <Flex
-                className="footer"
-                position={'absolute'}
-                top={0}
-                bottom={0}
-                left={0}
-                right={0}
-                h={'0'}
-                overflow={'hidden'}
-                p={0}
-                bg={'linear-gradient(to top, white,white 20%, rgba(255,255,255,0) 60%)'}
-                alignItems={'flex-end'}
-                fontSize={'sm'}
-              >
-                <Flex alignItems={'center'}>
-                  <MyIcon name="common/text/t" w={'14px'} mr={1} color={'myGray.500'} />
-                  {item.q.length + (item.a?.length || 0)}
-                </Flex>
-                <Box flex={1} />
-                {canWrite && (
-                  <IconButton
-                    display={'flex'}
-                    icon={<DeleteIcon />}
-                    variant={'whiteDanger'}
-                    size={'xsSquare'}
-                    aria-label={'delete'}
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      openConfirm(async () => {
-                        try {
-                          setIsLoading(true);
-                          await delOneDatasetDataById(item._id);
-                          getData(pageNum);
-                        } catch (error) {
-                          toast({
-                            title: getErrText(error),
-                            status: 'error'
-                          });
-                        }
-                        setIsLoading(false);
-                      })();
-                    }}
-                  />
-                )}
-              </Flex>
-            </Box>
-          </Card>
-        ))}
-      </Grid>
+          )}
+        </Box>
+      </Flex>
 
       {/* metadata drawer */}
       <Drawer isOpen={isOpen} placement="right" size={'md'} onClose={onClose}>
@@ -378,8 +401,8 @@ const DataCard = () => {
 
           <DrawerBody>
             {metadataList.map((item) => (
-              <Flex key={item.label} alignItems={'center'} mb={5}>
-                <Box color={'myGray.500'} w={'100px'}>
+              <Flex key={item.label} alignItems={'center'} mb={5} wordBreak={'break-all'}>
+                <Box color={'myGray.500'} flex={'0 0 100px'}>
                   {item.label}
                 </Box>
                 <Box>{item.value}</Box>
@@ -403,20 +426,6 @@ const DataCard = () => {
         </DrawerContent>
       </Drawer>
 
-      {total > pageSize && (
-        <Flex mt={2} justifyContent={'center'}>
-          <Pagination />
-        </Flex>
-      )}
-      {total === 0 && (
-        <Flex flexDirection={'column'} alignItems={'center'} pt={'10vh'}>
-          <MyIcon name="empty" w={'48px'} h={'48px'} color={'transparent'} />
-          <Box mt={2} color={'myGray.500'}>
-            {t('core.dataset.data.Empty Tip')}
-          </Box>
-        </Flex>
-      )}
-
       {editDataId !== undefined && collection && (
         <InputDataModal
           collectionId={collection._id}