feat: 修改样式

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 {
-  forwardRef,
-  useCallback,
-  useEffect,
-  useImperativeHandle,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
+import { forwardRef, 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 && (
-        <p className='text-left text-[10px] font-normal text-black'>{t('yearlyDiscount')}</p>
-      )}
+      <div className={'h-[15px]'}>
+        {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'>
-      {plans.map((plan, index) => (
-        <PlanCard
-          key={`${plan.id}-${plan.name}`}
-          tabValue={tabValue}
-          plan={plan}
-          onSubscribe={onSubscribe}
-          isFirstCard={index === 0} // 标识第一项
-          ref={index === 0 ? firstPlanCardRef : undefined} // 第一项使用ref
-        />
-      ))}
+    <div className={'flex justify-center'}>
+      <div className='flex flex-col flex-wrap gap-6 sm:flex-row'>
+        {plans.map((plan, index) => (
+          <PlanCard
+            key={`${plan.id}-${plan.name}`}
+            tabValue={tabValue}
+            plan={plan}
+            onSubscribe={onSubscribe}
+            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
-            ref={scrollAreaRef}
-            className='overflow-y-auto'
-            style={{ height: `calc(${scrollAreaHeight}px - 32px)` }}
-          >
-            <TabContent
-              tabValue={tabValue}
-              yearlyPlans={yearlyPlans}
-              monthlyPlans={monthlyPlans}
-              isLoading={isLoading}
-              error={error}
-              onRetry={refetch}
-              onSubscribe={handleSubscribe}
-              firstPlanCardRef={firstPlanCardRef}
-            />
-          </ScrollArea>
+          <TabContent
+            tabValue={tabValue}
+            yearlyPlans={yearlyPlans}
+            monthlyPlans={monthlyPlans}
+            isLoading={isLoading}
+            error={error}
+            onRetry={refetch}
+            onSubscribe={handleSubscribe}
+          />
         </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'>
-          <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>

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'>
-              <Avatar className='h-[34px] w-[34px]'>
-                <AvatarImage
-                  alt={user?.avatar ?? ''}
-                  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>
-              </Avatar>
-              <div className='flex flex-1 items-center justify-between text-xs md:text-sm'>
-                {user?.auth_methods?.[0]?.auth_identifier.split('@')[0]}
+            <div className={'pb-3 pt-4'}>
+              <div className='flex cursor-pointer items-center gap-2 rounded-full bg-[#EAEAEA] p-[3px] pr-6'>
+                <Avatar className='h-[34px] w-[34px]'>
+                  <AvatarImage
+                    alt={user?.avatar ?? ''}
+                    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>
+                </Avatar>
+                <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'>