feat: 修改翻译

apps/user/components/CustomIcon/icons/close.svg

@@ -1,3 +0,0 @@
-<svg width="31" height="31" viewBox="0 0 31 31" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M20.7312 7.88871L23.124 10.2816L17.9056 15.5L23.124 20.7185L20.7312 23.1113L15.5127 17.8929L10.2688 23.1368L7.87598 20.7439L13.1199 15.5L7.87598 10.2561L10.2688 7.86325L15.5127 13.1072L20.7312 7.88871Z" fill="black"/>
-</svg>

apps/user/components/SvgIcon.tsx

@@ -1,3 +1,4 @@
+'use client';
 import { useEffect, useState } from 'react';
 
 const SvgIcon = ({ name, ...props }) => {
@@ -6,7 +7,7 @@ const SvgIcon = ({ name, ...props }) => {
   useEffect(() => {
     let isMounted = true;
 
-    import(`public/svg-icon/${name}.svg`)
+    import(`@/assets/svg-icon/${name}.svg`)
       .then((module) => {
         if (isMounted) {
           setIcon(() => module.default);

apps/user/components/main/HomeContent.tsx

@@ -1,21 +1,23 @@
 'use client';
 
 import { Button } from '@workspace/airo-ui/components/button';
+import { useTranslations } from 'next-intl';
 import { useRef } from 'react';
 import OfferDialog, { OfferDialogRef } from './OfferDialog/index';
 
 export default function HomeContent() {
   const dialogRef = useRef<OfferDialogRef>(null);
+  const t = useTranslations('components.home');
 
   return (
     <div className='flex min-h-[calc(100vh-73px)] flex-col items-center justify-center pt-8'>
       {/* 大标题 */}
       <h1 className='mb-6 self-start text-4xl font-bold !leading-tight text-white sm:mb-10 sm:self-center sm:text-6xl'>
-        连接
+        {t('connect')}
         <br />
-        任何时间
+        {t('anytime')}
         <br />
-        任何地点
+        {t('anywhere')}
       </h1>
       {/* 副标题 */}
       <div className='mb-12 text-left text-[17px] leading-normal text-white sm:mb-16 sm:text-center sm:font-bold'>
@@ -23,16 +25,16 @@ export default function HomeContent() {
           <span className='mr-2 text-white'>
             Airo<sup className='text-[8px]'>™</sup>Port
           </span>
-          <span>提供极稳，极简，极速的网络服务</span>
+          <span>{t('serviceSlogan')}</span>
         </p>
-        <p className={'mt-1 w-[255px] sm:mt-0 sm:w-full'}>获取订阅地址，开始顶级的私密网络体验</p>
+        <p className={'mt-1 w-[255px] sm:mt-0 sm:w-full'}>{t('getSubscription')}</p>
       </div>
       {/* 按钮 */}
       <Button
         onClick={() => dialogRef.current?.show()}
         className='mb-8 h-auto rounded-full border-2 border-white bg-white/10 px-8 py-2 text-lg font-bold text-white transition hover:bg-white/25 sm:py-4 sm:text-2xl'
       >
-        查看订阅套餐
+        {t('viewSubscriptionPlans')}
       </Button>
 
       <OfferDialog ref={dialogRef} />

apps/user/components/main/OfferDialog/TabContent.tsx

@@ -1,3 +1,4 @@
+import { useTranslations } from 'next-intl';
 import React from 'react';
 import { PlanList } from './index';
 import { ProcessedPlanData } from './types';
@@ -23,6 +24,7 @@ export const TabContent: React.FC<TabContentProps> = ({
   onSubscribe,
   firstPlanCardRef,
 }) => {
+  const t = useTranslations('components.offerDialog');
   return (
     <div>
       {tabValue === 'year' && (
@@ -32,7 +34,7 @@ export const TabContent: React.FC<TabContentProps> = ({
           tabValue={tabValue}
           error={error}
           onRetry={onRetry}
-          emptyMessage='暂无年付套餐'
+          emptyMessage={t('noYearlyPlan')}
           onSubscribe={onSubscribe}
           firstPlanCardRef={firstPlanCardRef}
         />
@@ -44,7 +46,7 @@ export const TabContent: React.FC<TabContentProps> = ({
           isLoading={isLoading}
           error={error}
           onRetry={onRetry}
-          emptyMessage='暂无月付套餐'
+          emptyMessage={t('noMonthlyPlan')}
           onSubscribe={onSubscribe}
           firstPlanCardRef={firstPlanCardRef}
         />

apps/user/components/main/OfferDialog/index.tsx

@@ -1,11 +1,9 @@
-import CloseSvg from '@/components/CustomIcon/icons/close.svg';
 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 Image from 'next/image';
 import {
   forwardRef,
   useCallback,
@@ -20,25 +18,31 @@ import { TabContent } from './TabContent';
 import { ProcessedPlanData } from './types';
 
 // 加载状态组件
-const LoadingState = () => (
-  <div className='py-12 text-center'>
-    <div className='mx-auto h-12 w-12 animate-spin rounded-full border-b-2 border-[#0F2C53]'></div>
-    <p className='mt-4 text-gray-600'>加载中...</p>
-  </div>
-);
+const LoadingState = () => {
+  const t = useTranslations('components.offerDialog');
+  return (
+    <div className='py-12 text-center'>
+      <div className='mx-auto h-12 w-12 animate-spin rounded-full border-b-2 border-[#0F2C53]'></div>
+      <p className='mt-4 text-gray-600'>{t('loading')}</p>
+    </div>
+  );
+};
 
 // 错误状态组件
-const ErrorState = ({ onRetry }: { onRetry: () => void }) => (
-  <div className='py-12 text-center'>
-    <p className='text-lg text-red-500'>加载失败，请重试</p>
-    <button
-      onClick={onRetry}
-      className='mt-4 rounded-lg bg-[#0F2C53] px-6 py-2 text-white transition-colors hover:bg-[#0A2C47]'
-    >
-      重新加载
-    </button>
-  </div>
-);
+const ErrorState = ({ onRetry }: { onRetry: () => void }) => {
+  const t = useTranslations('components.offerDialog');
+  return (
+    <div className='py-12 text-center'>
+      <p className='text-lg text-red-500'>{t('loadFailed')}</p>
+      <button
+        onClick={onRetry}
+        className='mt-4 rounded-lg bg-[#0F2C53] px-6 py-2 text-white transition-colors hover:bg-[#0A2C47]'
+      >
+        {t('reload')}
+      </button>
+    </div>
+  );
+};
 
 // 空状态组件
 const EmptyState = ({ message }: { message: string }) => (
@@ -48,34 +52,41 @@ const EmptyState = ({ message }: { message: string }) => (
 );
 
 // 价格显示组件
-const PriceDisplay = ({ plan }: { plan: ProcessedPlanData }) => (
-  <div className='mb-2 sm:mb-4'>
-    <div className='mb-1 flex items-baseline gap-2'>
-      {plan.origin_price && (
-        <span className='text-2xl font-bold leading-[1.125em] text-[#666666] line-through'>
-          ${plan.origin_price}
+const PriceDisplay = ({ plan }: { plan: ProcessedPlanData }) => {
+  const t = useTranslations('components.offerDialog');
+  return (
+    <div className='mb-2 sm:mb-4'>
+      <div className='mb-1 flex items-baseline gap-2'>
+        {plan.origin_price && (
+          <span className='text-2xl font-bold leading-[1.125em] text-[#666666] line-through'>
+            ${plan.origin_price}
+          </span>
+        )}
+        <span className='text-2xl font-bold leading-[1.125em] text-[#091B33]'>
+          ${plan.discount_price}
         </span>
+        <span className='text-sm font-normal leading-[1.8em] text-[#4D4D4D] sm:text-[15px]'>
+          {t('perYear')}
+        </span>
+      </div>
+      {plan.origin_price && (
+        <p className='text-left text-[10px] font-normal text-black'>{t('yearlyDiscount')}</p>
       )}
-      <span className='text-2xl font-bold leading-[1.125em] text-[#091B33]'>
-        ${plan.discount_price}
-      </span>
-      <span className='text-sm font-normal leading-[1.8em] text-[#4D4D4D] sm:text-[15px]'>/年</span>
     </div>
-    {plan.origin_price && (
-      <p className='text-left text-[10px] font-normal text-black'>年付享受8折优惠</p>
-    )}
-  </div>
-);
+  );
+};
 
 import { useLoginDialog } from '@/app/auth/LoginDialogContext';
 import { Display } from '@/components/display';
 import Purchase from '@/components/subscribe/purchase';
 import useGlobalStore from '@/config/use-global';
 import { useTranslations } from 'next-intl';
+
 // 订阅按钮组件
 const SubscribeButton = ({ onClick }: { onClick?: () => void }) => {
   const { user } = useGlobalStore();
   const { openLoginDialog } = useLoginDialog();
+  const t = useTranslations('components.offerDialog');
 
   function handleClick() {
     console.log('click', user);
@@ -92,7 +103,7 @@ const SubscribeButton = ({ onClick }: { onClick?: () => void }) => {
       onClick={handleClick}
       className='h-10 w-full rounded-full bg-[#0F2C53] text-sm font-medium text-white shadow-md transition-all duration-300 hover:bg-[#225BA9] sm:h-10 sm:text-sm md:h-[40px] md:text-[14px]'
     >
-      订阅
+      {t('subscribe')}
     </button>
   );
 };
@@ -111,7 +122,8 @@ const StarRating = ({ rating, maxRating = 5 }: { rating: number; maxRating?: num
 // 功能列表组件
 const FeatureList = ({ plan }: { plan: ProcessedPlanData }) => {
   const t = useTranslations('subscribe.detail');
-  const features = [{ label: '可用节点', value: plan.features?.nodes || '11' }];
+  const tOffer = useTranslations('components.offerDialog');
+  const features = [{ label: tOffer('availableNodes'), value: plan.features?.nodes || '11' }];
 
   return (
     <div className='mt-6 space-y-0 sm:mt-6'>
@@ -154,7 +166,7 @@ const FeatureList = ({ plan }: { plan: ProcessedPlanData }) => {
         <li className='py-1'>
           <div className={'flex items-start justify-between'}>
             <span className='text-xs font-light leading-[1.8461538461538463em] text-black sm:text-[13px]'>
-              网络稳定指数:
+              {tOffer('networkStabilityIndex')}
             </span>
             <StarRating rating={plan.features?.stability || 4} />
           </div>
@@ -246,6 +258,7 @@ export interface OfferDialogRef {
 }
 
 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);
@@ -379,17 +392,13 @@ const OfferDialog = forwardRef<OfferDialogRef>((props, ref) => {
       <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]'
-        closeIcon={<Image src={CloseSvg} alt={'close'} />}
-        closeClassName={
-          'right-6 top-6 font-bold text-black opacity-100 focus:ring-0 focus:ring-offset-0'
-        }
       >
         <DialogTitle className={'sr-only'}></DialogTitle>
         <div className={'text-4xl font-bold text-[#0F2C53] md:mb-4 md:text-center md:text-5xl'}>
-          选择套餐
+          {t('selectPlan')}
         </div>
         <div className={'text-lg font-medium text-[#666666] md:text-center'}>
-          选择最适合您的服务套餐
+          {t('selectYourPlan')}
         </div>
         <div>
           <Tabs
@@ -421,7 +430,7 @@ const OfferDialog = forwardRef<OfferDialogRef>((props, ref) => {
                 }
                 value='year'
               >
-                年付套餐
+                {t('yearlyPlan')}
               </TabsTrigger>
               <TabsTrigger
                 className={
@@ -429,7 +438,7 @@ const OfferDialog = forwardRef<OfferDialogRef>((props, ref) => {
                 }
                 value='month'
               >
-                月付套餐
+                {t('monthlyPlan')}
               </TabsTrigger>
             </TabsList>
           </Tabs>

apps/user/components/subscribe/billing.tsx

@@ -1,79 +1,49 @@
 'use client';
 
-import { Display } from '@/components/display';
-import { Separator } from '@workspace/airo-ui/components/separator';
+import { Card, CardContent, CardHeader, CardTitle } from '@workspace/ui/components/card';
+import { Separator } from '@workspace/ui/components/separator';
 import { useTranslations } from 'next-intl';
 
-interface SubscribeBillingProps {
-  order?: Partial<
-    API.OrderDetail & {
-      unit_price: number;
-      unit_time: number;
-      subscribe_discount: number;
-    }
-  >;
-}
-
-export function SubscribeBilling({ order }: Readonly<SubscribeBillingProps>) {
-  const t = useTranslations('subscribe');
-
+export function SubscribeBilling({ order }: { order: API.Order }) {
+  const t = useTranslations('subscribe.billing');
+  const t_c = useTranslations('components.billing');
   return (
-    <>
-      <div className='mb-1 font-semibold text-[#225BA9]'>{t('billing.billingTitle')}</div>
-      <ul className='grid grid-cols-1 gap-1 text-[15px] font-light text-[#666] *:flex *:items-center *:justify-between lg:grid-cols-1'>
-        <li>
-          <span className=''>套餐时长</span>
-          <span>
-            {order?.quantity === 1 ? '30天' : ''}
-            {order?.quantity === 12 ? '365天' : ''}
-          </span>
-        </li>
-        {order?.type && [1, 2].includes(order?.type) && (
-          <li>
-            <span className=''>{t('billing.duration')}</span>
-            <span>
-              {order?.quantity || 1} {t(order?.unit_time || 'Month')}
+    <Card>
+      <CardHeader>
+        <CardTitle>{t('billingTitle')}</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <div className={'grid gap-4'}>
+          <div className={'flex items-center justify-between'}>
+            <span className={'text-muted-foreground'}>{t('productDiscount')}</span>
+            <span className={''}>-¥ {order?.discount_amount}</span>
+          </div>
+          <div className={'flex items-center justify-between'}>
+            <span className={'text-muted-foreground'}>{t('couponDiscount')}</span>
+            <span className={''}>-¥ {order?.coupon_discount_amount}</span>
+          </div>
+          <div className={'flex items-center justify-between'}>
+            <span className={'text-muted-foreground'}>{t_c('planDuration')}</span>
+            <span className={''}>
+              {order?.quantity === 1 ? t_c('30days') : ''}
+              {order?.quantity === 12 ? t_c('365days') : ''}
             </span>
-          </li>
-        )}
-        <li>
-          <span className=''>{t('billing.price')}</span>
-          <span>
-            <Display type='currency' value={order?.price || order?.unit_price} />
-          </span>
-        </li>
-        <li>
-          <span className=''>{t('billing.productDiscount')}</span>
-          <span>
-            <Display type='currency' value={order?.discount} />
-          </span>
-        </li>
-        <li>
-          <span className=''>{t('billing.couponDiscount')}</span>
-          <span>
-            <Display type='currency' value={order?.coupon_discount} />
-          </span>
-        </li>
-        <li>
-          <span className='text-muted-foreground'>{t('billing.fee')}</span>
-          <span>
-            <Display type='currency' value={order?.fee_amount} />
-          </span>
-        </li>
-        <li>
-          <span className='text-muted-foreground'>{t('billing.gift')}</span>
-          <span>
-            <Display type='currency' value={order?.gift_amount} />
-          </span>
-        </li>
-      </ul>
-      <Separator className={'mb-3 mt-4 bg-[#225BA9]'} />
-      <div className='flex items-center justify-between font-semibold text-[#666]'>
-        <span className=''>支付金额</span>
-        <span>
-          <Display type='currency' value={order?.amount} />
-        </span>
-      </div>
-    </>
+          </div>
+          <div className={'flex items-center justify-between'}>
+            <span className={'text-muted-foreground'}>{t('gift')}</span>
+            <span className={''}>-¥ {order?.gift_balance_deduction_amount}</span>
+          </div>
+          <div className={'flex items-center justify-between'}>
+            <span className={'text-muted-foreground'}>{t('fee')}</span>
+            <span className={''}>¥ {order?.fee}</span>
+          </div>
+          <Separator />
+          <div className={'flex items-center justify-between font-medium'}>
+            <span className={'text-muted-foreground'}>{t('total')}</span>
+            <span className={''}>¥ {order?.total_amount}</span>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
   );
 }

apps/user/components/user-nav.tsx

@@ -10,6 +10,7 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from '@workspace/airo-ui/components/dropdown-menu';
+import { useSidebar } from '@workspace/airo-ui/components/sidebar';
 import { Icon } from '@workspace/airo-ui/custom-components/icon';
 import { useIsMobile } from '@workspace/airo-ui/hooks/use-mobile';
 import { useTranslations } from 'next-intl';
@@ -20,7 +21,7 @@ export function UserNav({ from = '' }: { from?: string }) {
   const { user, setUser } = useGlobalStore();
   const router = useRouter();
   const pathname = usePathname();
-  // const { toggleSidebar } = useSidebar();
+  const { toggleSidebar } = useSidebar();
   const isMobile = useIsMobile();
   if (user) {
     return (
@@ -97,7 +98,7 @@ export function UserNav({ from = '' }: { from?: string }) {
               data-active={pathname === item.url}
               onClick={() => {
                 if (pathname === item.url) return;
-                /* toggleSidebar();*/
+                toggleSidebar();
                 router.push(`${item.url}`);
               }}
               className='flex cursor-pointer items-center gap-3 rounded-full bg-white px-5 py-2 text-base font-medium focus:bg-[#0F2C53] focus:text-white data-[active=true]:bg-[#0F2C53] data-[active=true]:text-white md:text-xl'