迁移聊天图片预览事件到Vite模块

resources/js/chat-room.js

@@ -2,7 +2,7 @@
 
 export { escapeHtml, escapeHtmlWithLineBreaks } from "./chat-room/html.js";
 export { applyFontSize, CHAT_FONT_SIZE_STORAGE_KEY, restoreChatFontSize } from "./chat-room/font-size.js";
-export { closeChatImageLightbox, openChatImageLightbox } from "./chat-room/lightbox.js";
+export { closeChatImageLightbox, initChatImageLightboxEvents, openChatImageLightbox } from "./chat-room/lightbox.js";
 export {
     BLOCKABLE_SYSTEM_SENDERS,
     BLOCKED_SYSTEM_SENDERS_STORAGE_KEY,
@@ -22,7 +22,7 @@ export { createMessageQueue } from "./chat-room/message-queue.js";
 
 import { escapeHtml, escapeHtmlWithLineBreaks } from "./chat-room/html.js";
 import { applyFontSize, CHAT_FONT_SIZE_STORAGE_KEY, restoreChatFontSize } from "./chat-room/font-size.js";
-import { closeChatImageLightbox, openChatImageLightbox } from "./chat-room/lightbox.js";
+import { closeChatImageLightbox, initChatImageLightboxEvents, openChatImageLightbox } from "./chat-room/lightbox.js";
 import {
     BLOCKABLE_SYSTEM_SENDERS,
     BLOCKED_SYSTEM_SENDERS_STORAGE_KEY,
@@ -48,6 +48,7 @@ if (typeof window !== "undefined") {
         CHAT_FONT_SIZE_STORAGE_KEY,
         restoreChatFontSize,
         closeChatImageLightbox,
+        initChatImageLightboxEvents,
         openChatImageLightbox,
         BLOCKABLE_SYSTEM_SENDERS,
         BLOCKED_SYSTEM_SENDERS_STORAGE_KEY,

resources/js/chat-room/lightbox.js

@@ -1,4 +1,6 @@
-// 聊天室图片预览层控制，迁出 Blade 内联脚本后仍通过 window 全局函数兼容现有 onclick。
+// 聊天室图片预览层控制，迁出 Blade 内联脚本后通过事件委托接管打开和关闭。
+
+let lightboxEventsBound = false;
 
 /**
  * 打开聊天图片大图预览层。
@@ -52,3 +54,42 @@ export function closeChatImageLightbox(event = null) {
 
     document.body.style.overflow = "";
 }
+
+/**
+ * 绑定聊天图片预览层事件委托。
+ *
+ * @returns {void}
+ */
+export function initChatImageLightboxEvents() {
+    if (lightboxEventsBound) {
+        return;
+    }
+
+    lightboxEventsBound = true;
+    document.addEventListener("click", (event) => {
+        if (!(event.target instanceof Element)) {
+            return;
+        }
+
+        const imagePreview = event.target.closest("[data-chat-image-lightbox-image]");
+        if (imagePreview) {
+            return;
+        }
+
+        const opener = event.target.closest("[data-chat-image-lightbox-open]");
+        if (opener) {
+            event.preventDefault();
+            openChatImageLightbox(opener.dataset.full || opener.href, opener.dataset.alt || "聊天图片");
+            return;
+        }
+
+        if (event.target.closest("[data-chat-image-lightbox-close]")) {
+            event.preventDefault();
+            closeChatImageLightbox();
+        }
+    });
+}
+
+if (typeof document !== "undefined") {
+    initChatImageLightboxEvents();
+}

resources/views/chat/frame.blade.php

@@ -186,15 +186,15 @@
     {{-- 聊天图片大图预览层 --}}
     <div id="chat-image-lightbox"
         style="display:none; position:fixed; inset:0; z-index:10020; background:rgba(15,23,42,.86); backdrop-filter:blur(4px);"
-        onclick="closeChatImageLightbox(event)">
+        data-chat-image-lightbox-close>
         <div
             style="position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:32px;"
-            onclick="closeChatImageLightbox(event)">
+            data-chat-image-lightbox-close>
             <img id="chat-image-lightbox-img" src="" alt="聊天图片预览"
-                onclick="event.stopPropagation()"
+                data-chat-image-lightbox-image
                 style="max-width:92vw; max-height:86vh; border-radius:12px; box-shadow:0 18px 50px rgba(0,0,0,.45);">
         </div>
-        <button type="button" onclick="closeChatImageLightbox(event)"
+        <button type="button" data-chat-image-lightbox-close
             style="position:absolute; top:20px; right:24px; z-index:10021; border:none; background:transparent; color:#fff; font-size:34px; cursor:pointer;">&times;</button>
         <div id="chat-image-lightbox-name"
             style="position:absolute; left:50%; bottom:24px; transform:translateX(-50%); z-index:10021; max-width:88vw; color:#e2e8f0; font-size:12px; text-align:center; word-break:break-all;">

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

@@ -1449,8 +1449,7 @@
 
             return `
                 <span style="display:inline-flex; align-items:flex-start; gap:6px; vertical-align:middle;">
-                    <a href="${fullUrl}" data-full="${fullUrl}" data-alt="${imageName}"
+                    <a href="${fullUrl}" data-full="${fullUrl}" data-alt="${imageName}" data-chat-image-lightbox-open
-                        onclick="openChatImageLightbox(this.dataset.full, this.dataset.alt); return false;"
                         style="display:inline-block; border:1px solid rgba(15,23,42,.14); border-radius:10px; overflow:hidden; background:#f8fafc; box-shadow:0 2px 10px rgba(15,23,42,.10);">
                         <img src="${thumbUrl}" alt="${imageName}"
                             style="display:block; max-width:96px; max-height:96px; object-fit:cover; cursor:zoom-in;">