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

fix: 增加默认状态

Browse Source
This commit is contained in:
speakeloudest
2025-09-25 02:32:17 -07:00
parent 804af6b1fc
commit 8aa9b5694a
5 changed files with 130 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/user/app/(main)/(content)/(user)/dashboard/components/SubscribeCard/index.tsx
+43 -20
View File
@@ -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'>
<Display
type='traffic'
value={userSubscribeData.traffic}
unlimited={!userSubscribeData.traffic}
/>
{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.reset_time
? differenceInDays(new Date(userSubscribeData.reset_time), new Date())
: t('noReset')}
{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.expire_time
? differenceInDays(new Date(userSubscribeData.expire_time), new Date()) ||
t('unknown')
: t('noLimit')}
{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>