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,29 +277,40 @@ export default function Content() {
             ) : null}
           </div>
 
-          <div className='space-y-3 sm:space-y-4'>
+          {announcementData?.length ? (
-            {/* 置顶公告 */}
+            <>
-            {announcementData?.map((item) => {
+              <div className='space-y-3 sm:space-y-4'>
-              return (
+                {/* 置顶公告 */}
-                <div className='flex items-center rounded-[20px] bg-[#B5C9E2] px-4 py-2 sm:p-4'>
+                {announcementData?.map((item) => {
-                  <p className='line-clamp-2 flex-1 text-[10px] text-[#225BA9] sm:text-sm'>
+                  return (
-                    {item.pinned && t('pinnedAnnouncement')}{' '}
+                    <div className='flex items-center rounded-[20px] bg-[#B5C9E2] px-4 py-2 sm:p-4'>
-                    <span className={`${item.pinned ? 'text-white' : 'text-[#4D4D4D]'}`}>
+                      <p className='line-clamp-2 flex-1 text-[10px] text-[#225BA9] sm:text-sm'>
-                      {item.content}
+                        {item.pinned && t('pinnedAnnouncement')}{' '}
-                    </span>
+                        <span className={`${item.pinned ? 'text-white' : 'text-[#4D4D4D]'}`}>
-                  </p>
+                          {item.content}
-                  <div className='ml-2 w-[65px] text-right'>
+                        </span>
-                    <span
+                      </p>
-                      className='cursor-pointer text-xs text-[#225BA9] sm:text-sm'
+                      <div className='ml-2 w-[65px] text-right'>
-                      onClick={() => popupRef.current?.open(item)}
+                        <span
-                    >
+                          className='cursor-pointer text-xs text-[#225BA9] sm:text-sm'
-                      {t('viewDetails')}
+                          onClick={() => popupRef.current?.open(item)}
-                    </span>
+                        >
-                  </div>
+                          {t('viewDetails')}
-                </div>
+                        </span>
-              );
+                      </div>
-            })}
+                    </div>
-          </div>
+                  );
+                })}
+              </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,146 +176,149 @@ export default function Affiliate() {
           {t('commissionCalculationInfo')}
         </div>
 
-        {(() => {
+        <div>
-          // Pro plan: $60/month, $576/year
+          {(() => {
-          const MONTHLY_PRICE = 60;
+            // Pro plan: $60/month, $576/year
-          const YEARLY_PRICE = 576;
+            const MONTHLY_PRICE = proPlan?.unit_price;
+            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 [count, setCount] = useState<number>(10);
-          const clamp = (n: number) => Math.max(0, Math.min(10000, Math.floor(n)));
+            const clamp = (n: number) => Math.max(0, Math.min(10000, Math.floor(n)));
 
-          const firstMonth = count * MONTHLY_PRICE * 0.5; // 50%
+            const firstMonth = count * MONTHLY_PRICE * 0.5; // 50%
-          const firstYear = count * YEARLY_PRICE * 0.3; // 30%
+            const firstYear = count * YEARLY_PRICE * 0.3; // 30%
-          const recurMonth = count * MONTHLY_PRICE * 0.2; // 20%
+            const recurMonth = count * MONTHLY_PRICE * 0.2; // 20%
-          const recurYear = count * YEARLY_PRICE * 0.2; // 20%
+            const recurYear = count * YEARLY_PRICE * 0.2; // 20%
 
-          return (
+            return (
-            <div className='space-y-4'>
+              <div className='space-y-4'>
-              {/* Calculator panel container */}
+                {/* Calculator panel container */}
-              <div className='grid grid-cols-[1.5fr_2.5fr_3fr] items-stretch rounded-[34px] bg-white/10 px-5 pb-6 shadow-[inset_0_0_15.7px_0_rgba(0,0,0,0.25)]'>
+                <div className='grid grid-cols-[1.5fr_2.5fr_3fr] items-stretch rounded-[34px] bg-white/10 px-5 pb-6 shadow-[inset_0_0_15.7px_0_rgba(0,0,0,0.25)]'>
-                {/* Left: row headers (Monthly Plan / Yearly Plan) */}
+                  {/* Left: row headers (Monthly Plan / Yearly Plan) */}
-                <div className='flex flex-col justify-stretch font-semibold text-[#0F2C53]'>
+                  <div className='flex flex-col justify-stretch font-semibold text-[#0F2C53]'>
-                  <div className='flex h-[56px] items-center justify-center border-b-[3px] border-white'></div>
+                    <div className='flex h-[56px] items-center justify-center border-b-[3px] border-white'></div>
-                  <div className='flex h-[81px] items-center justify-center border-b-[3px] border-white'>
+                    <div className='flex h-[81px] items-center justify-center border-b-[3px] border-white'>
-                    {t('monthlyPackage')}
+                      {t('monthlyPackage')}
+                    </div>
+                    <div className='flex h-[81px] items-center justify-center border-b-[3px] border-white'>
+                      {t('annualPackage')}
+                    </div>
                   </div>
-                  <div className='flex h-[81px] items-center justify-center border-b-[3px] border-white'>
+
-                    {t('annualPackage')}
+                  {/* Middle: First-time top-up users (double rounded corners + three rows) */}
+                  <div className='relative'>
+                    <div
+                      className={
+                        'absolute left-1 top-6 z-10 h-[90%] w-full rounded-[14px] bg-[#225BA9] sm:left-2.5 sm:top-8'
+                      }
+                    ></div>
+                    <div className={'absolute bottom-0 z-0 h-[3px] w-full bg-white'}></div>
+                    <div className={'absolute z-20 w-full'}>
+                      <div className='overflow-hidden rounded-[14px] text-center text-[#0F2C53]'>
+                        <div className={'rounded-t-[14px] bg-[#A8D4ED] px-1 sm:px-4'}>
+                          <div className='mt-3 flex h-[44px] items-center justify-center border-b-[3px] border-white font-bold'>
+                            {t('firstTimeTopUpUser')}
+                          </div>
+                        </div>
+
+                        <div className={'bg-[#A8D4ED] px-1 sm:px-4'}>
+                          <div className='grid h-[81px] grid-cols-1 grid-rows-2 border-b-[3px] border-white'>
+                            <div className='flex h-full items-center justify-center border-b-[1px] border-white font-semibold'>
+                              50%
+                            </div>
+                            <div className='flex h-full flex-1 items-center justify-center text-[10px] text-[#225BA9] sm:text-[15px]'>
+                              up to{' '}
+                              <span className='font-semibold'>
+                                <Display type='currency' value={firstMonth} />
+                              </span>
+                            </div>
+                          </div>
+                        </div>
+                        <div className={'bg-[#A8D4ED]'}>
+                          <div className='grid h-[81px] grid-cols-1 grid-rows-2 bg-[#A8D4ED]'>
+                            <div className='flex h-full items-center justify-center border-b-[1px] border-white font-semibold'>
+                              30%
+                            </div>
+                            <div className='flex h-full items-center justify-center text-[10px] text-[#225BA9] sm:text-[15px]'>
+                              up to{' '}
+                              <span className='font-semibold'>
+                                <Display type='currency' value={firstYear} />
+                              </span>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                    {/* Blue shadow block */}
+                    <div className='pointer-events-none absolute inset-0 -z-10 translate-x-2 translate-y-2 rounded-[20px] bg-[#225BA9]' />
+                  </div>
+
+                  {/* Right: Repeat top-up users (gray card + three rows) */}
+                  <div className='text-center text-[#0F2C53]'>
+                    <div className='flex h-[56px] items-center justify-center border-b-[3px] border-white pt-3 font-bold'>
+                      {t('repeatTopUpUser')}
+                    </div>
+
+                    <div className='grid h-[81px] grid-cols-1 grid-rows-2 items-center justify-center border-b-[3px] border-white'>
+                      <div className='flex h-full items-center justify-center border-b-[1px] border-white font-semibold'>
+                        20%
+                      </div>
+                      <div className='flex h-full w-full items-center justify-center text-[10px] text-[#225BA9] sm:text-[15px]'>
+                        up to{' '}
+                        <span className='font-semibold'>
+                          <Display type='currency' value={recurMonth} />
+                        </span>{' '}
+                        {t('perMonth')}
+                      </div>
+                    </div>
+
+                    <div className='grid h-[81px] grid-cols-1 grid-rows-2 border-b-[3px] border-white'>
+                      <div className='flex h-full items-center justify-center border-b-[1px] border-white font-semibold'>
+                        20%
+                      </div>
+                      <div className='flex h-full items-center justify-center text-[10px] text-[#225BA9] sm:text-[15px]'>
+                        up to{' '}
+                        <span className='font-semibold'>
+                          <Display type='currency' value={recurYear} />
+                        </span>{' '}
+                        {t('perYear')}
+                      </div>
+                    </div>
                   </div>
                 </div>
-
+                {/* User count adjustment */}
-                {/* Middle: First-time top-up users (double rounded corners + three rows) */}
+                <div className='flex items-center justify-center gap-4'>
-                <div className='relative'>
+                  <Button
-                  <div
+                    variant='secondary'
-                    className={
+                    size='icon'
-                      'absolute left-1 top-6 z-10 h-[90%] w-full rounded-[14px] bg-[#225BA9] sm:left-2.5 sm:top-8'
+                    className='h-6 w-9 rounded-full bg-[#0F2C53] font-bold text-white hover:bg-[#225BA9] sm:h-9'
-                    }
+                    onClick={() => setCount((v) => clamp(v - 1))}
-                  ></div>
+                  >
-                  <div className={'absolute bottom-0 z-0 h-[3px] w-full bg-white'}></div>
+                    –
-                  <div className={'absolute z-20 w-full'}>
+                  </Button>
-                    <div className='overflow-hidden rounded-[14px] text-center text-[#0F2C53]'>
+                  <div className='inline-flex items-center gap-1 rounded-full bg-[#D9D9D9] px-3 font-medium text-[#0F2C53] shadow-[inset_0px_0px_4px_0px_rgba(0,0,0,0.25)]'>
-                      <div className={'rounded-t-[14px] bg-[#A8D4ED] px-1 sm:px-4'}>
+                    <Input
-                        <div className='mt-3 flex h-[44px] items-center justify-center border-b-[3px] border-white font-bold'>
+                      value={count}
-                          {t('firstTimeTopUpUser')}
+                      onChange={(e) => setCount(clamp(Number(e.target.value) || 0))}
-                        </div>
+                      className='h-6 border-0 p-0 text-center text-sm focus-visible:ring-0 sm:h-8'
-                      </div>
+                      style={{ width: `${Math.max(3, String(count).length + 1)}ch` }}
-
+                    />
-                      <div className={'bg-[#A8D4ED] px-1 sm:px-4'}>
+                    <span className='text-sm'>users</span>
-                        <div className='grid h-[81px] grid-cols-1 grid-rows-2 border-b-[3px] border-white'>
-                          <div className='flex h-full items-center justify-center border-b-[1px] border-white font-semibold'>
-                            50%
-                          </div>
-                          <div className='flex h-full flex-1 items-center justify-center text-[10px] text-[#225BA9] sm:text-[15px]'>
-                            up to{' '}
-                            <span className='font-semibold'>
-                              <Display type='currency' value={firstMonth} />
-                            </span>
-                          </div>
-                        </div>
-                      </div>
-                      <div className={'bg-[#A8D4ED]'}>
-                        <div className='grid h-[81px] grid-cols-1 grid-rows-2 bg-[#A8D4ED]'>
-                          <div className='flex h-full items-center justify-center border-b-[1px] border-white font-semibold'>
-                            30%
-                          </div>
-                          <div className='flex h-full items-center justify-center text-[10px] text-[#225BA9] sm:text-[15px]'>
-                            up to{' '}
-                            <span className='font-semibold'>
-                              <Display type='currency' value={firstYear} />
-                            </span>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                  {/* Blue shadow block */}
-                  <div className='pointer-events-none absolute inset-0 -z-10 translate-x-2 translate-y-2 rounded-[20px] bg-[#225BA9]' />
-                </div>
-
-                {/* Right: Repeat top-up users (gray card + three rows) */}
-                <div className='text-center text-[#0F2C53]'>
-                  <div className='flex h-[56px] items-center justify-center border-b-[3px] border-white pt-3 font-bold'>
-                    {t('repeatTopUpUser')}
-                  </div>
-
-                  <div className='grid h-[81px] grid-cols-1 grid-rows-2 items-center justify-center border-b-[3px] border-white'>
-                    <div className='flex h-full items-center justify-center border-b-[1px] border-white font-semibold'>
-                      20%
-                    </div>
-                    <div className='flex h-full w-full items-center justify-center text-[10px] text-[#225BA9] sm:text-[15px]'>
-                      up to{' '}
-                      <span className='font-semibold'>
-                        <Display type='currency' value={recurMonth} />
-                      </span>{' '}
-                      {t('perMonth')}
-                    </div>
-                  </div>
-
-                  <div className='grid h-[81px] grid-cols-1 grid-rows-2 border-b-[3px] border-white'>
-                    <div className='flex h-full items-center justify-center border-b-[1px] border-white font-semibold'>
-                      20%
-                    </div>
-                    <div className='flex h-full items-center justify-center text-[10px] text-[#225BA9] sm:text-[15px]'>
-                      up to{' '}
-                      <span className='font-semibold'>
-                        <Display type='currency' value={recurYear} />
-                      </span>{' '}
-                      {t('perYear')}
-                    </div>
                   </div>
+                  <Button
+                    variant='secondary'
+                    size='icon'
+                    className='h-6 w-9 rounded-full bg-[#0F2C53] font-bold text-white hover:bg-[#225BA9] sm:h-9'
+                    onClick={() => setCount((v) => clamp(v + 1))}
+                  >
+                    +
+                  </Button>
                 </div>
               </div>
-              {/* User count adjustment */}
+            );
-              <div className='flex items-center justify-center gap-4'>
+          })()}
-                <Button
+        </div>
-                  variant='secondary'
-                  size='icon'
-                  className='h-6 w-9 rounded-full bg-[#0F2C53] font-bold text-white hover:bg-[#225BA9] sm:h-9'
-                  onClick={() => setCount((v) => clamp(v - 1))}
-                >
-                  –
-                </Button>
-                <div className='inline-flex items-center gap-1 rounded-full bg-[#D9D9D9] px-3 font-medium text-[#0F2C53] shadow-[inset_0px_0px_4px_0px_rgba(0,0,0,0.25)]'>
-                  <Input
-                    value={count}
-                    onChange={(e) => setCount(clamp(Number(e.target.value) || 0))}
-                    className='h-6 border-0 p-0 text-center text-sm focus-visible:ring-0 sm:h-8'
-                    style={{ width: `${Math.max(3, String(count).length + 1)}ch` }}
-                  />
-                  <span className='text-sm'>users</span>
-                </div>
-                <Button
-                  variant='secondary'
-                  size='icon'
-                  className='h-6 w-9 rounded-full bg-[#0F2C53] font-bold text-white hover:bg-[#225BA9] sm:h-9'
-                  onClick={() => setCount((v) => clamp(v + 1))}
-                >
-                  +
-                </Button>
-              </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'