merge: 合并 main 分支到 dev,保留动态 SSH 配置
Some checks failed
CI / build (20.15.1) (push) Has been cancelled

This commit is contained in:
shanshanzhong 2025-10-06 00:12:56 -07:00
commit 52b62694c3
9 changed files with 188 additions and 121 deletions

View File

@ -134,7 +134,9 @@ export function UserDetail({ id }: { id: number }) {
<HoverCardTrigger asChild>
<Button variant='link' className='p-0' asChild>
<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>
</Button>
</HoverCardTrigger>

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?.status === 1 ? (
<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?.status === 1 ? (
<>
{userSubscribeData.reset_time
? differenceInDays(new Date(userSubscribeData.reset_time), new Date())
: t('noReset')}
</>
) : (
'N/A'
)}
</p>
</div>
<div>
@ -91,17 +103,30 @@ 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?.status === 1 ? (
<>
{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'>
{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'>
{props.protocol.length > 1 && (
<Tabs
@ -126,21 +151,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 +183,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 +228,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 +256,7 @@ const SubscribeCard = (props: SubscribeCardProps) => {
<Renewal
className='px-2 text-xs'
id={userSubscribeData.id}
subscribe={userSubscribeData.subscribe}
subscribe={userSubscribeData.subscribe || {}}
/>
</div>
</div>

View File

@ -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)[] = [
@ -42,11 +41,13 @@ const platforms: (keyof API.ApplicationPlatform)[] = [
export default function Content() {
const t = useTranslations('dashboard');
const { data: userSubscribe = [], refetch } = useQuery({
const { data: userSubscribe = {}, refetch } = useQuery({
queryKey: ['queryUserSubscribe'],
queryFn: async () => {
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 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'>
<h3 className='text-base font-medium text-[#666666] sm:text-xl'></h3>
</div>
<div className={'text-xs font-normal leading-[1.5] text-[#666]'}>
<h3 className='text-base font-medium text-[#666666] sm:text-xl'>
{t('quickDownloads')}
</h3>
</div>
<div className={'text-xs font-normal leading-[1.5] text-[#666]'}>{t('selectOS')}</div>
<div
className={
@ -141,11 +142,24 @@ export default function Content() {
icon: 'Group 77',
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) => {
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={''}>
<SvgIcon name={v.icon}></SvgIcon>
</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]'
}
>
<span className={'text-sm font-medium'}>Apple ID</span>
<span className={'text-sm font-medium'}>{t('freeAppleID')}</span>
<AiroButton
className={'m-1'}
variant={'primary'}
@ -170,7 +184,7 @@ export default function Content() {
});
}}
>
{t('get')}
</AiroButton>
</div>
</Card>
@ -189,20 +203,13 @@ export default function Content() {
{t('beginnerTutorial')}
</Link>
</div>
<div className={'text-xs font-light leading-[1.5] text-[#666]'}>
</div>
</div>
{userSubscribe?.[0] && data?.protocol ? (
<SubScribeCard
userSubscribeData={userSubscribe?.[0]}
protocol={data.protocol}
refetch={refetch}
/>
) : (
<Empty />
)}
<SubScribeCard
userSubscribeData={userSubscribe}
protocol={data?.protocol || []}
refetch={refetch}
/>
</Card>
{/* 账户概况 Card */}
@ -218,7 +225,7 @@ export default function Content() {
<div className='mb-3 sm:mb-3.5'>
<span className='text-2xl font-medium text-[#091B33]'>
{userSubscribe?.length > 0 && userSubscribe[0]?.status === 1 && orderData
{userSubscribe?.status === 1 && orderData
? orderData?.quantity === 1
? t('annualMonthPlanUser')
: t('annualYearPlanUser')
@ -247,93 +254,109 @@ export default function Content() {
<h3 className='flex items-center justify-between text-[#666666]'>
<div className={'flex items-center justify-between'}>
<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'}>
{t('inEffect')}
</span>
) : null}
) : (
<span className={'ml-2.5 rounded-full bg-[#666666] px-2 text-[8px] text-white'}>
{t('notEffect')}
</span>
)}
</div>
<ResetTraffic
className={
'border-0 bg-transparent p-0 text-sm font-normal text-[#225BA9] shadow-none outline-0 hover:bg-transparent'
}
id={userSubscribe?.[0]?.id || 0}
replacement={userSubscribe?.[0]?.subscribe.replacement}
id={userSubscribe?.id || 0}
replacement={userSubscribe?.subscribe?.replacement}
/>
</h3>
</div>
{userSubscribe?.length ? (
<>
<div className='mt-1 text-xs text-[#666666] sm:text-sm'>
{t('planExpirationTime')}
{formatDate(userSubscribe?.[0]?.expire_time, false)}
</div>
<div className='mb-3 sm:mb-5'>
<span className='text-2xl font-medium text-[#091B33]'>
{userSubscribe?.[0]?.subscribe.name}
</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(
(_, index) => {
return (
<div
key={index}
className={`h-4 w-4 rounded-full ${index < (userSubscribe?.[0]?.subscribe.device_limit || 0) > 1 ? 'bg-[#225BA9]' : 'bg-[#D9D9D9]'}`}
></div>
);
},
)}
</div>
<div>
<div className='mt-1 text-xs font-light text-[#666666] sm:text-sm'>
{t('planExpirationTime')}
{formatDate(userSubscribe?.expire_time, false) || t('None')}
</div>
<div className='mb-3 mt-1 sm:mb-5'>
<span className='text-2xl font-medium text-[#091B33]'>
{userSubscribe?.subscribe?.name ? (
userSubscribe?.subscribe?.name
) : (
<span className={'text-[#848484]'}>{t('noPlanAvailable')}</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?.subscribe?.device_limit || 6 }).map(
(_, index) => {
return (
<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>
<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'>
{t('online')}
{data?.online_device} / {userSubscribe?.[0]?.subscribe.device_limit}
{t('usedTrafficTotalTraffic')}
{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>
</div>
<div>
<div className='mb-1 flex items-center justify-between'>
<span className='text-xs sm:text-sm'>
{t('usedTrafficTotalTraffic')}
<Display
type='traffic'
value={userSubscribe?.[0]?.upload + userSubscribe?.[0]?.download}
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 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?.upload || 0) + (userSubscribe?.download || 0)) / (userSubscribe?.traffic || 1)) * 100)}%`,
}}
></div>
</div>
</>
) : (
<Airo_Empty className={'py-0'} description={t('noPlanAvailable')} />
)}
</div>
</div>
</Card>
{/* 网站公告 Card */}

View File

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

View File

@ -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'

View File

@ -1,4 +1,5 @@
{
"None": "None",
"accountBalance": "Account Balance",
"accountOverview": "Account Overview",
"address1": "Address 1",
@ -7,11 +8,13 @@
"annualYearPlanUser": "Annual Plan User",
"availableDevices": "Available Devices",
"beginnerTutorial": "Beginner Tutorial",
"buySubscriptionNow": "Buy Subscription Now",
"cancel": "Cancel",
"confirm": "Confirm",
"confirmResetSubscription": "Are you sure you want to reset the subscription address?",
"copy": "Copy",
"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",
"copySuccess": "Copy successful",
"deducted": "Canceled",
@ -19,6 +22,8 @@
"expirationDays": "Expiration Days",
"expired": "Expired",
"finished": "Traffic exhausted",
"freeAppleID": "Free US Apple ID",
"get": "Get",
"import": "Import",
"inEffect": "In Effect",
"latestAnnouncement": "Latest Announcement",
@ -32,6 +37,7 @@
"noPlanAvailable": "No Plan Available",
"noReset": "No Reset",
"noYPlan": "No Plan Active",
"notEffect": "Not in effect",
"online": "Online: ",
"pageOf": "Page {pageIndex} of {pageCount}",
"pinnedAnnouncement": "[Pinned]",
@ -40,12 +46,14 @@
"prompt": "Prompt",
"purchaseSubscription": "Purchase Subscription",
"qrCode": "QR Code",
"quickDownloads": "Quick Downloads",
"remaining": "Remaining: ",
"resetSubscription": "Reset Subscription Address",
"resetSuccess": "Reset successful",
"rowsPerPage": "Rows per page",
"scanCodeToSubscribe": "Scan code to subscribe",
"scanToSubscribe": "Scan to Subscribe",
"selectOS": "Select the corresponding operating system to download the client",
"siteAnnouncements": "Site Announcements",
"subscriptionUrl": "Subscription URL",
"totalTraffic": "Total Traffic",

View File

@ -1,4 +1,5 @@
{
"None": "暂无",
"accountBalance": "账户余额",
"accountOverview": "账户概况",
"address1": "地址1",
@ -7,11 +8,13 @@
"annualYearPlanUser": "年度套餐用户",
"availableDevices": "可用设备",
"beginnerTutorial": "新手教程",
"buySubscriptionNow": "立即购买订阅",
"cancel": "取消",
"confirm": "确认",
"confirmResetSubscription": "是否确认重置订阅地址?",
"copy": "复制",
"copyFailure": "复制失败,请手动复制",
"copySubscribeLink": "复制订阅链接或点击二维码按钮扫码",
"copySubscriptionLinkOrScanQrCode": "复制订阅链接或点击二维码按钮扫码",
"copySuccess": "复制成功",
"deducted": "已取消",
@ -19,6 +22,8 @@
"expirationDays": "到期时间/天",
"expired": "已过期",
"finished": "流量已用尽",
"freeAppleID": "免费美区Apple ID",
"get": "获取",
"import": "导入",
"inEffect": "生效中",
"latestAnnouncement": "最新公告",
@ -32,6 +37,7 @@
"noPlanAvailable": "暂无套餐",
"noReset": "不重置",
"noYPlan": "尚未有套餐生效",
"notEffect": "未生效",
"online": "在线:",
"pageOf": "第 {pageIndex} 页,共 {pageCount} 页",
"pinnedAnnouncement": "【置顶公告】",
@ -40,12 +46,14 @@
"prompt": "提示",
"purchaseSubscription": "购买订阅",
"qrCode": "二维码",
"quickDownloads": "快捷下载",
"remaining": "剩余:",
"resetSubscription": "重置订阅地址",
"resetSuccess": "重置成功",
"rowsPerPage": "每页显示",
"scanCodeToSubscribe": "扫描码订阅",
"scanToSubscribe": "扫描订阅",
"selectOS": "选择对应操作系统下载客户端",
"siteAnnouncements": "网站公告",
"subscriptionUrl": "订阅地址",
"totalTraffic": "总流量",

View File

@ -1,6 +1,6 @@
{
"name": "ppanel-web",
"version": "1.3.0",
"version": "1.3.1",
"private": true,
"homepage": "https://github.com/perfect-panel/ppanel-web",
"bugs": {

View File

@ -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',