mirror of
https://github.com/labring/FastGPT.git
synced 2025-07-23 13:03:50 +00:00

* feat(app publish): feishu bot (#2290) * feat: feishu publish channel fe * feat: enable feishu fe, feat: feishu token api * feat: feishu bot * chore: extract saveChat from projects/app * chore: remove debug log output * feat: Basic Info * chore: feishu bot fe adjusting * feat: feishu bot docs * feat: new tmpData collection for all tmpdata * chore: compress the image * perf: feishu config * feat: source name * perf: text desc * perf: load system plugins * perf: chat source * feat(publish): Wecom bot (#2343) * chore: Wecom Config * feat(fe): wecom config fe * feat: wecom fe * chore: uses the newest editmodal * feat: update png; adjust the fe * chore: adjust fe * perf: publish app ui --------- Co-authored-by: Finley Ge <32237950+FinleyGe@users.noreply.github.com>
107 lines
2.4 KiB
TypeScript
107 lines
2.4 KiB
TypeScript
import React from 'react';
|
|
import {
|
|
Modal,
|
|
ModalOverlay,
|
|
ModalContent,
|
|
ModalHeader,
|
|
ModalCloseButton,
|
|
ModalContentProps,
|
|
Box
|
|
} from '@chakra-ui/react';
|
|
import MyBox from '../MyBox';
|
|
import { useSystem } from '../../../hooks/useSystem';
|
|
import Avatar from '../Avatar';
|
|
|
|
export interface MyModalProps extends ModalContentProps {
|
|
iconSrc?: string;
|
|
title?: any;
|
|
isCentered?: boolean;
|
|
isLoading?: boolean;
|
|
isOpen?: boolean;
|
|
onClose?: () => void;
|
|
closeOnOverlayClick?: boolean;
|
|
}
|
|
|
|
const MyModal = ({
|
|
isOpen = true,
|
|
onClose,
|
|
iconSrc,
|
|
title,
|
|
children,
|
|
isCentered,
|
|
isLoading,
|
|
w = 'auto',
|
|
maxW = ['90vw', '600px'],
|
|
closeOnOverlayClick = true,
|
|
...props
|
|
}: MyModalProps) => {
|
|
const isPc = useSystem();
|
|
|
|
return (
|
|
<Modal
|
|
isOpen={isOpen}
|
|
onClose={() => onClose && onClose()}
|
|
autoFocus={false}
|
|
isCentered={isPc ? isCentered : true}
|
|
blockScrollOnMount={false}
|
|
closeOnOverlayClick={closeOnOverlayClick}
|
|
>
|
|
<ModalOverlay />
|
|
<ModalContent
|
|
w={w}
|
|
minW={['90vw', '400px']}
|
|
maxW={maxW}
|
|
position={'relative'}
|
|
maxH={'85vh'}
|
|
boxShadow={'7'}
|
|
{...props}
|
|
>
|
|
{!title && onClose && <ModalCloseButton zIndex={1} />}
|
|
{!!title && (
|
|
<ModalHeader
|
|
display={'flex'}
|
|
alignItems={'center'}
|
|
background={'#FBFBFC'}
|
|
borderBottom={'1px solid #F4F6F8'}
|
|
roundedTop={'lg'}
|
|
py={'10px'}
|
|
fontSize={'md'}
|
|
fontWeight={'bold'}
|
|
>
|
|
{iconSrc && (
|
|
<>
|
|
<Avatar
|
|
objectFit={'contain'}
|
|
alt=""
|
|
src={iconSrc}
|
|
w={'1.5rem'}
|
|
borderRadius={'md'}
|
|
/>
|
|
</>
|
|
)}
|
|
<Box ml={3} color={'myGray.900'} fontWeight={'500'}>
|
|
{title}
|
|
</Box>
|
|
<Box flex={1} />
|
|
{onClose && (
|
|
<ModalCloseButton position={'relative'} fontSize={'xs'} top={0} right={0} />
|
|
)}
|
|
</ModalHeader>
|
|
)}
|
|
|
|
<MyBox
|
|
isLoading={isLoading}
|
|
overflow={props.overflow || 'overlay'}
|
|
h={'100%'}
|
|
display={'flex'}
|
|
flexDirection={'column'}
|
|
>
|
|
{children}
|
|
</MyBox>
|
|
</ModalContent>
|
|
</Modal>
|
|
);
|
|
};
|
|
|
|
export default React.memo(MyModal);
|