From d6bb9f3683d279acfbc210c330f4f185b60580d1 Mon Sep 17 00:00:00 2001
From: speakeloudest <speakeloudest@gmail.com>
Date: Tue, 29 Jul 2025 03:28:40 -0700
Subject: [PATCH] =?UTF-8?q?fix:=20=E6=8F=90=E4=BA=A4=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=E5=92=8C=E4=BE=A7=E8=BE=B9=E6=A0=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../app/(main)/(content)/(user)/layout.tsx    |   4 +-
 .../(main)/(content)/(user)/sidebar-left.tsx  |  60 ++--
 apps/user/app/(main)/(content)/layout.tsx     |  11 +-
 apps/user/app/(main)/page.tsx                 |   3 +-
 apps/user/app/auth/email/login-form.tsx       |   8 +-
 apps/user/app/auth/email/register-form.tsx    |  14 +-
 apps/user/app/auth/email/reset-form.tsx       |   8 +-
 apps/user/components/Header/NewHeader.tsx     |   3 +-
 .../components/main/OfferDialog/index.tsx     | 323 +++++++++++++++++-
 apps/user/components/user-nav.tsx             |  97 +++---
 apps/user/config/navs.ts                      |  14 +-
 apps/user/locales/zh-CN/menu.json             |  10 +-
 .../{components/Header => public}/image.png   | Bin
 13 files changed, 433 insertions(+), 122 deletions(-)
 rename apps/user/{components/Header => public}/image.png (100%)

diff --git a/apps/user/app/(main)/(content)/(user)/layout.tsx b/apps/user/app/(main)/(content)/(user)/layout.tsx
index 7d99efd..dcc2aeb 100644
--- a/apps/user/app/(main)/(content)/(user)/layout.tsx
+++ b/apps/user/app/(main)/(content)/(user)/layout.tsx
@@ -7,9 +7,9 @@ import { SidebarRight } from './sidebar-right';
 export default async function DashboardLayout({ children }: { children: React.ReactNode }) {
   return (
     <SidebarProvider className='container'>
-      <SidebarLeft className='sticky top-[84px] hidden w-52 border-r-0 bg-transparent lg:flex' />
+      <SidebarLeft className='sticky w-[288px] border-r-0 bg-transparent lg:flex' />
       <SidebarInset className='relative p-4'>{children}</SidebarInset>
-      <SidebarRight className='sticky top-[84px] hidden w-52 border-r-0 bg-transparent 2xl:flex' />
+      <SidebarRight className='sticky top-[84px] hidden w-[288px] border-r-0 bg-transparent 2xl:flex' />
       <Announcement type='popup' Authorization={(await cookies()).get('Authorization')?.value} />
     </SidebarProvider>
   );
diff --git a/apps/user/app/(main)/(content)/(user)/sidebar-left.tsx b/apps/user/app/(main)/(content)/(user)/sidebar-left.tsx
index 25a1674..d802083 100644
--- a/apps/user/app/(main)/(content)/(user)/sidebar-left.tsx
+++ b/apps/user/app/(main)/(content)/(user)/sidebar-left.tsx
@@ -1,17 +1,16 @@
 'use client';
+import { UserNav } from '@/components/user-nav';
 import { navs } from '@/config/navs';
 import {
   Sidebar,
   SidebarContent,
-  SidebarGroup,
-  SidebarGroupContent,
-  SidebarGroupLabel,
   SidebarMenu,
   SidebarMenuButton,
   SidebarMenuItem,
 } from '@workspace/ui/components/sidebar';
 import { Icon } from '@workspace/ui/custom-components/icon';
 import { useTranslations } from 'next-intl';
+import Image from 'next/legacy/image';
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 
@@ -19,34 +18,39 @@ export function SidebarLeft({ ...props }: React.ComponentProps<typeof Sidebar>)
   const t = useTranslations('menu');
   const pathname = usePathname();
   return (
-    <Sidebar collapsible='none' side='left' {...props}>
-      <SidebarContent>
-        <SidebarMenu>
-          {navs.map((nav) => (
-            <SidebarGroup key={nav.title}>
-              {nav.items && <SidebarGroupLabel>{t(nav.title)}</SidebarGroupLabel>}
-              <SidebarGroupContent>
-                <SidebarMenu>
-                  {(nav.items || [nav]).map((item) => (
-                    <SidebarMenuItem key={item.title}>
-                      <SidebarMenuButton
-                        asChild
-                        tooltip={t(item.title)}
-                        isActive={item.url === pathname}
-                      >
-                        <Link href={item.url}>
-                          {item.icon && <Icon icon={item.icon} />}
-                          <span>{t(item.title)}</span>
-                        </Link>
-                      </SidebarMenuButton>
-                    </SidebarMenuItem>
-                  ))}
-                </SidebarMenu>
-              </SidebarGroupContent>
-            </SidebarGroup>
+    <Sidebar collapsible='none' side='left' {...props} className={'h-auto bg-white'}>
+      <div className='pb-7 pt-12'>
+        <Image src={'image.png'} width={102} height={49} alt='logo' unoptimized />
+      </div>
+      <SidebarContent className={''}>
+        <SidebarMenu className={'gap-2.5'}>
+          {navs.map((nav, navIndex) => (
+            <SidebarMenu key={navIndex} className={navIndex === 0 ? 'mb-[42px]' : 0}>
+              {(nav.items || [nav]).map((item) => (
+                <SidebarMenuItem key={item.title} className={''}>
+                  <SidebarMenuButton
+                    className={
+                      'h-[60px] rounded-full px-5 py-[18px] text-xl hover:bg-[#0F2C53] active:bg-[#0F2C53] data-[active=true]:bg-[#0F2C53]'
+                    }
+                    asChild
+                    tooltip={t(item.title)}
+                    isActive={item.url === pathname}
+                  >
+                    <Link href={item.url}>
+                      {item.icon && <Icon className={'!size-6'} icon={item.icon} />}
+                      <span>{t(item.title)}</span>
+                    </Link>
+                  </SidebarMenuButton>
+                </SidebarMenuItem>
+              ))}
+            </SidebarMenu>
           ))}
         </SidebarMenu>
       </SidebarContent>
+
+      <div>
+        <UserNav from='profile' />
+      </div>
     </Sidebar>
   );
 }
diff --git a/apps/user/app/(main)/(content)/layout.tsx b/apps/user/app/(main)/(content)/layout.tsx
index 960df4e..2b8874f 100644
--- a/apps/user/app/(main)/(content)/layout.tsx
+++ b/apps/user/app/(main)/(content)/layout.tsx
@@ -1,12 +1,3 @@
-import Footer from '@/components/footer';
-import Header from '@/components/Header/header';
-
 export default async function MainLayout({ children }: { children: React.ReactNode }) {
-  return (
-    <>
-      <Header />
-      {children}
-      <Footer />
-    </>
-  );
+  return <>{children}</>;
 }
diff --git a/apps/user/app/(main)/page.tsx b/apps/user/app/(main)/page.tsx
index dbee382..d449ac7 100644
--- a/apps/user/app/(main)/page.tsx
+++ b/apps/user/app/(main)/page.tsx
@@ -5,7 +5,6 @@ import { Stats } from '@/components/main/stats';*/
 import NewHeader from '@/components/Header/NewHeader';
 import { queryUserInfo } from '@/services/user/user';
 import { cookies } from 'next/headers';
-import { redirect } from 'next/navigation';
 
 import FooterCopyright from '@/components/main/FooterCopyright';
 import FullScreenVideoBackground from '@/components/main/FullScreenVideoBackground';
@@ -26,7 +25,7 @@ export default async function Home() {
     }
 
     if (user) {
-      redirect('/dashboard');
+      // redirect('/dashboard');
     }
   }
 
diff --git a/apps/user/app/auth/email/login-form.tsx b/apps/user/app/auth/email/login-form.tsx
index 4bda980..32fbb33 100644
--- a/apps/user/app/auth/email/login-form.tsx
+++ b/apps/user/app/auth/email/login-form.tsx
@@ -59,7 +59,7 @@ export default function LoginForm({
               <FormItem className={'mb-5'}>
                 <FormControl>
                   <Input
-                    className={'h-[60px] text-xl'}
+                    className={'h-[60px] text-xl shadow-[inset_0_0_7.6px_0_#00000040]'}
                     placeholder='Email'
                     type='email'
                     {...field}
@@ -76,7 +76,7 @@ export default function LoginForm({
               <FormItem className={'mb-2'}>
                 <FormControl>
                   <Input
-                    className={'h-[60px] text-xl'}
+                    className={'h-[60px] text-xl shadow-[inset_0_0_7.6px_0_#00000040]'}
                     placeholder='password'
                     type='password'
                     {...field}
@@ -104,14 +104,14 @@ export default function LoginForm({
             <Button
               variant='link'
               type='button'
-              className='p-0'
+              className='p-0 text-[#225BA9]'
               onClick={() => onSwitchForm('reset')}
             >
               {t('forgotPassword')}
             </Button>
             <Button
               variant='link'
-              className='p-0'
+              className='p-0 text-[#225BA9]'
               onClick={() => {
                 setInitialValues(undefined);
                 onSwitchForm('register');
diff --git a/apps/user/app/auth/email/register-form.tsx b/apps/user/app/auth/email/register-form.tsx
index 14bf83a..6b2fc19 100644
--- a/apps/user/app/auth/email/register-form.tsx
+++ b/apps/user/app/auth/email/register-form.tsx
@@ -102,7 +102,7 @@ export default function RegisterForm({
                   <FormItem>
                     <FormControl>
                       <Input
-                        className={'h-[60px] text-xl'}
+                        className={'h-[60px] text-xl shadow-[inset_0_0_7.6px_0_#00000040]'}
                         placeholder='Enter your email...'
                         type='email'
                         {...field}
@@ -119,7 +119,7 @@ export default function RegisterForm({
                   <FormItem>
                     <FormControl>
                       <Input
-                        className={'h-[60px] text-xl'}
+                        className={'h-[60px] text-xl shadow-[inset_0_0_7.6px_0_#00000040]'}
                         placeholder='Enter your password...'
                         type='password'
                         {...field}
@@ -136,7 +136,7 @@ export default function RegisterForm({
                   <FormItem>
                     <FormControl>
                       <Input
-                        className={'h-[60px] text-xl'}
+                        className={'h-[60px] text-xl shadow-[inset_0_0_7.6px_0_#00000040]'}
                         disabled={loading}
                         placeholder='Enter password again...'
                         type='password'
@@ -157,7 +157,9 @@ export default function RegisterForm({
                         <div className='flex items-center gap-8'>
                           <Input
                             disabled={loading}
-                            className={'h-[60px] flex-1 text-xl'}
+                            className={
+                              'h-[60px] flex-1 text-xl shadow-[inset_0_0_7.6px_0_#00000040]'
+                            }
                             placeholder='Enter code...'
                             type='text'
                             {...field}
@@ -184,7 +186,7 @@ export default function RegisterForm({
                   <FormItem>
                     <FormControl>
                       <Input
-                        className={'h-[60px] text-xl'}
+                        className={'h-[60px] text-xl shadow-[inset_0_0_7.6px_0_#00000040]'}
                         disabled={loading || !!localStorage.getItem('invite')}
                         placeholder={t('invite')}
                         {...field}
@@ -215,7 +217,7 @@ export default function RegisterForm({
               {t('existingAccount')}&nbsp;
               <Button
                 variant='link'
-                className='p-0'
+                className='p-0 text-[#225BA9]'
                 onClick={() => {
                   setInitialValues(undefined);
                   onSwitchForm('login');
diff --git a/apps/user/app/auth/email/reset-form.tsx b/apps/user/app/auth/email/reset-form.tsx
index 887c563..62f6ce5 100644
--- a/apps/user/app/auth/email/reset-form.tsx
+++ b/apps/user/app/auth/email/reset-form.tsx
@@ -65,7 +65,7 @@ export default function ResetForm({
                 <FormItem>
                   <FormControl>
                     <Input
-                      className={'h-[60px] text-xl'}
+                      className={'h-[60px] text-xl shadow-[inset_0_0_7.6px_0_#00000040]'}
                       placeholder='Enter your email...'
                       type='email'
                       {...field}
@@ -83,7 +83,7 @@ export default function ResetForm({
                   <FormControl>
                     <div className='flex items-center gap-8'>
                       <Input
-                        className={'h-[60px] flex-1 text-xl'}
+                        className={'h-[60px] flex-1 text-xl shadow-[inset_0_0_7.6px_0_#00000040]'}
                         disabled={loading}
                         placeholder='Enter code...'
                         type='text'
@@ -110,7 +110,7 @@ export default function ResetForm({
                 <FormItem>
                   <FormControl>
                     <Input
-                      className={'h-[60px] text-xl'}
+                      className={'h-[60px] text-xl shadow-[inset_0_0_7.6px_0_#00000040]'}
                       placeholder='Enter your new password...'
                       type='password'
                       {...field}
@@ -139,7 +139,7 @@ export default function ResetForm({
             {t('existingAccount')}&nbsp;
             <Button
               variant='link'
-              className='p-0'
+              className='p-0 text-[#225BA9]'
               onClick={() => {
                 setInitialValues(undefined);
                 onSwitchForm('login');
diff --git a/apps/user/components/Header/NewHeader.tsx b/apps/user/components/Header/NewHeader.tsx
index 4390b88..f19debc 100644
--- a/apps/user/components/Header/NewHeader.tsx
+++ b/apps/user/components/Header/NewHeader.tsx
@@ -11,7 +11,6 @@ import LanguageSwitch from '../language-switch';
 import EmailAuthDialog, { EmailAuthDialogRef } from '@/app/auth/EmailAuthDialog/EmailAuthDialog';
 import { useRef } from 'react';
 import { UserNav } from '../user-nav';
-import ImageLogo from './image.png';
 
 export default function Header() {
   const t = useTranslations('common');
@@ -19,7 +18,7 @@ export default function Header() {
   const { user } = useGlobalStore();
   const Logo = (
     <Link href='/' className='-mt-2.5 flex items-center gap-2 font-bold'>
-      <Image src={ImageLogo} width={102} height={49} alt='logo' unoptimized />
+      <Image src={'image.png'} width={102} height={49} alt='logo' unoptimized />
     </Link>
   );
 
diff --git a/apps/user/components/main/OfferDialog/index.tsx b/apps/user/components/main/OfferDialog/index.tsx
index bbba377..03f9525 100644
--- a/apps/user/components/main/OfferDialog/index.tsx
+++ b/apps/user/components/main/OfferDialog/index.tsx
@@ -1,7 +1,131 @@
 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/ui/components/dialog';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@workspace/ui/components/tabs';
 import Image from 'next/image';
-import { forwardRef, useImperativeHandle, useState } from 'react';
+import { forwardRef, useEffect, useImperativeHandle, useState } from 'react';
+
+// 定义数据类型
+interface SubscriptionData {
+  id: string;
+  name: string;
+  price: number;
+  originalPrice: number;
+  duration: string;
+  features: {
+    traffic: string;
+    duration: string;
+    onlineIPs: string;
+    connections: string;
+    bandwidth: string;
+    nodes: string;
+    stability: number; // 星级 1-5
+  };
+}
+
+// 套餐卡片组件
+const PlanCard = ({ plan, isSelected }: { plan: SubscriptionData; isSelected?: boolean }) => {
+  return (
+    <div
+      className={`relative w-full max-w-[345px] cursor-pointer rounded-[20px] border border-[#D9D9D9] bg-white p-4 transition-all duration-300 sm:p-6 md:p-8 ${
+        isSelected
+          ? 'border-[#0F2C53] shadow-[0px_0px_52.6px_1px_rgba(15,44,83,0.05)]'
+          : 'shadow-[0px_0px_52.6px_1px_rgba(15,44,83,0.05)] hover:border-[#0F2C53]'
+      } `}
+    >
+      {/* 套餐名称 */}
+      <h3 className='mb-4 text-left text-sm font-normal sm:mb-6 sm:text-base'>{plan.name}</h3>
+
+      {/* 价格区域 */}
+      <div className='mb-6 sm:mb-8'>
+        <div className='mb-2 flex items-baseline gap-2'>
+          <span className='text-lg font-bold leading-[1.125em] text-[#666666] line-through sm:text-xl md:text-[24px]'>
+            ¥{plan.originalPrice}
+          </span>
+          <span className='text-lg font-bold leading-[1.125em] text-[#091B33] sm:text-xl md:text-[24px]'>
+            ${plan.price}
+          </span>
+          <span className='text-sm font-normal leading-[1.8em] text-[#4D4D4D] sm:text-[15px]'>
+            /月
+          </span>
+        </div>
+        <p className='text-left text-[10px] font-normal text-black'>年付享受8折优惠</p>
+      </div>
+
+      {/* 订阅按钮 */}
+      <button
+        className={`h-8 w-full rounded-full bg-[#0F2C53] text-xs font-medium leading-[1.9285714285714286em] text-white shadow-md transition-all duration-300 hover:bg-[#0A2C47] sm:h-10 sm:text-sm md:h-[40px] md:text-[14px]`}
+      >
+        订阅
+      </button>
+
+      {/* 功能列表 */}
+      <div className='mt-6 space-y-0 sm:mt-8'>
+        <div className='flex items-start justify-between py-1'>
+          <span className='text-xs font-light leading-[1.8461538461538463em] text-black sm:text-[13px]'>
+            可用流量：
+          </span>
+          <span className='text-right text-xs font-light leading-[1.8461538461538463em] text-black sm:text-[13px]'>
+            {plan.features.traffic}
+          </span>
+        </div>
+        <div className='flex items-start justify-between py-1'>
+          <span className='text-xs font-light leading-[1.8461538461538463em] text-black sm:text-[13px]'>
+            套餐时长：
+          </span>
+          <span className='text-right text-xs font-light leading-[1.8461538461538463em] text-black sm:text-[13px]'>
+            {plan.features.duration}
+          </span>
+        </div>
+        <div className='flex items-start justify-between py-1'>
+          <span className='text-xs font-light leading-[1.8461538461538463em] text-black sm:text-[13px]'>
+            在线IP：
+          </span>
+          <span className='text-right text-xs font-light leading-[1.8461538461538463em] text-black sm:text-[13px]'>
+            {plan.features.onlineIPs}
+          </span>
+        </div>
+        <div className='flex items-start justify-between py-1'>
+          <span className='text-xs font-light leading-[1.8461538461538463em] text-black sm:text-[13px]'>
+            在线连接数：
+          </span>
+          <span className='text-right text-xs font-light leading-[1.8461538461538463em] text-black sm:text-[13px]'>
+            {plan.features.connections}
+          </span>
+        </div>
+        <div className='flex items-start justify-between py-1'>
+          <span className='text-xs font-light leading-[1.8461538461538463em] text-black sm:text-[13px]'>
+            峰值带宽：
+          </span>
+          <span className='text-right text-xs font-light leading-[1.8461538461538463em] text-black sm:text-[13px]'>
+            {plan.features.bandwidth}
+          </span>
+        </div>
+        <div className='flex items-start justify-between py-1'>
+          <span className='text-xs font-light leading-[1.8461538461538463em] text-black sm:text-[13px]'>
+            可用节点：
+          </span>
+          <span className='text-right text-xs font-light leading-[1.8461538461538463em] text-black sm:text-[13px]'>
+            {plan.features.nodes}
+          </span>
+        </div>
+        <div className='flex items-start justify-between py-1'>
+          <span className='text-xs font-light leading-[1.8461538461538463em] text-black sm:text-[13px]'>
+            网络稳定指数:
+          </span>
+          <div className='text-right text-xs font-light leading-[1.8461538461538463em] text-black sm:text-[13px]'>
+            {Array.from({ length: plan.features.stability }, (_, i) => (
+              <span key={i} className='text-black'>
+                ✭
+              </span>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
 
 export interface OfferDialogRef {
   show: () => void;
@@ -11,26 +135,215 @@ export interface OfferDialogRef {
 const OfferDialog = forwardRef<OfferDialogRef>((props, ref) => {
   const [open, setOpen] = useState(false);
 
+  // 使用 useQuery 来管理请求
+  const { data, isLoading, error, refetch } = useQuery({
+    queryKey: ['subscription'],
+    queryFn: async () => {
+      try {
+        const response = await getSubscription({ skipErrorHandler: true });
+        // 确保返回有效的数组，避免 undefined
+        const list = response.data?.data?.list || [];
+        return list as SubscriptionData[];
+      } catch (err) {
+        // 自定义错误处理
+        console.error('获取订阅数据失败:', err);
+        // 返回空数组而不是抛出错误，避免 queryFn 返回 undefined
+        return [] as SubscriptionData[];
+      }
+    },
+    enabled: false, // 初始不执行，手动控制
+    retry: 1, // 失败时重试1次
+  });
+
+  // 监听对话框打开状态，触发请求
+  useEffect(() => {
+    if (open) {
+      refetch(); // 对话框打开时重新获取数据
+    }
+  }, [open, refetch]);
+
   useImperativeHandle(ref, () => ({
     show: () => setOpen(true),
     hide: () => setOpen(false),
   }));
 
+  // 处理数据
+  const processedData =
+    data?.map((item) => ({
+      ...item,
+      displayPrice: `¥${item.price}`,
+      displayDuration: item.duration === 'year' ? '年付' : '月付',
+    })) || [];
+
+  // 如果没有数据，使用模拟数据
+  const mockData: SubscriptionData[] = [
+    {
+      id: '1',
+      name: 'Basic Plan',
+      price: 8,
+      originalPrice: 10,
+      duration: 'year',
+      isPopular: false,
+      features: {
+        traffic: '140G',
+        duration: '30天',
+        onlineIPs: '3个',
+        connections: '300',
+        bandwidth: '200Mbps',
+        nodes: '15个',
+        stability: 3,
+      },
+    },
+    {
+      id: '2',
+      name: 'Standard Plan',
+      price: 24,
+      originalPrice: 30,
+      duration: 'year',
+      features: {
+        traffic: '160G',
+        duration: '30天',
+        onlineIPs: '3个',
+        connections: '300',
+        bandwidth: '300Mbps',
+        nodes: '15个',
+        stability: 4,
+      },
+    },
+    {
+      id: '3',
+      name: 'Pro Plan',
+      price: 48,
+      originalPrice: 60,
+      duration: 'year',
+      isPopular: false,
+      features: {
+        traffic: '180G',
+        duration: '30天',
+        onlineIPs: '3个',
+        connections: '300',
+        bandwidth: '500Mbps',
+        nodes: '29个',
+        stability: 5,
+      },
+    },
+  ];
+
+  // 使用真实数据或模拟数据
+  const displayData = mockData;
+
+  // 按类型分组数据
+  const yearlyPlans = displayData.filter((item) => item.duration === 'year');
+  const monthlyPlans = displayData.filter((item) => item.duration === 'month');
+  console.log(processedData);
   return (
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogContent
         className={
-          'rounded-0 !container h-full w-full px-12 py-[4.5rem] md:h-auto md:w-[496px] md:!rounded-[50px]'
+          'rounded-0 !container h-full w-full px-8 py-8 md:h-auto md:w-[1000px] md:!rounded-[32px] md:px-12 md:py-12'
         }
         closeIcon={<Image src={CloseSvg} alt={'close'} />}
         closeClassName={
-          'right-[40px] top-[30px] font-bold text-black opacity-100 focus:ring-0 focus:ring-offset-0'
+          'right-6 top-6 font-bold text-black opacity-100 focus:ring-0 focus:ring-offset-0'
         }
       >
-        <DialogTitle className={'text-center text-5xl font-bold text-[#0F2C53]'}>
+        <DialogTitle className={'mb-4 text-center text-4xl font-bold text-[#0F2C53] md:text-5xl'}>
           选择套餐
         </DialogTitle>
-        <div className={'min-h-[524px]'}>套餐内容</div>
+        <div className={'min-h-[600px]'}>
+          <div className={'mb-8 text-center text-lg font-medium text-[#666666]'}>
+            选择最适合您的服务套餐
+          </div>
+          <div className={'mt-8'}>
+            <Tabs defaultValue='year' className={'text-center'}>
+              <TabsList className='mb-8 h-[74px] flex-wrap rounded-full bg-[#EAEAEA] p-2.5'>
+                <TabsTrigger
+                  className={
+                    'rounded-full px-12 py-3.5 text-xl data-[state=active]:bg-[#0F2C53] data-[state=active]:text-white'
+                  }
+                  value='year'
+                >
+                  年付套餐
+                </TabsTrigger>
+                <TabsTrigger
+                  className={
+                    'rounded-full px-12 py-3.5 text-xl data-[state=active]:bg-[#0F2C53] data-[state=active]:text-white'
+                  }
+                  value='month'
+                >
+                  月付套餐
+                </TabsTrigger>
+              </TabsList>
+
+              <TabsContent value='year'>
+                {isLoading ? (
+                  <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>
+                ) : error ? (
+                  <div className='py-12 text-center'>
+                    <p className='text-lg text-red-500'>加载失败，请重试</p>
+                    <button
+                      onClick={() => refetch()}
+                      className='mt-4 rounded-lg bg-[#0F2C53] px-6 py-2 text-white transition-colors hover:bg-[#0A2C47]'
+                    >
+                      重新加载
+                    </button>
+                  </div>
+                ) : yearlyPlans.length > 0 ? (
+                  <div className='relative'>
+                    {/* 卡片容器 */}
+                    <div className='mt-8 grid grid-cols-1 justify-items-center gap-4 sm:grid-cols-2 sm:gap-6 lg:grid-cols-3 lg:gap-8'>
+                      {yearlyPlans.map((plan, index) => (
+                        <PlanCard key={plan.id} plan={plan} />
+                      ))}
+                    </div>
+                  </div>
+                ) : (
+                  <div className='py-12 text-center'>
+                    <p className='text-lg text-gray-500'>暂无年付套餐</p>
+                  </div>
+                )}
+              </TabsContent>
+
+              <TabsContent value='month'>
+                {isLoading ? (
+                  <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>
+                ) : error ? (
+                  <div className='py-12 text-center'>
+                    <p className='text-lg text-red-500'>加载失败，请重试</p>
+                    <button
+                      onClick={() => refetch()}
+                      className='mt-4 rounded-lg bg-[#0F2C53] px-6 py-2 text-white transition-colors hover:bg-[#0A2C47]'
+                    >
+                      重新加载
+                    </button>
+                  </div>
+                ) : monthlyPlans.length > 0 ? (
+                  <div className='relative'>
+                    {/* 连接线 */}
+                    <div className='absolute left-1/2 top-0 h-8 w-0.5 -translate-x-1/2 transform bg-gradient-to-b from-[#0F2C53] to-transparent opacity-60'></div>
+
+                    {/* 卡片容器 */}
+                    <div className='mt-8 grid grid-cols-1 justify-items-center gap-4 sm:grid-cols-2 sm:gap-6 lg:grid-cols-3 lg:gap-8'>
+                      {monthlyPlans.map((plan, index) => (
+                        <PlanCard key={plan.id} plan={plan} />
+                      ))}
+                    </div>
+                  </div>
+                ) : (
+                  <div className='py-12 text-center'>
+                    <p className='text-lg text-gray-500'>暂无月付套餐</p>
+                  </div>
+                )}
+              </TabsContent>
+            </Tabs>
+          </div>
+        </div>
       </DialogContent>
     </Dialog>
   );
diff --git a/apps/user/components/user-nav.tsx b/apps/user/components/user-nav.tsx
index b2f7cd0..0365c0b 100644
--- a/apps/user/components/user-nav.tsx
+++ b/apps/user/components/user-nav.tsx
@@ -1,61 +1,76 @@
 'use client';
 
-import { navs } from '@/config/navs';
 import useGlobalStore from '@/config/use-global';
 import { Logout } from '@/utils/common';
 import { Avatar, AvatarFallback, AvatarImage } from '@workspace/ui/components/avatar';
 import {
   DropdownMenu,
   DropdownMenuContent,
-  DropdownMenuGroup,
   DropdownMenuItem,
-  DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from '@workspace/ui/components/dropdown-menu';
 import { Icon } from '@workspace/ui/custom-components/icon';
 import { useTranslations } from 'next-intl';
-import { useRouter } from 'next/navigation';
+import { usePathname, useRouter } from 'next/navigation';
 
-export function UserNav() {
+export function UserNav({ from }: { from: string }) {
   const t = useTranslations('menu');
   const { user, setUser } = useGlobalStore();
   const router = useRouter();
-
+  const pathname = usePathname();
   if (user) {
     return (
       <DropdownMenu>
         <DropdownMenuTrigger asChild>
-          <div className='bg-background hover:bg-accent flex cursor-pointer items-center gap-2 rounded-full border px-2 py-1.5 transition-colors duration-200'>
-            <Avatar className='h-6 w-6'>
+          {from === 'profile' ? (
+            <div className='mb-3 flex cursor-pointer items-center gap-2 rounded-full bg-[#EAEAEA] p-1 pr-6'>
+              <Avatar className='h-[52px] w-[52px]'>
+                <AvatarImage
+                  alt={user?.avatar ?? ''}
+                  src={user?.avatar ?? ''}
+                  className='object-cover'
+                />
+                <AvatarFallback className='to-primary text-background bg-[#0F2C53] bg-gradient-to-br text-[40px] font-bold'>
+                  {user?.auth_methods?.[0]?.auth_identifier.toUpperCase().charAt(0)}
+                </AvatarFallback>
+              </Avatar>
+              <div className='flex flex-1 items-center justify-between'>
+                {user?.auth_methods?.[0]?.auth_identifier.split('@')[0]}
+              </div>
+              <Icon icon='lucide:ellipsis' className='text-muted-foreground !size-6' />
+            </div>
+          ) : (
+            <Avatar className='h-16 w-16 cursor-pointer'>
               <AvatarImage
                 alt={user?.avatar ?? ''}
                 src={user?.auth_methods?.[0]?.auth_identifier ?? ''}
                 className='object-cover'
               />
-              <AvatarFallback className='from-primary/90 to-primary text-background bg-gradient-to-br font-medium'>
+              <AvatarFallback className='text-background bg-[#0F2C53] bg-gradient-to-br text-5xl font-bold'>
                 {user?.auth_methods?.[0]?.auth_identifier.toUpperCase().charAt(0)}
               </AvatarFallback>
             </Avatar>
-            <span className='max-w-[40px] truncate text-sm sm:max-w-[100px]'>
-              {user?.auth_methods?.[0]?.auth_identifier.split('@')[0]}
-            </span>
-            <Icon icon='lucide:chevron-down' className='text-muted-foreground size-4' />
-          </div>
+          )}
         </DropdownMenuTrigger>
-        <DropdownMenuContent forceMount align='end' className='w-64'>
-          <div className='flex items-center justify-start gap-2 p-2'>
-            <Avatar className='h-10 w-10'>
+        <DropdownMenuContent
+          forceMount
+          align='end'
+          side={from === 'profile' ? 'right' : ''}
+          className='w-64 gap-3 rounded-[42px] p-3'
+        >
+          <div className='mb-3 flex items-center justify-start gap-2 rounded-full bg-[#EAEAEA] p-1'>
+            <Avatar className='h-[52px] w-[52px]'>
               <AvatarImage
                 alt={user?.avatar ?? ''}
                 src={user?.avatar ?? ''}
                 className='object-cover'
               />
-              <AvatarFallback className='from-primary/90 to-primary text-background bg-gradient-to-br'>
+              <AvatarFallback className='to-primary text-background bg-[#225BA9] bg-gradient-to-br text-2xl font-bold'>
                 {user?.auth_methods?.[0]?.auth_identifier.toUpperCase().charAt(0)}
               </AvatarFallback>
             </Avatar>
             <div className='flex flex-col space-y-0.5'>
-              <p className='text-sm font-medium leading-none'>
+              <p className='text-xl font-medium leading-none'>
                 {user?.auth_methods?.[0]?.auth_identifier.split('@')[0]}
               </p>
               <p className='text-muted-foreground text-xs'>
@@ -63,36 +78,34 @@ export function UserNav() {
               </p>
             </div>
           </div>
-          <DropdownMenuSeparator />
-          {navs.map((nav) => (
-            <DropdownMenuGroup key={nav.title}>
-              {(nav.items || [nav]).map((item) => (
-                <DropdownMenuItem
-                  key={item.title}
-                  onClick={() => {
-                    router.push(`${item.url}`);
-                  }}
-                  className='flex cursor-pointer items-center gap-2 py-2'
-                >
-                  <Icon className='text-muted-foreground size-4 flex-none' icon={item.icon!} />
-                  <span className='flex-grow truncate'>{t(item.title)}</span>
-                  <Icon
-                    icon='lucide:chevron-right'
-                    className='text-muted-foreground size-4 opacity-50'
-                  />
-                </DropdownMenuItem>
-              ))}
-            </DropdownMenuGroup>
+          {[
+            {
+              title: 'profile',
+              url: '/profile',
+              icon: 'uil:dashboard',
+            },
+          ].map((item) => (
+            <DropdownMenuItem
+              key={item.title}
+              data-active={pathname === item.url}
+              onClick={() => {
+                if (pathname === item.url) return;
+                router.push(`${item.url}`);
+              }}
+              className='mb-3 flex cursor-pointer items-center gap-3 rounded-full px-5 py-2 text-xl font-medium focus:bg-[#0F2C53] focus:text-white data-[active=true]:bg-[#0F2C53] data-[active=true]:text-white'
+            >
+              <Icon className='!size-6 flex-none' icon={item.icon!} />
+              <span className='flex-grow truncate'>{t(item.title)}</span>
+            </DropdownMenuItem>
           ))}
-          <DropdownMenuSeparator />
           <DropdownMenuItem
             onClick={() => {
               Logout();
               setUser();
             }}
-            className='text-destructive focus:text-destructive flex cursor-pointer items-center gap-2 py-2'
+            className='flex cursor-pointer items-center gap-3 rounded-full px-5 py-2 text-xl font-medium text-[#0F2C53] focus:bg-[#E22C2E] focus:text-white'
           >
-            <Icon className='size-4 flex-none' icon='uil:exit' />
+            <Icon className='!size-6 flex-none' icon='uil:exit' />
             <span className='flex-grow'>{t('logout')}</span>
           </DropdownMenuItem>
         </DropdownMenuContent>
diff --git a/apps/user/config/navs.ts b/apps/user/config/navs.ts
index 941f74a..f5ed6bf 100644
--- a/apps/user/config/navs.ts
+++ b/apps/user/config/navs.ts
@@ -4,16 +4,6 @@ export const navs = [
     url: '/dashboard',
     icon: 'uil:dashboard',
   },
-  {
-    title: 'personal',
-    items: [
-      {
-        title: 'profile',
-        url: '/profile',
-        icon: 'uil:user',
-      },
-    ],
-  },
   {
     title: 'server',
     items: [
@@ -52,11 +42,11 @@ export const navs = [
         icon: 'uil:book-alt',
         title: 'document',
       },
-      {
+      /*{
         url: '/announcement',
         icon: 'uil:megaphone',
         title: 'announcement',
-      },
+      },*/
       {
         url: '/ticket',
         icon: 'uil:message',
diff --git a/apps/user/locales/zh-CN/menu.json b/apps/user/locales/zh-CN/menu.json
index 83dfd85..6ebb39f 100644
--- a/apps/user/locales/zh-CN/menu.json
+++ b/apps/user/locales/zh-CN/menu.json
@@ -1,8 +1,8 @@
 {
-  "affiliate": "我的邀请",
+  "affiliate": "邀请返利",
   "announcement": "公告列表",
-  "dashboard": "主页",
-  "document": "使用文档",
+  "dashboard": "账户概览",
+  "document": "新手教程",
   "finance": "财务",
   "help": "帮助",
   "logout": "退出登录",
@@ -11,7 +11,7 @@
   "personal": "个人",
   "profile": "个人中心",
   "server": "服务",
-  "subscribe": "购买订阅",
+  "subscribe": "套餐购买",
   "ticket": "我的工单",
-  "wallet": "财务中心"
+  "wallet": "钱包管理"
 }
diff --git a/apps/user/components/Header/image.png b/apps/user/public/image.png
similarity index 100%
rename from apps/user/components/Header/image.png
rename to apps/user/public/image.png