feat: connected toast

hamster1963 · Nov 23, 2024 · 82a7e0f · 82a7e0f
1 parent 3f940d6
commit 82a7e0f
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 4 deletions.
diff --git a/src/main.tsx b/src/main.tsx
@@ -11,10 +11,19 @@ const queryClient = new QueryClient();
 
 ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
-    <ThemeProvider defaultTheme="dark" storageKey="vite-ui-theme">
+    <ThemeProvider defaultTheme="light" storageKey="vite-ui-theme">
       <QueryClientProvider client={queryClient}>
         <App />
-        <Toaster richColors position="top-right" />
+        <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>

diff --git a/src/pages/Server.tsx b/src/pages/Server.tsx
@@ -3,16 +3,28 @@ 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 { toast } from "sonner";
 
 export default function Servers() {
   const { lastMessage, readyState } = useWebSocket("/api/v1/ws/server", {
     shouldReconnect: () => true, // 自动重连
     reconnectInterval: 3000, // 重连间隔
   });
 
+  useEffect(() => {
+    if (readyState == 1 ) {
+      toast.success("WebSocket connected");
+    }
+  }, [readyState]);
+
   // 检查连接状态
   if (readyState !== 1) {
-    return null;
+    return (
+      <div className="flex flex-col items-center justify-center ">
+        <p className="font-semibold text-sm">connecting...</p>
+      </div>
+    );
   }
 
   // 解析消息
@@ -23,7 +35,7 @@ export default function Servers() {
   if (!nezhaWsData) {
     return (
       <div className="flex flex-col items-center justify-center ">
-        <p className="font-semibold text-sm">等待数据...</p>
+        <p className="font-semibold text-sm">processing...</p>
       </div>
     );
   }