src/components/NotificationCenter.jsx

@@ -39,14 +39,16 @@ export default function NotificationCenter({ show, onClose }) {
 
     // 初始化WebSocket连接
     useEffect(() => {
-        // 只有在用户已登录且WebSocket未连接的情况下才连接WebSocket
+        // 只有在用户已登录的情况下才连接WebSocket
         if (isAuthenticated && !isConnected) {
             initWebSocket()
                 .then(() => {
+                    dispatch(setWebSocketConnected(true));
                     console.log('Successfully connected to notification WebSocket');
                 })
                 .catch((error) => {
                     console.error('Failed to connect to notification WebSocket:', error);
+                    dispatch(setWebSocketConnected(false));
                     // 可以在这里显示连接失败的通知
                     dispatch(
                         showNotification({
@@ -61,6 +63,7 @@ export default function NotificationCenter({ show, onClose }) {
         return () => {
             if (isConnected) {
                 closeWebSocket();
+                dispatch(setWebSocketConnected(false));
             }
         };
     }, [isAuthenticated, isConnected, dispatch]);
@@ -122,7 +125,6 @@ export default function NotificationCenter({ show, onClose }) {
     };
 
     const handleViewDetail = (notification) => {
-        onClose();
         navigate('/permissions');
         // setSelectedRequest(notification);
         // setShowSlideOver(true);

src/services/websocket.js

@@ -1,8 +1,4 @@
-import {
-    addNotification,
-    markNotificationAsRead,
-    setWebSocketConnected,
-} from '../store/notificationCenter/notificationCenter.slice';
+import { addNotification, markNotificationAsRead } from '../store/notificationCenter/notificationCenter.slice';
 import store from '../store/store'; // 修改为默认导出
 import CryptoJS from 'crypto-js';
 
@@ -42,7 +38,6 @@ export const initWebSocket = () => {
             let token = '';
             if (!encryptedToken) {
                 console.error('No token found, cannot connect to notification service');
-                store.dispatch(setWebSocketConnected(false));
                 reject(new Error('No token found'));
                 return;
             }
@@ -58,9 +53,6 @@ export const initWebSocket = () => {
                 console.log('WebSocket connection established');
                 reconnectAttempts = 0; // 连接成功后重置重连计数器
 
-                // 更新Redux中的连接状态
-                store.dispatch(setWebSocketConnected(true));
-
                 // 订阅通知频道
                 subscribeToNotifications();
 
@@ -87,8 +79,6 @@ export const initWebSocket = () => {
             // 错误处理
             socket.onerror = (error) => {
                 console.error('WebSocket error:', error);
-                // 更新Redux中的连接状态
-                store.dispatch(setWebSocketConnected(false));
                 reject(error);
             };
 
@@ -96,9 +86,6 @@ export const initWebSocket = () => {
             socket.onclose = (event) => {
                 console.log(`WebSocket connection closed: ${event.code} ${event.reason}`);
 
-                // 更新Redux中的连接状态
-                store.dispatch(setWebSocketConnected(false));
-
                 // 清除ping定时器
                 if (pingInterval) clearInterval(pingInterval);
 
@@ -112,21 +99,15 @@ export const initWebSocket = () => {
                             console.log('Attempting to reconnect WebSocket...');
                             initWebSocket().catch((err) => {
                                 console.error('Failed to reconnect WebSocket:', err);
-                                // 重连失败时更新Redux中的连接状态
-                                store.dispatch(setWebSocketConnected(false));
                             });
                         }, RECONNECT_DELAY);
                     } else {
                         console.log('Maximum reconnection attempts reached. Giving up.');
-                        // 达到最大重连次数时更新Redux中的连接状态
-                        store.dispatch(setWebSocketConnected(false));
                     }
                 }
             };
         } catch (error) {
             console.error('Error initializing WebSocket:', error);
-            // 更新Redux中的连接状态
-            store.dispatch(setWebSocketConnected(false));
             reject(error);
         }
     });
@@ -192,9 +173,6 @@ export const closeWebSocket = () => {
         clearInterval(pingInterval);
         pingInterval = null;
     }
-
-    // 更新Redux中的连接状态
-    store.dispatch(setWebSocketConnected(false));
 };
 
 /**

src/store/notificationCenter/notificationCenter.thunks.js

@@ -9,7 +9,7 @@ export const fetchNotifications = createAsyncThunk(
     async (_, { rejectWithValue }) => {
         try {
             const response = await get('/notifications/');
-            return processNotification(response);
+            return response;
         } catch (error) {
             const errorMessage = error.response?.data?.message || 'Failed to fetch notifications';
             return rejectWithValue(errorMessage);
@@ -48,88 +48,3 @@ export const markAllNotificationsRead = createAsyncThunk(
         }
     }
 );
-
-/**
- * 处理通知数据，转换为应用内通知格式
- * @param {Object|Array} data 通知数据或通知数组
- * @returns {Object|Array} 处理后的通知数据
- */
-export const processNotification = (data) => {
-    // 处理数组类型的通知数据
-    if (Array.isArray(data)) {
-        return data.map((item) => processNotificationItem(item));
-    }
-
-    // 处理WebSocket格式的通知数据 (带有data字段的对象)
-    if (data && data.data) {
-        return processNotificationItem(data.data);
-    }
-
-    // 处理单个通知对象
-    return processNotificationItem(data);
-};
-
-/**
- * 处理单个通知项
- * @param {Object} notification 单个通知数据
- * @returns {Object} 处理后的通知数据
- */
-const processNotificationItem = (notification) => {
-    // 确保我们有一个有效的通知对象
-    if (!notification) return null;
-
-    // 提取通知数据，兼容不同的API格式
-    const notificationData = notification.data || notification;
-
-    // 设置图标
-    let icon = 'bi-info-circle';
-    const type = notificationData.category || notificationData.type;
-    if (type === 'system') {
-        icon = 'bi-info-circle';
-    } else if (type === 'permission' || type === 'permission_request') {
-        icon = 'bi-shield';
-    }
-
-    // 计算时间显示
-    const createdAt = new Date(notificationData.created_at);
-    const now = new Date();
-
-    // 检查是否是今天
-    const isToday =
-        createdAt.getDate() === now.getDate() &&
-        createdAt.getMonth() === now.getMonth() &&
-        createdAt.getFullYear() === now.getFullYear();
-
-    // 如果是今天，只显示时间；否则显示年月日和时间
-    let timeDisplay;
-    if (isToday) {
-        timeDisplay = createdAt.toLocaleTimeString('zh-CN', {
-            hour: '2-digit',
-            minute: '2-digit',
-        });
-    } else {
-        timeDisplay = createdAt.toLocaleString('zh-CN', {
-            year: 'numeric',
-            month: '2-digit',
-            day: '2-digit',
-            hour: '2-digit',
-            minute: '2-digit',
-        });
-    }
-
-    return {
-        id: notificationData.id,
-        type: type,
-        icon,
-        title: notificationData.title,
-        content: notificationData.content,
-        time: timeDisplay,
-        hasDetail: true,
-        isRead: notificationData.is_read,
-        created_at: notificationData.created_at,
-        sender: notificationData.sender,
-        receiver: notificationData.receiver,
-        related_resource: notificationData.related_resource,
-        metadata: notificationData.metadata || {},
-    };
-};