Inform (#4307)

* add manager change memberName and update inform UI

* change icon and some inform ui

* change for comment

* fix for comment

projects/app/src/pageComponents/account/NotificationDetailsModal.tsx

@@ -0,0 +1,73 @@
+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);