调整socket对应的浏览器通知处理逻辑

.claude/settings.local.json

@@ -5,7 +5,8 @@
       "Bash(npm run lint:check)",
       "Bash(npm run build)",
       "Bash(chmod +x /Users/qiye/Desktop/jzqy/vf_react/scripts/*.sh)",
-      "Bash(node scripts/parseIndustryCSV.js)"
+      "Bash(node scripts/parseIndustryCSV.js)",
+      "Bash(cat:*)"
     ],
     "deny": [],
     "ask": []

src/hooks/useEventNotifications.js

@@ -60,30 +60,47 @@ export const useEventNotifications = (options = {}) => {
         // 连接状态监听
         const handleConnect = () => {
             console.log('[useEventNotifications DEBUG] ✓ WebSocket 已连接');
+            logger.info('useEventNotifications', 'WebSocket connected');
             setIsConnected(true);
             setError(null);
         };
 
         const handleDisconnect = () => {
             console.log('[useEventNotifications DEBUG] ⚠️ WebSocket 已断开');
+            logger.warn('useEventNotifications', 'WebSocket disconnected');
             setIsConnected(false);
         };
 
         const handleConnectError = (err) => {
             console.error('[useEventNotifications ERROR] WebSocket 连接错误:', err);
+            logger.error('useEventNotifications', 'WebSocket connect error', err);
             setError(err);
             setIsConnected(false);
         };
 
-        // 连接 WebSocket
+        // 监听连接事件（必须在connect之前设置，否则可能错过事件）
-        console.log('[useEventNotifications DEBUG] 准备连接 WebSocket...');
-        socketService.connect();
-
-        // 监听连接事件
         socketService.on('connect', handleConnect);
         socketService.on('disconnect', handleDisconnect);
         socketService.on('connect_error', handleConnectError);
 
+        // 连接 WebSocket
+        console.log('[useEventNotifications DEBUG] 准备连接 WebSocket...');
+        logger.info('useEventNotifications', 'Initializing WebSocket connection');
+
+        // 先检查是否已经连接
+        const alreadyConnected = socketService.isConnected();
+        console.log('[useEventNotifications DEBUG] 当前连接状态:', alreadyConnected);
+        logger.info('useEventNotifications', 'Pre-connection check', { isConnected: alreadyConnected });
+
+        if (alreadyConnected) {
+            // 如果已经连接，直接更新状态
+            console.log('[useEventNotifications DEBUG] Socket已连接，直接更新状态');
+            setIsConnected(true);
+        } else {
+            // 否则建立新连接
+            socketService.connect();
+        }
+
         // 新事件处理函数 - 使用 ref 中的回调
         const handleNewEvent = (eventData) => {
             console.log('\n[useEventNotifications DEBUG] ========== Hook 收到新事件 ==========');

src/views/Community/components/EventList.js

@@ -56,6 +56,7 @@ import { logger } from '../../../utils/logger';
 import { getApiBase } from '../../../utils/apiConfig';
 import { useEventNotifications } from '../../../hooks/useEventNotifications';
 import { getImportanceConfig, getAllImportanceLevels } from '../../../constants/importanceLevels';
+import { browserNotificationService } from '../../../services/browserNotificationService';
 
 // ========== 工具函数定义在组件外部 ==========
 // 涨跌颜色配置（中国A股配色：红涨绿跌）- 分档次显示
@@ -136,6 +137,19 @@ const EventList = ({ events, pagination, onPageChange, onEventClick, onViewDetai
     const [followingMap, setFollowingMap] = useState({});
     const [followCountMap, setFollowCountMap] = useState({});
     const [localEvents, setLocalEvents] = useState(events); // 用于实时更新的本地事件列表
+    const [notificationPermission, setNotificationPermission] = useState('default');
+
+    // 请求浏览器通知权限
+    useEffect(() => {
+        const requestPermission = async () => {
+            if (browserNotificationService.isSupported()) {
+                const permission = await browserNotificationService.requestPermission();
+                setNotificationPermission(permission);
+                logger.info('EventList', '浏览器通知权限状态', { permission });
+            }
+        };
+        requestPermission();
+    }, []);
 
     // 实时事件推送集成
     const { isConnected } = useEventNotifications({
@@ -162,6 +176,33 @@ const EventList = ({ events, pagination, onPageChange, onEventClick, onViewDetai
             });
             console.log('[EventList DEBUG] ✓ Toast 通知已调用，ID:', toastId);
 
+            // 发送浏览器原生通知
+            console.log('[EventList DEBUG] 准备发送浏览器原生通知');
+            const currentPermission = browserNotificationService.getPermissionStatus();
+            console.log('[EventList DEBUG] 通知权限状态:', currentPermission);
+            if (currentPermission === 'granted') {
+                const importance = getImportanceConfig(event.importance);
+                const notification = browserNotificationService.sendNotification({
+                    title: `🔔 ${importance.label}级事件`,
+                    body: event.title,
+                    tag: `event_${event.id}`,
+                    data: {
+                        link: `/event-detail/${event.id}`,
+                        eventId: event.id,
+                    },
+                    autoClose: 10000, // 10秒后自动关闭
+                });
+
+                if (notification) {
+                    browserNotificationService.setupClickHandler(notification, navigate);
+                    console.log('[EventList DEBUG] ✓ 浏览器原生通知已发送');
+                } else {
+                    console.log('[EventList DEBUG] ⚠️ 浏览器原生通知发送失败');
+                }
+            } else {
+                console.log('[EventList DEBUG] ⚠️ 浏览器通知权限未授予，跳过原生通知');
+            }
+
             console.log('[EventList DEBUG] 准备更新事件列表');
             // 将新事件添加到列表顶部（防止重复）
             setLocalEvents((prevEvents) => {