From 08eca0c9e8efa6557ef280d4c3af9c7c6f8c33af Mon Sep 17 00:00:00 2001
From: speakeloudest <speakeloudest@gmail.com>
Date: Wed, 30 Jul 2025 06:39:12 -0700
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E6=94=B9=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../auth/EmailAuthDialog/EmailAuthDialog.tsx  |   2 +-
 apps/user/components/main/FooterCopyright.tsx |   6 +-
 apps/user/components/main/HomeContent.tsx     |  10 +-
 .../components/main/OfferDialog/index.tsx     | 560 +++++++++++-------
 4 files changed, 349 insertions(+), 229 deletions(-)

diff --git a/apps/user/app/auth/EmailAuthDialog/EmailAuthDialog.tsx b/apps/user/app/auth/EmailAuthDialog/EmailAuthDialog.tsx
index 3f9e5f0..9ddc3cc 100644
--- a/apps/user/app/auth/EmailAuthDialog/EmailAuthDialog.tsx
+++ b/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={
diff --git a/apps/user/components/main/FooterCopyright.tsx b/apps/user/components/main/FooterCopyright.tsx
index f9f2986..d77af59 100644
--- a/apps/user/components/main/FooterCopyright.tsx
+++ b/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>
diff --git a/apps/user/components/main/HomeContent.tsx b/apps/user/components/main/HomeContent.tsx
index 6ccca2d..6e2673d 100644
--- a/apps/user/components/main/HomeContent.tsx
+++ b/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>
diff --git a/apps/user/components/main/OfferDialog/index.tsx b/apps/user/components/main/OfferDialog/index.tsx
index 7cba533..701d3b1 100644
--- a/apps/user/components/main/OfferDialog/index.tsx
+++ b/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,119 +39,197 @@ 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 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]'
+    >
+      重新加载
+    </button>
+  </div>
+);
+
+// 空状态组件
+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}
+        </span>
+      )}
+      <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>
+    </div>
+    {plan.origin_price && (
+      <p className='text-left text-[10px] font-normal text-black'>年付享受8折优惠</p>
+    )}
+  </div>
+);
+
+// 订阅按钮组件
+const SubscribeButton = ({ onClick }: { onClick?: () => void }) => (
+  <button
+    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>
+);
+
+// 星级评分组件
+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: 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 }: { plan: SubscriptionData }) => {
+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
-      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`}
+      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>
 
       {/* 价格区域 */}
-      <div className='mb-6 sm:mb-8'>
-        <div className='mb-2 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}
-            </span>
-          )}
-          <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>
-        </div>
-        <p className='text-left text-[10px] font-normal text-black'>年付享受8折优惠</p>
-      </div>
+      <PriceDisplay plan={plan} />
 
       {/* 订阅按钮 */}
-      <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]`}
-      >
-        订阅
-      </button>
+      <SubscribeButton onClick={handleSubscribe} />
 
       {/* 功能列表 */}
-      <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>
-          <div className='text-right text-xs font-light leading-[1.8461538461538463em] text-black sm:text-[13px]'>
-            {Array.from({ length: 4 }, (_, i) => (
-              <span key={i} className='text-black'>
-                ✭
-              </span>
-            ))}
-          </div>
-        </div>
-      </div>
+      <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,153 +301,147 @@ 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);
-    return {
-      ...item,
-      origin_price: unitConversion('centsToDollars', item.unit_price * 12), // 原价
-      discount_price: unitConversion(
-        'centsToDollars',
-        item.unit_price * (discountItem.discount / 100) * 12,
-      ), // 优惠价格
-    };
-  });
-  const monthlyPlans = data.map((item) => {
-    return {
-      ...item,
-      origin_price: '', // 原价
-      discount_price: unitConversion('centsToDollars', item.unit_price), // 优惠价格
-    };
-  });
-  const [tabValue, setTabValue] = useState('year');
+  // 处理订阅点击
+  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).toString(), // 原价
+        discount_price: unitConversion(
+          'centsToDollars',
+          item.unit_price * ((discountItem?.discount || 100) / 100) * 12,
+        ).toString(), // 优惠价格
+      };
+    } else {
+      return {
+        ...item,
+        origin_price: '', // 月付没有原价
+        discount_price: unitConversion('centsToDollars', item.unit_price).toString(), // 月付价格
+      };
+    }
+  };
+
+  // 使用 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'}
-              value={tabValue}
-              onValueChange={setTabValue}
-            >
-              <TabsList className='mb-8 h-[74px] flex-wrap rounded-full bg-[#EAEAEA] p-2.5'>
-                <TabsTrigger
-                  className={
-                    'rounded-full px-12 py-3.5 text-xl data-[state=active]:bg-[#0F2C53] data-[state=active]:text-white'
-                  }
-                  value='year'
-                >
-                  年付套餐
-                </TabsTrigger>
-                <TabsTrigger
-                  className={
-                    'rounded-full px-12 py-3.5 text-xl data-[state=active]:bg-[#0F2C53] data-[state=active]:text-white'
-                  }
-                  value='month'
-                >
-                  月付套餐
-                </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]'
-                    >
-                      重新加载
-                    </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>
-            )}
-            {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>
-                )}
-              </div>
-            )}
+          <Tabs
+            defaultValue='year'
+            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 md:mb-16'>
+              <TabsTrigger
+                className={
+                  'rounded-full px-10 py-3.5 text-xl data-[state=active]:bg-[#0F2C53] data-[state=active]:text-white md:px-12'
+                }
+                value='year'
+              >
+                年付套餐
+              </TabsTrigger>
+              <TabsTrigger
+                className={
+                  'rounded-full px-10 py-3.5 text-xl data-[state=active]:bg-[#0F2C53] data-[state=active]:text-white md:px-12'
+                }
+                value='month'
+              >
+                月付套餐
+              </TabsTrigger>
+            </TabsList>
+          </Tabs>
+          <ScrollArea
+            ref={scrollAreaRef}
+            className='overflow-y-auto'
+            style={{ height: `calc(${scrollAreaHeight}px - 32px)` }}
+          >
+            <div>
+              {tabValue === 'year' && (
+                <PlanList
+                  plans={yearlyPlans}
+                  isLoading={isLoading}
+                  tabValue={tabValue}
+                  error={error}
+                  onRetry={refetch}
+                  emptyMessage='暂无年付套餐'
+                  onSubscribe={handleSubscribe}
+                  firstPlanCardRef={firstPlanCardRef} // 传递ref给第一项
+                />
+              )}
+              {tabValue === 'month' && (
+                <PlanList
+                  plans={monthlyPlans}
+                  tabValue={tabValue}
+                  isLoading={isLoading}
+                  error={error}
+                  onRetry={refetch}
+                  emptyMessage='暂无月付套餐'
+                  onSubscribe={handleSubscribe}
+                  firstPlanCardRef={firstPlanCardRef} // 传递ref给第一项
+                />
+              )}
+            </div>
           </ScrollArea>
         </div>
       </DialogContent>