feat: detail page

src/components/loading/ServerDetailLoading.tsx

@@ -0,0 +1,38 @@
+
+import { Skeleton } from "@/components/ui/skeleton";
+import { BackIcon } from "../Icon";
+import { useNavigate } from "react-router-dom";
+
+export function ServerDetailChartLoading() {
+  return (
+    <div>
+      <section className="grid md:grid-cols-2 lg:grid-cols-3 grid-cols-1 gap-3">
+        <Skeleton className="h-[182px] w-full rounded-[5px] bg-muted-foreground/10 animate-none"></Skeleton>
+        <Skeleton className="h-[182px] w-full rounded-[5px] bg-muted-foreground/10 animate-none"></Skeleton>
+        <Skeleton className="h-[182px] w-full rounded-[5px] bg-muted-foreground/10 animate-none"></Skeleton>
+        <Skeleton className="h-[182px] w-full rounded-[5px] bg-muted-foreground/10 animate-none"></Skeleton>
+        <Skeleton className="h-[182px] w-full rounded-[5px] bg-muted-foreground/10 animate-none"></Skeleton>
+        <Skeleton className="h-[182px] w-full rounded-[5px] bg-muted-foreground/10 animate-none"></Skeleton>
+      </section>
+    </div>
+  );
+}
+
+export function ServerDetailLoading() {
+  const navigate = useNavigate();
+
+  return (
+    <div className="mx-auto w-full max-w-5xl px-0">
+      <div
+        onClick={() => {
+          navigate("/");
+        }}
+        className="flex flex-none cursor-pointer font-semibold leading-none items-center break-all tracking-tight gap-0.5 text-xl"
+      >
+        <BackIcon />
+        <Skeleton className="h-[20px] w-24 rounded-[5px] bg-muted-foreground/10 animate-none"></Skeleton>
+      </div>
+      <Skeleton className="flex flex-wrap gap-2 h-[81px] w-1/2 mt-3 rounded-[5px] bg-muted-foreground/10 animate-none"></Skeleton>
+    </div>
+  );
+}

src/components/ui/badge.tsx

@@ -0,0 +1,36 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive:
+          "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+        outline: "text-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return (
+    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+  )
+}
+
+export { Badge, badgeVariants }

src/hooks/use-websocket.tsx

@@ -1,107 +0,0 @@
-import { useState, useEffect, useRef, useCallback } from "react";
-
-export interface WebSocketHook {
-  socket: WebSocket | null;
-  connected: boolean;
-  message: string | null;
-  sendMessage: (msg: string) => void;
-}
-
-export default function useWebSocket(url: string): WebSocketHook {
-  const [socket, setSocket] = useState<WebSocket | null>(null);
-  const [message, setMessage] = useState<string | null>(null);
-  const [connected, setConnected] = useState<boolean>(false);
-  const socketRef = useRef<WebSocket | null>(null);
-  const reconnectAttempts = useRef<number>(0);
-  const reconnectTimeout = useRef<NodeJS.Timeout | null>(null);
-  const isUnmounted = useRef<boolean>(false);
-
-  const connect = useCallback(() => {
-    if (isUnmounted.current) return;
-
-    console.log("Connecting to WebSocket...");
-
-    console.log("WebSocket URL:", url);
-
-    const ws = new WebSocket(url);
-    setSocket(ws);
-    socketRef.current = ws;
-
-    ws.onopen = () => {
-      setConnected(true);
-      reconnectAttempts.current = 0;
-    };
-
-    ws.onmessage = (event: MessageEvent) => {
-      setMessage(event.data);
-    };
-
-    ws.onerror = (error) => {
-      console.error("WebSocket Error:", error);
-      // 在错误发生时主动关闭连接，触发重连
-      if (ws.readyState === WebSocket.OPEN) {
-        ws.close();
-      }
-    };
-
-    ws.onclose = () => {
-      setConnected(false);
-      // 清理当前的 socket
-      socketRef.current = null;
-
-      if (!isUnmounted.current) {
-        // 检查是否已经在重连中
-        if (reconnectTimeout.current) {
-          clearTimeout(reconnectTimeout.current);
-        }
-
-        // Attempt to reconnect with increased max attempts
-        if (reconnectAttempts.current < 10) {
-          const timeout = Math.min(
-            Math.pow(2, reconnectAttempts.current) * 1000,
-            30000,
-          ); // 最大30秒
-          reconnectAttempts.current += 1;
-          console.log(
-            `Attempting to reconnect in ${timeout / 1000} seconds...`,
-          );
-          reconnectTimeout.current = setTimeout(() => {
-            connect();
-          }, timeout);
-        } else {
-          console.warn(
-            "Max reconnect attempts reached. Please refresh the page to try again.",
-          );
-        }
-      }
-    };
-  }, [url]);
-
-  useEffect(() => {
-    connect();
-
-    return () => {
-      isUnmounted.current = true;
-      if (socketRef.current) {
-        socketRef.current.close();
-      }
-      if (reconnectTimeout.current) {
-        clearTimeout(reconnectTimeout.current);
-      }
-    };
-  }, [connect]);
-
-  // Function to send messages
-  const sendMessage = useCallback((msg: string) => {
-    if (socketRef.current && socketRef.current.readyState === WebSocket.OPEN) {
-      socketRef.current.send(msg);
-    } else {
-      console.warn(
-        "WebSocket is not open. Ready state:",
-        socketRef.current?.readyState,
-      );
-    }
-  }, []);
-
-  return { socket, message, sendMessage, connected };
-}

src/lib/utils.ts

@@ -15,6 +15,8 @@ export function formatNezhaInfo(serverInfo: NezhaAPI) {
     up: serverInfo.state.net_out_speed / 1024 / 1024 || 0,
     down: serverInfo.state.net_in_speed / 1024 / 1024 || 0,
     online: Date.now() - lastActiveTime <= 300000,
+    uptime: serverInfo.state.uptime || 0,
+    version: serverInfo.host.version || null,
     tcp: serverInfo.state.tcp_conn_count || 0,
     udp: serverInfo.state.udp_conn_count || 0,
     mem: (serverInfo.state.mem_used / serverInfo.host.mem_total) * 100 || 0,

src/pages/ServerDetail.tsx

@@ -1,8 +1,17 @@
-import { useParams } from "react-router-dom";
+
-import useWebSocket from "react-use-websocket";
+import { BackIcon } from "@/components/Icon";
+import { ServerDetailLoading } from "@/components/loading/ServerDetailLoading";
+import ServerFlag from "@/components/ServerFlag";
+import { Badge } from "@/components/ui/badge";
+import { Card, CardContent } from "@/components/ui/card";
+import { cn, formatBytes, formatNezhaInfo } from "@/lib/utils";
 import { NezhaAPIResponse } from "@/types/nezha-api";
+import { useNavigate, useParams } from "react-router-dom";
+import useWebSocket from "react-use-websocket";
+
 
 export default function ServerDetail() {
+  const navigate = useNavigate();
   const { id } = useParams();
   const { lastMessage, readyState } = useWebSocket("/api/v1/ws/server", {
     shouldReconnect: () => true,
@@ -25,27 +34,140 @@ export default function ServerDetail() {
     : null;
 
   if (!nezhaWsData) {
-    return (
+    return <ServerDetailLoading />;
-      <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));
+  const server = nezhaWsData.servers.find((s) => s.id === Number(id));
 
   if (!server) {
-    return (
+    return <ServerDetailLoading />;
-      <div className="flex flex-col items-center justify-center">
-        <p className="font-semibold text-sm">Server not found</p>
-      </div>
-    );
   }
 
+  const { name, online,uptime,version } =
+    formatNezhaInfo(server);
+  
+
+
   return (
     <div className="mx-auto w-full max-w-5xl px-0">
-      <h1 className="text-2xl font-bold mb-4">{server.name}</h1>
+      <div
-      {/* TODO: Add more server details here */}
+        onClick={() => navigate("/")}
+        className="flex flex-none cursor-pointer font-semibold leading-none items-center break-all tracking-tight gap-0.5 text-xl"
+      >
+        <BackIcon />
+        {name}
+      </div>
+      <section className="flex flex-wrap gap-2 mt-3">
+        <Card className="rounded-[10px] bg-transparent border-none shadow-none">
+          <CardContent className="px-1.5 py-1">
+            <section className="flex flex-col items-start gap-0.5">
+              <p className="text-xs text-muted-foreground">{"Status"}</p>
+              <Badge
+                className={cn(
+                  "text-[9px] rounded-[6px] w-fit px-1 py-0 -mt-[0.3px] dark:text-white",
+                  {
+                    " bg-green-800": online,
+                    " bg-red-600": !online,
+                  },
+                )}
+              >
+                {online ? "Online" : "Offline"}
+              </Badge>
+            </section>
+          </CardContent>
+        </Card>
+        <Card className="rounded-[10px] bg-transparent border-none shadow-none">
+          <CardContent className="px-1.5 py-1">
+            <section className="flex flex-col items-start gap-0.5">
+              <p className="text-xs text-muted-foreground">{"Uptime"}</p>
+              <div className="text-xs">
+                {" "}
+                {online ? (uptime / 86400).toFixed(0) : "N/A"}{" "}
+                {"Days"}{" "}
+              </div>
+            </section>
+          </CardContent>
+        </Card>
+        <Card className="rounded-[10px] bg-transparent border-none shadow-none">
+          <CardContent className="px-1.5 py-1">
+            <section className="flex flex-col items-start gap-0.5">
+              <p className="text-xs text-muted-foreground">{"Version"}</p>
+              <div className="text-xs">{version || "Unknown"} </div>
+            </section>
+          </CardContent>
+        </Card>
+        <Card className="rounded-[10px] bg-transparent border-none shadow-none">
+          <CardContent className="px-1.5 py-1">
+            <section className="flex flex-col items-start gap-0.5">
+              <p className="text-xs text-muted-foreground">{"Arch"}</p>
+              <div className="text-xs">{server.host.arch || "Unknown"} </div>
+            </section>
+          </CardContent>
+        </Card>
+        <Card className="rounded-[10px] bg-transparent border-none shadow-none">
+          <CardContent className="px-1.5 py-1">
+            <section className="flex flex-col items-start gap-0.5">
+              <p className="text-xs text-muted-foreground">{"Mem"}</p>
+              <div className="text-xs">{formatBytes(server.host.mem_total)}</div>
+            </section>
+          </CardContent>
+        </Card>
+        <Card className="rounded-[10px] bg-transparent border-none shadow-none">
+          <CardContent className="px-1.5 py-1">
+            <section className="flex flex-col items-start gap-0.5">
+              <p className="text-xs text-muted-foreground">{"Disk"}</p>
+              <div className="text-xs">{formatBytes(server.host.disk_total)}</div>
+            </section>
+          </CardContent>
+        </Card>
+        <Card className="rounded-[10px] bg-transparent border-none shadow-none">
+          <CardContent className="px-1.5 py-1">
+            <section className="flex flex-col items-start gap-0.5">
+              <p className="text-xs text-muted-foreground">{"Region"}</p>
+              <section className="flex items-start gap-1">
+                <div className="text-xs text-start">
+                  {server.host.country_code?.toUpperCase() || "Unknown"}
+                </div>
+                {server.host.country_code && (<ServerFlag
+                  className="text-[11px] -mt-[1px]"
+                  country_code={server.host.country_code}
+                />)}
+                
+              </section>
+            </section>
+          </CardContent>
+        </Card>
+      </section>
+      <section className="flex flex-wrap gap-2 mt-1">
+        <Card className="rounded-[10px] bg-transparent border-none shadow-none">
+          <CardContent className="px-1.5 py-1">
+            <section className="flex flex-col items-start gap-0.5">
+              <p className="text-xs text-muted-foreground">{"System"}</p>
+              {server.host.platform ? (
+                <div className="text-xs">
+                  {" "}
+                  {server.host.platform || "Unknown"} -{" "}
+                  {server.host.platform_version}{" "}
+                </div>
+              ) : (
+                <div className="text-xs">Unknown</div>
+              )}
+            </section>
+          </CardContent>
+        </Card>
+        <Card className="rounded-[10px] bg-transparent border-none shadow-none">
+          <CardContent className="px-1.5 py-1">
+            <section className="flex flex-col items-start gap-0.5">
+              <p className="text-xs text-muted-foreground">{"CPU"}</p>
+              {server.host.cpu ? (
+                <div className="text-xs"> {server.host.cpu}</div>
+              ) : (
+                <div className="text-xs">Unknown</div>
+              )}
+            </section>
+          </CardContent>
+        </Card>
+      </section>
     </div>
   );
 }