From 372082771c76a824b556227f3155c93d3f0c3b30 Mon Sep 17 00:00:00 2001
From: wood chen <wood@czl.net>
Date: Fri, 18 Apr 2025 20:44:33 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0=20ServerCard=20=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=EF=BC=8C=E9=87=8D=E6=9E=84=E6=A0=B7=E5=BC=8F=E5=92=8C?=
 =?UTF-8?q?=E5=B8=83=E5=B1=80=EF=BC=8C=E5=A2=9E=E5=BC=BA=E7=BD=91=E7=BB=9C?=
 =?UTF-8?q?=E9=80=9F=E5=BA=A6=E6=98=BE=E7=A4=BA=EF=BC=8C=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E6=9C=8D=E5=8A=A1=E5=99=A8=E8=AF=A6=E7=BB=86=E4=BF=A1=E6=81=AF?=
 =?UTF-8?q?=E5=B1=95=E7=A4=BA=EF=BC=8C=E7=A7=BB=E9=99=A4=E4=B8=8D=E5=BF=85?=
 =?UTF-8?q?=E8=A6=81=E7=9A=84=E4=BB=A3=E7=A0=81=EF=BC=8C=E6=8F=90=E5=8D=87?=
 =?UTF-8?q?=E5=8F=AF=E8=AF=BB=E6=80=A7=E5=92=8C=E7=BB=B4=E6=8A=A4=E6=80=A7?=
 =?UTF-8?q?=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ServerCard.tsx | 442 ++++++++++++++++------------------
 1 file changed, 211 insertions(+), 231 deletions(-)

diff --git a/src/components/ServerCard.tsx b/src/components/ServerCard.tsx
index eb33088..7e2994c 100644
--- a/src/components/ServerCard.tsx
+++ b/src/components/ServerCard.tsx
@@ -10,7 +10,7 @@ import { useNavigate } from "react-router-dom"
 import PlanInfo from "./PlanInfo"
 import BillingInfo from "./billingInfo"
 import { Badge } from "./ui/badge"
-import { Card } from "./ui/card"
+import { Card, CardContent, CardHeader, CardFooter } from "./ui/card"
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./ui/tooltip"
 
 export default function ServerCard({ now, serverInfo }: { now: number; serverInfo: NezhaServer }) {
@@ -47,15 +47,9 @@ export default function ServerCard({ now, serverInfo }: { now: number; serverInf
   }
 
   const showFlag = true
-
   const customBackgroundImage = (window.CustomBackgroundImage as string) !== "" ? window.CustomBackgroundImage : undefined
-
   // @ts-expect-error ShowNetTransfer is a global variable
   const showNetTransfer = window.ShowNetTransfer as boolean
-
-  // @ts-expect-error FixedTopServerName is a global variable
-  const fixedTopServerName = window.FixedTopServerName as boolean
-
   // @ts-expect-error ShowServerDetails is a global variable
   const showServerDetails = window.ShowServerDetails !== undefined ? window.ShowServerDetails as boolean : true
 
@@ -70,259 +64,245 @@ export default function ServerCard({ now, serverInfo }: { now: number; serverInf
     }
   }
 
-  return online ? (
-    <Card
-      className={cn(
-        "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,
-          "lg:flex-row": !fixedTopServerName,
-        },
-        {
-          "bg-card/70": customBackgroundImage,
-        },
-      )}
-      onClick={cardClick}
-    >
-      {/* 服务器名称和标识区域 */}
-      <section
-        className={cn("grid items-center gap-3", {
-          "lg:w-44": !fixedTopServerName,
-        })}
-        style={{ gridTemplateColumns: "auto auto 1fr" }}
+  // 格式化网络速度
+  const formatSpeed = (speed: number) => {
+    return speed >= 1024 
+      ? `${(speed / 1024).toFixed(2)}G/s` 
+      : speed >= 1 
+        ? `${speed.toFixed(2)}M/s` 
+        : `${(speed * 1024).toFixed(2)}K/s`
+  }
+
+  if (!online) {
+    return (
+      <Card
+        className={cn(
+          "cursor-pointer hover:bg-accent/50 transition-colors border-red-300/30 dark:border-red-900/30",
+          { "bg-card/70": customBackgroundImage }
+        )}
+        onClick={cardClick}
       >
-        <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-[20px]" : "min-w-0")}>
-          {showFlag ? <ServerFlag country_code={country_code} /> : null}
-        </div>
-        <div className="relative flex flex-col">
-          <p className={cn("break-all font-bold tracking-tight", showFlag ? "text-sm" : "text-base")}>{name}</p>
-          <div
-            className={cn("hidden lg:block", {
-              "lg:hidden": fixedTopServerName,
-            })}
-          >
-            {parsedData?.billingDataMod && <BillingInfo parsedData={parsedData} />}
+        <CardContent className="p-4">
+          <div className="flex items-center gap-3 mb-2">
+            <span className="h-3 w-3 shrink-0 rounded-full bg-red-500 shadow-sm shadow-red-300 dark:shadow-red-900"></span>
+            {showFlag && <ServerFlag country_code={country_code} />}
+            <h3 className="font-bold text-sm truncate flex-1">{name}</h3>
           </div>
-        </div>
-      </section>
-      
-      {/* 计费信息移动端展示 */}
-      <div
-        className={cn("flex items-center gap-2 -mt-2 lg:hidden", {
-          "lg:flex": fixedTopServerName,
-        })}
-      >
-        {parsedData?.billingDataMod && <BillingInfo parsedData={parsedData} />}
-      </div>
-      
-      <div className="flex flex-col lg:items-start items-center gap-3 w-full">
-        {/* 系统和资源使用情况 */}
-        <section
-          className={cn("grid grid-cols-5 items-center gap-4", {
-            "lg:grid-cols-6 lg:gap-5": fixedTopServerName,
-          })}
-        >
-          {fixedTopServerName && (
-            <div className={"hidden col-span-1 items-center lg:flex lg:flex-row gap-2"}>
-              <div className="text-xs font-semibold">
-                {platform.includes("Windows") ? (
-                  <MageMicrosoftWindows className="size-[12px]" />
-                ) : (
-                  <p className={`fl-${GetFontLogoClass(platform)}`} />
-                )}
-              </div>
-              <div className={"flex w-16 flex-col"}>
-                <p className="text-xs text-muted-foreground">{t("serverCard.system")}</p>
-                <div className="flex items-center text-[11px] font-semibold">{platform.includes("Windows") ? "Windows" : GetOsName(platform)}</div>
-              </div>
+
+          {parsedData?.billingDataMod && (
+            <div className="mt-2">
+              <BillingInfo parsedData={parsedData} />
             </div>
           )}
           
-          {/* CPU使用率 */}
-          <div className={"flex w-16 flex-col"}>
-            <p className="text-xs text-muted-foreground">{"CPU"}</p>
-            <div className="flex items-center text-xs font-semibold">{cpu.toFixed(2)}%</div>
-            <ServerUsageBar value={cpu} />
+          {parsedData?.planDataMod && (
+            <div className="mt-2">
+              <PlanInfo parsedData={parsedData} />
+            </div>
+          )}
+        </CardContent>
+      </Card>
+    )
+  }
+
+  return (
+    <Card
+      className={cn(
+        "cursor-pointer hover:bg-accent/50 transition-colors border-green-300/30 dark:border-green-900/30",
+        { "bg-card/70": customBackgroundImage }
+      )}
+      onClick={cardClick}
+    >
+      <CardHeader className="p-4 pb-2">
+        <div className="flex items-center gap-3">
+          <span className="h-3 w-3 shrink-0 rounded-full bg-green-500 shadow-sm shadow-green-300 dark:shadow-green-900"></span>
+          {showFlag && <ServerFlag country_code={country_code} />}
+          <h3 className="font-bold text-sm truncate flex-1">{name}</h3>
+        </div>
+        
+        {parsedData?.billingDataMod && (
+          <div className="mt-1">
+            <BillingInfo parsedData={parsedData} />
+          </div>
+        )}
+      </CardHeader>
+
+      <CardContent className="p-4 pt-2 pb-2">
+        {/* 系统信息和资源使用情况 */}
+        <div className="grid grid-cols-2 md:grid-cols-6 gap-3 mt-1">
+          {/* 系统信息 */}
+          <div className="flex items-center gap-1.5 text-xs">
+            <div className="text-xs">
+              {platform.includes("Windows") ? (
+                <MageMicrosoftWindows className="size-[12px]" />
+              ) : (
+                <p className={`fl-${GetFontLogoClass(platform)}`} />
+              )}
+            </div>
+            <span className="text-muted-foreground">
+              {platform.includes("Windows") ? "Windows" : GetOsName(platform)}
+            </span>
           </div>
           
-          {/* 内存使用率 */}
-          <div className={"flex w-16 flex-col"}>
-            <p className="text-xs text-muted-foreground">{t("serverCard.mem")}</p>
-            <div className="flex items-center text-xs font-semibold">{mem.toFixed(2)}%</div>
-            <ServerUsageBar value={mem} />
-          </div>
-          
-          {/* 存储使用率 */}
-          <div className={"flex w-16 flex-col"}>
-            <p className="text-xs text-muted-foreground">{t("serverCard.stg")}</p>
-            <div className="flex items-center text-xs font-semibold">{stg.toFixed(2)}%</div>
-            <ServerUsageBar value={stg} />
-          </div>
-          
-          {/* 上传速度 */}
-          <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`}
+          {/* 资源使用情况 */}
+          <div className="col-span-5 grid grid-cols-5 gap-3">
+            {/* CPU使用率 */}
+            <div className="flex flex-col">
+              <div className="flex justify-between text-xs">
+                <span className="text-muted-foreground">CPU</span>
+                <span className="font-medium">{cpu.toFixed(0)}%</span>
+              </div>
+              <ServerUsageBar value={cpu} />
+            </div>
+            
+            {/* 内存使用率 */}
+            <div className="flex flex-col">
+              <div className="flex justify-between text-xs">
+                <span className="text-muted-foreground">{t("serverCard.mem")}</span>
+                <span className="font-medium">{mem.toFixed(0)}%</span>
+              </div>
+              <ServerUsageBar value={mem} />
+            </div>
+            
+            {/* 存储使用率 */}
+            <div className="flex flex-col">
+              <div className="flex justify-between text-xs">
+                <span className="text-muted-foreground">{t("serverCard.stg")}</span>
+                <span className="font-medium">{stg.toFixed(0)}%</span>
+              </div>
+              <ServerUsageBar value={stg} />
+            </div>
+            
+            {/* 网络上传 */}
+            <div className="flex flex-col">
+              <div className="flex justify-between text-xs">
+                <span className="text-muted-foreground">{t("serverCard.upload")}</span>
+                <span className="font-medium">{formatSpeed(up)}</span>
+              </div>
+              <div className="h-[3px] bg-muted mt-1 rounded-sm overflow-hidden">
+                <div 
+                  className="h-full bg-blue-500" 
+                  style={{ width: `${Math.min(up * 10, 100)}%` }}
+                />
+              </div>
+            </div>
+            
+            {/* 网络下载 */}
+            <div className="flex flex-col">
+              <div className="flex justify-between text-xs">
+                <span className="text-muted-foreground">{t("serverCard.download")}</span>
+                <span className="font-medium">{formatSpeed(down)}</span>
+              </div>
+              <div className="h-[3px] bg-muted mt-1 rounded-sm overflow-hidden">
+                <div 
+                  className="h-full bg-green-500" 
+                  style={{ width: `${Math.min(down * 10, 100)}%` }}
+                />
+              </div>
             </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` : down >= 1 ? `${down.toFixed(2)}M/s` : `${(down * 1024).toFixed(2)}K/s`}
-            </div>
-          </div>
-        </section>
+        </div>
         
         {/* 服务器详细信息区域 */}
         {showServerDetails && (
-          <section className="flex flex-col gap-2 w-full mt-1 bg-muted/30 p-2 rounded-md">
-            {/* 服务器配置信息 */}
-            <div className="flex flex-wrap items-center gap-2">
-              {/* 运行时间 */}
-              {uptime > 0 && (
-                <TooltipProvider>
-                  <Tooltip>
-                    <TooltipTrigger asChild>
-                      <Badge variant="outline" className="text-[10px] py-0 h-5">
-                        {t("serverCard.uptime")}: {formatUptime(uptime, t)}
-                      </Badge>
-                    </TooltipTrigger>
-                    <TooltipContent className="text-xs">
+          <div className="mt-3 flex flex-wrap gap-1.5">
+            {/* 运行时间 */}
+            {uptime > 0 && (
+              <TooltipProvider>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <Badge variant="outline" className="text-[10px] py-0 h-5">
                       {t("serverCard.uptime")}: {formatUptime(uptime, t)}
-                    </TooltipContent>
-                  </Tooltip>
-                </TooltipProvider>
-              )}
-              
-              {/* CPU信息 */}
-              {cpu_info && cpu_info.length > 0 && (
-                <TooltipProvider>
-                  <Tooltip>
-                    <TooltipTrigger asChild>
-                      <Badge variant="outline" className="text-[10px] py-0 h-5">
-                        {cpu_info[0].includes("Physical") ? "pCPU: " : "vCPU: "}
-                        {cpu_info[0].match(/(\d+)\s+(?:Physical|Virtual)\s+Core/)?.[1] || "?"}
-                      </Badge>
-                    </TooltipTrigger>
-                    <TooltipContent className="text-xs">
-                      {cpu_info.join(", ")}
-                    </TooltipContent>
-                  </Tooltip>
-                </TooltipProvider>
-              )}
-              
-              {/* 内存大小 */}
-              {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>
+                    </Badge>
+                  </TooltipTrigger>
+                  <TooltipContent className="text-xs">
+                    {t("serverCard.uptime")}: {formatUptime(uptime, t)}
+                  </TooltipContent>
+                </Tooltip>
+              </TooltipProvider>
             )}
-          </section>
+            
+            {/* CPU信息 */}
+            {cpu_info && cpu_info.length > 0 && (
+              <TooltipProvider>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <Badge variant="outline" className="text-[10px] py-0 h-5">
+                      {cpu_info[0].includes("Physical") ? "pCPU: " : "vCPU: "}
+                      {cpu_info[0].match(/(\d+)\s+(?:Physical|Virtual)\s+Core/)?.[1] || "?"}
+                    </Badge>
+                  </TooltipTrigger>
+                  <TooltipContent className="text-xs">
+                    {cpu_info.join(", ")}
+                  </TooltipContent>
+                </Tooltip>
+              </TooltipProvider>
+            )}
+            
+            {/* 内存大小 */}
+            {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>
+        )}
+      </CardContent>
+
+      <CardFooter className="p-4 pt-0 flex flex-col gap-2">
+        {/* 套餐信息 */}
+        {parsedData?.planDataMod && (
+          <div className="w-full">
+            <PlanInfo parsedData={parsedData} />
+          </div>
         )}
         
         {/* 网络传输信息 */}
         {showNetTransfer && (
-          <section className={"flex items-center w-full justify-between gap-2 mt-1"}>
+          <div className="grid grid-cols-2 w-full gap-2">
             <Badge
               variant="secondary"
-              className="items-center flex-1 justify-center rounded-[8px] text-[11px] border-muted-50 shadow-sm py-1.5"
+              className="flex justify-center items-center py-1 text-[10px]"
             >
               {t("serverCard.upload")}: {formatBytes(net_out_transfer)}
             </Badge>
             <Badge
               variant="outline"
-              className="items-center flex-1 justify-center rounded-[8px] text-[11px] shadow-sm py-1.5"
+              className="flex justify-center items-center py-1 text-[10px]"
             >
               {t("serverCard.download")}: {formatBytes(net_in_transfer)}
             </Badge>
-          </section>
-        )}
-      </div>
-    </Card>
-  ) : (
-    <Card
-      className={cn(
-        "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-[100px] min-h-[130px]" : "lg:min-h-[70px] min-h-[100px]",
-        {
-          "flex-col": fixedTopServerName,
-          "lg:flex-row": !fixedTopServerName,
-        },
-        {
-          "bg-card/70": customBackgroundImage,
-        },
-      )}
-      onClick={cardClick}
-    >
-      <section
-        className={cn("grid items-center gap-3", {
-          "lg:w-44": !fixedTopServerName,
-        })}
-        style={{ gridTemplateColumns: "auto auto 1fr" }}
-      >
-        <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-[20px]" : "min-w-0")}>
-          {showFlag ? <ServerFlag country_code={country_code} /> : null}
-        </div>
-        <div className="relative flex flex-col">
-          <p className={cn("break-all font-bold tracking-tight", showFlag ? "text-sm" : "text-base")}>{name}</p>
-          <div
-            className={cn("hidden lg:block", {
-              "lg:hidden": fixedTopServerName,
-            })}
-          >
-            {parsedData?.billingDataMod && <BillingInfo parsedData={parsedData} />}
           </div>
-        </div>
-      </section>
-      <div
-        className={cn("flex items-center gap-2 lg:hidden", {
-          "lg:flex": fixedTopServerName,
-        })}
-      >
-        {parsedData?.billingDataMod && <BillingInfo parsedData={parsedData} />}
-      </div>
-      {parsedData?.planDataMod && <PlanInfo parsedData={parsedData} />}
+        )}
+      </CardFooter>
     </Card>
   )
 }