feat: 修改样式

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>