From 44a0617efe0b31210834aed00367f94b4ff8b21e Mon Sep 17 00:00:00 2001
From: shuaiplus <2327005759@qq.com>
Date: Sat, 10 May 2025 20:26:44 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0=E9=80=9A=E7=9F=A5=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD=EF=BC=8C=E6=B7=BB=E5=8A=A0=E5=8F=91=E9=80=81=E8=80=85?=
 =?UTF-8?q?=E4=BF=A1=E6=81=AF=EF=BC=8C=E4=BF=AE=E6=94=B9=E8=AF=AD=E8=A8=80?=
 =?UTF-8?q?=E8=AE=BE=E7=BD=AE=E4=B8=BA=E8=8B=B1=E8=AF=AD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/main.js          |  2 +-
 web/util.settings.js | 74 ++++++++++++++++++++++++++++++++------------
 2 files changed, 56 insertions(+), 20 deletions(-)

diff --git a/web/main.js b/web/main.js
index 578578f..d52565c 100644
--- a/web/main.js
+++ b/web/main.js
@@ -416,7 +416,7 @@ function joinRoom(userName, roomName, password, modal = null, onResult) {
         timestamp: Date.now()
       });
       // 通知消息，无论当前房间是否激活
-      notifyMessage(newRd.roomName, msgType, msg.data);
+      notifyMessage(newRd.roomName, msgType, msg.data, realUserName);
       if (activeRoomIndex === idx) renderChatArea();
     }
   };
diff --git a/web/util.settings.js b/web/util.settings.js
index 3d3fe00..a4743ac 100644
--- a/web/util.settings.js
+++ b/web/util.settings.js
@@ -2,7 +2,7 @@
 // 设置面板逻辑（仅UI和本地存储，功能待实现）
 
 const DEFAULT_SETTINGS = {
-  lang: 'zh',     // 'zh' | 'en'
+  lang: 'en',     // 'zh' | 'en'
   notify: false,  // 桌面通知
   sound: false    // 声音通知
 };
@@ -23,9 +23,16 @@ function applySettings(settings) {
   // 主题切换逻辑已移除
   // 语言切换（仅UI，功能待实现）
   document.documentElement.lang = settings.lang;
-  // 请求通知权限（若启用浏览器通知）
-  if (settings.notify && "Notification" in window && Notification.permission !== 'granted') {
-    Notification.requestPermission();
+}
+
+// 兼容各浏览器的 requestPermission 调用
+function askNotificationPermission(callback) {
+  if (Notification.requestPermission.length === 0) {
+    // 返回 promise
+    Notification.requestPermission().then(callback);
+  } else {
+    // 接受 callback
+    Notification.requestPermission(callback);
   }
 }
 
@@ -37,23 +44,23 @@ function setupSettingsPanel() {
     panel.className = 'settings-panel';
     panel.innerHTML = `
       <div class="settings-panel-card">
-        <div class="settings-title">设置</div>
+        <div class="settings-title">Settings</div>
         <div class="settings-item">
-          <span>语言</span>
+          <span>Language</span>
           <select id="settings-lang">
-            <option value="zh">中文</option>
+            <option value="zh">Chinese</option>
             <option value="en">English</option>
           </select>
         </div>
         <div class="settings-item">
-          <span>桌面通知</span>
+          <span>Desktop Notification</span>
           <label class="switch">
             <input type="checkbox" id="settings-notify">
             <span class="slider"></span>
           </label>
         </div>
         <div class="settings-item">
-          <span>声音通知</span>
+          <span>Sound Notification</span>
           <label class="switch">
             <input type="checkbox" id="settings-sound">
             <span class="slider"></span>
@@ -74,13 +81,36 @@ function setupSettingsPanel() {
     saveSettings(settings); applySettings(settings);
   };
   panel.querySelector('#settings-notify').onchange = e => {
-    settings.notify = e.target.checked;
-    // 互斥：启用通知时关闭声音
-    if (settings.notify) {
-      settings.sound = false;
-      panel.querySelector('#settings-sound').checked = false;
+    const checked = e.target.checked;
+    if (checked) {
+      // 浏览器不支持时回退
+      if (!('Notification' in window)) {
+        alert('Notifications are not supported by your browser.');
+        e.target.checked = false;
+        return;
+      }
+      // 申请权限
+      askNotificationPermission(permission => {
+        if (permission === 'granted') {
+          settings.notify = true;
+          // 互斥：关闭声音
+          settings.sound = false;
+          panel.querySelector('#settings-sound').checked = false;
+          saveSettings(settings); applySettings(settings);
+          // 测试推送
+          new Notification('Notifications enabled', { body: 'You will receive alerts here.' });
+        } else {
+          // 用户拒绝或未做选择时回退并提示
+          settings.notify = false;
+          e.target.checked = false;
+          saveSettings(settings); applySettings(settings);
+          alert('Please allow notifications in your browser settings.');
+        }
+      });
+    } else {
+      settings.notify = false;
+      saveSettings(settings); applySettings(settings);
     }
-    saveSettings(settings); applySettings(settings);
   };
   panel.querySelector('#settings-sound').onchange = e => {
     settings.sound = e.target.checked;
@@ -175,9 +205,14 @@ function playSoundNotification() {
     console.error('Sound notification failed', e);
   }
 }
-function showDesktopNotification(roomName, text, msgType) {
+function showDesktopNotification(roomName, text, msgType, sender) {
   if (!('Notification' in window) || Notification.permission !== 'granted') return;
-  const body = msgType === 'image' ? '[image]' : truncateText(text);
+  let body;
+  if (msgType === 'image') {
+    body = sender ? `${sender}: [image]` : '[image]';
+  } else {
+    body = sender ? `${sender}: ${truncateText(text)}` : truncateText(text);
+  }
   new Notification(`#${roomName}`, { body });
 }
 /**
@@ -185,11 +220,12 @@ function showDesktopNotification(roomName, text, msgType) {
  * @param {string} roomName 房间名
  * @param {string} msgType 消息类型 'text' | 'image'
  * @param {string} text 消息文本
+ * @param {string} sender 发消息人
  */
-export function notifyMessage(roomName, msgType, text) {
+export function notifyMessage(roomName, msgType, text, sender) {
   const settings = loadSettings();
   if (settings.notify) {
-    showDesktopNotification(roomName, text, msgType);
+    showDesktopNotification(roomName, text, msgType, sender);
   } else if (settings.sound) {
     playSoundNotification();
   }