feat: 修改样式

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

@@ -46,6 +46,7 @@ import {
 } from '@workspace/airo-ui/components/alert-dialog';
 import { Popover, PopoverContent, PopoverTrigger } from '@workspace/airo-ui/components/popover';
 import { Tabs, TabsList, TabsTrigger } from '@workspace/airo-ui/components/tabs';
+import { default as Airo_Empty } from '@workspace/airo-ui/custom-components/empty';
 import { differenceInDays, formatDate } from '@workspace/airo-ui/utils';
 import { QRCodeCanvas } from 'qrcode.react';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
@@ -257,14 +258,11 @@ export default function Content() {
               </div>
             </>
           ) : (
-            <div>{t('noPlanAvailable')}</div>
+            <Airo_Empty className={'py-0'} description={t('noPlanAvailable')} />
           )}
         </Card>
         {/* 网站公告 Card */}
         <Card className='relative order-4 rounded-[20px] border border-[#EAEAEA] bg-gradient-to-b from-white to-[#EAEAEA] p-6 pb-0 sm:order-none'>
-          <div
-            className={'absolute bottom-0 left-0 right-0 h-[60px] bg-white/30 backdrop-blur-[1px]'}
-          ></div>
           <div className='mb-3 flex items-center justify-between sm:mb-4'>
             <h3 className='text-base font-medium text-[#666666] sm:text-xl'>
               {t('siteAnnouncements')}
@@ -279,6 +277,8 @@ export default function Content() {
             ) : null}
           </div>
 
+          {announcementData?.length ? (
+            <>
               <div className='space-y-3 sm:space-y-4'>
                 {/* 置顶公告 */}
                 {announcementData?.map((item) => {
@@ -302,6 +302,15 @@ export default function Content() {
                   );
                 })}
               </div>
+              <div
+                className={
+                  'absolute bottom-0 left-0 right-0 h-[60px] bg-white/30 backdrop-blur-[1px]'
+                }
+              ></div>
+            </>
+          ) : (
+            <Empty />
+          )}
           <Popup ref={popupRef} />
           <AnnouncementDialog ref={dialogRef} />
         </Card>

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

@@ -155,7 +155,7 @@ export function TutorialButton({ items }: { items: Item[] }) {
                 buttonVariants({
                   variant: 'secondary',
                 }),
-                'rounded-full border-[#A8D4ED] bg-[#A8D4ED] px-[35px] py-[9px] text-center text-xs font-bold text-white hover:bg-[#225BA9] hover:text-white sm:min-w-[150px] sm:text-xl',
+                'rounded-full border-[#A8D4ED] bg-[#A8D4ED] px-[35px] py-[9px] text-center text-xs font-bold text-white hover:bg-[#225BA9] hover:text-white sm:min-w-[100px]',
               )}
             >
               {t('read')}

apps/user/components/affiliate/index.tsx

@@ -5,14 +5,15 @@ import {
   AffiliateDialogRef,
 } from '@/components/affiliate/components/AffiliateDialog';
 import { Display } from '@/components/display';
-import { Empty } from '@/components/empty';
 import SvgIcon from '@/components/SvgIcon';
 import useGlobalStore from '@/config/use-global';
+import { querySubscribeList } from '@/services/user/subscribe';
 import { queryUserAffiliate, queryUserAffiliateList } from '@/services/user/user';
 import { useQuery } from '@tanstack/react-query';
 import { Button } from '@workspace/airo-ui/components/button';
 import { Card, CardContent } from '@workspace/airo-ui/components/card';
 import { Input } from '@workspace/airo-ui/components/input';
+import { default as Airo_Empty } from '@workspace/airo-ui/custom-components/empty';
 import { formatDate } from '@workspace/airo-ui/utils';
 import { useTranslations } from 'next-intl';
 import { useRef, useState } from 'react';
@@ -31,16 +32,26 @@ export default function Affiliate() {
     },
   });
 
-  const { data: inviteList = [] } = useQuery({
+  const { data: inviteListData } = useQuery({
     queryKey: ['queryUserAffiliateList'],
     queryFn: async () => {
       const response = await queryUserAffiliateList({
         page: 1,
         size: 3,
       });
-      return response.data.data?.list || [];
+      return response.data.data;
     },
   });
+
+  const { data: proPlan } = useQuery({
+    queryKey: ['querySubscribeList1'],
+    queryFn: async () => {
+      const { data } = await querySubscribeList();
+      const list = data.data?.list?.filter((v) => v.unit_time === 'Month') || [];
+      return list.find((v) => v.name.includes('Pro'));
+    },
+  });
+
   const dialogRef = useRef<AffiliateDialogRef>(null);
   return (
     <div className='grid grid-cols-1 gap-4 sm:grid-cols-2'>
@@ -54,8 +65,13 @@ export default function Affiliate() {
             <div className={'font-bold sm:text-xl'}>{t('totalCommission')}</div>
             <div className={'text-xs font-light sm:text-[15px]'}>{t('commissionInfo')}</div>
           </div>
-          <div className={'mb-3 text-xl font-bold text-[#091B33] sm:text-[32px]'}>
+          <div
+            className={
+              'mb-3 text-xl font-bold leading-tight text-[#091B33] sm:text-[32px] sm:leading-[1.5]'
+            }
+          >
             {t('historicalRecommendedUsers')}
+            {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'>
@@ -121,14 +137,14 @@ export default function Affiliate() {
         </div>
 
         <div className='space-y-2 sm:space-y-4'>
-          {inviteList?.length ? (
+          {inviteListData?.list?.length ? (
             <div className='relative space-y-3'>
               <div
                 className={
                   'absolute bottom-0 left-0 right-0 h-[60px] bg-white/30 backdrop-blur-[1px]'
                 }
               ></div>
-              {inviteList?.map((invite) => {
+              {inviteListData?.list?.map((invite) => {
                 return (
                   <div className='flex flex-wrap justify-between gap-2 rounded-[20px] bg-white px-6 py-2 text-[10px] sm:text-base'>
                     <div>
@@ -146,7 +162,7 @@ export default function Affiliate() {
               })}
             </div>
           ) : (
-            <Empty />
+            <Airo_Empty className={'py-0'} description={t('noInvitationRecords')} />
           )}
         </div>
       </Card>
@@ -160,10 +176,12 @@ export default function Affiliate() {
           {t('commissionCalculationInfo')}
         </div>
 
+        <div>
           {(() => {
             // Pro plan: $60/month, $576/year
-          const MONTHLY_PRICE = 60;
+            const MONTHLY_PRICE = proPlan?.unit_price;
-          const YEARLY_PRICE = 576;
+            const discountItem = proPlan?.discount?.find((v) => v.quantity === 12);
+            const YEARLY_PRICE = proPlan?.unit_price * ((discountItem?.discount || 100) / 100) * 12;
 
             const [count, setCount] = useState<number>(10);
             const clamp = (n: number) => Math.max(0, Math.min(10000, Math.floor(n)));
@@ -300,6 +318,7 @@ export default function Affiliate() {
               </div>
             );
           })()}
+        </div>
       </Card>
       <AffiliateDialog ref={dialogRef} />
     </div>

apps/user/components/empty.tsx

@@ -4,7 +4,7 @@ import { default as _Empty } from '@workspace/airo-ui/custom-components/empty';
 import { useTranslations } from 'next-intl';
 import { useEffect, useState } from 'react';
 
-export function Empty() {
+export function Empty({ className }: { className?: string }) {
   const t = useTranslations('common');
 
   const [description, setDescription] = useState('');
@@ -14,5 +14,5 @@ export function Empty() {
     setDescription(t(`empty.${random}`));
   }, [t]);
 
-  return <_Empty description={description} />;
+  return <_Empty description={description} className={className} />;
 }

apps/user/locales/en-US/affiliate.json

@@ -8,11 +8,12 @@
   "copyInviteLink": "Copy Invite Link",
   "copySuccess": "Copied Successfully",
   "firstTimeTopUpUser": "First-time Top-up User",
-  "historicalRecommendedUsers": "Historical Recommended Users: 7",
+  "historicalRecommendedUsers": "Historical Recommended Users: ",
   "inviteCode": "Invite Code",
   "inviteRecords": "Invite Records",
   "monthlyPackage": "Monthly Package",
   "more": "More",
+  "noInvitationRecords": "No Invitation Records",
   "perMonth": "/ Month",
   "perYear": "/ Year",
   "registrationTime": "Registration Time",

apps/user/locales/zh-CN/affiliate.json

@@ -8,11 +8,12 @@
   "copyInviteLink": "复制邀请链接",
   "copySuccess": "复制成功",
   "firstTimeTopUpUser": "首充用户",
-  "historicalRecommendedUsers": "历史推荐用户：7",
+  "historicalRecommendedUsers": "历史推荐用户：",
   "inviteCode": "邀请码",
   "inviteRecords": "邀请记录",
   "monthlyPackage": "月付套餐",
   "more": "更多",
+  "noInvitationRecords": "暂无邀请记录",
   "perMonth": "/ 月",
   "perYear": "/ 年",
   "registrationTime": "注册时间",

packages/airo-ui/src/custom-components/empty.tsx

@@ -1,6 +1,14 @@
-export default function Empty({ description }: { description?: React.ReactNode }) {
+import { cn } from '@workspace/airo-ui/lib/utils';
+
+export default function Empty({
+  className,
+  description,
+}: {
+  description?: React.ReactNode;
+  className?: string;
+}) {
   return (
-    <div className='flex flex-col items-center justify-center p-6 py-16'>
+    <div className={cn('flex flex-col items-center justify-center p-6 py-16', className)}>
       <svg
         width='64'
         height='41'