迁移聊天图片上传事件绑定

resources/js/chat-room.js

@@ -2,6 +2,7 @@
 
 export { escapeHtml, escapeHtmlWithLineBreaks } from "./chat-room/html.js";
 export { applyFontSize, bindChatFontSizeControl, CHAT_FONT_SIZE_STORAGE_KEY, restoreChatFontSize } from "./chat-room/font-size.js";
+export { bindChatImageUploadControl } from "./chat-room/image-upload.js";
 export { closeChatImageLightbox, initChatImageLightboxEvents, openChatImageLightbox } from "./chat-room/lightbox.js";
 export {
     BLOCKABLE_SYSTEM_SENDERS,
@@ -28,6 +29,7 @@ export { createMessageQueue } from "./chat-room/message-queue.js";
 
 import { escapeHtml, escapeHtmlWithLineBreaks } from "./chat-room/html.js";
 import { applyFontSize, bindChatFontSizeControl, CHAT_FONT_SIZE_STORAGE_KEY, restoreChatFontSize } from "./chat-room/font-size.js";
+import { bindChatImageUploadControl } from "./chat-room/image-upload.js";
 import { closeChatImageLightbox, initChatImageLightboxEvents, openChatImageLightbox } from "./chat-room/lightbox.js";
 import {
     BLOCKABLE_SYSTEM_SENDERS,
@@ -58,6 +60,7 @@ if (typeof window !== "undefined") {
         escapeHtmlWithLineBreaks,
         applyFontSize,
         bindChatFontSizeControl,
+        bindChatImageUploadControl,
         CHAT_FONT_SIZE_STORAGE_KEY,
         restoreChatFontSize,
         closeChatImageLightbox,
@@ -87,4 +90,5 @@ if (typeof window !== "undefined") {
     window.openChatImageLightbox = openChatImageLightbox;
     window.applyFontSize = applyFontSize;
     bindChatFontSizeControl();
+    bindChatImageUploadControl();
 }

resources/js/chat-room/image-upload.js

@@ -0,0 +1,38 @@
+// 聊天室图片上传控件事件绑定，逐步替代 Blade 内联 onclick/onchange。
+
+let imageUploadEventsBound = false;
+
+/**
+ * 绑定聊天图片选择按钮与文件框事件。
+ *
+ * @returns {void}
+ */
+export function bindChatImageUploadControl() {
+    if (imageUploadEventsBound || typeof document === "undefined") {
+        return;
+    }
+
+    imageUploadEventsBound = true;
+    document.addEventListener("click", (event) => {
+        if (!(event.target instanceof Element)) {
+            return;
+        }
+
+        if (!event.target.closest("[data-chat-image-upload-trigger]")) {
+            return;
+        }
+
+        event.preventDefault();
+        document.getElementById("chat_image")?.click();
+    });
+
+    document.addEventListener("change", (event) => {
+        if (!(event.target instanceof HTMLInputElement) || event.target.id !== "chat_image") {
+            return;
+        }
+
+        if (typeof window.handleChatImageSelected === "function") {
+            window.handleChatImageSelected(event.target);
+        }
+    });
+}

resources/views/chat/partials/layout/input-bar.blade.php

@@ -111,9 +111,8 @@ $welcomeMessages = [
                 style="font-size: 11px; padding: 1px 6px; background: #2563eb; color: #fff; border: none; border-radius: 2px; cursor: pointer;">🎣
                 钓鱼</button>
 
-                <input type="file" id="chat_image" name="image" accept="image/jpeg,image/png,image/gif,image/webp" style="display:none;"
+                <input type="file" id="chat_image" name="image" accept="image/jpeg,image/png,image/gif,image/webp" style="display:none;">
-                    onchange="handleChatImageSelected(this)">
+                <button type="button" data-chat-image-upload-trigger
-                <button type="button" onclick="document.getElementById('chat_image')?.click()"
                     style="font-size: 11px; padding: 1px 6px; background: #0f766e; color: #fff; border: none; border-radius: 2px; cursor: pointer;">
                     📷 图片
                 </button>