fix: 增加默认状态
This commit is contained in:
parent
804af6b1fc
commit
8aa9b5694a
@ -28,9 +28,11 @@ import {
|
||||
import { Popover, PopoverContent, PopoverTrigger } from '@workspace/airo-ui/components/popover';
|
||||
import { Tabs, TabsList, TabsTrigger } from '@workspace/airo-ui/components/tabs';
|
||||
import { differenceInDays } from '@workspace/airo-ui/utils';
|
||||
import Link from 'next/link';
|
||||
import { QRCodeCanvas } from 'qrcode.react';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { CopyToClipboard } from 'react-copy-to-clipboard';
|
||||
|
||||
interface SubscribeCardProps {
|
||||
userSubscribeData: API.UserSubscribe;
|
||||
protocol: string[];
|
||||
@ -53,7 +55,7 @@ const SubscribeCard = (props: SubscribeCardProps) => {
|
||||
if (list.length > 0) {
|
||||
setUserSubscribeProtocolCurrent(0);
|
||||
}
|
||||
}, [props.userSubscribeData.token, protocol]);
|
||||
}, [props.userSubscribeData?.token, protocol]);
|
||||
|
||||
return (
|
||||
<div className='space-y-2 sm:space-y-4'>
|
||||
@ -69,11 +71,15 @@ const SubscribeCard = (props: SubscribeCardProps) => {
|
||||
{t('totalTraffic')}
|
||||
</p>
|
||||
<p className='text-xs font-medium text-[#0F2C53] sm:text-base'>
|
||||
{userSubscribeData?.token ? (
|
||||
<Display
|
||||
type='traffic'
|
||||
value={userSubscribeData.traffic}
|
||||
unlimited={!userSubscribeData.traffic}
|
||||
/>
|
||||
) : (
|
||||
'0.00GB'
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
@ -81,9 +87,15 @@ const SubscribeCard = (props: SubscribeCardProps) => {
|
||||
{t('nextResetDays')}
|
||||
</p>
|
||||
<p className='text-xs font-medium text-[#0F2C53] sm:text-base'>
|
||||
{userSubscribeData?.token ? (
|
||||
<>
|
||||
{userSubscribeData.reset_time
|
||||
? differenceInDays(new Date(userSubscribeData.reset_time), new Date())
|
||||
: t('noReset')}
|
||||
</>
|
||||
) : (
|
||||
'N/A'
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
@ -91,17 +103,28 @@ const SubscribeCard = (props: SubscribeCardProps) => {
|
||||
{t('expirationDays')}
|
||||
</p>
|
||||
<p className='text-xs font-medium text-[#0F2C53] sm:text-base'>
|
||||
{userSubscribeData?.token ? (
|
||||
<>
|
||||
{userSubscribeData.expire_time
|
||||
? differenceInDays(new Date(userSubscribeData.expire_time), new Date()) ||
|
||||
t('unknown')
|
||||
: t('noLimit')}
|
||||
</>
|
||||
) : (
|
||||
'N/A'
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 订阅链接 */}
|
||||
<div className='rounded-[26px] bg-[#EAEAEA] p-2 sm:p-4'>
|
||||
<div className='relative rounded-[26px] bg-[#EAEAEA] p-2 sm:p-4'>
|
||||
<div className='absolute inset-0 z-40 flex h-full w-full items-center justify-center rounded-[26px] border-4 border-[#D9D9D9] bg-white/50 backdrop-blur-[1px]'>
|
||||
<AiroButton variant={'primary'} asChild>
|
||||
<Link href={'/subscribe'}>立即购买订阅</Link>
|
||||
</AiroButton>
|
||||
</div>
|
||||
<div className='mb-3 flex flex-wrap justify-between gap-4'>
|
||||
{props.protocol.length > 1 && (
|
||||
<Tabs
|
||||
@ -126,21 +149,21 @@ const SubscribeCard = (props: SubscribeCardProps) => {
|
||||
<div className={'mb-3 flex items-center justify-center gap-3'}>
|
||||
<div
|
||||
className={
|
||||
'flex flex-1 items-center gap-1 rounded-full bg-[#BABABA] pl-1 sm:gap-2 sm:rounded-[16px] sm:pl-2'
|
||||
'flex flex-1 items-center gap-1 rounded-full bg-[#BABABA] pl-1 sm:gap-2 sm:pl-2'
|
||||
}
|
||||
>
|
||||
<Select
|
||||
value={userSubscribeProtocolCurrent}
|
||||
onValueChange={setUserSubscribeProtocolCurrent}
|
||||
>
|
||||
<SelectTrigger className='h-auto w-auto flex-shrink-0 rounded-[16px] border-none bg-[#D9D9D9] px-2.5 py-0.5 text-[13px] font-medium text-[#0F2C53] shadow-none hover:bg-[#848484] focus:ring-0 sm:h-[35px] sm:rounded-[8px] sm:px-2 sm:py-1.5 [&>svg]:hidden'>
|
||||
<SelectTrigger className='h-auto w-auto flex-shrink-0 rounded-[16px] border-none bg-[#D9D9D9] px-2.5 py-0.5 text-[13px] font-medium text-[#0F2C53] shadow-none hover:bg-[#848484] focus:ring-0 sm:h-[35px] sm:px-2 sm:py-1.5 [&>svg]:hidden'>
|
||||
<SelectValue>
|
||||
<div className='flex flex-col items-center justify-between text-[10px] sm:text-xs'>
|
||||
<div>
|
||||
{t('subscriptionUrl')}
|
||||
{userSubscribeProtocolCurrent + 1}
|
||||
</div>
|
||||
<div className='-mt-0.5 h-0 w-0 scale-50 border-l-[3px] border-r-[3px] border-t-[3px] border-l-transparent border-r-transparent border-t-[#0F2C53] sm:scale-100'></div>
|
||||
<div className='h-0 w-0 scale-50 border-l-[3px] border-r-[3px] border-t-[3px] border-l-transparent border-r-transparent border-t-[#0F2C53] sm:scale-100'></div>
|
||||
</div>
|
||||
</SelectValue>
|
||||
</SelectTrigger>
|
||||
@ -158,7 +181,7 @@ const SubscribeCard = (props: SubscribeCardProps) => {
|
||||
</SelectContent>
|
||||
</Select>
|
||||
|
||||
<div className='flex-1 rounded-full bg-white px-3 py-2 text-[10px] leading-tight text-[#225BA9] shadow-[inset_0px_0px_7.6px_0px_rgba(0,0,0,0.25)] sm:rounded-[16px]'>
|
||||
<div className='flex-1 rounded-full bg-white px-3 py-2 text-[10px] leading-tight text-[#225BA9] shadow-[inset_0px_0px_7.6px_0px_rgba(0,0,0,0.25)]'>
|
||||
<div className={'flex items-center gap-4 py-1'}>
|
||||
<div className={'line-clamp-2 flex-1 break-all'}>
|
||||
{userSubscribeProtocol[userSubscribeProtocolCurrent]}
|
||||
@ -203,7 +226,7 @@ const SubscribeCard = (props: SubscribeCardProps) => {
|
||||
<div className='flex justify-between gap-2'>
|
||||
<AlertDialog>
|
||||
<AlertDialogTrigger asChild>
|
||||
<AiroButton variant='danger' className={'px-2 text-xs'}>
|
||||
<AiroButton variant='primaryBlue' className={'px-2 text-xs'}>
|
||||
{t('resetSubscription')}
|
||||
</AiroButton>
|
||||
</AlertDialogTrigger>
|
||||
@ -231,7 +254,7 @@ const SubscribeCard = (props: SubscribeCardProps) => {
|
||||
<Renewal
|
||||
className='px-2 text-xs'
|
||||
id={userSubscribeData.id}
|
||||
subscribe={userSubscribeData.subscribe}
|
||||
subscribe={userSubscribeData.subscribe || {}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -27,7 +27,6 @@ import { Empty } from '@/components/empty';
|
||||
import SvgIcon from '@/components/SvgIcon';
|
||||
import { queryAnnouncement } from '@/services/user/announcement';
|
||||
import { queryOrderList } from '@/services/user/order';
|
||||
import { default as Airo_Empty } from '@workspace/airo-ui/custom-components/empty';
|
||||
import { formatDate } from '@workspace/airo-ui/utils';
|
||||
|
||||
const platforms: (keyof API.ApplicationPlatform)[] = [
|
||||
@ -202,20 +201,13 @@ export default function Content() {
|
||||
{t('beginnerTutorial')}
|
||||
</Link>
|
||||
</div>
|
||||
<div className={'text-xs font-light leading-[1.5] text-[#666]'}>
|
||||
{t('copySubscribeLink')}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{userSubscribe?.[0] && data?.protocol ? (
|
||||
<SubScribeCard
|
||||
userSubscribeData={userSubscribe?.[0]}
|
||||
protocol={data.protocol}
|
||||
userSubscribeData={userSubscribe?.[0] || {}}
|
||||
protocol={data?.protocol || []}
|
||||
refetch={refetch}
|
||||
/>
|
||||
) : (
|
||||
<Empty />
|
||||
)}
|
||||
</Card>
|
||||
|
||||
{/* 账户概况 Card */}
|
||||
@ -264,7 +256,11 @@ export default function Content() {
|
||||
<span className={'ml-2.5 rounded-full bg-[#A8D4ED] px-2 text-[8px] text-white'}>
|
||||
{t('inEffect')}
|
||||
</span>
|
||||
) : null}
|
||||
) : (
|
||||
<span className={'ml-2.5 rounded-full bg-[#666666] px-2 text-[8px] text-white'}>
|
||||
未生效
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<ResetTraffic
|
||||
className={
|
||||
@ -275,53 +271,62 @@ export default function Content() {
|
||||
/>
|
||||
</h3>
|
||||
</div>
|
||||
{userSubscribe?.length ? (
|
||||
<>
|
||||
<div className='mt-1 text-xs text-[#666666] sm:text-sm'>
|
||||
<div>
|
||||
<div className='mt-1 text-xs font-light text-[#666666] sm:text-sm'>
|
||||
{t('planExpirationTime')}
|
||||
{formatDate(userSubscribe?.[0]?.expire_time, false)}
|
||||
{formatDate(userSubscribe?.[0]?.expire_time, false) || '暂无'}
|
||||
</div>
|
||||
<div className='mb-3 sm:mb-5'>
|
||||
<div className='mb-3 mt-1 sm:mb-5'>
|
||||
<span className='text-2xl font-medium text-[#091B33]'>
|
||||
{userSubscribe?.[0]?.subscribe.name}
|
||||
{userSubscribe?.[0]?.subscribe.name ? (
|
||||
userSubscribe?.[0]?.subscribe.name
|
||||
) : (
|
||||
<span className={'text-[#848484]'}>暂无套餐</span>
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
<div className='mb-4 flex items-center justify-between'>
|
||||
<div className='flex items-center gap-2'>
|
||||
<span className='text-xs sm:text-sm'>{t('availableDevices')}</span>
|
||||
<div className='flex gap-2'>
|
||||
{Array.from({ length: userSubscribe?.[0]?.subscribe.device_limit }).map(
|
||||
{Array.from({ length: userSubscribe?.[0]?.subscribe.device_limit || 6 }).map(
|
||||
(_, index) => {
|
||||
return (
|
||||
<div
|
||||
key={index}
|
||||
className={`h-4 w-4 rounded-full ${index < (userSubscribe?.[0]?.subscribe.device_limit || 0) > 1 ? 'bg-[#225BA9]' : 'bg-[#D9D9D9]'}`}
|
||||
className={`h-2.5 w-2.5 rounded-full sm:h-4 sm:w-4 ${index < (userSubscribe?.[0]?.subscribe.device_limit || 0) > 1 ? 'bg-[#225BA9]' : 'bg-[#D9D9D9]'}`}
|
||||
></div>
|
||||
);
|
||||
},
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<span className='text-xs sm:text-sm'>
|
||||
<span className='text-xs font-light sm:text-sm'>
|
||||
{t('online')}
|
||||
{data?.online_device} / {userSubscribe?.[0]?.subscribe.device_limit}
|
||||
{data?.online_device || 0}/{userSubscribe?.[0]?.subscribe.device_limit || 0}
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<div className='mb-1 flex items-center justify-between'>
|
||||
<div className='mb-1 flex items-center justify-between font-light'>
|
||||
<span className='text-xs sm:text-sm'>
|
||||
{t('usedTrafficTotalTraffic')}
|
||||
{userSubscribe?.[0]?.subscribe.device_limit ? (
|
||||
<>
|
||||
<Display
|
||||
type='traffic'
|
||||
value={userSubscribe?.[0]?.upload + userSubscribe?.[0]?.download}
|
||||
unlimited={!userSubscribe?.[0]?.traffic}
|
||||
/>
|
||||
/{' '}
|
||||
/
|
||||
<Display
|
||||
type='traffic'
|
||||
value={userSubscribe?.[0]?.traffic}
|
||||
value={userSubscribe?.[0]?.traffic || 0}
|
||||
unlimited={!userSubscribe?.[0]?.traffic}
|
||||
/>
|
||||
</>
|
||||
) : (
|
||||
'0GB/0GB'
|
||||
)}
|
||||
</span>
|
||||
<span className='text-xs sm:text-sm'>
|
||||
{t('remaining')}
|
||||
@ -343,10 +348,7 @@ export default function Content() {
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<Airo_Empty className={'py-0'} description={t('noPlanAvailable')} />
|
||||
)}
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{/* 网站公告 Card */}
|
||||
|
||||
@ -168,7 +168,7 @@ export function TutorialButton({ items }: { items: Item[] }) {
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className={'flex'}>
|
||||
{item.download ? (
|
||||
<button
|
||||
className={cn(
|
||||
|
||||
@ -85,7 +85,7 @@ export default function Page() {
|
||||
<Card className='border-none shadow-none sm:border sm:shadow'>
|
||||
<CardContent className='grid gap-2 p-6 text-sm'>
|
||||
<div className='relative'>
|
||||
<div className={'absolute flex gap-3'}>
|
||||
<div className={'flex gap-3 sm:absolute'}>
|
||||
<div
|
||||
className={
|
||||
'flex items-center justify-between rounded-md border-2 border-[#225BA9] p-0.5'
|
||||
|
||||
@ -13,7 +13,8 @@ const buttonVariants = cva(
|
||||
primary: 'bg-[#225BA9] text-primary-foreground shadow hover:bg-[#0F2C53] ',
|
||||
danger: 'bg-[#FF4248] text-primary-foreground shadow hover:bg-[#E22C2E]',
|
||||
dangerLink: 'text-[#E22C2E] ',
|
||||
primaryBlue: 'bg-[#A8D4ED] text-primary-foreground hover:bg-[#225BA9]',
|
||||
primaryBlue:
|
||||
'bg-[#B5C9E2] text-[#225BA9] hover:bg-[#225BA9] hover:text-primary-foreground ',
|
||||
destructive: 'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
|
||||
outline:
|
||||
'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user