修改特效按钮

resources/views/chat/partials/layout/input-bar.blade.php

@@ -133,19 +133,27 @@ $welcomeMessages = [
                 <button type="button" onclick="openAdminBaccaratLossCoverModal()"
                     style="font-size: 11px; padding: 1px 6px; background: linear-gradient(135deg, #15803d, #22c55e); color: #fff; border: none; border-radius: 2px; cursor: pointer; font-weight: bold;">🎁
                     买单活动</button>
-                {{-- 全屏特效按钮组（仅管理员可见） --}}
+                {{-- 全屏特效整合按钮（仅管理员可见） --}}
-                <button type="button" onclick="triggerEffect('fireworks')" title="全屏烟花"
+                <div style="position:relative;display:inline-block;" id="effect-btn-wrap">
-                    style="font-size: 11px; padding: 1px 6px; background: #ea580c; color: #fff; border: none; border-radius: 2px; cursor: pointer;">🎆
+                    <button type="button" onclick="toggleEffectMenu(event)"
-                    烟花</button>
+                        style="font-size:11px;padding:1px 6px;background:linear-gradient(135deg,#7c3aed,#2563eb);color:#fff;border:none;border-radius:2px;cursor:pointer;font-weight:bold;">
-                <button type="button" onclick="triggerEffect('rain')" title="全屏下雨"
+                        ✨ 特效
-                    style="font-size: 11px; padding: 1px 6px; background: #2563eb; color: #fff; border: none; border-radius: 2px; cursor: pointer;">🌧️
+                    </button>
-                    下雨</button>
+                    <div id="effect-menu"
-                <button type="button" onclick="triggerEffect('lightning')" title="全屏雷电"
+                        style="display:none;position:absolute;bottom:calc(100% + 6px);left:0;z-index:10020;min-width:186px;padding:8px;background:#fff7ed;border:1px solid #fdba74;border-radius:8px;box-shadow:0 10px 24px rgba(15,23,42,.18);">
-                    style="font-size: 11px; padding: 1px 6px; background: #7c3aed; color: #fff; border: none; border-radius: 2px; cursor: pointer;">⚡
+                        <div style="font-size:11px;font-weight:bold;color:#9a3412;padding:0 2px 6px;">选择要播放的特效</div>
-                    雷电</button>
+                        <div style="display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;">
-                <button type="button" onclick="triggerEffect('snow')" title="全屏下雪"
+                            <button type="button" onclick="selectEffect('fireworks')"
-                    style="font-size: 11px; padding: 1px 6px; background: #0891b2; color: #fff; border: none; border-radius: 2px; cursor: pointer;">❄️
+                                style="font-size:11px;padding:6px 8px;background:#fff;color:#ea580c;border:1px solid #fdba74;border-radius:6px;cursor:pointer;">🎆 烟花</button>
-                    下雪</button>
+                            <button type="button" onclick="selectEffect('rain')"
+                                style="font-size:11px;padding:6px 8px;background:#fff;color:#2563eb;border:1px solid #93c5fd;border-radius:6px;cursor:pointer;">🌧️ 下雨</button>
+                            <button type="button" onclick="selectEffect('lightning')"
+                                style="font-size:11px;padding:6px 8px;background:#fff;color:#7c3aed;border:1px solid #c4b5fd;border-radius:6px;cursor:pointer;">⚡ 雷电</button>
+                            <button type="button" onclick="selectEffect('snow')"
+                                style="font-size:11px;padding:6px 8px;background:#fff;color:#0891b2;border:1px solid #bae6fd;border-radius:6px;cursor:pointer;">❄️ 下雪</button>
+                        </div>
+                    </div>
+                </div>
             @endif
 
             <button type="button" onclick="localClearScreen()"

resources/views/chat/partials/scripts.blade.php

@@ -315,12 +315,46 @@
     function toggleWelcomeMenu(event) {
         event.stopPropagation();
         const menu = document.getElementById('welcome-menu');
+        const effectMenu = document.getElementById('effect-menu');
         if (!menu) {
             return;
         }
+        if (effectMenu) {
+            effectMenu.style.display = 'none';
+        }
         menu.style.display = menu.style.display === 'none' ? 'block' : 'none';
     }
 
+    /**
+     * 切换顶部特效菜单的显示状态。
+     */
+    function toggleEffectMenu(event) {
+        event.stopPropagation();
+        const menu = document.getElementById('effect-menu');
+        const welcomeMenu = document.getElementById('welcome-menu');
+        if (!menu) {
+            return;
+        }
+        if (welcomeMenu) {
+            welcomeMenu.style.display = 'none';
+        }
+        menu.style.display = menu.style.display === 'none' ? 'block' : 'none';
+    }
+
+    /**
+     * 选择特效后关闭菜单，并沿用原有管理员特效触发逻辑。
+     *
+     * @param {string} type 特效类型
+     */
+    function selectEffect(type) {
+        const menu = document.getElementById('effect-menu');
+        if (menu) {
+            menu.style.display = 'none';
+        }
+
+        triggerEffect(type);
+    }
+
     /**
      * 将选中的欢迎语模板填入输入框，{name} 替换为当前选中的聊天对象，
      * 并在前面加上「部门 职务 姓名：」前缀，然后自动发送
@@ -367,6 +401,11 @@
         if (menu) {
             menu.style.display = 'none';
         }
+
+        const effectMenu = document.getElementById('effect-menu');
+        if (effectMenu) {
+            effectMenu.style.display = 'none';
+        }
     });
 
     // ── 动作选择 ──────────────────────────────────────
@@ -1274,6 +1313,8 @@
             if (data.status !== 'success') window.chatDialog.alert(data.message, '操作失败', '#cc4444');
         }).catch(err => console.error('特效触发失败:', err));
     }
+    window.toggleEffectMenu = toggleEffectMenu;
+    window.selectEffect = selectEffect;
     window.triggerEffect = triggerEffect;
 
     // ── 字号设置（持久化到 localStorage）─────────────────