252 lines
8.9 KiB
TypeScript
252 lines
8.9 KiB
TypeScript
'use client';
|
|
|
|
import { UserDetail } from '@/app/dashboard/user/user-detail';
|
|
import { ProTable } from '@/components/pro-table';
|
|
import { getUserSubscribeById } from '@/services/admin/user';
|
|
import { useQuery } from '@tanstack/react-query';
|
|
import { Badge } from '@workspace/ui/components/badge';
|
|
import { Button } from '@workspace/ui/components/button';
|
|
import { Progress } from '@workspace/ui/components/progress';
|
|
|
|
import {
|
|
Sheet,
|
|
SheetContent,
|
|
SheetHeader,
|
|
SheetTitle,
|
|
SheetTrigger,
|
|
} from '@workspace/ui/components/sheet';
|
|
import { formatBytes, formatDate } from '@workspace/ui/utils';
|
|
import { useTranslations } from 'next-intl';
|
|
import { useState } from 'react';
|
|
|
|
interface NodeDetailDialogProps {
|
|
node: API.Server;
|
|
children?: React.ReactNode;
|
|
trigger?: React.ReactNode;
|
|
}
|
|
|
|
// 统一的用户订阅信息组件
|
|
function UserSubscribeInfo({
|
|
userId,
|
|
type,
|
|
}: {
|
|
userId: number;
|
|
type: 'account' | 'subscribeName' | 'subscribeId' | 'trafficUsage' | 'expireTime';
|
|
}) {
|
|
const { data } = useQuery({
|
|
enabled: userId !== 0,
|
|
queryKey: ['getUserSubscribeById', userId],
|
|
queryFn: async () => {
|
|
const { data } = await getUserSubscribeById({ id: userId });
|
|
return data.data;
|
|
},
|
|
});
|
|
|
|
if (!data) return <span className='text-muted-foreground'>--</span>;
|
|
|
|
switch (type) {
|
|
case 'account':
|
|
if (!data.user_id) return <span className='text-muted-foreground'>--</span>;
|
|
return <UserDetail id={data.user_id} />;
|
|
|
|
case 'subscribeName':
|
|
if (!data.subscribe?.name) return <span className='text-muted-foreground'>--</span>;
|
|
return <span className='text-sm'>{data.subscribe.name}</span>;
|
|
|
|
case 'subscribeId':
|
|
if (!data.id) return <span className='text-muted-foreground'>--</span>;
|
|
return <span className='font-mono text-sm'>{data.id}</span>;
|
|
|
|
case 'trafficUsage': {
|
|
const usedTraffic = data.upload + data.download;
|
|
const totalTraffic = data.traffic || 0;
|
|
return (
|
|
<div className='min-w-0 text-sm'>
|
|
<div className='break-words'>
|
|
{formatBytes(usedTraffic)} / {totalTraffic > 0 ? formatBytes(totalTraffic) : '无限制'}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
case 'expireTime': {
|
|
if (!data.expire_time) return <span className='text-muted-foreground'>--</span>;
|
|
const isExpired = data.expire_time < Date.now() / 1000;
|
|
return (
|
|
<div className='flex flex-col gap-1 sm:flex-row sm:items-center sm:gap-2'>
|
|
<span className='text-sm'>{formatDate(data.expire_time)}</span>
|
|
{isExpired && (
|
|
<Badge variant='destructive' className='w-fit px-1 py-0 text-xs'>
|
|
过期
|
|
</Badge>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
default:
|
|
return <span className='text-muted-foreground'>--</span>;
|
|
}
|
|
}
|
|
|
|
export function NodeDetailDialog({ node, children, trigger }: NodeDetailDialogProps) {
|
|
const t = useTranslations('server.node');
|
|
const [open, setOpen] = useState(false);
|
|
|
|
const { status } = node;
|
|
const { online, cpu, mem, disk, updated_at } = status || {
|
|
online: {},
|
|
cpu: 0,
|
|
mem: 0,
|
|
disk: 0,
|
|
updated_at: 0,
|
|
};
|
|
|
|
const isOnline = updated_at > 0;
|
|
const onlineCount = (online && Object.keys(online).length) || 0;
|
|
|
|
// 转换在线用户数据为ProTable需要的格式
|
|
const onlineUsersData = Object.entries(online || {}).map(([uid, ips]) => ({
|
|
uid,
|
|
ips: ips as string[],
|
|
primaryIp: ips[0] || '',
|
|
allIps: (ips as string[]).join(', '),
|
|
}));
|
|
|
|
return (
|
|
<Sheet open={open} onOpenChange={setOpen}>
|
|
<SheetTrigger asChild>
|
|
{trigger || (
|
|
<Button variant='outline' size='sm'>
|
|
{t('detail')}
|
|
</Button>
|
|
)}
|
|
</SheetTrigger>
|
|
<SheetContent className='w-full max-w-full sm:w-[600px] sm:max-w-screen-md'>
|
|
<SheetHeader>
|
|
<SheetTitle>
|
|
{t('nodeDetail')} - {node.name}
|
|
</SheetTitle>
|
|
</SheetHeader>
|
|
<div className='-mx-6 h-[calc(100dvh-48px-16px-env(safe-area-inset-top))] space-y-2 overflow-y-auto px-6 py-4'>
|
|
<h3 className='text-base font-medium'>{t('nodeStatus')}</h3>
|
|
<div className='space-y-3'>
|
|
<div className='flex w-full flex-col gap-2 text-sm sm:flex-row sm:items-center sm:gap-3'>
|
|
<Badge variant={isOnline ? 'default' : 'destructive'} className='w-fit text-xs'>
|
|
{isOnline ? t('normal') : t('abnormal')}
|
|
</Badge>
|
|
<span className='text-muted-foreground'>
|
|
{t('onlineCount')}: {onlineCount}
|
|
</span>
|
|
{isOnline && (
|
|
<span className='text-muted-foreground text-xs sm:text-sm'>
|
|
{t('lastUpdated')}: {formatDate(updated_at)}
|
|
</span>
|
|
)}
|
|
</div>
|
|
|
|
{isOnline && (
|
|
<div className='grid grid-cols-1 gap-3 sm:grid-cols-3'>
|
|
<div className='space-y-1'>
|
|
<div className='flex justify-between text-xs'>
|
|
<span>CPU</span>
|
|
<span>{cpu?.toFixed(1)}%</span>
|
|
</div>
|
|
<Progress value={cpu ?? 0} className='h-1.5' max={100} />
|
|
</div>
|
|
<div className='space-y-1'>
|
|
<div className='flex justify-between text-xs'>
|
|
<span>{t('memory')}</span>
|
|
<span>{mem?.toFixed(1)}%</span>
|
|
</div>
|
|
<Progress value={mem ?? 0} className='h-1.5' max={100} />
|
|
</div>
|
|
<div className='space-y-1'>
|
|
<div className='flex justify-between text-xs'>
|
|
<span>{t('disk')}</span>
|
|
<span>{disk?.toFixed(1)}%</span>
|
|
</div>
|
|
<Progress value={disk ?? 0} className='h-1.5' max={100} />
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
{isOnline && onlineCount > 0 && (
|
|
<div>
|
|
<h3 className='mb-3 text-lg font-medium'>{t('onlineUsers')}</h3>
|
|
<div className='overflow-x-auto'>
|
|
<ProTable
|
|
header={{
|
|
hidden: true,
|
|
}}
|
|
columns={[
|
|
{
|
|
accessorKey: 'allIps',
|
|
header: t('ipAddresses'),
|
|
cell: ({ row }) => {
|
|
const ips = row.original.ips;
|
|
return (
|
|
<div className='flex min-w-0 flex-col gap-1'>
|
|
{ips.map((ip: string, index: number) => (
|
|
<div key={ip} className='whitespace-nowrap text-sm'>
|
|
{index === 0 ? (
|
|
<span className='font-medium'>{ip}</span>
|
|
) : (
|
|
<span className='text-muted-foreground'>{ip}</span>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
},
|
|
},
|
|
{
|
|
accessorKey: 'user',
|
|
header: t('user'),
|
|
cell: ({ row }) => (
|
|
<UserSubscribeInfo userId={Number(row.original.uid)} type='account' />
|
|
),
|
|
},
|
|
{
|
|
accessorKey: 'subscribeName',
|
|
header: t('subscribeName'),
|
|
cell: ({ row }) => (
|
|
<UserSubscribeInfo userId={Number(row.original.uid)} type='subscribeName' />
|
|
),
|
|
},
|
|
{
|
|
accessorKey: 'subscribeId',
|
|
header: t('subscribeId'),
|
|
cell: ({ row }) => (
|
|
<UserSubscribeInfo userId={Number(row.original.uid)} type='subscribeId' />
|
|
),
|
|
},
|
|
{
|
|
accessorKey: 'trafficUsage',
|
|
header: t('trafficUsage'),
|
|
cell: ({ row }) => (
|
|
<UserSubscribeInfo userId={Number(row.original.uid)} type='trafficUsage' />
|
|
),
|
|
},
|
|
{
|
|
accessorKey: 'expireTime',
|
|
header: t('expireTime'),
|
|
cell: ({ row }) => (
|
|
<UserSubscribeInfo userId={Number(row.original.uid)} type='expireTime' />
|
|
),
|
|
},
|
|
]}
|
|
request={async () => ({
|
|
list: onlineUsersData,
|
|
total: onlineUsersData.length,
|
|
})}
|
|
/>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</SheetContent>
|
|
</Sheet>
|
|
);
|
|
}
|