From f04c220570501b57b46f1d3a9416773182ac8729 Mon Sep 17 00:00:00 2001
From: wood chen <wood@czl.net>
Date: Mon, 10 Mar 2025 16:34:30 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E6=9B=B4=E6=96=B0=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E5=B8=83=E5=B1=80=E5=92=8C=E6=9C=8D=E5=8A=A1=E5=99=A8?=
 =?UTF-8?q?=E5=8D=A1=E7=89=87=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 将最大宽度从 max-w-5xl 调整为 max-w-screen-xl
- 替换 Badge 组件为自定义样式的 p 标签
- 调整服务器卡片标签的颜色和样式
- 移除 Inter 字体，使用系统默认字体
---
 src/components/Footer.tsx                     |  2 +-
 src/components/Header.tsx                     |  8 ++---
 src/components/ServerCard.tsx                 | 32 +++++++++----------
 src/components/ServerCardInline.tsx           | 29 ++++++++---------
 .../loading/ServerDetailLoading.tsx           |  2 +-
 src/index.css                                 |  2 +-
 src/pages/Server.tsx                          |  2 +-
 src/pages/ServerDetail.tsx                    |  2 +-
 8 files changed, 39 insertions(+), 40 deletions(-)

diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index 29ad239..d1b8a3d 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-5xl px-4 lg:px-0 pb-4 server-footer">
+    <footer className="mx-auto w-full max-w-screen-xl 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 9b140b4..6843fe9 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-5xl">
+    <div className="mx-auto w-full max-w-screen-xl">
       <section className="flex items-center justify-between header-top">
         <section
           onClick={() => {
@@ -212,7 +212,7 @@ export function RefreshToast() {
 }
 
 function DashboardLink() {
-  const { t } = useTranslation()
+  // const { t } = useTranslation()
   const { setNeedReconnect } = useWebSocketContext()
   const previousLoginState = useRef<boolean | null>(null)
   const {
@@ -253,14 +253,14 @@ function DashboardLink() {
 
   return (
     <div className="flex items-center gap-2">
-      <a
+      {/* <a
         href={"/dashboard"}
         rel="noopener noreferrer"
         className="flex items-center text-nowrap gap-1 text-sm font-medium opacity-50 transition-opacity hover:opacity-100"
       >
         {!isLogin && t("login")}
         {isLogin && t("dashboard")}
-      </a>
+      </a> */}
     </div>
   )
 }
diff --git a/src/components/ServerCard.tsx b/src/components/ServerCard.tsx
index 4814936..f8e01a9 100644
--- a/src/components/ServerCard.tsx
+++ b/src/components/ServerCard.tsx
@@ -169,10 +169,10 @@ export default function ServerCard({ now, serverInfo }: { now: number; serverInf
               <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>
+                    <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(", ")}
@@ -182,39 +182,39 @@ export default function ServerCard({ now, serverInfo }: { now: number; serverInf
             )}
             
             {mem_total > 0 && (
-              <Badge variant="outline" className="text-[10px] py-0 px-1.5 h-5">
+              <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)}
-              </Badge>
+              </p>
             )}
             
             {disk_total > 0 && (
-              <Badge variant="outline" className="text-[10px] py-0 px-1.5 h-5">
+              <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)}
-              </Badge>
+              </p>
             )}
             
             {tcp > 0 && (
-              <Badge variant="outline" className="text-[10px] py-0 px-1.5 h-5">
+              <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}
-              </Badge>
+              </p>
             )}
             
             {udp > 0 && (
-              <Badge variant="outline" className="text-[10px] py-0 px-1.5 h-5">
+              <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}
-              </Badge>
+              </p>
             )}
             
             {process > 0 && (
-              <Badge variant="outline" className="text-[10px] py-0 px-1.5 h-5">
+              <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}
-              </Badge>
+              </p>
             )}
             
             {uptime > 0 && (
-              <Badge variant="outline" className="text-[10px] py-0 px-1.5 h-5">
+              <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)}
-              </Badge>
+              </p>
             )}
           </section>
         )}
diff --git a/src/components/ServerCardInline.tsx b/src/components/ServerCardInline.tsx
index c0b7564..bc2b26c 100644
--- a/src/components/ServerCardInline.tsx
+++ b/src/components/ServerCardInline.tsx
@@ -9,7 +9,6 @@ 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"
@@ -145,10 +144,10 @@ export default function ServerCardInline({ now, serverInfo }: { now: number; ser
                 <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>
+                      <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(", ")}
@@ -158,33 +157,33 @@ export default function ServerCardInline({ now, serverInfo }: { now: number; ser
               )}
               
               {mem_total > 0 && (
-                <Badge variant="outline" className="text-[10px] py-0 px-1.5 h-5">
+                <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)}
-                </Badge>
+                </p>
               )}
               
               {disk_total > 0 && (
-                <Badge variant="outline" className="text-[10px] py-0 px-1.5 h-5">
+                <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)}
-                </Badge>
+                </p>
               )}
               
               {tcp > 0 && (
-                <Badge variant="outline" className="text-[10px] py-0 px-1.5 h-5">
+                <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}
-                </Badge>
+                </p>
               )}
               
               {udp > 0 && (
-                <Badge variant="outline" className="text-[10px] py-0 px-1.5 h-5">
+                <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}
-                </Badge>
+                </p>
               )}
               
               {process > 0 && (
-                <Badge variant="outline" className="text-[10px] py-0 px-1.5 h-5">
+                <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}
-                </Badge>
+                </p>
               )}
             </section>
           )}
diff --git a/src/components/loading/ServerDetailLoading.tsx b/src/components/loading/ServerDetailLoading.tsx
index 0f0e77f..89ac39f 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-5xl px-0">
+    <div className="mx-auto w-full max-w-screen-xl px-0">
       <div
         onClick={() => {
           navigate("/")
diff --git a/src/index.css b/src/index.css
index 8e36c62..a4b14f7 100644
--- a/src/index.css
+++ b/src/index.css
@@ -3,7 +3,7 @@
 @tailwind utilities;
 
 :root {
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
   line-height: 1.5;
   font-weight: 400;
 
diff --git a/src/pages/Server.tsx b/src/pages/Server.tsx
index cc77b93..0d1b32d 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-5xl px-0">
+    <div className="mx-auto w-full max-w-screen-xl px-0">
       <ServerOverview
         total={totalServers}
         online={onlineServers}
diff --git a/src/pages/ServerDetail.tsx b/src/pages/ServerDetail.tsx
index 20dca88..ab516a3 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-5xl px-0 flex flex-col gap-4 server-info">
+    <div className="mx-auto w-full max-w-screen-xl 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" />