2026-02-26 21:10:34 +08:00
|
|
|
|
{{--
|
|
|
|
|
|
文件功能：聊天室主界面框架（frame 页面）
|
|
|
|
|
|
全屏沉浸式布局，不使用统一 layout
|
|
|
|
|
|
CSS 抽取到 /public/css/chat.css
|
|
|
|
|
|
JS 抽取到 chat.partials.scripts Blade 模板
|
|
|
|
|
|
|
|
|
|
|
|
@author ChatRoom Laravel
|
|
|
|
|
|
@version 1.0.0
|
|
|
|
|
|
--}}
|
2026-02-26 13:35:38 +08:00
|
|
|
|
<!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() }}">
|
2026-02-26 21:10:34 +08:00
|
|
|
|
@php
|
|
|
|
|
|
// 从 sysparam 读取权限等级配置
|
|
|
|
|
|
$levelKick = (int) \App\Models\Sysparam::getValue('level_kick', '60');
|
|
|
|
|
|
$levelMute = (int) \App\Models\Sysparam::getValue('level_mute', '50');
|
|
|
|
|
|
$levelBan = (int) \App\Models\Sysparam::getValue('level_ban', '80');
|
|
|
|
|
|
$levelBanip = (int) \App\Models\Sysparam::getValue('level_banip', '90');
|
|
|
|
|
|
$superLevel = (int) \App\Models\Sysparam::getValue('superlevel', '100');
|
|
|
|
|
|
@endphp
|
2026-02-26 13:35:38 +08:00
|
|
|
|
<script>
|
|
|
|
|
|
window.chatContext = {
|
|
|
|
|
|
roomId: {{ $room->id }},
|
|
|
|
|
|
username: "{{ $user->username }}",
|
|
|
|
|
|
userLevel: {{ $user->user_level }},
|
2026-02-26 21:10:34 +08:00
|
|
|
|
superLevel: {{ $superLevel }},
|
|
|
|
|
|
levelKick: {{ $levelKick }},
|
|
|
|
|
|
levelMute: {{ $levelMute }},
|
|
|
|
|
|
levelBan: {{ $levelBan }},
|
|
|
|
|
|
levelBanip: {{ $levelBanip }},
|
2026-02-26 13:35:38 +08:00
|
|
|
|
sendUrl: "{{ route('chat.send', $room->id) }}",
|
2026-02-26 21:10:34 +08:00
|
|
|
|
leaveUrl: "{{ route('chat.leave', $room->id) }}",
|
|
|
|
|
|
heartbeatUrl: "{{ route('chat.heartbeat', $room->id) }}",
|
|
|
|
|
|
fishCastUrl: "{{ route('fishing.cast', $room->id) }}",
|
2026-02-26 21:30:07 +08:00
|
|
|
|
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' }}
|
2026-02-26 13:35:38 +08:00
|
|
|
|
};
|
|
|
|
|
|
</script>
|
|
|
|
|
|
@vite(['resources/css/app.css', 'resources/js/app.js', 'resources/js/chat.js'])
|
2026-02-26 21:10:34 +08:00
|
|
|
|
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
|
|
|
|
|
|
<link rel="stylesheet" href="/css/chat.css">
|
2026-02-26 13:35:38 +08:00
|
|
|
|
</head>
|
|
|
|
|
|
|
2026-02-26 21:10:34 +08:00
|
|
|
|
<body>
|
|
|
|
|
|
<div class="chat-layout">
|
2026-02-26 13:35:38 +08:00
|
|
|
|
|
2026-02-26 21:10:34 +08:00
|
|
|
|
{{-- ═══════════ 左侧主区域 ═══════════ --}}
|
|
|
|
|
|
<div class="chat-left">
|
2026-02-26 13:35:38 +08:00
|
|
|
|
|
2026-02-26 21:10:34 +08:00
|
|
|
|
{{-- 顶部标题栏 + 公告滚动条（独立文件维护） --}}
|
|
|
|
|
|
@include('chat.partials.header')
|
2026-02-26 13:35:38 +08:00
|
|
|
|
|
2026-02-26 21:10:34 +08:00
|
|
|
|
{{-- 消息窗格（双窗格，默认只显示 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>
|
2026-02-26 13:35:38 +08:00
|
|
|
|
</div>
|
2026-02-26 21:10:34 +08:00
|
|
|
|
{{-- 副消息窗（包厢窗） --}}
|
|
|
|
|
|
<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>
|
2026-02-26 13:35:38 +08:00
|
|
|
|
</div>
|
2026-02-26 21:10:34 +08:00
|
|
|
|
</div>
|
2026-02-26 13:35:38 +08:00
|
|
|
|
|
2026-02-26 21:10:34 +08:00
|
|
|
|
{{-- 底部输入工具栏（独立文件维护） --}}
|
|
|
|
|
|
@include('chat.partials.input-bar')
|
2026-02-26 13:35:38 +08:00
|
|
|
|
</div>
|
|
|
|
|
|
|
2026-02-26 21:10:34 +08:00
|
|
|
|
{{-- ═══════════ 竖向工具条（独立文件维护） ═══════════ --}}
|
|
|
|
|
|
@include('chat.partials.toolbar')
|
|
|
|
|
|
|
|
|
|
|
|
{{-- ═══════════ 右侧用户面板（独立文件维护） ═══════════ --}}
|
|
|
|
|
|
@include('chat.partials.right-panel')
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
{{-- ═══════════ 用户名片弹窗 (Alpine.js) ═══════════ --}}
|
2026-02-26 13:35:38 +08:00
|
|
|
|
<div id="user-modal-container" x-data="{
|
|
|
|
|
|
showUserModal: false,
|
|
|
|
|
|
userInfo: {},
|
|
|
|
|
|
isMuting: false,
|
|
|
|
|
|
muteDuration: 5,
|
|
|
|
|
|
|
|
|
|
|
|
async fetchUser(username) {
|
|
|
|
|
|
try {
|
|
|
|
|
|
const res = await fetch('/user/' + encodeURIComponent(username));
|
|
|
|
|
|
this.userInfo = await res.json();
|
|
|
|
|
|
this.showUserModal = true;
|
|
|
|
|
|
this.isMuting = false;
|
|
|
|
|
|
} catch (e) {
|
|
|
|
|
|
alert('获取资料失败');
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
async kickUser() {
|
2026-02-26 14:57:24 +08:00
|
|
|
|
if (!confirm('确定要将 ' + this.userInfo.username + ' 踢出房间吗？')) return;
|
|
|
|
|
|
try {
|
|
|
|
|
|
const res = await fetch('/user/' + encodeURIComponent(this.userInfo.username) + '/kick', {
|
|
|
|
|
|
method: 'POST',
|
|
|
|
|
|
headers: {
|
|
|
|
|
|
'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
|
|
|
|
|
|
'Content-Type': 'application/json',
|
|
|
|
|
|
'Accept': 'application/json'
|
|
|
|
|
|
},
|
|
|
|
|
|
body: JSON.stringify({ room_id: window.chatContext.roomId })
|
|
|
|
|
|
});
|
|
|
|
|
|
const data = await res.json();
|
|
|
|
|
|
if (data.status === 'success') {
|
|
|
|
|
|
this.showUserModal = false;
|
|
|
|
|
|
} else {
|
|
|
|
|
|
alert('操作失败：' + data.message);
|
|
|
|
|
|
}
|
|
|
|
|
|
} catch (e) {
|
|
|
|
|
|
alert('网络异常');
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
async muteUser() {
|
|
|
|
|
|
try {
|
|
|
|
|
|
const res = await fetch('/user/' + encodeURIComponent(this.userInfo.username) + '/mute', {
|
|
|
|
|
|
method: 'POST',
|
|
|
|
|
|
headers: {
|
|
|
|
|
|
'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
|
|
|
|
|
|
'Content-Type': 'application/json',
|
|
|
|
|
|
'Accept': 'application/json'
|
|
|
|
|
|
},
|
|
|
|
|
|
body: JSON.stringify({
|
|
|
|
|
|
room_id: window.chatContext.roomId,
|
|
|
|
|
|
duration: this.muteDuration
|
|
|
|
|
|
})
|
|
|
|
|
|
});
|
|
|
|
|
|
const data = await res.json();
|
|
|
|
|
|
if (data.status === 'success') {
|
|
|
|
|
|
alert(data.message);
|
|
|
|
|
|
this.showUserModal = false;
|
|
|
|
|
|
} else {
|
|
|
|
|
|
alert('操作失败：' + data.message);
|
|
|
|
|
|
}
|
|
|
|
|
|
} catch (e) {
|
|
|
|
|
|
alert('网络异常');
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}">
|
2026-02-26 21:10:34 +08:00
|
|
|
|
<div x-show="showUserModal" style="display: none;" class="modal-overlay"
|
|
|
|
|
|
x-on:click.self="showUserModal = false">
|
|
|
|
|
|
<div class="modal-card" x-transition>
|
|
|
|
|
|
{{-- 弹窗头部 --}}
|
|
|
|
|
|
<div class="modal-header">
|
|
|
|
|
|
<h3 x-text="'用户名片 · ' + userInfo.username"></h3>
|
|
|
|
|
|
<button class="modal-close" x-on:click="showUserModal = false">×</button>
|
2026-02-26 13:35:38 +08:00
|
|
|
|
</div>
|
2026-02-26 21:10:34 +08:00
|
|
|
|
{{-- 弹窗内容 --}}
|
|
|
|
|
|
<div class="modal-body">
|
|
|
|
|
|
<div class="profile-row">
|
|
|
|
|
|
<img class="profile-avatar" x-show="userInfo.headface"
|
|
|
|
|
|
:src="'/images/headface/' + userInfo.headface" x-on:error="$el.style.display='none'">
|
|
|
|
|
|
<div class="profile-info">
|
|
|
|
|
|
<h4>
|
|
|
|
|
|
<span x-text="userInfo.username"></span>
|
|
|
|
|
|
<span class="level-badge" x-text="'LV.' + userInfo.user_level"></span>
|
|
|
|
|
|
<span class="sex-badge"
|
|
|
|
|
|
x-text="userInfo.sex === '男' ? '♂' : (userInfo.sex === '女' ? '♀' : '')"
|
|
|
|
|
|
:style="userInfo.sex === '男' ? 'color: blue' : (userInfo.sex === '女' ?
|
|
|
|
|
|
'color: deeppink' : '')"></span>
|
|
|
|
|
|
</h4>
|
|
|
|
|
|
<div style="font-size: 11px; color: #999; margin-top: 2px;">
|
|
|
|
|
|
加入: <span x-text="userInfo.created_at"></span>
|
2026-02-26 13:35:38 +08:00
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
2026-02-26 21:10:34 +08:00
|
|
|
|
</div>
|
|
|
|
|
|
<div class="profile-detail" x-text="userInfo.sign || '这家伙很懒，什么也没留下'"></div>
|
2026-02-26 14:57:24 +08:00
|
|
|
|
</div>
|
|
|
|
|
|
|
2026-02-26 21:10:34 +08:00
|
|
|
|
{{-- 操作按钮 --}}
|
|
|
|
|
|
<div class="modal-actions" x-show="userInfo.username !== window.chatContext.username">
|
|
|
|
|
|
<button class="btn-whisper"
|
|
|
|
|
|
x-on:click="document.getElementById('to_user').value = userInfo.username; document.getElementById('content').focus(); showUserModal = false;">
|
|
|
|
|
|
悄悄话
|
|
|
|
|
|
</button>
|
|
|
|
|
|
<a class="btn-mail"
|
|
|
|
|
|
:href="'{{ route('guestbook.index', ['tab' => 'outbox']) }}&to=' + encodeURIComponent(userInfo
|
|
|
|
|
|
.username)"
|
|
|
|
|
|
target="_blank">
|
|
|
|
|
|
写私信
|
2026-02-26 14:57:24 +08:00
|
|
|
|
</a>
|
2026-02-26 13:35:38 +08:00
|
|
|
|
</div>
|
2026-02-26 21:10:34 +08:00
|
|
|
|
|
|
|
|
|
|
{{-- 特权操作（管理员/房主） --}}
|
|
|
|
|
|
@if (Auth::user()->user_level >= $levelKick || $room->master == Auth::user()->username)
|
|
|
|
|
|
<div style="padding: 0 16px 12px;"
|
|
|
|
|
|
x-show="userInfo.username !== window.chatContext.username && userInfo.user_level < {{ Auth::user()->user_level }}">
|
|
|
|
|
|
<div style="font-size: 11px; color: #c00; margin-bottom: 6px; font-weight: bold;">管理操作</div>
|
|
|
|
|
|
<div style="display: flex; gap: 8px;">
|
|
|
|
|
|
<button class="btn-kick" style="flex:1; padding: 5px; border-radius: 4px;"
|
|
|
|
|
|
x-on:click="kickUser()">踢出</button>
|
|
|
|
|
|
<button class="btn-mute" style="flex:1; padding: 5px; border-radius: 4px;"
|
|
|
|
|
|
x-on:click="isMuting = !isMuting">禁言</button>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="mute-form" x-show="isMuting" style="display: none;">
|
|
|
|
|
|
<input type="number" x-model="muteDuration" min="1" placeholder="分钟">
|
|
|
|
|
|
<span style="font-size: 11px; color: #b86e00;">分钟</span>
|
|
|
|
|
|
<button x-on:click="muteUser()">执行</button>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
@endif
|
2026-02-26 13:35:38 +08:00
|
|
|
|
</div>
|
2026-02-26 14:57:24 +08:00
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
2026-02-26 13:35:38 +08:00
|
|
|
|
|
2026-02-26 21:10:34 +08:00
|
|
|
|
{{-- ═══════════ 聊天室交互脚本（独立文件维护） ═══════════ --}}
|
|
|
|
|
|
@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>
|
2026-02-26 13:35:38 +08:00
|
|
|
|
|
2026-02-26 21:10:34 +08:00
|
|
|
|
{{-- 预览区 --}}
|
|
|
|
|
|
<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>
|
2026-02-26 13:35:38 +08:00
|
|
|
|
|
2026-02-26 21:10:34 +08:00
|
|
|
|
{{-- 头像网格 --}}
|
|
|
|
|
|
<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>
|
2026-02-26 13:35:38 +08:00
|
|
|
|
|
|
|
|
|
|
</body>
|
|
|
|
|
|
|
|
|
|
|
|
</html>
|
