迁移右侧面板事件绑定

resources/js/chat-room.js

@@ -18,6 +18,7 @@ export {
     setSoundMuted,
     shouldMigrateLocalChatPreferences,
 } from "./chat-room/preferences-status.js";
+export { bindChatRightPanelControls } from "./chat-room/right-panel.js";
 export {
     normalizeRoomStatus,
     renderRoomStatusRow,
@@ -45,6 +46,7 @@ import {
     setSoundMuted,
     shouldMigrateLocalChatPreferences,
 } from "./chat-room/preferences-status.js";
+import { bindChatRightPanelControls } from "./chat-room/right-panel.js";
 import {
     normalizeRoomStatus,
     renderRoomStatusRow,
@@ -78,6 +80,7 @@ if (typeof window !== "undefined") {
         persistBlockedSystemSenders,
         setSoundMuted,
         shouldMigrateLocalChatPreferences,
+        bindChatRightPanelControls,
         normalizeRoomStatus,
         renderRoomStatusRow,
         renderRoomsOnlineStatus,
@@ -91,4 +94,5 @@ if (typeof window !== "undefined") {
     window.applyFontSize = applyFontSize;
     bindChatFontSizeControl();
     bindChatImageUploadControl();
+    bindChatRightPanelControls();
 }

resources/js/chat-room/right-panel.js

@@ -0,0 +1,50 @@
+// 聊天室右侧名单/房间面板事件绑定，逐步替代 Blade 内联事件。
+
+let rightPanelEventsBound = false;
+
+/**
+ * 绑定右侧在线面板的 tab、刷新、排序和搜索事件。
+ *
+ * @returns {void}
+ */
+export function bindChatRightPanelControls() {
+    if (rightPanelEventsBound || typeof document === "undefined") {
+        return;
+    }
+
+    rightPanelEventsBound = true;
+    document.addEventListener("click", (event) => {
+        if (!(event.target instanceof Element)) {
+            return;
+        }
+
+        const tabButton = event.target.closest("[data-chat-right-tab]");
+        if (tabButton) {
+            event.preventDefault();
+            window.switchTab?.(tabButton.dataset.chatRightTab);
+            return;
+        }
+
+        const refreshButton = event.target.closest("[data-chat-user-list-refresh]");
+        if (refreshButton) {
+            event.preventDefault();
+            window.renderUserList?.();
+        }
+    });
+
+    document.addEventListener("change", (event) => {
+        if (!(event.target instanceof HTMLSelectElement) || event.target.id !== "user-sort-select") {
+            return;
+        }
+
+        window.renderUserList?.();
+    });
+
+    document.addEventListener("input", (event) => {
+        if (!(event.target instanceof HTMLInputElement) || event.target.id !== "user-search-input") {
+            return;
+        }
+
+        window.scheduleFilterUserList?.();
+    });
+}

resources/views/chat/partials/layout/right-panel.blade.php

@@ -8,8 +8,8 @@
 <div class="chat-right">
     {{-- Tab 标题栏 --}}
     <div class="right-tabs">
-        <button class="tab-btn active" id="tab-users" onclick="switchTab('users')">名单</button>
+        <button class="tab-btn active" id="tab-users" data-chat-right-tab="users">名单</button>
-        <button class="tab-btn" id="tab-rooms" onclick="switchTab('rooms')">房间</button>
+        <button class="tab-btn" id="tab-rooms" data-chat-right-tab="rooms">房间</button>
     </div>
 
     {{-- 用户列表面板 --}}
@@ -20,7 +20,7 @@
             <div style="color:#cc6600; font-size:11px;">人气:{{ $room->visit_num ?? 0 }}</div>
             <div style="font-size:11px; color:#999; margin-top:2px;">
                 <span id="online-count-bottom">0</span>人
-                <a href="#" onclick="renderUserList(); return false;"
+                <a href="#" data-chat-user-list-refresh
                     style="color:#c00; font-size:10px; margin-left:4px;">刷新</a>
             </div>
         </div>
@@ -29,7 +29,7 @@
         <div style="padding:3px 4px; border-bottom:1px solid #cde; background:#f8fbff; font-size:11px;">
             <div style="display:flex; align-items:center; gap:4px; margin-bottom:3px;">
                 <span style="color:#666; flex-shrink:0;">排序:</span>
-                <select id="user-sort-select" onchange="renderUserList()"
+                <select id="user-sort-select"
                     style="flex:1; font-size:11px; padding:1px; border:1px solid #aac; border-radius:2px;">
                     <option value="default">默认</option>
                     <option value="name">按名称</option>
@@ -37,7 +37,7 @@
                 </select>
             </div>
             <div style="display:flex; align-items:center; gap:2px;">
-                <input type="text" id="user-search-input" placeholder="搜索用户" oninput="scheduleFilterUserList()"
+                <input type="text" id="user-search-input" placeholder="搜索用户"
                     style="width:100%; font-size:11px; padding:2px 4px; border:1px solid #aac; border-radius:2px; box-sizing:border-box;">
             </div>
         </div>