feat: 修改代码结构

apps/user/components/SubscribePlan/PlanTabs/PlanTabs.tsx

@@ -34,10 +34,10 @@ const PlanTabs: React.FC<PlanTabProps> = (props) => {
     >
       <TabsList className='relative mb-8 grid h-[74px] grid-cols-2 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'>
+          <span className='absolute -top-8 left-16 z-10 rounded-sm bg-[#E22C2E] px-2 py-0.5 text-[10px] font-bold leading-none text-white shadow sm:text-xs'>
             -{props.discount}%{/* 小三角箭头 */}
             <span
-              className='absolute right-0 top-[80%] h-10 w-2 bg-[#E22C2E]'
+              className='absolute right-0 top-[75%] h-10 w-2 bg-[#E22C2E]'
               style={{ clipPath: 'polygon(100% 0, 100% 100%, 0 0)' }}
             />
           </span>

apps/user/components/affiliate/index.tsx

@@ -74,8 +74,8 @@ export default function Affiliate() {
             {inviteListData?.total}
           </div>
           <div className={'grid grid-cols-2 gap-[10px] sm:grid-cols-1 sm:gap-5 lg:grid-cols-2'}>
-            <div className='rounded-[20px] bg-[#EAEAEA] px-4 py-2 shadow-sm transition-all duration-300 hover:shadow-md sm:py-4'>
-              <p className='font-medium text-[#666] opacity-80 sm:mb-3 sm:text-sm'>
+            <div className='rounded-[20px] border-2 border-[#EAEAEA] bg-[#EAEAEA] px-4 py-2 shadow-sm transition-all duration-300 hover:shadow-md sm:py-4'>
+              <p className='flex justify-between font-medium text-[#666] opacity-80 sm:mb-3 sm:text-sm'>
                 {t('totalCommission')}
               </p>
               <p className='text-xl font-bold text-[#225BA9] sm:text-2xl'>

apps/user/components/language-switch.tsx

@@ -45,7 +45,7 @@ export default function LanguageSwitch() {
   return (
     <div>
       <div
-        className='flex cursor-pointer items-center'
+        className='flex items-center rounded-full'
         onClick={() => {
           console.log(locale, 111);
           if (locale === 'en-US') {
@@ -55,7 +55,10 @@ export default function LanguageSwitch() {
           }
         }}
       >
-        <SvgIcon name={'language'} />
+        <SvgIcon
+          name={locale === 'en-US' ? 'language' : 'language-zh'}
+          className={'cursor-pointer text-[#EAEAEA] hover:text-[#B5C9E2]'}
+        />
         <span className='sr-only'>{languages[locale as keyof typeof languages]}</span>
       </div>
     </div>

apps/user/components/subscribe/renewal.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import PaymentMethods from '@/components/subscribe/payment-methods';
+import PlanTabs from '@/components/SubscribePlan/PlanTabs/PlanTabs';
 import useGlobalStore from '@/config/use-global';
 import { preCreateOrder, renewal } from '@/services/user/order';
 import { useQuery } from '@tanstack/react-query';
@@ -14,7 +15,6 @@ import {
   DialogTrigger,
 } 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';
@@ -115,11 +115,9 @@ export default function Renewal({ id, subscribe, className }: Readonly<RenewalPr
           {t('renewSubscription')}
         </div>
         <div>
-          <Tabs
-            defaultValue='year'
-            className='mt-8 text-center sm:mt-6'
-            value={tabValue}
-            onValueChange={(val) => {
+          <PlanTabs
+            tabValue={tabValue}
+            setTabValue={(val) => {
               if (val === 'year') {
                 handleChange('quantity', 12);
               } else if (val === 'month') {
@@ -127,32 +125,8 @@ export default function Renewal({ id, subscribe, className }: Readonly<RenewalPr
               }
               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-8 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-8 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>
+            discount={20}
+          />
         </div>
 
         <div className='w-full'>

apps/user/components/user-nav.tsx

@@ -63,7 +63,7 @@ export function UserNav({ from = '' }: { from?: string }) {
           forceMount
           align='end'
           side={from === 'profile' ? (isMobile ? 'top' : 'right') : undefined}
-          className='mt-[1px] flex w-[var(--sidebar-width)] flex-col gap-1 rounded-[28px] border-0 bg-transparent pl-[26px] pr-4 shadow-none md:w-48 md:gap-3 md:border md:bg-white md:p-3'
+          className='mt-[1px] flex w-[var(--sidebar-width)] flex-col gap-1 rounded-[28px] border-0 bg-transparent p-0 pl-[26px] pr-4 shadow-none md:w-48 md:gap-3 md:border md:bg-white md:p-3'
           style={{
             '--sidebar-width': '14rem',
           }}