mirror of
https://github.com/Buriburizaem0n/nezha-dash-v1.git
synced 2026-05-06 05:48:41 +00:00
perf: use biome
This commit is contained in:
hamster1963
+233
-136
@@ -1,143 +1,240 @@
|
||||
import ServerFlag from "@/components/ServerFlag"
|
||||
import ServerUsageBar from "@/components/ServerUsageBar"
|
||||
import { formatBytes } from "@/lib/format"
|
||||
import { GetFontLogoClass, GetOsName, MageMicrosoftWindows } from "@/lib/logo-class"
|
||||
import { cn, formatNezhaInfo, parsePublicNote } from "@/lib/utils"
|
||||
import { NezhaServer } from "@/types/nezha-api"
|
||||
import { useTranslation } from "react-i18next"
|
||||
import { useNavigate } from "react-router-dom"
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import ServerFlag from "@/components/ServerFlag";
|
||||
import ServerUsageBar from "@/components/ServerUsageBar";
|
||||
import { formatBytes } from "@/lib/format";
|
||||
import {
|
||||
GetFontLogoClass,
|
||||
GetOsName,
|
||||
MageMicrosoftWindows,
|
||||
} from "@/lib/logo-class";
|
||||
import { cn, formatNezhaInfo, parsePublicNote } from "@/lib/utils";
|
||||
import type { NezhaServer } from "@/types/nezha-api";
|
||||
import BillingInfo from "./billingInfo";
|
||||
import PlanInfo from "./PlanInfo";
|
||||
import { Card } from "./ui/card";
|
||||
import { Separator } from "./ui/separator";
|
||||
|
||||
import PlanInfo from "./PlanInfo"
|
||||
import BillingInfo from "./billingInfo"
|
||||
import { Card } from "./ui/card"
|
||||
import { Separator } from "./ui/separator"
|
||||
export default function ServerCardInline({
|
||||
now,
|
||||
serverInfo,
|
||||
}: {
|
||||
now: number;
|
||||
serverInfo: NezhaServer;
|
||||
}) {
|
||||
const { t } = useTranslation();
|
||||
const navigate = useNavigate();
|
||||
const {
|
||||
name,
|
||||
country_code,
|
||||
online,
|
||||
cpu,
|
||||
up,
|
||||
down,
|
||||
mem,
|
||||
stg,
|
||||
platform,
|
||||
uptime,
|
||||
net_in_transfer,
|
||||
net_out_transfer,
|
||||
public_note,
|
||||
} = formatNezhaInfo(now, serverInfo);
|
||||
|
||||
export default function ServerCardInline({ now, serverInfo }: { now: number; serverInfo: NezhaServer }) {
|
||||
const { t } = useTranslation()
|
||||
const navigate = useNavigate()
|
||||
const { name, country_code, online, cpu, up, down, mem, stg, platform, uptime, net_in_transfer, net_out_transfer, public_note } = formatNezhaInfo(
|
||||
now,
|
||||
serverInfo,
|
||||
)
|
||||
const cardClick = () => {
|
||||
sessionStorage.setItem("fromMainPage", "true");
|
||||
navigate(`/server/${serverInfo.id}`);
|
||||
};
|
||||
|
||||
const cardClick = () => {
|
||||
sessionStorage.setItem("fromMainPage", "true")
|
||||
navigate(`/server/${serverInfo.id}`)
|
||||
}
|
||||
const showFlag = true;
|
||||
|
||||
const showFlag = true
|
||||
const customBackgroundImage =
|
||||
(window.CustomBackgroundImage as string) !== ""
|
||||
? window.CustomBackgroundImage
|
||||
: undefined;
|
||||
|
||||
const customBackgroundImage = (window.CustomBackgroundImage as string) !== "" ? window.CustomBackgroundImage : undefined
|
||||
const parsedData = parsePublicNote(public_note);
|
||||
|
||||
const parsedData = parsePublicNote(public_note)
|
||||
|
||||
return online ? (
|
||||
<section>
|
||||
<Card
|
||||
className={cn(
|
||||
"flex items-center lg:flex-row justify-start gap-3 p-3 md:px-5 cursor-pointer hover:bg-accent/50 transition-colors min-w-[900px] w-full",
|
||||
{
|
||||
"bg-card/70": customBackgroundImage,
|
||||
},
|
||||
)}
|
||||
onClick={cardClick}
|
||||
>
|
||||
<section className={cn("grid items-center gap-2 lg:w-36")} style={{ gridTemplateColumns: "auto auto 1fr" }}>
|
||||
<span className="h-2 w-2 shrink-0 rounded-full bg-green-500 self-center"></span>
|
||||
<div className={cn("flex items-center justify-center", showFlag ? "min-w-[17px]" : "min-w-0")}>
|
||||
{showFlag ? <ServerFlag country_code={country_code} /> : null}
|
||||
</div>
|
||||
<div className="relative w-28 flex flex-col">
|
||||
<p className={cn("break-normal font-bold tracking-tight", showFlag ? "text-xs " : "text-sm")}>{name}</p>
|
||||
{parsedData?.billingDataMod && <BillingInfo parsedData={parsedData} />}
|
||||
</div>
|
||||
</section>
|
||||
<Separator orientation="vertical" className="h-8 mx-0 ml-2" />
|
||||
<div className="flex flex-col gap-1">
|
||||
<section className={cn("grid grid-cols-9 items-center gap-3 flex-1")}>
|
||||
<div className={"items-center flex flex-row gap-2 whitespace-nowrap"}>
|
||||
<div className="text-xs font-semibold">
|
||||
{platform.includes("Windows") ? (
|
||||
<MageMicrosoftWindows className="size-[10px]" />
|
||||
) : (
|
||||
<p className={`fl-${GetFontLogoClass(platform)}`} />
|
||||
)}
|
||||
</div>
|
||||
<div className={"flex w-14 flex-col"}>
|
||||
<p className="text-xs text-muted-foreground">{t("serverCard.system")}</p>
|
||||
<div className="flex items-center text-[10.5px] font-semibold">{platform.includes("Windows") ? "Windows" : GetOsName(platform)}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={"flex w-20 flex-col"}>
|
||||
<p className="text-xs text-muted-foreground">{t("serverCard.uptime")}</p>
|
||||
<div className="flex items-center text-xs font-semibold">
|
||||
{uptime / 86400 >= 1
|
||||
? `${(uptime / 86400).toFixed(0)} ${t("serverCard.days")}`
|
||||
: `${(uptime / 3600).toFixed(0)} ${t("serverCard.hours")}`}
|
||||
</div>
|
||||
</div>
|
||||
<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 className={"flex w-14 flex-col"}>
|
||||
<p className="text-xs text-muted-foreground">{t("serverCard.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("serverCard.stg")}</p>
|
||||
<div className="flex items-center text-xs font-semibold">{stg.toFixed(2)}%</div>
|
||||
<ServerUsageBar value={stg} />
|
||||
</div>
|
||||
<div className={"flex w-16 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-16 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` : down >= 1 ? `${down.toFixed(2)}M/s` : `${(down * 1024).toFixed(2)}K/s`}
|
||||
</div>
|
||||
</div>
|
||||
<div className={"flex w-20 flex-col"}>
|
||||
<p className="text-xs text-muted-foreground">{t("serverCard.totalUpload")}</p>
|
||||
<div className="flex items-center text-xs font-semibold">{formatBytes(net_out_transfer)}</div>
|
||||
</div>
|
||||
<div className={"flex w-20 flex-col"}>
|
||||
<p className="text-xs text-muted-foreground">{t("serverCard.totalDownload")}</p>
|
||||
<div className="flex items-center text-xs font-semibold">{formatBytes(net_in_transfer)}</div>
|
||||
</div>
|
||||
</section>
|
||||
{parsedData?.planDataMod && <PlanInfo parsedData={parsedData} />}
|
||||
</div>
|
||||
</Card>
|
||||
</section>
|
||||
) : (
|
||||
<Card
|
||||
className={cn(
|
||||
"flex min-h-[61px] min-w-[900px] items-center justify-start p-3 md:px-5 flex-row cursor-pointer hover:bg-accent/50 transition-colors",
|
||||
{
|
||||
"bg-card/70": customBackgroundImage,
|
||||
},
|
||||
)}
|
||||
onClick={cardClick}
|
||||
>
|
||||
<section className={cn("grid items-center gap-2 w-40")} style={{ gridTemplateColumns: "auto auto 1fr" }}>
|
||||
<span className="h-2 w-2 shrink-0 rounded-full bg-red-500 self-center"></span>
|
||||
<div className={cn("flex items-center justify-center", showFlag ? "min-w-[17px]" : "min-w-0")}>
|
||||
{showFlag ? <ServerFlag country_code={country_code} /> : null}
|
||||
</div>
|
||||
<div className="relative flex flex-col">
|
||||
<p className={cn("break-normal font-bold w-28 tracking-tight", showFlag ? "text-xs" : "text-sm")}>{name}</p>
|
||||
{parsedData?.billingDataMod && <BillingInfo parsedData={parsedData} />}
|
||||
</div>
|
||||
</section>
|
||||
<Separator orientation="vertical" className="h-8 ml-3 lg:ml-1 mr-3" />
|
||||
{parsedData?.planDataMod && <PlanInfo parsedData={parsedData} />}
|
||||
</Card>
|
||||
)
|
||||
return online ? (
|
||||
<section>
|
||||
<Card
|
||||
className={cn(
|
||||
"flex items-center lg:flex-row justify-start gap-3 p-3 md:px-5 cursor-pointer hover:bg-accent/50 transition-colors min-w-[900px] w-full",
|
||||
{
|
||||
"bg-card/70": customBackgroundImage,
|
||||
},
|
||||
)}
|
||||
onClick={cardClick}
|
||||
>
|
||||
<section
|
||||
className={cn("grid items-center gap-2 lg:w-36")}
|
||||
style={{ gridTemplateColumns: "auto auto 1fr" }}
|
||||
>
|
||||
<span className="h-2 w-2 shrink-0 rounded-full bg-green-500 self-center"></span>
|
||||
<div
|
||||
className={cn(
|
||||
"flex items-center justify-center",
|
||||
showFlag ? "min-w-[17px]" : "min-w-0",
|
||||
)}
|
||||
>
|
||||
{showFlag ? <ServerFlag country_code={country_code} /> : null}
|
||||
</div>
|
||||
<div className="relative w-28 flex flex-col">
|
||||
<p
|
||||
className={cn(
|
||||
"break-normal font-bold tracking-tight",
|
||||
showFlag ? "text-xs " : "text-sm",
|
||||
)}
|
||||
>
|
||||
{name}
|
||||
</p>
|
||||
{parsedData?.billingDataMod && (
|
||||
<BillingInfo parsedData={parsedData} />
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
<Separator orientation="vertical" className="h-8 mx-0 ml-2" />
|
||||
<div className="flex flex-col gap-1">
|
||||
<section className={cn("grid grid-cols-9 items-center gap-3 flex-1")}>
|
||||
<div
|
||||
className={"items-center flex flex-row gap-2 whitespace-nowrap"}
|
||||
>
|
||||
<div className="text-xs font-semibold">
|
||||
{platform.includes("Windows") ? (
|
||||
<MageMicrosoftWindows className="size-[10px]" />
|
||||
) : (
|
||||
<p className={`fl-${GetFontLogoClass(platform)}`} />
|
||||
)}
|
||||
</div>
|
||||
<div className={"flex w-14 flex-col"}>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{t("serverCard.system")}
|
||||
</p>
|
||||
<div className="flex items-center text-[10.5px] font-semibold">
|
||||
{platform.includes("Windows")
|
||||
? "Windows"
|
||||
: GetOsName(platform)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={"flex w-20 flex-col"}>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{t("serverCard.uptime")}
|
||||
</p>
|
||||
<div className="flex items-center text-xs font-semibold">
|
||||
{uptime / 86400 >= 1
|
||||
? `${(uptime / 86400).toFixed(0)} ${t("serverCard.days")}`
|
||||
: `${(uptime / 3600).toFixed(0)} ${t("serverCard.hours")}`}
|
||||
</div>
|
||||
</div>
|
||||
<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 className={"flex w-14 flex-col"}>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{t("serverCard.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("serverCard.stg")}
|
||||
</p>
|
||||
<div className="flex items-center text-xs font-semibold">
|
||||
{stg.toFixed(2)}%
|
||||
</div>
|
||||
<ServerUsageBar value={stg} />
|
||||
</div>
|
||||
<div className={"flex w-16 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-16 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`
|
||||
: down >= 1
|
||||
? `${down.toFixed(2)}M/s`
|
||||
: `${(down * 1024).toFixed(2)}K/s`}
|
||||
</div>
|
||||
</div>
|
||||
<div className={"flex w-20 flex-col"}>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{t("serverCard.totalUpload")}
|
||||
</p>
|
||||
<div className="flex items-center text-xs font-semibold">
|
||||
{formatBytes(net_out_transfer)}
|
||||
</div>
|
||||
</div>
|
||||
<div className={"flex w-20 flex-col"}>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{t("serverCard.totalDownload")}
|
||||
</p>
|
||||
<div className="flex items-center text-xs font-semibold">
|
||||
{formatBytes(net_in_transfer)}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{parsedData?.planDataMod && <PlanInfo parsedData={parsedData} />}
|
||||
</div>
|
||||
</Card>
|
||||
</section>
|
||||
) : (
|
||||
<Card
|
||||
className={cn(
|
||||
"flex min-h-[61px] min-w-[900px] items-center justify-start p-3 md:px-5 flex-row cursor-pointer hover:bg-accent/50 transition-colors",
|
||||
{
|
||||
"bg-card/70": customBackgroundImage,
|
||||
},
|
||||
)}
|
||||
onClick={cardClick}
|
||||
>
|
||||
<section
|
||||
className={cn("grid items-center gap-2 w-40")}
|
||||
style={{ gridTemplateColumns: "auto auto 1fr" }}
|
||||
>
|
||||
<span className="h-2 w-2 shrink-0 rounded-full bg-red-500 self-center"></span>
|
||||
<div
|
||||
className={cn(
|
||||
"flex items-center justify-center",
|
||||
showFlag ? "min-w-[17px]" : "min-w-0",
|
||||
)}
|
||||
>
|
||||
{showFlag ? <ServerFlag country_code={country_code} /> : null}
|
||||
</div>
|
||||
<div className="relative flex flex-col">
|
||||
<p
|
||||
className={cn(
|
||||
"break-normal font-bold w-28 tracking-tight",
|
||||
showFlag ? "text-xs" : "text-sm",
|
||||
)}
|
||||
>
|
||||
{name}
|
||||
</p>
|
||||
{parsedData?.billingDataMod && (
|
||||
<BillingInfo parsedData={parsedData} />
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
<Separator orientation="vertical" className="h-8 ml-3 lg:ml-1 mr-3" />
|
||||
{parsedData?.planDataMod && <PlanInfo parsedData={parsedData} />}
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user