fix: 后台管理子类别筛选按钮显示选中状态
- 添加"全部"按钮,点击可清除筛选 - 选中状态:蓝色背景白色文字 - 未选中状态:白色背景灰色文字+边框 - 用户点击后能看到明显的视觉变化 - 根据当前筛选值动态更新按钮样式
This commit is contained in:
@@ -534,9 +534,21 @@
|
||||
container.innerHTML = '';
|
||||
return;
|
||||
}
|
||||
container.innerHTML = cat.subcategories.map(sub => `
|
||||
<button onclick="${filterFunction}('${sub.id}')" class="px-3 py-1 rounded text-sm bg-white border text-gray-600 hover:bg-gray-100">
|
||||
<i class="${sub.icon} mr-1"></i>${sub.name}
|
||||
|
||||
// 获取当前筛选值
|
||||
let currentFilter = '';
|
||||
if (categoryId === 'ai-models') currentFilter = modelSubcategoryFilter;
|
||||
else if (categoryId === 'gpus') currentFilter = gpuSubcategoryFilter;
|
||||
else if (categoryId === 'cpus') currentFilter = cpuSubcategoryFilter;
|
||||
else if (categoryId === dynamicCategoryId) currentFilter = dynamicSubcategoryFilter;
|
||||
|
||||
container.innerHTML = `
|
||||
<button onclick="${filterFunction}('')" class="px-3 py-1 rounded text-sm ${currentFilter === '' ? 'bg-indigo-600 text-white' : 'bg-white border text-gray-600 hover:bg-gray-100'}">
|
||||
<i class="ri-apps-line mr-1"></i>全部
|
||||
</button>
|
||||
` + cat.subcategories.map(sub => `
|
||||
<button onclick="${filterFunction}('${sub.id}')" class="px-3 py-1 rounded text-sm ${currentFilter === sub.id ? 'bg-indigo-600 text-white' : 'bg-white border text-gray-600 hover:bg-gray-100'}">
|
||||
<i class="${sub.icon || 'ri-folder-line'} mr-1"></i>${sub.name}
|
||||
</button>
|
||||
`).join('');
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user