app/(main)/ClientComponents/NetworkChart.tsx

@@ -128,7 +128,7 @@ export const NetworkChart = React.memo(function NetworkChart({
         <button
           key={key}
           data-active={activeChart === key}
-          className={`relative z-30 flex cursor-pointer grow basis-0 flex-col justify-center gap-1 border-b border-neutral-200 dark:border-neutral-800 px-6 py-4 text-left data-[active=true]:bg-muted/50 sm:border-l sm:border-t-0 sm:px-6`}
+          className={`relative z-30 flex cursor-pointer grow basis-0 min-w-[100px] flex-col justify-center gap-1 border-b border-neutral-200 dark:border-neutral-800 px-6 py-4 text-left data-[active=true]:bg-muted/50 sm:border-l sm:border-t-0 sm:px-6`}
           onClick={() => handleButtonClick(key)}
         >
           <span className="whitespace-nowrap text-xs text-muted-foreground">

app/(main)/ClientComponents/ServerOverviewClient.tsx

@@ -3,15 +3,12 @@
 import { ServerApi } from "@/app/types/nezha-api";
 import { Loader } from "@/components/loading/Loader";
 import { Card, CardContent } from "@/components/ui/card";
+import { Separator } from "@/components/ui/separator";
 import getEnv from "@/lib/env-entry";
 import { useFilter } from "@/lib/network-filter-context";
 import { useStatus } from "@/lib/status-context";
 import { cn, formatBytes, nezhaFetcher } from "@/lib/utils";
 import blogMan from "@/public/blog-man.webp";
-import {
-  ArrowDownCircleIcon,
-  ArrowUpCircleIcon,
-} from "@heroicons/react/20/solid";
 import { useTranslations } from "next-intl";
 import Image from "next/image";
 import { useSearchParams } from "next/navigation";
@@ -52,9 +49,12 @@ export default function ServerOverviewClient() {
               setStatus("all");
             }
           }}
-          className={cn("cursor-pointer hover:border-blue-500 transition-all", {
+          className={cn(
-            "pointer-events-none": global,
+            "cursor-pointer hover:border-blue-500 transition-all min-h-[94px]",
-          })}
+            {
+              "pointer-events-none": global,
+            },
+          )}
         >
           <CardContent className="flex h-full items-center px-6 py-3">
             <section className="flex flex-col gap-1">
@@ -86,7 +86,7 @@ export default function ServerOverviewClient() {
             }
           }}
           className={cn(
-            "cursor-pointer hover:ring-green-500 ring-1 ring-transparent transition-all",
+            "cursor-pointer hover:ring-green-500 ring-1 ring-transparent transition-all min-h-[94px]",
             {
               "ring-green-500 ring-2 border-transparent": status === "online",
             },
@@ -126,7 +126,7 @@ export default function ServerOverviewClient() {
             }
           }}
           className={cn(
-            "cursor-pointer hover:ring-red-500 ring-1 ring-transparent transition-all",
+            "cursor-pointer hover:ring-red-500 ring-1 ring-transparent transition-all min-h-[94px]",
             {
               "ring-red-500 ring-2 border-transparent": status === "offline",
             },
@@ -166,7 +166,7 @@ export default function ServerOverviewClient() {
             }
           }}
           className={cn(
-            "cursor-pointer hover:ring-purple-500 ring-1 ring-transparent transition-all",
+            "cursor-pointer hover:ring-purple-500 ring-1 ring-transparent transition-all min-h-[94px]",
             {
               "ring-purple-500 ring-2 border-transparent": filter === true,
             },
@@ -176,37 +176,35 @@ export default function ServerOverviewClient() {
           )}
         >
           <CardContent className="flex h-full items-center relative px-3 py-1 pr-0 sm:px-6 sm:py-3">
-            <section className="flex flex-col gap-1 w-full">
+            <section className="flex flex-col gap-1">
-              <div className="flex items-center w-full justify-between">
+              <div className="flex items-center gap-1">
                 <p className="text-sm font-medium md:text-base">
-                  {t("network")}
+                  {t("p_3463-3530_Totalbandwidth")}
                 </p>
-                <section className="flex flex-row z-[999] bg-white/80 dark:bg-black/80 backdrop-blur-sm sm:items-center items-start pr-2 sm:pr-0 gap-1 ml-auto">
+                <Separator orientation="vertical" className="h-4 w-[1px]" />
-                  <p className="sm:text-[12px] text-[10px]   text-nowrap font-medium">
+                <p className="text-sm font-medium md:text-base">{t("speed")}</p>
-                    ↑{formatBytes(data?.total_out_bandwidth || 0)}
-                  </p>
-                  <p className="sm:text-[12px] text-[10px]  text-nowrap font-medium">
-                    ↓{formatBytes(data?.total_in_bandwidth || 0)}
-                  </p>
-                </section>
               </div>
               {data?.result ? (
                 <>
-                  <section className="flex flex-row mt-1.5 -mr-1 sm:items-center items-start gap-1">
+                  <section className="flex flex-row sm:items-center items-start gap-1">
-                    <p className="sm:text-[12px] flex items-center text-[10px] text-nowrap font-semibold">
+                    <p className="sm:text-[12px] text-[10px] text-stone-400  text-nowrap font-medium">
-                      <ArrowUpCircleIcon className="size-3 mr-0.5 sm:mb-[1.1px]" />
+                      ↑{formatBytes(data?.total_out_bandwidth)}
-                      {formatBytes(data?.total_out_speed)}/s
                     </p>
-                    <p className="sm:text-[12px] flex items-center text-[10px] text-nowrap font-semibold">
+                    <p className="sm:text-[12px] text-[10px] text-stone-400  text-nowrap font-medium">
-                      <ArrowDownCircleIcon className="size-3 mr-0.5" />
+                      ↓{formatBytes(data?.total_in_bandwidth)}
-                      {formatBytes(
+                    </p>
-                        data?.total_in_speed,
+                  </section>
-                      )}/s
+                  <section className="flex flex-row -mt-1 -mr-1 sm:items-center items-start gap-1">
+                    <p className="sm:text-[12px]  text-[10px] text-nowrap font-semibold">
+                      ↑{formatBytes(data?.total_out_speed)}/s
+                    </p>
+                    <p className="sm:text-[12px] text-[10px] text-nowrap font-semibold">
+                      ↓{formatBytes(data?.total_in_speed)}/s
                     </p>
                   </section>
                 </>
               ) : (
-                <div className="flex h-6 items-center">
+                <div className="flex h-7 items-center">
                   <Loader visible={true} />
                 </div>
               )}

messages/en.json

@@ -5,7 +5,6 @@
     "p_2532-2599_Offlineservers": "Offline servers",
     "p_3463-3530_Totalbandwidth": "Total bandwidth",
     "speed": "speed",
-    "network": "Network",
     "error_message": "Please check your environment variables and review the server console",
     "no_data_message": "No data"
   },

messages/ja.json

@@ -5,7 +5,6 @@
     "p_2532-2599_Offlineservers": "オフラインサーバー",
     "p_3463-3530_Totalbandwidth": "総流量",
     "speed": "速度",
-    "network": "ネットワーク",
     "error_message": "環境変数を確認し、サーバーコンソールを確認してください",
     "no_data_message": "データなし"
   },

messages/zh-t.json

@@ -5,7 +5,6 @@
     "p_2532-2599_Offlineservers": "離線伺服器",
     "p_3463-3530_Totalbandwidth": "總流量",
     "speed": "速率",
-    "network": "網路",
     "error_message": "請檢查您的環境變數並檢查伺服器控制台",
     "no_data_message": "無資料"
   },

messages/zh.json

@@ -5,7 +5,6 @@
     "p_2532-2599_Offlineservers": "离线服务器",
     "p_3463-3530_Totalbandwidth": "总流量",
     "speed": "速率",
-    "network": "网络",
     "error_message": "请检查您的环境变量并检查服务器控制台",
     "no_data_message": "无数据"
   },

package.json

@@ -1,6 +1,6 @@
 {
   "name": "nezha-dash",
-  "version": "1.6.9",
+  "version": "1.6.8",
   "private": true,
   "scripts": {
     "dev": "next dev -p 3040",