From 7b5495997f32df43f372a6cfdd433f1e5234d88e Mon Sep 17 00:00:00 2001
From: wood chen <wood@czl.net>
Date: Mon, 10 Mar 2025 16:42:51 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E6=95=B4=E5=AE=BD=E5=BA=A6,=20?=
 =?UTF-8?q?=E8=B0=83=E6=95=B4tag?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Footer.tsx                     |   2 +-
 src/components/Header.tsx                     |   2 +-
 src/components/ServerCard.tsx                 | 117 +++++++++---------
 src/components/ServerCardInline.tsx           | 106 ++++++++--------
 .../loading/ServerDetailLoading.tsx           |   2 +-
 src/pages/Server.tsx                          |   2 +-
 src/pages/ServerDetail.tsx                    |   2 +-
 7 files changed, 119 insertions(+), 114 deletions(-)

diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index d1b8a3d..727b977 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -15,7 +15,7 @@ const Footer: React.FC = () => {
   })
 
   return (
-    <footer className="mx-auto w-full max-w-screen-xl px-4 lg:px-0 pb-4 server-footer">
+    <footer className="mx-auto w-full max-w-6xl px-4 lg:px-0 pb-4 server-footer">
       <section className="flex flex-col">
         <section className="mt-1 flex items-center sm:flex-row flex-col justify-between gap-2 text-[13px] font-light tracking-tight text-neutral-600/50 dark:text-neutral-300/50 server-footer-name">
           <div className="flex items-center gap-1">
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 6843fe9..4e2f254 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -76,7 +76,7 @@ function Header() {
   const customBackgroundImage = backgroundImage
 
   return (
-    <div className="mx-auto w-full max-w-screen-xl">
+    <div className="mx-auto w-full max-w-6xl">
       <section className="flex items-center justify-between header-top">
         <section
           onClick={() => {
diff --git a/src/components/ServerCard.tsx b/src/components/ServerCard.tsx
index f8e01a9..d02f89a 100644
--- a/src/components/ServerCard.tsx
+++ b/src/components/ServerCard.tsx
@@ -162,62 +162,66 @@ export default function ServerCard({ now, serverInfo }: { now: number; serverInf
           </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>
-                    <p className={cn("text-[9px] bg-blue-600 dark:bg-blue-800 text-blue-200 dark:text-blue-300 w-fit rounded-[5px] px-[3px] py-[1.5px]")}>
-                      {cpu_info[0].includes("Physical") ? "物理CPU: " : "vCPU: "}
-                      {cpu_info[0].match(/(\d+)\s+(?:Physical|Virtual)\s+Core/)?.[1] || "?"}
-                    </p>
-                  </TooltipTrigger>
-                  <TooltipContent className="text-xs">
-                    {cpu_info.join(", ")}
-                  </TooltipContent>
-                </Tooltip>
-              </TooltipProvider>
-            )}
-            
-            {mem_total > 0 && (
-              <p className={cn("text-[9px] bg-green-600 text-green-200 dark:bg-green-800 dark:text-green-300 w-fit rounded-[5px] px-[3px] py-[1.5px]")}>
-                {t("serverCard.mem")}: {formatBytes(mem_total)}
-              </p>
-            )}
-            
-            {disk_total > 0 && (
-              <p className={cn("text-[9px] bg-purple-600 text-purple-200 dark:bg-purple-800 dark:text-purple-300 w-fit rounded-[5px] px-[3px] py-[1.5px]")}>
-                {t("serverCard.stg")}: {formatBytes(disk_total)}
-              </p>
-            )}
-            
-            {tcp > 0 && (
-              <p className={cn("text-[9px] bg-pink-600 text-pink-200 dark:bg-pink-800 dark:text-pink-300 w-fit rounded-[5px] px-[3px] py-[1.5px]")}>
-                TCP: {tcp}
-              </p>
-            )}
-            
-            {udp > 0 && (
-              <p className={cn("text-[9px] bg-orange-600 text-orange-200 dark:bg-orange-800 dark:text-orange-300 w-fit rounded-[5px] px-[3px] py-[1.5px]")}>
-                UDP: {udp}
-              </p>
-            )}
-            
-            {process > 0 && (
-              <p className={cn("text-[9px] bg-yellow-600 text-yellow-200 dark:bg-yellow-800 dark:text-yellow-300 w-fit rounded-[5px] px-[3px] py-[1.5px]")}>
-                {t("serverDetailChart.process")}: {process}
-              </p>
-            )}
-            
-            {uptime > 0 && (
-              <p className={cn("text-[9px] bg-stone-600 text-stone-200 dark:bg-stone-800 dark:text-stone-300 w-fit rounded-[5px] px-[3px] py-[1.5px]")}>
-                {t("serverCard.uptime")}: {formatUptime(uptime)}
-              </p>
-            )}
-          </section>
-        )}
+        {/* 服务器详细信息标签和 PlanInfo */}
+        <section className="flex items-center gap-1.5 w-full mt-1">
+          {showServerDetails && (
+            <>
+              {cpu_info && cpu_info.length > 0 && (
+                <TooltipProvider>
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <p className={cn("text-[10px] text-muted-foreground")}>
+                        {cpu_info[0].includes("Physical") ? "物理CPU: " : "vCPU: "}
+                        {cpu_info[0].match(/(\d+)\s+(?:Physical|Virtual)\s+Core/)?.[1] || "?"}
+                      </p>
+                    </TooltipTrigger>
+                    <TooltipContent className="text-xs">
+                      {cpu_info.join(", ")}
+                    </TooltipContent>
+                  </Tooltip>
+                </TooltipProvider>
+              )}
+              
+              {mem_total > 0 && (
+                <p className={cn("text-[10px] text-muted-foreground")}>
+                  {t("serverCard.mem")}: {formatBytes(mem_total)}
+                </p>
+              )}
+              
+              {disk_total > 0 && (
+                <p className={cn("text-[10px] text-muted-foreground")}>
+                  {t("serverCard.stg")}: {formatBytes(disk_total)}
+                </p>
+              )}
+              
+              {tcp > 0 && (
+                <p className={cn("text-[10px] text-muted-foreground")}>
+                  TCP: {tcp}
+                </p>
+              )}
+              
+              {udp > 0 && (
+                <p className={cn("text-[10px] text-muted-foreground")}>
+                  UDP: {udp}
+                </p>
+              )}
+              
+              {process > 0 && (
+                <p className={cn("text-[10px] text-muted-foreground")}>
+                  {t("serverDetailChart.process")}: {process}
+                </p>
+              )}
+              
+              {uptime > 0 && (
+                <p className={cn("text-[10px] text-muted-foreground")}>
+                  {t("serverCard.uptime")}: {formatUptime(uptime)}
+                </p>
+              )}
+            </>
+          )}
+          
+          {parsedData?.planDataMod && <PlanInfo parsedData={parsedData} />}
+        </section>
         
         {showNetTransfer && (
           <section className={"flex items-center w-full justify-between gap-1"}>
@@ -235,7 +239,6 @@ export default function ServerCard({ now, serverInfo }: { now: number; serverInf
             </Badge>
           </section>
         )}
-        {parsedData?.planDataMod && <PlanInfo parsedData={parsedData} />}
       </div>
     </Card>
   ) : (
diff --git a/src/components/ServerCardInline.tsx b/src/components/ServerCardInline.tsx
index bc2b26c..de88fec 100644
--- a/src/components/ServerCardInline.tsx
+++ b/src/components/ServerCardInline.tsx
@@ -137,58 +137,60 @@ export default function ServerCardInline({ now, serverInfo }: { now: number; ser
             </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>
-                      <p className={cn("text-[9px] bg-blue-600 dark:bg-blue-800 text-blue-200 dark:text-blue-300 w-fit rounded-[5px] px-[3px] py-[1.5px]")}>
-                        {cpu_info[0].includes("Physical") ? "物理CPU: " : "vCPU: "}
-                        {cpu_info[0].match(/(\d+)\s+(?:Physical|Virtual)\s+Core/)?.[1] || "?"}
-                      </p>
-                    </TooltipTrigger>
-                    <TooltipContent className="text-xs">
-                      {cpu_info.join(", ")}
-                    </TooltipContent>
-                  </Tooltip>
-                </TooltipProvider>
-              )}
-              
-              {mem_total > 0 && (
-                <p className={cn("text-[9px] bg-green-600 text-green-200 dark:bg-green-800 dark:text-green-300 w-fit rounded-[5px] px-[3px] py-[1.5px]")}>
-                  {t("serverCard.mem")}: {formatBytes(mem_total)}
-                </p>
-              )}
-              
-              {disk_total > 0 && (
-                <p className={cn("text-[9px] bg-purple-600 text-purple-200 dark:bg-purple-800 dark:text-purple-300 w-fit rounded-[5px] px-[3px] py-[1.5px]")}>
-                  {t("serverCard.stg")}: {formatBytes(disk_total)}
-                </p>
-              )}
-              
-              {tcp > 0 && (
-                <p className={cn("text-[9px] bg-pink-600 text-pink-200 dark:bg-pink-800 dark:text-pink-300 w-fit rounded-[5px] px-[3px] py-[1.5px]")}>
-                  TCP: {tcp}
-                </p>
-              )}
-              
-              {udp > 0 && (
-                <p className={cn("text-[9px] bg-orange-600 text-orange-200 dark:bg-orange-800 dark:text-orange-300 w-fit rounded-[5px] px-[3px] py-[1.5px]")}>
-                  UDP: {udp}
-                </p>
-              )}
-              
-              {process > 0 && (
-                <p className={cn("text-[9px] bg-yellow-600 text-yellow-200 dark:bg-yellow-800 dark:text-yellow-300 w-fit rounded-[5px] px-[3px] py-[1.5px]")}>
-                  {t("serverDetailChart.process")}: {process}
-                </p>
-              )}
-            </section>
-          )}
-          
-          {parsedData?.planDataMod && <PlanInfo parsedData={parsedData} />}
+          {/* 服务器详细信息标签和 PlanInfo */}
+          <section className="flex items-center gap-1.5 w-full mt-1">
+            {showServerDetails && (
+              <>
+                {cpu_info && cpu_info.length > 0 && (
+                  <TooltipProvider>
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        <p className={cn("text-[10px] text-muted-foreground")}>
+                          {cpu_info[0].includes("Physical") ? "物理CPU: " : "vCPU: "}
+                          {cpu_info[0].match(/(\d+)\s+(?:Physical|Virtual)\s+Core/)?.[1] || "?"}
+                        </p>
+                      </TooltipTrigger>
+                      <TooltipContent className="text-xs">
+                        {cpu_info.join(", ")}
+                      </TooltipContent>
+                    </Tooltip>
+                  </TooltipProvider>
+                )}
+                
+                {mem_total > 0 && (
+                  <p className={cn("text-[10px] text-muted-foreground")}>
+                    {t("serverCard.mem")}: {formatBytes(mem_total)}
+                  </p>
+                )}
+                
+                {disk_total > 0 && (
+                  <p className={cn("text-[10px] text-muted-foreground")}>
+                    {t("serverCard.stg")}: {formatBytes(disk_total)}
+                  </p>
+                )}
+                
+                {tcp > 0 && (
+                  <p className={cn("text-[10px] text-muted-foreground")}>
+                    TCP: {tcp}
+                  </p>
+                )}
+                
+                {udp > 0 && (
+                  <p className={cn("text-[10px] text-muted-foreground")}>
+                    UDP: {udp}
+                  </p>
+                )}
+                
+                {process > 0 && (
+                  <p className={cn("text-[10px] text-muted-foreground")}>
+                    {t("serverDetailChart.process")}: {process}
+                  </p>
+                )}
+              </>
+            )}
+            
+            {parsedData?.planDataMod && <PlanInfo parsedData={parsedData} />}
+          </section>
         </div>
       </Card>
     </section>
diff --git a/src/components/loading/ServerDetailLoading.tsx b/src/components/loading/ServerDetailLoading.tsx
index 89ac39f..bdfd6b4 100644
--- a/src/components/loading/ServerDetailLoading.tsx
+++ b/src/components/loading/ServerDetailLoading.tsx
@@ -22,7 +22,7 @@ export function ServerDetailLoading() {
   const navigate = useNavigate()
 
   return (
-    <div className="mx-auto w-full max-w-screen-xl px-0">
+    <div className="mx-auto w-full max-w-6xl px-0">
       <div
         onClick={() => {
           navigate("/")
diff --git a/src/pages/Server.tsx b/src/pages/Server.tsx
index 0d1b32d..f15c11d 100644
--- a/src/pages/Server.tsx
+++ b/src/pages/Server.tsx
@@ -211,7 +211,7 @@ export default function Servers() {
   })
 
   return (
-    <div className="mx-auto w-full max-w-screen-xl px-0">
+    <div className="mx-auto w-full max-w-6xl px-0">
       <ServerOverview
         total={totalServers}
         online={onlineServers}
diff --git a/src/pages/ServerDetail.tsx b/src/pages/ServerDetail.tsx
index ab516a3..28057ad 100644
--- a/src/pages/ServerDetail.tsx
+++ b/src/pages/ServerDetail.tsx
@@ -24,7 +24,7 @@ export default function ServerDetail() {
   }
 
   return (
-    <div className="mx-auto w-full max-w-screen-xl px-0 flex flex-col gap-4 server-info">
+    <div className="mx-auto w-full max-w-6xl px-0 flex flex-col gap-4 server-info">
       <ServerDetailOverview server_id={server_id} />
       <section className="flex items-center my-2 w-full">
         <Separator className="flex-1" />