mirror of
https://github.com/woodchen-ink/nezha-dash-v1.git
synced 2025-07-18 09:31:55 +08:00
新布局
This commit is contained in:
parent
e2f9cb86ca
commit
dff03ccaed
@ -62,7 +62,7 @@ export default function ServerCard({ now, serverInfo }: { now: number; serverInf
|
||||
const parsedData = parsePublicNote(public_note)
|
||||
|
||||
// 格式化运行时间
|
||||
const formatUptime = (seconds: number) => {
|
||||
const formatUptime = (seconds: number, t: any) => {
|
||||
if (seconds >= 86400) {
|
||||
return `${Math.floor(seconds / 86400)} ${t("serverCard.days")}`
|
||||
} else {
|
||||
@ -163,64 +163,72 @@ export default function ServerCard({ now, serverInfo }: { now: number; serverInf
|
||||
</section>
|
||||
|
||||
{/* 服务器详细信息标签和 PlanInfo */}
|
||||
<section className="flex flex-wrap items-center gap-1.5 w-full mt-1">
|
||||
<section className="flex flex-col gap-1 w-full mt-1">
|
||||
{showServerDetails && (
|
||||
<>
|
||||
{cpu_info && cpu_info.length > 0 && (
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<p className={cn("text-[10px] text-muted-foreground")}>
|
||||
{cpu_info[0].includes("Physical") ? "物理CPU: " : "vCPU: "}
|
||||
{cpu_info[0].match(/(\d+)\s+(?:Physical|Virtual)\s+Core/)?.[1] || "?"}
|
||||
</p>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent className="text-xs">
|
||||
{cpu_info.join(", ")}
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
)}
|
||||
{/* 第一行：运行时间、CPU、内存、硬盘 */}
|
||||
<div className="flex items-center gap-1.5">
|
||||
{uptime > 0 && (
|
||||
<p className={cn("text-[10px] text-muted-foreground")}>
|
||||
{t("serverCard.uptime")}: {formatUptime(uptime, t)}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{mem_total > 0 && (
|
||||
<p className={cn("text-[10px] text-muted-foreground")}>
|
||||
{t("serverCard.mem")}: {formatBytes(mem_total)}
|
||||
</p>
|
||||
)}
|
||||
{cpu_info && cpu_info.length > 0 && (
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<p className={cn("text-[10px] text-muted-foreground")}>
|
||||
{cpu_info[0].includes("Physical") ? "物理CPU: " : "vCPU: "}
|
||||
{cpu_info[0].match(/(\d+)\s+(?:Physical|Virtual)\s+Core/)?.[1] || "?"}
|
||||
</p>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent className="text-xs">
|
||||
{cpu_info.join(", ")}
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
)}
|
||||
|
||||
{disk_total > 0 && (
|
||||
<p className={cn("text-[10px] text-muted-foreground")}>
|
||||
{t("serverCard.stg")}: {formatBytes(disk_total)}
|
||||
</p>
|
||||
)}
|
||||
{mem_total > 0 && (
|
||||
<p className={cn("text-[10px] text-muted-foreground")}>
|
||||
{t("serverCard.mem")}: {formatBytes(mem_total)}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{tcp > 0 && (
|
||||
<p className={cn("text-[10px] text-muted-foreground")}>
|
||||
TCP: {tcp}
|
||||
</p>
|
||||
)}
|
||||
{disk_total > 0 && (
|
||||
<p className={cn("text-[10px] text-muted-foreground")}>
|
||||
{t("serverCard.stg")}: {formatBytes(disk_total)}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{udp > 0 && (
|
||||
<p className={cn("text-[10px] text-muted-foreground")}>
|
||||
UDP: {udp}
|
||||
</p>
|
||||
)}
|
||||
{/* 第二行：TCP、UDP、进程数，以及 PlanInfo */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-1.5">
|
||||
{tcp > 0 && (
|
||||
<p className={cn("text-[10px] text-muted-foreground")}>
|
||||
TCP: {tcp}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{process > 0 && (
|
||||
<p className={cn("text-[10px] text-muted-foreground")}>
|
||||
{t("serverDetailChart.process")}: {process}
|
||||
</p>
|
||||
)}
|
||||
{udp > 0 && (
|
||||
<p className={cn("text-[10px] text-muted-foreground")}>
|
||||
UDP: {udp}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{uptime > 0 && (
|
||||
<p className={cn("text-[10px] text-muted-foreground")}>
|
||||
{t("serverCard.uptime")}: {formatUptime(uptime)}
|
||||
</p>
|
||||
)}
|
||||
{process > 0 && (
|
||||
<p className={cn("text-[10px] text-muted-foreground")}>
|
||||
{t("serverDetailChart.process")}: {process}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{parsedData?.planDataMod && <PlanInfo parsedData={parsedData} />}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{parsedData?.planDataMod && <PlanInfo parsedData={parsedData} />}
|
||||
</section>
|
||||
|
||||
{showNetTransfer && (
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import ServerFlag from "@/components/ServerFlag"
|
||||
import ServerUsageBar from "@/components/ServerUsageBar"
|
||||
import { formatBytes } from "@/lib/format"
|
||||
import { formatBytes, formatUptime } from "@/lib/format"
|
||||
import { GetFontLogoClass, GetOsName, MageMicrosoftWindows } from "@/lib/logo-class"
|
||||
import { cn, formatNezhaInfo, parsePublicNote } from "@/lib/utils"
|
||||
import { NezhaServer } from "@/types/nezha-api"
|
||||
@ -138,58 +138,72 @@ export default function ServerCardInline({ now, serverInfo }: { now: number; ser
|
||||
</section>
|
||||
|
||||
{/* 服务器详细信息标签和 PlanInfo */}
|
||||
<section className="flex flex-wrap items-center gap-1.5 w-full mt-1">
|
||||
<section className="flex flex-col gap-1 w-full mt-1">
|
||||
{showServerDetails && (
|
||||
<>
|
||||
{cpu_info && cpu_info.length > 0 && (
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<p className={cn("text-[10px] text-muted-foreground")}>
|
||||
{cpu_info[0].includes("Physical") ? "物理CPU: " : "vCPU: "}
|
||||
{cpu_info[0].match(/(\d+)\s+(?:Physical|Virtual)\s+Core/)?.[1] || "?"}
|
||||
</p>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent className="text-xs">
|
||||
{cpu_info.join(", ")}
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
)}
|
||||
{/* 第一行：运行时间、CPU、内存、硬盘 */}
|
||||
<div className="flex items-center gap-1.5">
|
||||
{uptime > 0 && (
|
||||
<p className={cn("text-[10px] text-muted-foreground")}>
|
||||
{t("serverCard.uptime")}: {formatUptime(uptime, t)}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{mem_total > 0 && (
|
||||
<p className={cn("text-[10px] text-muted-foreground")}>
|
||||
{t("serverCard.mem")}: {formatBytes(mem_total)}
|
||||
</p>
|
||||
)}
|
||||
{cpu_info && cpu_info.length > 0 && (
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<p className={cn("text-[10px] text-muted-foreground")}>
|
||||
{cpu_info[0].includes("Physical") ? "物理CPU: " : "vCPU: "}
|
||||
{cpu_info[0].match(/(\d+)\s+(?:Physical|Virtual)\s+Core/)?.[1] || "?"}
|
||||
</p>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent className="text-xs">
|
||||
{cpu_info.join(", ")}
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
)}
|
||||
|
||||
{disk_total > 0 && (
|
||||
<p className={cn("text-[10px] text-muted-foreground")}>
|
||||
{t("serverCard.stg")}: {formatBytes(disk_total)}
|
||||
</p>
|
||||
)}
|
||||
{mem_total > 0 && (
|
||||
<p className={cn("text-[10px] text-muted-foreground")}>
|
||||
{t("serverCard.mem")}: {formatBytes(mem_total)}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{tcp > 0 && (
|
||||
<p className={cn("text-[10px] text-muted-foreground")}>
|
||||
TCP: {tcp}
|
||||
</p>
|
||||
)}
|
||||
{disk_total > 0 && (
|
||||
<p className={cn("text-[10px] text-muted-foreground")}>
|
||||
{t("serverCard.stg")}: {formatBytes(disk_total)}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{udp > 0 && (
|
||||
<p className={cn("text-[10px] text-muted-foreground")}>
|
||||
UDP: {udp}
|
||||
</p>
|
||||
)}
|
||||
{/* 第二行：TCP、UDP、进程数，以及 PlanInfo */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-1.5">
|
||||
{tcp > 0 && (
|
||||
<p className={cn("text-[10px] text-muted-foreground")}>
|
||||
TCP: {tcp}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{process > 0 && (
|
||||
<p className={cn("text-[10px] text-muted-foreground")}>
|
||||
{t("serverDetailChart.process")}: {process}
|
||||
</p>
|
||||
)}
|
||||
{udp > 0 && (
|
||||
<p className={cn("text-[10px] text-muted-foreground")}>
|
||||
UDP: {udp}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{process > 0 && (
|
||||
<p className={cn("text-[10px] text-muted-foreground")}>
|
||||
{t("serverDetailChart.process")}: {process}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{parsedData?.planDataMod && <PlanInfo parsedData={parsedData} />}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{parsedData?.planDataMod && <PlanInfo parsedData={parsedData} />}
|
||||
</section>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
@ -9,3 +9,11 @@ export function formatBytes(bytes: number, decimals: number = 2) {
|
||||
|
||||
return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`
|
||||
}
|
||||
|
||||
export function formatUptime(seconds: number, t: (key: string) => string) {
|
||||
if (seconds >= 86400) {
|
||||
return `${Math.floor(seconds / 86400)} ${t("serverCard.days")}`
|
||||
} else {
|
||||
return `${Math.floor(seconds / 3600)} ${t("serverCard.hours")}`
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user