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

fix: 修复后台管理多个问题

Browse Source 
修复:
1. 分类编辑功能正常工作
2. 动态生成侧边栏菜单，新增分类自动出现管理入口
3. 首页动态加载分类并展示
4. 新增动态分类数据管理API
5. 修复CPU等页面图标问题
This commit is contained in:
hubian
2026-04-09 02:32:35 +08:00
parent 420107730c
commit fc0e8c3443
4 changed files with 574 additions and 473 deletions
Download Patch File Download Diff File Expand all files Collapse all files

205
templates/index.html
View File

@@ -16,7 +16,7 @@
<span class="text-xl font-bold text-gray-800">ParamHub</span>
<span class="text-sm text-gray-500">参数百科</span>
</div>
<div class="flex gap-6 text-sm">
<div class="flex gap-6 text-sm" id="navLinks">
<a href="/" class="text-indigo-600 font-medium">首页</a>
<a href="/models" class="text-gray-600 hover:text-indigo-600">模型</a>
<a href="/gpus" class="text-gray-600 hover:text-indigo-600">GPU</a>
@@ -35,7 +35,7 @@
<div class="flex gap-4">
<div class="flex-1 relative">
<i class="ri-search-line absolute left-4 top-1/2 -translate-y-1/2 text-gray-400"></i>
<input type="text" id="searchInput" placeholder="搜索模型、GPU、CPU..."
<input type="text" id="searchInput" placeholder="搜索参数..."
class="w-full pl-12 pr-4 py-3 border border-gray-200 rounded-lg focus:outline-none focus:border-indigo-400 text-lg"
onkeyup="if(event.key==='Enter')search()">
</div>
@@ -45,70 +45,23 @@
</div>
</div>
<!-- 统计卡片 -->
<div class="grid grid-cols-3 gap-6 mb-8" id="statsCards">
<div class="bg-gradient-to-r from-blue-500 to-blue-600 rounded-xl p-6 text-white">
<div class="flex items-center gap-4">
<i class="ri-robot-line text-4xl"></i>
<div>
<div class="text-3xl font-bold" id="modelsCount">-</div>
<div class="text-sm opacity-80">AI模型</div>
</div>
</div>
</div>
<div class="bg-gradient-to-r from-green-500 to-green-600 rounded-xl p-6 text-white">
<div class="flex items-center gap-4">
<i class="ri-cpu-line text-4xl"></i>
<div>
<div class="text-3xl font-bold" id="gpusCount">-</div>
<div class="text-sm opacity-80">GPU显卡</div>
</div>
</div>
</div>
<div class="bg-gradient-to-r from-purple-500 to-purple-600 rounded-xl p-6 text-white">
<div class="flex items-center gap-4">
<i class="ri-memory-line text-4xl"></i>
<div>
<div class="text-3xl font-bold" id="cpusCount">-</div>
<div class="text-sm opacity-80">CPU处理器</div>
</div>
</div>
<!-- 统计卡片 - 动态生成 -->
<div class="grid grid-cols-4 gap-4 mb-8" id="statsCards">
<div class="text-center text-gray-400 py-8">加载中...</div>
</div>
<!-- 分类快捷入口 - 动态生成 -->
<div class="mb-8">
<h2 class="text-lg font-semibold text-gray-800 mb-4 flex items-center gap-2">
<i class="ri-folder-line text-indigo-600"></i>
参数分类
</h2>
<div id="categoryCards" class="grid grid-cols-4 gap-4">
<div class="text-center text-gray-400 py-8">加载中...</div>
</div>
</div>
<!-- 快捷入口 -->
<div class="grid grid-cols-4 gap-6 mb-8">
<a href="/models" class="bg-white rounded-xl shadow-sm p-6 hover:shadow-md transition group">
<div class="text-center">
<i class="ri-robot-line text-5xl text-blue-500 group-hover:scale-110 transition"></i>
<div class="mt-4 font-medium text-gray-800">模型数据库</div>
<div class="text-sm text-gray-500 mt-1">GPT、Llama、Claude...</div>
</div>
</a>
<a href="/gpus" class="bg-white rounded-xl shadow-sm p-6 hover:shadow-md transition group">
<div class="text-center">
<i class="ri-cpu-line text-5xl text-green-500 group-hover:scale-110 transition"></i>
<div class="mt-4 font-medium text-gray-800">GPU数据库</div>
<div class="text-sm text-gray-500 mt-1">H100、A100、4090...</div>
</div>
</a>
<a href="/tools" class="bg-white rounded-xl shadow-sm p-6 hover:shadow-md transition group">
<div class="text-center">
<i class="ri-calculator-line text-5xl text-orange-500 group-hover:scale-110 transition"></i>
<div class="mt-4 font-medium text-gray-800">实用工具</div>
<div class="text-sm text-gray-500 mt-1">显存计算器...</div>
</div>
</a>
<a href="/compare" class="bg-white rounded-xl shadow-sm p-6 hover:shadow-md transition group">
<div class="text-center">
<i class="ri-git-merge-line text-5xl text-purple-500 group-hover:scale-110 transition"></i>
<div class="mt-4 font-medium text-gray-800">对比工具</div>
<div class="text-sm text-gray-500 mt-1">多维度对比</div>
</div>
</a>
</div>
<!-- 最新模型 -->
<!-- 热门模型 -->
<div 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-flashlight-line text-indigo-600"></i>
@@ -126,43 +79,123 @@
</footer>
<script>
// 加载统计数据
async function loadStats() {
const res = await fetch('/api/stats');
const data = await res.json();
let categories = [];
const colorMap = {
blue: {bg: 'bg-blue-500', gradient: 'from-blue-500 to-blue-600', icon: 'text-blue-500'},
green: {bg: 'bg-green-500', gradient: 'from-green-500 to-green-600', icon: 'text-green-500'},
purple: {bg: 'bg-purple-500', gradient: 'from-purple-500 to-purple-600', icon: 'text-purple-500'},
orange: {bg: 'bg-orange-500', gradient: 'from-orange-500 to-orange-600', icon: 'text-orange-500'},
teal: {bg: 'bg-teal-500', gradient: 'from-teal-500 to-teal-600', icon: 'text-teal-500'},
red: {bg: 'bg-red-500', gradient: 'from-red-500 to-red-600', icon: 'text-red-500'}
};
// 加载分类和数据统计
async function loadData() {
// 并行加载分类和统计
const [catRes, statsRes] = await Promise.all([
fetch('/api/categories'),
fetch('/api/stats')
]);
categories = await catRes.json();
const stats = await statsRes.json();
document.getElementById('modelsCount').textContent = data.models_count;
document.getElementById('gpusCount').textContent = data.gpus_count;
document.getElementById('cpusCount').textContent = data.cpus_count;
// 渲染统计卡片
renderStatsCards(stats);
// 最新模型
if (data.latest_models && data.latest_models.length > 0) {
const html = data.latest_models.map(m => `
<a href="/models" class="flex items-center gap-4 p-4 rounded-lg hover:bg-gray-50 transition">
<div class="w-12 h-12 rounded-full bg-indigo-100 flex items-center justify-center text-indigo-600 font-bold">
${m.name.substring(0, 2)}
// 渲染分类卡片
renderCategoryCards();
// 渲染热门模型
renderLatestModels(stats.latest_models || []);
}
// 渲染统计卡片
function renderStatsCards(stats) {
const statItems = [
{key: 'models_count', label: 'AI模型', icon: 'ri-robot-line', color: 'blue'},
{key: 'gpus_count', label: 'GPU显卡', icon: 'ri-cpu-line', color: 'green'},
{key: 'cpus_count', label: 'CPU处理器', icon: 'ri-memory-line', color: 'purple'},
{key: 'knowledge_count', label: '知识条目', icon: 'ri-book-open-line', color: 'teal'}
];
document.getElementById('statsCards').innerHTML = statItems.map(item => {
const c = colorMap[item.color] || colorMap.blue;
return `
<div class="bg-gradient-to-r ${c.gradient} rounded-xl p-5 text-white">
<div class="flex items-center gap-3">
<i class="${item.icon} text-3xl opacity-80"></i>
<div>
<div class="text-2xl font-bold">${stats[item.key] || 0}</div>
<div class="text-sm opacity-80">${item.label}</div>
</div>
</div>
<div class="flex-1">
<div class="font-medium text-gray-800">${m.name}</div>
<div class="text-sm text-gray-500">${m.organization} | ${m.parameters}B参数</div>
</div>
<div class="text-sm text-gray-400">${m.is_open_source ? '开源' : '商业'}</div>
</a>
`).join('');
document.getElementById('latestModels').innerHTML = html;
</div>
`;
}).join('');
}
// 渲染分类卡片
function renderCategoryCards() {
if (categories.length === 0) {
document.getElementById('categoryCards').innerHTML = '<div class="col-span-4 text-center text-gray-400 py-8">暂无分类</div>';
return;
}
// 内置页面映射
const pageMap = {
'ai-models': '/models',
'gpus': '/gpus',
'cpus': '/cpus'
};
document.getElementById('categoryCards').innerHTML = categories.map(cat => {
const c = colorMap[cat.color] || colorMap.blue;
const link = pageMap[cat.id] || `/category/${cat.id}`;
return `
<a href="${link}" class="bg-white rounded-xl shadow-sm p-5 hover:shadow-md transition group">
<div class="text-center">
<div class="w-14 h-14 rounded-xl ${c.bg} bg-opacity-10 flex items-center justify-center mx-auto group-hover:scale-110 transition">
<i class="${cat.icon} text-3xl ${c.icon}"></i>
</div>
<div class="mt-3 font-medium text-gray-800">${cat.name}</div>
<div class="text-xs text-gray-500 mt-1 truncate">${cat.description || ''}</div>
</div>
</a>
`;
}).join('');
}
// 渲染热门模型
function renderLatestModels(models) {
if (models.length === 0) {
document.getElementById('latestModels').innerHTML = '<div class="col-span-2 text-center text-gray-400 py-8">暂无数据</div>';
return;
}
document.getElementById('latestModels').innerHTML = models.map(m => `
<a href="/models" class="flex items-center gap-4 p-4 rounded-lg hover:bg-gray-50 transition">
<div class="w-12 h-12 rounded-full bg-indigo-100 flex items-center justify-center text-indigo-600 font-bold">
${m.name.substring(0, 2)}
</div>
<div class="flex-1">
<div class="font-medium text-gray-800">${m.name}</div>
<div class="text-sm text-gray-500">${m.organization} | ${m.parameters}B参数</div>
</div>
<div class="text-sm text-gray-400">${m.is_open_source ? '开源' : '商业'}</div>
</a>
`).join('');
}
// 搜索
async function search() {
const keyword = document.getElementById('searchInput').value.trim();
if (!keyword) return;
window.location.href = `/models?q=${encodeURIComponent(keyword)}`;
}
// 初始化
loadStats();
loadData();
</script>
</body>
</html>