add app

client/src/pages/app/list/index.tsx

@@ -1,29 +1,76 @@
-import React from 'react';
-import { Box, Grid, Card, useTheme, Flex, IconButton, Button } from '@chakra-ui/react';
+import React, { useCallback } from 'react';
+import {
+  Box,
+  Grid,
+  Card,
+  useTheme,
+  Flex,
+  IconButton,
+  Button,
+  useDisclosure
+} from '@chakra-ui/react';
 import { useRouter } from 'next/router';
 import { useUserStore } from '@/store/user';
 import { useQuery } from '@tanstack/react-query';
-import Avatar from '@/components/Avatar';
-
-import styles from './index.module.scss';
-import MyIcon from '@/components/Icon';
 import { AddIcon } from '@chakra-ui/icons';
+import { delModelById } from '@/api/app';
+import { useToast } from '@/hooks/useToast';
+import { useConfirm } from '@/hooks/useConfirm';
+import dynamic from 'next/dynamic';
+
+import MyIcon from '@/components/Icon';
+import PageContainer from '@/components/PageContainer';
+import Avatar from '@/components/Avatar';
+const CreateModal = dynamic(() => import('./component/CreateModal'));
+import styles from './index.module.scss';
 
 const MyApps = () => {
+  const { toast } = useToast();
   const theme = useTheme();
   const router = useRouter();
   const { myApps, loadMyModels } = useUserStore();
+  const { openConfirm, ConfirmChild } = useConfirm({
+    title: '删除提示',
+    content: '确认删除该应用所有信息？'
+  });
+  const {
+    isOpen: isOpenCreateModal,
+    onOpen: onOpenCreateModal,
+    onClose: onCloseCreateModal
+  } = useDisclosure();
+
+  /* 点击删除 */
+  const onclickDelApp = useCallback(
+    async (id: string) => {
+      try {
+        await delModelById(id);
+        toast({
+          title: '删除成功',
+          status: 'success'
+        });
+        loadMyModels();
+      } catch (err: any) {
+        toast({
+          title: err?.message || '删除失败',
+          status: 'error'
+        });
+      }
+    },
+    [toast, loadMyModels]
+  );
 
   /* 加载模型 */
-  useQuery(['loadModels'], () => loadMyModels(false));
+  useQuery(['loadModels'], loadMyModels, {
+    refetchOnMount: true
+  });
 
   return (
-    <Box>
-      <Flex py={3} px={5} borderBottom={theme.borders.base} alignItems={'center'}>
+    <PageContainer>
+      <Flex pt={3} px={5} alignItems={'center'}>
         <Box flex={1} className="textlg" letterSpacing={1} fontSize={'24px'} fontWeight={'bold'}>
           我的应用
         </Box>
-        <Button leftIcon={<AddIcon />} variant={'base'}>
+        <Button leftIcon={<AddIcon />} variant={'base'} onClick={onOpenCreateModal}>
           新建
         </Button>
       </Flex>
@@ -43,8 +90,7 @@ const MyApps = () => {
             boxShadow={'none'}
             userSelect={'none'}
             _hover={{
-              boxShadow: 'xl',
-              transform: 'scale(1.03)',
+              boxShadow: '1px 1px 10px rgba(0,0,0,0.2)',
               borderColor: 'transparent',
               '& .delete': {
                 display: 'block'
@@ -64,10 +110,14 @@ const MyApps = () => {
                 variant={'base'}
                 borderRadius={'md'}
                 aria-label={'delete'}
-                display={'none'}
+                display={['', 'none']}
                 _hover={{
                   bg: 'myGray.100'
                 }}
+                onClick={(e) => {
+                  e.stopPropagation();
+                  openConfirm(() => onclickDelApp(app._id))();
+                }}
               />
             </Flex>
             <Box className={styles.intro} py={2} fontSize={'sm'} color={'myGray.600'}>
@@ -76,7 +126,9 @@ const MyApps = () => {
           </Card>
         ))}
       </Grid>
-    </Box>
+      <ConfirmChild />
+      {isOpenCreateModal && <CreateModal onClose={onCloseCreateModal} onSuccess={loadMyModels} />}
+    </PageContainer>
   );
 };