lkddi/chatroom
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

重构：将头像弹窗和设置弹窗迁移到 toolbar.blade.php

Browse Source 
- 头像选择弹窗、个人设置弹窗、savePassword/saveSettings JS 移入 toolbar
- frame.blade.php 从 298 行减至约 100 行，只保留框架结构
- 按钮和弹窗集中在同一文件，职责清晰
This commit is contained in:
流星
2026-02-27 00:24:21 +08:00
parent cc5cd680f1
commit 74c4a6f11c
2 changed files with 207 additions and 198 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/chat/frame.blade.php
-196
View File
@@ -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>
resources/views/chat/partials/toolbar.blade.php
+207 -2
View File
@@ -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>