feat: 添加服务器详细信息展示开关和更多服务器信息标签

index.html

@@ -13,6 +13,9 @@
       } catch (e) {
         document.documentElement.classList.add("light")
       }
+      
+      // 全局配置变量
+      window.ShowServerDetails = true; // 是否显示服务器详细信息
     </script>
     <style>
       /* Prevent FOUC in Safari */

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

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>

src/locales/zh-CN/translation.json

@@ -36,7 +36,12 @@
     "system": "系统",
     "uptime": "运行时间",
     "totalUpload": "总上传",
-    "totalDownload": "总下载"
+    "totalDownload": "总下载",
+    "cpu": "处理器",
+    "vcpu": "虚拟核心",
+    "tcp": "TCP连接",
+    "udp": "UDP连接",
+    "process": "进程数"
   },
   "cycleTransfer": {
     "used": "已使用",