mirror of
https://github.com/woodchen-ink/nezha-dash-v1.git
synced 2025-07-19 09:51:56 +08:00
更新 ServerCard 组件，添加状态图标和颜色等级，优化布局和样式，增强网络和资源使用信息的展示，提升用户体验和可读性。
This commit is contained in:
parent
372082771c
commit
6b4ba04995
@ -12,6 +12,7 @@ import BillingInfo from "./billingInfo"
|
|||||||
import { Badge } from "./ui/badge"
|
import { Badge } from "./ui/badge"
|
||||||
import { Card, CardContent, CardHeader, CardFooter } from "./ui/card"
|
import { Card, CardContent, CardHeader, CardFooter } from "./ui/card"
|
||||||
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./ui/tooltip"
|
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./ui/tooltip"
|
||||||
|
import { ArrowDown, ArrowUp, Clock, Cpu, HardDrive, Server, Activity } from "lucide-react"
|
||||||
|
|
||||||
export default function ServerCard({ now, serverInfo }: { now: number; serverInfo: NezhaServer }) {
|
export default function ServerCard({ now, serverInfo }: { now: number; serverInfo: NezhaServer }) {
|
||||||
const { t } = useTranslation()
|
const { t } = useTranslation()
|
||||||
@ -73,33 +74,43 @@ export default function ServerCard({ now, serverInfo }: { now: number; serverInf
|
|||||||
: `${(speed * 1024).toFixed(2)}K/s`
|
: `${(speed * 1024).toFixed(2)}K/s`
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 获取颜色等级
|
||||||
|
const getColorClass = (value: number) => {
|
||||||
|
if (value > 90) return "text-red-500"
|
||||||
|
if (value > 70) return "text-orange-400"
|
||||||
|
return "text-green-500"
|
||||||
|
}
|
||||||
|
|
||||||
if (!online) {
|
if (!online) {
|
||||||
return (
|
return (
|
||||||
<Card
|
<Card
|
||||||
className={cn(
|
className={cn(
|
||||||
"cursor-pointer hover:bg-accent/50 transition-colors border-red-300/30 dark:border-red-900/30",
|
"cursor-pointer hover:bg-accent/50 transition-all duration-300 border-red-300/30 dark:border-red-900/30 shadow-md hover:shadow-lg",
|
||||||
{ "bg-card/70": customBackgroundImage }
|
{ "bg-card/70": customBackgroundImage }
|
||||||
)}
|
)}
|
||||||
onClick={cardClick}
|
onClick={cardClick}
|
||||||
>
|
>
|
||||||
|
<div className="absolute top-0 left-0 w-1 h-full bg-red-500 rounded-l-md"></div>
|
||||||
<CardContent className="p-4">
|
<CardContent className="p-4">
|
||||||
<div className="flex items-center gap-3 mb-2">
|
<div className="flex items-center gap-3 mb-2">
|
||||||
<span className="h-3 w-3 shrink-0 rounded-full bg-red-500 shadow-sm shadow-red-300 dark:shadow-red-900"></span>
|
<span className="h-3 w-3 shrink-0 rounded-full bg-red-500 shadow-sm pulse-animation shadow-red-300 dark:shadow-red-900"></span>
|
||||||
{showFlag && <ServerFlag country_code={country_code} />}
|
{showFlag && <ServerFlag country_code={country_code} />}
|
||||||
<h3 className="font-bold text-sm truncate flex-1">{name}</h3>
|
<h3 className="font-bold text-sm truncate flex-1">{name}</h3>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{parsedData?.billingDataMod && (
|
<div className="flex justify-between items-start">
|
||||||
<div className="mt-2">
|
{parsedData?.billingDataMod && (
|
||||||
<BillingInfo parsedData={parsedData} />
|
<div className="mt-2">
|
||||||
</div>
|
<BillingInfo parsedData={parsedData} />
|
||||||
)}
|
</div>
|
||||||
|
)}
|
||||||
{parsedData?.planDataMod && (
|
|
||||||
<div className="mt-2">
|
{parsedData?.planDataMod && (
|
||||||
<PlanInfo parsedData={parsedData} />
|
<div className="mt-2">
|
||||||
</div>
|
<PlanInfo parsedData={parsedData} />
|
||||||
)}
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
</CardContent>
|
</CardContent>
|
||||||
</Card>
|
</Card>
|
||||||
)
|
)
|
||||||
@ -108,126 +119,155 @@ export default function ServerCard({ now, serverInfo }: { now: number; serverInf
|
|||||||
return (
|
return (
|
||||||
<Card
|
<Card
|
||||||
className={cn(
|
className={cn(
|
||||||
"cursor-pointer hover:bg-accent/50 transition-colors border-green-300/30 dark:border-green-900/30",
|
"cursor-pointer hover:bg-accent/50 transition-all duration-300 border-green-300/30 dark:border-green-900/30 shadow-md hover:shadow-lg relative overflow-hidden",
|
||||||
{ "bg-card/70": customBackgroundImage }
|
{ "bg-card/70": customBackgroundImage }
|
||||||
)}
|
)}
|
||||||
onClick={cardClick}
|
onClick={cardClick}
|
||||||
>
|
>
|
||||||
|
<div className="absolute top-0 left-0 w-1 h-full bg-green-500 rounded-l-md"></div>
|
||||||
|
|
||||||
<CardHeader className="p-4 pb-2">
|
<CardHeader className="p-4 pb-2">
|
||||||
<div className="flex items-center gap-3">
|
<div className="flex justify-between">
|
||||||
<span className="h-3 w-3 shrink-0 rounded-full bg-green-500 shadow-sm shadow-green-300 dark:shadow-green-900"></span>
|
<div className="flex items-center gap-3">
|
||||||
{showFlag && <ServerFlag country_code={country_code} />}
|
<span className="h-3 w-3 shrink-0 rounded-full bg-green-500 shadow-sm shadow-green-300 dark:shadow-green-900 animate-pulse"></span>
|
||||||
<h3 className="font-bold text-sm truncate flex-1">{name}</h3>
|
{showFlag && <ServerFlag country_code={country_code} />}
|
||||||
</div>
|
<h3 className="font-bold text-sm truncate">{name}</h3>
|
||||||
|
|
||||||
{parsedData?.billingDataMod && (
|
|
||||||
<div className="mt-1">
|
|
||||||
<BillingInfo parsedData={parsedData} />
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</CardHeader>
|
|
||||||
|
|
||||||
<CardContent className="p-4 pt-2 pb-2">
|
|
||||||
{/* 系统信息和资源使用情况 */}
|
|
||||||
<div className="grid grid-cols-2 md:grid-cols-6 gap-3 mt-1">
|
|
||||||
{/* 系统信息 */}
|
|
||||||
<div className="flex items-center gap-1.5 text-xs">
|
|
||||||
<div className="text-xs">
|
|
||||||
{platform.includes("Windows") ? (
|
|
||||||
<MageMicrosoftWindows className="size-[12px]" />
|
|
||||||
) : (
|
|
||||||
<p className={`fl-${GetFontLogoClass(platform)}`} />
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<span className="text-muted-foreground">
|
|
||||||
{platform.includes("Windows") ? "Windows" : GetOsName(platform)}
|
|
||||||
</span>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* 资源使用情况 */}
|
<div className="flex items-center text-xs gap-2 text-muted-foreground">
|
||||||
<div className="col-span-5 grid grid-cols-5 gap-3">
|
<div className="flex items-center">
|
||||||
{/* CPU使用率 */}
|
{platform.includes("Windows") ? (
|
||||||
<div className="flex flex-col">
|
<MageMicrosoftWindows className="size-[14px] mr-1" />
|
||||||
<div className="flex justify-between text-xs">
|
) : (
|
||||||
<span className="text-muted-foreground">CPU</span>
|
<span className={`fl-${GetFontLogoClass(platform)} mr-1`} />
|
||||||
<span className="font-medium">{cpu.toFixed(0)}%</span>
|
)}
|
||||||
</div>
|
<span>{platform.includes("Windows") ? "Windows" : GetOsName(platform)}</span>
|
||||||
<ServerUsageBar value={cpu} />
|
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
{/* 内存使用率 */}
|
</div>
|
||||||
<div className="flex flex-col">
|
|
||||||
<div className="flex justify-between text-xs">
|
<div className="flex justify-between items-start mt-2">
|
||||||
<span className="text-muted-foreground">{t("serverCard.mem")}</span>
|
{parsedData?.billingDataMod && (
|
||||||
<span className="font-medium">{mem.toFixed(0)}%</span>
|
<div>
|
||||||
</div>
|
<BillingInfo parsedData={parsedData} />
|
||||||
<ServerUsageBar value={mem} />
|
|
||||||
</div>
|
</div>
|
||||||
|
)}
|
||||||
{/* 存储使用率 */}
|
|
||||||
<div className="flex flex-col">
|
{uptime > 0 && (
|
||||||
<div className="flex justify-between text-xs">
|
<div className="flex items-center text-xs text-muted-foreground">
|
||||||
<span className="text-muted-foreground">{t("serverCard.stg")}</span>
|
<Clock className="size-[12px] mr-1" />
|
||||||
<span className="font-medium">{stg.toFixed(0)}%</span>
|
<span>{formatUptime(uptime, t)}</span>
|
||||||
</div>
|
|
||||||
<ServerUsageBar value={stg} />
|
|
||||||
</div>
|
</div>
|
||||||
|
)}
|
||||||
{/* 网络上传 */}
|
</div>
|
||||||
<div className="flex flex-col">
|
</CardHeader>
|
||||||
<div className="flex justify-between text-xs">
|
|
||||||
<span className="text-muted-foreground">{t("serverCard.upload")}</span>
|
<CardContent className="p-4 pt-0 pb-2">
|
||||||
<span className="font-medium">{formatSpeed(up)}</span>
|
{/* 主要资源使用情况 - 全新设计 */}
|
||||||
</div>
|
<div className="grid grid-cols-3 gap-4 mt-3">
|
||||||
<div className="h-[3px] bg-muted mt-1 rounded-sm overflow-hidden">
|
{/* CPU使用率 */}
|
||||||
<div
|
<div className="bg-muted/40 rounded-lg p-2 flex flex-col">
|
||||||
className="h-full bg-blue-500"
|
<div className="flex items-center justify-between mb-1">
|
||||||
style={{ width: `${Math.min(up * 10, 100)}%` }}
|
<div className="flex items-center">
|
||||||
/>
|
<Cpu className="size-[14px] mr-1 text-blue-500" />
|
||||||
|
<span className="text-xs">CPU</span>
|
||||||
</div>
|
</div>
|
||||||
|
<span className={cn("text-xs font-bold", getColorClass(cpu))}>
|
||||||
|
{cpu.toFixed(0)}%
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
<ServerUsageBar value={cpu} />
|
||||||
{/* 网络下载 */}
|
</div>
|
||||||
<div className="flex flex-col">
|
|
||||||
<div className="flex justify-between text-xs">
|
{/* 内存使用率 */}
|
||||||
<span className="text-muted-foreground">{t("serverCard.download")}</span>
|
<div className="bg-muted/40 rounded-lg p-2 flex flex-col">
|
||||||
<span className="font-medium">{formatSpeed(down)}</span>
|
<div className="flex items-center justify-between mb-1">
|
||||||
</div>
|
<div className="flex items-center">
|
||||||
<div className="h-[3px] bg-muted mt-1 rounded-sm overflow-hidden">
|
<div className="size-[14px] mr-1 text-purple-500 flex items-center justify-center">
|
||||||
<div
|
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||||||
className="h-full bg-green-500"
|
<path d="M16 16H8V8H16V16Z"></path>
|
||||||
style={{ width: `${Math.min(down * 10, 100)}%` }}
|
<path d="M12 20V16"></path>
|
||||||
/>
|
<path d="M12 8V4"></path>
|
||||||
|
<path d="M20 12H16"></path>
|
||||||
|
<path d="M8 12H4"></path>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<span className="text-xs">{t("serverCard.mem")}</span>
|
||||||
</div>
|
</div>
|
||||||
|
<span className={cn("text-xs font-bold", getColorClass(mem))}>
|
||||||
|
{mem.toFixed(0)}%
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
<ServerUsageBar value={mem} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 存储使用率 */}
|
||||||
|
<div className="bg-muted/40 rounded-lg p-2 flex flex-col">
|
||||||
|
<div className="flex items-center justify-between mb-1">
|
||||||
|
<div className="flex items-center">
|
||||||
|
<HardDrive className="size-[14px] mr-1 text-amber-500" />
|
||||||
|
<span className="text-xs">{t("serverCard.stg")}</span>
|
||||||
|
</div>
|
||||||
|
<span className={cn("text-xs font-bold", getColorClass(stg))}>
|
||||||
|
{stg.toFixed(0)}%
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<ServerUsageBar value={stg} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 网络使用情况 */}
|
||||||
|
<div className="grid grid-cols-2 gap-4 mt-3">
|
||||||
|
{/* 网络速率 */}
|
||||||
|
<div className="bg-muted/40 rounded-lg p-2">
|
||||||
|
<div className="flex justify-between items-center mb-1">
|
||||||
|
<div className="flex items-center">
|
||||||
|
<ArrowUp className="size-[14px] text-blue-500 mr-1" />
|
||||||
|
<span className="text-xs">{t("serverCard.upload")}</span>
|
||||||
|
</div>
|
||||||
|
<span className="text-xs font-medium">{formatSpeed(up)}</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex justify-between items-center mt-2">
|
||||||
|
<div className="flex items-center">
|
||||||
|
<ArrowDown className="size-[14px] text-green-500 mr-1" />
|
||||||
|
<span className="text-xs">{t("serverCard.download")}</span>
|
||||||
|
</div>
|
||||||
|
<span className="text-xs font-medium">{formatSpeed(down)}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 连接数与进程数 */}
|
||||||
|
<div className="bg-muted/40 rounded-lg p-2 grid grid-cols-2 gap-2">
|
||||||
|
{tcp > 0 && (
|
||||||
|
<div className="flex items-center">
|
||||||
|
<Server className="size-[14px] text-indigo-500 mr-1" />
|
||||||
|
<span className="text-xs">TCP: {tcp}</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{udp > 0 && (
|
||||||
|
<div className="flex items-center">
|
||||||
|
<Server className="size-[14px] text-pink-500 mr-1" />
|
||||||
|
<span className="text-xs">UDP: {udp}</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{process > 0 && (
|
||||||
|
<div className="flex items-center">
|
||||||
|
<Activity className="size-[14px] text-orange-500 mr-1" />
|
||||||
|
<span className="text-xs">{t("serverDetailChart.process")}: {process}</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* 服务器详细信息区域 */}
|
{/* 服务器详细信息区域 */}
|
||||||
{showServerDetails && (
|
{showServerDetails && (
|
||||||
<div className="mt-3 flex flex-wrap gap-1.5">
|
<div className="mt-3 flex items-center flex-wrap gap-1.5">
|
||||||
{/* 运行时间 */}
|
|
||||||
{uptime > 0 && (
|
|
||||||
<TooltipProvider>
|
|
||||||
<Tooltip>
|
|
||||||
<TooltipTrigger asChild>
|
|
||||||
<Badge variant="outline" className="text-[10px] py-0 h-5">
|
|
||||||
{t("serverCard.uptime")}: {formatUptime(uptime, t)}
|
|
||||||
</Badge>
|
|
||||||
</TooltipTrigger>
|
|
||||||
<TooltipContent className="text-xs">
|
|
||||||
{t("serverCard.uptime")}: {formatUptime(uptime, t)}
|
|
||||||
</TooltipContent>
|
|
||||||
</Tooltip>
|
|
||||||
</TooltipProvider>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* CPU信息 */}
|
{/* CPU信息 */}
|
||||||
{cpu_info && cpu_info.length > 0 && (
|
{cpu_info && cpu_info.length > 0 && (
|
||||||
<TooltipProvider>
|
<TooltipProvider>
|
||||||
<Tooltip>
|
<Tooltip>
|
||||||
<TooltipTrigger asChild>
|
<TooltipTrigger asChild>
|
||||||
<Badge variant="outline" className="text-[10px] py-0 h-5">
|
<Badge variant="outline" className="text-[10px] py-0 h-5 bg-blue-500/10 hover:bg-blue-500/20">
|
||||||
{cpu_info[0].includes("Physical") ? "pCPU: " : "vCPU: "}
|
{cpu_info[0].includes("Physical") ? "pCPU: " : "vCPU: "}
|
||||||
{cpu_info[0].match(/(\d+)\s+(?:Physical|Virtual)\s+Core/)?.[1] || "?"}
|
{cpu_info[0].match(/(\d+)\s+(?:Physical|Virtual)\s+Core/)?.[1] || "?"}
|
||||||
</Badge>
|
</Badge>
|
||||||
@ -241,68 +281,63 @@ export default function ServerCard({ now, serverInfo }: { now: number; serverInf
|
|||||||
|
|
||||||
{/* 内存大小 */}
|
{/* 内存大小 */}
|
||||||
{mem_total > 0 && (
|
{mem_total > 0 && (
|
||||||
<Badge variant="outline" className="text-[10px] py-0 h-5">
|
<Badge variant="outline" className="text-[10px] py-0 h-5 bg-purple-500/10 hover:bg-purple-500/20">
|
||||||
{t("serverCard.mem")}: {formatBytes(mem_total)}
|
{t("serverCard.mem")}: {formatBytes(mem_total)}
|
||||||
</Badge>
|
</Badge>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{/* 存储大小 */}
|
{/* 存储大小 */}
|
||||||
{disk_total > 0 && (
|
{disk_total > 0 && (
|
||||||
<Badge variant="outline" className="text-[10px] py-0 h-5">
|
<Badge variant="outline" className="text-[10px] py-0 h-5 bg-amber-500/10 hover:bg-amber-500/20">
|
||||||
{t("serverCard.stg")}: {formatBytes(disk_total)}
|
{t("serverCard.stg")}: {formatBytes(disk_total)}
|
||||||
</Badge>
|
</Badge>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{/* TCP连接数 */}
|
|
||||||
{tcp > 0 && (
|
|
||||||
<Badge variant="outline" className="text-[10px] py-0 h-5">
|
|
||||||
TCP: {tcp}
|
|
||||||
</Badge>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* UDP连接数 */}
|
|
||||||
{udp > 0 && (
|
|
||||||
<Badge variant="outline" className="text-[10px] py-0 h-5">
|
|
||||||
UDP: {udp}
|
|
||||||
</Badge>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* 进程数 */}
|
|
||||||
{process > 0 && (
|
|
||||||
<Badge variant="outline" className="text-[10px] py-0 h-5">
|
|
||||||
{t("serverDetailChart.process")}: {process}
|
|
||||||
</Badge>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</CardContent>
|
</CardContent>
|
||||||
|
|
||||||
<CardFooter className="p-4 pt-0 flex flex-col gap-2">
|
<CardFooter className="p-4 pt-0 flex flex-col gap-2 pb-3">
|
||||||
{/* 套餐信息 */}
|
{/* 套餐信息 */}
|
||||||
{parsedData?.planDataMod && (
|
{parsedData?.planDataMod && (
|
||||||
<div className="w-full">
|
<div className="w-full mt-2">
|
||||||
<PlanInfo parsedData={parsedData} />
|
<PlanInfo parsedData={parsedData} />
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{/* 网络传输信息 */}
|
{/* 网络传输信息 */}
|
||||||
{showNetTransfer && (
|
{showNetTransfer && (
|
||||||
<div className="grid grid-cols-2 w-full gap-2">
|
<div className="grid grid-cols-2 w-full gap-3 mt-1">
|
||||||
<Badge
|
<div className="flex flex-col items-center bg-blue-500/10 rounded-md py-1.5 px-2">
|
||||||
variant="secondary"
|
<div className="flex items-center text-[10px] text-blue-600 dark:text-blue-400">
|
||||||
className="flex justify-center items-center py-1 text-[10px]"
|
<ArrowUp className="size-[10px] mr-1" />
|
||||||
>
|
<span>{t("serverCard.upload")}</span>
|
||||||
{t("serverCard.upload")}: {formatBytes(net_out_transfer)}
|
</div>
|
||||||
</Badge>
|
<span className="text-[11px] font-medium">{formatBytes(net_out_transfer)}</span>
|
||||||
<Badge
|
</div>
|
||||||
variant="outline"
|
<div className="flex flex-col items-center bg-green-500/10 rounded-md py-1.5 px-2">
|
||||||
className="flex justify-center items-center py-1 text-[10px]"
|
<div className="flex items-center text-[10px] text-green-600 dark:text-green-400">
|
||||||
>
|
<ArrowDown className="size-[10px] mr-1" />
|
||||||
{t("serverCard.download")}: {formatBytes(net_in_transfer)}
|
<span>{t("serverCard.download")}</span>
|
||||||
</Badge>
|
</div>
|
||||||
|
<span className="text-[11px] font-medium">{formatBytes(net_in_transfer)}</span>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</CardFooter>
|
</CardFooter>
|
||||||
|
|
||||||
|
{/* 视觉元素：左侧状态条 */}
|
||||||
|
<style>
|
||||||
|
{`
|
||||||
|
@keyframes pulse-animation {
|
||||||
|
0% { opacity: 0.6; }
|
||||||
|
50% { opacity: 1; }
|
||||||
|
100% { opacity: 0.6; }
|
||||||
|
}
|
||||||
|
.pulse-animation {
|
||||||
|
animation: pulse-animation 2s infinite;
|
||||||
|
}
|
||||||
|
`}
|
||||||
|
</style>
|
||||||
</Card>
|
</Card>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user