feat: init detail page

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>

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")}

src/pages/Server.tsx

@@ -59,23 +59,26 @@ export default function Servers() {
 
   // 计算所有服务器的统计数据（用于 Overview）
   const totalServers = nezhaWsData?.servers?.length || 0;
-  const onlineServers = nezhaWsData?.servers?.filter(
+  const onlineServers =
-    (server) => formatNezhaInfo(server).online,
+    nezhaWsData?.servers?.filter((server) => formatNezhaInfo(server).online)
-  )?.length || 0;
+      ?.length || 0;
-  const offlineServers = nezhaWsData?.servers?.filter(
+  const offlineServers =
-    (server) => !formatNezhaInfo(server).online,
+    nezhaWsData?.servers?.filter((server) => !formatNezhaInfo(server).online)
-  )?.length || 0;
+      ?.length || 0;
-  const up = nezhaWsData?.servers?.reduce(
+  const up =
+    nezhaWsData?.servers?.reduce(
       (total, server) => total + server.state.net_out_transfer,
       0,
     ) || 0;
-  const down = nezhaWsData?.servers?.reduce(
+  const down =
+    nezhaWsData?.servers?.reduce(
       (total, server) => total + server.state.net_in_transfer,
       0,
     ) || 0;
 
   // 根据当前选中的分组筛选服务器（用于显示列表）
-  const filteredServers = nezhaWsData?.servers?.filter((server) => {
+  const filteredServers =
+    nezhaWsData?.servers?.filter((server) => {
       if (currentGroup === "All") return true;
       const group = groupData?.data?.find(
         (g: ServerGroup) =>

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>
+  );
+}