将分类展示改为横向按钮形式，点击切换分类，默认显示全部
This commit is contained in:
K-hermes committed
1 parent
e9d923fea9
commit
1567a3dea3
1 file changed
+82
-72
+82
-72
@@ -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,43 +720,27 @@
|
||||
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) => {
|
||||
if (a === '未分组') return 1;
|
||||
if (b === '未分组') return -1;
|
||||
return a.localeCompare(b);
|
||||
});
|
||||
// 渲染分类标签
|
||||
renderCategoryTabs(categories);
|
||||
|
||||
// 渲染分组
|
||||
// 根据当前选中分类过滤数据
|
||||
const displayItems = currentCategory === '全部' ? items : (categories[currentCategory] || []);
|
||||
|
||||
// 渲染数据项
|
||||
let html = '';
|
||||
sortedGroupNames.forEach(groupName => {
|
||||
const groupItems = groups[groupName];
|
||||
const isCollapsed = collapsedGroups.has(groupName);
|
||||
|
||||
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}">
|
||||
`;
|
||||
|
||||
groupItems.forEach(item => {
|
||||
displayItems.forEach(item => {
|
||||
const statusClass = `status-${item.status}`;
|
||||
const statusText = {
|
||||
'valid': '正常',
|
||||
@@ -787,21 +773,45 @@
|
||||
`;
|
||||
});
|
||||
|
||||
html += '</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);
|
||||
});
|
||||
|
||||
container.innerHTML = html;
|
||||
let html = '';
|
||||
sortedCategories.forEach(categoryName => {
|
||||
const count = categories[categoryName].length;
|
||||
const isActive = categoryName === currentCategory;
|
||||
const escapedName = categoryName.replace(/'/g, "\\'");
|
||||
|
||||
html += `
|
||||
<button class="category-tab ${isActive ? 'active' : ''}"
|
||||
onclick="switchCategory('${escapedName}')">
|
||||
${categoryName}
|
||||
<span class="category-count">${count}</span>
|
||||
</button>
|
||||
`;
|
||||
});
|
||||
|
||||
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();
|
||||
|
||||
Reference in new issue
Block a user