app phone ui

client/src/pages/app/detail/components/Charts/TotalUsage.tsx

@@ -5,6 +5,8 @@ import { getAppTotalUsage } from '@/api/app';
 import { useQuery } from '@tanstack/react-query';
 import dayjs from 'dayjs';
 import { formatPrice } from '@/utils/user';
+import Loading from '@/components/Loading';
+import { Box } from '@chakra-ui/react';
 
 const map = {
   blue: {
@@ -185,7 +187,11 @@ const TokenUsage = ({ appId }: { appId: string }) => {
     myChart.current.resize();
   }, [screenWidth]);
 
-  return <div ref={Dom} style={{ width: '100%', height: '100%' }} />;
+  return (
+    <Box ref={Dom} w={'100%'} h={'100%'} position={'relative'}>
+      <Loading fixed={false} />
+    </Box>
+  );
 };
 
 export default React.memo(TokenUsage);

client/src/pages/app/detail/components/Share.tsx

@@ -37,6 +37,7 @@ import { useForm } from 'react-hook-form';
 import { defaultShareChat } from '@/constants/model';
 import type { ShareChatEditType } from '@/types/app';
 import MyTooltip from '@/components/MyTooltip';
+import { useRequest } from '@/hooks/useRequest';
 
 const Share = ({ appId }: { appId: string }) => {
   const { toast } = useToast();
@@ -65,40 +66,21 @@ const Share = ({ appId }: { appId: string }) => {
     refetch: refetchShareChatList
   } = useQuery(['initShareChatList', appId], () => getShareChatList(appId));
 
-  const onclickCreateShareChat = useCallback(
+  const { mutate: onclickCreateShareChat, isLoading: creating } = useRequest({
-    async (e: ShareChatEditType) => {
+    mutationFn: async (e: ShareChatEditType) =>
-      try {
+      createShareChat({
-        setIsLoading(true);
-        const id = await createShareChat({
         ...e,
         appId
-        });
+      }),
+    errorToast: '创建分享链接异常',
+    onSuccess(id) {
       onCloseCreateShareChat();
       refetchShareChatList();
-
       const url = `对话地址为：${location.origin}/chat/share?shareId=${id}`;
       copyData(url, '已复制分享地址');
-
       resetShareChat(defaultShareChat);
-      } catch (err) {
-        toast({
-          title: getErrText(err, '创建分享链接异常'),
-          status: 'warning'
-        });
-        console.log(err);
     }
-      setIsLoading(false);
+  });
-    },
-    [
-      appId,
-      copyData,
-      onCloseCreateShareChat,
-      refetchShareChatList,
-      resetShareChat,
-      setIsLoading,
-      toast
-    ]
-  );
 
   // format share used token
   const formatTokens = (tokens: number) => {
@@ -199,7 +181,7 @@ const Share = ({ appId }: { appId: string }) => {
       {/* create shareChat modal */}
       <Modal isOpen={isOpenCreateShareChat} onClose={onCloseCreateShareChat}>
         <ModalOverlay />
-        <ModalContent>
+        <ModalContent maxW={'min(90vw,500px)'}>
           <ModalHeader>创建免登录窗口</ModalHeader>
           <ModalCloseButton />
           <ModalBody>
@@ -259,7 +241,13 @@ const Share = ({ appId }: { appId: string }) => {
             <Button variant={'base'} mr={3} onClick={onCloseCreateShareChat}>
               取消
             </Button>
-            <Button onClick={submitShareChat(onclickCreateShareChat)}>确认</Button>
+
+            <Button
+              isLoading={creating}
+              onClick={submitShareChat((data) => onclickCreateShareChat(data))}
+            >
+              确认
+            </Button>
           </ModalFooter>
         </ModalContent>
       </Modal>

client/src/pages/app/detail/components/edit/components/ChatTest.tsx

@@ -105,15 +105,6 @@ const ChatTest = (
 
   return (
     <>
-      <Box
-        zIndex={2}
-        display={isOpen ? 'block' : 'none'}
-        position={'fixed'}
-        top={0}
-        left={0}
-        bottom={0}
-        right={0}
-      />
       <Flex
         ref={BoxRef}
         zIndex={3}
@@ -122,7 +113,7 @@ const ChatTest = (
         top={5}
         right={0}
         h={isOpen ? '95%' : '0'}
-        w={isOpen ? '460px' : '0'}
+        w={isOpen ? ['100%', '460px'] : '0'}
         bg={'white'}
         boxShadow={'3px 0 20px rgba(0,0,0,0.2)'}
         borderRadius={'md'}
@@ -160,6 +151,15 @@ const ChatTest = (
           />
         </Box>
       </Flex>
+      <Box
+        zIndex={2}
+        display={isOpen ? 'block' : 'none'}
+        position={'fixed'}
+        top={0}
+        left={0}
+        bottom={0}
+        right={0}
+      />
     </>
   );
 };

client/src/pages/app/detail/components/edit/index.tsx

@@ -280,9 +280,7 @@ const AppEdit = ({ app, fullScreen, onFullScreen }: Props) => {
             <MyTooltip label={'取消全屏'} offset={[10, 10]}>
               <IconButton
                 size={'sm'}
-                w={'28px'}
+                icon={<MyIcon name={'fullScreenLight'} w={['14px', '16px']} />}
-                h={'28px'}
-                icon={<MyIcon name={'fullScreenLight'} w={'16px'} />}
                 borderRadius={'md'}
                 borderColor={'myGray.300'}
                 variant={'base'}
@@ -305,7 +303,7 @@ const AppEdit = ({ app, fullScreen, onFullScreen }: Props) => {
             <MyTooltip label={'全屏'}>
               <IconButton
                 mr={6}
-                icon={<MyIcon name={'fullScreenLight'} w={'16px'} />}
+                icon={<MyIcon name={'fullScreenLight'} w={['14px', '16px']} />}
                 borderRadius={'lg'}
                 variant={'base'}
                 aria-label={'fullScreenLight'}
@@ -331,7 +329,7 @@ const AppEdit = ({ app, fullScreen, onFullScreen }: Props) => {
           <MyTooltip label={'测试对话'}>
             <IconButton
               mr={6}
-              icon={<MyIcon name={'chatLight'} w={'16px'} />}
+              icon={<MyIcon name={'chatLight'} w={['14px', '16px']} />}
               borderRadius={'lg'}
               aria-label={'save'}
               variant={'base'}
@@ -344,7 +342,7 @@ const AppEdit = ({ app, fullScreen, onFullScreen }: Props) => {
 
         <MyTooltip label={'保存配置'}>
           <IconButton
-            icon={<MyIcon name={'save'} w={'16px'} />}
+            icon={<MyIcon name={'save'} w={['14px', '16px']} />}
             borderRadius={'lg'}
             isLoading={isLoading}
             aria-label={'save'}
@@ -353,6 +351,7 @@ const AppEdit = ({ app, fullScreen, onFullScreen }: Props) => {
         </MyTooltip>
       </Flex>
       <Box
+        minH={'400px'}
         flex={'1 0 0'}
         w={'100%'}
         h={0}

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

@@ -139,7 +139,7 @@ const AppDetail = ({ currentTab }: { currentTab: `${TabEnum}` }) => {
             }}
           />
         </Box>
-        <Box flex={1}>
+        <Box flex={1} h={'100%'}>
           {currentTab === TabEnum.settings && <Settings appId={appId} />}
           {currentTab === TabEnum.API && <API appId={appId} />}
           {currentTab === TabEnum.share && <Share appId={appId} />}