feat: 修改样式

apps/user/components/subscribe/recharge.tsx

@@ -40,7 +40,7 @@ export default function Recharge(props: Readonly<ButtonProps>) {
           {t('walletRecharge')}
         </AiroButton>
       </DialogTrigger>
-      <DialogContent className='flex h-full flex-col overflow-hidden md:h-auto'>
+      <DialogContent className='flex h-auto flex-col overflow-hidden rounded-[32px]'>
         <DialogHeader>
           <DialogTitle className={'text-3xl'}>{t('balanceRecharge')}</DialogTitle>
         </DialogHeader>
@@ -74,7 +74,7 @@ export default function Recharge(props: Readonly<ButtonProps>) {
           <div className={'flex items-center justify-center'}>
             <AiroButton
               variant={'primary'}
-              className='fixed bottom-0 left-0 md:relative md:mt-6'
+              className='relative mt-6'
               disabled={loading || !params.amount}
               onClick={() => {
                 startTransition(async () => {

apps/user/components/subscribe/renewal.tsx

@@ -1,13 +1,11 @@
 'use client';
 
-import CouponInput from '@/components/subscribe/coupon-input';
-import DurationSelector from '@/components/subscribe/duration-selector';
 import PaymentMethods from '@/components/subscribe/payment-methods';
 import useGlobalStore from '@/config/use-global';
 import { preCreateOrder, renewal } from '@/services/user/order';
 import { useQuery } from '@tanstack/react-query';
+import { AiroButton } from '@workspace/airo-ui/components/AiroButton';
 import { Button } from '@workspace/airo-ui/components/button';
-import { Card, CardContent } from '@workspace/airo-ui/components/card';
 import {
   Dialog,
   DialogContent,
@@ -16,6 +14,7 @@ import {
   DialogTrigger,
 } from '@workspace/airo-ui/components/dialog';
 import { Separator } from '@workspace/airo-ui/components/separator';
+import { Tabs, TabsList, TabsTrigger } from '@workspace/airo-ui/components/tabs';
 import { LoaderCircle } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import { useRouter } from 'next/navigation';
@@ -43,6 +42,8 @@ export default function Renewal({ id, subscribe, className }: Readonly<RenewalPr
   const [loading, startTransition] = useTransition();
   const lastSuccessOrderRef = useRef<any>(null);
 
+  const [tabValue, setTabValue] = useState('year');
+
   const { data: order } = useQuery({
     enabled: !!subscribe.id && open,
     queryKey: ['preCreateOrder', params],
@@ -106,20 +107,64 @@ export default function Renewal({ id, subscribe, className }: Readonly<RenewalPr
           {t('renewPlan')}
         </Button>
       </DialogTrigger>
-      <DialogContent className='flex h-full max-w-screen-lg flex-col overflow-hidden md:h-auto'>
+      <DialogContent className='flex h-full flex-col md:h-auto'>
         <DialogHeader>
-          <DialogTitle>{t('renewSubscription')}</DialogTitle>
+          <DialogTitle className={'sr-only'}>{t('renewSubscription')}</DialogTitle>
         </DialogHeader>
-        <div className='grid w-full gap-3 lg:grid-cols-2'>
-          <Card className='border-transparent shadow-none md:border-inherit md:shadow'>
-            <CardContent className='grid gap-3 p-0 text-sm md:p-6'>
+        <div className='pl-4 text-4xl font-bold text-[#0F2C53] sm:mb-8 sm:pl-0 sm:text-center sm:text-4xl'>
+          {t('renewSubscription')}
+        </div>
+        <div>
+          <Tabs
+            defaultValue='year'
+            className='mt-8 text-center sm:mt-6'
+            value={tabValue}
+            onValueChange={(val) => {
+              if (val === 'year') {
+                handleChange('quantity', 12);
+              } else if (val === 'month') {
+                handleChange('quantity', 1);
+              }
+              setTabValue(val);
+            }}
+          >
+            <TabsList className='relative mb-8 h-[74px] flex-wrap rounded-full bg-[#EAEAEA] p-2.5'>
+              {tabValue === 'year' ? (
+                <span className='absolute -top-8 left-16 z-10 rounded-md bg-[#E22C2E] px-2 py-0.5 text-[10px] font-bold leading-none text-white shadow sm:text-xs'>
+                  {t('discount20')}
+                  {/* 小三角箭头 */}
+                  <span
+                    className='absolute right-0 top-[80%] h-10 w-2 bg-[#E22C2E]'
+                    style={{ clipPath: 'polygon(100% 0, 100% 100%, 0 0)' }}
+                  />
+                </span>
+              ) : null}
+              <TabsTrigger
+                className='rounded-full px-8 py-3.5 text-xl data-[state=active]:bg-[#0F2C53] data-[state=active]:text-white md:px-12'
+                value='year'
+              >
+                {t('yearlyPlan')}
+              </TabsTrigger>
+              <TabsTrigger
+                className='rounded-full px-8 py-3.5 text-xl data-[state=active]:bg-[#0F2C53] data-[state=active]:text-white md:px-12'
+                value='month'
+              >
+                {t('monthlyPlan')}
+              </TabsTrigger>
+            </TabsList>
+          </Tabs>
+        </div>
+
+        <div className='w-full'>
+          <div className='border-transparent shadow-none md:border-inherit'>
+            <div className='grid p-0 text-sm md:p-6'>
               <SubscribeDetail
                 subscribe={{
                   ...subscribe,
                   quantity: params.quantity,
                 }}
               />
-              <Separator />
+              <Separator className='mb-3 mt-4 bg-[#225BA9]' />
               <SubscribeBilling
                 order={{
                   ...order,
@@ -127,9 +172,27 @@ export default function Renewal({ id, subscribe, className }: Readonly<RenewalPr
                   unit_price: subscribe?.unit_price,
                 }}
               />
-            </CardContent>
-          </Card>
-          <div className='flex flex-col justify-between text-sm'>
+              <Separator className='mb-3 mt-4 bg-[#225BA9]' />
+              <PaymentMethods
+                value={params.payment!}
+                onChange={(value) => {
+                  handleChange('payment', value);
+                }}
+              />
+            </div>
+            <div className='mt-8 flex items-center justify-center'>
+              <AiroButton
+                variant='primary'
+                className='w-[150px]'
+                disabled={loading}
+                onClick={handleSubmit}
+              >
+                {loading && <LoaderCircle className='mr-2 animate-spin' />}
+                {t('buyNow')}
+              </AiroButton>
+            </div>
+          </div>
+          {/* <div className='flex flex-col justify-between text-sm'>
             <div className='mb-6 grid gap-3'>
               <DurationSelector
                 quantity={params.quantity!}
@@ -158,7 +221,7 @@ export default function Renewal({ id, subscribe, className }: Readonly<RenewalPr
               {loading && <LoaderCircle className='mr-2 animate-spin' />}
               {t('buyNow')}
             </Button>
-          </div>
+          </div>*/}
         </div>
       </DialogContent>
     </Dialog>