mirror of
https://github.com/hamster1963/nezha-dash.git
synced 2025-04-24 21:10:45 +08:00
perf: use Link prefetch
This commit is contained in:
hamster1963
parent
3007992af5
commit
606237d57e
@ -12,6 +12,7 @@ import {
|
|||||||
import getEnv from "@/lib/env-entry";
|
import getEnv from "@/lib/env-entry";
|
||||||
import { cn, formatBytes, formatNezhaInfo } from "@/lib/utils";
|
import { cn, formatBytes, formatNezhaInfo } from "@/lib/utils";
|
||||||
import { useLocale, useTranslations } from "next-intl";
|
import { useLocale, useTranslations } from "next-intl";
|
||||||
|
import Link from "next/link";
|
||||||
import { useRouter } from "next/navigation";
|
import { useRouter } from "next/navigation";
|
||||||
|
|
||||||
export default function ServerCard({
|
export default function ServerCard({
|
||||||
@ -31,95 +32,94 @@ export default function ServerCard({
|
|||||||
const locale = useLocale();
|
const locale = useLocale();
|
||||||
|
|
||||||
return online ? (
|
return online ? (
|
||||||
<Card
|
<Link href={`/${locale}/${id}`} prefetch={true}>
|
||||||
className={
|
<Card
|
||||||
"flex flex-col items-center justify-start gap-3 p-3 md:px-5 lg:flex-row cursor-pointer"
|
className={
|
||||||
}
|
"flex flex-col items-center justify-start gap-3 p-3 md:px-5 lg:flex-row cursor-pointer"
|
||||||
onClick={() => {
|
}
|
||||||
router.push(`/${locale}/${id}`);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<section
|
|
||||||
className="grid items-center gap-2 lg:w-28 "
|
|
||||||
style={{ gridTemplateColumns: "auto auto 1fr" }}
|
|
||||||
>
|
>
|
||||||
<span className="h-2 w-2 shrink-0 rounded-full bg-green-500 self-center"></span>
|
<section
|
||||||
<div
|
className="grid items-center gap-2 lg:w-28 "
|
||||||
className={cn(
|
style={{ gridTemplateColumns: "auto auto 1fr" }}
|
||||||
"flex items-center justify-center",
|
|
||||||
showFlag ? "min-w-[17px]" : "min-w-0",
|
|
||||||
)}
|
|
||||||
>
|
>
|
||||||
{showFlag ? <ServerFlag country_code={country_code} /> : null}
|
<span className="h-2 w-2 shrink-0 rounded-full bg-green-500 self-center"></span>
|
||||||
</div>
|
<div
|
||||||
<p
|
className={cn(
|
||||||
className={cn(
|
"flex items-center justify-center",
|
||||||
"break-all font-bold tracking-tight",
|
showFlag ? "min-w-[17px]" : "min-w-0",
|
||||||
showFlag ? "text-xs" : "text-sm",
|
)}
|
||||||
)}
|
|
||||||
>
|
|
||||||
{name}
|
|
||||||
</p>
|
|
||||||
</section>
|
|
||||||
<div className="flex flex-col gap-2">
|
|
||||||
<section className={"grid grid-cols-5 items-center gap-3"}>
|
|
||||||
<div className={"flex w-14 flex-col"}>
|
|
||||||
<p className="text-xs text-muted-foreground">{t("CPU")}</p>
|
|
||||||
<div className="flex items-center text-xs font-semibold">
|
|
||||||
{cpu.toFixed(2)}%
|
|
||||||
</div>
|
|
||||||
<ServerUsageBar value={cpu} />
|
|
||||||
</div>
|
|
||||||
<div className={"flex w-14 flex-col"}>
|
|
||||||
<p className="text-xs text-muted-foreground">{t("Mem")}</p>
|
|
||||||
<div className="flex items-center text-xs font-semibold">
|
|
||||||
{mem.toFixed(2)}%
|
|
||||||
</div>
|
|
||||||
<ServerUsageBar value={mem} />
|
|
||||||
</div>
|
|
||||||
<div className={"flex w-14 flex-col"}>
|
|
||||||
<p className="text-xs text-muted-foreground">{t("STG")}</p>
|
|
||||||
<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("Upload")}</p>
|
|
||||||
<div className="flex items-center text-xs font-semibold">
|
|
||||||
{up.toFixed(2)}M/s
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className={"flex w-14 flex-col"}>
|
|
||||||
<p className="text-xs text-muted-foreground">{t("Download")}</p>
|
|
||||||
<div className="flex items-center text-xs font-semibold">
|
|
||||||
{down.toFixed(2)}M/s
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
{showNetTransfer && (
|
|
||||||
<section
|
|
||||||
onClick={() => {
|
|
||||||
router.push(`/${locale}/network/${id}`);
|
|
||||||
}}
|
|
||||||
className={"flex items-center justify-between gap-1"}
|
|
||||||
>
|
>
|
||||||
<Badge
|
{showFlag ? <ServerFlag country_code={country_code} /> : null}
|
||||||
variant="secondary"
|
</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"
|
<p
|
||||||
>
|
className={cn(
|
||||||
{t("Upload")}:{formatBytes(serverInfo.status.NetOutTransfer)}
|
"break-all font-bold tracking-tight",
|
||||||
</Badge>
|
showFlag ? "text-xs" : "text-sm",
|
||||||
<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"
|
{name}
|
||||||
>
|
</p>
|
||||||
{t("Download")}:{formatBytes(serverInfo.status.NetInTransfer)}
|
</section>
|
||||||
</Badge>
|
<div className="flex flex-col gap-2">
|
||||||
|
<section className={"grid grid-cols-5 items-center gap-3"}>
|
||||||
|
<div className={"flex w-14 flex-col"}>
|
||||||
|
<p className="text-xs text-muted-foreground">{t("CPU")}</p>
|
||||||
|
<div className="flex items-center text-xs font-semibold">
|
||||||
|
{cpu.toFixed(2)}%
|
||||||
|
</div>
|
||||||
|
<ServerUsageBar value={cpu} />
|
||||||
|
</div>
|
||||||
|
<div className={"flex w-14 flex-col"}>
|
||||||
|
<p className="text-xs text-muted-foreground">{t("Mem")}</p>
|
||||||
|
<div className="flex items-center text-xs font-semibold">
|
||||||
|
{mem.toFixed(2)}%
|
||||||
|
</div>
|
||||||
|
<ServerUsageBar value={mem} />
|
||||||
|
</div>
|
||||||
|
<div className={"flex w-14 flex-col"}>
|
||||||
|
<p className="text-xs text-muted-foreground">{t("STG")}</p>
|
||||||
|
<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("Upload")}</p>
|
||||||
|
<div className="flex items-center text-xs font-semibold">
|
||||||
|
{up.toFixed(2)}M/s
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className={"flex w-14 flex-col"}>
|
||||||
|
<p className="text-xs text-muted-foreground">{t("Download")}</p>
|
||||||
|
<div className="flex items-center text-xs font-semibold">
|
||||||
|
{down.toFixed(2)}M/s
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</section>
|
</section>
|
||||||
)}
|
{showNetTransfer && (
|
||||||
</div>
|
<section
|
||||||
</Card>
|
onClick={() => {
|
||||||
|
router.push(`/${locale}/network/${id}`);
|
||||||
|
}}
|
||||||
|
className={"flex items-center justify-between gap-1"}
|
||||||
|
>
|
||||||
|
<Badge
|
||||||
|
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("Upload")}:{formatBytes(serverInfo.status.NetOutTransfer)}
|
||||||
|
</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("Download")}:{formatBytes(serverInfo.status.NetInTransfer)}
|
||||||
|
</Badge>
|
||||||
|
</section>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
</Link>
|
||||||
) : (
|
) : (
|
||||||
<Card
|
<Card
|
||||||
className={cn(
|
className={cn(
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user