feat: 修改样式
This commit is contained in:
parent
0aace63597
commit
cc522d0754
@ -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>
|
||||
|
||||
@ -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')}
|
||||
|
||||
@ -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 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 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>
|
||||
|
||||
@ -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} />;
|
||||
}
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -8,11 +8,12 @@
|
||||
"copyInviteLink": "复制邀请链接",
|
||||
"copySuccess": "复制成功",
|
||||
"firstTimeTopUpUser": "首充用户",
|
||||
"historicalRecommendedUsers": "历史推荐用户：7",
|
||||
"historicalRecommendedUsers": "历史推荐用户：",
|
||||
"inviteCode": "邀请码",
|
||||
"inviteRecords": "邀请记录",
|
||||
"monthlyPackage": "月付套餐",
|
||||
"more": "更多",
|
||||
"noInvitationRecords": "暂无邀请记录",
|
||||
"perMonth": "/ 月",
|
||||
"perYear": "/ 年",
|
||||
"registrationTime": "注册时间",
|
||||
|
||||
@ -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'
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user