wood/nezha-dash-v1
1
0
Fork 0
mirror of https://github.com/woodchen-ink/nezha-dash-v1.git synced 2025-07-18 01:21:56 +08:00
Code Issues Packages Projects Releases Wiki Activity

移除 HTTPS 配置文件，更新 ServerCard 组件样式和布局，增强服务器详细信息展示，调整 CPU、内存、存储和网络传输信息的显示方式

Browse Source
This commit is contained in:
wood chen 2025-04-18 20:25:24 +08:00
parent 03c3a913c6
commit 426f253761
4 changed files with 130 additions and 148 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
.cert/cert.pem
View File

@ -1,19 +0,0 @@
-----BEGIN CERTIFICATE-----
MIIDCTCCAfGgAwIBAgIUQxY5HJAktPoEWU9osMraUrm/DEAwDQYJKoZIhvcNAQEL
BQAwFDESMBAGA1UEAwwJbG9jYWxob3N0MB4XDTI1MDIxMzAzMTA0MVoXDTI2MDIx
MzAzMTA0MVowFDESMBAGA1UEAwwJbG9jYWxob3N0MIIBIjANBgkqhkiG9w0BAQEF
AAOCAQ8AMIIBCgKCAQEAraDt2UXkzKLRskNtVDo1iXe1tBTYTAFtl+m7JOvdYdmS
oenV3Cn/8Cd8JuusQVl9jovcMFb3pwrQzodSQ9oN70B/MSqA/Pjgpji+uu4Hjcas
VhaAHregBsV8ULl+OikPPFWcGKRZMtRyta3Sy/2E5Y44wr8vdERKDl/6ydDVioe5
dQQS+klyzamy9ayQj8fpSTR96H+WpDd6gGuDf+XlrqlnrgatiUIJiDkeJPCIUNJi
VSw8lq3KO8O4K376smCAdngdyYg+q/Sk2r5MnHi9VqNknwmos06yPk6vTWIpZ+mK
bz9W2HW4sukU0nwRXP0p29SKoW5ZKPvrLvfNDp0P3QIDAQABo1MwUTAdBgNVHQ4E
FgQUYSHtj6LjfaQ0BmuCdlHf/EXKm5AwHwYDVR0jBBgwFoAUYSHtj6LjfaQ0BmuC
dlHf/EXKm5AwDwYDVR0TAQH/BAUwAwEB/zANBgkqhkiG9w0BAQsFAAOCAQEAQnM/
MIYunEp8ITMtllILW9TJhZVertfuux4S1rgRZ3VADmHgHftCgUKpm4kh8w2gEZ0M
DXTmnIwqaBa+lpiCcALECUQ1L2jPcwCYowmEfnKLF6Ob3Tnznz0eqr8TnvuKCX4c
ehSlfqOcUn8rveLDX91j+FJ+LSggf/kYjhE0ACtZHJyEM9csWu5chu8cCjpq5pn/
ahiPw5eUnxsyBWdqlkMvY+lofH7SaunXrbLcIDg67wMl0FpZ39z/UAhIVNiyUIDe
k7pNzRu99r5hIqdyfx5zULG2mzJCSsJj63t4BeDwr6u+zXSlyVMqh5cXj9mk4LJ6
DhJlnudcCV5t/RGyOw==
-----END CERTIFICATE-----

28
.cert/key.pem
View File

@ -1,28 +0,0 @@
-----BEGIN PRIVATE KEY-----
MIIEvgIBADANBgkqhkiG9w0BAQEFAASCBKgwggSkAgEAAoIBAQCtoO3ZReTMotGy
Q21UOjWJd7W0FNhMAW2X6bsk691h2ZKh6dXcKf/wJ3wm66xBWX2Oi9wwVvenCtDO
h1JD2g3vQH8xKoD8+OCmOL667geNxqxWFoAet6AGxXxQuX46KQ88VZwYpFky1HK1
rdLL/YTljjjCvy90REoOX/rJ0NWKh7l1BBL6SXLNqbL1rJCPx+lJNH3of5akN3qA
a4N/5eWuqWeuBq2JQgmIOR4k8IhQ0mJVLDyWrco7w7grfvqyYIB2eB3JiD6r9KTa
vkyceL1Wo2SfCaizTrI+Tq9NYiln6YpvP1bYdbiy6RTSfBFc/Snb1Iqhblko++su
980OnQ/dAgMBAAECggEAI/6N+GI9N7AUVUaVqmWj1iL/Q/0jRwRvxhOyFIoiG6gp
dg/+IhWB5bUlz4LBc8270fqME+hfkF1VYs9aXk8c3unJxHVJhsgIeGUgoyt33Owg
K3ugJV4PWoAD0M9Xi/KZojokMVaW2EsDGcdWgSwGKjmk6jiMu6dxi8/Zc4+ryTsY
3+KMUocFyqMfYK1/sYSTPzlPWcCGMuaO36Df++cAzKLlqHRh7BLgSiCXBrV8ITFf
LTkQFDf/c+yVC6mJG/GXzqdKXS3OT97sW34tdmQPNhReCSkSEDVQt+tnFa5be1R2
18mODkaSv4DxnMXnlfexon/pGuXukgrMTZQXq2+pIQKBgQDaNvBmJrSCU9NSDNSj
I0yTX8DUzEv1bxErbfptSlSoUcEIPcLsxt+xZFVfU8IcMvQ43gHSsRquCfZsUZ0r
/ZIfJ7pWTqbxd/EybsMiC2ZSS8NdVX3MJhKinrZXMTRAA8l5a4AFr2YKMtNqQpGY
xWu8TS7PR8N9B6vZqGC9hhID4QKBgQDLsZLrezomWTthFAOfACj/ebIEyZ30YVNw
7IaaVTkeWtYGJXasMrts1+n15dPwR6a18c65hSywJKsCEYD6z/uXxaoX1bK32oLw
49thMw+qSilA1jMQ/XQxx9TFsmrCvwSm5xIjSV+0pD1sApiivGQAU+2oHZeEwLue
v51JxnaLfQKBgQDVYUWgThbTHk8U+7DuObVGoyp3q7JXNJ1wf2GTf0zbLt54RZSX
Xj0dRMRqrAey9Wx1MzpLIZ26M8nAz+nGO3Woe3utq8l5c9TqgP7VCpqqvKU0XkXd
3Bj65gHdryKtukZIMgOFC6fXLy4mySOAZQRdpIeybzVMzLSR6SF4EmMJYQKBgGtz
xVlLrCVGtThE4pQh9X6vp+U2poigPvA3FdqcUoFc0cJ0SOIV8SE91UHOd7stURhx
8ueTBTv2W++/ZBbrWIF72HqyVJEASErjKHtiAEWI0bJOTKoNyhnonKmdsQwC0GVr
R/otXrtgWLZ9uB9A2lAB9kDVO3TgZxkbY9HjS+3RAoGBAKVKcJFErNZhQxCx5ll3
u9wtE7duiVcS3jZhFa7tvcSc4O5+ahEQG/gy2M6kgqB/f3nMH6Rd9wsTzwPp1uZz
qiumr3ZOvpTWuLiIMQi3sE9pBGz7p+ZTeP8Z0Wez98v9MVmgsCsPqDOpa1JhnJIq
2AgG3D/RUJylOPYnMq8vdAyx
-----END PRIVATE KEY-----

222
src/components/ServerCard.tsx
View File

@ -73,7 +73,7 @@ export default function ServerCard({ now, serverInfo }: { now: number; serverInf
return online ? ( return online ? (
<Card <Card
className={cn( className={cn(
"flex flex-col items-center justify-start gap-3 p-3 md:px-5 cursor-pointer hover:bg-accent/50 transition-colors", "flex flex-col items-center justify-start gap-4 p-4 md:px-6 cursor-pointer hover:bg-accent/50 transition-colors",
{ {
"flex-col": fixedTopServerName, "flex-col": fixedTopServerName,
"lg:flex-row": !fixedTopServerName, "lg:flex-row": !fixedTopServerName,
@ -84,18 +84,19 @@ export default function ServerCard({ now, serverInfo }: { now: number; serverInf
)} )}
onClick={cardClick} onClick={cardClick}
> >
{/* 服务器名称和标识区域 */}
<section <section
className={cn("grid items-center gap-2", { className={cn("grid items-center gap-3", {
"lg:w-40": !fixedTopServerName, "lg:w-44": !fixedTopServerName,
})} })}
style={{ gridTemplateColumns: "auto auto 1fr" }} style={{ gridTemplateColumns: "auto auto 1fr" }}
> >
<span className="h-2 w-2 shrink-0 rounded-full bg-green-500 self-center"></span> <span className="h-2.5 w-2.5 shrink-0 rounded-full bg-green-500 shadow-sm shadow-green-300 dark:shadow-green-900"></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-[20px]" : "min-w-0")}>
{showFlag ? <ServerFlag country_code={country_code} /> : null} {showFlag ? <ServerFlag country_code={country_code} /> : null}
</div> </div>
<div className="relative flex flex-col"> <div className="relative 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-sm" : "text-base")}>{name}</p>
<div <div
className={cn("hidden lg:block", { className={cn("hidden lg:block", {
"lg:hidden": fixedTopServerName, "lg:hidden": fixedTopServerName,
@ -105,6 +106,8 @@ export default function ServerCard({ now, serverInfo }: { now: number; serverInf
</div> </div>
</div> </div>
</section> </section>
{/* 计费信息移动端展示 */}
<div <div
className={cn("flex items-center gap-2 -mt-2 lg:hidden", { className={cn("flex items-center gap-2 -mt-2 lg:hidden", {
"lg:flex": fixedTopServerName, "lg:flex": fixedTopServerName,
@ -112,49 +115,61 @@ export default function ServerCard({ now, serverInfo }: { now: number; serverInf
> >
{parsedData?.billingDataMod && <BillingInfo parsedData={parsedData} />} {parsedData?.billingDataMod && <BillingInfo parsedData={parsedData} />}
</div> </div>
<div className="flex flex-col lg:items-start items-center gap-2">
<div className="flex flex-col lg:items-start items-center gap-3 w-full">
{/* 系统和资源使用情况 */}
<section <section
className={cn("grid grid-cols-5 items-center gap-3", { className={cn("grid grid-cols-5 items-center gap-4", {
"lg:grid-cols-6 lg:gap-4": fixedTopServerName, "lg:grid-cols-6 lg:gap-5": fixedTopServerName,
})} })}
> >
{fixedTopServerName && ( {fixedTopServerName && (
<div className={"hidden col-span-1 items-center lg:flex lg:flex-row gap-2"}> <div className={"hidden col-span-1 items-center lg:flex lg:flex-row gap-2"}>
<div className="text-xs font-semibold"> <div className="text-xs font-semibold">
{platform.includes("Windows") ? ( {platform.includes("Windows") ? (
<MageMicrosoftWindows className="size-[10px]" /> <MageMicrosoftWindows className="size-[12px]" />
) : ( ) : (
<p className={`fl-${GetFontLogoClass(platform)}`} /> <p className={`fl-${GetFontLogoClass(platform)}`} />
)} )}
</div> </div>
<div className={"flex w-14 flex-col"}> <div className={"flex w-16 flex-col"}>
<p className="text-xs text-muted-foreground">{t("serverCard.system")}</p> <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-[11px] font-semibold">{platform.includes("Windows") ? "Windows" : GetOsName(platform)}</div>
</div> </div>
</div> </div>
)} )}
<div className={"flex w-14 flex-col"}>
{/* CPU使用率 */}
<div className={"flex w-16 flex-col"}>
<p className="text-xs text-muted-foreground">{"CPU"}</p> <p className="text-xs text-muted-foreground">{"CPU"}</p>
<div className="flex items-center text-xs font-semibold">{cpu.toFixed(2)}%</div> <div className="flex items-center text-xs font-semibold">{cpu.toFixed(2)}%</div>
<ServerUsageBar value={cpu} /> <ServerUsageBar value={cpu} />
</div> </div>
<div className={"flex w-14 flex-col"}>
{/* 内存使用率 */}
<div className={"flex w-16 flex-col"}>
<p className="text-xs text-muted-foreground">{t("serverCard.mem")}</p> <p className="text-xs text-muted-foreground">{t("serverCard.mem")}</p>
<div className="flex items-center text-xs font-semibold">{mem.toFixed(2)}%</div> <div className="flex items-center text-xs font-semibold">{mem.toFixed(2)}%</div>
<ServerUsageBar value={mem} /> <ServerUsageBar value={mem} />
</div> </div>
<div className={"flex w-14 flex-col"}>
{/* 存储使用率 */}
<div className={"flex w-16 flex-col"}>
<p className="text-xs text-muted-foreground">{t("serverCard.stg")}</p> <p className="text-xs text-muted-foreground">{t("serverCard.stg")}</p>
<div className="flex items-center text-xs font-semibold">{stg.toFixed(2)}%</div> <div className="flex items-center text-xs font-semibold">{stg.toFixed(2)}%</div>
<ServerUsageBar value={stg} /> <ServerUsageBar value={stg} />
</div> </div>
<div className={"flex w-14 flex-col"}>
{/* 上传速度 */}
<div className={"flex w-16 flex-col"}>
<p className="text-xs text-muted-foreground">{t("serverCard.upload")}</p> <p className="text-xs text-muted-foreground">{t("serverCard.upload")}</p>
<div className="flex items-center text-xs font-semibold"> <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> </div>
<div className={"flex w-14 flex-col"}>
{/* 下载速度 */}
<div className={"flex w-16 flex-col"}>
<p className="text-xs text-muted-foreground">{t("serverCard.download")}</p> <p className="text-xs text-muted-foreground">{t("serverCard.download")}</p>
<div className="flex items-center text-xs font-semibold"> <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`} {down >= 1024 ? `${(down / 1024).toFixed(2)}G/s` : down >= 1 ? `${down.toFixed(2)}M/s` : `${(down * 1024).toFixed(2)}K/s`}
@ -162,88 +177,103 @@ export default function ServerCard({ now, serverInfo }: { now: number; serverInf
</div> </div>
</section> </section>
{/* 服务器详细信息标签和 PlanInfo */} {/* 服务器详细信息区域 */}
<section className="flex flex-col gap-1 w-full mt-1"> {showServerDetails && (
{showServerDetails && ( <section className="flex flex-col gap-2 w-full mt-1 bg-muted/30 p-2 rounded-md">
<> {/* 服务器配置信息 */}
{/* 第一行：运行时间、CPU、内存、硬盘 */} <div className="flex flex-wrap items-center gap-2">
<div className="flex items-center gap-1.5"> {/* 运行时间 */}
{uptime > 0 && ( {uptime > 0 && (
<p className={cn("text-[10px] text-muted-foreground")}> <TooltipProvider>
{t("serverCard.uptime")}: {formatUptime(uptime, t)} <Tooltip>
</p> <TooltipTrigger asChild>
)} <Badge variant="outline" className="text-[10px] py-0 h-5">
{t("serverCard.uptime")}: {formatUptime(uptime, t)}
{cpu_info && cpu_info.length > 0 && ( </Badge>
<TooltipProvider> </TooltipTrigger>
<Tooltip> <TooltipContent className="text-xs">
<TooltipTrigger asChild> {t("serverCard.uptime")}: {formatUptime(uptime, t)}
<p className={cn("text-[10px] text-muted-foreground")}> </TooltipContent>
{cpu_info[0].includes("Physical") ? "pCPU: " : "vCPU: "} </Tooltip>
{cpu_info[0].match(/(\d+)\s+(?:Physical|Virtual)\s+Core/)?.[1] || "?"} </TooltipProvider>
</p> )}
</TooltipTrigger>
<TooltipContent className="text-xs"> {/* CPU信息 */}
{cpu_info.join(", ")} {cpu_info && cpu_info.length > 0 && (
</TooltipContent> <TooltipProvider>
</Tooltip> <Tooltip>
</TooltipProvider> <TooltipTrigger asChild>
)} <Badge variant="outline" className="text-[10px] py-0 h-5">
{cpu_info[0].includes("Physical") ? "pCPU: " : "vCPU: "}
{mem_total > 0 && ( {cpu_info[0].match(/(\d+)\s+(?:Physical|Virtual)\s+Core/)?.[1] || "?"}
<p className={cn("text-[10px] text-muted-foreground")}> </Badge>
{t("serverCard.mem")}: {formatBytes(mem_total)} </TooltipTrigger>
</p> <TooltipContent className="text-xs">
)} {cpu_info.join(", ")}
</TooltipContent>
{disk_total > 0 && ( </Tooltip>
<p className={cn("text-[10px] text-muted-foreground")}> </TooltipProvider>
{t("serverCard.stg")}: {formatBytes(disk_total)} )}
</p>
)} {/* 内存大小 */}
{mem_total > 0 && (
<Badge variant="outline" className="text-[10px] py-0 h-5">
{t("serverCard.mem")}: {formatBytes(mem_total)}
</Badge>
)}
{/* 存储大小 */}
{disk_total > 0 && (
<Badge variant="outline" className="text-[10px] py-0 h-5">
{t("serverCard.stg")}: {formatBytes(disk_total)}
</Badge>
)}
{/* TCP连接数 */}
{tcp > 0 && (
<Badge variant="outline" className="text-[10px] py-0 h-5">
TCP: {tcp}
</Badge>
)}
{/* UDP连接数 */}
{udp > 0 && (
<Badge variant="outline" className="text-[10px] py-0 h-5">
UDP: {udp}
</Badge>
)}
{/* 进程数 */}
{process > 0 && (
<Badge variant="outline" className="text-[10px] py-0 h-5">
{t("serverDetailChart.process")}: {process}
</Badge>
)}
</div>
{/* 套餐信息 */}
{parsedData?.planDataMod && (
<div className="flex justify-end">
<PlanInfo parsedData={parsedData} />
</div> </div>
)}
{/* 第二行：TCP、UDP、进程数，以及 PlanInfo */} </section>
<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>
)}
{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>
</>
)}
</section>
{/* 网络传输信息 */}
{showNetTransfer && ( {showNetTransfer && (
<section className={"flex items-center w-full justify-between gap-1"}> <section className={"flex items-center w-full justify-between gap-2 mt-1"}>
<Badge <Badge
variant="secondary" variant="secondary"
className="items-center flex-1 justify-center rounded-[8px] text-nowrap text-[11px] border-muted-50 shadow-md shadow-neutral-200/30 dark:shadow-none" className="items-center flex-1 justify-center rounded-[8px] text-[11px] border-muted-50 shadow-sm py-1.5"
> >
{t("serverCard.upload")}:{formatBytes(net_out_transfer)} {t("serverCard.upload")}: {formatBytes(net_out_transfer)}
</Badge> </Badge>
<Badge <Badge
variant="outline" variant="outline"
className="items-center flex-1 justify-center rounded-[8px] text-nowrap text-[11px] shadow-md shadow-neutral-200/30 dark:shadow-none" className="items-center flex-1 justify-center rounded-[8px] text-[11px] shadow-sm py-1.5"
> >
{t("serverCard.download")}:{formatBytes(net_in_transfer)} {t("serverCard.download")}: {formatBytes(net_in_transfer)}
</Badge> </Badge>
</section> </section>
)} )}
@ -252,8 +282,8 @@ export default function ServerCard({ now, serverInfo }: { now: number; serverInf
) : ( ) : (
<Card <Card
className={cn( className={cn(
"flex flex-col items-center justify-start gap-3 sm:gap-0 p-3 md:px-5 cursor-pointer hover:bg-accent/50 transition-colors", "flex flex-col items-center justify-start gap-4 p-4 md:px-6 cursor-pointer hover:bg-accent/50 transition-colors",
showNetTransfer ? "lg:min-h-[91px] min-h-[123px]" : "lg:min-h-[61px] min-h-[93px]", showNetTransfer ? "lg:min-h-[100px] min-h-[130px]" : "lg:min-h-[70px] min-h-[100px]",
{ {
"flex-col": fixedTopServerName, "flex-col": fixedTopServerName,
"lg:flex-row": !fixedTopServerName, "lg:flex-row": !fixedTopServerName,
@ -265,17 +295,17 @@ export default function ServerCard({ now, serverInfo }: { now: number; serverInf
onClick={cardClick} onClick={cardClick}
> >
<section <section
className={cn("grid items-center gap-2", { className={cn("grid items-center gap-3", {
"lg:w-40": !fixedTopServerName, "lg:w-44": !fixedTopServerName,
})} })}
style={{ gridTemplateColumns: "auto auto 1fr" }} style={{ gridTemplateColumns: "auto auto 1fr" }}
> >
<span className="h-2 w-2 shrink-0 rounded-full bg-red-500 self-center"></span> <span className="h-2.5 w-2.5 shrink-0 rounded-full bg-red-500 shadow-sm shadow-red-300 dark:shadow-red-900"></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-[20px]" : "min-w-0")}>
{showFlag ? <ServerFlag country_code={country_code} /> : null} {showFlag ? <ServerFlag country_code={country_code} /> : null}
</div> </div>
<div className="relative flex flex-col"> <div className="relative flex flex-col">
<p className={cn("break-all font-bold tracking-tight max-w-[108px]", showFlag ? "text-xs" : "text-sm")}>{name}</p> <p className={cn("break-all font-bold tracking-tight", showFlag ? "text-sm" : "text-base")}>{name}</p>
<div <div
className={cn("hidden lg:block", { className={cn("hidden lg:block", {
"lg:hidden": fixedTopServerName, "lg:hidden": fixedTopServerName,

9
vite.config.ts
View File

@ -1,6 +1,5 @@
import react from "@vitejs/plugin-react-swc" import react from "@vitejs/plugin-react-swc"
import { execSync } from "child_process" import { execSync } from "child_process"
import fs from "fs"
import path from "path" import path from "path"
import { defineConfig } from "vite" import { defineConfig } from "vite"
@ -27,10 +26,10 @@ export default defineConfig({
}, },
}, },
server: { server: {
https: { // https: {
key: fs.readFileSync("./.cert/key.pem"), // key: fs.readFileSync("./.cert/key.pem"),
cert: fs.readFileSync("./.cert/cert.pem"), // cert: fs.readFileSync("./.cert/cert.pem"),
}, // },
proxy: { proxy: {
"/api/v1/ws/server": { "/api/v1/ws/server": {
target: "ws://localhost:18009", target: "ws://localhost:18009",