更新 ServerCard 组件，重构样式和布局，增强网络速度显示，优化服务器详细信息展示，移除不必要的代码，提升可读性和维护性。

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,118 +64,148 @@ export default function ServerCard({ now, serverInfo }: { now: number; serverInf
     }
   }
 
-  return online ? (
+  // 格式化网络速度
+  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(
-        "flex flex-col items-center justify-start gap-4 p-4 md:px-6 cursor-pointer hover:bg-accent/50 transition-colors",
+          "cursor-pointer hover:bg-accent/50 transition-colors border-red-300/30 dark:border-red-900/30",
-        {
+          { "bg-card/70": customBackgroundImage }
-          "flex-col": fixedTopServerName,
-          "lg:flex-row": !fixedTopServerName,
-        },
-        {
-          "bg-card/70": customBackgroundImage,
-        },
         )}
         onClick={cardClick}
       >
-      {/* 服务器名称和标识区域 */}
+        <CardContent className="p-4">
-      <section
+          <div className="flex items-center gap-3 mb-2">
-        className={cn("grid items-center gap-3", {
+            <span className="h-3 w-3 shrink-0 rounded-full bg-red-500 shadow-sm shadow-red-300 dark:shadow-red-900"></span>
-          "lg:w-44": !fixedTopServerName,
+            {showFlag && <ServerFlag country_code={country_code} />}
-        })}
+            <h3 className="font-bold text-sm truncate flex-1">{name}</h3>
-        style={{ gridTemplateColumns: "auto auto 1fr" }}
-      >
-        <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} />}
-          </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">
+          {parsedData?.billingDataMod && (
-        {/* 系统和资源使用情况 */}
+            <div className="mt-2">
-        <section
+              <BillingInfo parsedData={parsedData} />
-          className={cn("grid grid-cols-5 items-center gap-4", {
+            </div>
-            "lg:grid-cols-6 lg:gap-5": fixedTopServerName,
+          )}
-          })}
+          
+          {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}
     >
-          {fixedTopServerName && (
+      <CardHeader className="p-4 pb-2">
-            <div className={"hidden col-span-1 items-center lg:flex lg:flex-row gap-2"}>
+        <div className="flex items-center gap-3">
-              <div className="text-xs font-semibold">
+          <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>
-              <div className={"flex w-16 flex-col"}>
+            <span className="text-muted-foreground">
-                <p className="text-xs text-muted-foreground">{t("serverCard.system")}</p>
+              {platform.includes("Windows") ? "Windows" : GetOsName(platform)}
-                <div className="flex items-center text-[11px] font-semibold">{platform.includes("Windows") ? "Windows" : GetOsName(platform)}</div>
+            </span>
           </div>
-            </div>
-          )}
           
+          {/* 资源使用情况 */}
+          <div className="col-span-5 grid grid-cols-5 gap-3">
             {/* CPU使用率 */}
-          <div className={"flex w-16 flex-col"}>
+            <div className="flex flex-col">
-            <p className="text-xs text-muted-foreground">{"CPU"}</p>
+              <div className="flex justify-between text-xs">
-            <div className="flex items-center text-xs font-semibold">{cpu.toFixed(2)}%</div>
+                <span className="text-muted-foreground">CPU</span>
+                <span className="font-medium">{cpu.toFixed(0)}%</span>
+              </div>
               <ServerUsageBar value={cpu} />
             </div>
             
             {/* 内存使用率 */}
-          <div className={"flex w-16 flex-col"}>
+            <div className="flex flex-col">
-            <p className="text-xs text-muted-foreground">{t("serverCard.mem")}</p>
+              <div className="flex justify-between text-xs">
-            <div className="flex items-center text-xs font-semibold">{mem.toFixed(2)}%</div>
+                <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 w-16 flex-col"}>
+            <div className="flex flex-col">
-            <p className="text-xs text-muted-foreground">{t("serverCard.stg")}</p>
+              <div className="flex justify-between text-xs">
-            <div className="flex items-center text-xs font-semibold">{stg.toFixed(2)}%</div>
+                <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 w-16 flex-col"}>
+            <div className="flex flex-col">
-            <p className="text-xs text-muted-foreground">{t("serverCard.upload")}</p>
+              <div className="flex justify-between text-xs">
-            <div className="flex items-center text-xs font-semibold">
+                <span className="text-muted-foreground">{t("serverCard.upload")}</span>
-              {up >= 1024 ? `${(up / 1024).toFixed(2)}G/s` : up >= 1 ? `${up.toFixed(2)}M/s` : `${(up * 1024).toFixed(2)}K/s`}
+                <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 w-16 flex-col"}>
+            <div className="flex flex-col">
-            <p className="text-xs text-muted-foreground">{t("serverCard.download")}</p>
+              <div className="flex justify-between text-xs">
-            <div className="flex items-center text-xs font-semibold">
+                <span className="text-muted-foreground">{t("serverCard.download")}</span>
-              {down >= 1024 ? `${(down / 1024).toFixed(2)}G/s` : down >= 1 ? `${down.toFixed(2)}M/s` : `${(down * 1024).toFixed(2)}K/s`}
+                <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>
-        </section>
         
         {/* 服务器详细信息区域 */}
         {showServerDetails && (
-          <section className="flex flex-col gap-2 w-full mt-1 bg-muted/30 p-2 rounded-md">
+          <div className="mt-3 flex flex-wrap gap-1.5">
-            {/* 服务器配置信息 */}
-            <div className="flex flex-wrap items-center gap-2">
             {/* 运行时间 */}
             {uptime > 0 && (
               <TooltipProvider>
@@ -250,79 +274,35 @@ export default function ServerCard({ now, serverInfo }: { now: number; serverInf
               </Badge>
             )}
           </div>
+        )}
+      </CardContent>
 
+      <CardFooter className="p-4 pt-0 flex flex-col gap-2">
         {/* 套餐信息 */}
         {parsedData?.planDataMod && (
-              <div className="flex justify-end">
+          <div className="w-full">
             <PlanInfo parsedData={parsedData} />
           </div>
         )}
-          </section>
-        )}
         
         {/* 网络传输信息 */}
         {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>
         )}
-      </div>
+      </CardFooter>
-    </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} />}
     </Card>
   )
 }