From 8ac540c65be97263dcd4e85f936487af983a2504 Mon Sep 17 00:00:00 2001
From: lkddi <lkddi@163.com>
Date: Fri, 27 Feb 2026 16:06:15 +0800
Subject: [PATCH] =?UTF-8?q?=E9=87=8D=E6=9E=84=EF=BC=9A=E5=95=86=E5=BA=97?=
 =?UTF-8?q?=E4=BB=8E=E5=8F=B3=E4=BE=A7=20Tab=20=E7=A7=BB=E8=87=B3=E5=B7=A5?=
 =?UTF-8?q?=E5=85=B7=E6=A0=8F=E6=8C=89=E9=92=AE=E5=BC=B9=E7=AA=97=EF=BC=8C?=
 =?UTF-8?q?=E6=96=B0=E5=A2=9E=202=20=E5=88=97=E7=BD=91=E6=A0=BC=E5=8D=A1?=
 =?UTF-8?q?=E7=89=87=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../views/chat/partials/right-panel.blade.php |   8 +-
 .../views/chat/partials/scripts.blade.php     |   9 +-
 .../views/chat/partials/toolbar.blade.php     | 537 +++++++++++++++++-
 3 files changed, 537 insertions(+), 17 deletions(-)

diff --git a/resources/views/chat/partials/right-panel.blade.php b/resources/views/chat/partials/right-panel.blade.php
index efb6d5e..1333d50 100644
--- a/resources/views/chat/partials/right-panel.blade.php
+++ b/resources/views/chat/partials/right-panel.blade.php
@@ -5,15 +5,12 @@
 
     依赖变量：$room（当前房间模型）
 --}}
-<div class="chat-right" style="position:relative;">
+<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>
-        <button class="tab-btn" id="tab-shop" onclick="switchTab('shop'); loadShop();"
-            style="color:#fbbf24;">🛍商店</button>
     </div>
 
     {{-- 用户列表面板 --}}
@@ -90,7 +87,4 @@
     <div class="online-stats">
         在线: <strong id="online-count-footer">0</strong> 人
     </div>
-
-    {{-- 商店面板（位于最后，默认隐藏） --}}
-    @include('chat.partials.shop-panel')
 </div>
diff --git a/resources/views/chat/partials/scripts.blade.php b/resources/views/chat/partials/scripts.blade.php
index c0bd9fc..b30bc8e 100644
--- a/resources/views/chat/partials/scripts.blade.php
+++ b/resources/views/chat/partials/scripts.blade.php
@@ -27,18 +27,11 @@
 
     // ── Tab 切换 ──────────────────────────────────────
     function switchTab(tab) {
-        // 所有内容面板（名单/房间/贴图/酷库 用 block，商店用 flex absolute 覆盖）
+        // 切换名单/房间/贴图/酷库 面板
         ['users', 'rooms', 'emoji', 'action'].forEach(t => {
             document.getElementById('panel-' + t).style.display = t === tab ? 'block' : 'none';
             document.getElementById('tab-' + t).classList.toggle('active', t === tab);
         });
-        // 商店面板：absolute 定位覆盖，display flex/none 切换
-        const shopPanel = document.getElementById('shop-panel');
-        const shopTab = document.getElementById('tab-shop');
-        if (shopPanel && shopTab) {
-            shopPanel.style.display = tab === 'shop' ? 'flex' : 'none';
-            shopTab.classList.toggle('active', tab === 'shop');
-        }
         // 贴图 Tab 懒加载
         if (tab === 'emoji') {
             document.querySelectorAll('#panel-emoji img[data-src]').forEach(img => {
diff --git a/resources/views/chat/partials/toolbar.blade.php b/resources/views/chat/partials/toolbar.blade.php
index 86b7158..86c2540 100644
--- a/resources/views/chat/partials/toolbar.blade.php
+++ b/resources/views/chat/partials/toolbar.blade.php
@@ -5,7 +5,8 @@
     1. 工具条按钮（管理、商店、存点、头像、设置等）
     2. 头像选择弹窗
     3. 个人设置弹窗（密码、资料、密保）
-    4. 对应的 JS 操作函数
+    4. 商店弹窗（从工具栏点击打开的全屏模态）
+    5. 对应的 JS 操作函数
 
     依赖变量：$user, $superLevel, $room
     @author ChatRoom Laravel
@@ -14,7 +15,7 @@
 
 {{-- ═══════════ 竖向工具条按钮 ═══════════ --}}
 <div class="chat-toolbar" id="toolbar-strip">
-    <div class="tool-btn" onclick="alert('🚧 商店功能开发中，敬请期待！')" title="商店（待开发）">商店</div>
+    <div class="tool-btn" onclick="openShopModal()" title="购买道具">🛍商店</div>
     <div class="tool-btn" onclick="saveExp()" title="手动存经验点">存点</div>
     <div class="tool-btn" onclick="alert('🚧 娱乐功能开发中，敬请期待！')" title="娱乐（待开发）">娱乐</div>
     <div class="tool-btn" onclick="alert('🚧 银行功能开发中，敬请期待！')" title="银行（待开发）">银行</div>
@@ -313,3 +314,535 @@
         }
     }
 </script>
+
+{{-- ═══════════ 商店弹窗 ═══════════ --}}
+<style>
+    /* 商店弹窗整体 */
+    #shop-modal {
+        display: none;
+        position: fixed;
+        inset: 0;
+        background: rgba(0, 0, 0, .75);
+        z-index: 9999;
+        justify-content: center;
+        align-items: center;
+    }
+
+    /* 弹窗主体 */
+    #shop-modal-inner {
+        background: linear-gradient(160deg, #0f0c29 0%, #1a1060 50%, #10092b 100%);
+        border: 1px solid #4f46e5;
+        border-radius: 14px;
+        width: 520px;
+        max-width: 95vw;
+        max-height: 80vh;
+        display: flex;
+        flex-direction: column;
+        box-shadow: 0 16px 60px rgba(99, 102, 241, .45), 0 0 0 1px rgba(99, 102, 241, .2);
+        overflow: hidden;
+    }
+
+    /* 标题栏 */
+    #shop-modal-header {
+        padding: 12px 16px;
+        background: linear-gradient(135deg, #1e1b4b, #312e81);
+        border-bottom: 1px solid #4338ca;
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        flex-shrink: 0;
+    }
+
+    #shop-modal-title {
+        font-size: 14px;
+        font-weight: 800;
+        color: #e0e7ff;
+        flex: 1;
+        letter-spacing: .5px;
+    }
+
+    #shop-modal-jjb {
+        font-size: 12px;
+        color: #a5b4fc;
+        display: flex;
+        align-items: center;
+        gap: 4px;
+    }
+
+    #shop-modal-jjb strong {
+        color: #fbbf24;
+        font-size: 13px;
+    }
+
+    #shop-week-badge {
+        font-size: 10px;
+        background: #4338ca;
+        padding: 2px 8px;
+        border-radius: 10px;
+        color: #c7d2fe;
+        display: none;
+    }
+
+    #shop-modal-close {
+        cursor: pointer;
+        font-size: 20px;
+        color: #6366f1;
+        line-height: 1;
+        transition: color .15s;
+    }
+
+    #shop-modal-close:hover {
+        color: #fff;
+    }
+
+    /* Toast */
+    #shop-toast {
+        display: none;
+        margin: 6px 14px 0;
+        padding: 6px 12px;
+        border-radius: 6px;
+        font-size: 12px;
+        font-weight: 700;
+        flex-shrink: 0;
+    }
+
+    /* 商品列表区 */
+    #shop-items-list {
+        flex: 1;
+        overflow-y: auto;
+        padding: 12px 14px;
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 10px;
+        align-content: start;
+        scrollbar-width: thin;
+        scrollbar-color: #4338ca #0f0c29;
+    }
+
+    /* 分组独占一整行 */
+    .shop-group-header {
+        grid-column: 1 / -1;
+        font-size: 11px;
+        font-weight: 800;
+        color: #818cf8;
+        letter-spacing: .8px;
+        padding: 6px 0 4px;
+        border-bottom: 1px solid #312e81;
+        display: flex;
+        align-items: center;
+        gap: 6px;
+    }
+
+    .shop-group-header span {
+        font-size: 9px;
+        color: #6b7280;
+        font-weight: 400;
+    }
+
+    /* 商品卡 */
+    .shop-card {
+        background: linear-gradient(135deg, #1e1b4b 60%, #2a2570);
+        border: 1px solid #3730a3;
+        border-radius: 10px;
+        padding: 10px;
+        display: flex;
+        flex-direction: column;
+        gap: 6px;
+        transition: border-color .2s, box-shadow .2s, transform .15s;
+        cursor: default;
+    }
+
+    .shop-card:hover {
+        border-color: #6366f1;
+        box-shadow: 0 0 12px rgba(99, 102, 241, .4);
+        transform: translateY(-1px);
+    }
+
+    .shop-card-top {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+    }
+
+    .shop-card-icon {
+        font-size: 22px;
+        flex-shrink: 0;
+    }
+
+    .shop-card-name {
+        font-size: 12px;
+        font-weight: 700;
+        color: #e0e7ff;
+        flex: 1;
+        line-height: 1.3;
+    }
+
+    .shop-card-desc {
+        font-size: 10px;
+        color: #6b7280;
+        line-height: 1.4;
+        flex: 1;
+    }
+
+    .shop-btn {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 3px;
+        background: linear-gradient(135deg, #4f46e5, #7c3aed);
+        color: #fff;
+        border: none;
+        border-radius: 6px;
+        padding: 5px 8px;
+        cursor: pointer;
+        font-size: 11px;
+        font-weight: 800;
+        transition: opacity .15s, transform .1s;
+        width: 100%;
+        margin-top: auto;
+    }
+
+    .shop-btn:hover {
+        opacity: .85;
+        transform: scale(1.02);
+    }
+
+    .shop-btn-use {
+        background: linear-gradient(135deg, #7c3aed, #a855f7);
+    }
+
+    /* 改名内嵌模态 */
+    #shop-rename-overlay {
+        display: none;
+        position: absolute;
+        inset: 0;
+        background: rgba(0, 0, 0, .8);
+        z-index: 10001;
+        justify-content: center;
+        align-items: center;
+        border-radius: 14px;
+    }
+
+    #shop-rename-box {
+        background: linear-gradient(160deg, #1e1b4b, #12103d);
+        border: 1px solid #6366f1;
+        border-radius: 12px;
+        padding: 18px 16px;
+        width: 240px;
+        box-shadow: 0 8px 40px rgba(99, 102, 241, .5);
+    }
+
+    #shop-rename-box h4 {
+        font-size: 13px;
+        font-weight: 800;
+        color: #c7d2fe;
+        margin: 0 0 10px;
+    }
+
+    #rename-input {
+        width: 100%;
+        background: #312e81;
+        border: 1px solid #4f46e5;
+        border-radius: 6px;
+        padding: 7px 10px;
+        color: #e0e7ff;
+        font-size: 13px;
+        box-sizing: border-box;
+        margin-bottom: 10px;
+        outline: none;
+    }
+
+    #rename-input:focus {
+        border-color: #818cf8;
+    }
+
+    .rename-btn-row {
+        display: flex;
+        gap: 8px;
+    }
+
+    #rename-confirm {
+        flex: 1;
+        background: linear-gradient(135deg, #4f46e5, #7c3aed);
+        color: #fff;
+        border: none;
+        border-radius: 6px;
+        padding: 7px;
+        cursor: pointer;
+        font-size: 12px;
+        font-weight: 700;
+    }
+
+    #rename-cancel {
+        flex: 1;
+        background: #374151;
+        color: #9ca3af;
+        border: none;
+        border-radius: 6px;
+        padding: 7px;
+        cursor: pointer;
+        font-size: 12px;
+    }
+
+    #rename-err {
+        color: #f87171;
+        font-size: 10px;
+        margin-top: 6px;
+        min-height: 14px;
+    }
+</style>
+
+<div id="shop-modal">
+    <div id="shop-modal-inner" style="position:relative;">
+
+        {{-- 标题栏 --}}
+        <div id="shop-modal-header">
+            <div id="shop-modal-title">🛍 道具商店</div>
+            <div id="shop-modal-jjb">🪙 <strong id="shop-jjb">--</strong> 金币</div>
+            <span id="shop-week-badge"></span>
+            <span id="shop-modal-close" onclick="closeShopModal()">✕</span>
+        </div>
+
+        {{-- Toast --}}
+        <div id="shop-toast"></div>
+
+        {{-- 商品网格 --}}
+        <div id="shop-items-list">
+            <div style="grid-column:1/-1; text-align:center; color:#6366f1; padding:30px 0; font-size:13px;">加载中…</div>
+        </div>
+
+        {{-- 改名内嵌遮罩 --}}
+        <div id="shop-rename-overlay">
+            <div id="shop-rename-box">
+                <h4>🎭 使用改名卡</h4>
+                <input id="rename-input" type="text" maxlength="10" placeholder="输入新昵称（1-10字）">
+                <div class="rename-btn-row">
+                    <button id="rename-confirm" onclick="submitRename()">确认改名</button>
+                    <button id="rename-cancel" onclick="closeRenameModal()">取消</button>
+                </div>
+                <div id="rename-err"></div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<script>
+    /**
+     * 商店弹窗逻辑
+     * 工具栏点击「商店」按钮触发，全屏模态展示
+     */
+    (function() {
+        let shopLoaded = false;
+
+        /** 打开商店弹窗 */
+        window.openShopModal = function() {
+            document.getElementById('shop-modal').style.display = 'flex';
+            if (!shopLoaded) {
+                shopLoaded = true;
+                fetchShopData();
+            }
+        };
+
+        /** 关闭商店弹窗 */
+        window.closeShopModal = function() {
+            document.getElementById('shop-modal').style.display = 'none';
+        };
+
+        // 点击遮罩层关闭弹窗
+        document.getElementById('shop-modal').addEventListener('click', function(e) {
+            if (e.target === this) closeShopModal();
+        });
+
+        /** 拉取商品数据 */
+        function fetchShopData() {
+            fetch('{{ route('shop.items') }}', {
+                    headers: {
+                        'Accept': 'application/json',
+                        'X-CSRF-TOKEN': _csrf()
+                    }
+                })
+                .then(r => r.json())
+                .then(data => renderShop(data))
+                .catch(() => showShopToast('⚠ 加载失败，请重试', false));
+        }
+
+        /** 渲染商品列表（2列网格） */
+        function renderShop(data) {
+            // 更新余额
+            document.getElementById('shop-jjb').textContent = Number(data.user_jjb).toLocaleString();
+
+            // 周卡状态
+            const badge = document.getElementById('shop-week-badge');
+            if (data.active_week_effect) {
+                const icons = {
+                    fireworks: '🎆',
+                    rain: '🌧',
+                    lightning: '⚡',
+                    snow: '❄️'
+                };
+                badge.textContent = (icons[data.active_week_effect] ?? '') + ' 周卡生效中';
+                badge.style.display = 'inline-block';
+            }
+
+            const groups = [{
+                    label: '⚡ 单次特效卡',
+                    desc: '立即播放一次，仅自己可见',
+                    type: 'instant'
+                },
+                {
+                    label: '📅 周卡  7天登录自动播放',
+                    desc: '同时只能激活一种，购新旧失效不退款',
+                    type: 'duration'
+                },
+                {
+                    label: '🎭 道具',
+                    desc: '',
+                    type: 'one_time'
+                },
+            ];
+
+            const list = document.getElementById('shop-items-list');
+            list.innerHTML = '';
+
+            groups.forEach(g => {
+                const items = data.items.filter(i => i.type === g.type);
+                if (!items.length) return;
+
+                // 分组标题（独占一整行）
+                const header = document.createElement('div');
+                header.className = 'shop-group-header';
+                header.innerHTML = `${g.label}${g.desc ? ` <span>${g.desc}</span>` : ''}`;
+                list.appendChild(header);
+
+                items.forEach(item => {
+                    const isRename = item.slug === 'rename_card';
+                    const canUse = isRename && data.has_rename_card;
+
+                    const card = document.createElement('div');
+                    card.className = 'shop-card';
+
+                    // 顶部：图标 + 名称
+                    card.innerHTML = `
+                    <div class="shop-card-top">
+                        <span class="shop-card-icon">${item.icon}</span>
+                        <span class="shop-card-name">${item.name}</span>
+                    </div>
+                    <div class="shop-card-desc">${item.description ?? ''}</div>
+                `;
+
+                    // 按钮
+                    const btn = document.createElement('button');
+                    if (canUse) {
+                        btn.className = 'shop-btn shop-btn-use';
+                        btn.textContent = '✦ 使用改名卡';
+                        btn.onclick = openRenameModal;
+                    } else {
+                        btn.className = 'shop-btn';
+                        btn.innerHTML = `🪙 ${Number(item.price).toLocaleString()}`;
+                        btn.onclick = () => buyItem(item.id, item.name, item.price);
+                    }
+                    card.appendChild(btn);
+                    list.appendChild(card);
+                });
+            });
+        }
+
+        /** 购买商品 */
+        window.buyItem = function(itemId, name, price) {
+            if (!confirm(`确定花费 ${Number(price).toLocaleString()} 金币购买【${name}】吗？`)) return;
+            fetch('{{ route('shop.buy') }}', {
+                    method: 'POST',
+                    headers: {
+                        'Accept': 'application/json',
+                        'Content-Type': 'application/json',
+                        'X-CSRF-TOKEN': _csrf()
+                    },
+                    body: JSON.stringify({
+                        item_id: itemId
+                    }),
+                })
+                .then(r => r.json())
+                .then(data => {
+                    showShopToast(data.message, data.status === 'success');
+                    if (data.status === 'success') {
+                        if (data.jjb !== undefined)
+                            document.getElementById('shop-jjb').textContent = Number(data.jjb)
+                            .toLocaleString();
+                        if (data.play_effect && window.EffectManager)
+                            window.EffectManager.play(data.play_effect);
+                        // 刷新商品状态
+                        shopLoaded = false;
+                        setTimeout(() => {
+                            fetchShopData();
+                            shopLoaded = true;
+                        }, 800);
+                    }
+                })
+                .catch(() => showShopToast('⚠ 网络异常，请重试', false));
+        };
+
+        /** Toast 通知 */
+        window.showShopToast = function(msg, ok) {
+            const el = document.getElementById('shop-toast');
+            el.textContent = msg;
+            el.style.display = 'block';
+            el.style.background = ok ? '#064e3b' : '#7f1d1d';
+            el.style.color = ok ? '#6ee7b7' : '#fca5a5';
+            clearTimeout(el._t);
+            el._t = setTimeout(() => {
+                el.style.display = 'none';
+            }, 3500);
+        };
+
+        /** 打开改名框 */
+        window.openRenameModal = function() {
+            const m = document.getElementById('shop-rename-overlay');
+            m.style.display = 'flex';
+            document.getElementById('rename-input').focus();
+            document.getElementById('rename-err').textContent = '';
+        };
+
+        /** 关闭改名框 */
+        window.closeRenameModal = function() {
+            document.getElementById('shop-rename-overlay').style.display = 'none';
+        };
+
+        /** 提交改名 */
+        window.submitRename = function() {
+            const newName = document.getElementById('rename-input').value.trim();
+            if (!newName) {
+                document.getElementById('rename-err').textContent = '请输入新昵称';
+                return;
+            }
+            fetch('{{ route('shop.rename') }}', {
+                    method: 'POST',
+                    headers: {
+                        'Accept': 'application/json',
+                        'Content-Type': 'application/json',
+                        'X-CSRF-TOKEN': _csrf()
+                    },
+                    body: JSON.stringify({
+                        new_name: newName
+                    }),
+                })
+                .then(r => r.json())
+                .then(data => {
+                    if (data.status === 'success') {
+                        closeRenameModal();
+                        showShopToast(data.message, true);
+                        shopLoaded = false;
+                        setTimeout(() => window.location.reload(), 2000);
+                    } else {
+                        document.getElementById('rename-err').textContent = data.message;
+                    }
+                })
+                .catch(() => {
+                    document.getElementById('rename-err').textContent = '网络异常，请重试';
+                });
+        };
+
+        function _csrf() {
+            return document.querySelector('meta[name="csrf-token"]')?.content ?? '';
+        }
+    })();
+</script>