lkddi
cc5cd680f1
- 从 frame.blade.php 中移除 276 行用户名片弹窗代码 - 全部整合到 user-actions.blade.php（全局函数 + Alpine 组件 + 弹窗 HTML） - frame.blade.php 减负至约 300 行，结构更清晰 - 所有用户交互逻辑集中管理：单击切换目标、双击名片弹窗、管理操作
298 lines
15 KiB
PHP
298 lines
15 KiB
PHP
{{--
|
||
文件功能：聊天室主界面框架（frame 页面）
|
||
全屏沉浸式布局，不使用统一 layout
|
||
CSS 抽取到 /public/css/chat.css
|
||
JS 抽取到 chat.partials.scripts Blade 模板
|
||
|
||
@author ChatRoom Laravel
|
||
@version 1.0.0
|
||
--}}
|
||
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>{{ $room->name ?? '聊天室' }} - 飘落流星</title>
|
||
<meta name="csrf-token" content="{{ csrf_token() }}">
|
||
@php
|
||
// 从 sysparam 读取权限等级配置
|
||
$levelWarn = (int) \App\Models\Sysparam::getValue('level_warn', '5');
|
||
$levelKick = (int) \App\Models\Sysparam::getValue('level_kick', '10');
|
||
$levelMute = (int) \App\Models\Sysparam::getValue('level_mute', '8');
|
||
$levelBan = (int) \App\Models\Sysparam::getValue('level_ban', '12');
|
||
$levelBanip = (int) \App\Models\Sysparam::getValue('level_banip', '14');
|
||
$levelFreeze = (int) \App\Models\Sysparam::getValue('level_freeze', '14');
|
||
$superLevel = (int) \App\Models\Sysparam::getValue('superlevel', '100');
|
||
$myLevel = Auth::user()->user_level;
|
||
@endphp
|
||
<script>
|
||
window.chatContext = {
|
||
roomId: {{ $room->id }},
|
||
username: "{{ $user->username }}",
|
||
userLevel: {{ $user->user_level }},
|
||
superLevel: {{ $superLevel }},
|
||
levelKick: {{ $levelKick }},
|
||
levelMute: {{ $levelMute }},
|
||
levelBan: {{ $levelBan }},
|
||
levelBanip: {{ $levelBanip }},
|
||
sendUrl: "{{ route('chat.send', $room->id) }}",
|
||
leaveUrl: "{{ route('chat.leave', $room->id) }}",
|
||
heartbeatUrl: "{{ route('chat.heartbeat', $room->id) }}",
|
||
fishCastUrl: "{{ route('fishing.cast', $room->id) }}",
|
||
fishReelUrl: "{{ route('fishing.reel', $room->id) }}",
|
||
chatBotUrl: "{{ route('chatbot.chat') }}",
|
||
chatBotClearUrl: "{{ route('chatbot.clear') }}",
|
||
chatBotEnabled: {{ \App\Models\Sysparam::getValue('chatbot_enabled', '0') === '1' ? 'true' : 'false' }}
|
||
};
|
||
</script>
|
||
@vite(['resources/css/app.css', 'resources/js/app.js', 'resources/js/chat.js'])
|
||
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
|
||
<link rel="stylesheet" href="/css/chat.css">
|
||
</head>
|
||
|
||
<body>
|
||
<div class="chat-layout">
|
||
|
||
{{-- ═══════════ 左侧主区域 ═══════════ --}}
|
||
<div class="chat-left">
|
||
|
||
{{-- 顶部标题栏 + 公告滚动条（独立文件维护） --}}
|
||
@include('chat.partials.header')
|
||
|
||
{{-- 消息窗格（双窗格，默认只显示 say1） --}}
|
||
<div class="message-panes" id="message-panes">
|
||
{{-- 主消息窗 --}}
|
||
<div class="message-pane say1" id="chat-messages-container">
|
||
<div class="msg-line">
|
||
<span style="color: #cc0000; font-weight: bold;">【公众窗口】</span>显示公众的发言！
|
||
<span class="msg-time">({{ now()->format('H:i:s') }})</span><br>
|
||
<span
|
||
style="color: #000099;">『{{ $room->name }}』{{ $room->description ?? '欢迎光临！畅所欲言，文明聊天。' }}</span>
|
||
</div>
|
||
</div>
|
||
{{-- 副消息窗（包厢窗） --}}
|
||
<div class="message-pane say2" id="chat-messages-container2">
|
||
<div class="msg-line">
|
||
<span style="color: #cc0000; font-weight: bold;">【包厢窗口】</span>显示包厢名单中聊友的发言！
|
||
<span class="msg-time">({{ now()->format('H:i:s') }})</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{{-- 底部输入工具栏（独立文件维护） --}}
|
||
@include('chat.partials.input-bar')
|
||
</div>
|
||
|
||
{{-- ═══════════ 竖向工具条（独立文件维护） ═══════════ --}}
|
||
@include('chat.partials.toolbar')
|
||
|
||
{{-- ═══════════ 右侧用户面板（独立文件维护） ═══════════ --}}
|
||
@include('chat.partials.right-panel')
|
||
</div>
|
||
|
||
{{-- ═══════════ 聊天室交互脚本（独立文件维护） ═══════════ --}}
|
||
@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;">×</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>
|
||
|
||
</html>
|