将分类展示改为横向按钮形式，点击切换分类，默认显示全部

web/index.html

@@ -405,50 +405,50 @@
             font-size: 20px;
         }
 
-        .group-header {
+        .category-tabs {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 10px;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 2px solid #e0e0e0;
+        }
+
+        .category-tab {
+            padding: 10px 20px;
             background: #f8f9fa;
-            padding: 15px 20px;
-            margin: 15px 0 10px 0;
+            border: 2px solid transparent;
             border-radius: 8px;
             cursor: pointer;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            transition: background 0.3s;
+            font-size: 15px;
+            font-weight: 500;
+            color: #666;
+            transition: all 0.3s;
+            white-space: nowrap;
         }
 
-        .group-header:hover {
+        .category-tab:hover {
             background: #e9ecef;
-        }
-
-        .group-title {
-            font-size: 18px;
-            font-weight: bold;
             color: #333;
         }
 
-        .group-count {
-            color: #999;
-            font-size: 14px;
-            margin-left: 10px;
+        .category-tab.active {
+            background: #667eea;
+            color: white;
+            border-color: #667eea;
         }
 
-        .group-toggle {
-            font-size: 20px;
-            color: #667eea;
-            transition: transform 0.3s;
+        .category-count {
+            display: inline-block;
+            margin-left: 8px;
+            padding: 2px 8px;
+            background: rgba(255, 255, 255, 0.3);
+            border-radius: 12px;
+            font-size: 13px;
         }
 
-        .group-toggle.collapsed {
-            transform: rotate(-90deg);
-        }
-
-        .group-content {
-            display: block;
-        }
-
-        .group-content.collapsed {
-            display: none;
+        .category-tab.active .category-count {
+            background: rgba(255, 255, 255, 0.25);
         }
 
         .api-docs {
@@ -524,6 +524,8 @@
                 <input type="text" class="search-input" id="search-input" placeholder="🔍 搜索 Tag..." oninput="filterData()">
                 <span class="search-icon">🔍</span>
             </div>
+            <!-- Category Tabs -->
+            <div class="category-tabs" id="category-tabs"></div>
             <div id="data-container">
                 <div class="loading">正在加载...</div>
             </div>
@@ -596,7 +598,7 @@
         let currentViewData = null;
         let deleteCallback = null;
         let allDataItems = []; // 存储所有数据项
-        let collapsedGroups = new Set(); // 存储折叠的分组
+        let currentCategory = '全部'; // 当前选中的分类
 
         // Toast 通知
         function showToast(message, type = 'success') {
@@ -709,7 +711,7 @@
             }
         }
 
-        // 渲染数据列表（支持分组）
+        // 渲染数据列表（支持分类筛选）
         function renderDataList(items) {
             const container = document.getElementById('data-container');
 
@@ -718,90 +720,98 @@
                 return;
             }
 
-            // 按分组组织数据
-            const groups = {};
+            // 按分类组织数据
+            const categories = { '全部': items };
             items.forEach(item => {
                 const colonIndex = item.tag.indexOf(':');
-                const groupName = colonIndex > 0 ? item.tag.substring(0, colonIndex) : '未分组';
+                const categoryName = colonIndex > 0 ? item.tag.substring(0, colonIndex) : '未分组';
 
-                if (!groups[groupName]) {
-                    groups[groupName] = [];
+                if (!categories[categoryName]) {
+                    categories[categoryName] = [];
                 }
-                groups[groupName].push(item);
+                categories[categoryName].push(item);
             });
 
-            // 按分组名称排序
-            const sortedGroupNames = Object.keys(groups).sort((a, b) => {
+            // 渲染分类标签
+            renderCategoryTabs(categories);
+
+            // 根据当前选中分类过滤数据
+            const displayItems = currentCategory === '全部' ? items : (categories[currentCategory] || []);
+
+            // 渲染数据项
+            let html = '';
+            displayItems.forEach(item => {
+                const statusClass = `status-${item.status}`;
+                const statusText = {
+                    'valid': '正常',
+                    'warning': '即将过期',
+                    'expired': '已过期'
+                }[item.status];
+
+                const escapedTag = item.tag.replace(/'/g, "\\'").replace(/"/g, '\\"');
+
+                html += `
+                    <div class="data-item">
+                        <div class="data-info">
+                            <div class="data-tag">
+                                ${item.tag}
+                                <span class="status-badge ${statusClass}">${statusText}</span>
+                            </div>
+                            <div class="data-meta">
+                                类型: ${item.type} |
+                                创建: ${item.created_at} |
+                                过期: ${item.expires_at}
+                            </div>
+                        </div>
+                        <div>
+                            <button class="btn btn-primary" onclick="viewData('${escapedTag}')">查看</button>
+                            <button class="btn btn-success" onclick="copyTag('${escapedTag}')">📋 复制 Tag</button>
+                            <button class="btn btn-success" onclick="copyDataJSON('${escapedTag}')">📄 复制 JSON</button>
+                            <button class="btn btn-danger" onclick="confirmDelete('${escapedTag}')">删除</button>
+                        </div>
+                    </div>
+                `;
+            });
+
+            container.innerHTML = html || '<div class="empty">📭 该分类暂无数据</div>';
+        }
+
+        // 渲染分类标签
+        function renderCategoryTabs(categories) {
+            const tabsContainer = document.getElementById('category-tabs');
+            
+            // 按名称排序（全部放最前面）
+            const sortedCategories = Object.keys(categories).sort((a, b) => {
+                if (a === '全部') return -1;
+                if (b === '全部') return 1;
                 if (a === '未分组') return 1;
                 if (b === '未分组') return -1;
                 return a.localeCompare(b);
             });
 
-            // 渲染分组
             let html = '';
-            sortedGroupNames.forEach(groupName => {
-                const groupItems = groups[groupName];
-                const isCollapsed = collapsedGroups.has(groupName);
+            sortedCategories.forEach(categoryName => {
+                const count = categories[categoryName].length;
+                const isActive = categoryName === currentCategory;
+                const escapedName = categoryName.replace(/'/g, "\\'");
 
                 html += `
-                    <div class="group-header" onclick="toggleGroup('${groupName.replace(/'/g, "\\'")}')">
-                        <div>
-                            <span class="group-title">${groupName}</span>
-                            <span class="group-count">(${groupItems.length})</span>
-                        </div>
-                        <span class="group-toggle ${isCollapsed ? 'collapsed' : ''}">▼</span>
-                    </div>
-                    <div class="group-content ${isCollapsed ? 'collapsed' : ''}" id="group-${groupName}">
+                    <button class="category-tab ${isActive ? 'active' : ''}" 
+                            onclick="switchCategory('${escapedName}')">
+                        ${categoryName}
+                        <span class="category-count">${count}</span>
+                    </button>
                 `;
-
-                groupItems.forEach(item => {
-                    const statusClass = `status-${item.status}`;
-                    const statusText = {
-                        'valid': '正常',
-                        'warning': '即将过期',
-                        'expired': '已过期'
-                    }[item.status];
-
-                    const escapedTag = item.tag.replace(/'/g, "\\'").replace(/"/g, '\\"');
-
-                    html += `
-                        <div class="data-item">
-                            <div class="data-info">
-                                <div class="data-tag">
-                                    ${item.tag}
-                                    <span class="status-badge ${statusClass}">${statusText}</span>
-                                </div>
-                                <div class="data-meta">
-                                    类型: ${item.type} |
-                                    创建: ${item.created_at} |
-                                    过期: ${item.expires_at}
-                                </div>
-                            </div>
-                            <div>
-                                <button class="btn btn-primary" onclick="viewData('${escapedTag}')">查看</button>
-                                <button class="btn btn-success" onclick="copyTag('${escapedTag}')">📋 复制 Tag</button>
-                                <button class="btn btn-success" onclick="copyDataJSON('${escapedTag}')">📄 复制 JSON</button>
-                                <button class="btn btn-danger" onclick="confirmDelete('${escapedTag}')">删除</button>
-                            </div>
-                        </div>
-                    `;
-                });
-
-                html += '</div>';
             });
 
-            container.innerHTML = html;
+            tabsContainer.innerHTML = html;
         }
 
-        // 切换分组折叠/展开
-        function toggleGroup(groupName) {
-            if (collapsedGroups.has(groupName)) {
-                collapsedGroups.delete(groupName);
-            } else {
-                collapsedGroups.add(groupName);
-            }
+        // 切换分类
+        function switchCategory(categoryName) {
+            currentCategory = categoryName;
             
-            // 重新渲染当前显示的数据
+            // 应用搜索过滤（如果有）
             const searchTerm = document.getElementById('search-input').value.trim().toLowerCase();
             if (searchTerm) {
                 filterData();