From 64a1e5d76977da58dff2220a7c1fb229703f35f9 Mon Sep 17 00:00:00 2001
From: lkddi <lkddi@163.com>
Date: Sat, 25 Apr 2026 03:41:45 +0800
Subject: [PATCH] =?UTF-8?q?=E8=BF=81=E7=A7=BB=E8=81=8A=E5=A4=A9=E5=9B=BE?=
 =?UTF-8?q?=E7=89=87=E4=B8=8A=E4=BC=A0=E4=BA=8B=E4=BB=B6=E7=BB=91=E5=AE=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 resources/js/chat-room.js                     |  4 ++
 resources/js/chat-room/image-upload.js        | 38 +++++++++++++++++++
 .../chat/partials/layout/input-bar.blade.php  |  5 +--
 3 files changed, 44 insertions(+), 3 deletions(-)
 create mode 100644 resources/js/chat-room/image-upload.js

diff --git a/resources/js/chat-room.js b/resources/js/chat-room.js
index 148245c..31c146b 100644
--- a/resources/js/chat-room.js
+++ b/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();
 }
diff --git a/resources/js/chat-room/image-upload.js b/resources/js/chat-room/image-upload.js
new file mode 100644
index 0000000..4f25860
--- /dev/null
+++ b/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);
+        }
+    });
+}
diff --git a/resources/views/chat/partials/layout/input-bar.blade.php b/resources/views/chat/partials/layout/input-bar.blade.php
index 6d5754b..ac56258 100644
--- a/resources/views/chat/partials/layout/input-bar.blade.php
+++ b/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;"
-                    onchange="handleChatImageSelected(this)">
-                <button type="button" onclick="document.getElementById('chat_image')?.click()"
+                <input type="file" id="chat_image" name="image" accept="image/jpeg,image/png,image/gif,image/webp" style="display:none;">
+                <button type="button" data-chat-image-upload-trigger
                     style="font-size: 11px; padding: 1px 6px; background: #0f766e; color: #fff; border: none; border-radius: 2px; cursor: pointer;">
                     📷 图片
                 </button>