优化商店个性装扮体验

resources/views/chat/partials/layout/toolbar.blade.php

@@ -341,6 +341,40 @@
         background: #f6faff;
     }
 
+    /* 装扮列表区 — 与商品列表同风格 */
+    #shop-decorations-list {
+        flex: 1;
+        overflow-y: auto;
+        padding: 10px 12px;
+        display: none;
+        grid-template-columns: repeat(4, 1fr);
+        gap: 8px;
+        align-content: start;
+        background: #f6faff;
+    }
+
+    /* Tab 导航 */
+    #shop-tabs {
+        display: flex;
+        border-bottom: 1px solid #cde;
+        flex-shrink: 0;
+        background: #eef4fb;
+    }
+    .shop-tab {
+        flex: 1;
+        padding: 8px 6px;
+        background: transparent;
+        border: none;
+        color: #6b7280;
+        font-size: 12px;
+        cursor: pointer;
+        border-bottom: 2px solid transparent;
+        font-weight: bold;
+        transition: all .2s;
+    }
+    .shop-tab.active { color: #336699 !important; border-bottom-color: #336699 !important; }
+    .shop-tab:hover { color: #5a8fc0; }
+
     /* 分组标题 — 独占一整行 */
     .shop-group-header {
         grid-column: 1 / -1;
@@ -404,6 +438,37 @@
         flex: 1;
     }
 
+    /* 装扮Tab购买说明 */
+    .decoration-note {
+        font-size: 11px;
+        color: #b45309;
+        background: #fef3c7;
+        border: 1px solid #fde68a;
+        border-radius: 6px;
+        padding: 6px 10px;
+        margin-bottom: 10px;
+        grid-column: 1 / -1;
+    }
+    /* 装扮卡片状态行（独立一行，显示在商品名下方） */
+    .decoration-status-line {
+        margin-top: 4px;
+    }
+    /* 装扮卡片状态标签 */
+    .decoration-status {
+        font-size: 9px;
+        padding: 1px 6px;
+        border-radius: 8px;
+    }
+    .decoration-status.active { background: #065f46; color: #6ee7b7; }
+    .decoration-status.expired { background: #7f1d1d; color: #fca5a5; }
+    /* 装扮有效期提示 */
+    .decoration-duration {
+        font-size: 10px;
+        color: #6366f1;
+        margin-top: 2px;
+    }
+    .decoration-expiry { font-size: 10px; color: #9ca3af; margin-top: 2px; }
+
     .shop-btn {
         display: flex;
         align-items: center;
@@ -598,11 +663,22 @@
         {{-- Toast --}}
         <div id="shop-toast"></div>
 
+        {{-- Tab 导航 --}}
+        <div id="shop-tabs">
+            <button class="shop-tab active" data-shop-tab="items">特效道具</button>
+            <button class="shop-tab" data-shop-tab="decorations">个人装扮</button>
+        </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-decorations-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">