myapps

client/src/pages/appStore/components/list.tsx

@@ -0,0 +1,91 @@
+import React from 'react';
+import { Box, Flex, Button, Tooltip, Card } from '@chakra-ui/react';
+import type { ShareAppItem } from '@/types/app';
+import { useRouter } from 'next/router';
+import MyIcon from '@/components/Icon';
+import styles from '../index.module.scss';
+import Avatar from '@/components/Avatar';
+
+const ShareModelList = ({
+  models = [],
+  onclickCollection
+}: {
+  models: ShareAppItem[];
+  onclickCollection: (modelId: string) => void;
+}) => {
+  const router = useRouter();
+
+  return (
+    <>
+      {models.map((model) => (
+        <Card
+          key={model._id}
+          display={'flex'}
+          w={'100%'}
+          flexDirection={'column'}
+          p={4}
+          borderRadius={'md'}
+          border={'1px solid '}
+          userSelect={'none'}
+          boxShadow={'none'}
+          borderColor={'myGray.200'}
+          _hover={{
+            boxShadow: 'lg'
+          }}
+        >
+          <Flex alignItems={'center'}>
+            <Avatar
+              src={model.avatar}
+              w={['28px', '36px']}
+              h={['28px', '36px']}
+              borderRadius={'50%'}
+            />
+            <Box fontWeight={'bold'} fontSize={'lg'} ml={5}>
+              {model.name}
+            </Box>
+          </Flex>
+          <Tooltip label={model.intro}>
+            <Box
+              className={styles.intro}
+              flex={1}
+              my={4}
+              fontSize={'sm'}
+              wordBreak={'break-all'}
+              color={'blackAlpha.600'}
+            >
+              {model.intro || '这个应用还没有介绍~'}
+            </Box>
+          </Tooltip>
+
+          <Flex justifyContent={'space-between'}>
+            <Flex
+              alignItems={'center'}
+              cursor={'pointer'}
+              color={model.isCollection ? 'myBlue.700' : 'blackAlpha.700'}
+              onClick={() => onclickCollection(model._id)}
+            >
+              <MyIcon
+                mr={1}
+                name={model.isCollection ? 'collectionSolid' : 'collectionLight'}
+                w={'16px'}
+              />
+              {model.share.collection}
+            </Flex>
+            <Box>
+              <Button
+                size={'sm'}
+                variant={'base'}
+                w={['60px', '70px']}
+                onClick={() => router.push(`/chat?modelId=${model._id}`)}
+              >
+                体验
+              </Button>
+            </Box>
+          </Flex>
+        </Card>
+      ))}
+    </>
+  );
+};
+
+export default ShareModelList;

client/src/pages/appStore/index.module.scss

@@ -0,0 +1,7 @@
+.intro {
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}

client/src/pages/appStore/index.tsx

@@ -0,0 +1,95 @@
+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 } from '@/api/app';
+import { usePagination } from '@/hooks/usePagination';
+import type { ShareAppItem } from '@/types/app';
+import { useUserStore } from '@/store/user';
+import ShareModelList from './components/list';
+import styles from './index.module.scss';
+
+const modelList = () => {
+  const { Loading } = useLoading();
+  const lastSearch = useRef('');
+  const [searchText, setSearchText] = useState('');
+  const { refreshModel } = useUserStore();
+
+  /* 加载模型 */
+  const {
+    data: models,
+    isLoading,
+    Pagination,
+    getData,
+    pageNum
+  } = usePagination<ShareAppItem>({
+    api: getShareModelList,
+    pageSize: 24,
+    params: {
+      searchText
+    }
+  });
+
+  const onclickCollection = useCallback(
+    async (modelId: string) => {
+      try {
+        await triggerModelCollection(modelId);
+        getData(pageNum);
+        refreshModel.removeModelDetail(modelId);
+      } catch (error) {
+        console.log(error);
+      }
+    },
+    [getData, pageNum, refreshModel]
+  );
+
+  return (
+    <Box px={[5, 10]} py={[4, 6]} position={'relative'} minH={'109vh'}>
+      <Flex alignItems={'center'} mb={2}>
+        <Box className={'textlg'} fontWeight={'bold'} fontSize={'3xl'}>
+          AI 应用市场
+        </Box>
+        {/* <Box mt={[2, 0]} textAlign={'right'}>
+          <Input
+            w={['200px', '250px']}
+            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> */}
+      </Flex>
+      <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={'center'}>
+        <Pagination />
+      </Flex>
+
+      <Loading loading={isLoading} />
+    </Box>
+  );
+};
+
+export default modelList;