merge: 合并 main 分支到 dev,保留动态 SSH 配置
Some checks failed
CI / build (20.15.1) (push) Has been cancelled
Some checks failed
CI / build (20.15.1) (push) Has been cancelled
This commit is contained in:
commit
52b62694c3
@ -134,7 +134,9 @@ export function UserDetail({ id }: { id: number }) {
|
|||||||
<HoverCardTrigger asChild>
|
<HoverCardTrigger asChild>
|
||||||
<Button variant='link' className='p-0' asChild>
|
<Button variant='link' className='p-0' asChild>
|
||||||
<Link href={`/dashboard/user/${id}`}>
|
<Link href={`/dashboard/user/${id}`}>
|
||||||
{data?.auth_methods[0]?.auth_identifier || t('loading')}
|
{data?.auth_methods[0]?.auth_identifier
|
||||||
|
? `${data?.auth_methods[0]?.auth_identifier} (${data?.remark})`
|
||||||
|
: t('loading')}
|
||||||
</Link>
|
</Link>
|
||||||
</Button>
|
</Button>
|
||||||
</HoverCardTrigger>
|
</HoverCardTrigger>
|
||||||
|
|||||||
@ -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?.status === 1 ? (
|
||||||
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?.status === 1 ? (
|
||||||
? 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,30 @@ 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?.status === 1 ? (
|
||||||
? 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'>
|
||||||
|
{userSubscribeData?.status !== 1 && (
|
||||||
|
<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'}>{t('buySubscriptionNow')}</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 +151,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 +183,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 +228,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 +256,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>
|
||||||
|
|||||||
@ -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)[] = [
|
||||||
@ -42,11 +41,13 @@ const platforms: (keyof API.ApplicationPlatform)[] = [
|
|||||||
export default function Content() {
|
export default function Content() {
|
||||||
const t = useTranslations('dashboard');
|
const t = useTranslations('dashboard');
|
||||||
|
|
||||||
const { data: userSubscribe = [], refetch } = useQuery({
|
const { data: userSubscribe = {}, refetch } = useQuery({
|
||||||
queryKey: ['queryUserSubscribe'],
|
queryKey: ['queryUserSubscribe'],
|
||||||
queryFn: async () => {
|
queryFn: async () => {
|
||||||
const { data } = await queryUserSubscribe();
|
const { data } = await queryUserSubscribe();
|
||||||
return data.data?.list || [];
|
const activeList = data.data?.list?.filter((v) => v.status === 1);
|
||||||
|
|
||||||
|
return activeList[0] ?? {};
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
@ -119,11 +120,11 @@ export default function Content() {
|
|||||||
{/* 快捷下载 Card */}
|
{/* 快捷下载 Card */}
|
||||||
<Card className='rounded-[20px] border border-[#D9D9D9] p-6 shadow-[0px_0px_52.6px_1px_rgba(15,44,83,0.05)] 2xl:order-2 2xl:col-span-1'>
|
<Card className='rounded-[20px] border border-[#D9D9D9] p-6 shadow-[0px_0px_52.6px_1px_rgba(15,44,83,0.05)] 2xl:order-2 2xl:col-span-1'>
|
||||||
<div className='flex items-center justify-between'>
|
<div className='flex items-center justify-between'>
|
||||||
<h3 className='text-base font-medium text-[#666666] sm:text-xl'>快捷下载</h3>
|
<h3 className='text-base font-medium text-[#666666] sm:text-xl'>
|
||||||
</div>
|
{t('quickDownloads')}
|
||||||
<div className={'text-xs font-normal leading-[1.5] text-[#666]'}>
|
</h3>
|
||||||
选择对应操作系统下载客户端
|
|
||||||
</div>
|
</div>
|
||||||
|
<div className={'text-xs font-normal leading-[1.5] text-[#666]'}>{t('selectOS')}</div>
|
||||||
|
|
||||||
<div
|
<div
|
||||||
className={
|
className={
|
||||||
@ -141,11 +142,24 @@ export default function Content() {
|
|||||||
icon: 'Group 77',
|
icon: 'Group 77',
|
||||||
href: 'https://apps.apple.com/us/app/shadowrocket/id932747118?l=zh-Hans-CN',
|
href: 'https://apps.apple.com/us/app/shadowrocket/id932747118?l=zh-Hans-CN',
|
||||||
},
|
},
|
||||||
{ label: 'Win', icon: 'Group 75', href: '' },
|
{
|
||||||
{ label: 'Android', icon: 'Group 75', href: '' },
|
label: 'Win',
|
||||||
|
icon: 'Group 75',
|
||||||
|
href: 'https://down.airoport.xin/Hiddify-Windows-Setup-x64.msix',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Android',
|
||||||
|
icon: 'Group 75',
|
||||||
|
href: 'https://down.airoport.xin/Hiddify-Android-universal.apk',
|
||||||
|
},
|
||||||
].map((v) => {
|
].map((v) => {
|
||||||
return (
|
return (
|
||||||
<a href={v.href} target={'_blank'} className={'cursor-pointer text-center'}>
|
<a
|
||||||
|
key={v.label}
|
||||||
|
href={v.href}
|
||||||
|
target={'_blank'}
|
||||||
|
className={'cursor-pointer text-center'}
|
||||||
|
>
|
||||||
<div className={''}>
|
<div className={''}>
|
||||||
<SvgIcon name={v.icon}></SvgIcon>
|
<SvgIcon name={v.icon}></SvgIcon>
|
||||||
</div>
|
</div>
|
||||||
@ -159,7 +173,7 @@ export default function Content() {
|
|||||||
'mt-2.5 flex h-[37px] items-center justify-between rounded-full bg-[#EAEAEA] pl-4 text-[#666]'
|
'mt-2.5 flex h-[37px] items-center justify-between rounded-full bg-[#EAEAEA] pl-4 text-[#666]'
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
<span className={'text-sm font-medium'}>免费美区Apple ID</span>
|
<span className={'text-sm font-medium'}>{t('freeAppleID')}</span>
|
||||||
<AiroButton
|
<AiroButton
|
||||||
className={'m-1'}
|
className={'m-1'}
|
||||||
variant={'primary'}
|
variant={'primary'}
|
||||||
@ -170,7 +184,7 @@ export default function Content() {
|
|||||||
});
|
});
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
获取
|
{t('get')}
|
||||||
</AiroButton>
|
</AiroButton>
|
||||||
</div>
|
</div>
|
||||||
</Card>
|
</Card>
|
||||||
@ -189,20 +203,13 @@ export default function Content() {
|
|||||||
{t('beginnerTutorial')}
|
{t('beginnerTutorial')}
|
||||||
</Link>
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
<div className={'text-xs font-light leading-[1.5] text-[#666]'}>
|
|
||||||
复制订阅链接或点击二维码按钮扫码
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{userSubscribe?.[0] && data?.protocol ? (
|
<SubScribeCard
|
||||||
<SubScribeCard
|
userSubscribeData={userSubscribe}
|
||||||
userSubscribeData={userSubscribe?.[0]}
|
protocol={data?.protocol || []}
|
||||||
protocol={data.protocol}
|
refetch={refetch}
|
||||||
refetch={refetch}
|
/>
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
<Empty />
|
|
||||||
)}
|
|
||||||
</Card>
|
</Card>
|
||||||
|
|
||||||
{/* 账户概况 Card */}
|
{/* 账户概况 Card */}
|
||||||
@ -218,7 +225,7 @@ export default function Content() {
|
|||||||
|
|
||||||
<div className='mb-3 sm:mb-3.5'>
|
<div className='mb-3 sm:mb-3.5'>
|
||||||
<span className='text-2xl font-medium text-[#091B33]'>
|
<span className='text-2xl font-medium text-[#091B33]'>
|
||||||
{userSubscribe?.length > 0 && userSubscribe[0]?.status === 1 && orderData
|
{userSubscribe?.status === 1 && orderData
|
||||||
? orderData?.quantity === 1
|
? orderData?.quantity === 1
|
||||||
? t('annualMonthPlanUser')
|
? t('annualMonthPlanUser')
|
||||||
: t('annualYearPlanUser')
|
: t('annualYearPlanUser')
|
||||||
@ -247,93 +254,109 @@ export default function Content() {
|
|||||||
<h3 className='flex items-center justify-between text-[#666666]'>
|
<h3 className='flex items-center justify-between text-[#666666]'>
|
||||||
<div className={'flex items-center justify-between'}>
|
<div className={'flex items-center justify-between'}>
|
||||||
<span className={'text-base font-medium sm:text-xl'}>{t('planStatus')}</span>
|
<span className={'text-base font-medium sm:text-xl'}>{t('planStatus')}</span>
|
||||||
{userSubscribe?.length > 0 && userSubscribe?.[0]?.status === 1 ? (
|
{userSubscribe?.status === 1 ? (
|
||||||
<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'}>
|
||||||
|
{t('notEffect')}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
<ResetTraffic
|
<ResetTraffic
|
||||||
className={
|
className={
|
||||||
'border-0 bg-transparent p-0 text-sm font-normal text-[#225BA9] shadow-none outline-0 hover:bg-transparent'
|
'border-0 bg-transparent p-0 text-sm font-normal text-[#225BA9] shadow-none outline-0 hover:bg-transparent'
|
||||||
}
|
}
|
||||||
id={userSubscribe?.[0]?.id || 0}
|
id={userSubscribe?.id || 0}
|
||||||
replacement={userSubscribe?.[0]?.subscribe.replacement}
|
replacement={userSubscribe?.subscribe?.replacement}
|
||||||
/>
|
/>
|
||||||
</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?.expire_time, false) || t('None')}
|
||||||
{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?.subscribe?.name ? (
|
||||||
{userSubscribe?.[0]?.subscribe.name}
|
userSubscribe?.subscribe?.name
|
||||||
</span>
|
) : (
|
||||||
</div>
|
<span className={'text-[#848484]'}>{t('noPlanAvailable')}</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?.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?.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?.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?.subscribe?.device_limit ? (
|
||||||
|
<>
|
||||||
|
<Display
|
||||||
|
type='traffic'
|
||||||
|
value={userSubscribe?.upload + userSubscribe?.download}
|
||||||
|
unlimited={!userSubscribe?.traffic}
|
||||||
|
/>
|
||||||
|
/
|
||||||
|
<Display
|
||||||
|
type='traffic'
|
||||||
|
value={userSubscribe?.traffic || 0}
|
||||||
|
unlimited={!userSubscribe?.traffic}
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
'0GB/0GB'
|
||||||
|
)}
|
||||||
|
</span>
|
||||||
|
<span className='text-xs sm:text-sm'>
|
||||||
|
{t('remaining')}
|
||||||
|
{userSubscribe?.status === 1 ? (
|
||||||
|
<>
|
||||||
|
{100 -
|
||||||
|
Math.round(
|
||||||
|
(((userSubscribe?.upload || 0) + (userSubscribe?.download || 0)) /
|
||||||
|
(userSubscribe?.traffic || 1)) *
|
||||||
|
100,
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
0
|
||||||
|
)}
|
||||||
|
%
|
||||||
</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?.upload || 0) + (userSubscribe?.download || 0)) / (userSubscribe?.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 */}
|
||||||
|
|||||||
@ -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(
|
||||||
|
|||||||
@ -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'
|
||||||
|
|||||||
@ -1,4 +1,5 @@
|
|||||||
{
|
{
|
||||||
|
"None": "None",
|
||||||
"accountBalance": "Account Balance",
|
"accountBalance": "Account Balance",
|
||||||
"accountOverview": "Account Overview",
|
"accountOverview": "Account Overview",
|
||||||
"address1": "Address 1",
|
"address1": "Address 1",
|
||||||
@ -7,11 +8,13 @@
|
|||||||
"annualYearPlanUser": "Annual Plan User",
|
"annualYearPlanUser": "Annual Plan User",
|
||||||
"availableDevices": "Available Devices",
|
"availableDevices": "Available Devices",
|
||||||
"beginnerTutorial": "Beginner Tutorial",
|
"beginnerTutorial": "Beginner Tutorial",
|
||||||
|
"buySubscriptionNow": "Buy Subscription Now",
|
||||||
"cancel": "Cancel",
|
"cancel": "Cancel",
|
||||||
"confirm": "Confirm",
|
"confirm": "Confirm",
|
||||||
"confirmResetSubscription": "Are you sure you want to reset the subscription address?",
|
"confirmResetSubscription": "Are you sure you want to reset the subscription address?",
|
||||||
"copy": "Copy",
|
"copy": "Copy",
|
||||||
"copyFailure": "Copy failed, please copy manually",
|
"copyFailure": "Copy failed, please copy manually",
|
||||||
|
"copySubscribeLink": "Copy the subscription link or click the QR code button to scan",
|
||||||
"copySubscriptionLinkOrScanQrCode": "Copy subscription link or click the QR code button to scan",
|
"copySubscriptionLinkOrScanQrCode": "Copy subscription link or click the QR code button to scan",
|
||||||
"copySuccess": "Copy successful",
|
"copySuccess": "Copy successful",
|
||||||
"deducted": "Canceled",
|
"deducted": "Canceled",
|
||||||
@ -19,6 +22,8 @@
|
|||||||
"expirationDays": "Expiration Days",
|
"expirationDays": "Expiration Days",
|
||||||
"expired": "Expired",
|
"expired": "Expired",
|
||||||
"finished": "Traffic exhausted",
|
"finished": "Traffic exhausted",
|
||||||
|
"freeAppleID": "Free US Apple ID",
|
||||||
|
"get": "Get",
|
||||||
"import": "Import",
|
"import": "Import",
|
||||||
"inEffect": "In Effect",
|
"inEffect": "In Effect",
|
||||||
"latestAnnouncement": "Latest Announcement",
|
"latestAnnouncement": "Latest Announcement",
|
||||||
@ -32,6 +37,7 @@
|
|||||||
"noPlanAvailable": "No Plan Available",
|
"noPlanAvailable": "No Plan Available",
|
||||||
"noReset": "No Reset",
|
"noReset": "No Reset",
|
||||||
"noYPlan": "No Plan Active",
|
"noYPlan": "No Plan Active",
|
||||||
|
"notEffect": "Not in effect",
|
||||||
"online": "Online: ",
|
"online": "Online: ",
|
||||||
"pageOf": "Page {pageIndex} of {pageCount}",
|
"pageOf": "Page {pageIndex} of {pageCount}",
|
||||||
"pinnedAnnouncement": "[Pinned]",
|
"pinnedAnnouncement": "[Pinned]",
|
||||||
@ -40,12 +46,14 @@
|
|||||||
"prompt": "Prompt",
|
"prompt": "Prompt",
|
||||||
"purchaseSubscription": "Purchase Subscription",
|
"purchaseSubscription": "Purchase Subscription",
|
||||||
"qrCode": "QR Code",
|
"qrCode": "QR Code",
|
||||||
|
"quickDownloads": "Quick Downloads",
|
||||||
"remaining": "Remaining: ",
|
"remaining": "Remaining: ",
|
||||||
"resetSubscription": "Reset Subscription Address",
|
"resetSubscription": "Reset Subscription Address",
|
||||||
"resetSuccess": "Reset successful",
|
"resetSuccess": "Reset successful",
|
||||||
"rowsPerPage": "Rows per page",
|
"rowsPerPage": "Rows per page",
|
||||||
"scanCodeToSubscribe": "Scan code to subscribe",
|
"scanCodeToSubscribe": "Scan code to subscribe",
|
||||||
"scanToSubscribe": "Scan to Subscribe",
|
"scanToSubscribe": "Scan to Subscribe",
|
||||||
|
"selectOS": "Select the corresponding operating system to download the client",
|
||||||
"siteAnnouncements": "Site Announcements",
|
"siteAnnouncements": "Site Announcements",
|
||||||
"subscriptionUrl": "Subscription URL",
|
"subscriptionUrl": "Subscription URL",
|
||||||
"totalTraffic": "Total Traffic",
|
"totalTraffic": "Total Traffic",
|
||||||
|
|||||||
@ -1,4 +1,5 @@
|
|||||||
{
|
{
|
||||||
|
"None": "暂无",
|
||||||
"accountBalance": "账户余额",
|
"accountBalance": "账户余额",
|
||||||
"accountOverview": "账户概况",
|
"accountOverview": "账户概况",
|
||||||
"address1": "地址1",
|
"address1": "地址1",
|
||||||
@ -7,11 +8,13 @@
|
|||||||
"annualYearPlanUser": "年度套餐用户",
|
"annualYearPlanUser": "年度套餐用户",
|
||||||
"availableDevices": "可用设备",
|
"availableDevices": "可用设备",
|
||||||
"beginnerTutorial": "新手教程",
|
"beginnerTutorial": "新手教程",
|
||||||
|
"buySubscriptionNow": "立即购买订阅",
|
||||||
"cancel": "取消",
|
"cancel": "取消",
|
||||||
"confirm": "确认",
|
"confirm": "确认",
|
||||||
"confirmResetSubscription": "是否确认重置订阅地址?",
|
"confirmResetSubscription": "是否确认重置订阅地址?",
|
||||||
"copy": "复制",
|
"copy": "复制",
|
||||||
"copyFailure": "复制失败,请手动复制",
|
"copyFailure": "复制失败,请手动复制",
|
||||||
|
"copySubscribeLink": "复制订阅链接或点击二维码按钮扫码",
|
||||||
"copySubscriptionLinkOrScanQrCode": "复制订阅链接或点击二维码按钮扫码",
|
"copySubscriptionLinkOrScanQrCode": "复制订阅链接或点击二维码按钮扫码",
|
||||||
"copySuccess": "复制成功",
|
"copySuccess": "复制成功",
|
||||||
"deducted": "已取消",
|
"deducted": "已取消",
|
||||||
@ -19,6 +22,8 @@
|
|||||||
"expirationDays": "到期时间/天",
|
"expirationDays": "到期时间/天",
|
||||||
"expired": "已过期",
|
"expired": "已过期",
|
||||||
"finished": "流量已用尽",
|
"finished": "流量已用尽",
|
||||||
|
"freeAppleID": "免费美区Apple ID",
|
||||||
|
"get": "获取",
|
||||||
"import": "导入",
|
"import": "导入",
|
||||||
"inEffect": "生效中",
|
"inEffect": "生效中",
|
||||||
"latestAnnouncement": "最新公告",
|
"latestAnnouncement": "最新公告",
|
||||||
@ -32,6 +37,7 @@
|
|||||||
"noPlanAvailable": "暂无套餐",
|
"noPlanAvailable": "暂无套餐",
|
||||||
"noReset": "不重置",
|
"noReset": "不重置",
|
||||||
"noYPlan": "尚未有套餐生效",
|
"noYPlan": "尚未有套餐生效",
|
||||||
|
"notEffect": "未生效",
|
||||||
"online": "在线:",
|
"online": "在线:",
|
||||||
"pageOf": "第 {pageIndex} 页,共 {pageCount} 页",
|
"pageOf": "第 {pageIndex} 页,共 {pageCount} 页",
|
||||||
"pinnedAnnouncement": "【置顶公告】",
|
"pinnedAnnouncement": "【置顶公告】",
|
||||||
@ -40,12 +46,14 @@
|
|||||||
"prompt": "提示",
|
"prompt": "提示",
|
||||||
"purchaseSubscription": "购买订阅",
|
"purchaseSubscription": "购买订阅",
|
||||||
"qrCode": "二维码",
|
"qrCode": "二维码",
|
||||||
|
"quickDownloads": "快捷下载",
|
||||||
"remaining": "剩余:",
|
"remaining": "剩余:",
|
||||||
"resetSubscription": "重置订阅地址",
|
"resetSubscription": "重置订阅地址",
|
||||||
"resetSuccess": "重置成功",
|
"resetSuccess": "重置成功",
|
||||||
"rowsPerPage": "每页显示",
|
"rowsPerPage": "每页显示",
|
||||||
"scanCodeToSubscribe": "扫描码订阅",
|
"scanCodeToSubscribe": "扫描码订阅",
|
||||||
"scanToSubscribe": "扫描订阅",
|
"scanToSubscribe": "扫描订阅",
|
||||||
|
"selectOS": "选择对应操作系统下载客户端",
|
||||||
"siteAnnouncements": "网站公告",
|
"siteAnnouncements": "网站公告",
|
||||||
"subscriptionUrl": "订阅地址",
|
"subscriptionUrl": "订阅地址",
|
||||||
"totalTraffic": "总流量",
|
"totalTraffic": "总流量",
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "ppanel-web",
|
"name": "ppanel-web",
|
||||||
"version": "1.3.0",
|
"version": "1.3.1",
|
||||||
"private": true,
|
"private": true,
|
||||||
"homepage": "https://github.com/perfect-panel/ppanel-web",
|
"homepage": "https://github.com/perfect-panel/ppanel-web",
|
||||||
"bugs": {
|
"bugs": {
|
||||||
|
|||||||
@ -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',
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user