106 lines
5.7 KiB
PHP
106 lines
5.7 KiB
PHP
{{--
|
||
文件功能：手机端自适应抽屉组件（≤ 640px 屏幕生效）
|
||
包含：
|
||
1. 浮动按钮组（右下角固定）：🔧 工具 / 👥 名单
|
||
2. 工具条抽屉（底部滑入，横向网格排列工具按钮）
|
||
3. 名单/房间抽屉（底部滑入，静态 HTML 结构，JS 动态填充）
|
||
4. 遮罩层（点击关闭）
|
||
5. JS 控制逻辑
|
||
|
||
依赖：
|
||
- chat.css @media (max-width: 640px) 中的样式定义
|
||
- scripts.blade.php 中的 onlineUsers / _renderUserListToContainer
|
||
|
||
@author ChatRoom Laravel
|
||
@version 1.1.0
|
||
--}}
|
||
|
||
{{-- ── 浮动按钮组（右下角固定） ── --}}
|
||
<div id="mobile-fabs">
|
||
<button class="mobile-fab" id="fab-toolbar" data-mobile-drawer-open="toolbar" title="工具菜单">🔧</button>
|
||
<button class="mobile-fab" id="fab-users" data-mobile-drawer-open="users" title="在线名单">👥</button>
|
||
</div>
|
||
|
||
{{-- ── 遮罩（点击关闭当前抽屉） ── --}}
|
||
<div id="mobile-drawer-mask" data-mobile-drawer-close></div>
|
||
|
||
{{-- ── 工具条抽屉（底部滑入） ── --}}
|
||
<div id="mobile-drawer-toolbar" class="mobile-drawer">
|
||
<div class="mobile-drawer-header">
|
||
🔧 工具菜单
|
||
<button class="mobile-drawer-close" data-mobile-drawer-close>✕</button>
|
||
</div>
|
||
<div class="mobile-drawer-body">
|
||
<div class="mobile-tool-btn" data-mobile-tool-action="daily-sign-in">✅<br>签到</div>
|
||
<div class="mobile-tool-btn" data-mobile-tool-action="shop">🛒<br>商店</div>
|
||
<div class="mobile-tool-btn" data-mobile-tool-action="vip">👑<br>会员</div>
|
||
<div class="mobile-tool-btn" data-mobile-tool-action="save-exp">💾<br>存点</div>
|
||
<div class="mobile-tool-btn" data-mobile-tool-action="game">🎮<br>娱乐</div>
|
||
<div class="mobile-tool-btn" data-mobile-tool-action="bank">🏦<br>银行</div>
|
||
<div class="mobile-tool-btn" data-mobile-tool-action="marriage">💍<br>婚姻</div>
|
||
<div class="mobile-tool-btn" data-mobile-tool-action="friend">👫<br>好友</div>
|
||
<div class="mobile-tool-btn" data-mobile-tool-action="avatar">🖼️<br>头像</div>
|
||
<div class="mobile-tool-btn" data-mobile-tool-action="settings">⚙️<br>设置</div>
|
||
<div class="mobile-tool-btn" data-mobile-tool-url="{{ route('feedback.index') }}">📝<br>反馈</div>
|
||
<div class="mobile-tool-btn" data-mobile-tool-url="{{ route('guestbook.index') }}">📬<br>留言</div>
|
||
<div class="mobile-tool-btn" data-mobile-tool-url="{{ route('guide') }}">📖<br>规则</div>
|
||
<div class="mobile-tool-btn" data-mobile-tool-url="{{ route('leaderboard.index') }}">🏆<br>排行</div>
|
||
@if ($user->id === 1 || $user->activePosition()->exists())
|
||
<div class="mobile-tool-btn" style="color:#ffcc00;" data-mobile-tool-url="/admin">🛡️<br>管理</div>
|
||
@endif
|
||
<div class="mobile-tool-btn" style="color:#ffaaaa;" data-mobile-tool-action="leave">🚪<br>离开</div>
|
||
</div>
|
||
</div>
|
||
|
||
{{-- ── 名单/房间抽屉（静态 HTML，JS 动态填充） ── --}}
|
||
<div id="mobile-drawer-users" class="mobile-drawer">
|
||
<div class="mobile-drawer-header">
|
||
<span id="mob-drawer-title">👥 在线名单</span>
|
||
<button class="mobile-drawer-close" data-mobile-drawer-close>✕</button>
|
||
</div>
|
||
|
||
{{-- Tab 切换条 --}}
|
||
<div style="display:flex;background:#e8f0f8;border-bottom:1px solid #b0c8e0;flex-shrink:0;">
|
||
<button id="mob-tab-users"
|
||
style="flex:1;padding:7px 4px;font-size:12px;border:none;background:#336699;color:#fff;cursor:pointer;font-weight:bold;"
|
||
data-mobile-drawer-tab="users">👥 名单</button>
|
||
<button id="mob-tab-rooms"
|
||
style="flex:1;padding:7px 4px;font-size:12px;border:none;background:transparent;color:#336699;cursor:pointer;"
|
||
data-mobile-drawer-tab="rooms">🏠 房间</button>
|
||
</div>
|
||
|
||
{{-- 名单面板 --}}
|
||
<div id="mob-panel-users" style="display:flex;flex-direction:column;flex:1;overflow:hidden;min-height:0;">
|
||
{{-- 排序/搜索工具栏 --}}
|
||
<div style="display:flex;gap:4px;padding:5px 6px;background:#f0f4f8;border-bottom:1px solid #dde8f0;flex-shrink:0;">
|
||
<select id="mob-user-sort-select"
|
||
style="flex:1;font-size:11px;border:1px solid #b0c8e0;border-radius:3px;padding:2px 4px;color:#224466;">
|
||
<option value="default">默认顺序</option>
|
||
<option value="level">按等级排</option>
|
||
<option value="name">按名字排</option>
|
||
</select>
|
||
<input id="mob-user-search-input" type="text" placeholder="搜索用户..."
|
||
style="flex:2;font-size:11px;border:1px solid #b0c8e0;border-radius:3px;padding:2px 6px;color:#333;">
|
||
</div>
|
||
|
||
{{-- 用户列表容器 --}}
|
||
<div id="mob-online-users-list"
|
||
style="flex:1;overflow-y:auto;min-height:0;-webkit-overflow-scrolling:touch;">
|
||
<div style="text-align:center;color:#aaa;padding:20px;font-size:12px;">加载中...</div>
|
||
</div>
|
||
|
||
{{-- 在线人数底栏 --}}
|
||
<div id="mob-online-stats"
|
||
style="padding:4px 8px;font-size:10px;color:#669;text-align:right;background:#f0f4f8;border-top:1px solid #dde8f0;flex-shrink:0;">
|
||
在线: <span id="mob-online-count-footer">0</span> 人
|
||
</div>
|
||
</div>
|
||
|
||
{{-- 房间面板 --}}
|
||
<div id="mob-panel-rooms" style="display:none;flex:1;overflow-y:auto;min-height:0;">
|
||
<div id="mob-rooms-online-list" data-mobile-rooms-status-url="{{ route('chat.rooms-online-status') }}" style="padding:4px 0;">
|
||
<div style="text-align:center;color:#aaa;padding:20px;font-size:12px;">加载中...</div>
|
||
</div>
|
||
</div>
|
||
</div>
|