feat(overview): sort by network traffic

app/(main)/ClientComponents/ServerListClient.tsx

@@ -4,6 +4,7 @@ import { ServerApi } from "@/app/types/nezha-api";
 import ServerCard from "@/components/ServerCard";
 import Switch from "@/components/Switch";
 import getEnv from "@/lib/env-entry";
+import { useFilter } from "@/lib/network-filter-context";
 import { useStatus } from "@/lib/status-context";
 import { nezhaFetcher } from "@/lib/utils";
 import { GlobeAsiaAustraliaIcon } from "@heroicons/react/20/solid";
@@ -14,6 +15,7 @@ import useSWR from "swr";
 
 export default function ServerListClient() {
   const { status, setStatus } = useStatus();
+  const { filter, setFilter } = useFilter();
   const t = useTranslations("ServerListClient");
   const containerRef = useRef<HTMLDivElement>(null);
   const defaultTag = "defaultTag";
@@ -96,6 +98,17 @@ export default function ServerListClient() {
       ? filteredServersByStatus
       : filteredServersByStatus.filter((server) => server.tag === tag);
 
+  if (filter) {
+    // 根据使用流量进行从高到低排序
+    filteredServers.sort((a, b) => {
+      return (
+        b.status.NetInTransfer +
+        b.status.NetOutTransfer -
+        (a.status.NetInTransfer + b.status.NetOutTransfer)
+      );
+    });
+  }
+
   const tagCountMap: Record<string, number> = {};
   filteredServersByStatus.forEach((server) => {
     if (server.tag) {
@@ -109,6 +122,7 @@ export default function ServerListClient() {
         <button
           onClick={() => {
             setStatus("all");
+            setFilter(false);
             router.push(`/?global=true`);
           }}
           className="rounded-[50px] bg-stone-100 p-[10px] transition-all hover:bg-stone-200 dark:hover:bg-stone-700 dark:bg-stone-800"

app/(main)/ClientComponents/ServerOverviewClient.tsx

@@ -4,6 +4,7 @@ import { ServerApi } from "@/app/types/nezha-api";
 import { Loader } from "@/components/loading/Loader";
 import { Card, CardContent } from "@/components/ui/card";
 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";
@@ -14,6 +15,7 @@ import useSWR from "swr";
 
 export default function ServerOverviewClient() {
   const { status, setStatus } = useStatus();
+  const { filter, setFilter } = useFilter();
   const t = useTranslations("ServerOverviewClient");
   const { data, error, isLoading } = useSWR<ServerApi>(
     "/api/server",
@@ -40,7 +42,12 @@ export default function ServerOverviewClient() {
     <>
       <section className="grid grid-cols-2 gap-4 lg:grid-cols-4">
         <Card
-          onClick={() => (global ? null : setStatus("all"))}
+          onClick={() => {
+            setFilter(false);
+            if (!global) {
+              setStatus("all");
+            }
+          }}
           className="cursor-pointer hover:border-blue-500 transition-all"
         >
           <CardContent className="px-6 py-3">
@@ -66,7 +73,12 @@ export default function ServerOverviewClient() {
           </CardContent>
         </Card>
         <Card
-          onClick={() => (global ? null : setStatus("online"))}
+          onClick={() => {
+            setFilter(false);
+            if (!global) {
+              setStatus("online");
+            }
+          }}
           className={cn(
             "cursor-pointer hover:ring-green-500 ring-1 ring-transparent transition-all",
             {
@@ -98,7 +110,12 @@ export default function ServerOverviewClient() {
           </CardContent>
         </Card>
         <Card
-          onClick={() => (global ? null : setStatus("offline"))}
+          onClick={() => {
+            setFilter(false);
+            if (!global) {
+              setStatus("offline");
+            }
+          }}
           className={cn(
             "cursor-pointer hover:ring-red-500 ring-1 ring-transparent transition-all",
             {
@@ -129,7 +146,20 @@ export default function ServerOverviewClient() {
             </section>
           </CardContent>
         </Card>
-        <Card>
+        <Card
+          onClick={() => {
+            setStatus("all");
+            if (!global) {
+              setFilter(true);
+            }
+          }}
+          className={cn(
+            "cursor-pointer hover:ring-purple-500 ring-1 ring-transparent transition-all",
+            {
+              "ring-purple-500 ring-2 border-transparent": filter === true,
+            },
+          )}
+        >
           <CardContent className="relative px-6 py-3">
             <section className="flex flex-col gap-1">
               <p className="text-sm font-medium md:text-base">

app/layout.tsx

@@ -1,6 +1,7 @@
 // @auto-i18n-check. Please do not delete the line.
 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";
 import { cn } from "@/lib/utils";
 import "@/styles/globals.css";
@@ -79,7 +80,9 @@ export default async function LocaleLayout({
             disableTransitionOnChange
           >
             <NextIntlClientProvider messages={messages}>
-              <StatusProvider>{children}</StatusProvider>
+              <FilterProvider>
+                <StatusProvider>{children}</StatusProvider>
+              </FilterProvider>
             </NextIntlClientProvider>
           </ThemeProvider>
         </MotionProvider>

lib/network-filter-context.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+import React, { ReactNode, createContext, useContext, useState } from "react";
+
+interface FilterContextType {
+  filter: boolean;
+  setFilter: (filter: boolean) => void;
+}
+
+const FilterContext = createContext<FilterContextType | undefined>(undefined);
+
+export function FilterProvider({ children }: { children: ReactNode }) {
+  const [filter, setFilter] = useState<boolean>(false);
+
+  return (
+    <FilterContext.Provider value={{ filter, setFilter }}>
+      {children}
+    </FilterContext.Provider>
+  );
+}
+
+export function useFilter() {
+  const context = useContext(FilterContext);
+  if (context === undefined) {
+    throw new Error("useFilter must be used within a FilterProvider");
+  }
+  return context;
+}