From fffea873c4f7e4e6bc21edefd78c89419c121fe9 Mon Sep 17 00:00:00 2001
From: zdl <3489966805@qq.com>
Date: Thu, 30 Oct 2025 15:02:20 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=88=9B=E5=BB=BA=20GlobalComponents?=
 =?UTF-8?q?=20=E7=BB=9F=E4=B8=80=E7=AE=A1=E7=90=86=E5=85=A8=E5=B1=80?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 创建 src/components/GlobalComponents.js (92行)
- 集中管理 5 个全局组件: ConnectionStatusBar, ScrollToTop, AuthModalManager, NotificationContainer, NotificationTestTool
- 包含 ConnectionStatusBarWrapper 逻辑 (40行)

优势:
- 全局组件统一管理,不再分散
- App.js 减少 50+ 行代码
- 组件职责清晰,易于维护

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/components/GlobalComponents.js | 92 ++++++++++++++++++++++++++++++
 1 file changed, 92 insertions(+)
 create mode 100644 src/components/GlobalComponents.js

diff --git a/src/components/GlobalComponents.js b/src/components/GlobalComponents.js
new file mode 100644
index 00000000..1768c366
--- /dev/null
+++ b/src/components/GlobalComponents.js
@@ -0,0 +1,92 @@
+// src/components/GlobalComponents.js
+// 集中管理应用的全局组件
+
+import React from 'react';
+import { useNotification } from '../contexts/NotificationContext';
+import { logger } from '../utils/logger';
+
+// Global Components
+import AuthModalManager from './Auth/AuthModalManager';
+import NotificationContainer from './NotificationContainer';
+import NotificationTestTool from './NotificationTestTool';
+import ConnectionStatusBar from './ConnectionStatusBar';
+import ScrollToTop from './ScrollToTop';
+
+/**
+ * ConnectionStatusBar 包装组件
+ * 需要在 NotificationProvider 内部使用，所以在这里包装
+ */
+function ConnectionStatusBarWrapper() {
+    const { connectionStatus, reconnectAttempt, maxReconnectAttempts, retryConnection } = useNotification();
+    const [isDismissed, setIsDismissed] = React.useState(false);
+
+    // 监听连接状态变化
+    React.useEffect(() => {
+        // 重连成功后，清除 dismissed 状态
+        if (connectionStatus === 'connected' && isDismissed) {
+            setIsDismissed(false);
+            // 从 localStorage 清除 dismissed 标记
+            localStorage.removeItem('connection_status_dismissed');
+        }
+
+        // 从 localStorage 恢复 dismissed 状态
+        if (connectionStatus !== 'connected' && !isDismissed) {
+            const dismissed = localStorage.getItem('connection_status_dismissed');
+            if (dismissed === 'true') {
+                setIsDismissed(true);
+            }
+        }
+    }, [connectionStatus, isDismissed]);
+
+    const handleClose = () => {
+        // 用户手动关闭，保存到 localStorage
+        setIsDismissed(true);
+        localStorage.setItem('connection_status_dismissed', 'true');
+        logger.info('App', 'Connection status bar dismissed by user');
+    };
+
+    return (
+        <ConnectionStatusBar
+            status={connectionStatus}
+            reconnectAttempt={reconnectAttempt}
+            maxReconnectAttempts={maxReconnectAttempts}
+            onRetry={retryConnection}
+            onClose={handleClose}
+            isDismissed={isDismissed}
+        />
+    );
+}
+
+/**
+ * GlobalComponents - 全局组件容器
+ * 集中管理所有全局级别的组件,如弹窗、通知、状态栏等
+ *
+ * 包含的组件:
+ * - ConnectionStatusBarWrapper: Socket 连接状态条
+ * - ScrollToTop: 路由切换时自动滚动到顶部
+ * - AuthModalManager: 认证弹窗管理器
+ * - NotificationContainer: 通知容器
+ * - NotificationTestTool: 通知测试工具 (仅开发环境)
+ */
+export function GlobalComponents() {
+    return (
+        <>
+            {/* Socket 连接状态条 */}
+            <ConnectionStatusBarWrapper />
+
+            {/* 路由切换时自动滚动到顶部 */}
+            <ScrollToTop />
+
+            {/* 认证弹窗管理器 */}
+            <AuthModalManager />
+
+            {/* 通知容器 */}
+            <NotificationContainer />
+
+            {/* 通知测试工具 (仅开发环境) */}
+            <NotificationTestTool />
+        </>
+    );
+}
+
+export default GlobalComponents;