feat: CustomMobileBackgroundImage

This commit is contained in:
hamster1963
2024-12-19 14:46:21 +08:00
parent e0bf568965
commit ae8e3ea144
48 changed files with 320 additions and 1054 deletions

View File

@@ -12,35 +12,18 @@ import BillingInfo from "./billingInfo"
import { Card } from "./ui/card"
import { Separator } from "./ui/separator"
export default function ServerCardInline({
now,
serverInfo,
}: {
now: number
serverInfo: NezhaServer
}) {
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 { name, country_code, online, cpu, up, down, mem, stg, platform, uptime, net_in_transfer, net_out_transfer, public_note } = formatNezhaInfo(
now,
serverInfo,
)
const showFlag = true
const customBackgroundImage =
// @ts-expect-error ShowNetTransfer is a global variable
// @ts-expect-error CustomBackgroundImage is a global variable
(window.CustomBackgroundImage as string) !== "" ? window.CustomBackgroundImage : undefined
const parsedData = parsePublicNote(public_note)
@@ -56,28 +39,13 @@ export default function ServerCardInline({
)}
onClick={() => navigate(`/server/${serverInfo.id}`)}
>
<section
className={cn("grid items-center gap-2 lg:w-36")}
style={{ gridTemplateColumns: "auto auto 1fr" }}
>
<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",
)}
>
<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-all font-bold tracking-tight",
showFlag ? "text-xs " : "text-sm",
)}
>
{name}
</p>
<p className={cn("break-all font-bold tracking-tight", showFlag ? "text-xs " : "text-sm")}>{name}</p>
{parsedData?.billingDataMod && <BillingInfo parsedData={parsedData} />}
</div>
</section>
@@ -94,9 +62,7 @@ export default function ServerCardInline({
</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 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"}>
@@ -125,34 +91,22 @@ export default function ServerCardInline({
<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`}
{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`
: up >= 1
? `${down.toFixed(2)}M/s`
: `${(down * 1024).toFixed(2)}K/s`}
{down >= 1024 ? `${(down / 1024).toFixed(2)}G/s` : up >= 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 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 className="flex items-center text-xs font-semibold">{formatBytes(net_in_transfer)}</div>
</div>
</section>
{parsedData?.planDataMod && <PlanInfo parsedData={parsedData} />}
@@ -169,25 +123,13 @@ export default function ServerCardInline({
)}
onClick={() => navigate(`/server/${serverInfo.id}`)}
>
<section
className={cn("grid items-center gap-2 w-40")}
style={{ gridTemplateColumns: "auto auto 1fr" }}
>
<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")}
>
<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-all font-bold w-28 tracking-tight",
showFlag ? "text-xs" : "text-sm",
)}
>
{name}
</p>
<p className={cn("break-all font-bold w-28 tracking-tight", showFlag ? "text-xs" : "text-sm")}>{name}</p>
{parsedData?.billingDataMod && <BillingInfo parsedData={parsedData} />}
</div>
</section>