diff --git a/src/context/websocket-provider.tsx b/src/context/websocket-provider.tsx
index d63bd8a..948d80e 100644
--- a/src/context/websocket-provider.tsx
+++ b/src/context/websocket-provider.tsx
@@ -106,15 +106,29 @@ export const WebSocketProvider: React.FC<WebSocketProviderProps> = ({ url, child
   useEffect(() => {
     connect()
 
+    // 添加页面可见性变化监听
+    const handleVisibilityChange = () => {
+      if (document.hidden) {
+        // 页面隐藏时断开连接
+        cleanup()
+      } else {
+        // 页面可见时重新连接
+        connect()
+      }
+    }
+
     // 添加页面卸载事件监听
     const handleBeforeUnload = () => {
       cleanup()
     }
-    window.addEventListener('beforeunload', handleBeforeUnload)
+
+    document.addEventListener("visibilitychange", handleVisibilityChange)
+    window.addEventListener("beforeunload", handleBeforeUnload)
 
     return () => {
       cleanup()
-      window.removeEventListener('beforeunload', handleBeforeUnload)
+      document.removeEventListener("visibilitychange", handleVisibilityChange)
+      window.removeEventListener("beforeunload", handleBeforeUnload)
     }
   }, [url])