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

.cert/cert.pem

@@ -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-----

.cert/key.pem

@@ -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-----

src/components/ServerCard.tsx

@@ -73,7 +73,7 @@ export default function ServerCard({ now, serverInfo }: { now: number; serverInf
   return online ? (
     <Card
       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,
           "lg:flex-row": !fixedTopServerName,
@@ -84,18 +84,19 @@ export default function ServerCard({ now, serverInfo }: { now: number; serverInf
       )}
       onClick={cardClick}
     >
+      {/* 服务器名称和标识区域 */}
       <section
-        className={cn("grid items-center gap-2", {
-          "lg:w-40": !fixedTopServerName,
+        className={cn("grid items-center gap-3", {
+          "lg:w-44": !fixedTopServerName,
         })}
         style={{ gridTemplateColumns: "auto auto 1fr" }}
       >
-        <span className="h-2 w-2 shrink-0 rounded-full bg-green-500 self-center"></span>
-        <div className={cn("flex items-center justify-center", showFlag ? "min-w-[17px]" : "min-w-0")}>
+        <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-xs " : "text-sm")}>{name}</p>
+          <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,
@@ -105,6 +106,8 @@ export default function ServerCard({ now, serverInfo }: { now: number; serverInf
           </div>
         </div>
       </section>
+      
+      {/* 计费信息移动端展示 */}
       <div
         className={cn("flex items-center gap-2 -mt-2 lg:hidden", {
           "lg:flex": fixedTopServerName,
@@ -112,49 +115,61 @@ export default function ServerCard({ now, serverInfo }: { now: number; serverInf
       >
         {parsedData?.billingDataMod && <BillingInfo parsedData={parsedData} />}
       </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
-          className={cn("grid grid-cols-5 items-center gap-3", {
-            "lg:grid-cols-6 lg:gap-4": fixedTopServerName,
+          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-[10px]" />
+                  <MageMicrosoftWindows className="size-[12px]" />
                 ) : (
                   <p className={`fl-${GetFontLogoClass(platform)}`} />
                 )}
               </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>
-                <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 className={"flex w-14 flex-col"}>
+          
+          {/* 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} />
           </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>
             <div className="flex items-center text-xs font-semibold">{mem.toFixed(2)}%</div>
             <ServerUsageBar value={mem} />
           </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>
             <div className="flex items-center text-xs font-semibold">{stg.toFixed(2)}%</div>
             <ServerUsageBar value={stg} />
           </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>
             <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>
           </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>
             <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`}
@@ -162,26 +177,36 @@ export default function ServerCard({ now, serverInfo }: { now: number; serverInf
           </div>
         </section>
         
-        {/* 服务器详细信息标签和 PlanInfo */}
-        <section className="flex flex-col gap-1 w-full mt-1">
+        {/* 服务器详细信息区域 */}
         {showServerDetails && (
-            <>
-              {/* 第一行：运行时间、CPU、内存、硬盘 */}
-              <div className="flex items-center gap-1.5">
+          <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 && (
-                  <p className={cn("text-[10px] text-muted-foreground")}>
+                <TooltipProvider>
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <Badge variant="outline" className="text-[10px] py-0 h-5">
                         {t("serverCard.uptime")}: {formatUptime(uptime, t)}
-                  </p>
+                      </Badge>
+                    </TooltipTrigger>
+                    <TooltipContent className="text-xs">
+                      {t("serverCard.uptime")}: {formatUptime(uptime, t)}
+                    </TooltipContent>
+                  </Tooltip>
+                </TooltipProvider>
               )}
               
+              {/* CPU信息 */}
               {cpu_info && cpu_info.length > 0 && (
                 <TooltipProvider>
                   <Tooltip>
                     <TooltipTrigger asChild>
-                        <p className={cn("text-[10px] text-muted-foreground")}>
+                      <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] || "?"}
-                        </p>
+                      </Badge>
                     </TooltipTrigger>
                     <TooltipContent className="text-xs">
                       {cpu_info.join(", ")}
@@ -190,60 +215,65 @@ export default function ServerCard({ now, serverInfo }: { now: number; serverInf
                 </TooltipProvider>
               )}
               
+              {/* 内存大小 */}
               {mem_total > 0 && (
-                  <p className={cn("text-[10px] text-muted-foreground")}>
+                <Badge variant="outline" className="text-[10px] py-0 h-5">
                   {t("serverCard.mem")}: {formatBytes(mem_total)}
-                  </p>
+                </Badge>
               )}
               
+              {/* 存储大小 */}
               {disk_total > 0 && (
-                  <p className={cn("text-[10px] text-muted-foreground")}>
+                <Badge variant="outline" className="text-[10px] py-0 h-5">
                   {t("serverCard.stg")}: {formatBytes(disk_total)}
-                  </p>
+                </Badge>
               )}
-              </div>
               
-              {/* 第二行：TCP、UDP、进程数，以及 PlanInfo */}
-              <div className="flex items-center justify-between">
-                <div className="flex items-center gap-1.5">
+              {/* TCP连接数 */}
               {tcp > 0 && (
-                    <p className={cn("text-[10px] text-muted-foreground")}>
+                <Badge variant="outline" className="text-[10px] py-0 h-5">
                   TCP: {tcp}
-                    </p>
+                </Badge>
               )}
               
+              {/* UDP连接数 */}
               {udp > 0 && (
-                    <p className={cn("text-[10px] text-muted-foreground")}>
+                <Badge variant="outline" className="text-[10px] py-0 h-5">
                   UDP: {udp}
-                    </p>
+                </Badge>
               )}
               
+              {/* 进程数 */}
               {process > 0 && (
-                    <p className={cn("text-[10px] text-muted-foreground")}>
+                <Badge variant="outline" className="text-[10px] py-0 h-5">
                   {t("serverDetailChart.process")}: {process}
-                    </p>
+                </Badge>
               )}
             </div>
             
-                {parsedData?.planDataMod && <PlanInfo parsedData={parsedData} />}
+            {/* 套餐信息 */}
+            {parsedData?.planDataMod && (
+              <div className="flex justify-end">
+                <PlanInfo parsedData={parsedData} />
               </div>
-            </>
             )}
           </section>
+        )}
         
+        {/* 网络传输信息 */}
         {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
               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
               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>
           </section>
         )}
@@ -252,8 +282,8 @@ export default function ServerCard({ now, serverInfo }: { now: number; serverInf
   ) : (
     <Card
       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",
-        showNetTransfer ? "lg:min-h-[91px] min-h-[123px]" : "lg:min-h-[61px] min-h-[93px]",
+        "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,
@@ -265,17 +295,17 @@ export default function ServerCard({ now, serverInfo }: { now: number; serverInf
       onClick={cardClick}
     >
       <section
-        className={cn("grid items-center gap-2", {
-          "lg:w-40": !fixedTopServerName,
+        className={cn("grid items-center gap-3", {
+          "lg:w-44": !fixedTopServerName,
         })}
         style={{ gridTemplateColumns: "auto auto 1fr" }}
       >
-        <span className="h-2 w-2 shrink-0 rounded-full bg-red-500 self-center"></span>
-        <div className={cn("flex items-center justify-center", showFlag ? "min-w-[17px]" : "min-w-0")}>
+        <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 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
             className={cn("hidden lg:block", {
               "lg:hidden": fixedTopServerName,

vite.config.ts

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