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,53 +43,51 @@ 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>
+        {/* <Box mt={[2, 0]} textAlign={'right'}>
-          <Box mt={[2, 0]} textAlign={'right'}>
+          <Input
-            <Input
+            w={['200px', '250px']}
-              w={['200px', '250px']}
+            size={'sm'}
-              size={'sm'}
+            value={searchText}
-              value={searchText}
+            placeholder="搜索应用，回车确认"
-              placeholder="搜索应用，回车确认"
+            onChange={(e) => setSearchText(e.target.value)}
-              onChange={(e) => setSearchText(e.target.value)}
+            onBlur={() => {
-              onBlur={() => {
+              if (searchText === lastSearch.current) return;
-                if (searchText === lastSearch.current) return;
+              getData(1);
+              lastSearch.current = searchText;
+            }}
+            onKeyDown={(e) => {
+              if (searchText === lastSearch.current) return;
+              if (e.key === 'Enter') {
                 getData(1);
                 lastSearch.current = searchText;
-              }}
+              }
-              onKeyDown={(e) => {
+            }}
-                if (searchText === lastSearch.current) return;
+          />
-                if (e.key === 'Enter') {
+        </Box> */}
-                  getData(1);
+      </Flex>
-                  lastSearch.current = searchText;
+      <Grid
-                }
+        templateColumns={[
-              }}
+          'repeat(1,1fr)',
-            />
+          'repeat(2,1fr)',
-          </Box>
+          'repeat(3,1fr)',
-        </Box>
+          'repeat(4,1fr)',
-        <Grid
+          'repeat(5,1fr)'
-          templateColumns={[
+        ]}
-            'repeat(1,1fr)',
+        gridGap={4}
-            'repeat(2,1fr)',
+        mt={4}
-            'repeat(3,1fr)',
+      >
-            'repeat(4,1fr)',
+        <ShareModelList models={models} onclickCollection={onclickCollection} />
-            'repeat(5,1fr)'
+      </Grid>
-          ]}
+      <Flex mt={4} justifyContent={'center'}>
-          gridGap={4}
+        <Pagination />
-          mt={4}
+      </Flex>
-        >
-          <ShareModelList models={models} onclickCollection={onclickCollection} />
-        </Grid>
-        <Flex mt={4} justifyContent={'flex-end'}>
-          <Pagination />
-        </Flex>
-      </Card>
 
-      <Loading loading={isLoading} />
+      <Loading loading={isLoading} fixed={false} />
     </Box>
   );
 };