Updae theme and fix some bug (#1711)

projects/app/src/pages/account/components/Info.tsx

@@ -9,7 +9,8 @@ import {
   Link,
   Progress,
   Grid,
-  Image
+  Image,
+  BoxProps
 } from '@chakra-ui/react';
 import { useForm } from 'react-hook-form';
 import { UserUpdateParams } from '@/types/user';
@@ -17,7 +18,6 @@ import { useToast } from '@fastgpt/web/hooks/useToast';
 import { useUserStore } from '@/web/support/user/useUserStore';
 import type { UserType } from '@fastgpt/global/support/user/type.d';
 import { useQuery } from '@tanstack/react-query';
-import { QuestionOutlineIcon } from '@chakra-ui/icons';
 import dynamic from 'next/dynamic';
 import { useSelectFile } from '@/web/common/file/hooks/useSelectFile';
 import { compressImgFileAndUpload } from '@/web/common/file/controller';
@@ -25,7 +25,7 @@ import { useSystemStore } from '@/web/common/system/useSystemStore';
 import { useTranslation } from 'next-i18next';
 import Avatar from '@/components/Avatar';
 import MyIcon from '@fastgpt/web/components/common/Icon';
-import MyTooltip from '@/components/MyTooltip';
+import MyTooltip from '@fastgpt/web/components/common/MyTooltip';
 import { useRouter } from 'next/router';
 import { formatStorePrice2Read } from '@fastgpt/global/support/wallet/usage/tools';
 import { putUpdateMemberName } from '@/web/support/user/team/api';
@@ -43,6 +43,7 @@ import {
 
 import StandardPlanContentList from '@/components/support/wallet/StandardPlanContentList';
 import { TeamMemberRoleEnum } from '@fastgpt/global/support/user/team/constant';
+import QuestionTip from '@fastgpt/web/components/common/MyTooltip/QuestionTip';
 
 const StandDetailModal = dynamic(() => import('./standardDetailModal'));
 const TeamMenu = dynamic(() => import('@/components/support/user/team/TeamMenu'));
@@ -158,20 +159,26 @@ const MyInfo = () => {
     [onclickSave, t, toast, userInfo]
   );
 
+  const labelStyles: BoxProps = {
+    flex: '0 0 80px',
+    fontSize: 'sm',
+    color: 'myGray.900'
+  };
+
   return (
     <Box>
       {/* user info */}
       {isPc && (
-        <Flex alignItems={'center'} fontSize={'xl'} h={'30px'}>
-          <MyIcon mr={2} name={'support/user/userLight'} w={'20px'} />
+        <Flex alignItems={'center'} fontSize={'md'} h={'30px'}>
+          <MyIcon mr={2} name={'support/user/userLight'} w={'1.25rem'} />
           {t('support.user.User self info')}
         </Flex>
       )}
 
-      <Box mt={[0, 6]}>
+      <Box mt={[0, 6]} fontSize={'sm'}>
         {isPc ? (
           <Flex alignItems={'center'} cursor={'pointer'}>
-            <Box flex={'0 0 80px'}>{t('support.user.Avatar')}:&nbsp;</Box>
+            <Box {...labelStyles}>{t('support.user.Avatar')}:&nbsp;</Box>
 
             <MyTooltip label={t('common.avatar.Select Avatar')}>
               <Box
@@ -219,7 +226,7 @@ const MyInfo = () => {
         )}
         {feConfigs.isPlus && (
           <Flex mt={[0, 4]} alignItems={'center'}>
-            <Box flex={'0 0 80px'}>{t('user.Member Name')}:&nbsp;</Box>
+            <Box {...labelStyles}>{t('user.Member Name')}:&nbsp;</Box>
             <Input
               flex={'1 0 0'}
               defaultValue={userInfo?.team?.memberName || 'Member'}
@@ -238,12 +245,12 @@ const MyInfo = () => {
           </Flex>
         )}
         <Flex alignItems={'center'} mt={6}>
-          <Box flex={'0 0 80px'}>{t('user.Account')}:&nbsp;</Box>
+          <Box {...labelStyles}>{t('user.Account')}:&nbsp;</Box>
           <Box flex={1}>{userInfo?.username}</Box>
         </Flex>
         {feConfigs.isPlus && (
           <Flex mt={6} alignItems={'center'}>
-            <Box flex={'0 0 80px'}>{t('user.Password')}:&nbsp;</Box>
+            <Box {...labelStyles}>{t('user.Password')}:&nbsp;</Box>
             <Box flex={1}>*****</Box>
             <Button size={'sm'} variant={'whitePrimary'} onClick={onOpenUpdatePsw}>
               {t('user.Change')}
@@ -251,7 +258,7 @@ const MyInfo = () => {
           </Flex>
         )}
         <Flex mt={6} alignItems={'center'}>
-          <Box flex={'0 0 80px'}>{t('user.Team')}:&nbsp;</Box>
+          <Box {...labelStyles}>{t('user.Team')}:&nbsp;</Box>
           <Box flex={1}>
             <TeamMenu />
           </Box>
@@ -259,9 +266,7 @@ const MyInfo = () => {
         {feConfigs.isPlus && (
           <Box mt={6} whiteSpace={'nowrap'}>
             <Flex alignItems={'center'}>
-              <Box flex={'0 0 80px'} fontSize={'md'}>
-                {t('user.team.Balance')}:&nbsp;
-              </Box>
+              <Box {...labelStyles}>{t('user.team.Balance')}:&nbsp;</Box>
               <Box flex={1}>
                 <strong>{formatStorePrice2Read(userInfo?.team?.balance).toFixed(3)}</strong> 元
               </Box>
@@ -373,7 +378,7 @@ const PlanUsage = () => {
 
   return standardPlan ? (
     <Box mt={[6, 0]}>
-      <Flex fontSize={'xl'} h={'30px'}>
+      <Flex fontSize={'lg'} h={'30px'}>
         <Flex alignItems={'center'}>
           <MyIcon mr={2} name={'support/account/plans'} w={'20px'} />
           {t('support.wallet.subscription.Team plan and usage')}
@@ -392,12 +397,12 @@ const PlanUsage = () => {
         borderColor={'borderColor.low'}
         borderRadius={'md'}
       >
-        <Flex px={[5, 10]} py={[3, 6]}>
+        <Flex px={[5, 7]} py={[3, 6]}>
           <Box flex={'1 0 0'}>
             <Box color={'myGray.600'} fontSize="sm">
               {t('support.wallet.subscription.Current plan')}
             </Box>
-            <Box fontWeight={'bold'} fontSize="xl">
+            <Box fontWeight={'bold'} fontSize="lg">
               {t(planName)}
             </Box>
 
@@ -412,18 +417,18 @@ const PlanUsage = () => {
                 </Box>
               </>
             ) : (
-              <Flex mt="2" color={'#485264'} fontSize="sm">
+              <Flex mt="2" color={'#485264'} fontSize="xs">
                 <Box>{t('support.wallet.Plan expired time')}:</Box>
                 <Box ml={2}>{formatTime2YMD(standardPlan?.expiredTime)}</Box>
               </Flex>
             )}
           </Box>
-          <Button onClick={() => router.push('/price')}>
+          <Button onClick={() => router.push('/price')} w={'8rem'} size="sm">
             {t('support.wallet.subscription.Upgrade plan')}
           </Button>
         </Flex>
         <Box py={3} borderTopWidth={'1px'} borderTopColor={'borderColor.base'}>
-          <Box py={[0, 3]} px={[5, 10]} overflow={'auto'}>
+          <Box py={[0, 3]} px={[5, 7]} overflow={'auto'}>
             <StandardPlanContentList
               level={standardPlan?.currentSubLevel}
               mode={standardPlan.currentMode}
@@ -443,8 +448,8 @@ const PlanUsage = () => {
       >
         <Flex>
           <Flex flex={'1 0 0'} alignItems={'flex-end'}>
-            <Box fontSize={'xl'}>资源用量</Box>
-            <Box fontSize={'sm'} color={'myGray.500'}>
+            <Box fontSize={'md'}>资源用量</Box>
+            <Box fontSize={'xs'} color={'myGray.500'}>
               (包含标准套餐与额外资源包)
             </Box>
           </Flex>
@@ -455,15 +460,18 @@ const PlanUsage = () => {
             alignItems={'center'}
             color={'primary.600'}
             cursor={'pointer'}
+            fontSize={'sm'}
           >
             购买额外套餐
             <MyIcon ml={1} name={'common/rightArrowLight'} w={'12px'} />
           </Link>
         </Flex>
-        <Box width={'100%'} mt={5}>
+        <Box width={'100%'} mt={5} fontSize={'sm'}>
           <Flex alignItems={'center'}>
             <Flex alignItems={'center'}>
-              <Box fontWeight={'bold'}>{t('support.user.team.Dataset usage')}</Box>
+              <Box fontWeight={'bold'} color={'myGray.900'}>
+                {t('support.user.team.Dataset usage')}
+              </Box>
               <Box color={'myGray.600'} ml={2}>
                 {datasetUsageMap.usedSize}/{datasetUsageMap.maxSize}
               </Box>
@@ -482,13 +490,16 @@ const PlanUsage = () => {
             />
           </Box>
         </Box>
-        <Box mt="9" width={'100%'}>
+        <Box mt="9" width={'100%'} fontSize={'sm'}>
           <Flex alignItems={'center'}>
             <Flex alignItems={'center'}>
-              <Box fontWeight={'bold'}>{t('support.wallet.subscription.AI points usage')}</Box>
-              <MyTooltip label={t('support.wallet.subscription.AI points usage tip')}>
-                <QuestionOutlineIcon ml={'2px'} />
-              </MyTooltip>
+              <Box fontWeight={'bold'} color={'myGray.900'}>
+                {t('support.wallet.subscription.AI points usage')}
+              </Box>
+              <QuestionTip
+                ml={1}
+                label={t('support.wallet.subscription.AI points usage tip')}
+              ></QuestionTip>
               <Box color={'myGray.600'} ml={2}>
                 {aiPointsUsageMap.used}/{aiPointsUsageMap.max}
               </Box>
@@ -557,6 +568,7 @@ const Other = () => {
             alignItems={'center'}
             userSelect={'none'}
             textDecoration={'none !important'}
+            fontSize={'sm'}
           >
             <MyIcon name={'common/courseLight'} w={'18px'} color={'myGray.600'} />
             <Box ml={2} flex={1}>
@@ -578,6 +590,7 @@ const Other = () => {
             alignItems={'center'}
             userSelect={'none'}
             textDecoration={'none !important'}
+            fontSize={'sm'}
           >
             <MyIcon name={'core/app/aiLight'} w={'18px'} />
             <Box ml={2} flex={1}>
@@ -589,7 +602,7 @@ const Other = () => {
         {feConfigs?.lafEnv && userInfo?.team.role === TeamMemberRoleEnum.owner && (
           <Flex
             bg={'white'}
-            py={4}
+            py={3}
             px={6}
             border={theme.borders.sm}
             borderWidth={'1.5px'}
@@ -598,6 +611,7 @@ const Other = () => {
             cursor={'pointer'}
             userSelect={'none'}
             onClick={onOpenLaf}
+            fontSize={'sm'}
           >
             <Image src="/imgs/workflow/laf.png" w={'18px'} alt="laf" />
             <Box ml={2} flex={1}>
@@ -615,7 +629,7 @@ const Other = () => {
         {feConfigs?.show_openai_account && (
           <Flex
             bg={'white'}
-            py={4}
+            py={3}
             px={6}
             border={theme.borders.sm}
             borderWidth={'1.5px'}
@@ -624,6 +638,7 @@ const Other = () => {
             cursor={'pointer'}
             userSelect={'none'}
             onClick={onOpenOpenai}
+            fontSize={'sm'}
           >
             <MyIcon name={'common/openai'} w={'18px'} color={'myGray.600'} />
             <Box ml={2} flex={1}>
@@ -644,6 +659,7 @@ const Other = () => {
             leftIcon={<MyIcon name={'modal/concat'} w={'18px'} color={'myGray.600'} />}
             onClick={onOpenConcat}
             h={'48px'}
+            fontSize={'sm'}
           >
             联系我们
           </Button>