From 05183e64bc9cda1e0e97f5c35161b840ebb5b19a Mon Sep 17 00:00:00 2001
From: hamster1963 <1410514192@qq.com>
Date: Sun, 24 Nov 2024 02:11:45 +0800
Subject: [PATCH] feat: init detail page

---
 src/App.tsx                   |  2 ++
 src/components/ServerCard.tsx |  8 ++++--
 src/pages/Server.tsx          | 51 ++++++++++++++++++-----------------
 src/pages/ServerDetail.tsx    | 51 +++++++++++++++++++++++++++++++++++
 4 files changed, 86 insertions(+), 26 deletions(-)
 create mode 100644 src/pages/ServerDetail.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 9dbda1b..1646951 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -3,6 +3,7 @@ import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
 import Header from "./components/Header";
 import Footer from "./components/Footer";
 import Server from "./pages/Server";
+import ServerDetail from "./pages/ServerDetail";
 
 const App: React.FC = () => {
   return (
@@ -12,6 +13,7 @@ const App: React.FC = () => {
           <Header />
           <Routes>
             <Route path="/" element={<Server />} />
+            <Route path="/server/:id" element={<ServerDetail />} />
           </Routes>
           <Footer />
         </main>
diff --git a/src/components/ServerCard.tsx b/src/components/ServerCard.tsx
index 1b34273..5b66d8f 100644
--- a/src/components/ServerCard.tsx
+++ b/src/components/ServerCard.tsx
@@ -4,8 +4,10 @@ import ServerUsageBar from "@/components/ServerUsageBar";
 import { cn, formatNezhaInfo } from "@/lib/utils";
 import { NezhaAPI } from "@/types/nezha-api";
 import { Card } from "./ui/card";
+import { useNavigate } from "react-router-dom";
 
 export default function ServerCard({ serverInfo }: { serverInfo: NezhaAPI }) {
+  const navigate = useNavigate();
   const { name, country_code, online, cpu, up, down, mem, stg } =
     formatNezhaInfo(serverInfo);
 
@@ -15,8 +17,9 @@ export default function ServerCard({ serverInfo }: { serverInfo: NezhaAPI }) {
     <section>
       <Card
         className={cn(
-          "flex flex-col items-center justify-start gap-3 p-3 md:px-5 lg:flex-row",
+          "flex flex-col items-center justify-start gap-3 p-3 md:px-5 lg:flex-row cursor-pointer hover:bg-accent/50 transition-colors",
         )}
+        onClick={() => navigate(`/server/${serverInfo.id}`)}
       >
         <section
           className={cn("grid items-center gap-2 lg:w-40")}
@@ -88,8 +91,9 @@ export default function ServerCard({ serverInfo }: { serverInfo: NezhaAPI }) {
   ) : (
     <Card
       className={cn(
-        "flex flex-col items-center justify-start gap-3 p-3 md:px-5 lg:flex-row",
+        "flex flex-col items-center justify-start gap-3 p-3 md:px-5 lg:flex-row cursor-pointer hover:bg-accent/50 transition-colors",
       )}
+      onClick={() => navigate(`/server/${serverInfo.id}`)}
     >
       <section
         className={cn("grid items-center gap-2 lg:w-40")}
diff --git a/src/pages/Server.tsx b/src/pages/Server.tsx
index cf00a9f..c82c927 100644
--- a/src/pages/Server.tsx
+++ b/src/pages/Server.tsx
@@ -59,32 +59,35 @@ export default function Servers() {
 
   // 计算所有服务器的统计数据（用于 Overview）
   const totalServers = nezhaWsData?.servers?.length || 0;
-  const onlineServers = nezhaWsData?.servers?.filter(
-    (server) => formatNezhaInfo(server).online,
-  )?.length || 0;
-  const offlineServers = nezhaWsData?.servers?.filter(
-    (server) => !formatNezhaInfo(server).online,
-  )?.length || 0;
-  const up = nezhaWsData?.servers?.reduce(
-    (total, server) => total + server.state.net_out_transfer,
-    0,
-  ) || 0;
-  const down = nezhaWsData?.servers?.reduce(
-    (total, server) => total + server.state.net_in_transfer,
-    0,
-  ) || 0;
+  const onlineServers =
+    nezhaWsData?.servers?.filter((server) => formatNezhaInfo(server).online)
+      ?.length || 0;
+  const offlineServers =
+    nezhaWsData?.servers?.filter((server) => !formatNezhaInfo(server).online)
+      ?.length || 0;
+  const up =
+    nezhaWsData?.servers?.reduce(
+      (total, server) => total + server.state.net_out_transfer,
+      0,
+    ) || 0;
+  const down =
+    nezhaWsData?.servers?.reduce(
+      (total, server) => total + server.state.net_in_transfer,
+      0,
+    ) || 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;
-  }) || [];
+  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">
diff --git a/src/pages/ServerDetail.tsx b/src/pages/ServerDetail.tsx
new file mode 100644
index 0000000..b5ddb72
--- /dev/null
+++ b/src/pages/ServerDetail.tsx
@@ -0,0 +1,51 @@
+import { useParams } from "react-router-dom";
+import useWebSocket from "react-use-websocket";
+import { NezhaAPIResponse } from "@/types/nezha-api";
+
+export default function ServerDetail() {
+  const { id } = useParams();
+  const { lastMessage, readyState } = useWebSocket("/api/v1/ws/server", {
+    shouldReconnect: () => true,
+    reconnectInterval: 3000,
+  });
+
+
+  // 检查连接状态
+  if (readyState !== 1) {
+    return (
+      <div className="flex flex-col items-center justify-center">
+        <p className="font-semibold text-sm">connecting...</p>
+      </div>
+    );
+  }
+
+  // 解析消息
+  const nezhaWsData = lastMessage
+    ? (JSON.parse(lastMessage.data) as NezhaAPIResponse)
+    : null;
+
+  if (!nezhaWsData) {
+    return (
+      <div className="flex flex-col items-center justify-center">
+        <p className="font-semibold text-sm">processing...</p>
+      </div>
+    );
+  }
+
+  const server = nezhaWsData.servers.find(s => s.id === Number(id));
+
+  if (!server) {
+    return (
+      <div className="flex flex-col items-center justify-center">
+        <p className="font-semibold text-sm">Server not found</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="mx-auto w-full max-w-5xl px-0">
+      <h1 className="text-2xl font-bold mb-4">{server.name}</h1>
+      {/* TODO: Add more server details here */}
+    </div>
+  );
+}