迁移字号选择器事件绑定

resources/js/chat-room.js

@@ -1,7 +1,7 @@
 // 聊天室 Vite 入口，集中导出从 Blade 内联脚本迁移出的纯前端工具。
 
 export { escapeHtml, escapeHtmlWithLineBreaks } from "./chat-room/html.js";
-export { applyFontSize, CHAT_FONT_SIZE_STORAGE_KEY, restoreChatFontSize } from "./chat-room/font-size.js";
+export { applyFontSize, bindChatFontSizeControl, CHAT_FONT_SIZE_STORAGE_KEY, restoreChatFontSize } from "./chat-room/font-size.js";
 export { closeChatImageLightbox, initChatImageLightboxEvents, openChatImageLightbox } from "./chat-room/lightbox.js";
 export {
     BLOCKABLE_SYSTEM_SENDERS,
@@ -27,7 +27,7 @@ export {
 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 { applyFontSize, bindChatFontSizeControl, CHAT_FONT_SIZE_STORAGE_KEY, restoreChatFontSize } from "./chat-room/font-size.js";
 import { closeChatImageLightbox, initChatImageLightboxEvents, openChatImageLightbox } from "./chat-room/lightbox.js";
 import {
     BLOCKABLE_SYSTEM_SENDERS,
@@ -57,6 +57,7 @@ if (typeof window !== "undefined") {
         escapeHtml,
         escapeHtmlWithLineBreaks,
         applyFontSize,
+        bindChatFontSizeControl,
         CHAT_FONT_SIZE_STORAGE_KEY,
         restoreChatFontSize,
         closeChatImageLightbox,
@@ -85,4 +86,5 @@ if (typeof window !== "undefined") {
     window.closeChatImageLightbox = closeChatImageLightbox;
     window.openChatImageLightbox = openChatImageLightbox;
     window.applyFontSize = applyFontSize;
+    bindChatFontSizeControl();
 }

resources/js/chat-room/font-size.js

@@ -1,6 +1,7 @@
 // 聊天室字号偏好控制，保留旧的 localStorage key 以兼容已有用户设置。
 
 export const CHAT_FONT_SIZE_STORAGE_KEY = "chat_font_size";
+let fontSizeEventsBound = false;
 
 /**
  * 应用字号到聊天消息窗口，并保存到 localStorage。
@@ -43,3 +44,23 @@ export function restoreChatFontSize() {
 
     return saved ? applyFontSize(saved) : false;
 }
+
+/**
+ * 绑定字号选择器事件。
+ *
+ * @returns {void}
+ */
+export function bindChatFontSizeControl() {
+    if (fontSizeEventsBound || typeof document === "undefined") {
+        return;
+    }
+
+    fontSizeEventsBound = true;
+    document.addEventListener("change", (event) => {
+        if (!(event.target instanceof HTMLSelectElement) || event.target.id !== "font_size_select") {
+            return;
+        }
+
+        applyFontSize(event.target.value);
+    });
+}

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

@@ -56,7 +56,7 @@
             </label>
 
             <label>字号:
-                <select id="font_size_select" style="color: #224466;" onchange="applyFontSize(this.value)">
+                <select id="font_size_select" style="color: #224466;">
                     <option value="12">12</option>
                     <option value="13">13</option>
                     <option value="14" selected>14</option>