lkddi
a19ff20988
- 贴图面板使用 data-src 懒加载，切换到贴图 Tab 时才加载图片 - 避免页面刷新时发起 50 个表情图片请求 - 统一 frame.blade.php 和 scripts.blade.php 中残余的 .GIF 大写引用
92 lines
4.9 KiB
PHP
92 lines
4.9 KiB
PHP
{{--
|
||
文件功能：右侧用户面板（复刻原版）
|
||
包含：名单/房间/贴图/酷库 四个 Tab 面板
|
||
独立文件方便维护
|
||
|
||
依赖变量：$room（当前房间模型）
|
||
--}}
|
||
<div class="chat-right">
|
||
{{-- Tab 标题栏（原版：名单/房间/贴图/酷库） --}}
|
||
<div class="right-tabs">
|
||
<button class="tab-btn active" id="tab-users" onclick="switchTab('users')">名单</button>
|
||
<button class="tab-btn" id="tab-rooms" onclick="switchTab('rooms')">房间</button>
|
||
<button class="tab-btn" id="tab-emoji" onclick="switchTab('emoji')">贴图</button>
|
||
<button class="tab-btn" id="tab-action" onclick="switchTab('action')">酷库</button>
|
||
</div>
|
||
|
||
{{-- 用户列表面板 --}}
|
||
<div class="user-list-content" id="panel-users">
|
||
{{-- 房间信息头部（原版风格：房间名 + 人气 + 在线人数） --}}
|
||
<div style="text-align:center; padding:4px 6px; border-bottom:1px solid #cde; background:#f0f6ff;">
|
||
<div style="color:#336699; font-weight:bold; font-size:12px;">【{{ $room->name }}】</div>
|
||
<div style="color:#cc6600; font-size:11px;">人气:{{ $room->visit_num ?? 0 }}</div>
|
||
<div style="font-size:11px; color:#999; margin-top:2px;">
|
||
<span id="online-count-bottom">0</span>人
|
||
<a href="#" onclick="renderUserList(); return false;"
|
||
style="color:#c00; font-size:10px; margin-left:4px;">刷新</a>
|
||
</div>
|
||
</div>
|
||
|
||
{{-- 排序 + 搜索（原版风格） --}}
|
||
<div style="padding:3px 4px; border-bottom:1px solid #cde; background:#f8fbff; font-size:11px;">
|
||
<div style="display:flex; align-items:center; gap:4px; margin-bottom:3px;">
|
||
<span style="color:#666; flex-shrink:0;">排序:</span>
|
||
<select id="user-sort-select" onchange="renderUserList()"
|
||
style="flex:1; font-size:11px; padding:1px; border:1px solid #aac; border-radius:2px;">
|
||
<option value="default">默认</option>
|
||
<option value="name">按名称</option>
|
||
<option value="level">按等级</option>
|
||
</select>
|
||
</div>
|
||
<div style="display:flex; align-items:center; gap:2px;">
|
||
<input type="text" id="user-search-input" placeholder="搜索用户" onkeyup="filterUserList()"
|
||
style="width:100%; font-size:11px; padding:2px 4px; border:1px solid #aac; border-radius:2px; box-sizing:border-box;">
|
||
</div>
|
||
</div>
|
||
|
||
{{-- 用户列表 --}}
|
||
<div id="online-users-list" style="padding:2px;">
|
||
<div style="text-align:center; color:#999; padding:20px 0; font-size:11px;">加载中...</div>
|
||
</div>
|
||
{{-- 管理员名单链接 --}}
|
||
<div style="text-align:center; padding:4px; border-top:1px solid #cde; font-size:11px;">
|
||
<a href="#" style="color:#336699; font-weight:bold;">管理员名单</a>
|
||
</div>
|
||
</div>
|
||
|
||
{{-- 房间列表面板 --}}
|
||
<div class="user-list-content" id="panel-rooms" style="display: none;">
|
||
<div style="text-align: center; color: #999; padding: 20px 0; font-size: 11px;">
|
||
<a href="{{ route('rooms.index') }}" target="_blank">打开大厅查看房间列表</a>
|
||
</div>
|
||
</div>
|
||
|
||
{{-- 贴图面板（懒加载：切换到该 Tab 时才加载图片） --}}
|
||
<div class="user-list-content" id="panel-emoji" style="display: none; padding: 6px;">
|
||
<div style="display: flex; flex-wrap: wrap; gap: 2px; justify-content: center;">
|
||
@for ($i = 1; $i <= 50; $i++)
|
||
<img data-src="/images/emoji/{{ $i }}.gif" width="24" height="24"
|
||
style="cursor: pointer; border: 1px solid transparent; border-radius: 2px;"
|
||
onmouseover="this.style.borderColor='#336699'" onmouseout="this.style.borderColor='transparent'"
|
||
onclick="insertEmoji('[IMG]{{ $i }}[/IMG]')" title="表情{{ $i }}"
|
||
onerror="this.style.display='none'">
|
||
@endfor
|
||
</div>
|
||
</div>
|
||
|
||
{{-- 酷库面板 --}}
|
||
<div class="user-list-content" id="panel-action" style="display: none; padding: 6px;">
|
||
<div style="font-size: 11px; color: #666; line-height: 2;">
|
||
@foreach (['微笑', '大笑', '愤怒', '哭泣', '害羞', '鄙视', '得意', '疑惑', '同情', '无奈', '拳打', '飞吻', '偷看', '战战兢兢'] as $act)
|
||
<a href="#" onclick="setAction('{{ $act }}'); return false;"
|
||
style="display: inline-block; padding: 2px 6px; background: #f0f6ff; border: 1px solid #dde8ff; border-radius: 3px; margin: 1px; color: #336699; font-size: 11px;">{{ $act }}</a>
|
||
@endforeach
|
||
</div>
|
||
</div>
|
||
|
||
{{-- 底部在线统计 --}}
|
||
<div class="online-stats">
|
||
在线: <strong id="online-count-footer">0</strong> 人
|
||
</div>
|
||
</div>
|