From 3a2b43d584250a225bd7e128c1c2e1e6ec5c4811 Mon Sep 17 00:00:00 2001
From: wood chen <wood@czl.net>
Date: Mon, 10 Mar 2025 16:23:19 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E6=9C=8D=E5=8A=A1?=
 =?UTF-8?q?=E5=99=A8=E8=AF=A6=E7=BB=86=E4=BF=A1=E6=81=AF=E5=B1=95=E7=A4=BA?=
 =?UTF-8?q?=E5=BC=80=E5=85=B3=E5=92=8C=E6=9B=B4=E5=A4=9A=E6=9C=8D=E5=8A=A1?=
 =?UTF-8?q?=E5=99=A8=E4=BF=A1=E6=81=AF=E6=A0=87=E7=AD=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html                          |  3 +
 src/components/ServerCard.tsx       | 93 ++++++++++++++++++++++++++++-
 src/components/ServerCardInline.tsx | 79 +++++++++++++++++++++++-
 src/locales/zh-CN/translation.json  |  7 ++-
 4 files changed, 179 insertions(+), 3 deletions(-)

diff --git a/index.html b/index.html
index 110da85..c635c2d 100644
--- a/index.html
+++ b/index.html
@@ -13,6 +13,9 @@
       } catch (e) {
         document.documentElement.classList.add("light")
       }
+      
+      // 全局配置变量
+      window.ShowServerDetails = true; // 是否显示服务器详细信息
     </script>
     <style>
       /* Prevent FOUC in Safari */
diff --git a/src/components/ServerCard.tsx b/src/components/ServerCard.tsx
index 4a8c961..4814936 100644
--- a/src/components/ServerCard.tsx
+++ b/src/components/ServerCard.tsx
@@ -11,11 +11,32 @@ import PlanInfo from "./PlanInfo"
 import BillingInfo from "./billingInfo"
 import { Badge } from "./ui/badge"
 import { Card } from "./ui/card"
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./ui/tooltip"
 
 export default function ServerCard({ now, serverInfo }: { now: number; serverInfo: NezhaServer }) {
   const { t } = useTranslation()
   const navigate = useNavigate()
-  const { name, country_code, online, cpu, up, down, mem, stg, net_in_transfer, net_out_transfer, public_note, platform } = formatNezhaInfo(
+  const { 
+    name, 
+    country_code, 
+    online, 
+    cpu, 
+    up, 
+    down, 
+    mem, 
+    stg, 
+    net_in_transfer, 
+    net_out_transfer, 
+    public_note, 
+    platform,
+    cpu_info,
+    mem_total,
+    disk_total,
+    tcp,
+    udp,
+    process,
+    uptime
+  } = formatNezhaInfo(
     now,
     serverInfo,
   )
@@ -35,8 +56,20 @@ export default function ServerCard({ now, serverInfo }: { now: number; serverInf
   // @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
+
   const parsedData = parsePublicNote(public_note)
 
+  // 格式化运行时间
+  const formatUptime = (seconds: number) => {
+    if (seconds >= 86400) {
+      return `${Math.floor(seconds / 86400)} ${t("serverCard.days")}`
+    } else {
+      return `${Math.floor(seconds / 3600)} ${t("serverCard.hours")}`
+    }
+  }
+
   return online ? (
     <Card
       className={cn(
@@ -128,6 +161,64 @@ export default function ServerCard({ now, serverInfo }: { now: number; serverInf
             </div>
           </div>
         </section>
+        
+        {/* 服务器详细信息标签 */}
+        {showServerDetails && (
+          <section className="flex flex-wrap items-center gap-1 w-full mt-1">
+            {cpu_info && cpu_info.length > 0 && (
+              <TooltipProvider>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <Badge variant="outline" className="text-[10px] py-0 px-1.5 h-5">
+                      {cpu_info[0].includes("Virtual") ? "vCPU: " : "CPU: "}
+                      {cpu_info[0].match(/(\d+)\s+(?: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 px-1.5 h-5">
+                {t("serverCard.mem")}: {formatBytes(mem_total)}
+              </Badge>
+            )}
+            
+            {disk_total > 0 && (
+              <Badge variant="outline" className="text-[10px] py-0 px-1.5 h-5">
+                {t("serverCard.stg")}: {formatBytes(disk_total)}
+              </Badge>
+            )}
+            
+            {tcp > 0 && (
+              <Badge variant="outline" className="text-[10px] py-0 px-1.5 h-5">
+                TCP: {tcp}
+              </Badge>
+            )}
+            
+            {udp > 0 && (
+              <Badge variant="outline" className="text-[10px] py-0 px-1.5 h-5">
+                UDP: {udp}
+              </Badge>
+            )}
+            
+            {process > 0 && (
+              <Badge variant="outline" className="text-[10px] py-0 px-1.5 h-5">
+                {t("serverDetailChart.process")}: {process}
+              </Badge>
+            )}
+            
+            {uptime > 0 && (
+              <Badge variant="outline" className="text-[10px] py-0 px-1.5 h-5">
+                {t("serverCard.uptime")}: {formatUptime(uptime)}
+              </Badge>
+            )}
+          </section>
+        )}
+        
         {showNetTransfer && (
           <section className={"flex items-center w-full justify-between gap-1"}>
             <Badge
diff --git a/src/components/ServerCardInline.tsx b/src/components/ServerCardInline.tsx
index 6b8cd5b..c0b7564 100644
--- a/src/components/ServerCardInline.tsx
+++ b/src/components/ServerCardInline.tsx
@@ -9,13 +9,35 @@ 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 { Separator } from "./ui/separator"
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./ui/tooltip"
 
 export default function ServerCardInline({ now, serverInfo }: { now: number; serverInfo: NezhaServer }) {
   const { t } = useTranslation()
   const navigate = useNavigate()
-  const { name, country_code, online, cpu, up, down, mem, stg, platform, uptime, net_in_transfer, net_out_transfer, public_note } = formatNezhaInfo(
+  const { 
+    name, 
+    country_code, 
+    online, 
+    cpu, 
+    up, 
+    down, 
+    mem, 
+    stg, 
+    platform, 
+    uptime, 
+    net_in_transfer, 
+    net_out_transfer, 
+    public_note,
+    cpu_info,
+    mem_total,
+    disk_total,
+    tcp,
+    udp,
+    process
+  } = formatNezhaInfo(
     now,
     serverInfo,
   )
@@ -29,6 +51,9 @@ export default function ServerCardInline({ now, serverInfo }: { now: number; ser
 
   const customBackgroundImage = (window.CustomBackgroundImage as string) !== "" ? window.CustomBackgroundImage : undefined
 
+  // @ts-expect-error ShowServerDetails is a global variable
+  const showServerDetails = window.ShowServerDetails !== undefined ? window.ShowServerDetails as boolean : true
+
   const parsedData = parsePublicNote(public_note)
 
   return online ? (
@@ -112,6 +137,58 @@ export default function ServerCardInline({ now, serverInfo }: { now: number; ser
               <div className="flex items-center text-xs font-semibold">{formatBytes(net_in_transfer)}</div>
             </div>
           </section>
+          
+          {/* 服务器详细信息标签 */}
+          {showServerDetails && (
+            <section className="flex flex-wrap items-center gap-1 w-full mt-1">
+              {cpu_info && cpu_info.length > 0 && (
+                <TooltipProvider>
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <Badge variant="outline" className="text-[10px] py-0 px-1.5 h-5">
+                        {cpu_info[0].includes("Virtual") ? "vCPU: " : "CPU: "}
+                        {cpu_info[0].match(/(\d+)\s+(?: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 px-1.5 h-5">
+                  {t("serverCard.mem")}: {formatBytes(mem_total)}
+                </Badge>
+              )}
+              
+              {disk_total > 0 && (
+                <Badge variant="outline" className="text-[10px] py-0 px-1.5 h-5">
+                  {t("serverCard.stg")}: {formatBytes(disk_total)}
+                </Badge>
+              )}
+              
+              {tcp > 0 && (
+                <Badge variant="outline" className="text-[10px] py-0 px-1.5 h-5">
+                  TCP: {tcp}
+                </Badge>
+              )}
+              
+              {udp > 0 && (
+                <Badge variant="outline" className="text-[10px] py-0 px-1.5 h-5">
+                  UDP: {udp}
+                </Badge>
+              )}
+              
+              {process > 0 && (
+                <Badge variant="outline" className="text-[10px] py-0 px-1.5 h-5">
+                  {t("serverDetailChart.process")}: {process}
+                </Badge>
+              )}
+            </section>
+          )}
+          
           {parsedData?.planDataMod && <PlanInfo parsedData={parsedData} />}
         </div>
       </Card>
diff --git a/src/locales/zh-CN/translation.json b/src/locales/zh-CN/translation.json
index 9deebaf..ed3fd3a 100644
--- a/src/locales/zh-CN/translation.json
+++ b/src/locales/zh-CN/translation.json
@@ -36,7 +36,12 @@
     "system": "系统",
     "uptime": "运行时间",
     "totalUpload": "总上传",
-    "totalDownload": "总下载"
+    "totalDownload": "总下载",
+    "cpu": "处理器",
+    "vcpu": "虚拟核心",
+    "tcp": "TCP连接",
+    "udp": "UDP连接",
+    "process": "进程数"
   },
   "cycleTransfer": {
     "used": "已使用",