hz4th_coder/param-hub-python
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修复首页搜索功能：改为调用全局搜索API并展示结果

Browse Source
This commit is contained in:
hz4th_coder
2026-07-11 23:10:22 +08:00
parent 116ee34b6f
commit c85a43f542
1 changed files with 130 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/index.html
+130 -3
View File
@@ -56,8 +56,20 @@
</div>
</div>
<!-- 搜索结果区域 -->
<div id="searchResults" class="hidden mb-8">
<h2 class="text-lg font-semibold text-gray-800 mb-4 flex items-center gap-2">
<i class="ri-search-line text-indigo-600"></i>
搜索结果
<span id="searchKeyword" class="text-sm text-gray-500"></span>
</h2>
<div id="searchContent">
<!-- 动态填充 -->
</div>
</div>
<!-- 热门模型 -->
<div class="bg-white rounded-xl shadow-sm p-6">
<div id="hotModels" class="bg-white rounded-xl shadow-sm p-6">
<h2 class="text-lg font-semibold text-gray-800 mb-4 flex items-center gap-2">
<i class="ri-cpu-line text-indigo-600"></i>
热门模型
@@ -241,8 +253,123 @@
// 搜索
async function search() {
const keyword = document.getElementById('searchInput').value.trim();
if (!keyword) return;
window.location.href = `/models?q=${encodeURIComponent(keyword)}`;
if (!keyword) {
// 清空搜索时恢复原页面
document.getElementById('searchResults').classList.add('hidden');
document.getElementById('hotModels').classList.remove('hidden');
document.getElementById('statsCards').classList.remove('hidden');
document.getElementById('categoryCards').parentElement.classList.remove('hidden');
return;
}
// 调用全局搜索 API
const res = await fetch(`/api/search?q=${encodeURIComponent(keyword)}`);
const data = await res.json();
// 显示搜索结果区域
document.getElementById('searchResults').classList.remove('hidden');
document.getElementById('searchKeyword').textContent = `"${keyword}"`;
document.getElementById('hotModels').classList.add('hidden');
// 渲染搜索结果
renderSearchResults(data, keyword);
}
// 渲染搜索结果
function renderSearchResults(data, keyword) {
const models = data.models || [];
const gpus = data.gpus || [];
const cpus = data.cpus || [];
const total = models.length + gpus.length + cpus.length;
if (total === 0) {
document.getElementById('searchContent').innerHTML = `
<div class="bg-white rounded-xl shadow-sm p-8 text-center">
<i class="ri-search-line text-4xl text-gray-300 mb-4"></i>
<p class="text-gray-500">未找到与 "${keyword}" 相关的结果</p>
</div>
`;
return;
}
let html = `<div class="bg-white rounded-xl shadow-sm p-4 mb-4 text-sm text-gray-600">找到 ${total} 条结果</div>`;
// AI模型结果
if (models.length > 0) {
html += `
<div class="bg-white rounded-xl shadow-sm p-6 mb-4">
<h3 class="font-semibold text-gray-800 mb-4 flex items-center gap-2">
<i class="ri-robot-line text-blue-500"></i>
AI模型 (${models.length})
</h3>
<div class="grid grid-cols-2 gap-3">
${models.map(m => `
<a href="/models" class="flex items-center gap-3 p-3 rounded-lg hover:bg-gray-50 transition">
<div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 font-bold text-sm">
${m.name.substring(0, 2)}
</div>
<div class="flex-1">
<div class="font-medium text-gray-800">${m.name}</div>
<div class="text-xs text-gray-500">${m.organization || ''}</div>
</div>
</a>
`).join('')}
</div>
</div>
`;
}
// GPU结果
if (gpus.length > 0) {
html += `
<div class="bg-white rounded-xl shadow-sm p-6 mb-4">
<h3 class="font-semibold text-gray-800 mb-4 flex items-center gap-2">
<i class="ri-cpu-line text-green-500"></i>
GPU显卡 (${gpus.length})
</h3>
<div class="grid grid-cols-2 gap-3">
${gpus.map(g => `
<a href="/gpus" class="flex items-center gap-3 p-3 rounded-lg hover:bg-gray-50 transition">
<div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center text-green-600 font-bold text-sm">
${g.name.substring(0, 2)}
</div>
<div class="flex-1">
<div class="font-medium text-gray-800">${g.name}</div>
<div class="text-xs text-gray-500">${g.manufacturer || ''} | ${g.memory_gb || ''}GB</div>
</div>
</a>
`).join('')}
</div>
</div>
`;
}
// CPU结果
if (cpus.length > 0) {
html += `
<div class="bg-white rounded-xl shadow-sm p-6 mb-4">
<h3 class="font-semibold text-gray-800 mb-4 flex items-center gap-2">
<i class="ri-cpu-line text-purple-500"></i>
CPU处理器 (${cpus.length})
</h3>
<div class="grid grid-cols-2 gap-3">
${cpus.map(c => `
<a href="/cpus" class="flex items-center gap-3 p-3 rounded-lg hover:bg-gray-50 transition">
<div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center text-purple-600 font-bold text-sm">
${c.name.substring(0, 2)}
</div>
<div class="flex-1">
<div class="font-medium text-gray-800">${c.name}</div>
<div class="text-xs text-gray-500">${c.manufacturer || ''} | ${c.cores || ''}核</div>
</div>
</a>
`).join('')}
</div>
</div>
`;
}
document.getElementById('searchContent').innerHTML = html;
}
// 初始化