feat: 修改代码结构

apps/user/components/subscribe/purchase.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import PaymentMethods from '@/components/subscribe/payment-methods';
+import PlanTabs, { TabValueType } from '@/components/SubscribePlan/PlanTabs/PlanTabs';
 import useGlobalStore from '@/config/use-global';
 import { preCreateOrder, purchase } from '@/services/user/order';
 import { useQuery } from '@tanstack/react-query';
@@ -12,7 +13,6 @@ import {
   DialogTitle,
 } from '@workspace/airo-ui/components/dialog';
 import { Separator } from '@workspace/airo-ui/components/separator';
-import { Tabs, TabsList, TabsTrigger } from '@workspace/airo-ui/components/tabs';
 import { LoaderCircle } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import { useRouter } from 'next/navigation';
@@ -32,7 +32,7 @@ interface PurchaseProps {
 }
 
 interface PurchaseDialogRef {
-  show: (subscribe: API.Subscribe, tabValue: string) => void;
+  show: (subscribe: API.Subscribe, tabValue: TabValueType) => void;
   hide: () => void;
 }
 
@@ -50,10 +50,10 @@ const Purchase = forwardRef<PurchaseDialogRef, PurchaseProps>((props, ref) => {
   const [loading, startTransition] = useTransition();
   const [open, setOpen] = useState(false);
   const lastSuccessOrderRef = useRef<any>(null);
-  const [tabValue, setTabValue] = useState('year');
+  const [tabValue, setTabValue] = useState<'year' | 'month'>('year');
 
   useImperativeHandle(ref, () => ({
-    show: (newSubscribe: API.Subscribe, tabValue: string) => {
+    show: (newSubscribe: API.Subscribe, tabValue: TabValueType) => {
       setSubscribe(newSubscribe);
       setParams((prev) => ({
         ...prev,
@@ -127,46 +127,19 @@ const Purchase = forwardRef<PurchaseDialogRef, PurchaseProps>((props, ref) => {
           <div className='pl-4 text-4xl font-bold text-[#0F2C53] sm:mb-8 sm:pl-0 sm:text-center sm:text-4xl'>
             {t('purchaseTitle')}
           </div>
-          <div>
-            <Tabs
-              defaultValue='year'
-              className='mt-8 text-center sm:mt-6'
-              value={tabValue}
-              onValueChange={(val) => {
-                if (val === 'year') {
-                  handleChange('quantity', 12);
-                } else if (val === 'month') {
-                  handleChange('quantity', 1);
-                }
-                setTabValue(val);
-              }}
-            >
-              <TabsList className='relative mb-8 h-[74px] flex-wrap rounded-full bg-[#EAEAEA] p-2.5'>
-                {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'>
-                    {t('discount20')}
-                    {/* 小三角箭头 */}
-                    <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>
+          <PlanTabs
+            tabValue={tabValue}
+            setTabValue={(val) => {
+              if (val === 'year') {
+                handleChange('quantity', 12);
+              } else if (val === 'month') {
+                handleChange('quantity', 1);
+              }
+              setTabValue(val);
+            }}
+            discount={20}
+            className={'sm:mt-6'}
+          />
           <div className={'px-4 sm:px-0'}>
             <SubscribeDetail
               subscribe={{