From bf2d63f125246ca672a67e1ecf4f4e1df2c67217 Mon Sep 17 00:00:00 2001
From: pllx <pllx@users.noreply.github.com>
Date: Tue, 28 Apr 2026 10:11:16 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=EF=BC=9A=E5=A4=B4=E5=83=8F?=
 =?UTF-8?q?=E5=BC=B9=E7=AA=97=E7=82=B9=E5=87=BB=E9=81=AE=E7=BD=A9=E5=B1=82?=
 =?UTF-8?q?=E5=85=B3=E9=97=AD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

头像选择弹窗缺少 data-avatar-picker-overlay / data-avatar-picker-panel 属性及遮罩层点击关闭逻辑。参考设置弹窗的模式添加。

改动：
- toolbar.blade.php：添加 data-avatar-picker-overlay 和 data-avatar-picker-panel
- profile-controls.js：添加遮罩层点击关闭处理
---
 resources/js/chat-room/profile-controls.js             | 5 +++++
 resources/views/chat/partials/layout/toolbar.blade.php | 4 ++--
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/resources/js/chat-room/profile-controls.js b/resources/js/chat-room/profile-controls.js
index 971eea4..fb43a6f 100644
--- a/resources/js/chat-room/profile-controls.js
+++ b/resources/js/chat-room/profile-controls.js
@@ -703,6 +703,11 @@ export function bindProfileControls() {
         if (event.target.closest("[data-settings-modal-overlay]")) {
             closeSettingsModal();
         }
+
+        // ── 头像选择弹窗：点击遮罩层关闭 ──
+        if (event.target.closest("[data-avatar-picker-overlay]") && !event.target.closest("[data-avatar-picker-panel]")) {
+            closeAvatarPicker();
+        }
     });
 
     document.addEventListener("change", (event) => {
diff --git a/resources/views/chat/partials/layout/toolbar.blade.php b/resources/views/chat/partials/layout/toolbar.blade.php
index c75cd25..233f597 100644
--- a/resources/views/chat/partials/layout/toolbar.blade.php
+++ b/resources/views/chat/partials/layout/toolbar.blade.php
@@ -44,10 +44,10 @@
 </div>
 
 {{-- ═══════════ 头像选择弹窗 ═══════════ --}}
-<div id="avatar-picker-modal"
+<div id="avatar-picker-modal" data-avatar-picker-overlay
     style="display:none; position:fixed; top:0; left:0; right:0; bottom:0;
     background:rgba(0,0,0,0.5); z-index:9999; justify-content:center; align-items:center;">
-    <div
+    <div data-avatar-picker-panel
         style="background:#fff; width:600px; max-height:80vh; border-radius:6px; overflow:hidden;
         box-shadow:0 4px 20px rgba(0,0,0,0.3); display:flex; flex-direction:column;">
         {{-- 标题栏 --}}