Updae theme and fix some bug (#1711)

2025-07-29 09:44:47 +00:00 · 2024-06-07 12:54:30 +08:00
parent 19c8a06d51
commit b20d075d35
153 changed files with 1587 additions and 1436 deletions
--- a/projects/app/src/pages/account/components/BillTable.tsx
+++ b/projects/app/src/pages/account/components/BillTable.tsx
@@ -32,6 +32,7 @@ import { standardSubLevelMap, subModeMap } from '@fastgpt/global/support/wallet/
 import MySelect from '@fastgpt/web/components/common/MySelect';
 import MyModal from '@fastgpt/web/components/common/MyModal';
 import { usePagination } from '@fastgpt/web/hooks/usePagination';
+import FormLabel from '@fastgpt/web/components/common/MyBox/FormLabel';

 const BillTable = () => {
  const { t } = useTranslation();
@@ -187,58 +188,68 @@ function BillDetailModal({ bill, onClose }: { bill: BillSchemaType; onClose: ()
    >
      <ModalBody>
        <Flex alignItems={'center'} pb={4}>
-          <Box flex={'0 0 120px'}>{t('support.wallet.bill.Number')}:</Box>
+          <FormLabel flex={'0 0 120px'}>{t('support.wallet.bill.Number')}:</FormLabel>
          <Box>{bill.orderId}</Box>
        </Flex>
        <Flex alignItems={'center'} pb={4}>
-          <Box flex={'0 0 120px'}>{t('support.wallet.usage.Time')}:</Box>
+          <FormLabel flex={'0 0 120px'}>{t('support.wallet.usage.Time')}:</FormLabel>
          <Box>{dayjs(bill.createTime).format('YYYY/MM/DD HH:mm:ss')}</Box>
        </Flex>
        <Flex alignItems={'center'} pb={4}>
-          <Box flex={'0 0 120px'}>{t('support.wallet.bill.Status')}:</Box>
+          <FormLabel flex={'0 0 120px'}>{t('support.wallet.bill.Status')}:</FormLabel>
          <Box>{t(billStatusMap[bill.status]?.label)}</Box>
        </Flex>
        {!!bill.metadata?.payWay && (
          <Flex alignItems={'center'} pb={4}>
-            <Box flex={'0 0 120px'}>{t('support.wallet.bill.payWay.Way')}:</Box>
+            <FormLabel flex={'0 0 120px'}>{t('support.wallet.bill.payWay.Way')}:</FormLabel>
            <Box>{t(billPayWayMap[bill.metadata.payWay]?.label)}</Box>
          </Flex>
        )}
        <Flex alignItems={'center'} pb={4}>
-          <Box flex={'0 0 120px'}>{t('support.wallet.Amount')}:</Box>
+          <FormLabel flex={'0 0 120px'}>{t('support.wallet.Amount')}:</FormLabel>
          <Box>{formatStorePrice2Read(bill.price)}元</Box>
        </Flex>
        <Flex alignItems={'center'} pb={4}>
-          <Box flex={'0 0 120px'}>{t('support.wallet.bill.Type')}:</Box>
+          <FormLabel flex={'0 0 120px'}>{t('support.wallet.bill.Type')}:</FormLabel>
          <Box>{t(billTypeMap[bill.type]?.label)}</Box>
        </Flex>
        {!!bill.metadata?.subMode && (
          <Flex alignItems={'center'} pb={4}>
-            <Box flex={'0 0 120px'}>{t('support.wallet.subscription.mode.Period')}:</Box>
+            <FormLabel flex={'0 0 120px'}>
+              {t('support.wallet.subscription.mode.Period')}:
+            </FormLabel>
            <Box>{t(subModeMap[bill.metadata.subMode]?.label)}</Box>
          </Flex>
        )}
        {!!bill.metadata?.standSubLevel && (
          <Flex alignItems={'center'} pb={4}>
-            <Box flex={'0 0 120px'}>{t('support.wallet.subscription.Stand plan level')}:</Box>
+            <FormLabel flex={'0 0 120px'}>
+              {t('support.wallet.subscription.Stand plan level')}:
+            </FormLabel>
            <Box>{t(standardSubLevelMap[bill.metadata.standSubLevel]?.label)}</Box>
          </Flex>
        )}
        {bill.metadata?.month !== undefined && (
          <Flex alignItems={'center'} pb={4}>
-            <Box flex={'0 0 120px'}>{t('support.wallet.subscription.Month amount')}:</Box>
+            <FormLabel flex={'0 0 120px'}>
+              {t('support.wallet.subscription.Month amount')}:
+            </FormLabel>
            <Box>{bill.metadata?.month}</Box>
          </Flex>
        )}
        {bill.metadata?.datasetSize !== undefined && (
          <Flex alignItems={'center'} pb={4}>
-            <Box flex={'0 0 120px'}>{t('support.wallet.subscription.Extra dataset size')}:</Box>
+            <FormLabel flex={'0 0 120px'}>
+              {t('support.wallet.subscription.Extra dataset size')}:
+            </FormLabel>
            <Box>{bill.metadata?.datasetSize}</Box>
          </Flex>
        )}
        {bill.metadata?.extraPoints !== undefined && (
          <Flex alignItems={'center'} pb={4}>
-            <Box flex={'0 0 120px'}>{t('support.wallet.subscription.Extra ai points')}:</Box>
+            <FormLabel flex={'0 0 120px'}>
+              {t('support.wallet.subscription.Extra ai points')}:
+            </FormLabel>
            <Box>{bill.metadata.extraPoints}</Box>
          </Flex>
        )}
--- a/projects/app/src/pages/account/components/Individuation.tsx
+++ b/projects/app/src/pages/account/components/Individuation.tsx
@@ -38,12 +38,12 @@ const Individuation = () => {

  return (
    <Box py={[3, '28px']} px={['5vw', '64px']}>
-      <Flex alignItems={'center'} fontSize={'xl'} h={'30px'}>
+      <Flex alignItems={'center'} fontSize={'lg'} h={'30px'}>
        <MyIcon mr={2} name={'support/user/individuation'} w={'20px'} />
        {t('support.account.Individuation')}
      </Flex>

-      <Card mt={6} px={[3, 10]} py={[3, 7]}>
+      <Card mt={6} px={[3, 10]} py={[3, 7]} fontSize={'sm'}>
        <Flex alignItems={'center'} w={['85%', '350px']}>
          <Box flex={'0 0 80px'}>{t('user.Language')}:&nbsp;</Box>
          <Box flex={'1 0 0'}>
--- a/projects/app/src/pages/account/components/Info.tsx
+++ b/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>
--- a/projects/app/src/pages/account/components/InformTable.tsx
+++ b/projects/app/src/pages/account/components/InformTable.tsx
@@ -8,6 +8,7 @@ import MyIcon from '@fastgpt/web/components/common/Icon';
 import { usePagination } from '@fastgpt/web/hooks/usePagination';
 import { useLoading } from '@fastgpt/web/hooks/useLoading';
 import { useTranslation } from 'next-i18next';
+import EmptyTip from '@fastgpt/web/components/common/EmptyTip';

 const InformTable = () => {
  const { t } = useTranslation();
@@ -78,14 +79,7 @@ const InformTable = () => {
            )}
          </Box>
        ))}
-        {!isLoading && informs.length === 0 && (
-          <Flex flex={'1 0 0'} flexDirection={'column'} alignItems={'center'} pt={'10vh'}>
-            <MyIcon name="empty" w={'48px'} h={'48px'} color={'transparent'} />
-            <Box mt={2} color={'myGray.500'}>
-              暂无通知~
-            </Box>
-          </Flex>
-        )}
+        {!isLoading && informs.length === 0 && <EmptyTip text={'暂无通知~'}></EmptyTip>}
      </Box>

      {total > pageSize && (
--- a/projects/app/src/pages/account/components/Promotion.tsx
+++ b/projects/app/src/pages/account/components/Promotion.tsx
@@ -19,14 +19,15 @@ import { useQuery } from '@tanstack/react-query';
 import { getPromotionInitData, getPromotionRecords } from '@/web/support/activity/promotion/api';
 import { useUserStore } from '@/web/support/user/useUserStore';

-import MyTooltip from '@/components/MyTooltip';
-import { QuestionOutlineIcon } from '@chakra-ui/icons';
+import MyTooltip from '@fastgpt/web/components/common/MyTooltip';
 import { useCopyData } from '@/web/common/hooks/useCopyData';
 import type { PromotionRecordType } from '@/global/support/api/userRes.d';
 import MyIcon from '@fastgpt/web/components/common/Icon';
 import dayjs from 'dayjs';
 import { usePagination } from '@fastgpt/web/hooks/usePagination';
 import { useLoading } from '@fastgpt/web/hooks/useLoading';
+import QuestionTip from '@fastgpt/web/components/common/MyTooltip/QuestionTip';
+import EmptyTip from '@fastgpt/web/components/common/EmptyTip';

 const Promotion = () => {
  const { t } = useTranslation();
@@ -55,7 +56,7 @@ const Promotion = () => {
    p: [4, 5],
    border: theme.borders.base,
    textAlign: 'center',
-    fontSize: ['md', 'xl'],
+    fontSize: ['md', 'lg'],
    borderRadius: 'md'
  };
  const titleStyles: BoxProps = {
@@ -78,18 +79,14 @@ const Promotion = () => {
        <Box {...statisticsStyles}>
          <Flex alignItems={'center'} justifyContent={'center'}>
            <Box>{t('user.Promotion Rate')}</Box>
-            <MyTooltip label={t('user.Promotion rate tip')}>
-              <QuestionOutlineIcon ml={1} />
-            </MyTooltip>
+            <QuestionTip ml={1} label={t('user.Promotion rate tip')}></QuestionTip>
          </Flex>
          <Box {...titleStyles}>{userInfo?.promotionRate || 15}%</Box>
        </Box>
        <Box {...statisticsStyles}>
          <Flex alignItems={'center'} justifyContent={'center'}>
            <Box>{t('user.Invite Url')}</Box>
-            <MyTooltip label={t('user.Invite url tip')}>
-              <QuestionOutlineIcon ml={1} />
-            </MyTooltip>
+            <QuestionTip ml={1} label={t('user.Invite url tip')}></QuestionTip>
          </Flex>
          <Button
            mt={4}
@@ -127,14 +124,7 @@ const Promotion = () => {
          </Table>
        </TableContainer>

-        {!isLoading && promotionRecords.length === 0 && (
-          <Flex mt={'10vh'} flexDirection={'column'} alignItems={'center'}>
-            <MyIcon name="empty" w={'48px'} h={'48px'} color={'transparent'} />
-            <Box mt={2} color={'myGray.500'}>
-              无邀请记录~
-            </Box>
-          </Flex>
-        )}
+        {!isLoading && promotionRecords.length === 0 && <EmptyTip text="无邀请记录~"></EmptyTip>}
        {total > pageSize && (
          <Flex mt={4} justifyContent={'flex-end'}>
            <Pagination />
--- a/projects/app/src/pages/account/components/UsageDetail.tsx
+++ b/projects/app/src/pages/account/components/UsageDetail.tsx
@@ -17,6 +17,7 @@ import { UsageSourceMap } from '@fastgpt/global/support/wallet/usage/constants';
 import MyModal from '@fastgpt/web/components/common/MyModal';
 import { useTranslation } from 'next-i18next';
 import { formatNumber } from '@fastgpt/global/common/math/tools';
+import FormLabel from '@fastgpt/web/components/common/MyBox/FormLabel';

 const UsageDetail = ({ usage, onClose }: { usage: UsageItemType; onClose: () => void }) => {
  const { t } = useTranslation();
@@ -67,30 +68,30 @@ const UsageDetail = ({ usage, onClose }: { usage: UsageItemType; onClose: () =>
    >
      <ModalBody>
        <Flex alignItems={'center'} pb={4}>
-          <Box flex={'0 0 80px'}>{t('support.wallet.bill.Number')}:</Box>
+          <FormLabel flex={'0 0 80px'}>{t('support.wallet.bill.Number')}:</FormLabel>
          <Box>{usage.id}</Box>
        </Flex>
        <Flex alignItems={'center'} pb={4}>
-          <Box flex={'0 0 80px'}>{t('support.wallet.usage.Time')}:</Box>
+          <FormLabel flex={'0 0 80px'}>{t('support.wallet.usage.Time')}:</FormLabel>
          <Box>{dayjs(usage.time).format('YYYY/MM/DD HH:mm:ss')}</Box>
        </Flex>
        <Flex alignItems={'center'} pb={4}>
-          <Box flex={'0 0 80px'}>{t('support.wallet.usage.App name')}:</Box>
+          <FormLabel flex={'0 0 80px'}>{t('support.wallet.usage.App name')}:</FormLabel>
          <Box>{t(usage.appName) || '-'}</Box>
        </Flex>
        <Flex alignItems={'center'} pb={4}>
-          <Box flex={'0 0 80px'}>{t('support.wallet.usage.Source')}:</Box>
+          <FormLabel flex={'0 0 80px'}>{t('support.wallet.usage.Source')}:</FormLabel>
          <Box>{t(UsageSourceMap[usage.source]?.label)}</Box>
        </Flex>
        <Flex alignItems={'center'} pb={4}>
-          <Box flex={'0 0 80px'}>{t('support.wallet.usage.Total points')}:</Box>
+          <FormLabel flex={'0 0 80px'}>{t('support.wallet.usage.Total points')}:</FormLabel>
          <Box fontWeight={'bold'}>{formatNumber(usage.totalPoints)}</Box>
        </Flex>
        <Box pb={4}>
-          <Box flex={'0 0 80px'} mb={1}>
+          <FormLabel flex={'0 0 80px'} mb={1}>
            {t('support.wallet.usage.Bill Module')}
-          </Box>
-          <TableContainer>
+          </FormLabel>
+          <TableContainer fontSize={'sm'}>
            <Table>
              <Thead>
                <Tr>
--- a/projects/app/src/pages/account/components/UsageTable.tsx
+++ b/projects/app/src/pages/account/components/UsageTable.tsx
@@ -31,6 +31,7 @@ import { getTeamMembers } from '@/web/support/user/team/api';
 import Avatar from '@/components/Avatar';
 import MySelect from '@fastgpt/web/components/common/MySelect';
 import { formatNumber } from '@fastgpt/global/common/math/tools';
+import EmptyTip from '@fastgpt/web/components/common/EmptyTip';
 const UsageDetail = dynamic(() => import('./UsageDetail'));

 const UsageTable = () => {
@@ -130,7 +131,14 @@ const UsageTable = () => {
          <Pagination />
        </Flex>
      </Flex>
-      <TableContainer px={[3, 8]} position={'relative'} flex={'1 0 0'} h={0} overflowY={'auto'}>
+      <TableContainer
+        mt={2}
+        px={[3, 8]}
+        position={'relative'}
+        flex={'1 0 0'}
+        h={0}
+        overflowY={'auto'}
+      >
        <Table>
          <Thead>
            <Tr>
@@ -171,14 +179,7 @@ const UsageTable = () => {
        </Table>
      </TableContainer>

-      {!isLoading && usages.length === 0 && (
-        <Flex flex={'1 0 0'} flexDirection={'column'} alignItems={'center'}>
-          <MyIcon name="empty" w={'48px'} h={'48px'} color={'transparent'} />
-          <Box mt={2} color={'myGray.500'}>
-            无使用记录~
-          </Box>
-        </Flex>
-      )}
+      {!isLoading && usages.length === 0 && <EmptyTip text="无使用记录~"></EmptyTip>}

      <Loading loading={isLoading} fixed={false} />
      {!!usageDetail && (
--- a/projects/app/src/pages/account/components/standardDetailModal.tsx
+++ b/projects/app/src/pages/account/components/standardDetailModal.tsx
@@ -45,7 +45,6 @@ const StandDetailModal = ({ onClose }: { onClose: () => void }) => {
                <Th>{t('support.standard.AI Bonus Points')}</Th>
                <Th>{t('support.standard.Start Time')}</Th>
                <Th>{t('support.standard.Expired Time')}</Th>
-                <Th />
              </Tr>
            </Thead>
            <Tbody fontSize={'sm'}>