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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -28,9 +28,11 @@ import {
import { Popover, PopoverContent, PopoverTrigger } from '@workspace/airo-ui/components/popover'; import { Popover, PopoverContent, PopoverTrigger } from '@workspace/airo-ui/components/popover';
import { Tabs, TabsList, TabsTrigger } from '@workspace/airo-ui/components/tabs'; import { Tabs, TabsList, TabsTrigger } from '@workspace/airo-ui/components/tabs';
import { differenceInDays } from '@workspace/airo-ui/utils'; import { differenceInDays } from '@workspace/airo-ui/utils';
import Link from 'next/link';
import { QRCodeCanvas } from 'qrcode.react'; import { QRCodeCanvas } from 'qrcode.react';
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
import { CopyToClipboard } from 'react-copy-to-clipboard'; import { CopyToClipboard } from 'react-copy-to-clipboard';
interface SubscribeCardProps { interface SubscribeCardProps {
userSubscribeData: API.UserSubscribe; userSubscribeData: API.UserSubscribe;
protocol: string[]; protocol: string[];
@ -53,7 +55,7 @@ const SubscribeCard = (props: SubscribeCardProps) => {
if (list.length > 0) { if (list.length > 0) {
setUserSubscribeProtocolCurrent(0); setUserSubscribeProtocolCurrent(0);
} }
}, [props.userSubscribeData.token, protocol]); }, [props.userSubscribeData?.token, protocol]);
return ( return (
<div className='space-y-2 sm:space-y-4'> <div className='space-y-2 sm:space-y-4'>
@ -69,11 +71,15 @@ const SubscribeCard = (props: SubscribeCardProps) => {
{t('totalTraffic')} {t('totalTraffic')}
</p> </p>
<p className='text-xs font-medium text-[#0F2C53] sm:text-base'> <p className='text-xs font-medium text-[#0F2C53] sm:text-base'>
<Display {userSubscribeData?.token ? (
type='traffic' <Display
value={userSubscribeData.traffic} type='traffic'
unlimited={!userSubscribeData.traffic} value={userSubscribeData.traffic}
/> unlimited={!userSubscribeData.traffic}
/>
) : (
'0.00GB'
)}
</p> </p>
</div> </div>
<div> <div>
@ -81,9 +87,15 @@ const SubscribeCard = (props: SubscribeCardProps) => {
{t('nextResetDays')} {t('nextResetDays')}
</p> </p>
<p className='text-xs font-medium text-[#0F2C53] sm:text-base'> <p className='text-xs font-medium text-[#0F2C53] sm:text-base'>
{userSubscribeData.reset_time {userSubscribeData?.token ? (
? differenceInDays(new Date(userSubscribeData.reset_time), new Date()) <>
: t('noReset')} {userSubscribeData.reset_time
? differenceInDays(new Date(userSubscribeData.reset_time), new Date())
: t('noReset')}
</>
) : (
'N/A'
)}
</p> </p>
</div> </div>
<div> <div>
@ -91,17 +103,28 @@ const SubscribeCard = (props: SubscribeCardProps) => {
{t('expirationDays')} {t('expirationDays')}
</p> </p>
<p className='text-xs font-medium text-[#0F2C53] sm:text-base'> <p className='text-xs font-medium text-[#0F2C53] sm:text-base'>
{userSubscribeData.expire_time {userSubscribeData?.token ? (
? differenceInDays(new Date(userSubscribeData.expire_time), new Date()) || <>
t('unknown') {userSubscribeData.expire_time
: t('noLimit')} ? differenceInDays(new Date(userSubscribeData.expire_time), new Date()) ||
t('unknown')
: t('noLimit')}
</>
) : (
'N/A'
)}
</p> </p>
</div> </div>
</div> </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'> <div className='mb-3 flex flex-wrap justify-between gap-4'>
{props.protocol.length > 1 && ( {props.protocol.length > 1 && (
<Tabs <Tabs
@ -126,21 +149,21 @@ const SubscribeCard = (props: SubscribeCardProps) => {
<div className={'mb-3 flex items-center justify-center gap-3'}> <div className={'mb-3 flex items-center justify-center gap-3'}>
<div <div
className={ 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 <Select
value={userSubscribeProtocolCurrent} value={userSubscribeProtocolCurrent}
onValueChange={setUserSubscribeProtocolCurrent} 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> <SelectValue>
<div className='flex flex-col items-center justify-between text-[10px] sm:text-xs'> <div className='flex flex-col items-center justify-between text-[10px] sm:text-xs'>
<div> <div>
{t('subscriptionUrl')} {t('subscriptionUrl')}
{userSubscribeProtocolCurrent + 1} {userSubscribeProtocolCurrent + 1}
</div> </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> </div>
</SelectValue> </SelectValue>
</SelectTrigger> </SelectTrigger>
@ -158,7 +181,7 @@ const SubscribeCard = (props: SubscribeCardProps) => {
</SelectContent> </SelectContent>
</Select> </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={'flex items-center gap-4 py-1'}>
<div className={'line-clamp-2 flex-1 break-all'}> <div className={'line-clamp-2 flex-1 break-all'}>
{userSubscribeProtocol[userSubscribeProtocolCurrent]} {userSubscribeProtocol[userSubscribeProtocolCurrent]}
@ -203,7 +226,7 @@ const SubscribeCard = (props: SubscribeCardProps) => {
<div className='flex justify-between gap-2'> <div className='flex justify-between gap-2'>
<AlertDialog> <AlertDialog>
<AlertDialogTrigger asChild> <AlertDialogTrigger asChild>
<AiroButton variant='danger' className={'px-2 text-xs'}> <AiroButton variant='primaryBlue' className={'px-2 text-xs'}>
{t('resetSubscription')} {t('resetSubscription')}
</AiroButton> </AiroButton>
</AlertDialogTrigger> </AlertDialogTrigger>
@ -231,7 +254,7 @@ const SubscribeCard = (props: SubscribeCardProps) => {
<Renewal <Renewal
className='px-2 text-xs' className='px-2 text-xs'
id={userSubscribeData.id} id={userSubscribeData.id}
subscribe={userSubscribeData.subscribe} subscribe={userSubscribeData.subscribe || {}}
/> />
</div> </div>
</div> </div>

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

@ -27,7 +27,6 @@ import { Empty } from '@/components/empty';
import SvgIcon from '@/components/SvgIcon'; import SvgIcon from '@/components/SvgIcon';
import { queryAnnouncement } from '@/services/user/announcement'; import { queryAnnouncement } from '@/services/user/announcement';
import { queryOrderList } from '@/services/user/order'; 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'; import { formatDate } from '@workspace/airo-ui/utils';
const platforms: (keyof API.ApplicationPlatform)[] = [ const platforms: (keyof API.ApplicationPlatform)[] = [
@ -202,20 +201,13 @@ export default function Content() {
{t('beginnerTutorial')} {t('beginnerTutorial')}
</Link> </Link>
</div> </div>
<div className={'text-xs font-light leading-[1.5] text-[#666]'}>
{t('copySubscribeLink')}
</div>
</div> </div>
{userSubscribe?.[0] && data?.protocol ? ( <SubScribeCard
<SubScribeCard userSubscribeData={userSubscribe?.[0] || {}}
userSubscribeData={userSubscribe?.[0]} protocol={data?.protocol || []}
protocol={data.protocol} refetch={refetch}
refetch={refetch} />
/>
) : (
<Empty />
)}
</Card> </Card>
{/* 账户概况 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'}> <span className={'ml-2.5 rounded-full bg-[#A8D4ED] px-2 text-[8px] text-white'}>
{t('inEffect')} {t('inEffect')}
</span> </span>
) : null} ) : (
<span className={'ml-2.5 rounded-full bg-[#666666] px-2 text-[8px] text-white'}>
未生效
</span>
)}
</div> </div>
<ResetTraffic <ResetTraffic
className={ className={
@ -275,78 +271,84 @@ export default function Content() {
/> />
</h3> </h3>
</div> </div>
{userSubscribe?.length ? ( <div>
<> <div className='mt-1 text-xs font-light text-[#666666] sm:text-sm'>
<div className='mt-1 text-xs text-[#666666] sm:text-sm'> {t('planExpirationTime')}
{t('planExpirationTime')} {formatDate(userSubscribe?.[0]?.expire_time, false) || '暂无'}
{formatDate(userSubscribe?.[0]?.expire_time, false)} </div>
</div> <div className='mb-3 mt-1 sm:mb-5'>
<div className='mb-3 sm:mb-5'> <span className='text-2xl font-medium text-[#091B33]'>
<span className='text-2xl font-medium text-[#091B33]'> {userSubscribe?.[0]?.subscribe.name ? (
{userSubscribe?.[0]?.subscribe.name} userSubscribe?.[0]?.subscribe.name
</span> ) : (
</div> <span className={'text-[#848484]'}>暂无套餐</span>
<div className='mb-4 flex items-center justify-between'> )}
<div className='flex items-center gap-2'> </span>
<span className='text-xs sm:text-sm'>{t('availableDevices')}</span> </div>
<div className='flex gap-2'> <div className='mb-4 flex items-center justify-between'>
{Array.from({ length: userSubscribe?.[0]?.subscribe.device_limit }).map( <div className='flex items-center gap-2'>
(_, index) => { <span className='text-xs sm:text-sm'>{t('availableDevices')}</span>
return ( <div className='flex gap-2'>
<div {Array.from({ length: userSubscribe?.[0]?.subscribe.device_limit || 6 }).map(
key={index} (_, index) => {
className={`h-4 w-4 rounded-full ${index < (userSubscribe?.[0]?.subscribe.device_limit || 0) > 1 ? 'bg-[#225BA9]' : 'bg-[#D9D9D9]'}`} return (
></div> <div
); key={index}
}, 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> </div>
</div>
<span className='text-xs font-light sm:text-sm'>
{t('online')}
{data?.online_device || 0}/{userSubscribe?.[0]?.subscribe.device_limit || 0}
</span>
</div>
<div>
<div className='mb-1 flex items-center justify-between font-light'>
<span className='text-xs sm:text-sm'> <span className='text-xs sm:text-sm'>
{t('online')} {t('usedTrafficTotalTraffic')}
{data?.online_device} / {userSubscribe?.[0]?.subscribe.device_limit} {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 || 0}
unlimited={!userSubscribe?.[0]?.traffic}
/>
</>
) : (
'0GB/0GB'
)}
</span>
<span className='text-xs sm:text-sm'>
{t('remaining')}
{100 -
Math.round(
(((userSubscribe?.[0]?.upload || 0) + (userSubscribe?.[0]?.download || 0)) /
(userSubscribe?.[0]?.traffic || 1)) *
100,
)}
%
</span> </span>
</div> </div>
<div> <div className='flex h-5 w-full items-center rounded-[20px] bg-[#EAEAEA] p-0.5'>
<div className='mb-1 flex items-center justify-between'> <div
<span className='text-xs sm:text-sm'> className={'h-full rounded-[20px] bg-[#225BA9]'}
{t('usedTrafficTotalTraffic')} style={{
<Display width: `${Math.round((((userSubscribe?.[0]?.upload || 0) + (userSubscribe?.[0]?.download || 0)) / (userSubscribe?.[0]?.traffic || 1)) * 100)}%`,
type='traffic' }}
value={userSubscribe?.[0]?.upload + userSubscribe?.[0]?.download} ></div>
unlimited={!userSubscribe?.[0]?.traffic}
/>
/{' '}
<Display
type='traffic'
value={userSubscribe?.[0]?.traffic}
unlimited={!userSubscribe?.[0]?.traffic}
/>
</span>
<span className='text-xs sm:text-sm'>
{t('remaining')}
{100 -
Math.round(
(((userSubscribe?.[0]?.upload || 0) + (userSubscribe?.[0]?.download || 0)) /
(userSubscribe?.[0]?.traffic || 1)) *
100,
)}
%
</span>
</div>
<div className='flex h-5 w-full items-center rounded-[20px] bg-[#EAEAEA] p-0.5'>
<div
className={'h-full rounded-[20px] bg-[#225BA9]'}
style={{
width: `${Math.round((((userSubscribe?.[0]?.upload || 0) + (userSubscribe?.[0]?.download || 0)) / (userSubscribe?.[0]?.traffic || 1)) * 100)}%`,
}}
></div>
</div>
</div> </div>
</> </div>
) : ( </div>
<Airo_Empty className={'py-0'} description={t('noPlanAvailable')} />
)}
</Card> </Card>
{/* 网站公告 Card */} {/* 网站公告 Card */}

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

@ -168,7 +168,7 @@ export function TutorialButton({ items }: { items: Item[] }) {
)} )}
</div> </div>
</div> </div>
<div> <div className={'flex'}>
{item.download ? ( {item.download ? (
<button <button
className={cn( className={cn(

2
apps/user/app/(main)/(content)/(user)/payment/page.tsx
View File

@ -85,7 +85,7 @@ export default function Page() {
<Card className='border-none shadow-none sm:border sm:shadow'> <Card className='border-none shadow-none sm:border sm:shadow'>
<CardContent className='grid gap-2 p-6 text-sm'> <CardContent className='grid gap-2 p-6 text-sm'>
<div className='relative'> <div className='relative'>
<div className={'absolute flex gap-3'}> <div className={'flex gap-3 sm:absolute'}>
<div <div
className={ className={
'flex items-center justify-between rounded-md border-2 border-[#225BA9] p-0.5' 'flex items-center justify-between rounded-md border-2 border-[#225BA9] p-0.5'

3
packages/airo-ui/src/components/AiroButton.tsx
View File

@ -13,7 +13,8 @@ const buttonVariants = cva(
primary: 'bg-[#225BA9] text-primary-foreground shadow hover:bg-[#0F2C53] ', primary: 'bg-[#225BA9] text-primary-foreground shadow hover:bg-[#0F2C53] ',
danger: 'bg-[#FF4248] text-primary-foreground shadow hover:bg-[#E22C2E]', danger: 'bg-[#FF4248] text-primary-foreground shadow hover:bg-[#E22C2E]',
dangerLink: 'text-[#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', destructive: 'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
outline: outline:
'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground', 'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',