feat: sockt 弹窗功能添加

src/App.js

@@ -43,22 +43,49 @@ const TradingSimulation = React.lazy(() => import("views/TradingSimulation"));
 // Contexts
 import { AuthProvider } from "contexts/AuthContext";
 import { AuthModalProvider } from "contexts/AuthModalContext";
-import { NotificationProvider } from "contexts/NotificationContext";
+import { NotificationProvider, useNotification } from "contexts/NotificationContext";
 
 // Components
 import ProtectedRoute from "components/ProtectedRoute";
 import ErrorBoundary from "components/ErrorBoundary";
 import AuthModalManager from "components/Auth/AuthModalManager";
 import NotificationContainer from "components/NotificationContainer";
+import ConnectionStatusBar from "components/ConnectionStatusBar";
 import NotificationTestTool from "components/NotificationTestTool";
 import ScrollToTop from "components/ScrollToTop";
 import { logger } from "utils/logger";
 
+/**
+ * ConnectionStatusBar 包装组件
+ * 需要在 NotificationProvider 内部使用，所以单独提取
+ */
+function ConnectionStatusBarWrapper() {
+    const { connectionStatus, reconnectAttempt, retryConnection } = useNotification();
+
+    const handleClose = () => {
+        // 关闭状态条（可选，当前不实现）
+        // 用户可以通过刷新页面来重新显示
+    };
+
+    return (
+        <ConnectionStatusBar
+            status={connectionStatus}
+            reconnectAttempt={reconnectAttempt}
+            maxReconnectAttempts={5}
+            onRetry={retryConnection}
+            onClose={handleClose}
+        />
+    );
+}
+
 function AppContent() {
     const { colorMode } = useColorMode();
 
     return (
         <Box minH="100vh" bg={colorMode === 'dark' ? 'gray.800' : 'white'}>
+            {/* Socket 连接状态条 */}
+            <ConnectionStatusBarWrapper />
+
             {/* 路由切换时自动滚动到顶部 */}
             <ScrollToTop />
             <Routes>