feat: 修改文件 │

│                                                                                           │
     │ 1. src/services/socketService.js - 指数退避 + 无限重试                                    │
     │ 2. src/components/ConnectionStatusBar/index.js - UI 优化 + 自动消失                       │
     │ 3. src/App.js - handleClose 实现 + dismissed 状态管理                                     │
     │ 4. src/contexts/NotificationContext.js - 添加成功状态检测                                 │
     │ 5. NOTIFICATION_SYSTEM.md - v2.11.0 文档更新

src/components/ConnectionStatusBar/index.js

@@ -27,6 +27,7 @@ export const CONNECTION_STATUS = {
     DISCONNECTED: 'disconnected', // 已断开
     RECONNECTING: 'reconnecting', // 重连中
     FAILED: 'failed',             // 连接失败
+    RECONNECTED: 'reconnected',   // 重连成功（显示2秒后自动消失）
 };
 
 /**
@@ -38,9 +39,10 @@ const ConnectionStatusBar = ({
     maxReconnectAttempts = 5,
     onRetry,
     onClose,
+    isDismissed = false, // 用户是否手动关闭
 }) => {
-    // 仅在非正常状态时显示
-    const shouldShow = status !== CONNECTION_STATUS.CONNECTED;
+    // 显示条件：非正常状态 且 用户未手动关闭
+    const shouldShow = status !== CONNECTION_STATUS.CONNECTED && !isDismissed;
 
     // 状态配置
     const statusConfig = {
@@ -52,13 +54,20 @@ const ConnectionStatusBar = ({
         [CONNECTION_STATUS.RECONNECTING]: {
             status: 'warning',
             title: '正在重新连接',
-            description: `尝试重连中 (第 ${reconnectAttempt}/${maxReconnectAttempts} 次)`,
+            description: maxReconnectAttempts === Infinity
+                ? `尝试重连中 (第 ${reconnectAttempt} 次)`
+                : `尝试重连中 (第 ${reconnectAttempt}/${maxReconnectAttempts} 次)`,
         },
         [CONNECTION_STATUS.FAILED]: {
             status: 'error',
             title: '连接失败',
             description: '无法连接到服务器，请检查网络连接',
         },
+        [CONNECTION_STATUS.RECONNECTED]: {
+            status: 'success',
+            title: '已重新连接',
+            description: '连接已恢复',
+        },
     };
 
     const config = statusConfig[status] || statusConfig[CONNECTION_STATUS.DISCONNECTED];
@@ -68,10 +77,12 @@ const ConnectionStatusBar = ({
         {
             warning: 'orange.50',
             error: 'red.50',
+            success: 'green.50',
         }[config.status],
         {
-            warning: 'orange.900',
-            error: 'red.900',
+            warning: 'rgba(251, 146, 60, 0.15)', // orange with transparency
+            error: 'rgba(239, 68, 68, 0.15)',    // red with transparency
+            success: 'rgba(34, 197, 94, 0.15)',  // green with transparency
         }[config.status]
     );
 
@@ -79,7 +90,7 @@ const ConnectionStatusBar = ({
         <Slide
             direction="top"
             in={shouldShow}
-            style={{ zIndex: 10000 }}
+            style={{ zIndex: 1050 }} // 降低 zIndex，避免遮挡 modal
         >
             <Alert
                 status={config.status}
@@ -87,8 +98,9 @@ const ConnectionStatusBar = ({
                 bg={bg}
                 borderBottom="1px solid"
                 borderColor={useColorModeValue('gray.200', 'gray.700')}
-                py={3}
+                py={2} // 减小高度，更紧凑
                 px={{ base: 4, md: 6 }}
+                opacity={0.95} // 半透明
             >
                 <AlertIcon />
                 <Box flex="1">
@@ -116,8 +128,8 @@ const ConnectionStatusBar = ({
                     </Button>
                 )}
 
-                {/* 关闭按钮（仅失败状态显示） */}
-                {status === CONNECTION_STATUS.FAILED && onClose && (
+                {/* 关闭按钮（所有非正常状态都显示） */}
+                {status !== CONNECTION_STATUS.CONNECTED && onClose && (
                     <CloseButton
                         onClick={onClose}
                         size="sm"