perf: text and avatar

src/pages/model/share/index.tsx

@@ -1,12 +1,11 @@
-import React, { useState, useRef, useCallback, useMemo } from 'react';
+import React, { useState, useRef, useCallback } from 'react';
 import { Box, Flex, Card, Grid, Input } from '@chakra-ui/react';
 import { useLoading } from '@/hooks/useLoading';
-import { getShareModelList, triggerModelCollection, getCollectionModels } from '@/api/model';
+import { getShareModelList, triggerModelCollection } from '@/api/model';
 import { usePagination } from '@/hooks/usePagination';
 import type { ShareModelItem } from '@/types/model';
 import { useUserStore } from '@/store/user';
 import ShareModelList from './components/list';
-import { useQuery } from '@tanstack/react-query';
 
 const modelList = () => {
   const { Loading } = useLoading();
@@ -15,7 +14,13 @@ const modelList = () => {
   const { refreshModel } = useUserStore();
 
   /* 加载模型 */
-  const { data, isLoading, Pagination, getData, pageNum } = usePagination<ShareModelItem>({
+  const {
+    data: models,
+    isLoading,
+    Pagination,
+    getData,
+    pageNum
+  } = usePagination<ShareModelItem>({
     api: getShareModelList,
     pageSize: 24,
     params: {
@@ -23,65 +28,32 @@ const modelList = () => {
     }
   });
 
-  const { data: collectionModels = [], refetch: refetchCollection } = useQuery(
-    ['getCollectionModels'],
-    getCollectionModels
-  );
-
-  const models = useMemo(() => {
-    if (!collectionModels) return [];
-    return data.map((model) => ({
-      ...model,
-      isCollection: !!collectionModels.find((item) => item._id === model._id)
-    }));
-  }, [collectionModels, data]);
-
   const onclickCollection = useCallback(
     async (modelId: string) => {
       try {
         await triggerModelCollection(modelId);
         getData(pageNum);
-        refetchCollection();
         refreshModel.removeModelDetail(modelId);
       } catch (error) {
         console.log(error);
       }
     },
-    [getData, pageNum, refetchCollection, refreshModel]
+    [getData, pageNum, refreshModel]
   );
 
   return (
     <Box py={[5, 10]} px={'5vw'}>
       <Card px={6} py={3}>
-        <Flex alignItems={'center'} justifyContent={'space-between'}>
-          <Box fontWeight={'bold'} fontSize={'xl'}>
-            我收藏的AI助手
-          </Box>
-        </Flex>
-        {collectionModels.length == 0 && (
-          <Box textAlign={'center'} pt={3}>
-            还没有收藏AI助手~
-          </Box>
-        )}
-        <Grid templateColumns={['1fr', '1fr 1fr', '1fr 1fr 1fr']} gridGap={4} mt={4}>
-          <ShareModelList models={collectionModels} onclickCollection={onclickCollection} />
-        </Grid>
-      </Card>
-
-      <Card mt={5} px={6} py={3}>
         <Box display={['block', 'flex']} alignItems={'center'} justifyContent={'space-between'}>
           <Box fontWeight={'bold'} flex={1} fontSize={'xl'}>
-            AI助手市场
-            <Box as={'span'} fontWeight={'normal'} fontSize={'md'}>
-              (Beta)
-            </Box>
+            应用市场
           </Box>
           <Box mt={[2, 0]} textAlign={'right'}>
             <Input
-              maxW={'240px'}
+              w={['200px', '250px']}
               size={'sm'}
               value={searchText}
-              placeholder="搜索AI助手，回车确认"
+              placeholder="搜索应用，回车确认"
               onChange={(e) => setSearchText(e.target.value)}
               onBlur={() => {
                 if (searchText === lastSearch.current) return;
@@ -98,7 +70,17 @@ const modelList = () => {
             />
           </Box>
         </Box>
-        <Grid templateColumns={['1fr', '1fr 1fr', '1fr 1fr 1fr']} gridGap={4} mt={4}>
+        <Grid
+          templateColumns={[
+            'repeat(1,1fr)',
+            'repeat(2,1fr)',
+            'repeat(3,1fr)',
+            'repeat(4,1fr)',
+            'repeat(5,1fr)'
+          ]}
+          gridGap={4}
+          mt={4}
+        >
           <ShareModelList models={models} onclickCollection={onclickCollection} />
         </Grid>
         <Flex mt={4} justifyContent={'flex-end'}>