diff --git a/src/components/GB2818Record.vue b/src/components/GB2818Record.vue
index 219835c..a38a75a 100644
--- a/src/components/GB2818Record.vue
+++ b/src/components/GB2818Record.vue
@@ -300,8 +300,54 @@ const formatFileSize = (size: number | null) => {
   return (size / 1024 / 1024 / 1024).toFixed(2) + ' GB'
 }
 
+// 页面关闭前停止播放
+const handleBeforeUnload = async () => {
+  stopPlay()
+  await stopPlaybackStream()
+}
+
+// 页面可见性变化处理（当用户切换标签页或最小化窗口时）
+const handleVisibilityChange = async () => {
+  if (document.hidden && isPlaying.value) {
+    console.log('页面不可见，停止播放以节省资源')
+    // 页面不可见时停止播放
+    await stopPlayComplete()
+  }
+}
+
+// 网络状态变化处理
+const handleOnline = () => {
+  console.log('网络已恢复')
+}
+
+const handleOffline = async () => {
+  console.log('网络已断开，停止播放')
+  if (isPlaying.value) {
+    // 网络断开时停止播放器（但不调用API，因为网络已断开）
+    stopPlay()
+    playError.value = '网络连接已断开'
+  }
+}
+
+// 组件挂载时添加各种事件监听
+if (typeof window !== 'undefined') {
+  window.addEventListener('beforeunload', handleBeforeUnload)
+  document.addEventListener('visibilitychange', handleVisibilityChange)
+  window.addEventListener('online', handleOnline)
+  window.addEventListener('offline', handleOffline)
+}
+
 // 组件卸载时清理播放器和停止流
 onUnmounted(async () => {
+  // 移除所有事件监听
+  if (typeof window !== 'undefined') {
+    window.removeEventListener('beforeunload', handleBeforeUnload)
+    document.removeEventListener('visibilitychange', handleVisibilityChange)
+    window.removeEventListener('online', handleOnline)
+    window.removeEventListener('offline', handleOffline)
+  }
+
+  // 停止播放器和流
   stopPlay()
   await stopPlaybackStream()
 })