mirror of
https://github.com/labring/FastGPT.git
synced 2025-10-21 03:10:50 +00:00
app phone ui
This commit is contained in:
@@ -5,6 +5,8 @@ import { getAppTotalUsage } from '@/api/app';
|
|||||||
import { useQuery } from '@tanstack/react-query';
|
import { useQuery } from '@tanstack/react-query';
|
||||||
import dayjs from 'dayjs';
|
import dayjs from 'dayjs';
|
||||||
import { formatPrice } from '@/utils/user';
|
import { formatPrice } from '@/utils/user';
|
||||||
|
import Loading from '@/components/Loading';
|
||||||
|
import { Box } from '@chakra-ui/react';
|
||||||
|
|
||||||
const map = {
|
const map = {
|
||||||
blue: {
|
blue: {
|
||||||
@@ -185,7 +187,11 @@ const TokenUsage = ({ appId }: { appId: string }) => {
|
|||||||
myChart.current.resize();
|
myChart.current.resize();
|
||||||
}, [screenWidth]);
|
}, [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);
|
export default React.memo(TokenUsage);
|
||||||
|
@@ -37,6 +37,7 @@ import { useForm } from 'react-hook-form';
|
|||||||
import { defaultShareChat } from '@/constants/model';
|
import { defaultShareChat } from '@/constants/model';
|
||||||
import type { ShareChatEditType } from '@/types/app';
|
import type { ShareChatEditType } from '@/types/app';
|
||||||
import MyTooltip from '@/components/MyTooltip';
|
import MyTooltip from '@/components/MyTooltip';
|
||||||
|
import { useRequest } from '@/hooks/useRequest';
|
||||||
|
|
||||||
const Share = ({ appId }: { appId: string }) => {
|
const Share = ({ appId }: { appId: string }) => {
|
||||||
const { toast } = useToast();
|
const { toast } = useToast();
|
||||||
@@ -65,40 +66,21 @@ const Share = ({ appId }: { appId: string }) => {
|
|||||||
refetch: refetchShareChatList
|
refetch: refetchShareChatList
|
||||||
} = useQuery(['initShareChatList', appId], () => getShareChatList(appId));
|
} = 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);
|
...e,
|
||||||
const id = await createShareChat({
|
appId
|
||||||
...e,
|
}),
|
||||||
appId
|
errorToast: '创建分享链接异常',
|
||||||
});
|
onSuccess(id) {
|
||||||
onCloseCreateShareChat();
|
onCloseCreateShareChat();
|
||||||
refetchShareChatList();
|
refetchShareChatList();
|
||||||
|
const url = `对话地址为:${location.origin}/chat/share?shareId=${id}`;
|
||||||
const url = `对话地址为:${location.origin}/chat/share?shareId=${id}`;
|
copyData(url, '已复制分享地址');
|
||||||
copyData(url, '已复制分享地址');
|
resetShareChat(defaultShareChat);
|
||||||
|
}
|
||||||
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
|
// format share used token
|
||||||
const formatTokens = (tokens: number) => {
|
const formatTokens = (tokens: number) => {
|
||||||
@@ -199,7 +181,7 @@ const Share = ({ appId }: { appId: string }) => {
|
|||||||
{/* create shareChat modal */}
|
{/* create shareChat modal */}
|
||||||
<Modal isOpen={isOpenCreateShareChat} onClose={onCloseCreateShareChat}>
|
<Modal isOpen={isOpenCreateShareChat} onClose={onCloseCreateShareChat}>
|
||||||
<ModalOverlay />
|
<ModalOverlay />
|
||||||
<ModalContent>
|
<ModalContent maxW={'min(90vw,500px)'}>
|
||||||
<ModalHeader>创建免登录窗口</ModalHeader>
|
<ModalHeader>创建免登录窗口</ModalHeader>
|
||||||
<ModalCloseButton />
|
<ModalCloseButton />
|
||||||
<ModalBody>
|
<ModalBody>
|
||||||
@@ -259,7 +241,13 @@ const Share = ({ appId }: { appId: string }) => {
|
|||||||
<Button variant={'base'} mr={3} onClick={onCloseCreateShareChat}>
|
<Button variant={'base'} mr={3} onClick={onCloseCreateShareChat}>
|
||||||
取消
|
取消
|
||||||
</Button>
|
</Button>
|
||||||
<Button onClick={submitShareChat(onclickCreateShareChat)}>确认</Button>
|
|
||||||
|
<Button
|
||||||
|
isLoading={creating}
|
||||||
|
onClick={submitShareChat((data) => onclickCreateShareChat(data))}
|
||||||
|
>
|
||||||
|
确认
|
||||||
|
</Button>
|
||||||
</ModalFooter>
|
</ModalFooter>
|
||||||
</ModalContent>
|
</ModalContent>
|
||||||
</Modal>
|
</Modal>
|
||||||
|
@@ -105,15 +105,6 @@ const ChatTest = (
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Box
|
|
||||||
zIndex={2}
|
|
||||||
display={isOpen ? 'block' : 'none'}
|
|
||||||
position={'fixed'}
|
|
||||||
top={0}
|
|
||||||
left={0}
|
|
||||||
bottom={0}
|
|
||||||
right={0}
|
|
||||||
/>
|
|
||||||
<Flex
|
<Flex
|
||||||
ref={BoxRef}
|
ref={BoxRef}
|
||||||
zIndex={3}
|
zIndex={3}
|
||||||
@@ -122,7 +113,7 @@ const ChatTest = (
|
|||||||
top={5}
|
top={5}
|
||||||
right={0}
|
right={0}
|
||||||
h={isOpen ? '95%' : '0'}
|
h={isOpen ? '95%' : '0'}
|
||||||
w={isOpen ? '460px' : '0'}
|
w={isOpen ? ['100%', '460px'] : '0'}
|
||||||
bg={'white'}
|
bg={'white'}
|
||||||
boxShadow={'3px 0 20px rgba(0,0,0,0.2)'}
|
boxShadow={'3px 0 20px rgba(0,0,0,0.2)'}
|
||||||
borderRadius={'md'}
|
borderRadius={'md'}
|
||||||
@@ -160,6 +151,15 @@ const ChatTest = (
|
|||||||
/>
|
/>
|
||||||
</Box>
|
</Box>
|
||||||
</Flex>
|
</Flex>
|
||||||
|
<Box
|
||||||
|
zIndex={2}
|
||||||
|
display={isOpen ? 'block' : 'none'}
|
||||||
|
position={'fixed'}
|
||||||
|
top={0}
|
||||||
|
left={0}
|
||||||
|
bottom={0}
|
||||||
|
right={0}
|
||||||
|
/>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
@@ -280,9 +280,7 @@ const AppEdit = ({ app, fullScreen, onFullScreen }: Props) => {
|
|||||||
<MyTooltip label={'取消全屏'} offset={[10, 10]}>
|
<MyTooltip label={'取消全屏'} offset={[10, 10]}>
|
||||||
<IconButton
|
<IconButton
|
||||||
size={'sm'}
|
size={'sm'}
|
||||||
w={'28px'}
|
icon={<MyIcon name={'fullScreenLight'} w={['14px', '16px']} />}
|
||||||
h={'28px'}
|
|
||||||
icon={<MyIcon name={'fullScreenLight'} w={'16px'} />}
|
|
||||||
borderRadius={'md'}
|
borderRadius={'md'}
|
||||||
borderColor={'myGray.300'}
|
borderColor={'myGray.300'}
|
||||||
variant={'base'}
|
variant={'base'}
|
||||||
@@ -305,7 +303,7 @@ const AppEdit = ({ app, fullScreen, onFullScreen }: Props) => {
|
|||||||
<MyTooltip label={'全屏'}>
|
<MyTooltip label={'全屏'}>
|
||||||
<IconButton
|
<IconButton
|
||||||
mr={6}
|
mr={6}
|
||||||
icon={<MyIcon name={'fullScreenLight'} w={'16px'} />}
|
icon={<MyIcon name={'fullScreenLight'} w={['14px', '16px']} />}
|
||||||
borderRadius={'lg'}
|
borderRadius={'lg'}
|
||||||
variant={'base'}
|
variant={'base'}
|
||||||
aria-label={'fullScreenLight'}
|
aria-label={'fullScreenLight'}
|
||||||
@@ -331,7 +329,7 @@ const AppEdit = ({ app, fullScreen, onFullScreen }: Props) => {
|
|||||||
<MyTooltip label={'测试对话'}>
|
<MyTooltip label={'测试对话'}>
|
||||||
<IconButton
|
<IconButton
|
||||||
mr={6}
|
mr={6}
|
||||||
icon={<MyIcon name={'chatLight'} w={'16px'} />}
|
icon={<MyIcon name={'chatLight'} w={['14px', '16px']} />}
|
||||||
borderRadius={'lg'}
|
borderRadius={'lg'}
|
||||||
aria-label={'save'}
|
aria-label={'save'}
|
||||||
variant={'base'}
|
variant={'base'}
|
||||||
@@ -344,7 +342,7 @@ const AppEdit = ({ app, fullScreen, onFullScreen }: Props) => {
|
|||||||
|
|
||||||
<MyTooltip label={'保存配置'}>
|
<MyTooltip label={'保存配置'}>
|
||||||
<IconButton
|
<IconButton
|
||||||
icon={<MyIcon name={'save'} w={'16px'} />}
|
icon={<MyIcon name={'save'} w={['14px', '16px']} />}
|
||||||
borderRadius={'lg'}
|
borderRadius={'lg'}
|
||||||
isLoading={isLoading}
|
isLoading={isLoading}
|
||||||
aria-label={'save'}
|
aria-label={'save'}
|
||||||
@@ -353,6 +351,7 @@ const AppEdit = ({ app, fullScreen, onFullScreen }: Props) => {
|
|||||||
</MyTooltip>
|
</MyTooltip>
|
||||||
</Flex>
|
</Flex>
|
||||||
<Box
|
<Box
|
||||||
|
minH={'400px'}
|
||||||
flex={'1 0 0'}
|
flex={'1 0 0'}
|
||||||
w={'100%'}
|
w={'100%'}
|
||||||
h={0}
|
h={0}
|
||||||
|
@@ -139,7 +139,7 @@ const AppDetail = ({ currentTab }: { currentTab: `${TabEnum}` }) => {
|
|||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
</Box>
|
</Box>
|
||||||
<Box flex={1}>
|
<Box flex={1} h={'100%'}>
|
||||||
{currentTab === TabEnum.settings && <Settings appId={appId} />}
|
{currentTab === TabEnum.settings && <Settings appId={appId} />}
|
||||||
{currentTab === TabEnum.API && <API appId={appId} />}
|
{currentTab === TabEnum.API && <API appId={appId} />}
|
||||||
{currentTab === TabEnum.share && <Share appId={appId} />}
|
{currentTab === TabEnum.share && <Share appId={appId} />}
|
||||||
|
Reference in New Issue
Block a user