refactor: 更新页面布局和服务器卡片样式

- 将最大宽度从 max-w-5xl 调整为 max-w-screen-xl
- 替换 Badge 组件为自定义样式的 p 标签
- 调整服务器卡片标签的颜色和样式
- 移除 Inter 字体，使用系统默认字体

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

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>
   )
 }

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>
         )}

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>
           )}

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("/")

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;
 

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}

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" />