优化右下角弹窗交互

resources/js/chat-room/toast.js

@@ -7,10 +7,63 @@
  * @returns {void}
  */
 function dismissToast(card) {
+    if (card.dataset.toastClosing === "1") {
+        return;
+    }
+
+    card.dataset.toastClosing = "1";
     card.style.opacity = "0";
     window.setTimeout(() => card.remove(), 400);
 }
 
+/**
+ * 判断当前是否应在手机视口隐藏 Toast。
+ *
+ * @returns {boolean}
+ */
+function shouldHideToastOnMobile() {
+    return window.matchMedia?.("(max-width: 640px)")?.matches === true;
+}
+
+/**
+ * 关闭容器内所有 Toast 卡片。
+ *
+ * @param {HTMLElement} container
+ * @returns {void}
+ */
+function dismissAllToasts(container) {
+    container.querySelectorAll(".chat-toast-card").forEach((card) => {
+        if (card instanceof HTMLElement) {
+            dismissToast(card);
+        }
+    });
+}
+
+/**
+ * 绑定点击 Toast 外部区域时自动关闭。
+ *
+ * @param {HTMLElement} container
+ * @returns {void}
+ */
+function bindOutsideDismiss(container) {
+    document.addEventListener("pointerdown", (event) => {
+        if (container.childElementCount === 0) {
+            return;
+        }
+
+        const target = event.target;
+        if (!(target instanceof Element)) {
+            return;
+        }
+
+        if (target.closest(".chat-toast-card")) {
+            return;
+        }
+
+        dismissAllToasts(container);
+    }, true);
+}
+
 /**
  * 创建右下角 Toast 通知 API。
  *
@@ -39,7 +92,12 @@ function createChatToast(container) {
             duration = 6000,
             action = null,
         }) {
+            if (shouldHideToastOnMobile()) {
+                return;
+            }
+
             const card = document.createElement("div");
+            card.className = "chat-toast-card";
             card.style.cssText = `
                 background:#fff; border-radius:10px; overflow:hidden;
                 box-shadow:0 8px 32px rgba(0,0,0,.18);
@@ -112,5 +170,6 @@ export function bindChatToast() {
         return;
     }
 
+    bindOutsideDismiss(container);
     window.chatToast = createChatToast(container);
 }

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

@@ -37,4 +37,10 @@
             transform: translateX(0) scale(1);
         }
     }
+
+    @media (max-width: 640px) {
+        #chat-toast-container {
+            display: none !important;
+        }
+    }
 </style>