fix: 样式修改

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

@@ -34,7 +34,7 @@ export default function Page() {
   });
 
   return (
-    <div className='space-y-4'>
+    <div className='max-w-[532px] space-y-4'>
       {DocumentList?.length > 0 && (
         <>
           <h2 className='flex items-center gap-1.5 font-semibold'>{t('document')}</h2>
@@ -62,12 +62,19 @@ export default function Page() {
       )}
 
       {TutorialList && TutorialList?.length > 0 && (
-        <>
-          <h2 className='flex items-center gap-1.5 font-semibold'>{t('tutorial')}</h2>
+        <div className='rounded-[46px] bg-[#EAEAEA] px-[34px] py-[28px]'>
+          <div className='font-semibold text-[#666]'>新手教程</div>
+          <div className={'mb-2.5 text-sm text-[#666]'}>选择对应操作系统，查看对应软件配置教程</div>
           <Tabs defaultValue={TutorialList?.[0]?.title}>
-            <TabsList className='h-full flex-wrap'>
+            <TabsList className='h-full flex-wrap gap-1 bg-transparent'>
               {TutorialList?.map((tutorial) => (
-                <TabsTrigger key={tutorial.title} value={tutorial.title}>
+                <TabsTrigger
+                  key={tutorial.title}
+                  value={tutorial.title}
+                  className={
+                    'rounded-full bg-[#EAEAEA] shadow-[inset_0px_0px_4px_0px_rgba(0,0,0,0.25)] data-[state=active]:bg-[#225BA9] data-[state=active]:text-white'
+                  }
+                >
                   {tutorial.title}
                 </TabsTrigger>
               ))}
@@ -85,7 +92,7 @@ export default function Page() {
               </TabsContent>
             ))}
           </Tabs>
-        </>
+        </div>
       )}
     </div>
   );

apps/user/app/(main)/(content)/(user)/document/tutorial-button.tsx

@@ -121,7 +121,7 @@ export function TutorialButton({ items }: { items: Item[] }) {
             layoutId={`card-${item.title}-${id}`}
             key={`card-${item.title}-${id}`}
             onClick={() => setActive(item)}
-            className='bg-background hover:bg-accent flex cursor-pointer items-center justify-between rounded border p-4'
+            className='bg-background hover:bg-accent flex cursor-pointer items-center justify-between rounded-[40px] border p-4'
           >
             <div className='flex flex-row items-center gap-4'>
               <motion.div layoutId={`image-${item.title}-${id}`}>
@@ -133,13 +133,16 @@ export function TutorialButton({ items }: { items: Item[] }) {
                 </Avatar>
               </motion.div>
               <div className=''>
-                <motion.h3 layoutId={`title-${item.title}-${id}`} className='font-medium'>
+                <motion.h3
+                  layoutId={`title-${item.title}-${id}`}
+                  className='font-medium text-[#225BA9]'
+                >
                   {item.title}
                 </motion.h3>
                 {item.updated_at && (
                   <motion.p
                     layoutId={`description-${item.title}-${id}`}
-                    className='text-center text-neutral-600 md:text-left dark:text-neutral-400'
+                    className='text-center font-bold text-[#848484] md:text-left'
                   >
                     {formatDate(new Date(item.updated_at), false)}
                   </motion.p>
@@ -152,7 +155,7 @@ export function TutorialButton({ items }: { items: Item[] }) {
                 buttonVariants({
                   variant: 'secondary',
                 }),
-                'rounded-full',
+                'min-w-[150px] rounded-full border-[#A8D4ED] bg-[#A8D4ED] px-[35px] py-[9px] text-center text-xl font-bold text-white hover:bg-[#225BA9] hover:text-white',
               )}
             >
               {t('read')}

apps/user/app/(main)/(content)/(user)/layout.tsx

@@ -2,14 +2,13 @@ import Announcement from '@/components/announcement';
 import { SidebarInset, SidebarProvider } from '@workspace/ui/components/sidebar';
 import { cookies } from 'next/headers';
 import { SidebarLeft } from './sidebar-left';
-import { SidebarRight } from './sidebar-right';
 
 export default async function DashboardLayout({ children }: { children: React.ReactNode }) {
   return (
     <SidebarProvider className='container'>
       <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-[288px] 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>
   );

apps/user/app/(main)/(content)/(user)/profile/notify-settings.tsx

@@ -39,7 +39,7 @@ export default function NotifySettings() {
   }
 
   return (
-    <Card className='min-w-80 rounded-[20px] border border-[#D9D9D9] p-6 text-[#666666] shadow-[0px_0px_52.6px_1px_rgba(15,44,83,0.05)]'>
+    <Card className='flex h-full flex-col justify-between rounded-[20px] border border-[#D9D9D9] p-6 text-[#666666] shadow-[0px_0px_52.6px_1px_rgba(15,44,83,0.05)]'>
       <div className={'mb-3'}>
         <div className={'text-xl font-bold'}>{t('notify.notificationSettings')}</div>
         <div className={'text-[15px] font-light'}>是否邮箱通知推送</div>

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

@@ -4,12 +4,14 @@ import ThirdPartyAccounts from './third-party-accounts';
 
 export default function Page() {
   return (
-    <div className='flex flex-col gap-4 lg:flex-row lg:flex-wrap lg:*:flex-auto'>
-      <div className={'flex flex-auto flex-col gap-4'}>
+    <div className='flex flex-col gap-[30px] lg:flex-row lg:flex-wrap lg:*:flex-auto'>
+      <div className={'flex max-w-[543px] flex-auto flex-col gap-[30px]'}>
         <ThirdPartyAccounts />
         <ChangePassword />
       </div>
-      <NotifySettings />
+      <div className={'lg:max-w-[195px]'}>
+        <NotifySettings />
+      </div>
     </div>
   );
 }

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

@@ -10,7 +10,11 @@ import { useRef } from 'react';
 
 import { Empty } from '@/components/empty';
 import Recharge from '@/components/subscribe/recharge';
-import { formatDate } from '@workspace/ui/utils';
+import { Button } from '@workspace/ui/components/button';
+import { formatDate, isBrowser } from '@workspace/ui/utils';
+import { Copy } from 'lucide-react';
+import { CopyToClipboard } from 'react-copy-to-clipboard';
+import { toast } from 'sonner';
 
 export default function Page() {
   const t = useTranslations('wallet');
@@ -19,45 +23,68 @@ export default function Page() {
   const totalAssets = (user?.balance || 0) + (user?.commission || 0) + (user?.gift_amount || 0);
   return (
     <>
-      <Card className='mb-4'>
-        <CardContent className='p-6'>
-          <h2 className='text-foreground mb-4 text-2xl font-bold'>{t('assetOverview')}</h2>
+      <Card className='mb-4 rounded-[40px] border border-[#D9D9D9] px-[30px] pb-[30px] pt-[20px] shadow-[0px_0px_52.6px_1px_rgba(15,44,83,0.05)]'>
+        <CardContent className='p-0'>
+          <h2 className='mb-4 flex items-center justify-between text-xl font-bold text-[#666]'>
+            <span>{t('assetOverview')}</span>
+            <Recharge
+              className={
+                'min-w-[150px] rounded-full border-[#A8D4ED] bg-[#A8D4ED] px-[35px] py-[9px] text-center text-xl font-bold hover:bg-[#225BA9] hover:text-white'
+              }
+            />
+          </h2>
           <div className='mb-4'>
             <div className='flex items-center justify-between'>
               <div>
-                <p className='text-sm font-medium'>{t('totalAssets')}</p>
-                <p className='text-3xl font-bold'>
+                <p className='text-sm font-light text-[#666]'>总资产</p>
+                <p className='text-[32px] font-bold'>
                   <Display type='currency' value={totalAssets} />
                 </p>
               </div>
-              <Recharge />
             </div>
           </div>
-          <div className='grid grid-cols-1 gap-6 md:grid-cols-3'>
-            <div className='bg-secondary rounded-lg p-4 shadow-sm transition-all duration-300 hover:shadow-md'>
-              <p className='text-secondary-foreground text-sm font-medium opacity-80'>
-                {t('balance')}
-              </p>
-              <p className='text-secondary-foreground text-2xl font-bold'>
+          <div className='grid grid-cols-1 gap-6 md:grid-cols-4'>
+            <div className='rounded-[20px] bg-[#EAEAEA] p-4 shadow-sm transition-all duration-300 hover:shadow-md'>
+              <p className='mb-3 text-sm font-medium text-[#666] opacity-80'>账户余额</p>
+              <p className='text-2xl font-bold text-[#225BA9]'>
                 <Display type='currency' value={user?.balance} />
               </p>
             </div>
-            <div className='bg-secondary rounded-lg p-4 shadow-sm transition-all duration-300 hover:shadow-md'>
-              <p className='text-secondary-foreground text-sm font-medium opacity-80'>
-                {t('giftAmount')}
-              </p>
-              <p className='text-secondary-foreground text-2xl font-bold'>
+            <div className='rounded-[20px] bg-[#EAEAEA] p-4 shadow-sm transition-all duration-300 hover:shadow-md'>
+              <p className='mb-3 text-sm font-medium text-[#666] opacity-80'>{t('giftAmount')}</p>
+              <p className='text-2xl font-bold text-[#225BA9]'>
                 <Display type='currency' value={user?.gift_amount} />
               </p>
             </div>
-            <div className='bg-secondary rounded-lg p-4 shadow-sm transition-all duration-300 hover:shadow-md'>
-              <p className='text-secondary-foreground text-sm font-medium opacity-80'>
-                {t('commission')}
-              </p>
-              <p className='text-secondary-foreground text-2xl font-bold'>
+            <div className='rounded-[20px] bg-[#EAEAEA] p-4 shadow-sm transition-all duration-300 hover:shadow-md'>
+              <p className='mb-3 text-sm font-medium text-[#666] opacity-80'>{t('commission')}</p>
+              <p className='text-2xl font-bold text-[#225BA9]'>
                 <Display type='currency' value={user?.commission} />
               </p>
             </div>
+            <div className='rounded-[20px] bg-[#EAEAEA] p-4 shadow-sm transition-all duration-300 hover:shadow-md'>
+              <p className='mb-3 flex justify-between text-sm font-medium text-[#666] opacity-80'>
+                <span>返佣邀请码</span>
+                <span className={'text-[#225BA9]'}>返佣详情</span>
+              </p>
+              <p className='flex justify-between text-2xl font-bold text-[#225BA9]'>
+                <span> {user?.refer_code}</span>
+                {isBrowser() && (
+                  <CopyToClipboard
+                    text={`${location?.origin}/auth?invite=${user?.refer_code}`}
+                    onCopy={(text, result) => {
+                      if (result) {
+                        toast.success(t('copySuccess'));
+                      }
+                    }}
+                  >
+                    <Button variant='secondary' size='sm' className='gap-2'>
+                      <Copy className='h-4 w-4' />
+                    </Button>
+                  </CopyToClipboard>
+                )}
+              </p>
+            </div>
           </div>
         </CardContent>
       </Card>
@@ -72,26 +99,26 @@ export default function Page() {
         }}
         renderItem={(item) => {
           return (
-            <Card className='overflow-hidden'>
+            <Card className='rounded-[32px] px-[55px]'>
               <CardContent className='p-3 text-sm'>
                 <ul className='grid grid-cols-2 gap-3 *:flex *:flex-col lg:grid-cols-4'>
                   <li className='font-semibold'>
-                    <span className='text-muted-foreground'>{t('createdAt')}</span>
+                    <span className='text-[#225BA9]'>{t('createdAt')}</span>
                     <time>{formatDate(item.created_at)}</time>
                   </li>
                   <li className='font-semibold'>
-                    <span className='text-muted-foreground'>{t('type.0')}</span>
+                    <span className='text-[#225BA9]'>{t('type.0')}</span>
                     <span>{t(`type.${item.type}`)}</span>
                   </li>
                   <li className='font-semibold'>
-                    <span className='text-muted-foreground'>{t('amount')}</span>
+                    <span className='text-[#225BA9]'>{t('amount')}</span>
                     <span>
                       <Display type='currency' value={item.amount} />
                     </span>
                   </li>
 
-                  <li>
-                    <span className='text-muted-foreground'>{t('balance')}</span>
+                  <li className='font-semibold'>
+                    <span className='text-[#225BA9]'>{t('balance')}</span>
                     <span>
                       <Display type='currency' value={item.balance} />
                     </span>

apps/user/components/subscribe/recharge.tsx

@@ -36,7 +36,7 @@ export default function Recharge(props: Readonly<ButtonProps>) {
   return (
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogTrigger asChild>
-        <Button {...props}>{t('recharge')}</Button>
+        <Button {...props}>钱包充值</Button>
       </DialogTrigger>
       <DialogContent className='flex h-full flex-col overflow-hidden md:h-auto'>
         <DialogHeader>