增加声音提醒

admin/views/index.php

@@ -192,6 +192,9 @@
         </div>
     </div>
 
+    <audio id="notification-sound" hidden>
+        <source src="/static/audio/message-ding.mp3" type="audio/mpeg">
+    </audio>
 </div>
 </body>
 
@@ -208,6 +211,8 @@
     var log_data = {};
     var heartbeatInterval = null;
     var pongTimeout = null;
+    const $audio = $('#notification-sound');
+    let isAudioLoaded = false; // 标记音频是否预加载完成
     (function ($) {
         _index_vue_obj = new Vue({
             el: '#index-vue-app',
@@ -263,7 +268,6 @@
         });
         // 初始化 WebSocket 连接
         initWebSocket();
-
         $(".coms-layout-header .bars-nav").on("click", function (event) {
             event.stopPropagation()
             var $headNav = $(".header-nav");
@@ -309,7 +313,14 @@
                 color: '#000',
                 alpha: 0.03,
             });
+
+            // 1. 监听音频预加载完成事件
+            $audio.on('canplaythrough', function () {
+                isAudioLoaded = true;
+                console.log('音频预加载完成，等待通知触发播放');
+            });
         })
+
     })(jQuery)
 
     function initWebSocket() {
@@ -383,9 +394,12 @@
         switch (data.type) {
             case 'notice':
                 // 显示通知消息
-                showNotification("您收到一条新的系统通知，请及时查看");
+                let message = data.data.content ? data.data.content : "您收到一条新的系统通知，请及时查看";
+                showNotification(message);
                 _index_vue_obj.countNotice++;
                 _index_vue_obj.notice = [data.data].concat(_index_vue_obj.notice);
+                // 播放提示音
+                playNotificationSound();
                 break;
             case 'heartbeat':
                 // 收到pong响应时清除超时定时器
@@ -410,6 +424,26 @@
         });
     }
 
+    // 新增播放提示音函数
+    function playNotificationSound() {
+        // 先判断音频是否加载完成 + 浏览器是否允许播放（需用户曾交互过页面）
+        if (!isAudioLoaded) {
+            console.log('音频未加载完成，无法播放');
+            return;
+        }
+        // 尝试播放，处理浏览器限制（如未交互导致的失败）
+        $audio[0].currentTime = 0; // 重置播放位置（避免重复通知时只播后半段）
+        $audio[0].play()
+            .then(() => {
+                console.log('通知音频播放成功');
+            })
+            .catch(err => {
+                console.error('播放失败（可能需用户先点击页面）：', err.message);
+                // 可选：提示用户点击页面激活音频
+                alert('请先点击页面任意位置，启用通知音效');
+            });
+    }
+
     // 提供全局发送消息的方法
     window.sendWebSocketMessage = function (message) {
         if (window.adminWebsocket &&