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 ( + + ); +} + +/** + * GlobalComponents - 全局组件容器 + * 集中管理所有全局级别的组件,如弹窗、通知、状态栏等 + * + * 包含的组件: + * - ConnectionStatusBarWrapper: Socket 连接状态条 + * - ScrollToTop: 路由切换时自动滚动到顶部 + * - AuthModalManager: 认证弹窗管理器 + * - NotificationContainer: 通知容器 + * - NotificationTestTool: 通知测试工具 (仅开发环境) + */ +export function GlobalComponents() { + return ( + <> + {/* Socket 连接状态条 */} + + + {/* 路由切换时自动滚动到顶部 */} + + + {/* 认证弹窗管理器 */} + + + {/* 通知容器 */} + + + {/* 通知测试工具 (仅开发环境) */} + + + ); +} + +export default GlobalComponents;