迁移聊天室Toast通知脚本

resources/js/chat-room.js

@@ -7,6 +7,7 @@ export { bindDailySignInControls } from "./chat-room/daily-sign-in.js";
 export { applyFontSize, bindChatFontSizeControl, CHAT_FONT_SIZE_STORAGE_KEY, restoreChatFontSize } from "./chat-room/font-size.js";
 export { bindChatImageUploadControl } from "./chat-room/image-upload.js";
 export { bindChatComposerControls } from "./chat-room/composer.js";
+export { bindChatToast } from "./chat-room/toast.js";
 export { bindFriendPanelControls, closeFriendPanel, friendSearch, loadFriends, openFriendPanel, quickFriendAction } from "./chat-room/friend-panel.js";
 export { closeChatImageLightbox, initChatImageLightboxEvents, openChatImageLightbox } from "./chat-room/lightbox.js";
 export {
@@ -82,6 +83,7 @@ import { bindDailySignInControls } from "./chat-room/daily-sign-in.js";
 import { applyFontSize, bindChatFontSizeControl, CHAT_FONT_SIZE_STORAGE_KEY, restoreChatFontSize } from "./chat-room/font-size.js";
 import { bindChatImageUploadControl } from "./chat-room/image-upload.js";
 import { bindChatComposerControls } from "./chat-room/composer.js";
+import { bindChatToast } from "./chat-room/toast.js";
 import { bindFriendPanelControls, closeFriendPanel, friendSearch, loadFriends, openFriendPanel, quickFriendAction } from "./chat-room/friend-panel.js";
 import { closeChatImageLightbox, initChatImageLightboxEvents, openChatImageLightbox } from "./chat-room/lightbox.js";
 import {
@@ -162,6 +164,7 @@ if (typeof window !== "undefined") {
         bindChatFontSizeControl,
         bindChatImageUploadControl,
         bindChatComposerControls,
+        bindChatToast,
         bindFriendPanelControls,
         closeFriendPanel,
         friendSearch,
@@ -271,6 +274,7 @@ if (typeof window !== "undefined") {
     bindChatFontSizeControl();
     bindChatImageUploadControl();
     bindChatComposerControls();
+    bindChatToast();
     bindFriendPanelControls();
     bindToolbarControls();
     bindAdminMenuControls();

resources/js/chat-room/toast.js

@@ -0,0 +1,116 @@
+// 聊天室右下角 Toast 通知组件，提供 window.chatToast.show 兼容入口。
+
+/**
+ * 淡出并移除 Toast 卡片。
+ *
+ * @param {HTMLElement} card
+ * @returns {void}
+ */
+function dismissToast(card) {
+    card.style.opacity = "0";
+    window.setTimeout(() => card.remove(), 400);
+}
+
+/**
+ * 创建右下角 Toast 通知 API。
+ *
+ * @param {HTMLElement} container
+ * @returns {{show: Function}}
+ */
+function createChatToast(container) {
+    return {
+        /**
+         * 显示一条 Toast 通知卡片。
+         *
+         * @param {object} options
+         * @param {string} options.title 标题文字
+         * @param {string} options.message 内容 HTML
+         * @param {string} [options.icon] 左侧 Emoji
+         * @param {string} [options.color] 强调色
+         * @param {number} [options.duration] 自动消失毫秒，0 表示不自动消失
+         * @param {object|null} [options.action] 操作按钮 { label, onClick }
+         * @returns {void}
+         */
+        show({
+            title,
+            message,
+            icon = "💬",
+            color = "#336699",
+            duration = 6000,
+            action = null,
+        }) {
+            const card = document.createElement("div");
+            card.style.cssText = `
+                background:#fff; border-radius:10px; overflow:hidden;
+                box-shadow:0 8px 32px rgba(0,0,0,.18);
+                min-width:260px; max-width:320px;
+                font-size:13px; color:#374151; line-height:1.6;
+                pointer-events:all;
+                animation:toastSlideIn .3s ease;
+                opacity:1; transition:opacity .4s;
+            `;
+
+            const actionHtml = action ? `
+                <div style="margin-top:8px;">
+                    <button class="chat-toast-action-btn"
+                        style="background:${color}; color:#fff; border:none; border-radius:6px;
+                               padding:5px 14px; font-size:12px; font-weight:bold; cursor:pointer;">
+                        ${action.label}
+                    </button>
+                </div>` : "";
+
+            card.innerHTML = `
+                <div style="background:${color}; padding:8px 14px;
+                            display:flex; align-items:center; justify-content:space-between;">
+                    <span style="color:#fff; font-weight:bold; font-size:13px;">
+                        ${icon} ${title}
+                    </span>
+                    <button class="chat-toast-close"
+                        style="background:rgba(255,255,255,.25); border:none; color:#fff;
+                               width:22px; height:22px; border-radius:50%; cursor:pointer;
+                               font-size:14px; line-height:22px; text-align:center; padding:0;">×</button>
+                </div>
+                <div style="padding:12px 14px 10px;">
+                    <div>${message}</div>
+                    ${actionHtml}
+                </div>
+            `;
+
+            card.querySelector(".chat-toast-close")?.addEventListener("click", () => dismissToast(card));
+
+            if (action) {
+                card.querySelector(".chat-toast-action-btn")?.addEventListener("click", () => {
+                    action.onClick?.();
+                    dismissToast(card);
+                });
+            }
+
+            container.appendChild(card);
+
+            // Toast 出现时沿用旧体验播放提示音。
+            window.chatSound?.ding?.();
+
+            if (duration > 0) {
+                window.setTimeout(() => dismissToast(card), duration);
+            }
+        },
+    };
+}
+
+/**
+ * 绑定全局 Toast API。
+ *
+ * @returns {void}
+ */
+export function bindChatToast() {
+    if (typeof document === "undefined" || window.chatToast) {
+        return;
+    }
+
+    const container = document.getElementById("chat-toast-container");
+    if (!container) {
+        return;
+    }
+
+    window.chatToast = createChatToast(container);
+}