chatroom/resources/views/chat/partials/layout/mobile-drawer.blade.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" onclick="openMobileDrawer('toolbar')" title="工具菜单">🔧</button>
    <button class="mobile-fab" id="fab-users"   onclick="openMobileDrawer('users')"   title="在线名单">👥</button>
</div>

{{-- ── 遮罩（点击关闭当前抽屉） ── --}}
<div id="mobile-drawer-mask" onclick="closeMobileDrawer()"></div>

{{-- ── 工具条抽屉（底部滑入） ── --}}
<div id="mobile-drawer-toolbar" class="mobile-drawer">
    <div class="mobile-drawer-header">
        🔧 工具菜单
        <button class="mobile-drawer-close" onclick="closeMobileDrawer()">✕</button>
    </div>
    <div class="mobile-drawer-body">
        <div class="mobile-tool-btn" onclick="closeMobileDrawer();openShopModal();">🛒<br>商店</div>
        <div class="mobile-tool-btn" onclick="closeMobileDrawer();openVipModal();">👑<br>会员</div>
        <div class="mobile-tool-btn" onclick="closeMobileDrawer();saveExp();">💾<br>存点</div>
        <div class="mobile-tool-btn" onclick="closeMobileDrawer();openGameHall();">🎮<br>娱乐</div>
        <div class="mobile-tool-btn" onclick="closeMobileDrawer();openBankModal();">🏦<br>银行</div>
        <div class="mobile-tool-btn" onclick="closeMobileDrawer();openMarriageStatusModal();">💍<br>婚姻</div>
        <div class="mobile-tool-btn" onclick="closeMobileDrawer();openFriendPanel();">👫<br>好友</div>
        <div class="mobile-tool-btn" onclick="closeMobileDrawer();openAvatarPicker();">🖼️<br>头像</div>
        <div class="mobile-tool-btn" onclick="closeMobileDrawer();document.getElementById('settings-modal').style.display='flex';">⚙️<br>设置</div>
        <div class="mobile-tool-btn" onclick="closeMobileDrawer();window.open('{{ route('feedback.index') }}','_blank');">📝<br>反馈</div>
        <div class="mobile-tool-btn" onclick="closeMobileDrawer();window.open('{{ route('guestbook.index') }}','_blank');">📬<br>留言</div>
        <div class="mobile-tool-btn" onclick="closeMobileDrawer();window.open('{{ route('guide') }}','_blank');">📖<br>规则</div>
        <div class="mobile-tool-btn" onclick="closeMobileDrawer();window.open('{{ route('leaderboard.index') }}','_blank');">🏆<br>排行</div>
        @if ($user->id === 1 || $user->activePosition()->exists())
            <div class="mobile-tool-btn" style="color:#ffcc00;" onclick="closeMobileDrawer();window.open('/admin','_blank');">🛡️<br>管理</div>
        @endif
        <div class="mobile-tool-btn" style="color:#ffaaaa;"
             onclick="closeMobileDrawer();window.chatDialog.confirm('确定要离开聊天室吗？','离开聊天室').then(ok=>{if(ok)leaveRoom();});">🚪<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" onclick="closeMobileDrawer()">✕</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;"
            onclick="switchMobileTab('users')">👥 名单</button>
        <button id="mob-tab-rooms"
            style="flex:1;padding:7px 4px;font-size:12px;border:none;background:transparent;color:#336699;cursor:pointer;"
            onclick="switchMobileTab('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;"
                onchange="renderMobileUserList()">
                <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;"
                oninput="renderMobileUserList()">
        </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" style="padding:4px 0;">
            <div style="text-align:center;color:#aaa;padding:20px;font-size:12px;">加载中...</div>
        </div>
    </div>
</div>

{{-- ── 手机端抽屉控制脚本 ── --}}
<script>
    /**
     * 对手机端抽屉中的动态文本做 HTML 转义，避免直接拼入 innerHTML。
     *
     * @param {string} text
     * @returns {string}
     */
    function escapeMobileDrawerHtml(text) {
        const div = document.createElement('div');
        div.textContent = text;
        return div.innerHTML;
    }

    /**
     * 当前打开的抽屉名称：'toolbar' | 'users' | null
     *
     * @type {string|null}
     */
    let _mobileDrawerOpen = null;

    /**
     * 打开指定抽屉
     *
     * @param {'toolbar'|'users'} which
     */
    function openMobileDrawer(which) {
        // 先关掉已有的抽屉（不重置状态，避免中间态闪烁）
        if (_mobileDrawerOpen && _mobileDrawerOpen !== which) {
            document.getElementById('mobile-drawer-' + _mobileDrawerOpen)?.classList.remove('open');
        }

        const drawer = document.getElementById('mobile-drawer-' + which);
        const mask   = document.getElementById('mobile-drawer-mask');
        if (!drawer || !mask) return;

        drawer.classList.add('open');
        mask.classList.add('open');
        _mobileDrawerOpen = which;
        document.body.style.overflow = 'hidden';

        // 名单抽屉打开时立即渲染用户列表
        if (which === 'users') {
            renderMobileUserList();
        }
    }

    /**
     * 关闭当前打开的抽屉
     *
     * @param {boolean} [resetOverflow=true] 是否恢复 body overflow
     */
    function closeMobileDrawer(resetOverflow = true) {
        if (_mobileDrawerOpen) {
            document.getElementById('mobile-drawer-' + _mobileDrawerOpen)?.classList.remove('open');
            _mobileDrawerOpen = null;
        }
        document.getElementById('mobile-drawer-mask')?.classList.remove('open');
        if (resetOverflow) {
            document.body.style.overflow = '';
        }
    }

    /**
     * 切换名单抽屉内的 Tab
     *
     * @param {'users'|'rooms'} tab
     */
    function switchMobileTab(tab) {
        const panelUsers = document.getElementById('mob-panel-users');
        const panelRooms = document.getElementById('mob-panel-rooms');
        const tabUsers   = document.getElementById('mob-tab-users');
        const tabRooms   = document.getElementById('mob-tab-rooms');

        if (panelUsers) panelUsers.style.display = tab === 'users' ? 'flex' : 'none';
        if (panelRooms) panelRooms.style.display = tab === 'rooms' ? 'block' : 'none';

        if (tabUsers) {
            tabUsers.style.background = tab === 'users' ? '#336699' : 'transparent';
            tabUsers.style.color = tab === 'users' ? '#fff' : '#336699';
            tabUsers.style.fontWeight = tab === 'users' ? 'bold' : 'normal';
        }
        if (tabRooms) {
            tabRooms.style.background = tab === 'rooms' ? '#336699' : 'transparent';
            tabRooms.style.color = tab === 'rooms' ? '#fff' : '#336699';
            tabRooms.style.fontWeight = tab === 'rooms' ? 'bold' : 'normal';
        }

        if (tab === 'rooms') {
            _loadMobileRoomList();
        }
    }

    /**
     * 将在线用户渲染到手机端名单容器
     */
    function renderMobileUserList() {
        if (typeof onlineUsers === 'undefined') return;

        const sortVal   = document.getElementById('mob-user-sort-select')?.value || 'default';
        const keyword   = (document.getElementById('mob-user-search-input')?.value || '').trim().toLowerCase();
        const container = document.getElementById('mob-online-users-list');
        if (!container) return;

        if (typeof _renderUserListToContainer === 'function') {
            _renderUserListToContainer(container, sortVal, keyword);
        } else {
            // 降级：简单渲染用户名列表
            const users = Object.keys(onlineUsers);
            container.innerHTML = users.length
                ? users.filter(u => !keyword || u.toLowerCase().includes(keyword))
                       .map(u => `<div class="user-item" style="padding:5px 8px;font-size:12px;border-bottom:1px solid #eee;">${escapeMobileDrawerHtml(u)}</div>`).join('')
                : '<div style="text-align:center;color:#aaa;padding:20px;font-size:12px;">暂无用户</div>';
        }

        // 更新在线人数
        const count = Object.keys(onlineUsers).length;
        const footerEl = document.getElementById('mob-online-count-footer');
        if (footerEl) footerEl.textContent = count;
    }

    /**
     * 拉取房间列表并渲染到手机端房间容器
     */
    function _loadMobileRoomList() {
        const container = document.getElementById('mob-rooms-online-list');
        if (!container) return;

        container.innerHTML = '<div style="text-align:center;color:#aaa;padding:16px;font-size:11px;">加载中...</div>';

        fetch('{{ route('chat.rooms-online-status') }}')
            .then(r => r.json())
            .then(data => {
                if (!data.rooms || !data.rooms.length) {
                    container.innerHTML = '<div style="text-align:center;color:#bbb;padding:16px;font-size:11px;">暂无房间</div>';
                    return;
                }
                const currentRoomId = window.chatContext?.roomId;
                const roomRows = data.rooms.map(room => {
                    const roomId = Number.parseInt(room.id, 10);
                    if (!Number.isInteger(roomId)) {
                        return '';
                    }

                    const isCurrent = roomId === currentRoomId;
                    const bg        = isCurrent ? '#ecf4ff' : '#fff';
                    const nameColor = isCurrent ? '#336699' : (room.door_open ? '#444' : '#bbb');
                    const safeRoomName = escapeMobileDrawerHtml(String(room.name ?? ''));
                    const safeOnlineCount = Math.max(Number.parseInt(room.online, 10) || 0, 0);
                    const badge     = safeOnlineCount > 0
                        ? `<span style="background:#e8f5e9;color:#2e7d32;border-radius:8px;padding:0 6px;font-size:10px;font-weight:bold;">${safeOnlineCount}人</span>`
                        : `<span style="background:#f5f5f5;color:#bbb;border-radius:8px;padding:0 6px;font-size:10px;">空</span>`;
                    const currentTag = isCurrent ? `<span style="font-size:9px;color:#7090b0;margin-left:3px;">当前</span>` : '';
                    const clickAttr  = isCurrent ? '' : `onclick="location.href='/room/${roomId}'"`;

                    return `<div ${clickAttr}
                        style="display:flex;align-items:center;justify-content:space-between;
                               padding:6px 10px;border-bottom:1px solid #eef2f8;background:${bg};
                               cursor:${isCurrent ? 'default' : 'pointer'};">
                        <span style="color:${nameColor};font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;margin-right:6px;">
                            ${safeRoomName}${currentTag}
                        </span>${badge}
                    </div>`;
                }).filter(Boolean).join('');

                container.innerHTML = roomRows || '<div style="text-align:center;color:#bbb;padding:16px;font-size:11px;">暂无房间</div>';
            })
            .catch(() => {
                container.innerHTML = '<div style="text-align:center;color:#f00;padding:10px;font-size:11px;">加载失败</div>';
            });
    }

    /**
     * 监听全局用户列表更新，若名单抽屉已打开则同步刷新
     */
    window.addEventListener('chatroom:users-updated', () => {
        if (_mobileDrawerOpen === 'users') {
            renderMobileUserList();
        }
    });
</script>