新布局

This commit is contained in:
wood chen 2025-03-10 16:58:03 +08:00
parent e2f9cb86ca
commit dff03ccaed
3 changed files with 134 additions and 104 deletions

View File

@ -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,9 +163,17 @@ 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、内存、硬盘 */}
<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>
)}
{cpu_info && cpu_info.length > 0 && (
<TooltipProvider>
<Tooltip>
@ -193,7 +201,11 @@ export default function ServerCard({ now, serverInfo }: { now: number; serverInf
{t("serverCard.stg")}: {formatBytes(disk_total)}
</p>
)}
</div>
{/* 第二行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}
@ -211,16 +223,12 @@ export default function ServerCard({ now, serverInfo }: { now: number; serverInf
{t("serverDetailChart.process")}: {process}
</p>
)}
{uptime > 0 && (
<p className={cn("text-[10px] text-muted-foreground")}>
{t("serverCard.uptime")}: {formatUptime(uptime)}
</p>
)}
</>
)}
</div>
{parsedData?.planDataMod && <PlanInfo parsedData={parsedData} />}
</div>
</>
)}
</section>
{showNetTransfer && (

View File

@ -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,9 +138,17 @@ 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、内存、硬盘 */}
<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>
)}
{cpu_info && cpu_info.length > 0 && (
<TooltipProvider>
<Tooltip>
@ -168,7 +176,11 @@ export default function ServerCardInline({ now, serverInfo }: { now: number; ser
{t("serverCard.stg")}: {formatBytes(disk_total)}
</p>
)}
</div>
{/* 第二行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}
@ -186,10 +198,12 @@ export default function ServerCardInline({ now, serverInfo }: { now: number; ser
{t("serverDetailChart.process")}: {process}
</p>
)}
</>
)}
</div>
{parsedData?.planDataMod && <PlanInfo parsedData={parsedData} />}
</div>
</>
)}
</section>
</div>
</Card>

View File

@ -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")}`
}
}