Update

static/css/style.css

@@ -27,22 +27,25 @@ body {
 /* 文件夹标签样式 */
 .folder-tags {
     display: flex;
-    gap: 8px;
+    gap: 4px;
     overflow-x: auto;
-    padding: 10px 0;
+    padding: 4px 0;
+    flex-wrap: wrap;
 }
 
 .tag {
-    padding: 6px 12px;
-    border-radius: 20px;
-    background: #e0e0e0;
     cursor: pointer;
-    white-space: nowrap;
-    transition: all 0.3s;
+    padding: 2px 8px;
+    margin: 2px;
+    border: 1px solid #ccc;
+    border-radius: 3px;
+    display: inline-block;
+    line-height: 1.2;
+    font-size: 14px;
 }
 
 .tag.active {
-    background: var(--primary-color);
+    background-color: #007bff;
     color: white;
 }
 

static/js/script.js

@@ -17,22 +17,6 @@ function sortCards(sortBy) {
     cards.forEach(card => grid.appendChild(card));
 }
 
-// 文件夹筛选
-document.querySelectorAll('.tag').forEach(tag => {
-    tag.addEventListener('click', () => {
-        document.querySelectorAll('.tag').forEach(t => t.classList.remove('active'));
-        tag.classList.add('active');
-        const folder = tag.dataset.folder;
-        filterByFolder(folder);
-    });
-});
-
-function filterByFolder(folder) {
-    document.querySelectorAll('.lora-card').forEach(card => {
-        card.style.display = card.dataset.folder === folder ? 'block' : 'none';
-    });
-}
-
 // 刷新功能
 async function refreshLoras() {
     try {
@@ -210,6 +194,28 @@ document.addEventListener('DOMContentLoaded', function() {
     });
 });
 
+function toggleFolder(element) {
+    // Remove active class from all tags if clicking already active tag
+    if (element.classList.contains('active')) {
+        document.querySelectorAll('.tag').forEach(tag => tag.classList.remove('active'));
+        // Show all cards
+        document.querySelectorAll('.lora-card').forEach(card => card.style.display = '');
+    } else {
+        // Remove active class from all tags
+        document.querySelectorAll('.tag').forEach(tag => tag.classList.remove('active'));
+        // Add active class to clicked tag
+        element.classList.add('active');
+        // Hide all cards first
+        document.querySelectorAll('.lora-card').forEach(card => {
+            if (card.getAttribute('data-folder') === element.getAttribute('data-folder')) {
+                card.style.display = '';
+            } else {
+                card.style.display = 'none';
+            }
+        });
+    }
+}
+
 // 主题切换
 function toggleTheme() {
   const theme = document.body.dataset.theme || 'light';