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 parsedData = parsePublicNote(public_note)
|
||||||
|
|
||||||
// 格式化运行时间
|
// 格式化运行时间
|
||||||
const formatUptime = (seconds: number) => {
|
const formatUptime = (seconds: number, t: any) => {
|
||||||
if (seconds >= 86400) {
|
if (seconds >= 86400) {
|
||||||
return `${Math.floor(seconds / 86400)} ${t("serverCard.days")}`
|
return `${Math.floor(seconds / 86400)} ${t("serverCard.days")}`
|
||||||
} else {
|
} else {
|
||||||
@ -163,64 +163,72 @@ export default function ServerCard({ now, serverInfo }: { now: number; serverInf
|
|||||||
</section>
|
</section>
|
||||||
|
|
||||||
{/* 服务器详细信息标签和 PlanInfo */}
|
{/* 服务器详细信息标签和 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 && (
|
{showServerDetails && (
|
||||||
<>
|
<>
|
||||||
{cpu_info && cpu_info.length > 0 && (
|
{/* 第一行：运行时间、CPU、内存、硬盘 */}
|
||||||
<TooltipProvider>
|
<div className="flex items-center gap-1.5">
|
||||||
<Tooltip>
|
{uptime > 0 && (
|
||||||
<TooltipTrigger asChild>
|
<p className={cn("text-[10px] text-muted-foreground")}>
|
||||||
<p className={cn("text-[10px] text-muted-foreground")}>
|
{t("serverCard.uptime")}: {formatUptime(uptime, t)}
|
||||||
{cpu_info[0].includes("Physical") ? "物理CPU: " : "vCPU: "}
|
</p>
|
||||||
{cpu_info[0].match(/(\d+)\s+(?:Physical|Virtual)\s+Core/)?.[1] || "?"}
|
)}
|
||||||
</p>
|
|
||||||
</TooltipTrigger>
|
{cpu_info && cpu_info.length > 0 && (
|
||||||
<TooltipContent className="text-xs">
|
<TooltipProvider>
|
||||||
{cpu_info.join(", ")}
|
<Tooltip>
|
||||||
</TooltipContent>
|
<TooltipTrigger asChild>
|
||||||
</Tooltip>
|
<p className={cn("text-[10px] text-muted-foreground")}>
|
||||||
</TooltipProvider>
|
{cpu_info[0].includes("Physical") ? "物理CPU: " : "vCPU: "}
|
||||||
)}
|
{cpu_info[0].match(/(\d+)\s+(?:Physical|Virtual)\s+Core/)?.[1] || "?"}
|
||||||
|
</p>
|
||||||
{mem_total > 0 && (
|
</TooltipTrigger>
|
||||||
<p className={cn("text-[10px] text-muted-foreground")}>
|
<TooltipContent className="text-xs">
|
||||||
{t("serverCard.mem")}: {formatBytes(mem_total)}
|
{cpu_info.join(", ")}
|
||||||
</p>
|
</TooltipContent>
|
||||||
)}
|
</Tooltip>
|
||||||
|
</TooltipProvider>
|
||||||
{disk_total > 0 && (
|
)}
|
||||||
<p className={cn("text-[10px] text-muted-foreground")}>
|
|
||||||
{t("serverCard.stg")}: {formatBytes(disk_total)}
|
{mem_total > 0 && (
|
||||||
</p>
|
<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}
|
{disk_total > 0 && (
|
||||||
</p>
|
<p className={cn("text-[10px] text-muted-foreground")}>
|
||||||
)}
|
{t("serverCard.stg")}: {formatBytes(disk_total)}
|
||||||
|
</p>
|
||||||
{udp > 0 && (
|
)}
|
||||||
<p className={cn("text-[10px] text-muted-foreground")}>
|
</div>
|
||||||
UDP: {udp}
|
|
||||||
</p>
|
{/* 第二行：TCP、UDP、进程数，以及 PlanInfo */}
|
||||||
)}
|
<div className="flex items-center justify-between">
|
||||||
|
<div className="flex items-center gap-1.5">
|
||||||
{process > 0 && (
|
{tcp > 0 && (
|
||||||
<p className={cn("text-[10px] text-muted-foreground")}>
|
<p className={cn("text-[10px] text-muted-foreground")}>
|
||||||
{t("serverDetailChart.process")}: {process}
|
TCP: {tcp}
|
||||||
</p>
|
</p>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{uptime > 0 && (
|
{udp > 0 && (
|
||||||
<p className={cn("text-[10px] text-muted-foreground")}>
|
<p className={cn("text-[10px] text-muted-foreground")}>
|
||||||
{t("serverCard.uptime")}: {formatUptime(uptime)}
|
UDP: {udp}
|
||||||
</p>
|
</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>
|
</section>
|
||||||
|
|
||||||
{showNetTransfer && (
|
{showNetTransfer && (
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
import ServerFlag from "@/components/ServerFlag"
|
import ServerFlag from "@/components/ServerFlag"
|
||||||
import ServerUsageBar from "@/components/ServerUsageBar"
|
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 { GetFontLogoClass, GetOsName, MageMicrosoftWindows } from "@/lib/logo-class"
|
||||||
import { cn, formatNezhaInfo, parsePublicNote } from "@/lib/utils"
|
import { cn, formatNezhaInfo, parsePublicNote } from "@/lib/utils"
|
||||||
import { NezhaServer } from "@/types/nezha-api"
|
import { NezhaServer } from "@/types/nezha-api"
|
||||||
@ -138,58 +138,72 @@ export default function ServerCardInline({ now, serverInfo }: { now: number; ser
|
|||||||
</section>
|
</section>
|
||||||
|
|
||||||
{/* 服务器详细信息标签和 PlanInfo */}
|
{/* 服务器详细信息标签和 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 && (
|
{showServerDetails && (
|
||||||
<>
|
<>
|
||||||
{cpu_info && cpu_info.length > 0 && (
|
{/* 第一行：运行时间、CPU、内存、硬盘 */}
|
||||||
<TooltipProvider>
|
<div className="flex items-center gap-1.5">
|
||||||
<Tooltip>
|
{uptime > 0 && (
|
||||||
<TooltipTrigger asChild>
|
<p className={cn("text-[10px] text-muted-foreground")}>
|
||||||
<p className={cn("text-[10px] text-muted-foreground")}>
|
{t("serverCard.uptime")}: {formatUptime(uptime, t)}
|
||||||
{cpu_info[0].includes("Physical") ? "物理CPU: " : "vCPU: "}
|
</p>
|
||||||
{cpu_info[0].match(/(\d+)\s+(?:Physical|Virtual)\s+Core/)?.[1] || "?"}
|
)}
|
||||||
</p>
|
|
||||||
</TooltipTrigger>
|
{cpu_info && cpu_info.length > 0 && (
|
||||||
<TooltipContent className="text-xs">
|
<TooltipProvider>
|
||||||
{cpu_info.join(", ")}
|
<Tooltip>
|
||||||
</TooltipContent>
|
<TooltipTrigger asChild>
|
||||||
</Tooltip>
|
<p className={cn("text-[10px] text-muted-foreground")}>
|
||||||
</TooltipProvider>
|
{cpu_info[0].includes("Physical") ? "物理CPU: " : "vCPU: "}
|
||||||
)}
|
{cpu_info[0].match(/(\d+)\s+(?:Physical|Virtual)\s+Core/)?.[1] || "?"}
|
||||||
|
</p>
|
||||||
{mem_total > 0 && (
|
</TooltipTrigger>
|
||||||
<p className={cn("text-[10px] text-muted-foreground")}>
|
<TooltipContent className="text-xs">
|
||||||
{t("serverCard.mem")}: {formatBytes(mem_total)}
|
{cpu_info.join(", ")}
|
||||||
</p>
|
</TooltipContent>
|
||||||
)}
|
</Tooltip>
|
||||||
|
</TooltipProvider>
|
||||||
{disk_total > 0 && (
|
)}
|
||||||
<p className={cn("text-[10px] text-muted-foreground")}>
|
|
||||||
{t("serverCard.stg")}: {formatBytes(disk_total)}
|
{mem_total > 0 && (
|
||||||
</p>
|
<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}
|
{disk_total > 0 && (
|
||||||
</p>
|
<p className={cn("text-[10px] text-muted-foreground")}>
|
||||||
)}
|
{t("serverCard.stg")}: {formatBytes(disk_total)}
|
||||||
|
</p>
|
||||||
{udp > 0 && (
|
)}
|
||||||
<p className={cn("text-[10px] text-muted-foreground")}>
|
</div>
|
||||||
UDP: {udp}
|
|
||||||
</p>
|
{/* 第二行：TCP、UDP、进程数，以及 PlanInfo */}
|
||||||
)}
|
<div className="flex items-center justify-between">
|
||||||
|
<div className="flex items-center gap-1.5">
|
||||||
{process > 0 && (
|
{tcp > 0 && (
|
||||||
<p className={cn("text-[10px] text-muted-foreground")}>
|
<p className={cn("text-[10px] text-muted-foreground")}>
|
||||||
{t("serverDetailChart.process")}: {process}
|
TCP: {tcp}
|
||||||
</p>
|
</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>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</Card>
|
</Card>
|
||||||
|
|||||||
@ -9,3 +9,11 @@ export function formatBytes(bytes: number, decimals: number = 2) {
|
|||||||
|
|
||||||
return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`
|
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