迁移竖向工具条按钮事件绑定

resources/js/chat-room.js

@@ -7,6 +7,7 @@ export { bindChatImageUploadControl } from "./chat-room/image-upload.js";
 export { bindFriendPanelControls, closeFriendPanel, friendSearch, loadFriends, openFriendPanel } from "./chat-room/friend-panel.js";
 export { closeChatImageLightbox, initChatImageLightboxEvents, openChatImageLightbox } from "./chat-room/lightbox.js";
 export { bindMobileDrawerControls } from "./chat-room/mobile-drawer.js";
+export { bindToolbarControls } from "./chat-room/toolbar.js";
 export { bindWelcomeMenuControls } from "./chat-room/welcome-menu.js";
 export {
     BLOCKABLE_SYSTEM_SENDERS,
@@ -40,6 +41,7 @@ import { bindChatImageUploadControl } from "./chat-room/image-upload.js";
 import { bindFriendPanelControls, closeFriendPanel, friendSearch, loadFriends, openFriendPanel } from "./chat-room/friend-panel.js";
 import { closeChatImageLightbox, initChatImageLightboxEvents, openChatImageLightbox } from "./chat-room/lightbox.js";
 import { bindMobileDrawerControls } from "./chat-room/mobile-drawer.js";
+import { bindToolbarControls } from "./chat-room/toolbar.js";
 import { bindWelcomeMenuControls } from "./chat-room/welcome-menu.js";
 import {
     BLOCKABLE_SYSTEM_SENDERS,
@@ -80,6 +82,7 @@ if (typeof window !== "undefined") {
         loadFriends,
         openFriendPanel,
         bindMobileDrawerControls,
+        bindToolbarControls,
         bindWelcomeMenuControls,
         CHAT_FONT_SIZE_STORAGE_KEY,
         restoreChatFontSize,
@@ -118,6 +121,7 @@ if (typeof window !== "undefined") {
     bindChatFontSizeControl();
     bindChatImageUploadControl();
     bindFriendPanelControls();
+    bindToolbarControls();
     bindChatRightPanelControls();
     bindMobileDrawerControls();
     bindWelcomeMenuControls();

resources/js/chat-room/toolbar.js

@@ -0,0 +1,88 @@
+// 聊天室竖向工具条事件绑定，替代顶部工具按钮内联 onclick。
+
+let toolbarEventsBound = false;
+
+/**
+ * 执行竖向工具条动作。
+ *
+ * @param {string} action 工具条动作
+ * @returns {void}
+ */
+function runToolbarAction(action) {
+    // 工具条只做入口分发，具体业务仍由原有全局函数负责。
+    const actions = {
+        shop: () => window.openShopModal?.(),
+        vip: () => window.openVipModal?.(),
+        "save-exp": () => window.saveExp?.(),
+        game: () => window.openGameHall?.(),
+        earn: () => window.dispatchEvent(new CustomEvent("open-earn-panel")),
+        bank: () => window.openBankModal?.(),
+        marriage: () => window.openMarriageStatusModal?.(),
+        friend: () => window.openFriendPanel?.(),
+        avatar: () => window.openAvatarPicker?.(),
+        settings: () => window.openSettingsModal?.(),
+    };
+
+    actions[action]?.();
+}
+
+/**
+ * 确认并执行离开聊天室动作。
+ *
+ * @returns {void}
+ */
+function confirmToolbarLeaveRoom() {
+    // 离开房间保留二次确认，避免误点竖向工具条直接退出。
+    window.chatDialog
+        ?.confirm("确定要离开聊天室吗？", "离开聊天室")
+        .then((ok) => {
+            if (ok) {
+                window.leaveRoom?.();
+            }
+        });
+}
+
+/**
+ * 绑定竖向工具条按钮事件。
+ *
+ * @returns {void}
+ */
+export function bindToolbarControls() {
+    if (toolbarEventsBound || typeof document === "undefined") {
+        return;
+    }
+
+    toolbarEventsBound = true;
+    document.addEventListener("click", (event) => {
+        if (!(event.target instanceof Element)) {
+            return;
+        }
+
+        const actionButton = event.target.closest("[data-toolbar-action]");
+        if (actionButton) {
+            event.preventDefault();
+
+            const action = actionButton.getAttribute("data-toolbar-action") || "";
+            if (action === "leave") {
+                confirmToolbarLeaveRoom();
+                return;
+            }
+
+            runToolbarAction(action);
+            return;
+        }
+
+        const urlButton = event.target.closest("[data-toolbar-url]");
+        if (!urlButton) {
+            return;
+        }
+
+        event.preventDefault();
+
+        // 后端路由保留在 Blade data 属性中，Vite 模块不硬编码 Laravel URL。
+        const url = urlButton.getAttribute("data-toolbar-url");
+        if (url) {
+            window.open(url, "_blank");
+        }
+    });
+}

resources/views/chat/partials/layout/toolbar.blade.php

@@ -15,31 +15,30 @@
 
 {{-- ═══════════ 竖向工具条按钮 ═══════════ --}}
 <div class="chat-toolbar" id="toolbar-strip">
-    <div class="tool-btn" onclick="openShopModal()" title="购买道具">商店</div>
+    <div class="tool-btn" data-toolbar-action="shop" title="购买道具">商店</div>
-    <div class="tool-btn" onclick="openVipModal()" title="会员中心">会员</div>
+    <div class="tool-btn" data-toolbar-action="vip" title="会员中心">会员</div>
-    <div class="tool-btn" onclick="saveExp()" title="手动存经验点">存点</div>
+    <div class="tool-btn" data-toolbar-action="save-exp" title="手动存经验点">存点</div>
-    <div class="tool-btn" onclick="openGameHall()" title="娱乐游戏大厅">娱乐</div>
+    <div class="tool-btn" data-toolbar-action="game" title="娱乐游戏大厅">娱乐</div>
-    <div class="tool-btn" onclick="window.dispatchEvent(new CustomEvent('open-earn-panel'))" title="看视频赚金币">赚钱</div>
+    <div class="tool-btn" data-toolbar-action="earn" title="看视频赚金币">赚钱</div>
-    <div class="tool-btn" onclick="openBankModal()" title="银行存取金币">银行</div>
+    <div class="tool-btn" data-toolbar-action="bank" title="银行存取金币">银行</div>
-    <div class="tool-btn" onclick="openMarriageStatusModal()" title="婚姻状态">婚姻</div>
+    <div class="tool-btn" data-toolbar-action="marriage" title="婚姻状态">婚姻</div>
-    <div class="tool-btn" onclick="openFriendPanel()" title="好友列表">好友</div>
+    <div class="tool-btn" data-toolbar-action="friend" title="好友列表">好友</div>
-    <div class="tool-btn" onclick="openAvatarPicker()" title="修改头像">头像</div>
+    <div class="tool-btn" data-toolbar-action="avatar" title="修改头像">头像</div>
-    <div class="tool-btn" onclick="openSettingsModal()" title="个人设置">设置
+    <div class="tool-btn" data-toolbar-action="settings" title="个人设置">设置
     </div>
-    <div class="tool-btn" onclick="window.open('{{ route('feedback.index') }}', '_blank')" title="反馈">反馈</div>
+    <div class="tool-btn" data-toolbar-url="{{ route('feedback.index') }}" title="反馈">反馈</div>
-    <div class="tool-btn" onclick="window.open('{{ route('guestbook.index') }}', '_blank')" title="留言板/私信">留言</div>
+    <div class="tool-btn" data-toolbar-url="{{ route('guestbook.index') }}" title="留言板/私信">留言</div>
-    <div class="tool-btn" onclick="window.open('{{ route('guide') }}', '_blank')" title="规则/帮助">规则</div>
+    <div class="tool-btn" data-toolbar-url="{{ route('guide') }}" title="规则/帮助">规则</div>
 
     @if ($user->id === 1 || $user->activePosition()->exists())
-        <div class="tool-btn" style="color: #ffcc00;" onclick="window.open('/admin', '_blank')" title="管理后台">管理</div>
+        <div class="tool-btn" style="color: #ffcc00;" data-toolbar-url="/admin" title="管理后台">管理</div>
-        <div class="tool-btn" onclick="window.open('{{ route('leaderboard.index') }}', '_blank')" title="排行榜">排行
+        <div class="tool-btn" data-toolbar-url="{{ route('leaderboard.index') }}" title="排行榜">排行
         </div>
     @else
-        <div class="tool-btn" onclick="window.open('{{ route('leaderboard.index') }}', '_blank')" title="排行榜">排行
+        <div class="tool-btn" data-toolbar-url="{{ route('leaderboard.index') }}" title="排行榜">排行
         </div>
     @endif
-    <div class="tool-btn" style="color: #ffaaaa;"
+    <div class="tool-btn" style="color: #ffaaaa;" data-toolbar-action="leave" title="离开聊天室">
-        onclick="window.chatDialog.confirm('确定要离开聊天室吗？', '离开聊天室').then(ok => { if (ok) leaveRoom(); })" title="离开聊天室">
         离开
     </div>
 </div>