feat: collection model

src/pages/model/detail/components/ModelEditForm.tsx

@@ -80,9 +80,9 @@ const ModelEditForm = ({
           <Image
             src={getValues('avatar')}
             alt={'avatar'}
-            w={'36px'}
-            h={'36px'}
-            objectFit={'contain'}
+            w={['28px', '36px']}
+            h={['28px', '36px']}
+            objectFit={'cover'}
             cursor={'pointer'}
             title={'点击切换头像'}
             onClick={onOpenSelectFile}

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

@@ -1,35 +1,56 @@
-import React, { Dispatch, useCallback } from 'react';
+import React from 'react';
 import { Card, Box, Flex, Image, Button } from '@chakra-ui/react';
 import type { ShareModelItem } from '@/types/model';
 import { useRouter } from 'next/router';
 import MyIcon from '@/components/Icon';
 import styles from '../index.module.scss';
 
-const ShareModelList = ({ models }: { models: ShareModelItem[] }) => {
+const ShareModelList = ({
+  models = [],
+  onclickCollection
+}: {
+  models: ShareModelItem[];
+  onclickCollection: (modelId: string) => void;
+}) => {
   const router = useRouter();
 
   return (
     <>
       {models.map((model) => (
-        <Card key={model._id} p={4}>
+        <Box
+          key={model._id}
+          p={4}
+          border={'1px solid'}
+          borderColor={'gray.200'}
+          borderRadius={'md'}
+        >
           <Flex alignItems={'center'}>
             <Image
               src={model.avatar}
               alt={'avatar'}
-              width={'36px'}
-              height={'36px'}
-              objectFit={'contain'}
+              w={['28px', '36px']}
+              h={['28px', '36px']}
+              objectFit={'cover'}
             />
             <Box fontWeight={'bold'} fontSize={'lg'} ml={5}>
               {model.name}
             </Box>
           </Flex>
-          <Box className={styles.intro} my={4} fontSize={'sm'}>
+          <Box className={styles.intro} my={4} fontSize={'sm'} color={'blackAlpha.600'}>
             {model.share.intro || '这个模型没有介绍~'}
           </Box>
           <Flex justifyContent={'space-between'}>
-            <Flex alignItems={'center'} cursor={'pointer'}>
-              <MyIcon mr={1} name={'collectionLight'} w={'16px'} />
+            <Flex
+              alignItems={'center'}
+              cursor={'pointer'}
+              color={model.isCollection ? 'blue.600' : 'alphaBlack.700'}
+              onClick={() => onclickCollection(model._id)}
+            >
+              <MyIcon
+                mr={1}
+                name={model.isCollection ? 'collectionSolid' : 'collectionLight'}
+                w={'16px'}
+              />
               {model.share.collection}
             </Flex>
             <Box>
@@ -53,7 +74,7 @@ const ShareModelList = ({ models }: { models: ShareModelItem[] }) => {
               )}
             </Box>
           </Flex>
-        </Card>
+        </Box>
       ))}
     </>
   );

src/pages/model/share/index.tsx

@@ -1,24 +1,20 @@
-import React, { useState, useRef } from 'react';
+import React, { useState, useRef, useCallback, useMemo } from 'react';
 import { Box, Flex, Card, Grid, Input } from '@chakra-ui/react';
 import { useLoading } from '@/hooks/useLoading';
-import { getShareModelList } from '@/api/model';
+import { getShareModelList, triggerModelCollection, getCollectionModels } from '@/api/model';
 import { usePagination } from '@/hooks/usePagination';
 import type { ShareModelItem } from '@/types/model';
 
 import ShareModelList from './components/list';
+import { useQuery } from '@tanstack/react-query';
 
 const modelList = () => {
-  const { Loading, setIsLoading } = useLoading();
+  const { Loading } = useLoading();
   const lastSearch = useRef('');
   const [searchText, setSearchText] = useState('');
 
   /* 加载模型 */
-  const {
-    data: models,
-    isLoading,
-    Pagination,
-    getData
-  } = usePagination<ShareModelItem>({
+  const { data, isLoading, Pagination, getData, pageNum } = usePagination<ShareModelItem>({
     api: getShareModelList,
     pageSize: 20,
     params: {
@@ -26,47 +22,90 @@ 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();
+      } catch (error) {
+        console.log(error);
+      }
+    },
+    [getData, pageNum, refetchCollection]
+  );
+
   return (
-    <Box position={'relative'}>
-      {/* 头部 */}
+    <>
       <Card px={6} py={3}>
         <Flex alignItems={'center'} justifyContent={'space-between'}>
           <Box fontWeight={'bold'} fontSize={'xl'}>
-            模型共享市场
+            我收藏的模型
           </Box>
-          <Box flex={1}>(Beta)</Box>
-          <Input
-            maxW={'240px'}
-            size={'sm'}
-            value={searchText}
-            placeholder="搜索模型，回车确认"
-            onChange={(e) => setSearchText(e.target.value)}
-            onBlur={() => {
-              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;
-              }
-            }}
-          />
         </Flex>
+        {collectionModels.length == 0 && (
+          <Box textAlign={'center'} pt={3}>
+            还没有收藏模型~
+          </Box>
+        )}
+        <Grid templateColumns={['1fr', '1fr 1fr', '1fr 1fr 1fr']} gridGap={4} mt={4}>
+          <ShareModelList models={collectionModels} onclickCollection={onclickCollection} />
+        </Grid>
       </Card>
 
-      <Grid templateColumns={['1fr', '1fr 1fr']} gridGap={4} mt={4}>
-        <ShareModelList models={models} />
-      </Grid>
-
-      <Box mt={4}>
-        <Pagination />
-      </Box>
+      <Card mt={5} px={6} py={3}>
+        <Box display={['block', 'flex']} alignItems={'center'} justifyContent={'space-between'}>
+          <Box fontWeight={'bold'} flex={1} fontSize={'xl'}>
+            模型共享市场{' '}
+            <Box as={'span'} fontWeight={'normal'} fontSize={'md'}>
+              (Beta)
+            </Box>
+          </Box>
+          <Box mt={[2, 0]} textAlign={'right'}>
+            <Input
+              maxW={'240px'}
+              size={'sm'}
+              value={searchText}
+              placeholder="搜索模型，回车确认"
+              onChange={(e) => setSearchText(e.target.value)}
+              onBlur={() => {
+                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;
+                }
+              }}
+            />
+          </Box>
+        </Box>
+        <Grid templateColumns={['1fr', '1fr 1fr', '1fr 1fr 1fr']} gridGap={4} mt={4}>
+          <ShareModelList models={models} onclickCollection={onclickCollection} />
+        </Grid>
+        <Box mt={4}>
+          <Pagination />
+        </Box>
+      </Card>
 
       <Loading loading={isLoading} />
-    </Box>
+    </>
   );
 };