feat: live speed

app/(main)/ClientComponents/ServerOverviewClient.tsx

@@ -3,6 +3,7 @@
 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";
@@ -52,7 +53,7 @@ export default function ServerOverviewClient() {
             "pointer-events-none": global,
           })}
         >
-          <CardContent className="px-6 py-3">
+          <CardContent className="flex h-full items-center px-6 py-3">
             <section className="flex flex-col gap-1">
               <p className="text-sm font-medium md:text-base">
                 {t("p_816-881_Totalservers")}
@@ -91,7 +92,7 @@ export default function ServerOverviewClient() {
             },
           )}
         >
-          <CardContent className="px-6 py-3">
+          <CardContent className="flex h-full items-center px-6 py-3">
             <section className="flex flex-col gap-1">
               <p className="text-sm font-medium md:text-base">
                 {t("p_1610-1676_Onlineservers")}
@@ -131,7 +132,7 @@ export default function ServerOverviewClient() {
             },
           )}
         >
-          <CardContent className="px-6 py-3">
+          <CardContent className="flex h-full items-center px-6 py-3">
             <section className="flex flex-col gap-1">
               <p className="text-sm font-medium md:text-base">
                 {t("p_2532-2599_Offlineservers")}
@@ -171,20 +172,34 @@ export default function ServerOverviewClient() {
             },
           )}
         >
-          <CardContent className="relative px-6 py-3">
+          <CardContent className="flex h-full items-center relative px-6 py-3">
             <section className="flex flex-col gap-1">
-              <p className="text-sm font-medium md:text-base">
+              <div className="flex items-center gap-1">
-                {t("p_3463-3530_Totalbandwidth")}
+                <p className="text-sm font-medium md:text-base">
-              </p>
+                  {t("p_3463-3530_Totalbandwidth")}
+                </p>
+                <Separator orientation="vertical" className="h-4 w-[1px]" />
+                <p className="text-sm font-medium md:text-base">{t("speed")}</p>
+              </div>
               {data?.result ? (
-                <section className="flex flex-col sm:flex-row pt-[8px] sm:items-center items-start gap-1">
+                <>
-                  <p className="text-[12px]  text-nowrap font-semibold">
+                  <section className="flex flex-row sm:items-center items-start gap-1">
-                    ↑{formatBytes(data?.total_out_bandwidth)}
+                    <p className="sm:text-[12px] text-[10px]  text-nowrap font-semibold">
-                  </p>
+                      ↑{formatBytes(data?.total_out_bandwidth)}
-                  <p className="text-[12px] text-nowrap font-semibold">
+                    </p>
-                    ↓{formatBytes(data?.total_in_bandwidth)}
+                    <p className="sm:text-[12px] text-[10px]  text-nowrap font-semibold">
-                  </p>
+                      ↓{formatBytes(data?.total_in_bandwidth)}
-                </section>
+                    </p>
+                  </section>
+                  <section className="flex flex-row  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-7 items-center">
                   <Loader visible={true} />

app/layout.tsx

@@ -1,6 +1,6 @@
 // @auto-i18n-check. Please do not delete the line.
-import { MotionProvider } from "@/components/motion/motion-provider";
 import { ThemeColorManager } from "@/components/ThemeColorManager";
+import { MotionProvider } from "@/components/motion/motion-provider";
 import getEnv from "@/lib/env-entry";
 import { FilterProvider } from "@/lib/network-filter-context";
 import { StatusProvider } from "@/lib/status-context";

app/types/nezha-api.ts

@@ -3,6 +3,8 @@ export type ServerApi = {
   offline_servers: number;
   total_out_bandwidth: number;
   total_in_bandwidth: number;
+  total_out_speed: number;
+  total_in_speed: number;
   result: NezhaAPISafe[];
 };
 

components/ThemeColorManager.tsx

@@ -1,37 +1,40 @@
-'use client';
+"use client";
 
-import { useEffect } from 'react';
+import { useTheme } from "next-themes";
-import { useTheme } from 'next-themes';
+import { useEffect } from "react";
 
 export function ThemeColorManager() {
   const { theme, systemTheme } = useTheme();
 
   useEffect(() => {
     const updateThemeColor = () => {
-      const currentTheme = theme === 'system' ? systemTheme : theme;
+      const currentTheme = theme === "system" ? systemTheme : theme;
       const meta = document.querySelector('meta[name="theme-color"]');
 
       if (!meta) {
-        const newMeta = document.createElement('meta');
+        const newMeta = document.createElement("meta");
-        newMeta.name = 'theme-color';
+        newMeta.name = "theme-color";
         document.head.appendChild(newMeta);
       }
 
-      const themeColor = currentTheme === 'dark' 
+      const themeColor =
-        ? 'hsl(30 15% 8%)' // 深色模式背景色
+        currentTheme === "dark"
-        : 'hsl(0 0% 98%)'; // 浅色模式背景色
+          ? "hsl(30 15% 8%)" // 深色模式背景色
+          : "hsl(0 0% 98%)"; // 浅色模式背景色
 
-      document.querySelector('meta[name="theme-color"]')?.setAttribute('content', themeColor);
+      document
+        .querySelector('meta[name="theme-color"]')
+        ?.setAttribute("content", themeColor);
     };
 
     // Update on mount and theme change
     updateThemeColor();
 
     // Listen for system theme changes
-    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
-    mediaQuery.addEventListener('change', updateThemeColor);
+    mediaQuery.addEventListener("change", updateThemeColor);
 
-    return () => mediaQuery.removeEventListener('change', updateThemeColor);
+    return () => mediaQuery.removeEventListener("change", updateThemeColor);
   }, [theme, systemTheme]);
 
   return null;

lib/serverFetch.tsx

@@ -44,6 +44,8 @@ export async function GetNezhaData() {
       offline_servers: 0,
       total_out_bandwidth: 0,
       total_in_bandwidth: 0,
+      total_in_speed: 0,
+      total_out_speed: 0,
       result: [],
     };
 
@@ -66,6 +68,8 @@ export async function GetNezhaData() {
 
         data.total_out_bandwidth += element.status.NetOutTransfer;
         data.total_in_bandwidth += element.status.NetInTransfer;
+        data.total_in_speed += element.status.NetInSpeed;
+        data.total_out_speed += element.status.NetOutSpeed;
 
         // Remove unwanted properties
         delete element.ipv4;

messages/en.json

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

messages/ja.json

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

messages/zh-t.json

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

messages/zh.json

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