S-VPN/panel-web
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 修改样式

Browse Source
This commit is contained in:
speakeloudest 2025-08-11 06:32:35 -07:00
parent 0aace63597
commit cc522d0754
7 changed files with 210 additions and 172 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
apps/user/app/(main)/(content)/(user)/dashboard/content.tsx
View File

@ -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?.map((item) => {
return (
<div className='flex items-center rounded-[20px] bg-[#B5C9E2] px-4 py-2 sm:p-4'>
<p className='line-clamp-2 flex-1 text-[10px] text-[#225BA9] sm:text-sm'>
{item.pinned && t('pinnedAnnouncement')}{' '}
<span className={`${item.pinned ? 'text-white' : 'text-[#4D4D4D]'}`}>
{item.content}
</span>
</p>
<div className='ml-2 w-[65px] text-right'>
<span
className='cursor-pointer text-xs text-[#225BA9] sm:text-sm'
onClick={() => popupRef.current?.open(item)}
>
{t('viewDetails')}
</span>
</div>
</div>
);
})}
</div>
{announcementData?.length ? (
<>
<div className='space-y-3 sm:space-y-4'>
{/* 置顶公告 */}
{announcementData?.map((item) => {
return (
<div className='flex items-center rounded-[20px] bg-[#B5C9E2] px-4 py-2 sm:p-4'>
<p className='line-clamp-2 flex-1 text-[10px] text-[#225BA9] sm:text-sm'>
{item.pinned && t('pinnedAnnouncement')}{' '}
<span className={`${item.pinned ? 'text-white' : 'text-[#4D4D4D]'}`}>
{item.content}
</span>
</p>
<div className='ml-2 w-[65px] text-right'>
<span
className='cursor-pointer text-xs text-[#225BA9] sm:text-sm'
onClick={() => popupRef.current?.open(item)}
>
{t('viewDetails')}
</span>
</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>

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

@ -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')}

295
apps/user/components/affiliate/index.tsx
View File

@ -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>
{(() => {
// Pro plan: $60/month, $576/year
const MONTHLY_PRICE = 60;
const YEARLY_PRICE = 576;
<div>
{(() => {
// Pro plan: $60/month, $576/year
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 clamp = (n: number) => Math.max(0, Math.min(10000, Math.floor(n)));
const [count, setCount] = useState<number>(10);
const clamp = (n: number) => Math.max(0, Math.min(10000, Math.floor(n)));
const firstMonth = count * MONTHLY_PRICE * 0.5; // 50%
const firstYear = count * YEARLY_PRICE * 0.3; // 30%
const recurMonth = count * MONTHLY_PRICE * 0.2; // 20%
const recurYear = count * YEARLY_PRICE * 0.2; // 20%
const firstMonth = count * MONTHLY_PRICE * 0.5; // 50%
const firstYear = count * YEARLY_PRICE * 0.3; // 30%
const recurMonth = count * MONTHLY_PRICE * 0.2; // 20%
const recurYear = count * YEARLY_PRICE * 0.2; // 20%
return (
<div className='space-y-4'>
{/* 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)]'>
{/* Left: row headers (Monthly Plan / Yearly Plan) */}
<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-[81px] items-center justify-center border-b-[3px] border-white'>
{t('monthlyPackage')}
return (
<div className='space-y-4'>
{/* 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)]'>
{/* Left: row headers (Monthly Plan / Yearly Plan) */}
<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-[81px] items-center justify-center border-b-[3px] border-white'>
{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>
{/* 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>
{/* User count adjustment */}
<div className='flex items-center justify-center gap-4'>
<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 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>
{/* User count adjustment */}
<div className='flex items-center justify-center gap-4'>
<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 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>
);
})()}
);
})()}
</div>
</Card>
<AffiliateDialog ref={dialogRef} />
</div>

4
apps/user/components/empty.tsx
View File

@ -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} />;
}

3
apps/user/locales/en-US/affiliate.json
View File

@ -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",

3
apps/user/locales/zh-CN/affiliate.json
View File

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

12
packages/airo-ui/src/custom-components/empty.tsx
View File

@ -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'