mirror of
https://github.com/woodchen-ink/nezha-dash-v1.git
synced 2025-07-18 09:31:55 +08:00
fix: server card height
This commit is contained in:
hamster1963
parent
a3297ea0b2
commit
941406acbe
@ -44,104 +44,96 @@ export default function ServerCard({ now, serverInfo }: { now: number; serverInf
|
|||||||
}
|
}
|
||||||
|
|
||||||
return online ? (
|
return online ? (
|
||||||
<section>
|
<Card
|
||||||
<Card
|
className={cn(
|
||||||
className={cn(
|
"flex flex-col items-center justify-start gap-3 p-3 md:px-5 lg:flex-row cursor-pointer hover:bg-accent/50 transition-colors",
|
||||||
"flex flex-col items-center justify-start gap-3 p-3 md:px-5 lg:flex-row cursor-pointer hover:bg-accent/50 transition-colors",
|
)}
|
||||||
)}
|
onClick={() => navigate(`/server/${serverInfo.id}`)}
|
||||||
onClick={() => navigate(`/server/${serverInfo.id}`)}
|
>
|
||||||
|
<section
|
||||||
|
className={cn("grid items-center gap-2 lg:w-40")}
|
||||||
|
style={{ gridTemplateColumns: "auto auto 1fr" }}
|
||||||
>
|
>
|
||||||
<section
|
<span className="h-2 w-2 shrink-0 rounded-full bg-green-500 self-center"></span>
|
||||||
className={cn("grid items-center gap-2 lg:w-40")}
|
<div
|
||||||
style={{ gridTemplateColumns: "auto auto 1fr" }}
|
className={cn("flex items-center justify-center", showFlag ? "min-w-[17px]" : "min-w-0")}
|
||||||
>
|
>
|
||||||
<span className="h-2 w-2 shrink-0 rounded-full bg-green-500 self-center"></span>
|
{showFlag ? <ServerFlag country_code={country_code} /> : null}
|
||||||
<div
|
</div>
|
||||||
className={cn(
|
<div className="relative flex flex-col">
|
||||||
"flex items-center justify-center",
|
<p
|
||||||
showFlag ? "min-w-[17px]" : "min-w-0",
|
className={cn("break-all font-bold tracking-tight", showFlag ? "text-xs " : "text-sm")}
|
||||||
)}
|
|
||||||
>
|
>
|
||||||
{showFlag ? <ServerFlag country_code={country_code} /> : null}
|
{name}
|
||||||
|
</p>
|
||||||
|
{parsedData &&
|
||||||
|
(daysLeft >= 0 ? (
|
||||||
|
<p className={cn("text-[10px] text-muted-foreground")}>
|
||||||
|
剩余时间: {isNeverExpire ? "永久" : daysLeft + "天"}
|
||||||
|
</p>
|
||||||
|
) : (
|
||||||
|
<p className={cn("text-[10px] text-muted-foreground text-red-600")}>
|
||||||
|
已过期: {daysLeft * -1} 天
|
||||||
|
</p>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<div className="flex flex-col gap-2">
|
||||||
|
<section className={cn("grid grid-cols-5 items-center gap-3")}>
|
||||||
|
<div className={"flex w-14 flex-col"}>
|
||||||
|
<p className="text-xs text-muted-foreground">{"CPU"}</p>
|
||||||
|
<div className="flex items-center text-xs font-semibold">{cpu.toFixed(2)}%</div>
|
||||||
|
<ServerUsageBar value={cpu} />
|
||||||
</div>
|
</div>
|
||||||
<div className="relative flex flex-col">
|
<div className={"flex w-14 flex-col"}>
|
||||||
<p
|
<p className="text-xs text-muted-foreground">{t("serverCard.mem")}</p>
|
||||||
className={cn(
|
<div className="flex items-center text-xs font-semibold">{mem.toFixed(2)}%</div>
|
||||||
"break-all font-bold tracking-tight",
|
<ServerUsageBar value={mem} />
|
||||||
showFlag ? "text-xs " : "text-sm",
|
</div>
|
||||||
)}
|
<div className={"flex w-14 flex-col"}>
|
||||||
>
|
<p className="text-xs text-muted-foreground">{t("serverCard.stg")}</p>
|
||||||
{name}
|
<div className="flex items-center text-xs font-semibold">{stg.toFixed(2)}%</div>
|
||||||
</p>
|
<ServerUsageBar value={stg} />
|
||||||
{parsedData &&
|
</div>
|
||||||
(daysLeft >= 0 ? (
|
<div className={"flex w-14 flex-col"}>
|
||||||
<p className={cn("text-[10px] text-muted-foreground")}>
|
<p className="text-xs text-muted-foreground">{t("serverCard.upload")}</p>
|
||||||
剩余时间: {isNeverExpire ? "永久" : daysLeft + "天"}
|
<div className="flex items-center text-xs font-semibold">
|
||||||
</p>
|
{up >= 1024
|
||||||
) : (
|
? `${(up / 1024).toFixed(2)}G/s`
|
||||||
<p className={cn("text-[10px] text-muted-foreground text-red-600")}>
|
: up >= 1
|
||||||
已过期: {daysLeft * -1} 天
|
? `${up.toFixed(2)}M/s`
|
||||||
</p>
|
: `${(up * 1024).toFixed(2)}K/s`}
|
||||||
))}
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className={"flex w-14 flex-col"}>
|
||||||
|
<p className="text-xs text-muted-foreground">{t("serverCard.download")}</p>
|
||||||
|
<div className="flex items-center text-xs font-semibold">
|
||||||
|
{down >= 1024
|
||||||
|
? `${(down / 1024).toFixed(2)}G/s`
|
||||||
|
: up >= 1
|
||||||
|
? `${down.toFixed(2)}M/s`
|
||||||
|
: `${(down * 1024).toFixed(2)}K/s`}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
<div className="flex flex-col gap-2">
|
{showNetTransfer && (
|
||||||
<section className={cn("grid grid-cols-5 items-center gap-3")}>
|
<section className={"flex items-center justify-between gap-1"}>
|
||||||
<div className={"flex w-14 flex-col"}>
|
<Badge
|
||||||
<p className="text-xs text-muted-foreground">{"CPU"}</p>
|
variant="secondary"
|
||||||
<div className="flex items-center text-xs font-semibold">{cpu.toFixed(2)}%</div>
|
className="items-center flex-1 justify-center rounded-[8px] text-nowrap text-[11px] border-muted-50 shadow-md shadow-neutral-200/30 dark:shadow-none"
|
||||||
<ServerUsageBar value={cpu} />
|
>
|
||||||
</div>
|
{t("serverCard.upload")}:{formatBytes(net_out_transfer)}
|
||||||
<div className={"flex w-14 flex-col"}>
|
</Badge>
|
||||||
<p className="text-xs text-muted-foreground">{t("serverCard.mem")}</p>
|
<Badge
|
||||||
<div className="flex items-center text-xs font-semibold">{mem.toFixed(2)}%</div>
|
variant="outline"
|
||||||
<ServerUsageBar value={mem} />
|
className="items-center flex-1 justify-center rounded-[8px] text-nowrap text-[11px] shadow-md shadow-neutral-200/30 dark:shadow-none"
|
||||||
</div>
|
>
|
||||||
<div className={"flex w-14 flex-col"}>
|
{t("serverCard.download")}:{formatBytes(net_in_transfer)}
|
||||||
<p className="text-xs text-muted-foreground">{t("serverCard.stg")}</p>
|
</Badge>
|
||||||
<div className="flex items-center text-xs font-semibold">{stg.toFixed(2)}%</div>
|
|
||||||
<ServerUsageBar value={stg} />
|
|
||||||
</div>
|
|
||||||
<div className={"flex w-14 flex-col"}>
|
|
||||||
<p className="text-xs text-muted-foreground">{t("serverCard.upload")}</p>
|
|
||||||
<div className="flex items-center text-xs font-semibold">
|
|
||||||
{up >= 1024
|
|
||||||
? `${(up / 1024).toFixed(2)}G/s`
|
|
||||||
: up >= 1
|
|
||||||
? `${up.toFixed(2)}M/s`
|
|
||||||
: `${(up * 1024).toFixed(2)}K/s`}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className={"flex w-14 flex-col"}>
|
|
||||||
<p className="text-xs text-muted-foreground">{t("serverCard.download")}</p>
|
|
||||||
<div className="flex items-center text-xs font-semibold">
|
|
||||||
{down >= 1024
|
|
||||||
? `${(down / 1024).toFixed(2)}G/s`
|
|
||||||
: up >= 1
|
|
||||||
? `${down.toFixed(2)}M/s`
|
|
||||||
: `${(down * 1024).toFixed(2)}K/s`}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
</section>
|
||||||
{showNetTransfer && (
|
)}
|
||||||
<section className={"flex items-center justify-between gap-1"}>
|
</div>
|
||||||
<Badge
|
</Card>
|
||||||
variant="secondary"
|
|
||||||
className="items-center flex-1 justify-center rounded-[8px] text-nowrap text-[11px] border-muted-50 shadow-md shadow-neutral-200/30 dark:shadow-none"
|
|
||||||
>
|
|
||||||
{t("serverCard.upload")}:{formatBytes(net_out_transfer)}
|
|
||||||
</Badge>
|
|
||||||
<Badge
|
|
||||||
variant="outline"
|
|
||||||
className="items-center flex-1 justify-center rounded-[8px] text-nowrap text-[11px] shadow-md shadow-neutral-200/30 dark:shadow-none"
|
|
||||||
>
|
|
||||||
{t("serverCard.download")}:{formatBytes(net_in_transfer)}
|
|
||||||
</Badge>
|
|
||||||
</section>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</Card>
|
|
||||||
</section>
|
|
||||||
) : (
|
) : (
|
||||||
<Card
|
<Card
|
||||||
className={cn(
|
className={cn(
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user