Просмотр исходного кода

fix: 前端加载和筛选逻辑优化

- 添加错误处理确保数据加载
- 添加筛选逻辑说明(交集)
- 添加清除筛选按钮
Talegorithm 3 дней назад
Родитель
Сommit
4d2d41788d
1 измененных файлов с 34 добавлено и 7 удалено
  1. 34 7
      knowhub/server.py

+ 34 - 7
knowhub/server.py

@@ -1432,6 +1432,10 @@ def frontend():
 
         <!-- 筛选栏 -->
         <div class="bg-white rounded-lg shadow p-6 mb-6">
+            <div class="flex justify-between items-center mb-4">
+                <h2 class="text-lg font-semibold text-gray-800">筛选条件</h2>
+                <span class="text-sm text-gray-500">不同类别之间取交集,同类别内取并集</span>
+            </div>
             <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
                 <div>
                     <label class="block text-sm font-medium text-gray-700 mb-2">类型 (Types)</label>
@@ -1459,9 +1463,14 @@ def frontend():
                     <input type="text" id="scopesFilter" placeholder="输入 scope" class="w-full border rounded px-3 py-2">
                 </div>
             </div>
-            <button onclick="applyFilters()" class="mt-4 bg-gray-600 hover:bg-gray-700 text-white px-4 py-2 rounded">
-                应用筛选
-            </button>
+            <div class="flex gap-2 mt-4">
+                <button onclick="applyFilters()" class="bg-gray-600 hover:bg-gray-700 text-white px-4 py-2 rounded">
+                    应用筛选
+                </button>
+                <button onclick="clearFilters()" class="bg-gray-300 hover:bg-gray-400 text-gray-700 px-4 py-2 rounded">
+                    清除筛选
+                </button>
+            </div>
         </div>
 
         <!-- 知识列表 -->
@@ -1559,16 +1568,34 @@ def frontend():
                 params.append('scopes', scopesFilter);
             }
 
-            const res = await fetch(`/api/knowledge?${params.toString()}`);
-            const data = await res.json();
-            allKnowledge = data.results;
-            renderKnowledge(allKnowledge);
+            try {
+                const res = await fetch(`/api/knowledge?${params.toString()}`);
+                if (!res.ok) {
+                    console.error('加载失败:', res.status);
+                    return;
+                }
+                const data = await res.json();
+                allKnowledge = data.results;
+                renderKnowledge(allKnowledge);
+            } catch (error) {
+                console.error('加载错误:', error);
+            }
         }
 
         function applyFilters() {
             loadKnowledge();
         }
 
+        function clearFilters() {
+            // 清除所有筛选条件
+            document.querySelectorAll('.type-filter').forEach(el => el.checked = false);
+            document.querySelectorAll('.tag-filter').forEach(el => el.checked = false);
+            document.getElementById('ownerFilter').value = '';
+            document.getElementById('scopesFilter').value = '';
+            // 重新加载数据
+            loadKnowledge();
+        }
+
         function renderKnowledge(list) {
             const container = document.getElementById('knowledgeList');
             if (list.length === 0) {