feat: live speed

src/components/ServerOverview.tsx

@@ -2,6 +2,7 @@ import { Card, CardContent } from "@/components/ui/card";
 import { cn } from "@/lib/utils";
 import { useTranslation } from "react-i18next";
 import { formatBytes } from "@/lib/format";
+import { Separator } from "./ui/separator";
 
 type ServerOverviewProps = {
   online: number;
@@ -9,6 +10,8 @@ type ServerOverviewProps = {
   total: number;
   up: number;
   down: number;
+  upSpeed: number;
+  downSpeed: number;
 };
 
 export default function ServerOverview({
@@ -17,6 +20,8 @@ export default function ServerOverview({
   total,
   up,
   down,
+  upSpeed,
+  downSpeed,
 }: ServerOverviewProps) {
   const { t } = useTranslation();
 
@@ -24,7 +29,7 @@ export default function ServerOverview({
     <>
       <section className="grid grid-cols-2 gap-4 lg:grid-cols-4">
         <Card className={cn("hover:border-blue-500 transition-all")}>
-          <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("serverOverview.totalServers")}
@@ -43,7 +48,7 @@ export default function ServerOverview({
             " hover:ring-green-500 ring-1 ring-transparent transition-all",
           )}
         >
-          <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("serverOverview.onlineServers")}
@@ -64,7 +69,7 @@ export default function ServerOverview({
             " hover:ring-red-500 ring-1 ring-transparent transition-all",
           )}
         >
-          <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("serverOverview.offlineServers")}
@@ -84,20 +89,36 @@ export default function ServerOverview({
             " hover:ring-purple-500 ring-1 ring-transparent transition-all",
           )}
         >
-          <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("serverOverview.totalBandwidth")}
+                <p className="text-sm font-medium md:text-base">
-              </p>
+                  {t("serverOverview.totalBandwidth")}
-
+                </p>
-              <section className="flex flex-col sm:flex-row pt-[8px] sm:items-center items-start gap-1">
+                <Separator
-                <p className="text-[12px]  text-nowrap font-semibold">
+                  orientation="vertical"
+                  className="h-4 w-[1px]"
+                />
+                <p className="text-sm font-medium md:text-base">
+                  {t("serverOverview.speed")}
+                </p>
+              </div>
+              <section className="flex flex-row sm:items-center items-start gap-1">
+                <p className="sm:text-[12px] text-[10px]  text-nowrap font-semibold">
                   ↑{formatBytes(up)}
                 </p>
-                <p className="text-[12px] text-nowrap font-semibold">
+                <p className="sm:text-[12px] text-[10px]  text-nowrap font-semibold">
                   ↓{formatBytes(down)}
                 </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(upSpeed)}/s
+                </p>
+                <p className="sm:text-[12px] text-[10px] text-nowrap font-semibold">
+                  ↓{formatBytes(downSpeed)}/s
+                </p>
+              </section>
             </section>
           </CardContent>
         </Card>

src/locales/en/translation.json

@@ -14,7 +14,8 @@
     "totalServers": "Total Servers",
     "onlineServers": "Online Servers",
     "offlineServers": "Offline Servers",
-    "totalBandwidth": "Total Bandwidth"
+    "totalBandwidth": "Total Bandwidth",
+    "speed": "Speed"
   },
   "serverCard": {
     "mem": "MEM",

src/locales/zh-CN/translation.json

@@ -14,7 +14,8 @@
     "totalServers": "服务器总数",
     "onlineServers": "在线服务器",
     "offlineServers": "离线服务器",
-    "totalBandwidth": "总流量"
+    "totalBandwidth": "总流量",
+    "speed": "速率"
   },
   "serverCard": {
     "mem": "内存",

src/locales/zh-TW/translation.json

@@ -14,7 +14,8 @@
     "totalServers": "總服務器",
     "onlineServers": "線上服務器",
     "offlineServers": "離線服務器",
-    "totalBandwidth": "總帶寬"
+    "totalBandwidth": "總帶寬",
+    "speed": "速率"
   },
   "serverCard": {
     "mem": "內存",

src/pages/Server.tsx

@@ -103,6 +103,23 @@ export default function Servers() {
       0,
     ) || 0;
 
+  const upSpeed =
+    nezhaWsData?.servers?.reduce(
+      (total, server) =>
+        formatNezhaInfo(nezhaWsData.now, server).online
+          ? total + (server.state?.net_out_speed ?? 0)
+          : total,
+      0,
+    ) || 0;
+  const downSpeed =
+    nezhaWsData?.servers?.reduce(
+      (total, server) =>
+        formatNezhaInfo(nezhaWsData.now, server).online
+          ? total + (server.state?.net_in_speed ?? 0)
+          : total,
+      0,
+    ) || 0;
+
   const filteredServers =
     nezhaWsData?.servers?.filter((server) => {
       if (currentGroup === "All") return true;
@@ -123,6 +140,8 @@ export default function Servers() {
         offline={offlineServers}
         up={up}
         down={down}
+        upSpeed={upSpeed}
+        downSpeed={downSpeed}
       />
       <section className="flex mt-6 items-center gap-2 w-full overflow-hidden">
         <button