feat: 初始化音乐项目后台管理系统- 新增后台管理相关页面和功能组件

- 实现管理员评论管理、数据统计等功能
- 添加后台布局和路由管理
-配置数据库和Redis连接
- 实现文件上传和访问路径配置
- 添加Sa-Token安全配置

music-qianduan/src/utils/websocket.js

@@ -0,0 +1,95 @@
+import SockJS from 'sockjs-client/dist/sockjs.min.js'; // 确保导入正确的 SockJS 文件
+import { Client } from '@stomp/stompjs';
+
+let stompClient = null;
+let subscriptions = {}; // 用于存储订阅，方便取消
+
+const connect = (onConnectedCallback, onErrorCallback) => {
+    // 后端 WebSocket 端点 URL (根据实际部署情况可能需要修改)
+    // 注意：如果后端运行在不同端口，需要写完整 URL，例如 'http://localhost:8080/ws'
+    // 如果前后端同源，可以直接用 '/ws'
+    const socket = new SockJS('http://localhost:8085/ws'); // 使用后端配置的端点 (修改为绝对路径)
+    stompClient = new Client({
+        webSocketFactory: () => socket,
+        reconnectDelay: 5000, // 自动重连延迟
+        heartbeatIncoming: 4000,
+        heartbeatOutgoing: 4000,
+        onConnect: (frame) => {
+            console.log('WebSocket Connected: ' + frame);
+            if (onConnectedCallback) {
+                onConnectedCallback(frame);
+            }
+        },
+        onStompError: (frame) => {
+            console.error('Broker reported error: ' + frame.headers['message']);
+            console.error('Additional details: ' + frame.body);
+            if (onErrorCallback) {
+                onErrorCallback(frame);
+            }
+        },
+        onWebSocketError: (error) => {
+            console.error('WebSocket Error: ', error);
+             if (onErrorCallback) {
+                onErrorCallback(error);
+            }
+        },
+        onDisconnect: () => {
+            console.log('WebSocket Disconnected');
+            // 清理所有订阅
+            subscriptions = {};
+        }
+    });
+
+    stompClient.activate();
+};
+
+const subscribe = (destination, callback) => {
+    if (stompClient && stompClient.connected) {
+        console.log(`Subscribing to ${destination}`);
+        const subscription = stompClient.subscribe(destination, (message) => {
+            console.log(`Message received from ${destination}:`, message.body);
+            if (callback) {
+                try {
+                    callback(JSON.parse(message.body));
+                } catch (e) {
+                    console.error("Error parsing message body:", e);
+                    callback(message.body); // 如果解析失败，返回原始 body
+                }
+            }
+        });
+        subscriptions[destination] = subscription; // 存储订阅
+        return subscription;
+    } else {
+        console.error('Cannot subscribe, Stomp client not connected.');
+        return null;
+    }
+};
+
+const unsubscribe = (destination) => {
+    if (subscriptions[destination]) {
+        console.log(`Unsubscribing from ${destination}`);
+        subscriptions[destination].unsubscribe();
+        delete subscriptions[destination]; // 从存储中移除
+    }
+};
+
+const disconnect = () => {
+    if (stompClient && stompClient.connected) {
+        stompClient.deactivate();
+        console.log('WebSocket connection deactivated.');
+    }
+     // 即使未连接，也尝试清理 stompClient 实例
+    stompClient = null;
+    subscriptions = {}; // 清空订阅记录
+};
+
+// 可选：发送消息的方法 (如果需要前端主动发消息)
+const sendMessage = (destination, body) => {
+     if (stompClient && stompClient.connected) {
+        stompClient.publish({ destination: destination, body: JSON.stringify(body) });
+     } else {
+        console.error('Cannot send message, Stomp client not connected.');
+     }
+};
+
+export { connect, subscribe, unsubscribe, disconnect, sendMessage };