fix: pc端修改

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

@@ -4,8 +4,9 @@ import { querySubscribeList } from '@/services/user/subscribe';
 import { useQuery } from '@tanstack/react-query';
 import { Tabs, TabsList, TabsTrigger } from '@workspace/ui/components/tabs';
 import { useTranslations } from 'next-intl';
-import { useMemo, useState } from 'react';
+import { useMemo, useRef, useState } from 'react';
 
+import { LoginDialogProvider } from '@/app/auth/LoginDialogContext';
 import { TabContent } from '@/components/main/OfferDialog/TabContent';
 import { ProcessedPlanData } from '@/components/main/OfferDialog/types';
 import Purchase from '@/components/subscribe/purchase';
@@ -13,7 +14,6 @@ import { unitConversion } from '@workspace/ui/utils';
 
 export default function Page() {
   const t = useTranslations('subscribe');
-  const [subscribe, setSubscribe] = useState<API.Subscribe | undefined>();
   const [tabValue, setTabValue] = useState<'year' | 'month'>('year');
 
   const { data, isLoading, error, refetch } = useQuery({
@@ -60,54 +60,61 @@ export default function Page() {
   const handleSubscribe = (plan: ProcessedPlanData) => {
     console.log('用户选择了套餐:', plan);
     // 这里可以添加订阅逻辑，比如跳转到支付页面或显示确认对话框
-    setSubscribe(plan);
+    PurchaseRef.current.show(plan, tabValue);
   };
 
+  const PurchaseRef = useRef<{
+    show: (subscribe: API.Subscribe, tabValue: string) => void;
+    hide: () => void;
+  }>(null);
+
   return (
     <>
-      <div className={'text-4xl font-bold text-[#0F2C53] md:mb-4 md:text-center md:text-5xl'}>
-        选择套餐
-      </div>
-      <div className={'text-lg font-medium text-[#666666] md:text-center'}>
-        选择最适合您的服务套餐
-      </div>
-      <div>
-        <Tabs
-          defaultValue='year'
-          className={'mt-8 text-center md:mt-16'}
-          value={tabValue}
-          onValueChange={(value) => setTabValue(value as 'year' | 'month')}
-        >
-          <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>
-        <TabContent
-          tabValue={tabValue}
-          yearlyPlans={yearlyPlans}
-          monthlyPlans={monthlyPlans}
-          isLoading={isLoading}
-          error={error}
-          onRetry={refetch}
-          onSubscribe={handleSubscribe}
-        />
-      </div>
-      <Purchase subscribe={subscribe} setSubscribe={setSubscribe} />
+      <LoginDialogProvider>
+        <div className={'text-4xl font-bold text-[#0F2C53] md:mb-4 md:text-center md:text-5xl'}>
+          选择套餐
+        </div>
+        <div className={'text-lg font-medium text-[#666666] md:text-center'}>
+          选择最适合您的服务套餐
+        </div>
+        <div>
+          <Tabs
+            defaultValue='year'
+            className={'mt-8 text-center md:mt-16'}
+            value={tabValue}
+            onValueChange={(value) => setTabValue(value as 'year' | 'month')}
+          >
+            <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>
+          <TabContent
+            tabValue={tabValue}
+            yearlyPlans={yearlyPlans}
+            monthlyPlans={monthlyPlans}
+            isLoading={isLoading}
+            error={error}
+            onRetry={refetch}
+            onSubscribe={handleSubscribe}
+          />
+        </div>
+        <Purchase ref={PurchaseRef} />
+      </LoginDialogProvider>
     </>
   );
 }