fix: 修改布局

apps/user/app/auth/EmailAuthDialog/EmailAuthDialog.tsx

@@ -21,7 +21,7 @@ const EmailAuthDialog = forwardRef<EmailAuthDialogRef>((props, ref) => {
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogContent
         className={
-          'rounded-0 h-full w-full px-12 py-[4.5rem] md:h-auto md:w-[496px] md:!rounded-[50px]'
+          'rounded-0 h-full w-full px-12 py-[4.5rem] sm:h-auto sm:w-[496px] sm:!rounded-[50px]'
         }
         closeIcon={<Image src={CloseSvg} alt={'close'} />}
         closeClassName={

apps/user/components/main/FooterCopyright.tsx

@@ -11,13 +11,13 @@ export default function FooterCopyright() {
   const t = useTranslations('auth');
 
   return (
-    <footer className={'fixed bottom-6 z-50 w-full'}>
-      <div className={'container relative flex justify-center text-right md:block'}>
+    <footer className={'fixed bottom-6 z-50 w-full text-xs sm:text-lg'}>
+      <div className={'container relative flex items-center justify-center text-right sm:block'}>
         <Image
           src={'./logo.png'}
           height={37}
           width={28}
-          className={`h-[37px] w-[28px] flex-shrink-0 object-contain md:absolute md:left-1/2 md:-translate-x-1/2`}
+          className={`scale-85 h-[37px] w-[28px] flex-shrink-0 object-contain sm:absolute sm:-translate-x-1/2 sm:scale-100 md:left-1/2`}
           alt='logo'
           unoptimized
         ></Image>

apps/user/components/main/HomeContent.tsx

@@ -10,7 +10,7 @@ export default function HomeContent() {
   return (
     <div className='flex min-h-[calc(100vh-73px)] flex-col items-center justify-center pt-8'>
       {/* 大标题 */}
-      <h1 className='mb-10 text-5xl font-bold !leading-tight text-white md:text-6xl'>
+      <h1 className='mb-6 self-start text-4xl font-bold !leading-tight text-white sm:mb-10 sm:self-center sm:text-6xl'>
         连接
         <br />
         任何时间
@@ -18,19 +18,19 @@ export default function HomeContent() {
         任何地点
       </h1>
       {/* 副标题 */}
-      <div className='mb-16 text-left text-[17px] leading-normal text-white md:text-center md:font-bold'>
-        <p className={'w-[255px] md:w-full'}>
+      <div className='mb-16 text-left text-[17px] leading-normal text-white sm:text-center sm:font-bold'>
+        <p className={'w-[255px] sm:w-full'}>
           <span className='mr-2 text-white'>
             Airo<sup className='text-[8px]'>™</sup>Port
           </span>
           <span>提供极稳，极简，极速的网络服务</span>
         </p>
-        <p className={'mt-1 w-[255px] md:mt-0 md:w-full'}>获取订阅地址，开始顶级的私密网络体验</p>
+        <p className={'mt-1 w-[255px] sm:mt-0 sm:w-full'}>获取订阅地址，开始顶级的私密网络体验</p>
       </div>
       {/* 按钮 */}
       <Button
         onClick={() => dialogRef.current?.show()}
-        className='mb-8 h-[64px] w-[219px] rounded-full border-2 border-white bg-white/10 text-2xl font-bold text-white transition hover:bg-white/20'
+        className='mb-8 h-auto rounded-full border-2 border-white bg-white/10 px-8 py-2 text-lg font-bold text-white transition hover:bg-white/20 sm:py-4 sm:text-2xl'
       >
         查看订阅套餐
       </Button>

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

@@ -6,7 +6,16 @@ import { ScrollArea } from '@workspace/ui/components/scroll-area';
 import { Tabs, TabsList, TabsTrigger } from '@workspace/ui/components/tabs';
 import { unitConversion } from '@workspace/ui/utils';
 import Image from 'next/image';
-import { forwardRef, useEffect, useImperativeHandle, useState } from 'react';
+import {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+
 // 定义数据类型
 interface SubscriptionData {
   id: string;
@@ -14,6 +23,11 @@ interface SubscriptionData {
   price: number;
   originalPrice: number;
   duration: string;
+  unit_price: number;
+  discount: Array<{
+    quantity: number;
+    discount: number;
+  }>;
   features: {
     traffic: string;
     duration: string;
@@ -25,34 +39,44 @@ interface SubscriptionData {
   };
 }
 
-// 计算折扣价格的函数
-const calculateDiscountPrice = (unitPrice: number, discountPercent: number) => {
-  // 折扣百分比转换为小数 (80 -> 0.8)
-  const discountRate = discountPercent / 100;
-  // 计算折扣后的价格
-  const discountedPrice = unitPrice * discountRate;
-  // 使用 unitConversion 避免浮点数精度问题
-  return unitConversion('dollarsToCents', discountedPrice);
-};
+// 处理后的套餐数据类型
+interface ProcessedPlanData extends SubscriptionData {
+  origin_price: string;
+  discount_price: string;
+}
 
-// 计算原价（未折扣价格）
-const calculateOriginalPrice = (unitPrice: number, discountPercent: number) => {
-  // 原价就是 unitPrice
-  return unitConversion('dollarsToCents', unitPrice);
-};
+// 加载状态组件
+const LoadingState = () => (
+  <div className='py-12 text-center'>
+    <div className='mx-auto h-12 w-12 animate-spin rounded-full border-b-2 border-[#0F2C53]'></div>
+    <p className='mt-4 text-gray-600'>加载中...</p>
+  </div>
+);
 
-// 套餐卡片组件
-const PlanCard = ({ plan }: { plan: SubscriptionData }) => {
-  return (
-    <div
-      className={`relative w-full max-w-[345px] cursor-pointer rounded-[20px] border border-[#D9D9D9] bg-white p-4 transition-all duration-300 sm:p-6 md:p-8`}
+// 错误状态组件
+const ErrorState = ({ onRetry }: { onRetry: () => void }) => (
+  <div className='py-12 text-center'>
+    <p className='text-lg text-red-500'>加载失败，请重试</p>
+    <button
+      onClick={onRetry}
+      className='mt-4 rounded-lg bg-[#0F2C53] px-6 py-2 text-white transition-colors hover:bg-[#0A2C47]'
     >
-      {/* 套餐名称 */}
-      <h3 className='mb-4 text-left text-sm font-normal sm:mb-6 sm:text-base'>{plan.name}</h3>
+      重新加载
+    </button>
+  </div>
+);
 
-      {/* 价格区域 */}
-      <div className='mb-6 sm:mb-8'>
-        <div className='mb-2 flex items-baseline gap-2'>
+// 空状态组件
+const EmptyState = ({ message }: { message: string }) => (
+  <div className='py-12 text-center'>
+    <p className='text-lg text-gray-500'>{message}</p>
+  </div>
+);
+
+// 价格显示组件
+const PriceDisplay = ({ plan }: { plan: ProcessedPlanData }) => (
+  <div className='mb-4 sm:mb-8'>
+    <div className='mb-1 flex items-baseline gap-2'>
       {plan.origin_price && (
         <span className='text-lg font-bold leading-[1.125em] text-[#666666] line-through sm:text-xl md:text-[24px]'>
           ${plan.origin_price}
@@ -61,83 +85,151 @@ const PlanCard = ({ plan }: { plan: SubscriptionData }) => {
       <span className='text-lg font-bold leading-[1.125em] text-[#091B33] sm:text-xl md:text-[24px]'>
         ${plan.discount_price}
       </span>
-          <span className='text-sm font-normal leading-[1.8em] text-[#4D4D4D] sm:text-[15px]'>
-            /年
-          </span>
+      <span className='text-sm font-normal leading-[1.8em] text-[#4D4D4D] sm:text-[15px]'>/年</span>
     </div>
+    {plan.origin_price && (
       <p className='text-left text-[10px] font-normal text-black'>年付享受8折优惠</p>
+    )}
   </div>
+);
 
-      {/* 订阅按钮 */}
+// 订阅按钮组件
+const SubscribeButton = ({ onClick }: { onClick?: () => void }) => (
   <button
-        className={`h-8 w-full rounded-full bg-[#0F2C53] text-xs font-medium leading-[1.9285714285714286em] text-white shadow-md transition-all duration-300 hover:bg-[#0A2C47] sm:h-10 sm:text-sm md:h-[40px] md:text-[14px]`}
+    onClick={onClick}
+    className='h-10 w-full rounded-full bg-[#0F2C53] text-sm font-medium text-white shadow-md transition-all duration-300 hover:bg-[#0A2C47] sm:h-10 sm:text-sm md:h-[40px] md:text-[14px]'
   >
     订阅
   </button>
+);
 
-      {/* 功能列表 */}
-      <div className='mt-6 space-y-0 sm:mt-8'>
-        <div className='flex items-start justify-between py-1'>
-          <span className='text-xs font-light leading-[1.8461538461538463em] text-black sm:text-[13px]'>
-            可用流量：
-          </span>
-          <span className='text-right text-xs font-light leading-[1.8461538461538463em] text-black sm:text-[13px]'>
-            1
-          </span>
-        </div>
-        <div className='flex items-start justify-between py-1'>
-          <span className='text-xs font-light leading-[1.8461538461538463em] text-black sm:text-[13px]'>
-            套餐时长：
-          </span>
-          <span className='text-right text-xs font-light leading-[1.8461538461538463em] text-black sm:text-[13px]'>
-            1
-          </span>
-        </div>
-        <div className='flex items-start justify-between py-1'>
-          <span className='text-xs font-light leading-[1.8461538461538463em] text-black sm:text-[13px]'>
-            在线IP：
-          </span>
-          <span className='text-right text-xs font-light leading-[1.8461538461538463em] text-black sm:text-[13px]'>
-            2
-          </span>
-        </div>
-        <div className='flex items-start justify-between py-1'>
-          <span className='text-xs font-light leading-[1.8461538461538463em] text-black sm:text-[13px]'>
-            在线连接数：
-          </span>
-          <span className='text-right text-xs font-light leading-[1.8461538461538463em] text-black sm:text-[13px]'>
-            3
-          </span>
-        </div>
-        <div className='flex items-start justify-between py-1'>
-          <span className='text-xs font-light leading-[1.8461538461538463em] text-black sm:text-[13px]'>
-            峰值带宽：
-          </span>
-          <span className='text-right text-xs font-light leading-[1.8461538461538463em] text-black sm:text-[13px]'>
-            2
-          </span>
-        </div>
-        <div className='flex items-start justify-between py-1'>
-          <span className='text-xs font-light leading-[1.8461538461538463em] text-black sm:text-[13px]'>
-            可用节点：
-          </span>
-          <span className='text-right text-xs font-light leading-[1.8461538461538463em] text-black sm:text-[13px]'>
-            11
-          </span>
-        </div>
-        <div className='flex items-start justify-between py-1'>
-          <span className='text-xs font-light leading-[1.8461538461538463em] text-black sm:text-[13px]'>
-            网络稳定指数:
-          </span>
+// 星级评分组件
+const StarRating = ({ rating, maxRating = 5 }: { rating: number; maxRating?: number }) => (
   <div className='text-right text-xs font-light leading-[1.8461538461538463em] text-black sm:text-[13px]'>
-            {Array.from({ length: 4 }, (_, i) => (
+    {Array.from({ length: Math.min(rating, maxRating) }, (_, i) => (
       <span key={i} className='text-black'>
         ✭
       </span>
     ))}
   </div>
+);
+
+// 功能列表组件
+const FeatureList = ({ plan }: { plan: ProcessedPlanData }) => {
+  const features = [
+    { label: '可用流量', value: plan.features?.traffic || '1' },
+    { label: '套餐时长', value: plan.features?.duration || '1' },
+    { label: '在线IP', value: plan.features?.onlineIPs || '2' },
+    { label: '在线连接数', value: plan.features?.connections || '3' },
+    { label: '峰值带宽', value: plan.features?.bandwidth || '2' },
+    { label: '可用节点', value: plan.features?.nodes || '11' },
+  ];
+
+  return (
+    <div className='mt-6 space-y-0 sm:mt-8'>
+      <ul className='space-y-1'>
+        {features.map((feature) => (
+          <li key={feature.label} className='flex items-start justify-between py-1'>
+            <span className='text-xs font-light leading-[1.8461538461538463em] text-black sm:text-[13px]'>
+              {feature.label}：
+            </span>
+            <span className='text-right text-xs font-light leading-[1.8461538461538463em] text-black sm:text-[13px]'>
+              {feature.value}
+            </span>
+          </li>
+        ))}
+        <li className='flex items-start justify-between py-1'>
+          <span className='text-xs font-light leading-[1.8461538461538463em] text-black sm:text-[13px]'>
+            网络稳定指数:
+          </span>
+          <StarRating rating={plan.features?.stability || 4} />
+        </li>
+      </ul>
     </div>
+  );
+};
+
+// 套餐卡片组件
+const PlanCard = ({
+  plan,
+  onSubscribe,
+  isFirstCard = false, // 新增参数标识是否为第一项
+}: {
+  plan: ProcessedPlanData;
+  tabValue: string;
+  onSubscribe?: (plan: ProcessedPlanData) => void;
+  isFirstCard?: boolean;
+}) => {
+  const cardRef = useRef<HTMLDivElement>(null);
+
+  // 如果是第一项，将ref传递给父组件
+  useEffect(() => {
+    if (isFirstCard && cardRef.current) {
+      // 可以通过回调函数将高度传递给父组件
+      // 或者使用ref转发
+    }
+  }, [isFirstCard]);
+
+  const handleSubscribe = () => {
+    onSubscribe?.(plan);
+  };
+
+  return (
+    <div
+      ref={isFirstCard ? cardRef : undefined}
+      className='relative w-full max-w-[345px] cursor-pointer rounded-[20px] border border-[#D9D9D9] bg-white p-4 transition-all duration-300 hover:shadow-lg sm:p-6 md:p-8'
+    >
+      {/* 套餐名称 */}
+      <h3 className='mb-4 text-left text-sm font-normal sm:mb-6 sm:text-base'>{plan.name}</h3>
+
+      {/* 价格区域 */}
+      <PriceDisplay plan={plan} />
+
+      {/* 订阅按钮 */}
+      <SubscribeButton onClick={handleSubscribe} />
+
+      {/* 功能列表 */}
+      <FeatureList plan={plan} />
     </div>
+  );
+};
+
+// 套餐列表组件
+const PlanList = ({
+  plans,
+  tabValue,
+  isLoading,
+  error,
+  onRetry,
+  emptyMessage,
+  onSubscribe,
+  firstPlanCardRef, // 新增参数
+}: {
+  plans: ProcessedPlanData[];
+  tabValue: string;
+  isLoading: boolean;
+  error: any;
+  onRetry: () => void;
+  emptyMessage: string;
+  onSubscribe?: (plan: ProcessedPlanData) => void;
+  firstPlanCardRef?: React.RefObject<HTMLDivElement>;
+}) => {
+  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>
   );
 };
@@ -149,6 +241,40 @@ export interface OfferDialogRef {
 
 const OfferDialog = forwardRef<OfferDialogRef>((props, ref) => {
   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 {
@@ -175,70 +301,101 @@ const OfferDialog = forwardRef<OfferDialogRef>((props, ref) => {
     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, refetch]);
+  }, [open, calculateScrollAreaHeight]);
 
   useImperativeHandle(ref, () => ({
     show: () => setOpen(true),
     hide: () => setOpen(false),
   }));
 
-  // 按类型分组数据
-  const yearlyPlans = data.map((item) => {
-    const discountItem = item.discount.find((v) => v.quantity === 12);
+  // 处理订阅点击
+  const handleSubscribe = (plan: ProcessedPlanData) => {
+    setSelectedPlan(plan);
+    console.log('用户选择了套餐:', plan);
+    // 这里可以添加订阅逻辑，比如跳转到支付页面或显示确认对话框
+  };
+
+  // 处理套餐数据的工具函数
+  const processPlanData = (item: SubscriptionData, isYearly: boolean): ProcessedPlanData => {
+    if (isYearly) {
+      const discountItem = item.discount?.find((v) => v.quantity === 12);
       return {
         ...item,
-      origin_price: unitConversion('centsToDollars', item.unit_price * 12), // 原价
+        origin_price: unitConversion('centsToDollars', item.unit_price * 12).toString(), // 原价
         discount_price: unitConversion(
           'centsToDollars',
-        item.unit_price * (discountItem.discount / 100) * 12,
-      ), // 优惠价格
+          item.unit_price * ((discountItem?.discount || 100) / 100) * 12,
+        ).toString(), // 优惠价格
       };
-  });
-  const monthlyPlans = data.map((item) => {
+    } else {
       return {
         ...item,
-      origin_price: '', // 原价
-      discount_price: unitConversion('centsToDollars', item.unit_price), // 优惠价格
+        origin_price: '', // 月付没有原价
+        discount_price: unitConversion('centsToDollars', item.unit_price).toString(), // 月付价格
       };
-  });
-  const [tabValue, setTabValue] = useState('year');
+    }
+  };
+
+  // 使用 useMemo 优化数据处理性能
+  const yearlyPlans: ProcessedPlanData[] = useMemo(
+    () => data.map((item) => processPlanData(item, true)),
+    [data],
+  );
+
+  const monthlyPlans: ProcessedPlanData[] = useMemo(
+    () => data.map((item) => processPlanData(item, false)),
+    [data],
+  );
 
   return (
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogContent
-        className={
-          'rounded-0 !container h-full w-full px-8 py-8 md:h-auto md:w-[1000px] md:!rounded-[32px] md:px-12 md:py-12'
-        }
+        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]'
         closeIcon={<Image src={CloseSvg} alt={'close'} />}
         closeClassName={
           'right-6 top-6 font-bold text-black opacity-100 focus:ring-0 focus:ring-offset-0'
         }
       >
         <DialogTitle className={''}>
-          <div className={'mb-4 text-center text-4xl font-bold text-[#0F2C53] md:text-5xl'}>
+          <div className={'text-4xl font-bold text-[#0F2C53] md:mb-4 md:text-center md:text-5xl'}>
             选择套餐
           </div>
-          <div className={'mb-8 text-center text-lg font-medium text-[#666666]'}>
+          <div className={'text-lg font-medium text-[#666666] md:text-center'}>
             选择最适合您的服务套餐
           </div>
         </DialogTitle>
         <div>
-          <div className={'mt-8'}>
           <Tabs
             defaultValue='year'
-              className={'text-center'}
+            className={'mt-8 text-center md:mt-16'}
             value={tabValue}
             onValueChange={setTabValue}
           >
-              <TabsList className='mb-8 h-[74px] flex-wrap rounded-full bg-[#EAEAEA] p-2.5'>
+            <TabsList className='mb-8 h-[74px] flex-wrap rounded-full bg-[#EAEAEA] p-2.5 md:mb-16'>
               <TabsTrigger
                 className={
-                    'rounded-full px-12 py-3.5 text-xl data-[state=active]:bg-[#0F2C53] data-[state=active]:text-white'
+                  'rounded-full px-10 py-3.5 text-xl data-[state=active]:bg-[#0F2C53] data-[state=active]:text-white md:px-12'
                 }
                 value='year'
               >
@@ -246,7 +403,7 @@ const OfferDialog = forwardRef<OfferDialogRef>((props, ref) => {
               </TabsTrigger>
               <TabsTrigger
                 className={
-                    'rounded-full px-12 py-3.5 text-xl data-[state=active]:bg-[#0F2C53] data-[state=active]:text-white'
+                  'rounded-full px-10 py-3.5 text-xl data-[state=active]:bg-[#0F2C53] data-[state=active]:text-white md:px-12'
                 }
                 value='month'
               >
@@ -254,74 +411,37 @@ const OfferDialog = forwardRef<OfferDialogRef>((props, ref) => {
               </TabsTrigger>
             </TabsList>
           </Tabs>
-          </div>
-          <ScrollArea className={'h-[600px]'}>
-            {tabValue === 'year' && (
-              <div>
-                {isLoading ? (
-                  <div className='py-12 text-center'>
-                    <div className='mx-auto h-12 w-12 animate-spin rounded-full border-b-2 border-[#0F2C53]'></div>
-                    <p className='mt-4 text-gray-600'>加载中...</p>
-                  </div>
-                ) : error ? (
-                  <div className='py-12 text-center'>
-                    <p className='text-lg text-red-500'>加载失败，请重试</p>
-                    <button
-                      onClick={() => refetch()}
-                      className='mt-4 rounded-lg bg-[#0F2C53] px-6 py-2 text-white transition-colors hover:bg-[#0A2C47]'
+          <ScrollArea
+            ref={scrollAreaRef}
+            className='overflow-y-auto'
+            style={{ height: `calc(${scrollAreaHeight}px - 32px)` }}
           >
-                      重新加载
-                    </button>
-                  </div>
-                ) : yearlyPlans.length > 0 ? (
-                  <div className='relative mt-8'>
-                    {/* 卡片容器 */}
-                    <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'>
-                      {yearlyPlans.map((plan, index) => (
-                        <PlanCard key={plan.id} plan={plan} />
-                      ))}
-                    </div>
-                  </div>
-                ) : (
-                  <div className='py-12 text-center'>
-                    <p className='text-lg text-gray-500'>暂无年付套餐</p>
-                  </div>
-                )}
-              </div>
+            <div>
+              {tabValue === 'year' && (
+                <PlanList
+                  plans={yearlyPlans}
+                  isLoading={isLoading}
+                  tabValue={tabValue}
+                  error={error}
+                  onRetry={refetch}
+                  emptyMessage='暂无年付套餐'
+                  onSubscribe={handleSubscribe}
+                  firstPlanCardRef={firstPlanCardRef} // 传递ref给第一项
+                />
               )}
               {tabValue === 'month' && (
-              <div>
-                {isLoading ? (
-                  <div className='py-12 text-center'>
-                    <div className='mx-auto h-12 w-12 animate-spin rounded-full border-b-2 border-[#0F2C53]'></div>
-                    <p className='mt-4 text-gray-600'>加载中...</p>
-                  </div>
-                ) : error ? (
-                  <div className='py-12 text-center'>
-                    <p className='text-lg text-red-500'>加载失败，请重试</p>
-                    <button
-                      onClick={() => refetch()}
-                      className='mt-4 rounded-lg bg-[#0F2C53] px-6 py-2 text-white transition-colors hover:bg-[#0A2C47]'
-                    >
-                      重新加载
-                    </button>
-                  </div>
-                ) : monthlyPlans.length > 0 ? (
-                  <div className='relative'>
-                    {/* 卡片容器 */}
-                    <div className='mt-8 grid grid-cols-1 justify-items-center gap-4 sm:grid-cols-2 sm:gap-6 lg:grid-cols-3 lg:gap-8'>
-                      {monthlyPlans.map((plan, index) => (
-                        <PlanCard key={plan.id} plan={plan} />
-                      ))}
-                    </div>
-                  </div>
-                ) : (
-                  <div className='py-12 text-center'>
-                    <p className='text-lg text-gray-500'>暂无月付套餐</p>
-                  </div>
+                <PlanList
+                  plans={monthlyPlans}
+                  tabValue={tabValue}
+                  isLoading={isLoading}
+                  error={error}
+                  onRetry={refetch}
+                  emptyMessage='暂无月付套餐'
+                  onSubscribe={handleSubscribe}
+                  firstPlanCardRef={firstPlanCardRef} // 传递ref给第一项
+                />
               )}
             </div>
-            )}
           </ScrollArea>
         </div>
       </DialogContent>