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

fix: 样式修改
Some checks failed
Publish Release Assets / Publish Release Assets (push) Has been cancelled
Details

Browse Source
This commit is contained in:
speakeloudest 2025-09-25 06:16:07 -07:00
parent e020a53020
commit 330a8c128b
2 changed files with 43 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -71,7 +71,7 @@ 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'>
{userSubscribeData?.token ? ( {userSubscribeData?.status === 1 ? (
<Display <Display
type='traffic' type='traffic'
value={userSubscribeData.traffic} value={userSubscribeData.traffic}
@ -87,7 +87,7 @@ 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?.token ? ( {userSubscribeData?.status === 1 ? (
<> <>
{userSubscribeData.reset_time {userSubscribeData.reset_time
? differenceInDays(new Date(userSubscribeData.reset_time), new Date()) ? differenceInDays(new Date(userSubscribeData.reset_time), new Date())
@ -103,7 +103,7 @@ 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?.token ? ( {userSubscribeData?.status === 1 ? (
<> <>
{userSubscribeData.expire_time {userSubscribeData.expire_time
? differenceInDays(new Date(userSubscribeData.expire_time), new Date()) || ? differenceInDays(new Date(userSubscribeData.expire_time), new Date()) ||
@ -120,11 +120,13 @@ const SubscribeCard = (props: SubscribeCardProps) => {
{/* 订阅链接 */} {/* 订阅链接 */}
<div className='relative 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]'> {userSubscribeData?.status !== 1 && (
<AiroButton variant={'primary'} asChild> <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]'>
<Link href={'/subscribe'}>{t('buySubscriptionNow')}</Link> <AiroButton variant={'primary'} asChild>
</AiroButton> <Link href={'/subscribe'}>{t('buySubscriptionNow')}</Link>
</div> </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

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

@ -41,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] ?? {};
}, },
}); });
@ -204,7 +206,7 @@ export default function Content() {
</div> </div>
<SubScribeCard <SubScribeCard
userSubscribeData={userSubscribe?.[0] || {}} userSubscribeData={userSubscribe}
protocol={data?.protocol || []} protocol={data?.protocol || []}
refetch={refetch} refetch={refetch}
/> />
@ -223,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')
@ -252,7 +254,7 @@ 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>
@ -266,20 +268,20 @@ export default function Content() {
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>
<div> <div>
<div className='mt-1 text-xs font-light text-[#666666] sm:text-sm'> <div className='mt-1 text-xs font-light text-[#666666] sm:text-sm'>
{t('planExpirationTime')} {t('planExpirationTime')}
{formatDate(userSubscribe?.[0]?.expire_time, false) || t('None')} {formatDate(userSubscribe?.expire_time, false) || t('None')}
</div> </div>
<div className='mb-3 mt-1 sm:mb-5'> <div className='mb-3 mt-1 sm:mb-5'>
<span className='text-2xl font-medium text-[#091B33]'> <span className='text-2xl font-medium text-[#091B33]'>
{userSubscribe?.[0]?.subscribe.name ? ( {userSubscribe?.subscribe?.name ? (
userSubscribe?.[0]?.subscribe.name userSubscribe?.subscribe?.name
) : ( ) : (
<span className={'text-[#848484]'}>{t('noPlanAvailable')}</span> <span className={'text-[#848484]'}>{t('noPlanAvailable')}</span>
)} )}
@ -289,12 +291,12 @@ export default function Content() {
<div className='flex items-center gap-2'> <div className='flex items-center gap-2'>
<span className='text-xs sm:text-sm'>{t('availableDevices')}</span> <span className='text-xs sm:text-sm'>{t('availableDevices')}</span>
<div className='flex gap-2'> <div className='flex gap-2'>
{Array.from({ length: userSubscribe?.[0]?.subscribe.device_limit || 6 }).map( {Array.from({ length: userSubscribe?.subscribe?.device_limit || 6 }).map(
(_, index) => { (_, index) => {
return ( return (
<div <div
key={index} 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]'}`} 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>
); );
}, },
@ -303,25 +305,25 @@ export default function Content() {
</div> </div>
<span className='text-xs font-light sm:text-sm'> <span className='text-xs font-light sm:text-sm'>
{t('online')} {t('online')}
{data?.online_device || 0}/{userSubscribe?.[0]?.subscribe.device_limit || 0} {data?.online_device || 0}/{userSubscribe?.subscribe?.device_limit || 0}
</span> </span>
</div> </div>
<div> <div>
<div className='mb-1 flex items-center justify-between font-light'> <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('usedTrafficTotalTraffic')} {t('usedTrafficTotalTraffic')}
{userSubscribe?.[0]?.subscribe.device_limit ? ( {userSubscribe?.subscribe?.device_limit ? (
<> <>
<Display <Display
type='traffic' type='traffic'
value={userSubscribe?.[0]?.upload + userSubscribe?.[0]?.download} value={userSubscribe?.upload + userSubscribe?.download}
unlimited={!userSubscribe?.[0]?.traffic} unlimited={!userSubscribe?.traffic}
/> />
/ /
<Display <Display
type='traffic' type='traffic'
value={userSubscribe?.[0]?.traffic || 0} value={userSubscribe?.traffic || 0}
unlimited={!userSubscribe?.[0]?.traffic} unlimited={!userSubscribe?.traffic}
/> />
</> </>
) : ( ) : (
@ -330,12 +332,18 @@ export default function Content() {
</span> </span>
<span className='text-xs sm:text-sm'> <span className='text-xs sm:text-sm'>
{t('remaining')} {t('remaining')}
{100 - {userSubscribe?.status === 1 ? (
Math.round( <>
(((userSubscribe?.[0]?.upload || 0) + (userSubscribe?.[0]?.download || 0)) / {100 -
(userSubscribe?.[0]?.traffic || 1)) * Math.round(
100, (((userSubscribe?.upload || 0) + (userSubscribe?.download || 0)) /
)} (userSubscribe?.traffic || 1)) *
100,
)}
</>
) : (
0
)}
% %
</span> </span>
</div> </div>
@ -343,7 +351,7 @@ export default function Content() {
<div <div
className={'h-full rounded-[20px] bg-[#225BA9]'} className={'h-full rounded-[20px] bg-[#225BA9]'}
style={{ style={{
width: `${Math.round((((userSubscribe?.[0]?.upload || 0) + (userSubscribe?.[0]?.download || 0)) / (userSubscribe?.[0]?.traffic || 1)) * 100)}%`, width: `${Math.round((((userSubscribe?.upload || 0) + (userSubscribe?.download || 0)) / (userSubscribe?.traffic || 1)) * 100)}%`,
}} }}
></div> ></div>
</div> </div>