refactor: streamline app initialization and enhance WebSocket cleanup logic

src/hooks/use-cleanup.ts

@@ -0,0 +1,35 @@
+import { useEffect, useRef } from "react";
+
+/**
+ * 资源清理 Hook
+ * 用于在组件卸载或窗口关闭时统一清理资源
+ */
+export const useCleanup = () => {
+  const cleanupFnsRef = useRef<Set<() => void>>(new Set());
+
+  const registerCleanup = (fn: () => void) => {
+    cleanupFnsRef.current.add(fn);
+    return () => {
+      cleanupFnsRef.current.delete(fn);
+    };
+  };
+
+  const cleanup = () => {
+    cleanupFnsRef.current.forEach((fn) => {
+      try {
+        fn();
+      } catch (error) {
+        console.error("[资源清理] 清理失败:", error);
+      }
+    });
+    cleanupFnsRef.current.clear();
+  };
+
+  useEffect(() => {
+    return () => {
+      cleanup();
+    };
+  }, []);
+
+  return { registerCleanup, cleanup };
+};

src/hooks/use-connection-data.ts

@@ -87,7 +87,12 @@ export const useConnectionData = () => {
       }
 
       return () => {
+        if (timeoutRef.current) {
+          clearTimeout(timeoutRef.current);
+          timeoutRef.current = null;
+        }
         ws.current?.close();
+        ws.current = null;
       };
     },
     {

src/hooks/use-listen.ts

@@ -13,9 +13,26 @@ export const useListen = () => {
     unlistenFns.current.push(unlisten);
     return unlisten;
   };
+
   const removeAllListeners = () => {
-    unlistenFns.current.forEach((unlisten) => unlisten());
-    unlistenFns.current = [];
+    const errors: Error[] = [];
+
+    unlistenFns.current.forEach((unlisten) => {
+      try {
+        unlisten();
+      } catch (error) {
+        errors.push(error instanceof Error ? error : new Error(String(error)));
+      }
+    });
+
+    if (errors.length > 0) {
+      console.warn(
+        `[useListen] 清理监听器时发生 ${errors.length} 个错误`,
+        errors,
+      );
+    }
+
+    unlistenFns.current.length = 0;
   };
 
   const setupCloseListener = async function () {
@@ -26,6 +43,7 @@ export const useListen = () => {
 
   return {
     addListener,
+    removeAllListeners,
     setupCloseListener,
   };
 };

src/hooks/use-log-data.ts

@@ -120,7 +120,12 @@ export const useLogData = () => {
       }
 
       return () => {
+        if (timeoutRef.current) {
+          clearTimeout(timeoutRef.current);
+          timeoutRef.current = null;
+        }
         ws.current?.close();
+        ws.current = null;
       };
     },
     {

src/hooks/use-memory-data.ts

@@ -63,7 +63,12 @@ export const useMemoryData = () => {
       }
 
       return () => {
+        if (timeoutRef.current) {
+          clearTimeout(timeoutRef.current);
+          timeoutRef.current = null;
+        }
         ws.current?.close();
+        ws.current = null;
       };
     },
     {

src/hooks/use-traffic-data.ts

@@ -69,7 +69,12 @@ export const useTrafficData = () => {
       }
 
       return () => {
+        if (timeoutRef.current) {
+          clearTimeout(timeoutRef.current);
+          timeoutRef.current = null;
+        }
         ws.current?.close();
+        ws.current = null;
       };
     },
     {