perf: app store

client/src/pages/model/share/components/list.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Box, Flex, Button, Tooltip } from '@chakra-ui/react';
+import { Box, Flex, Button, Tooltip, Card } from '@chakra-ui/react';
 import type { ShareModelItem } from '@/types/model';
 import { useRouter } from 'next/router';
 import MyIcon from '@/components/Icon';
@@ -18,14 +18,20 @@ const ShareModelList = ({
   return (
     <>
       {models.map((model) => (
-        <Flex
+        <Card
+          key={model._id}
+          display={'flex'}
           w={'100%'}
           flexDirection={'column'}
-          key={model._id}
           p={4}
-          border={'1px solid'}
-          borderColor={'gray.200'}
           borderRadius={'md'}
+          border={'1px solid '}
+          userSelect={'none'}
+          boxShadow={'none'}
+          borderColor={'myGray.200'}
+          _hover={{
+            boxShadow: 'lg'
+          }}
         >
           <Flex alignItems={'center'}>
             <Avatar
@@ -76,7 +82,7 @@ const ShareModelList = ({
               </Button>
             </Box>
           </Flex>
-        </Flex>
+        </Card>
       ))}
     </>
   );

client/src/pages/model/share/index.module.scss

@@ -5,3 +5,8 @@
   overflow: hidden;
   text-overflow: ellipsis;
 }
+.textlg {
+  background: linear-gradient(to bottom right, #1237b3 0%, #3370ff 40%, #4e83fd 80%, #85b1ff 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}

client/src/pages/model/share/index.tsx

@@ -6,6 +6,7 @@ import { usePagination } from '@/hooks/usePagination';
 import type { ShareModelItem } from '@/types/model';
 import { useUserStore } from '@/store/user';
 import ShareModelList from './components/list';
+import styles from './index.module.scss';
 
 const modelList = () => {
   const { Loading } = useLoading();
@@ -42,13 +43,12 @@ const modelList = () => {
   );
 
   return (
-    <Box py={[5, 10]} px={'5vw'}>
+    <Box px={[5, 10]} py={[4, 6]} position={'relative'} minH={'109vh'}>
-      <Card px={6} py={3}>
+      <Flex alignItems={'center'} mb={2}>
-        <Box display={['block', 'flex']} alignItems={'center'} justifyContent={'space-between'}>
+        <Box className={styles.textlg} fontWeight={'bold'} fontSize={'3xl'}>
-          <Box fontWeight={'bold'} flex={1} fontSize={'xl'}>
+          AI 应用市场
-            应用市场
         </Box>
-          <Box mt={[2, 0]} textAlign={'right'}>
+        {/* <Box mt={[2, 0]} textAlign={'right'}>
           <Input
             w={['200px', '250px']}
             size={'sm'}
@@ -68,8 +68,8 @@ const modelList = () => {
               }
             }}
           />
-          </Box>
+        </Box> */}
-        </Box>
+      </Flex>
       <Grid
         templateColumns={[
           'repeat(1,1fr)',
@@ -83,12 +83,11 @@ const modelList = () => {
       >
         <ShareModelList models={models} onclickCollection={onclickCollection} />
       </Grid>
-        <Flex mt={4} justifyContent={'flex-end'}>
+      <Flex mt={4} justifyContent={'center'}>
         <Pagination />
       </Flex>
-      </Card>
 
-      <Loading loading={isLoading} />
+      <Loading loading={isLoading} fixed={false} />
     </Box>
   );
 };