调整手机端弹窗通知规则

resources/js/chat-room/chat-events.js

@@ -84,6 +84,34 @@ function shouldSkipToastForCurrentUser(toastNotification) {
     return String(toastNotification.actor_username || "") === String(window.chatContext?.username || "");
 }
 
+/**
+ * 判断当前是否为手机浏览器视口。
+ *
+ * @returns {boolean}
+ */
+function isMobileToastViewport() {
+    return window.matchMedia?.("(max-width: 640px)")?.matches === true;
+}
+
+/**
+ * 手机端只隐藏无本人关联的公屏全局 Toast。
+ *
+ * @param {Record<string, any>} message 聊天消息载荷
+ * @param {Record<string, any>} toastNotification 右下角通知载荷
+ * @returns {boolean}
+ */
+function shouldHideGlobalToastOnMobile(message, toastNotification) {
+    if (!isMobileToastViewport() || message?.to_user !== '大家') {
+        return false;
+    }
+
+    const currentUsername = String(window.chatContext?.username || "");
+    const actorUsername = String(toastNotification?.actor_username || "");
+    const targetUsername = String(toastNotification?.target_username || "");
+
+    return actorUsername !== currentUsername && targetUsername !== currentUsername;
+}
+
 // ── 禁言逻辑 ──
 function handleMutedEvent(e) {
     const state = getState();
@@ -435,6 +463,10 @@ export function bindChatEvents() {
                 return;
             }
 
+            if (shouldHideGlobalToastOnMobile(msg, t)) {
+                return;
+            }
+
             window.chatToast?.show({
                 title: t.title || "通知",
                 message: t.message || "",

resources/js/chat-room/toast.js

@@ -16,15 +16,6 @@ function dismissToast(card) {
     window.setTimeout(() => card.remove(), 400);
 }
 
-/**
- * 判断当前是否应在手机视口隐藏 Toast。
- *
- * @returns {boolean}
- */
-function shouldHideToastOnMobile() {
-    return window.matchMedia?.("(max-width: 640px)")?.matches === true;
-}
-
 /**
  * 关闭容器内所有 Toast 卡片。
  *
@@ -92,10 +83,6 @@ function createChatToast(container) {
             duration = 6000,
             action = null,
         }) {
-            if (shouldHideToastOnMobile()) {
-                return;
-            }
-
             const card = document.createElement("div");
             card.className = "chat-toast-card";
             card.style.cssText = `

resources/views/chat/partials/toast-notification.blade.php

@@ -40,7 +40,16 @@
 
     @media (max-width: 640px) {
         #chat-toast-container {
-            display: none !important;
+            right: 12px !important;
+            bottom: calc(88px + env(safe-area-inset-bottom, 0px)) !important;
+            left: 12px !important;
+            align-items: stretch;
+        }
+
+        #chat-toast-container .chat-toast-card {
+            width: 100% !important;
+            min-width: 0 !important;
+            max-width: none !important;
         }
     }
 </style>