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
parent 29a10c1389
commit cb29076e5b
25 changed files with 474 additions and 189 deletions
--- a/projects/app/src/pages/account/info/index.tsx
+++ b/projects/app/src/pages/account/info/index.tsx
@@ -45,6 +45,7 @@ import TeamSelector from '@/pageComponents/account/TeamSelector';
 import { getWorkorderURL } from '@/web/common/workorder/api';
 import { useRequest2 } from '@fastgpt/web/hooks/useRequest';
 import { useMount } from 'ahooks';
+import MyDivider from '@fastgpt/web/components/common/MyDivider';

 const StandDetailModal = dynamic(
  () => import('@/pageComponents/account/info/standardDetailModal'),
@@ -76,7 +77,7 @@ const Info = () => {
          <Flex justifyContent={'center'} maxW={'1080px'}>
            <Box flex={'0 0 330px'}>
              <MyInfo onOpenContact={onOpenContact} />
-              <Box mt={9}>
+              <Box mt={6}>
                <Other onOpenContact={onOpenContact} />
              </Box>
            </Box>
@@ -162,8 +163,23 @@ const MyInfo = ({ onOpenContact }: { onOpenContact: () => void }) => {

  const labelStyles: BoxProps = {
    flex: '0 0 80px',
-    fontSize: 'sm',
-    color: 'myGray.900'
+    color: 'var(--light-general-on-surface-lowest, var(--Gray-Modern-500, #667085))',
+    fontFamily: '"PingFang SC"',
+    fontSize: '14px',
+    fontStyle: 'normal',
+    fontWeight: 400,
+    lineHeight: '20px',
+    letterSpacing: '0.25px'
+  };
+
+  const titleStyles: BoxProps = {
+    color: 'var(--light-general-on-surface, var(--Gray-Modern-900, #111824))',
+    fontFamily: '"PingFang SC"',
+    fontSize: '16px',
+    fontStyle: 'normal',
+    fontWeight: 500,
+    lineHeight: '24px',
+    letterSpacing: '0.15px'
  };

  const isSyncMember = feConfigs.register_method?.includes('sync');
@@ -171,27 +187,69 @@ const MyInfo = ({ onOpenContact }: { onOpenContact: () => void }) => {
    <Box>
      {/* user info */}
      {isPc && (
-        <Flex alignItems={'center'} fontSize={'md'} h={'30px'}>
-          <MyIcon mr={2} name={'support/user/userLight'} w={'1.25rem'} />
-          {t('account_info:personal_information')}
+        <Flex alignItems={'center'} h={'30px'} {...titleStyles}>
+          <MyIcon mr={2} name={'core/dataset/fileCollection'} w={'1.25rem'} />
+          {t('account_info:general_info')}
        </Flex>
      )}

      <Box mt={[0, 6]} fontSize={'sm'}>
+        <Flex alignItems={'center'}>
+          <Box {...labelStyles}>{t('account_info:user_account')}&nbsp;</Box>
+          <Box flex={1}>{userInfo?.username}</Box>
+        </Flex>
+        {feConfigs?.isPlus && (
+          <Flex mt={4} alignItems={'center'}>
+            <Box {...labelStyles}>{t('account_info:password')}&nbsp;</Box>
+            <Box flex={1}>*****</Box>
+            <Button size={'sm'} variant={'whitePrimary'} onClick={onOpenUpdatePsw}>
+              {t('account_info:change')}
+            </Button>
+          </Flex>
+        )}
+        {feConfigs?.isPlus && (
+          <Flex mt={4} alignItems={'center'}>
+            <Box {...labelStyles}>{t('common:contact_way')}&nbsp;</Box>
+            <Box flex={1} {...(!userInfo?.contact ? { color: 'red.600' } : {})}>
+              {userInfo?.contact ? userInfo?.contact : t('account_info:please_bind_contact')}
+            </Box>
+
+            <Button size={'sm'} variant={'whitePrimary'} onClick={onOpenUpdateContact}>
+              {t('account_info:change')}
+            </Button>
+          </Flex>
+        )}
+
+        <MyDivider my={6} />
+
+        {isPc && (
+          <Flex alignItems={'center'} h={'30px'} {...titleStyles} mt={6}>
+            <MyIcon mr={2} name={'support/team/group'} w={'1.25rem'} />
+            {t('account_info:team_info')}
+          </Flex>
+        )}
+
+        {feConfigs.isPlus && (
+          <Flex mt={6} alignItems={'center'}>
+            <Box {...labelStyles}>{t('account_info:user_team_team_name')}&nbsp;</Box>
+            <Flex flex={'1 0 0'} w={0} align={'center'}>
+              <TeamSelector height={'28px'} w={'100%'} showManage />
+            </Flex>
+          </Flex>
+        )}
+
        {isPc ? (
-          <Flex alignItems={'center'} cursor={'pointer'}>
-            <Box {...labelStyles}>{t('account_info:avatar')}:&nbsp;</Box>
+          <Flex mt={4} alignItems={'center'} cursor={'pointer'}>
+            <Box {...labelStyles}>{t('account_info:avatar')}&nbsp;</Box>

            <MyTooltip label={t('account_info:select_avatar')}>
              <Box
-                w={['44px', '56px']}
-                h={['44px', '56px']}
+                w={['22px', '32px']}
+                h={['22px', '32px']}
                borderRadius={'50%'}
                border={theme.borders.base}
                overflow={'hidden'}
-                p={'2px'}
                boxShadow={'0 0 5px rgba(0,0,0,0.1)'}
-                mb={2}
                onClick={onOpenSelectFile}
              >
                <Avatar src={userInfo?.avatar} borderRadius={'50%'} w={'100%'} h={'100%'} />
@@ -228,7 +286,7 @@ const MyInfo = ({ onOpenContact }: { onOpenContact: () => void }) => {
        )}
        {feConfigs?.isPlus && (
          <Flex mt={[0, 4]} alignItems={'center'}>
-            <Box {...labelStyles}>{t('account_info:member_name')}:&nbsp;</Box>
+            <Box {...labelStyles}>{t('account_info:member_name')}&nbsp;</Box>
            <Input
              flex={'1 0 0'}
              disabled={isSyncMember}
@@ -248,43 +306,10 @@ const MyInfo = ({ onOpenContact }: { onOpenContact: () => void }) => {
            />
          </Flex>
        )}
-        <Flex alignItems={'center'} mt={6}>
-          <Box {...labelStyles}>{t('account_info:user_account')}:&nbsp;</Box>
-          <Box flex={1}>{userInfo?.username}</Box>
-        </Flex>
-        {feConfigs?.isPlus && (
-          <Flex mt={6} alignItems={'center'}>
-            <Box {...labelStyles}>{t('account_info:password')}:&nbsp;</Box>
-            <Box flex={1}>*****</Box>
-            <Button size={'sm'} variant={'whitePrimary'} onClick={onOpenUpdatePsw}>
-              {t('account_info:change')}
-            </Button>
-          </Flex>
-        )}
-        {feConfigs?.isPlus && (
-          <Flex mt={6} alignItems={'center'}>
-            <Box {...labelStyles}>{t('common:contact_way')}:&nbsp;</Box>
-            <Box flex={1} {...(!userInfo?.contact ? { color: 'red.600' } : {})}>
-              {userInfo?.contact ? userInfo?.contact : t('account_info:please_bind_contact')}
-            </Box>
-
-            <Button size={'sm'} variant={'whitePrimary'} onClick={onOpenUpdateContact}>
-              {t('account_info:change')}
-            </Button>
-          </Flex>
-        )}
-        {feConfigs.isPlus && (
-          <Flex mt={6} alignItems={'center'}>
-            <Box {...labelStyles}>{t('account_info:user_team_team_name')}:&nbsp;</Box>
-            <Flex flex={'1 0 0'} w={0} align={'center'}>
-              <TeamSelector height={'28px'} w={'100%'} showManage />
-            </Flex>
-          </Flex>
-        )}
        {feConfigs?.isPlus && (userInfo?.team?.balance ?? 0) > 0 && (
-          <Box mt={6} whiteSpace={'nowrap'}>
+          <Box mt={4} whiteSpace={'nowrap'}>
            <Flex alignItems={'center'}>
-              <Box {...labelStyles}>{t('account_info:team_balance')}:&nbsp;</Box>
+              <Box {...labelStyles}>{t('account_info:team_balance')}&nbsp;</Box>
              <Box flex={1}>
                <strong>{formatStorePrice2Read(userInfo?.team?.balance).toFixed(3)}</strong>{' '}
                {t('account_info:yuan')}
@@ -298,6 +323,8 @@ const MyInfo = ({ onOpenContact }: { onOpenContact: () => void }) => {
            </Flex>
          </Box>
        )}
+
+        <MyDivider my={6} />
      </Box>
      {isOpenConversionModal && (
        <ConversionModal onClose={onCloseConversionModal} onOpenContact={onOpenContact} />
@@ -418,7 +445,16 @@ const PlanUsage = () => {
  return standardPlan ? (
    <Box mt={[6, 0]}>
      <Flex fontSize={['md', 'lg']} h={'30px'}>
-        <Flex alignItems={'center'}>
+        <Flex
+          alignItems={'center'}
+          color="var(--light-general-on-surface, var(--Gray-Modern-900, #111824))"
+          fontFamily='"PingFang SC"'
+          fontSize="16px"
+          fontStyle="normal"
+          fontWeight={500}
+          lineHeight="24px"
+          letterSpacing="0.15px"
+        >
          <MyIcon mr={2} name={'support/account/plans'} w={'20px'} />
          {t('account_info:package_and_usage')}
        </Flex>
@@ -601,7 +637,7 @@ const Other = ({ onOpenContact }: { onOpenContact: () => void }) => {

  return (
    <Box>
-      <Grid gridGap={4} mt={3}>
+      <Grid gridGap={4}>
        {feConfigs?.docUrl && (
          <Link
            href={getDocPath('/docs/intro')}
--- a/projects/app/src/pages/account/inform.tsx
+++ b/projects/app/src/pages/account/inform.tsx
@@ -1,5 +1,5 @@
-import React from 'react';
-import { Box, Button, Flex, useTheme } from '@chakra-ui/react';
+import React, { useState } from 'react';
+import { Box, Flex, useTheme } from '@chakra-ui/react';
 import { getInforms, readInform } from '@/web/support/user/inform/api';
 import { formatTimeToChatTime } from '@fastgpt/global/common/string/time';
 import { usePagination } from '@fastgpt/web/hooks/usePagination';
@@ -8,11 +8,31 @@ import { useTranslation } from 'next-i18next';
 import EmptyTip from '@fastgpt/web/components/common/EmptyTip';
 import AccountContainer from '@/pageComponents/account/AccountContainer';
 import { serviceSideProps } from '@/web/common/i18n/utils';
+import MyTag from '@fastgpt/web/components/common/Tag/index';
+import Markdown from '@/components/Markdown';
+import NotificationDetailsModal from '@/pageComponents/account/NotificationDetailsModal';

 const InformTable = () => {
  const { t } = useTranslation();
  const theme = useTheme();
  const { Loading } = useLoading();
+  const [selectedInform, setSelectedInform] = useState<any>(null);
+
+  const textStyles = {
+    title: {
+      color: '#111824',
+      fontSize: 'md',
+      fontWeight: 'bold',
+      lineHeight: 6,
+      letterSpacing: '0.15px'
+    },
+    time: {
+      color: '#667085',
+      fontSize: 'sm',
+      lineHeight: 5,
+      letterSpacing: '0.25px'
+    }
+  };

  const {
    data: informs,
@@ -28,63 +48,105 @@ const InformTable = () => {

  return (
    <AccountContainer>
-      <Flex flexDirection={'column'} py={[0, 5]} h={'100%'} position={'relative'}>
-        <Box px={[3, 8]} position={'relative'} flex={'1 0 0'} h={0} overflowY={'auto'}>
+      <Flex flexDirection="column" py={[0, 5]} h="100%" position="relative">
+        <Box
+          px={[3, 8]}
+          position="relative"
+          flex="1 0 0"
+          h={0}
+          overflowY="auto"
+          display="flex"
+          flexDirection="column"
+          alignItems="center"
+        >
          {informs.map((item) => (
            <Box
              key={item._id}
              border={theme.borders.md}
-              py={2}
-              px={4}
-              borderRadius={'md'}
-              position={'relative'}
-              _notLast={{ mb: 3 }}
+              py={5}
+              px={6}
+              maxH="168px"
+              maxW="800px"
+              minW="200px"
+              width="100%"
+              borderRadius="md"
+              position="relative"
+              _notLast={{ mb: 4 }}
+              _hover={{
+                border: '1px solid #94B5FF',
+                cursor: 'pointer'
+              }}
+              onClick={() => {
+                if (!item.read) {
+                  readInform(item._id).then(() => getData(pageNum));
+                }
+                setSelectedInform(item);
+              }}
            >
-              <Flex alignItems={'center'}>
-                <Box fontWeight={'bold'}>{item.title}</Box>
-                <Box ml={2} color={'myGray.500'} flex={'1 0 0'}>
-                  ({t(formatTimeToChatTime(item.time) as any).replace('#', ':')})
+              <Flex alignItems="center">
+                <Box {...textStyles.title}>
+                  {item.teamId ? `【${item.teamName}】` : ''}
+                  {item.title}
                </Box>
-                {!item.read && (
-                  <Button
-                    variant={'whitePrimary'}
-                    size={'xs'}
-                    onClick={async () => {
-                      if (!item.read) {
-                        await readInform(item._id);
-                        getData(pageNum);
-                      }
-                    }}
-                  >
-                    {t('account_inform:read')}
-                  </Button>
-                )}
+                <Flex ml={3} flex={1} alignItems="center">
+                  <Box {...textStyles.time}>
+                    {t(formatTimeToChatTime(item.time) as any).replace('#', ':')}
+                  </Box>
+                  {!item.read && <Box w={2} h={2} borderRadius="full" bg="red.600" ml={3} />}
+                </Flex>
+
+                <MyTag
+                  colorSchema={item.teamId ? 'green' : 'blue'}
+                  mr={2}
+                  fontSize="xs"
+                  fontWeight="medium"
+                  showDot={false}
+                  type="fill"
+                >
+                  {item.teamId ? t('account_inform:team') : t('account_inform:system')}
+                </MyTag>
              </Flex>
-              <Box mt={2} fontSize={'sm'} color={'myGray.600'} whiteSpace={'pre-wrap'}>
-                {item.content}
+
+              <Box
+                mt={2}
+                fontSize="sm"
+                fontWeight={400}
+                color="#485264"
+                overflow="hidden"
+                maxHeight={24}
+                sx={{
+                  lineHeight: '16px',
+                  '& h1, & h2, & h3, & h4, & h5, & h6': {
+                    my: '0 !important',
+                    py: 0.5,
+                    display: 'block',
+                    lineHeight: 'normal'
+                  },
+                  '& p': {
+                    my: 0
+                  }
+                }}
+                noOfLines={6}
+              >
+                <Markdown source={item.content} />
              </Box>
-              {!item.read && (
-                <>
-                  <Box
-                    w={'5px'}
-                    h={'5px'}
-                    borderRadius={'10px'}
-                    bg={'red.600'}
-                    position={'absolute'}
-                    top={'8px'}
-                    left={'8px'}
-                  />
-                </>
-              )}
            </Box>
          ))}
+
          {!isLoading && informs.length === 0 && (
-            <EmptyTip text={t('account_inform:no_notifications')}></EmptyTip>
+            <EmptyTip text={t('account_inform:no_notifications')} />
          )}
        </Box>

+        {selectedInform && (
+          <NotificationDetailsModal
+            inform={selectedInform}
+            onClose={() => setSelectedInform(null)}
+          />
+        )}
+
        {total > pageSize && (
-          <Flex w={'100%'} mt={4} px={[3, 8]} justifyContent={'flex-end'}>
+          <Flex w="100%" mt={4} px={[3, 8]} justifyContent="flex-end">
            <Pagination />
          </Flex>
        )}