diff --git a/resources/js/chat-room/toast.js b/resources/js/chat-room/toast.js index 0cb5728..843b145 100644 --- a/resources/js/chat-room/toast.js +++ b/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); } diff --git a/resources/views/chat/partials/toast-notification.blade.php b/resources/views/chat/partials/toast-notification.blade.php index 0dea54f..fdffde1 100644 --- a/resources/views/chat/partials/toast-notification.blade.php +++ b/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; + } + }