From fb38b0eb8a11fd8956c0bee998a71718b60c1376 Mon Sep 17 00:00:00 2001
From: hamster1963 <1410514192@qq.com>
Date: Sun, 24 Nov 2024 01:45:33 +0800
Subject: [PATCH] feat: server group

---
 index.html                                   | 15 ++--
 src/components/Footer.tsx                    | 21 +++---
 src/components/GroupSwitch.tsx               | 45 ++++++++++++
 src/components/motion/framer-lazy-feature.ts |  1 +
 src/components/motion/motion-provider.tsx    | 14 ++++
 src/lib/nezha-api.ts                         | 76 +-------------------
 src/main.tsx                                 | 36 +++++-----
 src/pages/Server.tsx                         | 48 +++++++++++--
 src/types/nezha-api.ts                       | 15 ++++
 vite.config.ts                               |  5 ++
 10 files changed, 167 insertions(+), 109 deletions(-)
 create mode 100644 src/components/GroupSwitch.tsx
 create mode 100644 src/components/motion/framer-lazy-feature.ts
 create mode 100644 src/components/motion/motion-provider.tsx

diff --git a/index.html b/index.html
index 0ebfbae..9f8ed31 100644
--- a/index.html
+++ b/index.html
@@ -5,13 +5,16 @@
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <script>
-      (function() {
-        const storageKey = 'vite-ui-theme';
-        const theme = localStorage.getItem(storageKey) || 'system';
+      (function () {
+        const storageKey = "vite-ui-theme";
+        const theme = localStorage.getItem(storageKey) || "system";
         const root = document.documentElement;
-        
-        if (theme === 'system') {
-          const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+
+        if (theme === "system") {
+          const systemTheme = window.matchMedia("(prefers-color-scheme: dark)")
+            .matches
+            ? "dark"
+            : "light";
           root.classList.add(systemTheme);
         } else {
           root.classList.add(theme);
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index b9d9af0..e2223e5 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -6,16 +6,21 @@ const Footer: React.FC = () => {
     <footer className="mx-auto w-full max-w-5xl px-4 lg:px-0 pb-4">
       <section className="flex flex-col">
         <section className="mt-1 flex items-center justify-between gap-2 text-[13px] font-light tracking-tight text-neutral-600/50 dark:text-neutral-300/50">
-          <p>©2020-{new Date().getFullYear()}{" "}
+          <p>
+            ©2020-{new Date().getFullYear()}{" "}
             <a href={"https://github.com/naiba/nezha"} target="_blank">
               Nezha
-            </a></p>
-          <p>Theme by <a
-            href={"https://github.com/hamster1963/nezha-dash-react"}
-            target="_blank"
-          >
-            Nezha-Dash
-          </a></p>
+            </a>
+          </p>
+          <p>
+            Theme by{" "}
+            <a
+              href={"https://github.com/hamster1963/nezha-dash-react"}
+              target="_blank"
+            >
+              Nezha-Dash
+            </a>
+          </p>
         </section>
       </section>
     </footer>
diff --git a/src/components/GroupSwitch.tsx b/src/components/GroupSwitch.tsx
new file mode 100644
index 0000000..cf354d9
--- /dev/null
+++ b/src/components/GroupSwitch.tsx
@@ -0,0 +1,45 @@
+import { cn } from "@/lib/utils";
+import { m } from "framer-motion";
+
+export default function GroupSwitch({
+  tabs,
+  currentTab,
+  setCurrentTab,
+}: {
+  tabs: string[];
+  currentTab: string;
+  setCurrentTab: (tab: string) => void;
+}) {
+  return (
+    <div className="z-50 flex flex-col items-start 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
+            key={tab}
+            onClick={() => setCurrentTab(tab)}
+            className={cn(
+              "relative cursor-pointer rounded-3xl px-2.5 py-[8px] text-[13px] font-[600] transition-all duration-500",
+              currentTab === tab
+                ? "text-black dark:text-white"
+                : "text-stone-400 dark:text-stone-500",
+            )}
+          >
+            {currentTab === tab && (
+              <m.div
+                layoutId="tab-switch"
+                className="absolute inset-0 z-10 h-full w-full content-center bg-white shadow-lg shadow-black/5 dark:bg-stone-700 dark:shadow-white/5"
+                style={{
+                  originY: "0px",
+                  borderRadius: 46,
+                }}
+              />
+            )}
+            <div className="relative z-20 flex items-center gap-1">
+              <p className="whitespace-nowrap">{tab}</p>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/motion/framer-lazy-feature.ts b/src/components/motion/framer-lazy-feature.ts
new file mode 100644
index 0000000..a0bf32e
--- /dev/null
+++ b/src/components/motion/framer-lazy-feature.ts
@@ -0,0 +1 @@
+export { domMax as default } from "framer-motion";
diff --git a/src/components/motion/motion-provider.tsx b/src/components/motion/motion-provider.tsx
new file mode 100644
index 0000000..84f27e8
--- /dev/null
+++ b/src/components/motion/motion-provider.tsx
@@ -0,0 +1,14 @@
+"use client";
+
+import { LazyMotion } from "framer-motion";
+
+const loadFeatures = () =>
+  import("./framer-lazy-feature").then((res) => res.default);
+
+export const MotionProvider = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <LazyMotion features={loadFeatures} strict key="framer">
+      {children}
+    </LazyMotion>
+  );
+};
diff --git a/src/lib/nezha-api.ts b/src/lib/nezha-api.ts
index 492c87a..8964152 100644
--- a/src/lib/nezha-api.ts
+++ b/src/lib/nezha-api.ts
@@ -1,77 +1,7 @@
-export const fetchUsers = async (token: string) => {
-  const response = await fetch("http://localhost:8008/api/v1/user", {
-    headers: {
-      Authorization: `Bearer ${token}`,
-    },
-  });
-  const data = await response.json();
-  if (data.error) {
-    throw new Error(data.error);
-  }
-  return data;
-};
-
-export const createUser = async (
-  token: string,
-  username: string,
-  password: string,
-) => {
-  const response = await fetch(`http://localhost:8008/api/v1/user`, {
-    method: "POST",
-    body: JSON.stringify({ username, password }),
-    headers: {
-      Authorization: `Bearer ${token}`,
-    },
-  });
-  const data = await response.json();
-  if (data.error) {
-    throw new Error(data.error);
-  }
-  return data;
-};
-
-export const deleteUser = async (token: string, ids: number[]) => {
-  const response = await fetch(
-    `http://localhost:8008/api/v1/batch-delete/user`,
-    {
-      method: "POST",
-      body: JSON.stringify(ids),
-      headers: {
-        Authorization: `Bearer ${token}`,
-      },
-    },
-  );
-  const data = await response.json();
-  if (data.error) {
-    throw new Error(data.error);
-  }
-  return data;
-};
-
-export const fetchServers = async (token: string) => {
-  const response = await fetch("http://localhost:8008/api/v1/server", {
-    headers: {
-      Authorization: `Bearer ${token}`,
-    },
-  });
-  const data = await response.json();
-  if (data.error) {
-    throw new Error(data.error);
-  }
-  return data;
-};
+import { ServerGroupResponse } from "@/types/nezha-api";
 
-export const deleteServer = async (token: string, ids: number[]) => {
-  const response = await fetch(
-    `http://localhost:8008/api/v1/batch-delete/server`,
-    {
-      method: "POST",
-      body: JSON.stringify(ids),
-      headers: {
-        Authorization: `Bearer ${token}`,
-      },
-    },
-  );
+export const fetchServerGroup = async (): Promise<ServerGroupResponse> => {
+  const response = await fetch("/api/v1/server-group");
   const data = await response.json();
   if (data.error) {
     throw new Error(data.error);
diff --git a/src/main.tsx b/src/main.tsx
index 4bf04b5..3535ac8 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -6,26 +6,30 @@ import { ThemeProvider } from "./components/ThemeProvider";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { Toaster } from "sonner";
+import { MotionProvider } from "./components/motion/motion-provider";
 
 const queryClient = new QueryClient();
 
 ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
-    <ThemeProvider storageKey="vite-ui-theme">
-      <QueryClientProvider client={queryClient}>
-        <App />
-        <Toaster duration={1000}
-      toastOptions={{
-        classNames: {
-          default:
-            "w-fit rounded-full px-2.5 py-1.5 bg-neutral-100 border border-neutral-200 backdrop-blur-xl shadow-none",
-        },
-      }}
-      position="top-center"
-      className={"flex items-center justify-center"}
-    />
-        <ReactQueryDevtools />
-      </QueryClientProvider>
-    </ThemeProvider>
+    <MotionProvider>
+      <ThemeProvider storageKey="vite-ui-theme">
+        <QueryClientProvider client={queryClient}>
+          <App />
+          <Toaster
+            duration={1000}
+            toastOptions={{
+              classNames: {
+                default:
+                  "w-fit rounded-full px-2.5 py-1.5 bg-neutral-100 border border-neutral-200 backdrop-blur-xl shadow-none",
+              },
+            }}
+            position="top-center"
+            className={"flex items-center justify-center"}
+          />
+          <ReactQueryDevtools />
+        </QueryClientProvider>
+      </ThemeProvider>
+    </MotionProvider>
   </React.StrictMode>,
 );
diff --git a/src/pages/Server.tsx b/src/pages/Server.tsx
index 87c6980..c6f18a4 100644
--- a/src/pages/Server.tsx
+++ b/src/pages/Server.tsx
@@ -3,17 +3,34 @@ import { NezhaAPIResponse } from "@/types/nezha-api";
 import ServerCard from "@/components/ServerCard";
 import { formatNezhaInfo } from "@/lib/utils";
 import ServerOverview from "@/components/ServerOverview";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { toast } from "sonner";
+import { useQuery } from "@tanstack/react-query";
+import { fetchServerGroup } from "@/lib/nezha-api";
+import GroupSwitch from "@/components/GroupSwitch";
+import { ServerGroup } from "@/types/nezha-api";
 
 export default function Servers() {
+  const { data: groupData } = useQuery({
+    queryKey: ["server-group"],
+    queryFn: () => fetchServerGroup(),
+  });
   const { lastMessage, readyState } = useWebSocket("/api/v1/ws/server", {
-    shouldReconnect: () => true, // 自动重连
-    reconnectInterval: 3000, // 重连间隔
+    shouldReconnect: () => true,
+    reconnectInterval: 3000,
   });
 
+  // 添加分组状态
+  const [currentGroup, setCurrentGroup] = useState<string>("All");
+
+  // 获取所有分组名称
+  const groupTabs = [
+    "All",
+    ...(groupData?.data?.map((item: ServerGroup) => item.group.name) || []),
+  ];
+
   useEffect(() => {
-    if (readyState == 1 ) {
+    if (readyState == 1) {
       toast.success("WebSocket connected");
     }
   }, [readyState]);
@@ -40,7 +57,7 @@ export default function Servers() {
     );
   }
 
-  // 计算服务器总数和在线数量
+  // 计算所有服务器的统计数据（用于 Overview）
   const totalServers = nezhaWsData.servers.length;
   const onlineServers = nezhaWsData.servers.filter(
     (server) => formatNezhaInfo(server).online,
@@ -57,6 +74,18 @@ export default function Servers() {
     0,
   );
 
+  // 根据当前选中的分组筛选服务器（用于显示列表）
+  const filteredServers = nezhaWsData.servers.filter((server) => {
+    if (currentGroup === "All") return true;
+    const group = groupData?.data?.find(
+      (g: ServerGroup) =>
+        g.group.name === currentGroup &&
+        Array.isArray(g.servers) &&
+        g.servers.includes(server.id),
+    );
+    return !!group;
+  });
+
   return (
     <div className="mx-auto w-full max-w-5xl px-0">
       <ServerOverview
@@ -66,8 +95,15 @@ export default function Servers() {
         up={up}
         down={down}
       />
+      <div className="mt-6">
+        <GroupSwitch
+          tabs={groupTabs}
+          currentTab={currentGroup}
+          setCurrentTab={setCurrentGroup}
+        />
+      </div>
       <section className="grid grid-cols-1 gap-2 md:grid-cols-2 mt-6">
-        {nezhaWsData.servers.map((serverInfo) => (
+        {filteredServers.map((serverInfo) => (
           <ServerCard key={serverInfo.id} serverInfo={serverInfo} />
         ))}
       </section>
diff --git a/src/types/nezha-api.ts b/src/types/nezha-api.ts
index 1686da3..9adc292 100644
--- a/src/types/nezha-api.ts
+++ b/src/types/nezha-api.ts
@@ -43,3 +43,18 @@ export interface NezhaAPIStatus {
   temperatures: number;
   gpu: number;
 }
+
+export interface ServerGroupResponse {
+  success: boolean;
+  data: ServerGroup[];
+}
+
+export interface ServerGroup {
+  group: {
+    id: number;
+    created_at: string;
+    updated_at: string;
+    name: string;
+  };
+  servers: number[];
+}
diff --git a/vite.config.ts b/vite.config.ts
index a6839f4..cd5ef15 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -17,6 +17,11 @@ export default defineConfig({
         changeOrigin: true,
         ws: true,
       },
+      "/api/v1/": {
+        target: "http://localhost:8008",
+        changeOrigin: true,
+        ws: true,
+      },
     },
   },
 });