From 74c4a6f11c5955417ddc1188fd4139b7db1724ed Mon Sep 17 00:00:00 2001
From: lkddi <lkddi@163.com>
Date: Fri, 27 Feb 2026 00:24:21 +0800
Subject: [PATCH] =?UTF-8?q?=E9=87=8D=E6=9E=84=EF=BC=9A=E5=B0=86=E5=A4=B4?=
 =?UTF-8?q?=E5=83=8F=E5=BC=B9=E7=AA=97=E5=92=8C=E8=AE=BE=E7=BD=AE=E5=BC=B9?=
 =?UTF-8?q?=E7=AA=97=E8=BF=81=E7=A7=BB=E5=88=B0=20toolbar.blade.php?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 头像选择弹窗、个人设置弹窗、savePassword/saveSettings JS 移入 toolbar
- frame.blade.php 从 298 行减至约 100 行，只保留框架结构
- 按钮和弹窗集中在同一文件，职责清晰
---
 resources/views/chat/frame.blade.php          | 196 ----------------
 .../views/chat/partials/toolbar.blade.php     | 209 +++++++++++++++++-
 2 files changed, 207 insertions(+), 198 deletions(-)

diff --git a/resources/views/chat/frame.blade.php b/resources/views/chat/frame.blade.php
index 749d2df..bb449f7 100644
--- a/resources/views/chat/frame.blade.php
+++ b/resources/views/chat/frame.blade.php
@@ -95,202 +95,6 @@
     @include('chat.partials.user-actions')
     @include('chat.partials.scripts')
 
-    {{-- ═══════════ 头像选择弹窗 ═══════════ --}}
-    <div id="avatar-picker-modal"
-        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
-            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;">
-            {{-- 标题栏 --}}
-            <div
-                style="background:#336699; color:#fff; padding:10px 16px; font-size:14px; font-weight:bold;
-                display:flex; justify-content:space-between; align-items:center;">
-                <span>🖼 修改头像（原版风格）</span>
-                <span style="cursor:pointer; font-size:18px;" onclick="closeAvatarPicker()">✕</span>
-            </div>
-
-            {{-- 预览区 --}}
-            <div
-                style="padding:10px 16px; background:#f0f6ff; border-bottom:1px solid #ddd; display:flex; align-items:center; gap:12px;">
-                <span style="font-size:12px; color:#666;">当前选中：</span>
-                <img id="avatar-preview" src="/images/headface/{{ $user->usersf ?: '1.gif' }}"
-                    style="width:40px; height:40px; border:2px solid #336699; border-radius:4px;">
-                <span id="avatar-selected-name" style="font-size:12px; color:#333;">{{ $user->usersf ?: '未设置' }}</span>
-                <button id="avatar-save-btn" disabled onclick="saveAvatar()"
-                    style="margin-left:auto; padding:5px 16px; background:#336699; color:#fff; border:none;
-                    border-radius:3px; font-size:12px; cursor:pointer;">确定更换</button>
-            </div>
-
-            {{-- 头像网格 --}}
-            <div id="avatar-grid"
-                style="flex:1; overflow-y:auto; padding:10px; display:flex; flex-wrap:wrap;
-                gap:4px; align-content:flex-start;">
-            </div>
-        </div>
-    </div>
-
-    {{-- ═══════════ 个人设置弹窗 ═══════════ --}}
-    <div id="settings-modal"
-        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
-            style="background:#fff; border-radius:8px; width:380px; max-height:90vh; overflow-y:auto;
-            box-shadow:0 8px 32px rgba(0,0,0,0.3);">
-            {{-- 标题栏 --}}
-            <div
-                style="background:linear-gradient(135deg,#336699,#5a8fc0); color:#fff;
-                padding:12px 16px; border-radius:8px 8px 0 0; display:flex; justify-content:space-between; align-items:center;">
-                <span style="font-size:14px; font-weight:bold;">⚙️ 个人设置</span>
-                <span onclick="document.getElementById('settings-modal').style.display='none'"
-                    style="cursor:pointer; font-size:18px; opacity:0.8;">&times;</span>
-            </div>
-
-            <div style="padding:16px;">
-                {{-- 修改密码 --}}
-                <div style="margin-bottom:16px; border:1px solid #e0e0e0; border-radius:6px; padding:12px;">
-                    <div style="font-size:12px; font-weight:bold; color:#336699; margin-bottom:8px;">🔒 修改密码</div>
-                    <div style="display:flex; flex-direction:column; gap:6px;">
-                        <input id="set-old-pwd" type="password" placeholder="当前旧密码"
-                            style="padding:6px 8px; border:1px solid #ccc; border-radius:4px; font-size:12px;">
-                        <input id="set-new-pwd" type="password" placeholder="新密码（至少6位）"
-                            style="padding:6px 8px; border:1px solid #ccc; border-radius:4px; font-size:12px;">
-                        <input id="set-new-pwd2" type="password" placeholder="确认新密码"
-                            style="padding:6px 8px; border:1px solid #ccc; border-radius:4px; font-size:12px;">
-                        <button onclick="savePassword()"
-                            style="padding:6px; background:#336699; color:#fff; border:none; border-radius:4px;
-                            font-size:12px; cursor:pointer;">确定修改密码</button>
-                    </div>
-                </div>
-
-                {{-- 个人资料 --}}
-                <div style="margin-bottom:16px; border:1px solid #e0e0e0; border-radius:6px; padding:12px;">
-                    <div style="font-size:12px; font-weight:bold; color:#336699; margin-bottom:8px;">👤 个人资料</div>
-                    <div style="display:flex; flex-direction:column; gap:6px;">
-                        <div style="display:flex; align-items:center; gap:8px;">
-                            <label style="font-size:12px; width:50px; text-align:right;">性别:</label>
-                            <select id="set-sex"
-                                style="flex:1; padding:5px; border:1px solid #ccc; border-radius:4px; font-size:12px;">
-                                <option value="1" {{ Auth::user()->sex == 1 ? 'selected' : '' }}>男</option>
-                                <option value="2" {{ Auth::user()->sex == 2 ? 'selected' : '' }}>女</option>
-                                <option value="0" {{ Auth::user()->sex == 0 ? 'selected' : '' }}>保密</option>
-                            </select>
-                        </div>
-                        <div style="display:flex; align-items:center; gap:8px;">
-                            <label style="font-size:12px; width:50px; text-align:right;">邮箱:</label>
-                            <input id="set-email" type="email" value="{{ Auth::user()->email ?? '' }}"
-                                placeholder="选填"
-                                style="flex:1; padding:5px; border:1px solid #ccc; border-radius:4px; font-size:12px;">
-                        </div>
-                    </div>
-                </div>
-
-                {{-- 密保设置 --}}
-                <div style="margin-bottom:16px; border:1px solid #e0e0e0; border-radius:6px; padding:12px;">
-                    <div style="font-size:12px; font-weight:bold; color:#336699; margin-bottom:8px;">🛡️ 密码保护</div>
-                    <div style="display:flex; flex-direction:column; gap:6px;">
-                        <input id="set-question" type="text" value="{{ Auth::user()->question ?? '' }}"
-                            placeholder="密保问题（如：我的小学名字？）"
-                            style="padding:6px 8px; border:1px solid #ccc; border-radius:4px; font-size:12px;">
-                        <input id="set-answer" type="text" value="{{ Auth::user()->answer ?? '' }}"
-                            placeholder="密保答案"
-                            style="padding:6px 8px; border:1px solid #ccc; border-radius:4px; font-size:12px;">
-                    </div>
-                </div>
-
-                {{-- 保存按钮 --}}
-                <button onclick="saveSettings()"
-                    style="width:100%; padding:8px; background:linear-gradient(135deg,#336699,#5a8fc0);
-                    color:#fff; border:none; border-radius:4px; font-size:13px; font-weight:bold; cursor:pointer;">
-                    💾 保存资料设置
-                </button>
-            </div>
-        </div>
-    </div>
-
-    <script>
-        /**
-         * 保存密码（调用修改密码 API）
-         */
-        async function savePassword() {
-            const oldPwd = document.getElementById('set-old-pwd').value;
-            const newPwd = document.getElementById('set-new-pwd').value;
-            const newPwd2 = document.getElementById('set-new-pwd2').value;
-            if (!oldPwd || !newPwd) {
-                alert('请填写旧密码和新密码');
-                return;
-            }
-            if (newPwd.length < 6) {
-                alert('新密码最少6位！');
-                return;
-            }
-            if (newPwd !== newPwd2) {
-                alert('两次输入的新密码不一致！');
-                return;
-            }
-
-            try {
-                const res = await fetch('{{ route('user.update_password') }}', {
-                    method: 'PUT',
-                    headers: {
-                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
-                        'Content-Type': 'application/json',
-                        'Accept': 'application/json'
-                    },
-                    body: JSON.stringify({
-                        old_password: oldPwd,
-                        new_password: newPwd,
-                        new_password_confirmation: newPwd2
-                    })
-                });
-                const data = await res.json();
-                if (res.ok && data.status === 'success') {
-                    alert('密码修改成功！');
-                    document.getElementById('set-old-pwd').value = '';
-                    document.getElementById('set-new-pwd').value = '';
-                    document.getElementById('set-new-pwd2').value = '';
-                } else {
-                    alert('修改失败: ' + (data.message || '请输入正确的旧密码'));
-                }
-            } catch (e) {
-                alert('网络异常');
-            }
-        }
-
-        /**
-         * 保存个人资料和密保设置
-         */
-        async function saveSettings() {
-            const profileData = {
-                sex: document.getElementById('set-sex').value,
-                email: document.getElementById('set-email').value,
-                question: document.getElementById('set-question').value,
-                answer: document.getElementById('set-answer').value,
-                headface: @json(Auth::user()->usersf ?: '1.gif'),
-                sign: @json(Auth::user()->sign ?? '')
-            };
-
-            try {
-                const res = await fetch('{{ route('user.update_profile') }}', {
-                    method: 'PUT',
-                    headers: {
-                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
-                        'Content-Type': 'application/json',
-                        'Accept': 'application/json'
-                    },
-                    body: JSON.stringify(profileData)
-                });
-                const data = await res.json();
-                if (res.ok && data.status === 'success') {
-                    alert('设置保存成功！');
-                } else {
-                    alert('保存失败: ' + (data.message || '输入有误'));
-                }
-            } catch (e) {
-                alert('网络异常');
-            }
-        }
-    </script>
 
 </body>
 
diff --git a/resources/views/chat/partials/toolbar.blade.php b/resources/views/chat/partials/toolbar.blade.php
index 52bce15..8321d63 100644
--- a/resources/views/chat/partials/toolbar.blade.php
+++ b/resources/views/chat/partials/toolbar.blade.php
@@ -1,10 +1,18 @@
 {{--
-    文件功能：聊天室竖向工具条（中间导航栏）
-    从 frame.blade.php 拆分，便于独立维护
+    文件功能：聊天室竖向工具条（中间导航栏）+ 关联弹窗
+
+    包含：
+    1. 工具条按钮（管理、商店、存点、头像、设置等）
+    2. 头像选择弹窗
+    3. 个人设置弹窗（密码、资料、密保）
+    4. 对应的 JS 操作函数
 
     依赖变量：$user, $superLevel, $room
+    @author ChatRoom Laravel
+    @version 1.0.0
 --}}
 
+{{-- ═══════════ 竖向工具条按钮 ═══════════ --}}
 <div class="chat-toolbar" id="toolbar-strip">
     @if ($user->user_level >= $superLevel)
         <div class="tool-btn" style="color: #ffcc00;" onclick="window.open('/admin', '_blank')" title="管理后台">
@@ -32,3 +40,200 @@
     <div class="tool-btn" style="color: #ffaaaa;" onclick="if(confirm('确定要离开聊天室吗？')){leaveRoom();}" title="离开聊天室">离开
     </div>
 </div>
+
+{{-- ═══════════ 头像选择弹窗 ═══════════ --}}
+<div id="avatar-picker-modal"
+    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
+        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;">
+        {{-- 标题栏 --}}
+        <div
+            style="background:#336699; color:#fff; padding:10px 16px; font-size:14px; font-weight:bold;
+            display:flex; justify-content:space-between; align-items:center;">
+            <span>🖼 修改头像（原版风格）</span>
+            <span style="cursor:pointer; font-size:18px;" onclick="closeAvatarPicker()">✕</span>
+        </div>
+
+        {{-- 预览区 --}}
+        <div
+            style="padding:10px 16px; background:#f0f6ff; border-bottom:1px solid #ddd; display:flex; align-items:center; gap:12px;">
+            <span style="font-size:12px; color:#666;">当前选中：</span>
+            <img id="avatar-preview" src="/images/headface/{{ $user->usersf ?: '1.gif' }}"
+                style="width:40px; height:40px; border:2px solid #336699; border-radius:4px;">
+            <span id="avatar-selected-name" style="font-size:12px; color:#333;">{{ $user->usersf ?: '未设置' }}</span>
+            <button id="avatar-save-btn" disabled onclick="saveAvatar()"
+                style="margin-left:auto; padding:5px 16px; background:#336699; color:#fff; border:none;
+                border-radius:3px; font-size:12px; cursor:pointer;">确定更换</button>
+        </div>
+
+        {{-- 头像网格 --}}
+        <div id="avatar-grid"
+            style="flex:1; overflow-y:auto; padding:10px; display:flex; flex-wrap:wrap;
+            gap:4px; align-content:flex-start;">
+        </div>
+    </div>
+</div>
+
+{{-- ═══════════ 个人设置弹窗 ═══════════ --}}
+<div id="settings-modal"
+    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
+        style="background:#fff; border-radius:8px; width:380px; max-height:90vh; overflow-y:auto;
+        box-shadow:0 8px 32px rgba(0,0,0,0.3);">
+        {{-- 标题栏 --}}
+        <div
+            style="background:linear-gradient(135deg,#336699,#5a8fc0); color:#fff;
+            padding:12px 16px; border-radius:8px 8px 0 0; display:flex; justify-content:space-between; align-items:center;">
+            <span style="font-size:14px; font-weight:bold;">⚙️ 个人设置</span>
+            <span onclick="document.getElementById('settings-modal').style.display='none'"
+                style="cursor:pointer; font-size:18px; opacity:0.8;">&times;</span>
+        </div>
+
+        <div style="padding:16px;">
+            {{-- 修改密码 --}}
+            <div style="margin-bottom:16px; border:1px solid #e0e0e0; border-radius:6px; padding:12px;">
+                <div style="font-size:12px; font-weight:bold; color:#336699; margin-bottom:8px;">🔒 修改密码</div>
+                <div style="display:flex; flex-direction:column; gap:6px;">
+                    <input id="set-old-pwd" type="password" placeholder="当前旧密码"
+                        style="padding:6px 8px; border:1px solid #ccc; border-radius:4px; font-size:12px;">
+                    <input id="set-new-pwd" type="password" placeholder="新密码（至少6位）"
+                        style="padding:6px 8px; border:1px solid #ccc; border-radius:4px; font-size:12px;">
+                    <input id="set-new-pwd2" type="password" placeholder="确认新密码"
+                        style="padding:6px 8px; border:1px solid #ccc; border-radius:4px; font-size:12px;">
+                    <button onclick="savePassword()"
+                        style="padding:6px; background:#336699; color:#fff; border:none; border-radius:4px;
+                        font-size:12px; cursor:pointer;">确定修改密码</button>
+                </div>
+            </div>
+
+            {{-- 个人资料 --}}
+            <div style="margin-bottom:16px; border:1px solid #e0e0e0; border-radius:6px; padding:12px;">
+                <div style="font-size:12px; font-weight:bold; color:#336699; margin-bottom:8px;">👤 个人资料</div>
+                <div style="display:flex; flex-direction:column; gap:6px;">
+                    <div style="display:flex; align-items:center; gap:8px;">
+                        <label style="font-size:12px; width:50px; text-align:right;">性别:</label>
+                        <select id="set-sex"
+                            style="flex:1; padding:5px; border:1px solid #ccc; border-radius:4px; font-size:12px;">
+                            <option value="1" {{ Auth::user()->sex == 1 ? 'selected' : '' }}>男</option>
+                            <option value="2" {{ Auth::user()->sex == 2 ? 'selected' : '' }}>女</option>
+                            <option value="0" {{ Auth::user()->sex == 0 ? 'selected' : '' }}>保密</option>
+                        </select>
+                    </div>
+                    <div style="display:flex; align-items:center; gap:8px;">
+                        <label style="font-size:12px; width:50px; text-align:right;">邮箱:</label>
+                        <input id="set-email" type="email" value="{{ Auth::user()->email ?? '' }}" placeholder="选填"
+                            style="flex:1; padding:5px; border:1px solid #ccc; border-radius:4px; font-size:12px;">
+                    </div>
+                </div>
+            </div>
+
+            {{-- 密保设置 --}}
+            <div style="margin-bottom:16px; border:1px solid #e0e0e0; border-radius:6px; padding:12px;">
+                <div style="font-size:12px; font-weight:bold; color:#336699; margin-bottom:8px;">🛡️ 密码保护</div>
+                <div style="display:flex; flex-direction:column; gap:6px;">
+                    <input id="set-question" type="text" value="{{ Auth::user()->question ?? '' }}"
+                        placeholder="密保问题（如：我的小学名字？）"
+                        style="padding:6px 8px; border:1px solid #ccc; border-radius:4px; font-size:12px;">
+                    <input id="set-answer" type="text" value="{{ Auth::user()->answer ?? '' }}"
+                        placeholder="密保答案"
+                        style="padding:6px 8px; border:1px solid #ccc; border-radius:4px; font-size:12px;">
+                </div>
+            </div>
+
+            {{-- 保存按钮 --}}
+            <button onclick="saveSettings()"
+                style="width:100%; padding:8px; background:linear-gradient(135deg,#336699,#5a8fc0);
+                color:#fff; border:none; border-radius:4px; font-size:13px; font-weight:bold; cursor:pointer;">
+                💾 保存资料设置
+            </button>
+        </div>
+    </div>
+</div>
+
+{{-- ═══════════ 工具条相关 JS 函数 ═══════════ --}}
+<script>
+    /**
+     * 保存密码（调用修改密码 API）
+     */
+    async function savePassword() {
+        const oldPwd = document.getElementById('set-old-pwd').value;
+        const newPwd = document.getElementById('set-new-pwd').value;
+        const newPwd2 = document.getElementById('set-new-pwd2').value;
+        if (!oldPwd || !newPwd) {
+            alert('请填写旧密码和新密码');
+            return;
+        }
+        if (newPwd.length < 6) {
+            alert('新密码最少6位！');
+            return;
+        }
+        if (newPwd !== newPwd2) {
+            alert('两次输入的新密码不一致！');
+            return;
+        }
+
+        try {
+            const res = await fetch('{{ route('user.update_password') }}', {
+                method: 'PUT',
+                headers: {
+                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
+                    'Content-Type': 'application/json',
+                    'Accept': 'application/json'
+                },
+                body: JSON.stringify({
+                    old_password: oldPwd,
+                    new_password: newPwd,
+                    new_password_confirmation: newPwd2
+                })
+            });
+            const data = await res.json();
+            if (res.ok && data.status === 'success') {
+                alert('密码修改成功！');
+                document.getElementById('set-old-pwd').value = '';
+                document.getElementById('set-new-pwd').value = '';
+                document.getElementById('set-new-pwd2').value = '';
+            } else {
+                alert('修改失败: ' + (data.message || '请输入正确的旧密码'));
+            }
+        } catch (e) {
+            alert('网络异常');
+        }
+    }
+
+    /**
+     * 保存个人资料和密保设置
+     */
+    async function saveSettings() {
+        const profileData = {
+            sex: document.getElementById('set-sex').value,
+            email: document.getElementById('set-email').value,
+            question: document.getElementById('set-question').value,
+            answer: document.getElementById('set-answer').value,
+            headface: @json(Auth::user()->usersf ?: '1.gif'),
+            sign: @json(Auth::user()->sign ?? '')
+        };
+
+        try {
+            const res = await fetch('{{ route('user.update_profile') }}', {
+                method: 'PUT',
+                headers: {
+                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
+                    'Content-Type': 'application/json',
+                    'Accept': 'application/json'
+                },
+                body: JSON.stringify(profileData)
+            });
+            const data = await res.json();
+            if (res.ok && data.status === 'success') {
+                alert('设置保存成功！');
+            } else {
+                alert('保存失败: ' + (data.message || '输入有误'));
+            }
+        } catch (e) {
+            alert('网络异常');
+        }
+    }
+</script>