style: dataset detail page style refactor (#2501)

* style: dataset detail page style refactor

* remove px

* remove py px px

* change shadow

* style: 2期联调结束

* 优化部分代码

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

@@ -7,12 +7,6 @@ import {
   Grid,
   Button,
   useTheme,
-  Drawer,
-  DrawerBody,
-  DrawerFooter,
-  DrawerHeader,
-  DrawerOverlay,
-  DrawerContent,
   useDisclosure,
   HStack
 } from '@chakra-ui/react';
@@ -52,6 +46,8 @@ import MyBox from '@fastgpt/web/components/common/MyBox';
 import { useSystem } from '@fastgpt/web/hooks/useSystem';
 import TagsPopOver from './CollectionCard/TagsPopOver';
 import { useSystemStore } from '@/web/common/system/useSystemStore';
+import MyDivider from '@fastgpt/web/components/common/MyDivider';
+import index from '../../../index';
 
 const DataCard = () => {
   const BoxRef = useRef<HTMLDivElement>(null);
@@ -67,7 +63,6 @@ const DataCard = () => {
   const { feConfigs } = useSystemStore();
 
   const { t } = useTranslation();
-  const { datasetT } = useI18n();
   const [searchText, setSearchText] = useState('');
   const { toast } = useToast();
   const { openConfirm, ConfirmModal } = useConfirm({
@@ -132,66 +127,6 @@ const DataCard = () => {
 
   const canWrite = useMemo(() => datasetDetail.permission.hasWritePer, [datasetDetail]);
 
-  const metadataList = useMemo(() => {
-    if (!collection) return [];
-
-    const webSelector =
-      collection?.datasetId?.websiteConfig?.selector || collection?.metadata?.webPageSelector;
-
-    return [
-      {
-        label: t('common:core.dataset.collection.metadata.source'),
-        value: t(DatasetCollectionTypeMap[collection.type]?.name as any)
-      },
-      {
-        label: t('common:core.dataset.collection.metadata.source name'),
-        value: collection.file?.filename || collection?.rawLink || collection?.name
-      },
-      {
-        label: t('common:core.dataset.collection.metadata.source size'),
-        value: collection.file ? formatFileSize(collection.file.length) : '-'
-      },
-      {
-        label: t('common:core.dataset.collection.metadata.Createtime'),
-        value: formatTime2YMDHM(collection.createTime)
-      },
-      {
-        label: t('common:core.dataset.collection.metadata.Updatetime'),
-        value: formatTime2YMDHM(collection.updateTime)
-      },
-      {
-        label: t('common:core.dataset.collection.metadata.Raw text length'),
-        value: collection.rawTextLength ?? '-'
-      },
-      {
-        label: t('common:core.dataset.collection.metadata.Training Type'),
-        value: t(TrainingTypeMap[collection.trainingType]?.label as any)
-      },
-      {
-        label: t('common:core.dataset.collection.metadata.Chunk Size'),
-        value: collection.chunkSize || '-'
-      },
-      ...(webSelector
-        ? [
-            {
-              label: t('common:core.dataset.collection.metadata.Web page selector'),
-              value: webSelector
-            }
-          ]
-        : []),
-      {
-        ...(collection.tags
-          ? [
-              {
-                label: datasetT('collection_tags'),
-                value: collection.tags?.join(', ') || '-'
-              }
-            ]
-          : [])
-      }
-    ];
-  }, [collection, datasetT, t]);
-
   const { run: onUpdate, loading } = useRequest2(putDatasetDataById, {
     onSuccess() {
       getData(pageNum);
@@ -205,23 +140,6 @@ const DataCard = () => {
       <Flex ref={BoxRef} flexDirection={'column'} h={'100%'}>
         {/* Header */}
         <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>
               <Box alignItems={'center'} gap={2} display={isPc ? 'flex' : ''}>
@@ -234,12 +152,6 @@ const DataCard = () => {
                     textDecoration={'none'}
                   />
                 )}
-                <Box fontSize={'sm'} color={'myGray.500'}>
-                  {t('common:core.dataset.collection.id')}:{' '}
-                  <Box as={'span'} userSelect={'all'}>
-                    {collection?._id}
-                  </Box>
-                </Box>
               </Box>
               {feConfigs?.isPlus && !!collection?.tags?.length && (
                 <TagsPopOver currentCollection={collection} />
@@ -250,7 +162,6 @@ const DataCard = () => {
             <Box>
               <Button
                 ml={2}
-                mr={isPc ? 2 : 0}
                 variant={'whitePrimary'}
                 size={['sm', 'md']}
                 onClick={() => {
@@ -262,24 +173,17 @@ const DataCard = () => {
               </Button>
             </Box>
           )}
-          {isPc && (
-            <MyTooltip label={t('common: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'} px={5}>
-          <Box>
-            <Box as={'span'} fontSize={['sm', 'md']}>
+        <Box justifyContent={'center'} px={5} pos={'relative'} w={'100%'}>
+          <MyDivider my={'17px'} w={'100%'} />
+        </Box>
+        <Flex alignItems={'center'} px={5} pb={4}>
+          <Flex align={'center'} color={'myGray.500'}>
+            <MyIcon name="common/list" mr={2} w={'18px'} />
+            <Box as={'span'} fontSize={['sm', '14px']} fontWeight={'500'}>
               {t('core.dataset.data.Total Amount', { total })}
             </Box>
-          </Box>
+          </Flex>
           <Box flex={1} mr={1} />
           <MyInput
             leftIcon={
@@ -287,9 +191,12 @@ const DataCard = () => {
                 name="common/searchLight"
                 position={'absolute'}
                 w={'14px'}
-                color={'myGray.500'}
+                color={'myGray.600'}
               />
             }
+            bg={'myGray.25'}
+            borderColor={'myGray.200'}
+            color={'myGray.500'}
             w={['200px', '300px']}
             placeholder={t('common:core.dataset.data.Search data placeholder')}
             value={searchText}
@@ -300,45 +207,59 @@ const DataCard = () => {
         </Flex>
         {/* data */}
         <Box flex={'1 0 0'} overflow={'auto'} px={5}>
-          <Grid
-            gridTemplateColumns={['1fr', 'repeat(2,1fr)', 'repeat(3,1fr)', 'repeat(4,1fr)']}
-            gridGap={4}
-          >
-            {datasetDataList.map((item) => (
+          <Flex flexDir={'column'} gap={2}>
+            {datasetDataList.map((item, index) => (
               <Card
                 key={item._id}
                 cursor={'pointer'}
                 p={3}
                 userSelect={'none'}
                 boxShadow={'none'}
-                bg={'myWhite.500'}
+                bg={index % 2 === 1 ? 'myGray.50' : 'blue.50'}
                 border={theme.borders.sm}
                 position={'relative'}
                 overflow={'hidden'}
                 _hover={{
-                  borderColor: 'myGray.200',
+                  borderColor: 'blue.600',
                   boxShadow: 'lg',
-                  bg: 'white',
-                  '& .footer': { h: 'auto', p: 3 },
-                  '& .forbid-switch': { display: 'flex' }
+                  '& .header': { visibility: 'visible' },
+                  '& .footer': { visibility: 'visible' },
+                  '& .forbid-switch': { display: 'flex' },
+                  bg: index % 2 === 1 ? 'myGray.200' : 'blue.100'
                 }}
                 onClick={() => {
                   if (!collection) return;
                   setEditDataId(item._id);
                 }}
               >
-                <Flex zIndex={1} alignItems={'center'}>
-                  <MyTag type="borderFill"># {item.chunkIndex ?? '-'}</MyTag>
-
-                  <Box
-                    className={'textEllipsis'}
-                    flex={'1 0 0'}
-                    w="0"
-                    fontSize={'mini'}
-                    textAlign={'right'}
+                <Flex
+                  position={'absolute'}
+                  zIndex={1}
+                  alignItems={'center'}
+                  visibility={'hidden'}
+                  className="header"
+                >
+                  <MyTag
+                    px={2}
+                    type="borderFill"
+                    borderRadius={'sm'}
+                    border={'1px'}
+                    color={'myGray.200'}
+                    bg={'white'}
+                    fontWeight={'500'}
                   >
-                    ID:{item._id}
-                  </Box>
+                    <Box color={'blue.600'}>#{item.chunkIndex ?? '-'} </Box>
+                    <Box
+                      ml={1.5}
+                      className={'textEllipsis'}
+                      fontSize={'mini'}
+                      textAlign={'right'}
+                      color={'myGray.500'}
+                    >
+                      ID:{item._id}
+                    </Box>
+                  </MyTag>
+
                   {/* {item.forbid ? (
                     <MyTag colorSchema="gray" bg={'transparent'} px={1} showDot>
                       {datasetT('Disabled')}
@@ -390,54 +311,69 @@ const DataCard = () => {
                   <Flex
                     className="footer"
                     position={'absolute'}
-                    top={0}
-                    bottom={0}
-                    left={0}
-                    right={0}
-                    h={'0'}
+                    bottom={2}
+                    right={2}
                     overflow={'hidden'}
-                    bg={'linear-gradient(to top, white,white 20%, rgba(255,255,255,0) 60%)'}
                     alignItems={'flex-end'}
+                    visibility={'hidden'}
                     fontSize={'mini'}
                   >
-                    <HStack p={0} flex={1}>
-                      <Flex alignItems={'center'}>
-                        <MyIcon name="common/text/t" w={'0.8rem'} mr={1} color={'myGray.500'} />
-                        <Box>{item.q.length + (item.a?.length || 0)}</Box>
-                      </Flex>
-                      <Box flex={1}></Box>
-                      {/* <Box className={'textEllipsis'} flex={'1 0 0'} w="0">
-                        ID:{item._id}
-                      </Box> */}
-                      {canWrite && (
-                        <IconButton
-                          display={'flex'}
-                          icon={<DeleteIcon />}
-                          variant={'whiteDanger'}
-                          size={'xsSquare'}
-                          aria-label={'delete'}
-                          onClick={(e) => {
-                            e.stopPropagation();
-                            openConfirm(async () => {
-                              try {
-                                await delOneDatasetDataById(item._id);
-                                getData(pageNum);
-                              } catch (error) {
-                                toast({
-                                  title: getErrText(error),
-                                  status: 'error'
-                                });
-                              }
-                            })();
-                          }}
-                        />
-                      )}
-                    </HStack>
+                    <Flex
+                      alignItems={'center'}
+                      bg={'white'}
+                      color={'myGray.600'}
+                      borderRadius={'sm'}
+                      border={'1px'}
+                      borderColor={'myGray.200'}
+                      h={'24px'}
+                      px={2}
+                      fontSize={'mini'}
+                      boxShadow={'1'}
+                      py={1}
+                      mr={2}
+                    >
+                      <MyIcon
+                        bg={'white'}
+                        color={'myGray.600'}
+                        borderRadius={'sm'}
+                        border={'1px'}
+                        borderColor={'myGray.200'}
+                        name="common/text/t"
+                        w={'14px'}
+                        mr={1}
+                      />
+                      {item.q.length + (item.a?.length || 0)}
+                    </Flex>
+                    {canWrite && (
+                      <IconButton
+                        display={'flex'}
+                        p={1}
+                        boxShadow={'1'}
+                        icon={<MyIcon name={'common/trash'} w={'14px'} color={'myGray.600'} />}
+                        variant={'whiteDanger'}
+                        size={'xsSquare'}
+                        aria-label={'delete'}
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          openConfirm(async () => {
+                            try {
+                              await delOneDatasetDataById(item._id);
+                              getData(pageNum);
+                            } catch (error) {
+                              toast({
+                                title: getErrText(error),
+                                status: 'error'
+                              });
+                            }
+                          })();
+                        }}
+                      />
+                    )}
                   </Flex>
                 </Box>
               </Card>
             ))}
-          </Grid>
+          </Flex>
           {total > pageSize && (
             <Flex mt={2} justifyContent={'center'}>
               <Pagination />
@@ -447,38 +383,6 @@ const DataCard = () => {
         </Box>
       </Flex>
 
-      {/* metadata drawer */}
-      <Drawer isOpen={isOpen} placement="right" size={'md'} onClose={onClose}>
-        <DrawerOverlay />
-        <DrawerContent>
-          <DrawerHeader fontSize={'lg'}>
-            {t('common:core.dataset.collection.metadata.metadata')}
-          </DrawerHeader>
-
-          <DrawerBody>
-            {metadataList.map((item, i) => (
-              <Flex key={i} alignItems={'center'} mb={5} wordBreak={'break-all'} fontSize={'sm'}>
-                <Box color={'myGray.500'} flex={'0 0 100px'}>
-                  {item.label}
-                </Box>
-                <Box>{item.value}</Box>
-              </Flex>
-            ))}
-            {collection?.sourceId && (
-              <Button variant={'whitePrimary'} onClick={readSource}>
-                {t('common:core.dataset.collection.metadata.read source')}
-              </Button>
-            )}
-          </DrawerBody>
-
-          <DrawerFooter>
-            <Button variant={'whitePrimary'} onClick={onClose}>
-              {t('common:common.Close')}
-            </Button>
-          </DrawerFooter>
-        </DrawerContent>
-      </Drawer>
-
       {editDataId !== undefined && collection && (
         <InputDataModal
           collectionId={collection._id}