feat: 修改文案大小

apps/user/components/main/OfferDialog/index.tsx

@@ -1,19 +1,22 @@
 import { getSubscription } from '@/services/user/portal';
 import { useQuery } from '@tanstack/react-query';
-import { Dialog, DialogContent, DialogTitle } from '@workspace/airo-ui/components/dialog';
-import { forwardRef, useImperativeHandle, useRef, useState } from 'react';
+import {
+  Dialog,
+  DialogContent,
+  DialogTitle,
+  DialogTrigger,
+} from '@workspace/airo-ui/components/dialog';
+import { useRef, useState } from 'react';
 
 import TabContent from '@/components/SubscribePlan/PlanContent/index';
 import PlanTabs from '@/components/SubscribePlan/PlanTabs/PlanTabs';
+import { Button } from '@workspace/airo-ui/components/button';
 import { useTranslations } from 'next-intl';
 
-export interface OfferDialogRef {
-  show: () => void;
-  hide: () => void;
-}
-
-const OfferDialog = forwardRef<OfferDialogRef>((props, ref) => {
+const OfferDialog = () => {
   const t = useTranslations('components.offerDialog');
+  const tHome = useTranslations('components.home');
+
   const [open, setOpen] = useState(false);
   const [tabValue, setTabValue] = useState<'year' | 'month'>('year');
   const dialogRef = useRef<HTMLDivElement>(null);
@@ -40,28 +43,26 @@ const OfferDialog = forwardRef<OfferDialogRef>((props, ref) => {
     },
     enabled: true, // 初始不执行，手动控制
     retry: 1, // 失败时重试1次
+    refetchOnWindowFocus: true,
   });
 
-  useImperativeHandle(ref, () => ({
-    show: () => {
-      refetch();
-      setOpen(true);
-    },
-    hide: () => setOpen(false),
-  }));
-
   return (
     <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <Button className='mb-8 h-auto rounded-full border-[3px] border-white bg-white/10 px-8 py-2 text-lg font-bold text-white transition hover:bg-white/25 sm:px-6 sm:py-1.5'>
+          {tHome('viewSubscriptionPlans')}
+        </Button>
+      </DialogTrigger>
       <DialogContent
         ref={dialogRef}
         className='rounded-0 h-full gap-0 px-4 py-8 sm:max-h-[95%] sm:!rounded-[32px] sm:px-8 sm:py-12 md:max-w-[1280px]'
       >
         <DialogTitle className={'sr-only'}></DialogTitle>
         <div className={'ml-6 sm:ml-0'}>
-          <div className={'text-4xl font-bold text-[#0F2C53] md:mb-4 md:text-center md:text-5xl'}>
+          <div className={'text-4xl font-bold text-[#0F2C53] md:mb-1 md:text-center'}>
             {t('selectPlan')}
           </div>
-          <div className={'text-lg font-medium text-[#666666] md:text-center'}>
+          <div className={'text-base font-medium text-[#666666] md:text-center'}>
             {t('selectYourPlan')}
           </div>
         </div>
@@ -80,6 +81,6 @@ const OfferDialog = forwardRef<OfferDialogRef>((props, ref) => {
       </DialogContent>
     </Dialog>
   );
-});
+};
 
 export default OfferDialog;