style: pay page perf (#2535)

* style: pay page perf * perf: package status logic && add pay text
2025-07-28 09:03:53 +00:00 · 2024-08-27 18:56:08 +08:00
parent d057ad3a45
commit 454a479fd8
15 changed files with 518 additions and 322 deletions
--- a/projects/app/src/components/support/wallet/QRCodePayModal.tsx
+++ b/projects/app/src/components/support/wallet/QRCodePayModal.tsx
@@ -74,7 +74,11 @@ const QRCodePayModal = ({
  return (
    <MyModal isOpen title={t('common:user.Pay')} iconSrc="/imgs/modal/pay.svg">
      <ModalBody textAlign={'center'} py={6} whiteSpace={'pre'}>
-        {tip && <Box mb={3}>{tip}</Box>}
+        {tip && (
+          <Box textAlign={'left'} whiteSpace={'normal'} mb={3}>
+            {tip}
+          </Box>
+        )}
        <Box id={'payQRCode'} display={'inline-block'} h={'128px'}></Box>
        <Box mt={3} textAlign={'center'}>
          {t('common:pay.wechat', { price: readPrice })}
--- a/projects/app/src/components/support/wallet/StandardPlanContentList.tsx
+++ b/projects/app/src/components/support/wallet/StandardPlanContentList.tsx
@@ -78,7 +78,7 @@ const StandardPlanContentList = ({
      </Flex>
      <Flex alignItems={'center'}>
        <MyIcon name={'price/right'} w={'16px'} mr={3} />
-        <Box fontWeight={'bold'}>
+        <Box fontWeight={'bold'} color={'myGray.600'}>
          {t('common:support.wallet.subscription.function.Max dataset size', {
            amount: planContent.maxDatasetSize
          })}
@@ -87,7 +87,7 @@ const StandardPlanContentList = ({
      <Flex alignItems={'center'}>
        <MyIcon name={'price/right'} w={'16px'} mr={3} />
        <Flex alignItems={'center'}>
-          <Box fontWeight={'bold'}>
+          <Box fontWeight={'bold'} color={'myGray.600'}>
            {t('common:support.wallet.subscription.function.Points', {
              amount: planContent.totalPoints
            })}
--- a/projects/app/src/pages/account/components/Info/ConversionModal.tsx
+++ b/projects/app/src/pages/account/components/Info/ConversionModal.tsx
@@ -49,7 +49,9 @@ const ConversionModal = ({
        <VStack px="2.25" gap={2} pb="6">
          <HStack px="4" py="2" color="primary.600" bgColor="primary.50" borderRadius="md">
            <Icon name="common/info" w="1rem" mr="1" />
-            <Box fontSize={'sm'}>{t('user:bill.use_balance_hint')}</Box>
+            <Box fontSize={'mini'} fontWeight={'500'}>
+              {t('user:bill.use_balance_hint')}
+            </Box>
          </HStack>
          <VStack mt={6}>
            <Box fontSize={'sm'} color="myGray.600" fontWeight="500">
@@ -74,7 +76,9 @@ const ConversionModal = ({
            <Box fontSize={'xl'} fontWeight={'700'} color="myGray.900">
              {points} {t('user:bill.tokens')}
            </Box>
-            <Tag fontSize={'lg'}>{t('user:bill.token_expire_1year')}</Tag>
+            <Tag fontSize={'xs'} fontWeight={'500'}>
+              {t('user:bill.token_expire_1year')}
+            </Tag>
          </VStack>

          <VStack mt="6">
@@ -88,7 +92,7 @@ const ConversionModal = ({
            >
              {t('user:bill.conversion')}
            </Button>
-            <Link color="primary" mt="2" onClick={onOpenContact}>
+            <Link fontSize={'sm'} color="primary" mt="2" onClick={onOpenContact}>
              {t('user:bill.contact_customer_service')}
            </Link>
          </VStack>
--- a/projects/app/src/pages/account/components/Info/standardDetailModal.tsx
+++ b/projects/app/src/pages/account/components/Info/standardDetailModal.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import {
  ModalBody,
  ModalFooter,
@@ -11,7 +11,8 @@ import {
  TableContainer,
  ModalCloseButton,
  HStack,
-  Box
+  Box,
+  Flex
 } from '@chakra-ui/react';
 import MyModal from '@fastgpt/web/components/common/MyModal';
 import { useTranslation } from 'next-i18next';
@@ -19,16 +20,47 @@ import { useQuery } from '@tanstack/react-query';
 import { useLoading } from '@fastgpt/web/hooks/useLoading';
 import MyIcon from '@fastgpt/web/components/common/Icon';
 import { getTeamPlans } from '@/web/support/user/team/api';
-import { subTypeMap, standardSubLevelMap } from '@fastgpt/global/support/wallet/sub/constants';
+import {
+  subTypeMap,
+  standardSubLevelMap,
+  SubTypeEnum
+} from '@fastgpt/global/support/wallet/sub/constants';
 import { TeamSubSchema } from '@fastgpt/global/support/wallet/sub/type';
 import { formatTime2YMDHM } from '@fastgpt/global/common/string/time';
 import { useSystemStore } from '@/web/common/system/useSystemStore';
+import { useRequest2 } from '@fastgpt/web/hooks/useRequest';
+
+type packageStatus = 'active' | 'inactive' | 'expired';

 const StandDetailModal = ({ onClose }: { onClose: () => void }) => {
  const { t } = useTranslation();
  const { Loading } = useLoading();
  const { subPlans } = useSystemStore();
-  const { data: teamPlans = [], isLoading } = useQuery(['getTeamPlans'], getTeamPlans);
+  const { data: teamPlans = [], loading: isLoading } = useRequest2(
+    () =>
+      getTeamPlans().then((res) => {
+        return [
+          ...res.filter((plan) => plan.type === SubTypeEnum.standard),
+          ...res.filter((plan) => plan.type === SubTypeEnum.extraDatasetSize),
+          ...res.filter((plan) => plan.type === SubTypeEnum.extraPoints)
+        ].map((item, index) => {
+          return {
+            ...item,
+            status:
+              new Date(item.expiredTime).getTime() < new Date().getTime()
+                ? 'expired'
+                : item.type === SubTypeEnum.standard
+                  ? index === 0
+                    ? 'active'
+                    : 'inactive'
+                  : 'active'
+          };
+        });
+      }),
+    {
+      manual: false
+    }
+  );

  return (
    <MyModal
@@ -39,7 +71,7 @@ const StandDetailModal = ({ onClose }: { onClose: () => void }) => {
      isCentered
    >
      <ModalCloseButton onClick={onClose} />
-      <ModalBody>
+      <ModalBody px={'3.25rem'} py={'2rem'}>
        <TableContainer mt={2} position={'relative'} minH={'300px'}>
          <Table>
            <Thead>
@@ -48,7 +80,7 @@ const StandDetailModal = ({ onClose }: { onClose: () => void }) => {
                <Th>{t('common:support.standard.storage')}</Th>
                <Th>{t('common:support.standard.AI Bonus Points')}</Th>
                <Th>{t('user:bill.valid_time')}</Th>
-                <Th>{t('common:support.standard.Expired Time')}</Th>
+                <Th>{t('common:support.standard.due_date')}</Th>
              </Tr>
            </Thead>
            <Tbody fontSize={'sm'}>
@@ -61,25 +93,36 @@ const StandDetailModal = ({ onClose }: { onClose: () => void }) => {
                  surplusPoints = 0,
                  totalPoints = 0,
                  startTime,
-                  expiredTime
-                }: TeamSubSchema) => {
+                  expiredTime,
+                  status
+                }) => {
                  const standardPlan = currentSubLevel
                    ? subPlans?.standard?.[currentSubLevel]
                    : undefined;
                  const datasetSize = standardPlan?.maxDatasetSize || currentExtraDatasetSize;
+                  const now = new Date();

                  return (
-                    <Tr key={_id}>
+                    <Tr key={_id} fontWeight={500} fontSize={'mini'} color={'myGray.900'}>
                      <Td>
-                        <MyIcon
-                          mr={2}
-                          name={subTypeMap[type]?.icon as any}
-                          w={'20px'}
-                          color={'myGray.800'}
-                        />
-                        {t(subTypeMap[type]?.label as any)}
-                        {currentSubLevel &&
-                          `(${t(standardSubLevelMap[currentSubLevel]?.label as any)})`}
+                        <Flex>
+                          <Flex align={'center'}>
+                            <MyIcon
+                              mr={2}
+                              name={subTypeMap[type]?.icon as any}
+                              w={'20px'}
+                              h={'20px'}
+                              color={'myGray.600'}
+                              fontWeight={500}
+                            />
+                          </Flex>
+                          <Flex align={'center'} color={'myGray.900'}>
+                            {t(subTypeMap[type]?.label as any)}
+                            {currentSubLevel &&
+                              `(${t(standardSubLevelMap[currentSubLevel]?.label as any)})`}
+                          </Flex>
+                          <StatusTag status={status as packageStatus} />
+                        </Flex>
                      </Td>
                      <Td>
                        {datasetSize ? `${datasetSize + t('common:core.dataset.data.group')}` : '-'}
@@ -89,8 +132,8 @@ const StandDetailModal = ({ onClose }: { onClose: () => void }) => {
                          ? `${Math.round(totalPoints - surplusPoints)} / ${totalPoints} ${t('common:support.wallet.subscription.point')}`
                          : '-'}
                      </Td>
-                      <Td>{formatTime2YMDHM(startTime)}</Td>
-                      <Td>{formatTime2YMDHM(expiredTime)}</Td>
+                      <Td color={'myGray.600'}>{formatTime2YMDHM(startTime)}</Td>
+                      <Td color={'myGray.600'}>{formatTime2YMDHM(expiredTime)}</Td>
                    </Tr>
                  );
                }
@@ -100,14 +143,56 @@ const StandDetailModal = ({ onClose }: { onClose: () => void }) => {
          </Table>
          <Loading loading={isLoading} fixed={false} />
        </TableContainer>
-        <HStack mt={4} color={'primary.600'}>
+        <HStack mt={4} color={'primary.700'}>
          <MyIcon name={'infoRounded'} w={'1rem'} />
-          <Box fontSize={'sm'}>{t('user:bill.standard_valid_tip')}</Box>
+          <Box fontSize={'mini'} fontWeight={'500'}>
+            {t('user:bill.standard_valid_tip')}
+          </Box>
        </HStack>
      </ModalBody>
-      <ModalFooter></ModalFooter>
    </MyModal>
  );
 };

+function StatusTag({ status }: { status: packageStatus }) {
+  const { t } = useTranslation();
+  const statusText = useMemo(() => {
+    return {
+      inactive: t('common:support.wallet.subscription.status.inactive'),
+      active: t('common:support.wallet.subscription.status.active'),
+      expired: t('common:support.wallet.subscription.status.expired')
+    };
+  }, [t]);
+  const styleMap = useMemo(() => {
+    return {
+      inactive: {
+        color: 'adora.600',
+        bg: 'adora.50'
+      },
+      active: {
+        color: 'green.600',
+        bg: 'green.50'
+      },
+      expired: {
+        color: 'myGray.700',
+        bg: 'myGray.100'
+      }
+    };
+  }, []);
+  return (
+    <Box
+      py={'0.25rem'}
+      ml={'0.375rem'}
+      px={'0.5rem'}
+      fontSize={'0.625rem'}
+      fontWeight={500}
+      borderRadius={'sm'}
+      bg={styleMap[status]?.bg}
+      color={styleMap[status]?.color}
+    >
+      {statusText[status]}
+    </Box>
+  );
+}
+
 export default StandDetailModal;
--- a/projects/app/src/pages/price/components/ExtraPlan.tsx
+++ b/projects/app/src/pages/price/components/ExtraPlan.tsx
@@ -119,15 +119,15 @@ const ExtraPlan = () => {

  return (
    <Flex
-      mt={['40px', '90px']}
+      mt={['40px', '200px']}
      flexDirection={'column'}
      alignItems={'center'}
      position={'relative'}
    >
-      <Box id={'extra-plan'} fontWeight={'bold'} fontSize={['24px', '36px']}>
+      <Box id={'extra-plan'} fontWeight={'bold'} fontSize={['24px', '36px']} color={'myGray.900'}>
        {t('common:support.wallet.subscription.Extra plan')}
      </Box>
-      <Box mt={8} mb={10} color={'myGray.500'} fontSize={'md'}>
+      <Box mt={2} mb={8} color={'myGray.600'} fontSize={'md'}>
        {t('common:support.wallet.subscription.Extra plan tip')}
      </Box>
      <Grid mt={8} gridTemplateColumns={['1fr', '1fr 1fr']} gap={5} w={['100%', 'auto']}>
@@ -143,12 +143,12 @@ const ExtraPlan = () => {
        >
          <Flex borderBottomWidth={'1px'} borderBottomColor={'myGray.200'}>
            <Box flex={'1 0 0'}>
-              <Box fontSize={'lg'} color={'primary.600'}>
+              <Box fontSize={'lg'} color={'primary.700'}>
                {t('common:support.wallet.subscription.Extra dataset size')}
              </Box>
-              <Box mt={3} fontSize={['28px', '32px']} fontWeight={'bold'}>
+              <Box mt={3} fontSize={['28px', '32px']} fontWeight={'bold'} color={'black'}>
                {`￥${extraDatasetPrice}/1000` + t('common:core.dataset.data.group')}
-                <Box ml={1} as={'span'} fontSize={'md'} color={'myGray.600'} fontWeight={'normal'}>
+                <Box ml={1} as={'span'} fontSize={'md'} color={'myGray.500'} fontWeight={'normal'}>
                  /{t('common:common.month')}
                </Box>
              </Box>
@@ -162,12 +162,12 @@ const ExtraPlan = () => {
            />
          </Flex>
          <Box h={'120px'} w={'100%'}>
-            <Flex mt={4}>
+            <Flex mt={4} color={'myGray.900'}>
              <MyIcon mr={2} name={'support/bill/shoppingCart'} w={'16px'} color={'primary.600'} />
              {t('common:support.wallet.buy_resource')}
            </Flex>
            <Flex mt={4} alignItems={'center'}>
-              <Box flex={['0 0 100px', '1 0 0']}>
+              <Box flex={['0 0 100px', '1 0 0']} color={'myGray.600'}>
                {t('common:support.wallet.subscription.Month amount')}
              </Box>
              <Flex alignItems={'center'} mt={1} w={'180px'} position={'relative'}>
@@ -186,13 +186,13 @@ const ExtraPlan = () => {
                    <NumberDecrementStepper />
                  </NumberInputStepper>
                </NumberInput>
-                <Box position={'absolute'} right={'20px'} color={'myGray.500'} fontSize={'xs'}>
+                <Box position={'absolute'} right={'20px'} color={'myGray.600'} fontSize={'xs'}>
                  {t('common:common.month')}
                </Box>
              </Flex>
            </Flex>
            <Flex mt={4} alignItems={'center'}>
-              <Box flex={['0 0 100px', '1 0 0']}>
+              <Box flex={['0 0 100px', '1 0 0']} color={'myGray.600'}>
                {t('common:support.wallet.subscription.Update extra dataset size')}
              </Box>
              <Flex alignItems={'center'} mt={1} w={'180px'} position={'relative'}>
@@ -219,7 +219,7 @@ const ExtraPlan = () => {
                    <NumberDecrementStepper />
                  </NumberInputStepper>
                </NumberInput>
-                <Box position={'absolute'} right={'20px'} color={'myGray.500'} fontSize={'xs'}>
+                <Box position={'absolute'} right={'20px'} color={'myGray.600'} fontSize={'xs'}>
                  000{t('common:core.dataset.data.unit')}
                </Box>
              </Flex>
@@ -231,6 +231,7 @@ const ExtraPlan = () => {
            variant={'primaryGhost'}
            isLoading={loading}
            onClick={handleSubmitDatasetSize(onclickBuyDatasetSize)}
+            color={'primary.700'}
          >
            {t('common:support.wallet.Buy')}
          </Button>
@@ -248,12 +249,12 @@ const ExtraPlan = () => {
        >
          <Flex borderBottomWidth={'1px'} borderBottomColor={'myGray.200'}>
            <Box flex={'1 0 0'}>
-              <Box fontSize={'lg'} color={'primary.600'}>
+              <Box fontSize={'lg'} color={'primary.700'}>
                {t('common:support.wallet.subscription.Extra ai points')}
              </Box>
-              <Box mt={3} fontSize={['28px', '32px']} fontWeight={'bold'}>
+              <Box mt={3} fontSize={['28px', '32px']} fontWeight={'bold'} color={'black'}>
                {`￥${extraPointsPrice}/1000` + t('common:support.wallet.subscription.point')}
-                <Box ml={1} as={'span'} fontSize={'md'} color={'myGray.600'} fontWeight={'normal'}>
+                <Box ml={1} as={'span'} fontSize={'md'} color={'myGray.500'} fontWeight={'normal'}>
                  /{t('common:common.month')}
                </Box>
              </Box>
@@ -267,7 +268,7 @@ const ExtraPlan = () => {
            />
          </Flex>
          <Box h={'120px'} w={'100%'}>
-            <Flex mt={4}>
+            <Flex mt={4} color={'myGray.900'}>
              <MyIcon mr={2} name={'support/bill/shoppingCart'} w={'16px'} color={'primary.600'} />
              {t('common:support.wallet.buy_resource')}
            </Flex>
@@ -297,10 +298,16 @@ const ExtraPlan = () => {
              </Flex>
            </Flex> */}
            <Flex mt={4} alignItems={'center'}>
-              <Box flex={['0 0 100px', '1 0 0']}>
+              <Box flex={['0 0 100px', '1 0 0']} color={'myGray.600'}>
                {t('common:support.wallet.subscription.Update extra ai points')}
              </Box>
-              <Flex alignItems={'center'} mt={1} w={'180px'} position={'relative'}>
+              <Flex
+                alignItems={'center'}
+                mt={1}
+                w={'180px'}
+                position={'relative'}
+                color={'myGray.500'}
+              >
                <NumberInput
                  size={'sm'}
                  flex={1}
@@ -336,6 +343,7 @@ const ExtraPlan = () => {
            variant={'primaryGhost'}
            isLoading={loading}
            onClick={handleSubmitExtraPoints(onclickBuyExtraPoints)}
+            color={'primary.700'}
          >
            {t('common:support.wallet.Buy')}
          </Button>
--- a/projects/app/src/pages/price/components/FAQ.tsx
+++ b/projects/app/src/pages/price/components/FAQ.tsx
@@ -6,12 +6,12 @@ const FAQ = () => {
  const { t } = useTranslation();
  const faqs = [
    {
-      title: t('common:FAQ.auto_renew_q'),
-      desc: t('common:FAQ.auto_renew_a')
+      title: t('common:FAQ.switch_package_q'),
+      desc: t('common:FAQ.switch_package_a')
    },
    {
-      title: t('common:FAQ.change_package_q'),
-      desc: t('common:FAQ.change_package_a')
+      title: t('common:FAQ.check_subscription_q'),
+      desc: t('common:FAQ.check_subscription_a')
    },
    {
      title: t('common:FAQ.ai_point_q'),
@@ -41,21 +41,21 @@ const FAQ = () => {

  return (
    <Flex
-      mt={['40px', '90px']}
+      mt={['40px', '200px']}
      pb={'10vh'}
      flexDirection={'column'}
      alignItems={'center'}
      position={'relative'}
    >
-      <Box fontWeight={'bold'} fontSize={['24px', '36px']}>
+      <Box fontWeight={'bold'} fontSize={['24px', '36px']} color={'myGray.900'}>
        {t('common:support.wallet.subscription.FAQ')}
      </Box>
-      <Grid mt={4} gridTemplateColumns={['1fr', '1fr 1fr']} gap={4} w={'100%'}>
+      <Grid mt={12} gridTemplateColumns={['1fr', '1fr 1fr']} gap={4} w={'100%'}>
        {faqs.map((item, i) => (
          <Box
            key={i}
-            py={4}
-            px={5}
+            py={8}
+            px={9}
            borderRadius={'lg'}
            borderWidth={'1px'}
            borderColor={'myGray.150'}
@@ -64,8 +64,10 @@ const FAQ = () => {
              borderColor: 'primary.300'
            }}
          >
-            <Box fontWeight={'bold'}>{item.title}</Box>
-            <Box fontSize={'sm'} color={'myGray.600'} whiteSpace={'pre-wrap'}>
+            <Box fontWeight={'bold'} pb={3} color={'myGray.900'}>
+              {item.title}
+            </Box>
+            <Box fontSize={'sm'} color={'myGray.600'}>
              {item.desc}
            </Box>
          </Box>
--- a/projects/app/src/pages/price/components/Points.tsx
+++ b/projects/app/src/pages/price/components/Points.tsx
@@ -9,18 +9,18 @@ const Points = () => {

  return (
    <Flex
-      mt={['40px', '90px']}
+      mt={['40px', '200px']}
      flexDirection={'column'}
      alignItems={'center'}
      position={'relative'}
    >
-      <Box id="point-card" fontWeight={'bold'} fontSize={['24px', '36px']}>
+      <Box id="point-card" fontWeight={'bold'} fontSize={['24px', '36px']} color={'myGray.900'}>
        {t('common:support.wallet.subscription.Ai points')}
      </Box>
      <Link href="https://tiktokenizer.vercel.app/" target="_blank">
        {t('common:support.wallet.subscription.token_compute')}
      </Link>
-      <Grid gap={6} mt={['30px', '40px']} w={'100%'}>
+      <Grid gap={6} mt={['30px', 14]} w={'100%'} color={'myGray.900'}>
        <Box
          display={['block', 'flex']}
          borderRadius={'xl'}
@@ -33,16 +33,17 @@ const Points = () => {
            flex={1}
            borderRightWidth={'1px'}
            borderRightColor={'myGray.150'}
-            py={4}
-            px={6}
+            py={8}
+            pl={10}
            fontSize={'md'}
            fontWeight={'bold'}
+            color={'myGray.900'}
          >
            {t('common:support.wallet.subscription.ai_model')}
          </Box>
          <Box flex={4} textAlign={'center'}>
            {llmModelList?.map((item, i) => (
-              <Flex key={item.model} py={4} bg={i % 2 !== 0 ? 'myGray.50' : ''}>
+              <Flex key={item.model} py={4} bg={i % 2 !== 0 ? 'myGray.100' : ''}>
                <Box flex={'1 0 0'}>{item.name}</Box>
                <Box flex={'1 0 0'}>
                  {item.charsPointsPrice +
@@ -61,17 +62,17 @@ const Points = () => {
          bg={'rgba(255,255,255,0.9)'}
          overflow={'hidden'}
        >
-          <Box flex={1} borderRightWidth={'1px'} borderRightColor={'myGray.150'} py={4} px={6}>
+          <Box flex={1} borderRightWidth={'1px'} borderRightColor={'myGray.150'} py={8} pl={10}>
            <Box fontSize={'md'} fontWeight={'bold'}>
              {t('common:core.ai.model.Vector Model')}
            </Box>
-            <Box fontSize={'sm'} mt={1} color={'myGray.500'}>
+            <Box fontSize={'sm'} mt={1} color={'myGray.600'}>
              {t('common:core.ai.model.doc_index_and_dialog')}
            </Box>
          </Box>
          <Box flex={4} textAlign={'center'}>
            {vectorModelList?.map((item, i) => (
-              <Flex key={item.model} py={4} bg={i % 2 !== 0 ? 'myGray.50' : ''}>
+              <Flex key={item.model} py={4} bg={i % 2 !== 0 ? 'myGray.100' : ''}>
                <Box flex={'1 0 0'}>{item.name}</Box>
                <Box flex={'1 0 0'}>
                  {item.charsPointsPrice +
@@ -90,7 +91,7 @@ const Points = () => {
          bg={'rgba(255,255,255,0.9)'}
          overflow={'hidden'}
        >
-          <Box flex={1} borderRightWidth={'1px'} borderRightColor={'myGray.150'} py={4} px={6}>
+          <Box flex={1} borderRightWidth={'1px'} borderRightColor={'myGray.150'} py={8} pl={10}>
            <Box fontSize={'md'} fontWeight={'bold'}>
              {t('common:core.app.TTS')}
            </Box>
@@ -117,7 +118,7 @@ const Points = () => {
          bg={'rgba(255,255,255,0.9)'}
          overflow={'hidden'}
        >
-          <Box flex={1} borderRightWidth={'1px'} borderRightColor={'myGray.150'} py={4} px={6}>
+          <Box flex={1} borderRightWidth={'1px'} borderRightColor={'myGray.150'} py={4} pl={10}>
            <Box fontSize={'md'} fontWeight={'bold'}>
              {t('common:core.app.Whisper')}
            </Box>
--- a/projects/app/src/pages/price/components/Standard.tsx
+++ b/projects/app/src/pages/price/components/Standard.tsx
@@ -1,8 +1,13 @@
 import React, { useMemo, useState } from 'react';
 import MyIcon from '@fastgpt/web/components/common/Icon';
-import { Box, Button, Flex, Grid } from '@chakra-ui/react';
+import { Box, Button, Flex, Grid, HStack } from '@chakra-ui/react';
 import { useTranslation } from 'next-i18next';
-import { StandardSubLevelEnum, SubModeEnum } from '@fastgpt/global/support/wallet/sub/constants';
+import {
+  StandardSubLevelEnum,
+  SubModeEnum,
+  PackageChangeStatusEnum,
+  packagePayTextMap
+} from '@fastgpt/global/support/wallet/sub/constants';
 import { useSystemStore } from '@/web/common/system/useSystemStore';
 import { standardSubLevelMap } from '@fastgpt/global/support/wallet/sub/constants';
 import { useRequest2 } from '@fastgpt/web/hooks/useRequest';
@@ -24,7 +29,7 @@ const Standard = ({
  const { t } = useTranslation();
  const router = useRouter();
  const { toast } = useToast();
-
+  const [packageChange, setPackageChange] = useState<PackageChangeStatusEnum>();
  const { subPlans, feConfigs } = useSystemStore();
  const [selectSubMode, setSelectSubMode] = useState<`${SubModeEnum}`>(SubModeEnum.month);

@@ -66,103 +71,180 @@ const Standard = ({
  });

  return (
-    <Flex flexDirection={'column'} alignItems={'center'} position={'relative'}>
-      <Box fontWeight={'bold'} fontSize={['24px', '36px']}>
-        {t('common:support.wallet.subscription.Sub plan')}
-      </Box>
-      <Box mt={8} mb={10} color={'myGray.500'} fontSize={'md'}>
-        {t('common:support.wallet.subscription.Sub plan tip', {
-          title: feConfigs?.systemTitle
-        })}
-      </Box>
-      <Box>
-        <RowTabs
-          list={[
-            { label: t('common:support.wallet.subscription.mode.Month'), value: SubModeEnum.month },
-            {
-              label: (
-                <Flex>
-                  {t('common:support.wallet.subscription.mode.Year')}
-                  <Box color={selectSubMode === SubModeEnum.month ? 'red.600' : 'auto'}>
-                    ({t('common:support.wallet.subscription.mode.Year sale')})
+    <>
+      <Flex flexDirection={'column'} alignItems={'center'} position={'relative'}>
+        <Box fontWeight={'600'} color={'myGray.900'} fontSize={['24px', '36px']}>
+          {t('common:support.wallet.subscription.Sub plan')}
+        </Box>
+        <Box mt={8} mb={10} fontWeight={'500'} color={'myGray.600'} fontSize={'md'}>
+          {t('common:support.wallet.subscription.Sub plan tip', {
+            title: feConfigs?.systemTitle
+          })}
+        </Box>
+        <Box>
+          <RowTabs
+            list={[
+              {
+                label: t('common:support.wallet.subscription.mode.Month'),
+                value: SubModeEnum.month
+              },
+              {
+                label: (
+                  <Flex>
+                    {t('common:support.wallet.subscription.mode.Year')}
+                    <Box ml={1} color={selectSubMode === SubModeEnum.month ? 'red.600' : 'auto'}>
+                      ({t('common:support.wallet.subscription.mode.Year sale')})
+                    </Box>
+                  </Flex>
+                ),
+                value: SubModeEnum.year
+              }
+            ]}
+            value={selectSubMode}
+            onChange={(e) => setSelectSubMode(e as `${SubModeEnum}`)}
+          />
+        </Box>
+        {/* card */}
+        <Grid
+          mt={[10, '48px']}
+          gridTemplateColumns={['1fr', 'repeat(2,1fr)', 'repeat(4,1fr)']}
+          gap={[4, 6, 8]}
+          w={'100%'}
+          maxW={'1440px'}
+          minH={'550px'}
+        >
+          {standardSubList.map((item) => {
+            const isCurrentPlan = item.level === myStandardPlan?.currentSubLevel;
+
+            const isHigherLevel =
+              standardSubLevelMap[item.level].weight >
+              standardSubLevelMap[myStandardPlan?.currentSubLevel || StandardSubLevelEnum.free]
+                .weight;
+
+            return (
+              <Box
+                key={item.level}
+                pos={'relative'}
+                flex={'1 0 0'}
+                bg={isCurrentPlan ? 'blue.50' : 'rgba(255, 255, 255, 0.90)'}
+                p={'28px'}
+                borderRadius={'xl'}
+                borderWidth={isCurrentPlan ? '4px' : '1.5px'}
+                boxShadow={'1.5'}
+                {...(isCurrentPlan
+                  ? {
+                      borderColor: 'primary.600'
+                    }
+                  : {
+                      borderColor: 'myGray.150'
+                    })}
+              >
+                {isCurrentPlan && (
+                  <Box
+                    position={'absolute'}
+                    right={0}
+                    top={'1.62rem'}
+                    px={3}
+                    py={'0.38rem'}
+                    color={'blue.700'}
+                    fontSize={'xs'}
+                    bg={'blue.200'}
+                    fontWeight={'500'}
+                    borderLeftRadius={'sm'}
+                  >
+                    {t('common:is_using')}
                  </Box>
-                </Flex>
-              ),
-              value: SubModeEnum.year
-            }
-          ]}
-          value={selectSubMode}
-          onChange={(e) => setSelectSubMode(e as `${SubModeEnum}`)}
-        />
-      </Box>
-      {/* card */}
-      <Grid
-        mt={[10, '48px']}
-        gridTemplateColumns={['1fr', 'repeat(2,1fr)', 'repeat(4,1fr)']}
-        gap={[4, 6, 8]}
-        w={'100%'}
-        maxW={'1440px'}
-        minH={'550px'}
-      >
-        {standardSubList.map((item) => {
-          const isCurrentPlan = item.level === myStandardPlan?.currentSubLevel;
+                )}
+                <Box fontSize={'md'} fontWeight={'500'} color={'myGray.900'}>
+                  {t(item.label)}
+                </Box>
+                <Box fontSize={['32px', '42px']} fontWeight={'bold'} color={'myGray.900'}>
+                  ￥{item.price}
+                </Box>
+                <Box color={'myGray.500'} h={'40px'} fontSize={'xs'}>
+                  {t(item.desc as any, { title: feConfigs?.systemTitle })}
+                </Box>

-          return (
-            <Box
-              key={item.level}
-              flex={'1 0 0'}
-              bg={'rgba(255, 255, 255, 0.90)'}
-              p={'28px'}
-              borderRadius={'2xl'}
-              borderWidth={'1.5px'}
-              boxShadow={'1.5'}
-              {...(isCurrentPlan
-                ? {
-                    borderColor: 'primary.600'
+                {/* Button */}
+                {(() => {
+                  if (item.level === StandardSubLevelEnum.free) {
+                    return (
+                      <Button
+                        mt={4}
+                        mb={6}
+                        _active={{}}
+                        _hover={{}}
+                        boxShadow={'0'}
+                        cursor={'default'}
+                        w={'100%'}
+                        variant={isCurrentPlan ? 'whiteBase' : 'solid'}
+                      >
+                        {t('common:free')}
+                      </Button>
+                    );
+                  }
+                  // feature:
+                  // if (
+                  //   item.level === myStandardPlan?.nextSubLevel &&
+                  //   selectSubMode === myStandardPlan?.nextMode
+                  // ) {
+                  //   return (
+                  //     <Button mt={4} mb={6} w={'100%'} variant={'whiteBase'} isDisabled>
+                  //       {t('common:support.wallet.subscription.Next plan')}
+                  //     </Button>
+                  //   );
+                  // }
+                  if (isCurrentPlan) {
+                    return (
+                      <Button
+                        mt={4}
+                        mb={6}
+                        w={'100%'}
+                        variant={'primary'}
+                        isLoading={isLoading}
+                        onClick={() => {
+                          setPackageChange(PackageChangeStatusEnum.renewal);
+                          onPay({
+                            type: BillTypeEnum.standSubPlan,
+                            level: item.level,
+                            subMode: selectSubMode
+                          });
+                        }}
+                      >
+                        {t('user:bill.renew_plan')}
+                      </Button>
+                    );
+                  }
+                  if (isHigherLevel) {
+                    return (
+                      <Button
+                        mt={4}
+                        mb={6}
+                        w={'100%'}
+                        variant={'primaryGhost'}
+                        isLoading={isLoading}
+                        onClick={() => {
+                          setPackageChange(PackageChangeStatusEnum.upgrade);
+                          onPay({
+                            type: BillTypeEnum.standSubPlan,
+                            level: item.level,
+                            subMode: selectSubMode
+                          });
+                        }}
+                      >
+                        {t('common:support.wallet.subscription.Upgrade plan')}
+                      </Button>
+                    );
                  }
-                : {
-                    borderColor: 'myGray.150'
-                  })}
-            >
-              <Box fontSize={'md'} fontWeight={'500'}>
-                {t(item.label)}
-              </Box>
-              <Box fontSize={['32px', '42px']} fontWeight={'bold'}>
-                ￥{item.price}
-              </Box>
-              <Box color={'myGray.500'} h={'40px'} fontSize={'xs'}>
-                {t(item.desc as any, { title: feConfigs?.systemTitle })}
-              </Box>
-
-              {/* Button */}
-              {(() => {
-                if (item.level === StandardSubLevelEnum.free) {
-                  return (
-                    <Button isDisabled mt={4} mb={6} w={'100%'} variant={'solid'}>
-                      {t('common:support.wallet.subscription.Nonsupport')}
-                    </Button>
-                  );
-                }
-                // feature:
-                // if (
-                //   item.level === myStandardPlan?.nextSubLevel &&
-                //   selectSubMode === myStandardPlan?.nextMode
-                // ) {
-                //   return (
-                //     <Button mt={4} mb={6} w={'100%'} variant={'whiteBase'} isDisabled>
-                //       {t('common:support.wallet.subscription.Next plan')}
-                //     </Button>
-                //   );
-                // }
-                if (isCurrentPlan) {
                  return (
                    <Button
                      mt={4}
                      mb={6}
                      w={'100%'}
-                      variant={'primary'}
+                      variant={'primaryGhost'}
                      isLoading={isLoading}
                      onClick={() => {
+                        setPackageChange(PackageChangeStatusEnum.buy);
                        onPay({
                          type: BillTypeEnum.standSubPlan,
                          level: item.level,
@@ -170,40 +252,29 @@ const Standard = ({
                        });
                      }}
                    >
-                      {t('user:bill.renew_plan')}
+                      {t('user:bill.buy_plan')}
                    </Button>
                  );
-                }
+                })()}

-                return (
-                  <Button
-                    mt={4}
-                    mb={6}
-                    w={'100%'}
-                    variant={'primaryGhost'}
-                    isLoading={isLoading}
-                    onClick={() =>
-                      onPay({
-                        type: BillTypeEnum.standSubPlan,
-                        level: item.level,
-                        subMode: selectSubMode
-                      })
-                    }
-                  >
-                    {t('user:bill.buy_plan')}
-                  </Button>
-                );
-              })()}
+                {/* function list */}
+                <StandardPlanContentList level={item.level} mode={selectSubMode} />
+              </Box>
+            );
+          })}
+        </Grid>

-              {/* function list */}
-              <StandardPlanContentList level={item.level} mode={selectSubMode} />
-            </Box>
-          );
-        })}
-      </Grid>
-
-      {!!qrPayData && <QRCodePayModal tip="您正在购买订阅套餐" {...qrPayData} />}
-    </Flex>
+        {!!qrPayData && packageChange && (
+          <QRCodePayModal tip={t(packagePayTextMap[packageChange])} {...qrPayData} />
+        )}
+      </Flex>
+      <HStack mt={8} color={'blue.700'} ml={8}>
+        <MyIcon name={'infoRounded'} w={'1rem'} />
+        <Box fontSize={'sm'} fontWeight={'500'}>
+          {t('user:bill.standard_valid_tip')}
+        </Box>
+      </HStack>
+    </>
  );
 };

@@ -239,7 +310,7 @@ const RowTabs = ({
          alignItems={'center'}
          justifyContent={'center'}
          cursor={'pointer'}
-          borderRadius={'md'}
+          borderRadius={'sm'}
          px={'12px'}
          py={'7px'}
          userSelect={'none'}
@@ -255,7 +326,7 @@ const RowTabs = ({
              })}
        >
          {item.icon && <MyIcon name={item.icon as any} mr={1} w={'14px'} />}
-          <Box>{item.label}</Box>
+          <Box fontWeight={'500'}>{item.label}</Box>
        </Flex>
      ))}
    </Box>
--- a/projects/app/src/pages/price/index.tsx
+++ b/projects/app/src/pages/price/index.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { serviceSideProps } from '@/web/common/utils/i18n';
-import { Box } from '@chakra-ui/react';
+import { Box, Flex } from '@chakra-ui/react';
 import { useUserStore } from '@/web/support/user/useUserStore';
 import { getTeamPlanStatus } from '@/web/support/user/team/api';
 import { useQuery } from '@tanstack/react-query';
@@ -26,13 +26,14 @@ const PriceBox = () => {
  return (
    <>
      <Script src="/js/qrcode.min.js" strategy="lazyOnload"></Script>
-      <Box
+      <Flex
        h={'100%'}
+        flexDir={'column'}
        overflow={'overlay'}
        w={'100%'}
        px={['20px', '5vw']}
        py={['30px', '80px']}
-        backgroundImage={'url(/imgs/priceBg.svg)'}
+        bg={`linear-gradient(to right, #F8F8FD00, #F7F7FF),url(/imgs/priceBg.svg)`}
        backgroundSize={'cover'}
        backgroundRepeat={'no-repeat'}
      >
@@ -49,7 +50,7 @@ const PriceBox = () => {

        {/* question */}
        <FAQ />
-      </Box>
+      </Flex>
    </>
  );
 };