feat: 修改样式

apps/user/app/(main)/(content)/(user)/order/page.tsx

@@ -4,13 +4,12 @@ import { Display } from '@/components/display';
 import { Empty } from '@/components/empty';
 import { ProList, ProListActions } from '@/components/pro-list';
 import { closeOrder, queryOrderList } from '@/services/user/order';
-import { purchaseCheckout } from '@/services/user/portal';
 import { AiroButton } from '@workspace/airo-ui/components/AiroButton';
 import { Card, CardContent } from '@workspace/airo-ui/components/card';
 import { formatDate } from '@workspace/airo-ui/utils';
 import { useTranslations } from 'next-intl';
+import Link from 'next/link';
 import { useRef } from 'react';
-import { toast } from 'sonner';
 import OrderDetailDialog from './components/OrderDetailDialog';
 
 export default function Page() {
@@ -19,19 +18,6 @@ export default function Page() {
   const ref = useRef<ProListActions>(null);
   const OrderDetailDialogRef = useRef<typeof OrderDetailDialog>(null);
 
-  const handlePayment = async (orderNo) => {
-    const data = await purchaseCheckout({
-      orderNo: orderNo,
-      returnUrl: window.location.href,
-    });
-    if (data.data?.type === 'url' && data.data.checkout_url) {
-      window.open(data.data.checkout_url, '_blank');
-    } else {
-      toast.success(t('paymentSuccess'));
-      ref?.current.reset();
-    }
-  };
-
   return (
     <div>
       <ProList<API.OrderDetail, Record<string, unknown>>
@@ -63,14 +49,10 @@ export default function Page() {
                       >
                         {t('cancelOrder')}
                       </AiroButton>
-                      <AiroButton
+                      <AiroButton variant={'primary'} className={'ml-2'} asChild>
-                        variant={'primary'}
+                        <Link key='payment' href={`/payment?order_no=${item.order_no}`}>
-                        className={'ml-2'}
+                          {t('payment')}
-                        onClick={() => {
+                        </Link>
-                          handlePayment(item.order_no);
-                        }}
-                      >
-                        {t('payment')}
                       </AiroButton>
                     </>
                   ) : (

apps/user/app/(main)/(content)/(user)/payment/page.tsx

@@ -3,26 +3,18 @@
 import { Display } from '@/components/display';
 import StripePayment from '@/components/payment/stripe';
 import { SubscribeBilling } from '@/components/subscribe/billing';
-import { SubscribeDetail } from '@/components/subscribe/detail';
 import useGlobalStore from '@/config/use-global';
 import { queryOrderDetail } from '@/services/user/order';
 import { purchaseCheckout } from '@/services/user/portal';
 import { useQuery } from '@tanstack/react-query';
-import { Badge } from '@workspace/airo-ui/components/badge';
+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 {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from '@workspace/airo-ui/components/card';
 import { Separator } from '@workspace/airo-ui/components/separator';
-import { Icon } from '@workspace/airo-ui/custom-components/icon';
 import { formatDate } from '@workspace/airo-ui/utils';
 import { useCountDown } from 'ahooks';
 import { addMinutes, format } from 'date-fns';
 import { useTranslations } from 'next-intl';
+import Image from 'next/image';
 import Link from 'next/link';
 import { QRCodeCanvas } from 'qrcode.react';
 import { useEffect, useState } from 'react';
@@ -88,37 +80,130 @@ export default function Page() {
     );
 
   return (
-    <div className='grid gap-4 xl:grid-cols-2'>
+    <div className=''>
-      <Card className='order-2 xl:order-1'>
+      <Card className='border-none shadow-none sm:border sm:shadow'>
-        <CardHeader className='bg-muted/50 flex flex-row items-start'>
+        <CardContent className='grid gap-2 p-6 text-sm'>
-          <div className='grid gap-0.5'>
+          <div className='relative'>
-            <CardTitle className='flex flex-col text-lg'>
+            <div className={'absolute flex gap-3'}>
-              {t('orderNumber')}
+              <div
-              <span>{data?.orderNo}</span>
+                className={
-            </CardTitle>
+                  'flex items-center justify-between rounded-md border-2 border-[#225BA9] p-0.5'
-            <CardDescription>
+                }
-              {t('createdAt')}: {formatDate(data?.created_at)}
+              >
-            </CardDescription>
+                <Image
-          </div>
+                  src={data?.payment.icon || `/payment/balance.svg`}
-        </CardHeader>
+                  width={32}
-        <CardContent className='grid gap-3 p-6 text-sm'>
+                  height={32}
-          <div className='font-semibold'>{t('paymentMethod')}</div>
+                  alt={data?.payment.name}
-          <dl className='grid gap-3'>
+                />
-            <div className='flex items-center justify-between'>
+              </div>
-              <dt className='text-muted-foreground'>
+              <div className={'mt-1 text-sm font-medium text-[#666666]'}>
-                <Badge>{data?.payment.name || data?.payment.platform}</Badge>
+                {data?.payment.name || data?.payment.platform}
-              </dt>
+              </div>
             </div>
-          </dl>
-          <Separator />
 
+            {data?.status && [2, 5].includes(data?.status) && (
+              <div className='flex flex-col gap-4 sm:gap-8'>
+                <div className='flex justify-end gap-2'>
+                  <AiroButton variant={'primary'} asChild>
+                    <Link href='/dashboard'>{t('subscribeNow')}</Link>
+                  </AiroButton>
+                  <AiroButton variant='outline'>
+                    <Link href='/document'>{t('viewDocument')}</Link>
+                  </AiroButton>
+                </div>
+                <h3 className='text-xl font-bold tracking-tight text-[#666666]'>
+                  {t('paymentSuccess')}
+                </h3>
+              </div>
+            )}
+            {data?.status === 1 && payment?.type === 'url' && (
+              <div className='flex flex-col gap-4 sm:gap-8'>
+                <div className='flex justify-end gap-2'>
+                  <AiroButton
+                    variant={'primary'}
+                    onClick={() => {
+                      if (payment?.checkout_url) {
+                        window.location.href = payment?.checkout_url;
+                      }
+                    }}
+                  >
+                    {t('goToPayment')}
+                  </AiroButton>
+                  <AiroButton variant='outline'>
+                    <Link href='/subscribe'>{t('productList')}</Link>
+                  </AiroButton>
+                </div>
+                <div className={'flex items-center'}>
+                  <h3 className='text-xl font-bold tracking-tight text-[#666666]'>
+                    {t('waitingForPayment')}
+                  </h3>
+                  <p className='ml-3 flex items-center text-xl font-bold text-[#E22C2E]'>
+                    {countdownDisplay}
+                  </p>
+                </div>
+              </div>
+            )}
+
+            {data?.status === 1 && payment?.type === 'qr' && (
+              <div className='flex flex-col gap-4 sm:gap-8'>
+                <div className='flex justify-end gap-2'>
+                  <AiroButton asChild variant={'primary'}>
+                    <Link href='/subscribe'>{t('productList')}</Link>
+                  </AiroButton>
+                  <AiroButton asChild variant='outline'>
+                    <Link href='/order'>{t('orderList')}</Link>
+                  </AiroButton>
+                </div>
+                <h3 className='text-2xl font-bold tracking-tight'>{t('scanToPay')}</h3>
+                <p className='flex items-center text-3xl font-bold'>{countdownDisplay}</p>
+                <QRCodeCanvas
+                  value={payment?.checkout_url || ''}
+                  size={208}
+                  imageSettings={{
+                    src: `/payment/alipay_f2f.svg`,
+                    width: 24,
+                    height: 24,
+                    excavate: true,
+                  }}
+                />
+              </div>
+            )}
+
+            {data?.status === 1 && payment?.type === 'stripe' && (
+              <div className='flex flex-col items-center gap-4 text-center sm:gap-8'>
+                <h3 className='text-2xl font-bold tracking-tight'>{t('waitingForPayment')}</h3>
+                <p className='ml-3 flex items-center text-3xl font-bold'>{countdownDisplay}</p>
+                {payment.stripe && <StripePayment {...payment.stripe} />}
+              </div>
+            )}
+
+            {data?.status && [3, 4].includes(data?.status) && (
+              <div className='flex flex-col gap-4 sm:gap-8'>
+                <div className='flex justify-end gap-2'>
+                  <AiroButton variant={'primary'} asChild>
+                    <Link href='/subscribe'>{t('productList')}</Link>
+                  </AiroButton>
+                  <AiroButton asChild variant='outline'>
+                    <Link href='/order'>{t('orderList')}</Link>
+                  </AiroButton>
+                </div>
+                <h3 className='text-xl font-bold tracking-tight text-[#666666]'>
+                  {t('orderClosed')}
+                </h3>
+              </div>
+            )}
+          </div>
+          <Separator className='mb-3 mt-0 bg-[#225BA9] sm:mt-4' />
+          <div className={'mb-4'}>
+            <div className={'font-bold text-[#666]'}>{t('orderNumber')}</div>
+            <div className={'text-xs text-[#4D4D4D]'}>{data?.order_no}</div>
+          </div>
           {data?.type && [1, 2].includes(data.type) && (
-            <SubscribeDetail
+            <div>
-              subscribe={{
+              <div className={'font-normal text-[#225BA9]'}>名称</div>
-                ...data?.subscribe,
+              <div className={'font-semibold'}>{data?.subscribe?.name}</div>
-                quantity: data?.quantity,
+            </div>
-              }}
-            />
           )}
           {data?.type === 3 && (
             <>
@@ -151,7 +236,11 @@ export default function Page() {
               </ul>
             </>
           )}
-          <Separator />
+          <div>
+            <div className={'font-normal text-[#225BA9]'}>{t('createdAt')}</div>
+            <div className={'font-semibold'}>{formatDate(data?.created_at)}</div>
+          </div>
+          <Separator className='mb-3 mt-4 bg-[#225BA9]' />
           <SubscribeBilling
             order={{
               ...data,
@@ -160,101 +249,6 @@ export default function Page() {
           />
         </CardContent>
       </Card>
-      <Card className='order-1 flex flex-auto items-center justify-center xl:order-2'>
-        <CardContent className='py-16'>
-          {data?.status && [2, 5].includes(data?.status) && (
-            <div className='flex flex-col items-center gap-8 text-center'>
-              <h3 className='text-2xl font-bold tracking-tight'>{t('paymentSuccess')}</h3>
-              <Icon icon='mdi:success-circle-outline' className='text-7xl text-green-500' />
-              <div className='flex gap-4'>
-                <Button asChild>
-                  <Link href='/dashboard'>{t('subscribeNow')}</Link>
-                </Button>
-                <Button variant='outline'>
-                  <Link href='/document'>{t('viewDocument')}</Link>
-                </Button>
-              </div>
-            </div>
-          )}
-          {data?.status === 1 && payment?.type === 'url' && (
-            <div className='flex flex-col items-center gap-8 text-center'>
-              <h3 className='text-2xl font-bold tracking-tight'>{t('waitingForPayment')}</h3>
-              <p className='flex items-center text-3xl font-bold'>{countdownDisplay}</p>
-              <Icon icon='mdi:access-time' className='text-muted-foreground text-7xl' />
-              <div className='flex gap-4'>
-                <Button
-                  onClick={() => {
-                    if (payment?.checkout_url) {
-                      window.location.href = payment?.checkout_url;
-                    }
-                  }}
-                >
-                  {t('goToPayment')}
-                </Button>
-                <Button variant='outline'>
-                  <Link href='/subscribe'>{t('productList')}</Link>
-                </Button>
-              </div>
-            </div>
-          )}
-
-          {data?.status === 1 && payment?.type === 'qr' && (
-            <div className='flex flex-col items-center gap-8 text-center'>
-              <h3 className='text-2xl font-bold tracking-tight'>{t('scanToPay')}</h3>
-              <p className='flex items-center text-3xl font-bold'>{countdownDisplay}</p>
-              <QRCodeCanvas
-                value={payment?.checkout_url || ''}
-                size={208}
-                imageSettings={{
-                  src: `/payment/alipay_f2f.svg`,
-                  width: 24,
-                  height: 24,
-                  excavate: true,
-                }}
-              />
-              <div className='flex gap-4'>
-                <Button asChild>
-                  <Link href='/subscribe'>{t('productList')}</Link>
-                </Button>
-                <Button asChild variant='outline'>
-                  <Link href='/order'>{t('orderList')}</Link>
-                </Button>
-              </div>
-            </div>
-          )}
-
-          {data?.status === 1 && payment?.type === 'stripe' && (
-            <div className='flex flex-col items-center gap-8 text-center'>
-              <h3 className='text-2xl font-bold tracking-tight'>{t('waitingForPayment')}</h3>
-              <p className='flex items-center text-3xl font-bold'>{countdownDisplay}</p>
-              {payment.stripe && <StripePayment {...payment.stripe} />}
-              {/* <div className='flex gap-4'>
-                <Button asChild>
-                  <Link href='/subscribe'>{t('productList')}</Link>
-                </Button>
-                <Button asChild variant='outline'>
-                  <Link href='/order'>{t('orderList')}</Link>
-                </Button>
-              </div> */}
-            </div>
-          )}
-
-          {data?.status && [3, 4].includes(data?.status) && (
-            <div className='flex flex-col items-center gap-8 text-center'>
-              <h3 className='text-2xl font-bold tracking-tight'>{t('orderClosed')}</h3>
-              <Icon icon='mdi:cancel' className='text-7xl text-red-500' />
-              <div className='flex gap-4'>
-                <Button asChild>
-                  <Link href='/subscribe'>{t('productList')}</Link>
-                </Button>
-                <Button asChild variant='outline'>
-                  <Link href='/order'>{t('orderList')}</Link>
-                </Button>
-              </div>
-            </div>
-          )}
-        </CardContent>
-      </Card>
     </div>
   );
 }

apps/user/app/(main)/(content)/(user)/sidebar-left.tsx

@@ -22,7 +22,11 @@ export function SidebarLeft({ ...props }: React.ComponentProps<typeof Sidebar>)
   const pathname = usePathname();
   const { toggleSidebar } = useSidebar();
   return (
-    <Sidebar side='left' {...props} className={'border-0 bg-transparent md:bg-white'}>
+    <Sidebar
+      side='left'
+      {...props}
+      className={'border-0 bg-transparent pb-8 pt-4 shadow-none md:bg-white md:py-0 md:shadow-lg'}
+    >
       <div
         className={
           'relative ml-2.5 flex h-[calc(100dvh-10px-env(safe-area-inset-top))] flex-col rounded-[30px] bg-[#D9D9D9] px-4 md:ml-0 md:h-full md:rounded-none md:bg-white md:px-8'

apps/user/components/language-switch.tsx

@@ -1,16 +1,7 @@
 'use client';
 
 import SvgIcon from '@/components/SvgIcon';
-import { locales } from '@/config/constants';
 import { setLocale } from '@/utils/common';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@workspace/airo-ui/components/select';
-import { Icon } from '@workspace/airo-ui/custom-components/icon';
 import { getCountry } from '@workspace/airo-ui/utils';
 import { useLocale } from 'next-intl';
 import { useRouter } from 'next/navigation';
@@ -52,7 +43,23 @@ export default function LanguageSwitch() {
   };
 
   return (
-    <Select defaultValue={locale} onValueChange={handleLanguageChange}>
+    <div>
+      <div
+        className='flex cursor-pointer items-center'
+        onClick={() => {
+          console.log(locale, 111);
+          if (locale === 'en-US') {
+            handleLanguageChange('zh-CN');
+          } else {
+            handleLanguageChange('en-US');
+          }
+        }}
+      >
+        <SvgIcon name={'language'} />
+        <span className='sr-only'>{languages[locale as keyof typeof languages]}</span>
+      </div>
+    </div>
+    /*<Select defaultValue={locale} onValueChange={handleLanguageChange}>
       <SelectTrigger className='hover:bg-accent hover:text-accent-foreground w-auto rounded-full border-none bg-transparent p-1 shadow-none focus:ring-0 [&>svg]:hidden'>
         <SelectValue>
           <div className='flex items-center'>
@@ -71,6 +78,6 @@ export default function LanguageSwitch() {
           </SelectItem>
         ))}
       </SelectContent>
-    </Select>
+    </Select>*/
   );
 }

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

@@ -1,18 +1,9 @@
 import { getSubscription } from '@/services/user/portal';
 import { useQuery } from '@tanstack/react-query';
 import { Dialog, DialogContent, DialogTitle } from '@workspace/airo-ui/components/dialog';
-import { ScrollArea } from '@workspace/airo-ui/components/scroll-area';
 import { Tabs, TabsList, TabsTrigger } from '@workspace/airo-ui/components/tabs';
 import { unitConversion } from '@workspace/airo-ui/utils';
-import {
+import { forwardRef, useImperativeHandle, useMemo, useRef, useState } from 'react';
-  forwardRef,
-  useCallback,
-  useEffect,
-  useImperativeHandle,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
 
 import { TabContent } from './TabContent';
 import { ProcessedPlanData } from './types';
@@ -69,9 +60,11 @@ const PriceDisplay = ({ plan }: { plan: ProcessedPlanData }) => {
           {t('perYear')}
         </span>
       </div>
-      {plan.origin_price && (
+      <div className={'h-[15px]'}>
-        <p className='text-left text-[10px] font-normal text-black'>{t('yearlyDiscount')}</p>
+        {plan.origin_price && (
-      )}
+          <p className='text-left text-[10px] font-normal text-black'>{t('yearlyDiscount')}</p>
+        )}
+      </div>
     </div>
   );
 };
@@ -161,7 +154,7 @@ const PlanCard = forwardRef<
     onSubscribe?: (plan: ProcessedPlanData) => void;
     isFirstCard?: boolean;
   }
->(({ plan, onSubscribe, isFirstCard = false }, ref) => {
+>(({ plan, onSubscribe }, ref) => {
   const { user } = useGlobalStore();
   const { openLoginDialog } = useLoginDialog();
   const t = useTranslations('components.offerDialog');
@@ -186,7 +179,7 @@ const PlanCard = forwardRef<
   return (
     <div
       ref={ref}
-      className='relative w-full max-w-[345px] cursor-pointer rounded-[20px] border border-[#D9D9D9] bg-white p-8 transition-all duration-300 hover:shadow-lg sm:p-10'
+      className='relative w-full min-w-[300px] cursor-pointer rounded-[20px] border border-[#D9D9D9] bg-white p-8 transition-all duration-300 hover:shadow-lg sm:w-[345px] sm:p-10'
     >
       {/* 套餐名称 */}
       <h3 className='mb-4 text-left text-xl font-normal sm:mb-6 sm:text-base'>{plan.name}</h3>
@@ -230,7 +223,6 @@ export const PlanList = ({
   onRetry,
   emptyMessage,
   onSubscribe,
-  firstPlanCardRef, // 新增参数
 }: {
   plans: ProcessedPlanData[];
   tabValue: string;
@@ -239,24 +231,24 @@ export const PlanList = ({
   onRetry: () => void;
   emptyMessage: string;
   onSubscribe?: (plan: ProcessedPlanData) => void;
-  firstPlanCardRef?: React.RefObject<HTMLDivElement | null>;
 }) => {
   if (isLoading) return <LoadingState />;
   if (error) return <ErrorState onRetry={onRetry} />;
   if (plans.length === 0) return <EmptyState message={emptyMessage} />;
 
   return (
-    <div className='grid grid-cols-1 justify-items-center gap-4 sm:grid-cols-2 sm:gap-6 lg:grid-cols-3 lg:gap-8'>
+    <div className={'flex justify-center'}>
-      {plans.map((plan, index) => (
+      <div className='flex flex-col flex-wrap gap-6 sm:flex-row'>
-        <PlanCard
+        {plans.map((plan, index) => (
-          key={`${plan.id}-${plan.name}`}
+          <PlanCard
-          tabValue={tabValue}
+            key={`${plan.id}-${plan.name}`}
-          plan={plan}
+            tabValue={tabValue}
-          onSubscribe={onSubscribe}
+            plan={plan}
-          isFirstCard={index === 0} // 标识第一项
+            onSubscribe={onSubscribe}
-          ref={index === 0 ? firstPlanCardRef : undefined} // 第一项使用ref
+            isFirstCard={index === 0} // 标识第一项
-        />
+          />
-      ))}
+        ))}
+      </div>
     </div>
   );
 };
@@ -270,40 +262,7 @@ const OfferDialog = forwardRef<OfferDialogRef>((props, ref) => {
   const t = useTranslations('components.offerDialog');
   const [open, setOpen] = useState(false);
   const [tabValue, setTabValue] = useState('year');
-  const [selectedPlan, setSelectedPlan] = useState<ProcessedPlanData | null>(null);
-  const [scrollAreaHeight, setScrollAreaHeight] = useState(450);
-  const [planCardHeight, setPlanCardHeight] = useState(600);
   const dialogRef = useRef<HTMLDivElement>(null);
-  const scrollAreaRef = useRef<HTMLDivElement>(null);
-  const firstPlanCardRef = useRef<HTMLDivElement>(null);
-
-  // 获取PlanCard高度
-  const getPlanCardHeight = useCallback(() => {
-    if (firstPlanCardRef.current) {
-      return firstPlanCardRef.current.offsetHeight;
-    }
-    return 600; // 默认高度
-  }, []);
-
-  // 计算 ScrollArea 高度
-  const calculateScrollAreaHeight = useCallback(() => {
-    if (dialogRef.current && scrollAreaRef.current) {
-      const isMobile = window.innerWidth < 768;
-
-      if (isMobile) {
-        // 移动端：使用动态计算
-        const dialogHeight = dialogRef.current.offsetHeight;
-        const scrollAreaTop = scrollAreaRef.current.offsetTop;
-        const calculatedHeight = dialogHeight - scrollAreaTop;
-        setScrollAreaHeight(calculatedHeight);
-      } else {
-        // PC端：使用PlanCard第一项高度
-        const cardHeight = getPlanCardHeight();
-        setScrollAreaHeight(cardHeight);
-      }
-    }
-  }, [getPlanCardHeight]);
-
   // 使用 useQuery 来管理请求
   const {
     data = [],
@@ -325,40 +284,20 @@ const OfferDialog = forwardRef<OfferDialogRef>((props, ref) => {
         return [] as API.Subscribe[];
       }
     },
-    enabled: false, // 初始不执行，手动控制
+    enabled: true, // 初始不执行，手动控制
     retry: 1, // 失败时重试1次
   });
 
-  // 监听对话框打开
-  useEffect(() => {
-    if (open) {
-      // 等待 DOM 渲染完成
-      const timer = setTimeout(calculateScrollAreaHeight, 0);
-      return () => clearTimeout(timer);
-    }
-  }, [open, calculateScrollAreaHeight]);
-
-  // 监听窗口大小变化
-  useEffect(() => {
-    if (open) {
-      refetch(); // 对话框打开时重新获取数据
-      const handleResize = () => {
-        calculateScrollAreaHeight();
-      };
-
-      window.addEventListener('resize', handleResize);
-      return () => window.removeEventListener('resize', handleResize);
-    }
-  }, [open, calculateScrollAreaHeight]);
-
   useImperativeHandle(ref, () => ({
-    show: () => setOpen(true),
+    show: () => {
+      refetch();
+      setOpen(true);
+    },
     hide: () => setOpen(false),
   }));
   const PurchaseRef = useRef<{ show: (subscribe: API.Subscribe) => void; hide: () => void }>(null);
   // 处理订阅点击
   const handleSubscribe = (plan: ProcessedPlanData) => {
-    setSelectedPlan(plan);
     // 这里可以添加订阅逻辑，比如跳转到支付页面或显示确认对话框
     PurchaseRef.current.show(plan, tabValue);
   };
@@ -399,7 +338,7 @@ const OfferDialog = forwardRef<OfferDialogRef>((props, ref) => {
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogContent
         ref={dialogRef}
-        className='rounded-0 !container h-full w-full gap-0 px-8 py-8 sm:h-auto sm:!rounded-[32px] sm:px-12 sm:py-12 md:w-[1000px]'
+        className='rounded-0 h-full gap-0 px-8 py-8 sm:max-h-[95%] sm:!rounded-[32px] sm:px-8 sm:py-12 md:max-w-full'
       >
         <DialogTitle className={'sr-only'}></DialogTitle>
         <div className={'text-4xl font-bold text-[#0F2C53] md:mb-4 md:text-center md:text-5xl'}>
@@ -444,22 +383,15 @@ const OfferDialog = forwardRef<OfferDialogRef>((props, ref) => {
               </TabsTrigger>
             </TabsList>
           </Tabs>
-          <ScrollArea
+          <TabContent
-            ref={scrollAreaRef}
+            tabValue={tabValue}
-            className='overflow-y-auto'
+            yearlyPlans={yearlyPlans}
-            style={{ height: `calc(${scrollAreaHeight}px - 32px)` }}
+            monthlyPlans={monthlyPlans}
-          >
+            isLoading={isLoading}
-            <TabContent
+            error={error}
-              tabValue={tabValue}
+            onRetry={refetch}
-              yearlyPlans={yearlyPlans}
+            onSubscribe={handleSubscribe}
-              monthlyPlans={monthlyPlans}
+          />
-              isLoading={isLoading}
-              error={error}
-              onRetry={refetch}
-              onSubscribe={handleSubscribe}
-              firstPlanCardRef={firstPlanCardRef}
-            />
-          </ScrollArea>
         </div>
         <Purchase ref={PurchaseRef} />
       </DialogContent>

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'>
+        <div className='pl-4 text-4xl font-bold text-[#0F2C53] sm:mb-8 sm:pl-0 sm:text-center sm:text-4xl'>
-          <Card className='border-transparent shadow-none md:border-inherit md:shadow'>
+          {t('renewSubscription')}
-            <CardContent className='grid gap-3 p-0 text-sm md:p-6'>
+        </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>
+              <Separator className='mb-3 mt-4 bg-[#225BA9]' />
-          </Card>
+              <PaymentMethods
-          <div className='flex flex-col justify-between text-sm'>
+                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>

apps/user/components/user-nav.tsx

@@ -28,21 +28,23 @@ export function UserNav({ from = '' }: { from?: string }) {
       <DropdownMenu>
         <DropdownMenuTrigger asChild>
           {from === 'profile' ? (
-            <div className='mb-3 mt-4 flex cursor-pointer items-center gap-2 rounded-full bg-[#EAEAEA] p-[3px] pr-6'>
+            <div className={'pb-3 pt-4'}>
-              <Avatar className='h-[34px] w-[34px]'>
+              <div className='flex cursor-pointer items-center gap-2 rounded-full bg-[#EAEAEA] p-[3px] pr-6'>
-                <AvatarImage
+                <Avatar className='h-[34px] w-[34px]'>
-                  alt={user?.avatar ?? ''}
+                  <AvatarImage
-                  src={user?.avatar ?? ''}
+                    alt={user?.avatar ?? ''}
-                  className='object-cover'
+                    src={user?.avatar ?? ''}
-                />
+                    className='object-cover'
-                <AvatarFallback className='to-primary text-background bg-[#0F2C53] bg-gradient-to-br text-[28px] font-bold md:text-[27px]'>
+                  />
-                  {user?.auth_methods?.[0]?.auth_identifier.toUpperCase().charAt(0)}
+                  <AvatarFallback className='to-primary text-background bg-[#0F2C53] bg-gradient-to-br text-[28px] font-bold md:text-[27px]'>
-                </AvatarFallback>
+                    {user?.auth_methods?.[0]?.auth_identifier.toUpperCase().charAt(0)}
-              </Avatar>
+                  </AvatarFallback>
-              <div className='flex flex-1 items-center justify-between text-xs md:text-sm'>
+                </Avatar>
-                {user?.auth_methods?.[0]?.auth_identifier.split('@')[0]}
+                <div className='flex flex-1 items-center justify-between text-xs md:text-sm'>
+                  {user?.auth_methods?.[0]?.auth_identifier.split('@')[0]}
+                </div>
+                <Icon icon='lucide:ellipsis' className='text-muted-foreground !size-6' />
               </div>
-              <Icon icon='lucide:ellipsis' className='text-muted-foreground !size-6' />
             </div>
           ) : (
             <Avatar className='h-14 w-14 cursor-pointer md:h-16 md:w-16'>

apps/user/config/navs.ts

@@ -42,6 +42,13 @@ export const navs = [
     hidden: true,
     image: 'profile',
   },
+  {
+    url: '/payment',
+    icon: 'uil:megaphone',
+    title: 'payment',
+    hidden: true,
+    image: 'profile',
+  },
   {
     url: '/ticket',
     icon: 'uil:message',

packages/airo-ui/src/components/sheet.tsx

@@ -51,14 +51,16 @@ const sheetVariants = cva(
 
 interface SheetContentProps
   extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
-    VariantProps<typeof sheetVariants> {}
+    VariantProps<typeof sheetVariants> {
+  overlayClassName?: string;
+}
 
 const SheetContent = React.forwardRef<
   React.ElementRef<typeof SheetPrimitive.Content>,
   SheetContentProps
->(({ side = 'right', className, children, ...props }, ref) => (
+>(({ side = 'right', className, overlayClassName, children, ...props }, ref) => (
   <SheetPortal>
-    <SheetOverlay />
+    <SheetOverlay className={overlayClassName} />
     <SheetPrimitive.Content ref={ref} className={cn(sheetVariants({ side }), className)} {...props}>
       <SheetPrimitive.Close className='ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none'>
         <X className='h-4 w-4' />

packages/airo-ui/src/components/sidebar.tsx

@@ -209,6 +209,7 @@ const Sidebar = React.forwardRef<
               'bg-sidebar text-sidebar-foreground w-[--sidebar-width] p-0 [&>button]:hidden',
               className,
             )}
+            overlayClassName={'bg-white/30 backdrop-blur-sm'}
             style={
               {
                 '--sidebar-width': SIDEBAR_WIDTH_MOBILE,