Files
FastGPT/projects/app/src/pageComponents/account/NotificationDetailsModal.tsx
gggaaallleee cb29076e5b Inform (#4307)
* add manager change memberName and update inform UI

* change icon and some inform ui

* change for comment

* fix for comment
2025-03-27 10:04:29 +08:00

74 lines
2.2 KiB
TypeScript

import MyModal from '@fastgpt/web/components/common/MyModal';
import { useTranslation } from 'next-i18next';
import Markdown from '@/components/Markdown';
import React from 'react';
import { Box, Flex } from '@chakra-ui/react';
import { formatTimeToChatTime } from '@fastgpt/global/common/string/time';
import MyTag from '@fastgpt/web/components/common/Tag/index';
import MyDivider from '@fastgpt/web/components/common/MyDivider';
const NotificationDetailsModal = ({ inform, onClose }: { inform: any; onClose: () => void }) => {
const { t } = useTranslation();
const textStyles = {
title: {
color: 'grayModern.900',
fontSize: '20px',
fontWeight: 'medium',
lineHeight: 6,
letterSpacing: '0.15px'
},
time: {
color: 'grayModern.500',
fontSize: '12px',
lineHeight: 5,
letterSpacing: '0.25px'
}
};
return (
<MyModal
isOpen={!!inform}
iconSrc={'support/user/informLight'}
title={t('account_inform:notification_detail')}
onClose={onClose}
iconColor="blue.600"
maxW="680px"
maxH="80vh"
>
<Flex flexDirection="column" p={8}>
<Flex
{...textStyles.time}
fontFamily="PingFang SC"
display="flex"
justifyContent="space-between"
alignItems="center"
alignSelf="stretch"
>
<Box {...textStyles.title} fontFamily="PingFang SC">
{inform.title}
</Box>
<Box {...textStyles.time} ml={3} flex={1} fontFamily="PingFang SC">
{t(formatTimeToChatTime(inform.time) as any).replace('#', ':')}
</Box>
<MyTag
colorSchema={inform.teamId ? 'green' : 'blue'}
mr={2}
fontSize="xs"
fontWeight="medium"
showDot={false}
type="fill"
>
{inform.teamId ? t('account_inform:team') : t('account_inform:system')}
</MyTag>
</Flex>
<MyDivider my={4} />
<Box fontSize="sm" lineHeight={1.8}>
<Markdown source={inform?.content} />
</Box>
</Flex>
</MyModal>
);
};
export default React.memo(NotificationDetailsModal);