From 9c8f7b1a95e8e1b0f98170061ccbf023d00a21a1 Mon Sep 17 00:00:00 2001
From: lkddi <lkddi@163.com>
Date: Fri, 27 Feb 2026 16:02:22 +0800
Subject: [PATCH] =?UTF-8?q?UI:=20=E5=95=86=E5=BA=97=E9=9D=A2=E6=9D=BF?=
 =?UTF-8?q?=E9=87=8D=E6=96=B0=E8=AE=BE=E8=AE=A1=E2=80=94=E2=80=94=E7=B4=A7?=
 =?UTF-8?q?=E5=87=91=E5=8D=A1=E7=89=87=E3=80=81=E6=B8=90=E5=8F=98=E9=85=8D?=
 =?UTF-8?q?=E8=89=B2=E3=80=81=E6=82=AC=E6=B5=AE=E7=89=B9=E6=95=88=E3=80=81?=
 =?UTF-8?q?=E7=BB=9D=E5=AF=B9=E5=AE=9A=E4=BD=8D=E9=80=82=E9=85=8D=E7=AA=84?=
 =?UTF-8?q?=E4=BE=A7=E8=BE=B9=E6=A0=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../views/chat/partials/scripts.blade.php     |   8 +-
 .../views/chat/partials/shop-panel.blade.php  | 439 ++++++++++++++----
 2 files changed, 342 insertions(+), 105 deletions(-)

diff --git a/resources/views/chat/partials/scripts.blade.php b/resources/views/chat/partials/scripts.blade.php
index 49aa15b..c0bd9fc 100644
--- a/resources/views/chat/partials/scripts.blade.php
+++ b/resources/views/chat/partials/scripts.blade.php
@@ -27,21 +27,19 @@
 
     // ── Tab 切换 ──────────────────────────────────────
     function switchTab(tab) {
-        // 所有内容面板（名单/房间/贴图/酷库 用 block，商店用 flex）
+        // 所有内容面板（名单/房间/贴图/酷库 用 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);
         });
-        // 商店面板单独处理（flex 布局以支持内部滚动）
+        // 商店面板：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';
-            shopPanel.style.flexDirection = 'column';
-            shopPanel.style.height = '100%';
             shopTab.classList.toggle('active', tab === 'shop');
         }
-        // 贴图 Tab 懒加载：首次切换时将 data-src 赋值到 src
+        // 贴图 Tab 懒加载
         if (tab === 'emoji') {
             document.querySelectorAll('#panel-emoji img[data-src]').forEach(img => {
                 img.src = img.dataset.src;
diff --git a/resources/views/chat/partials/shop-panel.blade.php b/resources/views/chat/partials/shop-panel.blade.php
index ae10629..dd5fe7a 100644
--- a/resources/views/chat/partials/shop-panel.blade.php
+++ b/resources/views/chat/partials/shop-panel.blade.php
@@ -1,42 +1,274 @@
 {{--
     文件功能：商店面板视图（嵌入聊天室右侧）
     展示单次卡、周卡、改名卡，支持购买和改名操作
+    采用紧凑卡片设计，适配窄侧边栏
 --}}
 
-<div id="shop-panel" style="display:none;" class="flex flex-col h-full">
+<style>
+    /* ── 商店面板样式 ──────────────────────────────── */
+    #shop-panel {
+        display: none;
+        position: absolute;
+        /* 顶部 tab 栏高度约 26px，底部状态栏约 22px */
+        top: 26px;
+        left: 0;
+        right: 0;
+        bottom: 22px;
+        flex-direction: column;
+        background: #0f0c29;
+        z-index: 10;
+    }
 
-    {{-- 顶部余额显示 --}}
-    <div id="shop-balance-bar"
-        style="padding:8px 10px; background:#1e1b4b; border-bottom:1px solid #3730a3; font-size:12px; color:#a5b4fc; display:flex; align-items:center; gap:6px;">
-        🪙 我的金币：<span id="shop-jjb" style="color:#fbbf24; font-weight:bold;">--</span>
-        <span id="shop-week-badge"
-            style="margin-left:auto; display:none; font-size:11px; background:#312e81; padding:2px 6px; border-radius:4px; color:#c7d2fe;"></span>
+    #shop-balance-bar {
+        padding: 6px 8px;
+        background: linear-gradient(135deg, #1e1b4b, #312e81);
+        border-bottom: 1px solid #4f46e5;
+        font-size: 11px;
+        color: #a5b4fc;
+        display: flex;
+        align-items: center;
+        gap: 4px;
+        flex-shrink: 0;
+    }
+
+    #shop-jjb {
+        color: #fbbf24;
+        font-weight: 800;
+        font-size: 12px;
+    }
+
+    #shop-week-badge {
+        display: none;
+        margin-left: auto;
+        font-size: 10px;
+        background: #4338ca;
+        padding: 1px 5px;
+        border-radius: 10px;
+        color: #c7d2fe;
+        white-space: nowrap;
+    }
+
+    #shop-toast {
+        display: none;
+        margin: 4px 6px;
+        padding: 5px 8px;
+        border-radius: 6px;
+        font-size: 11px;
+        font-weight: bold;
+        flex-shrink: 0;
+    }
+
+    #shop-items-list {
+        flex: 1;
+        overflow-y: auto;
+        padding: 6px 5px;
+        scrollbar-width: thin;
+        scrollbar-color: #4338ca #0f0c29;
+    }
+
+    /* 分组标题 */
+    .shop-group-label {
+        font-size: 10px;
+        font-weight: 800;
+        color: #818cf8;
+        letter-spacing: .5px;
+        text-transform: uppercase;
+        padding: 4px 2px 3px;
+        border-bottom: 1px solid #312e81;
+        margin-bottom: 5px;
+    }
+
+    .shop-group-desc {
+        font-size: 9px;
+        color: #6b7280;
+        margin-bottom: 5px;
+        line-height: 1.3;
+    }
+
+    /* 商品卡片 */
+    .shop-card {
+        background: linear-gradient(135deg, #1e1b4b 60%, #2d2a6e);
+        border: 1px solid #3730a3;
+        border-radius: 8px;
+        padding: 7px 8px;
+        margin-bottom: 5px;
+        transition: border-color .2s, box-shadow .2s;
+        cursor: default;
+    }
+
+    .shop-card:hover {
+        border-color: #6366f1;
+        box-shadow: 0 0 8px rgba(99, 102, 241, .35);
+    }
+
+    .shop-card-row {
+        display: flex;
+        align-items: center;
+        gap: 5px;
+    }
+
+    .shop-card-icon {
+        font-size: 18px;
+        flex-shrink: 0;
+        width: 26px;
+        text-align: center;
+        line-height: 1;
+    }
+
+    .shop-card-name {
+        font-size: 11px;
+        font-weight: 700;
+        color: #e0e7ff;
+        flex: 1;
+        min-width: 0;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    .shop-card-desc {
+        font-size: 9px;
+        color: #6b7280;
+        margin-top: 3px;
+        line-height: 1.35;
+    }
+
+    /* 购买按钮 */
+    .shop-btn {
+        display: inline-flex;
+        align-items: center;
+        gap: 2px;
+        background: linear-gradient(135deg, #4f46e5, #7c3aed);
+        color: #fff;
+        border: none;
+        border-radius: 5px;
+        padding: 3px 7px;
+        cursor: pointer;
+        font-size: 10px;
+        font-weight: 800;
+        white-space: nowrap;
+        flex-shrink: 0;
+        transition: opacity .15s, transform .1s;
+    }
+
+    .shop-btn:hover {
+        opacity: .85;
+        transform: scale(1.04);
+    }
+
+    .shop-btn-use {
+        background: linear-gradient(135deg, #7c3aed, #a855f7);
+    }
+
+    /* 改名弹框 */
+    #rename-modal {
+        display: none;
+        position: absolute;
+        inset: 0;
+        background: rgba(0, 0, 0, .75);
+        z-index: 300;
+        align-items: center;
+        justify-content: center;
+    }
+
+    #rename-modal-inner {
+        background: linear-gradient(160deg, #1e1b4b, #1a1060);
+        border: 1px solid #6366f1;
+        border-radius: 10px;
+        padding: 14px 12px;
+        width: 190px;
+        box-shadow: 0 8px 30px rgba(99, 102, 241, .4);
+    }
+
+    #rename-modal-title {
+        font-size: 12px;
+        font-weight: 800;
+        color: #c7d2fe;
+        margin-bottom: 8px;
+        display: flex;
+        align-items: center;
+        gap: 4px;
+    }
+
+    #rename-input {
+        width: 100%;
+        background: #312e81;
+        border: 1px solid #4f46e5;
+        border-radius: 5px;
+        padding: 5px 7px;
+        color: #e0e7ff;
+        font-size: 12px;
+        box-sizing: border-box;
+        margin-bottom: 8px;
+        outline: none;
+    }
+
+    #rename-input:focus {
+        border-color: #818cf8;
+    }
+
+    .rename-btn-row {
+        display: flex;
+        gap: 6px;
+    }
+
+    #rename-confirm {
+        flex: 1;
+        background: linear-gradient(135deg, #4f46e5, #7c3aed);
+        color: #fff;
+        border: none;
+        border-radius: 5px;
+        padding: 5px;
+        cursor: pointer;
+        font-size: 11px;
+        font-weight: 700;
+    }
+
+    #rename-cancel {
+        flex: 1;
+        background: #374151;
+        color: #9ca3af;
+        border: none;
+        border-radius: 5px;
+        padding: 5px;
+        cursor: pointer;
+        font-size: 11px;
+    }
+
+    #rename-err {
+        color: #f87171;
+        font-size: 10px;
+        margin-top: 5px;
+        min-height: 14px;
+    }
+</style>
+
+<div id="shop-panel">
+
+    {{-- 余额栏 --}}
+    <div id="shop-balance-bar">
+        🪙 <span id="shop-jjb">--</span> 金币
+        <span id="shop-week-badge"></span>
     </div>
 
-    {{-- Toast 提示 --}}
-    <div id="shop-toast"
-        style="display:none; margin:6px 8px; padding:6px 10px; border-radius:4px; font-size:12px; font-weight:bold;">
-    </div>
+    {{-- Toast --}}
+    <div id="shop-toast"></div>
 
-    {{-- 商品列表（滚动区） --}}
-    <div id="shop-items-list" style="flex:1; overflow-y:auto; padding:8px;">
-        <div style="text-align:center; color:#6366f1; padding:20px; font-size:13px;">加载中...</div>
+    {{-- 商品列表 --}}
+    <div id="shop-items-list">
+        <div style="text-align:center;color:#6366f1;padding:20px 0;font-size:11px;">加载中…</div>
     </div>
 
     {{-- 改名弹框 --}}
-    <div id="rename-modal"
-        style="display:none; position:absolute; inset:0; background:rgba(0,0,0,.7); z-index:200; display:none; align-items:center; justify-content:center;">
-        <div style="background:#1e1b4b; border:1px solid #4f46e5; border-radius:8px; padding:16px; width:220px;">
-            <div style="font-weight:bold; color:#c7d2fe; margin-bottom:10px;">🎭 使用改名卡</div>
-            <input id="rename-input" type="text" maxlength="10" placeholder="输入新昵称（1-10字）"
-                style="width:100%; background:#312e81; border:1px solid #4f46e5; border-radius:4px; padding:6px 8px; color:#e0e7ff; font-size:13px; box-sizing:border-box; margin-bottom:8px;">
-            <div style="display:flex; gap:6px;">
-                <button onclick="submitRename()"
-                    style="flex:1; background:#4f46e5; color:#fff; border:none; border-radius:4px; padding:6px; cursor:pointer; font-size:12px; font-weight:bold;">确认改名</button>
-                <button onclick="closeRenameModal()"
-                    style="flex:1; background:#374151; color:#d1d5db; border:none; border-radius:4px; padding:6px; cursor:pointer; font-size:12px;">取消</button>
+    <div id="rename-modal">
+        <div id="rename-modal-inner">
+            <div id="rename-modal-title">🎭 使用改名卡</div>
+            <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" style="color:#f87171; font-size:11px; margin-top:6px;"></div>
+            <div id="rename-err"></div>
         </div>
     </div>
 </div>
@@ -44,23 +276,18 @@
 <script>
     /**
      * 商店面板前端逻辑
-     * 负责拉取商品、购买确认、改名卡交互
      */
     (function() {
         let shopLoaded = false;
 
-        /**
-         * 打开商店面板时加载数据
-         */
+        /** 打开商店 Tab 时调用 */
         window.loadShop = function() {
             if (shopLoaded) return;
             shopLoaded = true;
             fetchShopData();
         };
 
-        /**
-         * 拉取商品列表与当前用户状态
-         */
+        /** 拉取商品数据 */
         function fetchShopData() {
             fetch('{{ route('shop.items') }}', {
                     headers: {
@@ -70,17 +297,15 @@
                 })
                 .then(r => r.json())
                 .then(data => renderShop(data))
-                .catch(() => showShopToast('加载失败，请刷新重试', false));
+                .catch(() => showShopToast('⚠ 加载失败，请刷新重试', false));
         }
 
-        /**
-         * 渲染商品列表
-         */
+        /** 渲染商品列表 */
         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 = {
@@ -89,23 +314,22 @@
                     lightning: '⚡',
                     snow: '❄️'
                 };
-                badge.textContent = '周卡生效中：' + (icons[data.active_week_effect] ?? '') + data.active_week_effect;
-                badge.style.display = 'block';
+                badge.textContent = (icons[data.active_week_effect] ?? '') + ' 周卡生效中';
+                badge.style.display = 'inline-block';
             }
 
-            // 分组
             const groups = [{
                     label: '⚡ 单次特效卡',
                     desc: '立即播放一次，仅自己可见',
                     type: 'instant'
                 },
                 {
-                    label: '📅 周卡（7天登录自动播放）',
-                    desc: '同时只能激活一种，购买新的旧的作废不退款',
+                    label: '📅 周卡・7天登录自动播放',
+                    desc: '同时只能激活一种，购新旧失效无退款',
                     type: 'duration'
                 },
                 {
-                    label: '🎭 道具卡',
+                    label: '🎭 道具',
                     desc: '',
                     type: 'one_time'
                 },
@@ -114,42 +338,72 @@
             const itemsEl = document.getElementById('shop-items-list');
             itemsEl.innerHTML = '';
 
-            const hasCard = data.has_rename_card;
-
             groups.forEach(g => {
                 const items = data.items.filter(i => i.type === g.type);
                 if (!items.length) return;
 
                 const section = document.createElement('div');
-                section.style.cssText = 'margin-bottom:10px;';
-                section.innerHTML = `
-                <div style="font-size:11px; font-weight:bold; color:#818cf8; padding:4px 0 4px; border-bottom:1px solid #312e81; margin-bottom:6px;">${g.label}</div>
-                ${g.desc ? `<div style="font-size:10px;color:#6b7280;margin-bottom:6px;">${g.desc}</div>` : ''}
-            `;
+                section.style.marginBottom = '10px';
+
+                // 分组标题
+                const label = document.createElement('div');
+                label.className = 'shop-group-label';
+                label.textContent = g.label;
+                section.appendChild(label);
+
+                if (g.desc) {
+                    const desc = document.createElement('div');
+                    desc.className = 'shop-group-desc';
+                    desc.textContent = g.desc;
+                    section.appendChild(desc);
+                }
 
                 items.forEach(item => {
                     const isRename = item.slug === 'rename_card';
+                    const canUseRename = isRename && data.has_rename_card;
+
                     const card = document.createElement('div');
-                    card.style.cssText =
-                        'background:#1e1b4b;border:1px solid #3730a3;border-radius:6px;padding:8px 10px;margin-bottom:6px;';
-                    card.innerHTML = `
-                    <div style="display:flex;justify-content:space-between;align-items:center;gap:6px;">
-                        <div>
-                            <span style="font-size:16px;">${item.icon}</span>
-                            <span style="font-size:13px;font-weight:bold;color:#e0e7ff;margin-left:4px;">${item.name}</span>
-                        </div>
-                        <div style="white-space:nowrap;">
-                            ${isRename && hasCard
-                                ? `<button onclick="openRenameModal()" style="background:#7c3aed;color:#fff;border:none;border-radius:4px;padding:3px 8px;cursor:pointer;font-size:11px;font-weight:bold;">使用改名卡</button>`
-                                : `<button onclick="buyItem(${item.id}, '${item.name}', ${item.price})"
-                                    style="background:#4f46e5;color:#fff;border:none;border-radius:4px;padding:3px 8px;cursor:pointer;font-size:11px;font-weight:bold;">
-                                    🪙 ${Number(item.price).toLocaleString()}
-                                  </button>`
-                            }
-                        </div>
-                    </div>
-                    <div style="font-size:10px;color:#6b7280;margin-top:3px;">${item.description ?? ''}</div>
-                `;
+                    card.className = 'shop-card';
+
+                    // 行：图标 + 名称 + 按钮
+                    const row = document.createElement('div');
+                    row.className = 'shop-card-row';
+
+                    // 图标
+                    const icon = document.createElement('span');
+                    icon.className = 'shop-card-icon';
+                    icon.textContent = item.icon;
+                    row.appendChild(icon);
+
+                    // 名称
+                    const name = document.createElement('span');
+                    name.className = 'shop-card-name';
+                    name.title = item.name;
+                    name.textContent = item.name;
+                    row.appendChild(name);
+
+                    // 按钮
+                    const btn = document.createElement('button');
+                    if (canUseRename) {
+                        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);
+                    }
+                    row.appendChild(btn);
+                    card.appendChild(row);
+
+                    // 简介
+                    if (item.description) {
+                        const desc = document.createElement('div');
+                        desc.className = 'shop-card-desc';
+                        desc.textContent = item.description;
+                        card.appendChild(desc);
+                    }
+
                     section.appendChild(card);
                 });
 
@@ -157,9 +411,7 @@
             });
         }
 
-        /**
-         * 购买商品
-         */
+        /** 购买商品 */
         window.buyItem = function(itemId, name, price) {
             if (!confirm(`确定花费 ${Number(price).toLocaleString()} 金币购买【${name}】吗？`)) return;
             fetch('{{ route('shop.buy') }}', {
@@ -177,14 +429,12 @@
                 .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) {
+                        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();
@@ -192,12 +442,10 @@
                         }, 800);
                     }
                 })
-                .catch(() => showShopToast('网络异常，请重试', false));
+                .catch(() => showShopToast('⚠ 网络异常，请重试', false));
         };
 
-        /**
-         * 显示/隐藏 商店 Toast 通知
-         */
+        /** Toast 通知 */
         window.showShopToast = function(msg, ok) {
             const el = document.getElementById('shop-toast');
             el.textContent = msg;
@@ -207,12 +455,10 @@
             clearTimeout(el._t);
             el._t = setTimeout(() => {
                 el.style.display = 'none';
-            }, 4000);
+            }, 3500);
         };
 
-        /**
-         * 打开改名弹框
-         */
+        /** 打开改名框 */
         window.openRenameModal = function() {
             const m = document.getElementById('rename-modal');
             m.style.display = 'flex';
@@ -220,16 +466,12 @@
             document.getElementById('rename-err').textContent = '';
         };
 
-        /**
-         * 关闭改名弹框
-         */
+        /** 关闭改名框 */
         window.closeRenameModal = function() {
             document.getElementById('rename-modal').style.display = 'none';
         };
 
-        /**
-         * 提交改名请求
-         */
+        /** 提交改名 */
         window.submitRename = function() {
             const newName = document.getElementById('rename-input').value.trim();
             if (!newName) {
@@ -253,7 +495,7 @@
                         closeRenameModal();
                         showShopToast(data.message, true);
                         shopLoaded = false;
-                        setTimeout(() => window.location.reload(), 2000); // 改名后刷新页面
+                        setTimeout(() => window.location.reload(), 2000);
                     } else {
                         document.getElementById('rename-err').textContent = data.message;
                     }
@@ -263,9 +505,6 @@
                 });
         };
 
-        /**
-         * 获取 CSRF Token
-         */
         function _csrf() {
             return document.querySelector('meta[name="csrf-token"]')?.content ?? '';
         }