From 3f7985ecf20095b4d99fe7e1bc23e90515f26985 Mon Sep 17 00:00:00 2001
From: wood chen <wood@czl.net>
Date: Sat, 14 Jun 2025 08:00:56 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=20App=E3=80=81Header=20?=
 =?UTF-8?q?=E5=92=8C=20Server=20=E7=BB=84=E4=BB=B6=E7=9A=84=E5=B8=83?=
 =?UTF-8?q?=E5=B1=80=EF=BC=8C=E8=B0=83=E6=95=B4=E6=A0=B7=E5=BC=8F=E4=BB=A5?=
 =?UTF-8?q?=E6=8F=90=E5=8D=87=E7=94=A8=E6=88=B7=E4=BD=93=E9=AA=8C=E5=92=8C?=
 =?UTF-8?q?=E7=95=8C=E9=9D=A2=E6=95=B4=E6=B4=81=E6=80=A7=E3=80=82=E5=90=8C?=
 =?UTF-8?q?=E6=97=B6=E7=A7=BB=E9=99=A4=E4=B8=8D=E5=BF=85=E8=A6=81=E7=9A=84?=
 =?UTF-8?q?=E5=8A=A8=E7=94=BB=E6=95=88=E6=9E=9C=EF=BC=8C=E7=AE=80=E5=8C=96?=
 =?UTF-8?q?=E4=BB=A3=E7=A0=81=E7=BB=93=E6=9E=84=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.tsx               |  2 +-
 src/components/Header.tsx | 14 +++++---------
 src/pages/Server.tsx      |  8 ++++----
 3 files changed, 10 insertions(+), 14 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 7479d87..02a5fda 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -82,7 +82,7 @@ const App: React.FC = () => {
             "bg-background": !customBackgroundImage,
           })}
         >
-          <main className="flex z-20 min-h-[calc(100vh-calc(var(--spacing)*16))] flex-1 flex-col gap-4 p-4 md:p-10 md:pt-8">
+          <main className="flex z-20 min-h-[calc(100vh-calc(var(--spacing)*8))] flex-1 flex-col gap-2 p-2 md:p-6 md:pt-4">
             <RefreshToast />
             <Header />
             <DashCommand />
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 85ff10f..78bd8ba 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -6,7 +6,7 @@ import { fetchLoginUser, fetchSetting } from "@/lib/nezha-api"
 import { cn } from "@/lib/utils"
 import NumberFlow, { NumberFlowGroup } from "@number-flow/react"
 import { useQuery } from "@tanstack/react-query"
-import { AnimatePresence, m } from "framer-motion"
+import { AnimatePresence } from "framer-motion"
 import { ImageMinus } from "lucide-react"
 import { DateTime } from "luxon"
 import { useEffect, useRef, useState } from "react"
@@ -74,7 +74,7 @@ function Header() {
   const customBackgroundImage = backgroundImage
 
   return (
-    <div className="mx-auto w-full max-w-5xl">
+    <div className="mx-auto w-full max-w-7xl">
       <section className="flex items-center justify-between header-top">
         <section
           onClick={() => {
@@ -191,18 +191,14 @@ export function RefreshToast() {
 
   return (
     <AnimatePresence>
-      <m.div
-        initial={{ opacity: 0, filter: "blur(10px)", scale: 0.8 }}
-        animate={{ opacity: 1, filter: "blur(0px)", scale: 1 }}
-        exit={{ opacity: 0, filter: "blur(10px)", scale: 0.8 }}
-        transition={{ type: "spring", duration: 0.8 }}
+      <div
         className="fixed left-1/2 -translate-x-1/2 top-8 z-[999] flex items-center justify-between gap-4 rounded-[50px] border-[1px] border-solid bg-white px-2 py-1.5 shadow-xl shadow-black/5 dark:border-stone-700 dark:bg-stone-800 dark:shadow-none"
       >
         <section className="flex items-center gap-1.5">
           <LoadingSpinner />
           <p className="text-[12.5px] font-medium">{t("refreshing")}...</p>
         </section>
-      </m.div>
+      </div>
     </AnimatePresence>
   )
 }
@@ -281,7 +277,7 @@ function Overview() {
     return () => clearInterval(timer)
   }, [])
   return (
-    <section className={"mt-10 flex flex-col md:mt-16 header-timer"}>
+    <section className={"mt-6 flex flex-col md:mt-8 header-timer"}>
       <p className="text-base font-semibold">👋 {t("overview")}</p>
       <div className="flex items-center gap-1.5">
         <p className="text-sm font-medium opacity-50">{t("whereTheTimeIs")}</p>
diff --git a/src/pages/Server.tsx b/src/pages/Server.tsx
index 8bf80bd..d38c6f2 100644
--- a/src/pages/Server.tsx
+++ b/src/pages/Server.tsx
@@ -274,7 +274,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-7xl px-0">
       <ServerOverview
         total={totalServers}
         online={onlineServers}
@@ -284,7 +284,7 @@ export default function Servers() {
         upSpeed={upSpeed}
         downSpeed={downSpeed}
       />
-      <div className="flex mt-6 items-center justify-between gap-2 server-overview-controls">
+      <div className="flex mt-4 items-center justify-between gap-2 server-overview-controls">
         <section className="flex items-center gap-2 w-full overflow-hidden">
           <button
             onClick={() => {
@@ -394,7 +394,7 @@ export default function Servers() {
       {showServices === "1" && <ServiceTracker serverList={filteredServers} />}
       
       {/* 优化直接国家选择器 */}
-      <div className="mt-4">
+      <div className="mt-3">
         <DirectCountrySelect 
           countries={countryTabs.filter(tab => tab !== "All")}
           currentCountry={currentCountry}
@@ -402,7 +402,7 @@ export default function Servers() {
         />
       </div>
       
-      <section ref={containerRef} className="grid grid-cols-1 gap-4 md:grid-cols-3 mt-4 server-card-list">
+      <section ref={containerRef} className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 mt-4 server-card-list">
         {filteredServers.map((serverInfo) => {
           // 查找服务器所属的分组
           const serverGroup = groupData?.data?.find(