迁移聊天室Toast通知脚本

2026-04-25 13:51:50 +08:00
parent e3a3f6a596
commit d4a6a799fe
3 changed files with 120 additions and 101 deletions
@@ -25,107 +25,6 @@
           display:flex; flex-direction:column-reverse; gap:10px; pointer-events:none;">
 </div>

-<script>
-    /**
-     * 全局右下角 Toast 小卡片通知系统。
-     *
-     * 可在聊天室任何 JS 代码中调用：
-     *   window.chatToast.show({ title, message, icon, color, duration, action });
-     */
-    window.chatToast = (function() {
-        const container = document.getElementById('chat-toast-container');
-
-        /**
-         * 显示一条 Toast 通知卡片。
-         *
-         * @param {object} opts
-         * @param {string} opts.title      标题文字
-         * @param {string} opts.message    内容（支持 HTML）
-         * @param {string} [opts.icon]     左侧 Emoji（默认 💬）
-         * @param {string} [opts.color]    强调色（默认 #336699）
-         * @param {number} [opts.duration] 自动消失毫秒，0 表示不自动消失（默认 6000）
-         * @param {object} [opts.action]   操作按钮 { label: string, onClick: function }
-         */
-        function 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;
-            `;
-
-            // 操作按钮 HTML
-            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', () => dismiss(card));
-
-            // 操作按钮
-            if (action) {
-                card.querySelector('.chat-toast-action-btn').addEventListener('click', () => {
-                    action.onClick?.();
-                    dismiss(card);
-                });
-            }
-
-            container.appendChild(card);
-
-            // 弹出时播放叮咚通知音
-            if (window.chatSound) window.chatSound.ding();
-
-            // 自动消失
-            if (duration > 0) {
-                setTimeout(() => dismiss(card), duration);
-            }
-        }
-
-        /** 淡出并移除 Toast 卡片 */
-        function dismiss(card) {
-            card.style.opacity = '0';
-            setTimeout(() => card.remove(), 400);
-        }
-
-        return {
-            show
-        };
-    })();
-</script>
-
 <style>
    @keyframes toastSlideIn {
        from {