diff --git a/resources/js/chat-room/rooms.js b/resources/js/chat-room/rooms.js index 400b070..5dffcf3 100644 --- a/resources/js/chat-room/rooms.js +++ b/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 `
+ transition:background .15s;"> ${safeRoomName}${currentTag}