收口房间列表悬停事件

resources/js/chat-room/rooms.js

@@ -55,6 +55,21 @@ function buildRoomClickAttributes(roomId, roomUrlResolver = undefined) {
     return `data-room-url="${safeUrl}"`;
 }
 
+/**
+ * 生成桌面房间行悬停样式数据，交给事件委托恢复背景色。
+ *
+ * @param {boolean} isCurrent 是否当前房间
+ * @param {string} bg 默认背景色
+ * @returns {string}
+ */
+function buildRoomHoverAttributes(isCurrent, bg) {
+    if (isCurrent) {
+        return "";
+    }
+
+    return `data-room-hover-bg="#ddeeff" data-room-normal-bg="${escapeHtml(bg)}"`;
+}
+
 /**
  * 绑定房间列表跳转事件。
  * 右侧面板和手机抽屉都复用 data-room-url，刷新 HTML 后无需重新绑定。
@@ -88,6 +103,30 @@ export function bindRoomStatusControls() {
         event.preventDefault();
         window.location.href = roomUrl;
     });
+
+    document.addEventListener("mouseover", (event) => {
+        if (!(event.target instanceof Element)) {
+            return;
+        }
+
+        const roomRow = event.target.closest("[data-room-hover-bg]");
+
+        if (roomRow instanceof HTMLElement) {
+            roomRow.style.background = roomRow.getAttribute("data-room-hover-bg") || "";
+        }
+    });
+
+    document.addEventListener("mouseout", (event) => {
+        if (!(event.target instanceof Element)) {
+            return;
+        }
+
+        const roomRow = event.target.closest("[data-room-normal-bg]");
+
+        if (roomRow instanceof HTMLElement) {
+            roomRow.style.background = roomRow.getAttribute("data-room-normal-bg") || "";
+        }
+    });
 }
 
 /**
@@ -128,15 +167,14 @@ export function renderRoomStatusRow(room, options = {}) {
     }
 
     const border = isCurrent ? "#aac5f0" : "#e0eaf5";
+    const hoverAttributes = buildRoomHoverAttributes(isCurrent, bg);
 
-    return `<div ${clickAttributes}
+    return `<div ${clickAttributes} ${hoverAttributes}
                 style="display:flex;align-items:center;justify-content:space-between;
                        padding:5px 8px;margin:2px 3px;border-radius:5px;
                        border:1px solid ${border};background:${bg};
                        cursor:${isCurrent ? "default" : "pointer"};
-                       transition:background .15s;"
-                onmouseover="if(${!isCurrent}) this.style.background='#ddeeff';"
-                onmouseout="this.style.background='${bg}';">
+                       transition:background .15s;">
                 <span style="color:${nameColor};font-size:11px;font-weight:${isCurrent ? "bold" : "normal"};overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;margin-right:4px;">
                     ${safeRoomName}${currentTag}
                 </span>