迁移五子棋邀请按钮事件

resources/css/app.css

@@ -10,6 +10,15 @@
         'Segoe UI Symbol', 'Noto Color Emoji';
 }
 
+/* 五子棋公屏邀请按钮由 Vite 事件委托接管，这里集中维护 hover 视觉态。 */
+.gomoku-invite-open:hover {
+    background: #ddeeff !important;
+}
+
+.gomoku-invite-accept:hover {
+    opacity: .8 !important;
+}
+
 .vip-presence-banner {
     position: fixed;
     inset: 24px 24px auto 24px;

resources/js/chat-room/game-panels.js

@@ -27,6 +27,39 @@ function closeAlpineGamePanel(panelId) {
     panelData.show = false;
 }
 
+/**
+ * 打开五子棋面板，作为公屏邀请按钮和存量全局函数之间的桥接。
+ *
+ * @returns {void}
+ */
+function openGomokuPanelFromInvite() {
+    if (typeof window.openGomokuPanel === "function") {
+        window.openGomokuPanel();
+        return;
+    }
+
+    const panel = document.getElementById("gomoku-panel");
+    const panelData = panel && typeof window.Alpine?.$data === "function"
+        ? window.Alpine.$data(panel)
+        : null;
+
+    panelData?.open?.();
+}
+
+/**
+ * 接受五子棋公屏邀请，业务仍沿用五子棋面板里的存量全局函数。
+ *
+ * @param {string} gameId 对局 ID
+ * @returns {void}
+ */
+function acceptGomokuInviteFromMessage(gameId) {
+    if (!gameId) {
+        return;
+    }
+
+    window.acceptGomokuInvite?.(gameId);
+}
+
 /**
  * 绑定小型游戏面板通用关闭事件。
  *
@@ -43,6 +76,20 @@ export function bindGamePanelControls() {
             return;
         }
 
+        const gomokuOpenButton = event.target.closest("[data-gomoku-open-panel]");
+        if (gomokuOpenButton) {
+            event.preventDefault();
+            openGomokuPanelFromInvite();
+            return;
+        }
+
+        const gomokuAcceptButton = event.target.closest("[data-gomoku-accept-id]");
+        if (gomokuAcceptButton) {
+            event.preventDefault();
+            acceptGomokuInviteFromMessage(gomokuAcceptButton.getAttribute("data-gomoku-accept-id") || "");
+            return;
+        }
+
         const closeButton = event.target.closest("[data-game-panel-close]");
         if (!closeButton) {
             return;

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

@@ -3020,27 +3020,27 @@
                 div.style.cssText =
                     'background:linear-gradient(135deg,#e8eef8,#f0f4fc); ' +
                     'border-left:3px solid #336699; border-radius:4px; padding:6px 10px; margin:3px 0;';
+                const safeInviterName = escapeHtml(e.inviter_name);
+                const gomokuGameId = Number.parseInt(e.game_id, 10) || 0;
 
                 const acceptBtn = isSelf ?
-                    // 自己的邀请：只显示打开面板按钮，方便被关掉后重新进入
-                    `<button onclick="document.querySelector('[x-data=\"gomokuPanel()\"]').__x.$data.open()" 
+                    // 自己的邀请：只显示打开面板按钮，点击事件交给 Vite game-panels.js 委托。
+                    `<button type="button" data-gomoku-open-panel class="gomoku-invite-open"
                            style="margin-left:10px; padding:3px 12px; border:1.5px solid #2d6096;
                                   border-radius:12px; background:#f0f6ff; color:#2d6096; font-size:12px;
-                                  cursor:pointer; font-family:inherit; transition:all .15s;"
-                           onmouseover="this.style.background='#ddeeff'" onmouseout="this.style.background='#f0f6ff'">
+                                  cursor:pointer; font-family:inherit; transition:all .15s;">
                            ⤴️ 打开面板
                        </button>` :
-                    // 别人的邀请：显示接受挑战按钮
-                    `<button onclick="acceptGomokuInvite(${e.game_id})" id="gomoku-accept-${e.game_id}"
+                    // 别人的邀请：显示接受挑战按钮，业务仍复用五子棋面板的 acceptGomokuInvite。
+                    `<button type="button" data-gomoku-accept-id="${gomokuGameId}" id="gomoku-accept-${gomokuGameId}" class="gomoku-invite-accept"
                            style="margin-left:10px; padding:3px 12px; border:1.5px solid #336699;
                                   border-radius:12px; background:#336699; color:#fff; font-size:12px;
-                                  cursor:pointer; font-family:inherit; transition:all .15s;"
-                           onmouseover="this.style.opacity='.8'" onmouseout="this.style.opacity='1'">
+                                  cursor:pointer; font-family:inherit; transition:opacity .15s;">
                            ⚔️ 接受挑战
                        </button>`;
 
                 div.innerHTML = `<span style="color:#1e3a5f; font-weight:bold;">
-                        ♟️ 【五子棋】<b>${e.inviter_name}</b> 发起了随机对战！${isSelf ? '（等待中）' : ''}
+                        ♟️ 【五子棋】<b>${safeInviterName}</b> 发起了随机对战！${isSelf ? '（等待中）' : ''}
                     </span>${acceptBtn}
                     <span class="msg-time">(${timeStr})</span>`;