feat: net transfer badge

src/components/GroupSwitch.tsx

@@ -11,9 +11,7 @@ export default function GroupSwitch({
   setCurrentTab: (tab: string) => void;
 }) {
   return (
-    <div
+    <div className="scrollbar-hidden z-50 flex flex-col items-start overflow-x-scroll rounded-[50px]">
-      className="scrollbar-hidden z-50 flex flex-col items-start overflow-x-scroll rounded-[50px]"
-    >
       <div className="flex items-center gap-1 rounded-[50px] bg-stone-100 p-[3px] dark:bg-stone-800">
         {tabs.map((tab: string) => (
           <div

src/components/ServerCard.tsx

@@ -6,6 +6,8 @@ import { NezhaServer } from "@/types/nezha-api";
 import { Card } from "./ui/card";
 import { useNavigate } from "react-router-dom";
 import { useTranslation } from "react-i18next";
+import { Badge } from "./ui/badge";
+import { formatBytes } from "@/lib/format";
 
 export default function ServerCard({
   now,
@@ -101,6 +103,20 @@ export default function ServerCard({
               </div>
             </div>
           </section>
+          <section className={"flex items-center justify-between gap-1"}>
+            <Badge
+              variant="secondary"
+              className="items-center flex-1 justify-center rounded-[8px] text-nowrap text-[11px] border-muted-50 shadow-md shadow-neutral-200/30 dark:shadow-none"
+            >
+              {t("Upload")}:{formatBytes(serverInfo.state.net_out_transfer)}
+            </Badge>
+            <Badge
+              variant="outline"
+              className="items-center flex-1 justify-center rounded-[8px] text-nowrap text-[11px] shadow-md shadow-neutral-200/30 dark:shadow-none"
+            >
+              {t("Download")}:{formatBytes(serverInfo.state.net_in_transfer)}
+            </Badge>
+          </section>
         </div>
       </Card>
     </section>

src/components/ServerDetailChart.tsx

@@ -87,10 +87,10 @@ export default function ServerDetailChart({
   );
 }
 
-function CpuChart({ now,data }: { now: number;data: NezhaServer }) {
+function CpuChart({ now, data }: { now: number; data: NezhaServer }) {
   const [cpuChartData, setCpuChartData] = useState([] as cpuChartData[]);
 
-  const { cpu } = formatNezhaInfo(now,data);
+  const { cpu } = formatNezhaInfo(now, data);
 
   useEffect(() => {
     if (data) {
@@ -189,7 +189,7 @@ function ProcessChart({ now, data }: { now: number; data: NezhaServer }) {
     [] as processChartData[],
   );
 
-  const { process } = formatNezhaInfo(now,data);
+  const { process } = formatNezhaInfo(now, data);
 
   useEffect(() => {
     if (data) {
@@ -276,11 +276,11 @@ function ProcessChart({ now, data }: { now: number; data: NezhaServer }) {
   );
 }
 
-function MemChart({ now,data }: { now: number;data: NezhaServer }) {
+function MemChart({ now, data }: { now: number; data: NezhaServer }) {
   const { t } = useTranslation();
   const [memChartData, setMemChartData] = useState([] as memChartData[]);
 
-  const { mem, swap } = formatNezhaInfo(now,data);
+  const { mem, swap } = formatNezhaInfo(now, data);
 
   useEffect(() => {
     if (data) {
@@ -406,11 +406,11 @@ function MemChart({ now,data }: { now: number;data: NezhaServer }) {
   );
 }
 
-function DiskChart({ now,data }: { now: number;data: NezhaServer }) {
+function DiskChart({ now, data }: { now: number; data: NezhaServer }) {
   const { t } = useTranslation();
   const [diskChartData, setDiskChartData] = useState([] as diskChartData[]);
 
-  const { disk } = formatNezhaInfo(now,data);
+  const { disk } = formatNezhaInfo(now, data);
 
   useEffect(() => {
     if (data) {
@@ -503,13 +503,13 @@ function DiskChart({ now,data }: { now: number;data: NezhaServer }) {
   );
 }
 
-function NetworkChart({ now,data }: { now: number;data: NezhaServer }) {
+function NetworkChart({ now, data }: { now: number; data: NezhaServer }) {
   const { t } = useTranslation();
   const [networkChartData, setNetworkChartData] = useState(
     [] as networkChartData[],
   );
 
-  const { up, down } = formatNezhaInfo(now,data);
+  const { up, down } = formatNezhaInfo(now, data);
 
   useEffect(() => {
     if (data) {
@@ -632,12 +632,12 @@ function NetworkChart({ now,data }: { now: number;data: NezhaServer }) {
   );
 }
 
-function ConnectChart({ now,data }: { now: number;data: NezhaServer }) {
+function ConnectChart({ now, data }: { now: number; data: NezhaServer }) {
   const [connectChartData, setConnectChartData] = useState(
     [] as connectChartData[],
   );
 
-  const { tcp, udp } = formatNezhaInfo(now,data);
+  const { tcp, udp } = formatNezhaInfo(now, data);
 
   useEffect(() => {
     if (data) {

src/components/ServerDetailOverview.tsx

@@ -4,10 +4,11 @@ import ServerFlag from "@/components/ServerFlag";
 import { Badge } from "@/components/ui/badge";
 import { Card, CardContent } from "@/components/ui/card";
 import { useWebSocketContext } from "@/hooks/use-websocket-context";
-import { cn, formatBytes, formatNezhaInfo } from "@/lib/utils";
+import { cn, formatNezhaInfo } from "@/lib/utils";
 import { NezhaWebsocketResponse } from "@/types/nezha-api";
 import { useNavigate } from "react-router-dom";
 import { useTranslation } from "react-i18next";
+import { formatBytes } from "@/lib/format";
 
 export default function ServerDetailOverview({
   server_id,
@@ -37,7 +38,10 @@ export default function ServerDetailOverview({
     return <ServerDetailLoading />;
   }
 
-  const { name, online, uptime, version } = formatNezhaInfo(nezhaWsData.now,server);
+  const { name, online, uptime, version } = formatNezhaInfo(
+    nezhaWsData.now,
+    server,
+  );
 
   return (
     <div>

src/components/ServerOverview.tsx

@@ -1,6 +1,7 @@
 import { Card, CardContent } from "@/components/ui/card";
-import { cn, formatBytes } from "@/lib/utils";
+import { cn } from "@/lib/utils";
 import { useTranslation } from "react-i18next";
+import { formatBytes } from "@/lib/format";
 
 type ServerOverviewProps = {
   online: number;

src/lib/format.ts

@@ -1,9 +1,19 @@
-export function formatBytes(bytes: number, decimals = 2): string {
+export function formatBytes(bytes: number, decimals: number = 2) {
-  if (bytes === 0) return "0 B";
+  if (!+bytes) return "0 Bytes";
 
   const k = 1024;
   const dm = decimals < 0 ? 0 : decimals;
-  const sizes = ["B", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
+  const sizes = [
+    "Bytes",
+    "KiB",
+    "MiB",
+    "GiB",
+    "TiB",
+    "PiB",
+    "EiB",
+    "ZiB",
+    "YiB",
+  ];
 
   const i = Math.floor(Math.log(bytes) / Math.log(k));
 

src/lib/utils.ts

@@ -6,7 +6,7 @@ export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs));
 }
 
-export function formatNezhaInfo(now: number,serverInfo: NezhaServer) {
+export function formatNezhaInfo(now: number, serverInfo: NezhaServer) {
   const lastActiveTime = parseISOTimestamp(serverInfo.last_active);
   return {
     ...serverInfo,
@@ -27,28 +27,6 @@ export function formatNezhaInfo(now: number,serverInfo: NezhaServer) {
   };
 }
 
-export function formatBytes(bytes: number, decimals: number = 2) {
-  if (!+bytes) return "0 Bytes";
-
-  const k = 1024;
-  const dm = decimals < 0 ? 0 : decimals;
-  const sizes = [
-    "Bytes",
-    "KiB",
-    "MiB",
-    "GiB",
-    "TiB",
-    "PiB",
-    "EiB",
-    "ZiB",
-    "YiB",
-  ];
-
-  const i = Math.floor(Math.log(bytes) / Math.log(k));
-
-  return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`;
-}
-
 export function getDaysBetweenDates(date1: string, date2: string): number {
   const oneDay = 24 * 60 * 60 * 1000; // 一天的毫秒数
   const firstDate = new Date(date1);

src/pages/Server.tsx

@@ -57,11 +57,13 @@ export default function Servers() {
 
   const totalServers = nezhaWsData?.servers?.length || 0;
   const onlineServers =
-    nezhaWsData?.servers?.filter((server) => formatNezhaInfo(nezhaWsData.now,server).online)
+    nezhaWsData?.servers?.filter(
-      ?.length || 0;
+      (server) => formatNezhaInfo(nezhaWsData.now, server).online,
+    )?.length || 0;
   const offlineServers =
-    nezhaWsData?.servers?.filter((server) => !formatNezhaInfo(nezhaWsData.now,server).online)
+    nezhaWsData?.servers?.filter(
-      ?.length || 0;
+      (server) => !formatNezhaInfo(nezhaWsData.now, server).online,
+    )?.length || 0;
   const up =
     nezhaWsData?.servers?.reduce(
       (total, server) => total + server.state.net_out_transfer,
@@ -112,7 +114,11 @@ export default function Servers() {
       {showServices && <ServiceTracker />}
       <section className="grid grid-cols-1 gap-2 md:grid-cols-2 mt-6">
         {filteredServers.map((serverInfo) => (
-          <ServerCard now={nezhaWsData.now} key={serverInfo.id} serverInfo={serverInfo} />
+          <ServerCard
+            now={nezhaWsData.now}
+            key={serverInfo.id}
+            serverInfo={serverInfo}
+          />
         ))}
       </section>
     </div>