feat: 修改代码结构

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

@@ -31,7 +31,7 @@ export default function Page() {
         }}
         renderItem={(item) => {
           return (
-            <Card className='rounded-[32px] border border-[#D9D9D9] pb-5 pl-16 pr-3 pt-3 shadow-[0px_0px_4.5px_0px_rgba(0,0,0,0.25)]'>
+            <Card className='rounded-[32px] border border-[#D9D9D9] pb-5 pl-3 pr-3 pt-3 shadow-[0px_0px_4.5px_0px_rgba(0,0,0,0.25)] sm:pl-16'>
               <div className={'flex justify-between'}>
                 <div>
                   <div className={'text-[#666]'}>{t('orderNo')}</div>

apps/user/app/(main)/(content)/(user)/sidebar-left.tsx

@@ -83,8 +83,8 @@ export function SidebarLeft({ ...props }: React.ComponentProps<typeof Sidebar>)
           </SidebarMenu>
         </SidebarContent>
 
-        <SidebarFooter className={'mb-6 mt-4 px-0 pb-0'}>
-          <div>
+        <SidebarFooter className={'mb-6 mt-4 gap-0 px-0 pb-0'}>
+          <div className={'mb-4 ml-[6px]'}>
             <LanguageSwitch />
           </div>
           <UserNav from='profile' />

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

@@ -2,21 +2,23 @@
 
 import { querySubscribeList } from '@/services/user/subscribe';
 import { useQuery } from '@tanstack/react-query';
-import { Tabs, TabsList, TabsTrigger } from '@workspace/airo-ui/components/tabs';
 import { useTranslations } from 'next-intl';
-import { useMemo, useRef, useState } from 'react';
+import { 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';
-import { unitConversion } from '@workspace/airo-ui/utils';
+import TabContent from '@/components/SubscribePlan/PlanContent/index';
+import PlanTabs from '@/components/SubscribePlan/PlanTabs/PlanTabs';
 
 export default function Page() {
   const t = useTranslations('subscribe');
   const [tabValue, setTabValue] = useState<'year' | 'month'>('year');
 
-  const { data, isLoading, error, refetch } = useQuery({
+  const {
+    data = [],
+    isLoading,
+    error,
+    refetch,
+  } = useQuery({
     queryKey: ['querySubscribeList'],
     queryFn: async () => {
       const { data } = await querySubscribeList();
@@ -24,50 +26,6 @@ export default function Page() {
     },
   });
 
-  // 处理套餐数据的工具函数
-  const processPlanData = (item: API.Subscribe, isYearly: boolean): ProcessedPlanData => {
-    if (isYearly) {
-      const discountItem = item.discount?.find((v) => v.quantity === 12);
-      return {
-        ...item,
-        origin_price: unitConversion('centsToDollars', item.unit_price).toString(), // 原价
-        discount_price: unitConversion(
-          'centsToDollars',
-          item.unit_price * ((discountItem?.discount || 100) / 100),
-        ).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],
-  );
-
-  // 处理订阅点击
-  const handleSubscribe = (plan: ProcessedPlanData) => {
-    console.log('用户选择了套餐:', plan);
-    // 这里可以添加订阅逻辑，比如跳转到支付页面或显示确认对话框
-    PurchaseRef.current.show(plan, tabValue);
-  };
-
-  const PurchaseRef = useRef<{
-    show: (subscribe: API.Subscribe, tabValue: string) => void;
-    hide: () => void;
-  }>(null);
-
   return (
     <>
       <LoginDialogProvider>
@@ -86,52 +44,17 @@ export default function Page() {
           {t('description')}
         </div>
         <div>
-          <Tabs
-            defaultValue='year'
-            className={'mt-8 text-center md:mt-16'}
-            value={tabValue}
-            onValueChange={(value) => setTabValue(value as 'year' | 'month')}
-          >
-            <TabsList className='relative mb-8 h-[74px] flex-wrap rounded-full bg-[#EAEAEA] p-2.5 md:mb-16'>
-              {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'>
-                  -20%
-                  {/* 小三角箭头 */}
-                  <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-10 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-10 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 className={'m-auto flex w-full sm:w-[362px]'}>
+            <PlanTabs tabValue={tabValue} setTabValue={setTabValue} discount={20} />
+          </div>
           <TabContent
             tabValue={tabValue}
-            yearlyPlans={yearlyPlans}
-            monthlyPlans={monthlyPlans}
+            subscribeData={data}
             isLoading={isLoading}
             error={error}
             onRetry={refetch}
-            onSubscribe={handleSubscribe}
           />
         </div>
-        <Purchase ref={PurchaseRef} />
       </LoginDialogProvider>
     </>
   );