fix: 前端导航栏改为动态加载

修复问题:
1. 顶部导航栏不显示后台新增的类别 → 改为从API动态加载
2. 前端页面移除"添加数据"按钮 → 数据由后台管理员管理
3. 前端移除"后台"入口 → 管理员直接访问/admin

templates/category.html

@@ -17,15 +17,8 @@
                     <span class="text-xl font-bold text-gray-800">ParamHub</span>
                 </a>
             </div>
-            <div class="flex gap-6 text-sm">
+            <div class="flex gap-4 text-sm" id="topNav">
-                <a href="/" class="text-gray-600 hover:text-indigo-600">首页</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>
-                <a href="/cpus" class="text-gray-600 hover:text-indigo-600">CPU</a>
-                <a href="/tools" class="text-gray-600 hover:text-indigo-600">工具</a>
-                <a href="/compare" class="text-gray-600 hover:text-indigo-600">对比</a>
-                <a href="/knowledge" class="text-gray-600 hover:text-indigo-600">知识库</a>
-                <a href="/admin" class="text-gray-600 hover:text-indigo-600">后台</a>
             </div>
         </div>
     </nav>
@@ -61,9 +54,6 @@
                     <option value="name">按名称</option>
                     <option value="created_at">按时间</option>
                 </select>
-                <a href="/admin" class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition flex items-center gap-2">
-                    <i class="ri-add-line"></i> 添加数据
-                </a>
             </div>
         </div>
 
@@ -83,6 +73,45 @@
     <script>
         const categoryId = '{{ category.id }}';
         let allItems = [];
+        let categories = [];
+
+        // 加载导航
+        async function loadNav() {
+            const res = await fetch('/api/categories');
+            categories = await res.json();
+            
+            // 内置页面映射
+            const builtinPages = [
+                {id: 'home', name: '首页', href: '/'},
+                {id: 'tools', name: '工具', href: '/tools'},
+                {id: 'compare', name: '对比', href: '/compare'},
+                {id: 'knowledge', name: '知识库', href: '/knowledge'}
+            ];
+            
+            // 内置分类映射
+            const categoryPages = {
+                'ai-models': '/models',
+                'gpus': '/gpus',
+                'cpus': '/cpus'
+            };
+            
+            let navHtml = '';
+            
+            // 先添加内置页面
+            builtinPages.forEach(p => {
+                const isActive = p.href === '/';
+                navHtml += `<a href="${p.href}" class="${isActive ? 'text-indigo-600 font-medium' : 'text-gray-600 hover:text-indigo-600'}">${p.name}</a>`;
+            });
+            
+            // 添加分类
+            categories.forEach(cat => {
+                const href = categoryPages[cat.id] || `/category/${cat.id}`;
+                const isActive = cat.id === categoryId;
+                navHtml += `<a href="${href}" class="${isActive ? 'text-indigo-600 font-medium' : 'text-gray-600 hover:text-indigo-600'}">${cat.name}</a>`;
+            });
+            
+            document.getElementById('topNav').innerHTML = navHtml;
+        }
 
         // 加载数据
         async function loadItems() {
@@ -98,18 +127,14 @@
             if (items.length === 0) {
                 document.getElementById('itemsList').innerHTML = `
                     <div class="col-span-3 text-center py-12">
-                        <i class="ri-inbox-line text-4xl text-gray-300 mb-4"></i>
+                        <i class="ri-inbox-line text-4xl text-gray-300 mb-4 block"></i>
                         <p class="text-gray-400">暂无数据</p>
-                        <a href="/admin" class="mt-4 inline-block px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700">
-                            前往后台添加
-                        </a>
                     </div>
                 `;
                 return;
             }
 
             document.getElementById('itemsList').innerHTML = items.map(item => {
-                // 动态生成字段显示
                 const fields = Object.entries(item)
                     .filter(([key, val]) => !['id', 'category_id', 'created_at', 'updated_at'].includes(key) && val)
                     .slice(0, 5)
@@ -164,6 +189,7 @@
         }
 
         // 初始化
+        loadNav();
         loadItems();
     </script>
 </body>

templates/compare.html

@@ -15,14 +15,8 @@
                 <i class="ri-dashboard-3-line text-2xl text-indigo-600"></i>
                 <span class="text-xl font-bold text-gray-800">ParamHub</span>
             </a>
-            <div class="flex gap-6 text-sm">
+            <div class="flex gap-4 text-sm" id="topNav">
-                <a href="/" class="text-gray-600 hover:text-indigo-600">首页</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>
-                <a href="/cpus" class="text-gray-600 hover:text-indigo-600">CPU</a>
-                <a href="/tools" class="text-gray-600 hover:text-indigo-600">工具</a>
-                <a href="/compare" class="text-indigo-600 font-medium">对比</a>
-                <a href="/knowledge" class="text-gray-600 hover:text-indigo-600">知识库</a>
             </div>
         </div>
     </nav>
@@ -75,7 +69,41 @@
     </main>
 
     <script>
-        let compareType = 'model';
+        let categories = [];
+
+        // 加载导航栏
+        async function loadNav() {
+            const res = await fetch('/api/categories');
+            categories = await res.json();
+
+            const builtinPages = [
+                {name: '首页', href: '/'},
+                {name: '工具', href: '/tools'},
+                {name: '对比', href: '/compare'},
+                {name: '知识库', href: '/knowledge'}
+            ];
+
+            const categoryPages = {
+                'ai-models': '/models',
+                'gpus': '/gpus',
+                'cpus': '/cpus'
+            };
+
+            let navHtml = '';
+            builtinPages.forEach(p => {
+                const isActive = window.location.pathname === p.href;
+                navHtml += `<a href="${p.href}" class="${isActive ? 'text-indigo-600 font-medium' : 'text-gray-600 hover:text-indigo-600'}">${p.name}</a>`;
+            });
+
+            categories.forEach(cat => {
+                const href = categoryPages[cat.id] || `/category/${cat.id}`;
+                const isActive = window.location.pathname === href;
+                navHtml += `<a href="${href}" class="${isActive ? 'text-indigo-600 font-medium' : 'text-gray-600 hover:text-indigo-600'}">${cat.name}</a>`;
+            });
+
+            document.getElementById('topNav').innerHTML = navHtml;
+        }
+let compareType = 'model';
         let allData = [];
 
         async function setCompareType(type) {

templates/cpus.html

@@ -15,14 +15,8 @@
                 <i class="ri-dashboard-3-line text-2xl text-indigo-600"></i>
                 <span class="text-xl font-bold text-gray-800">ParamHub</span>
             </a>
-            <div class="flex gap-6 text-sm">
+            <div class="flex gap-4 text-sm" id="topNav">
-                <a href="/" class="text-gray-600 hover:text-indigo-600">首页</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>
-                <a href="/cpus" class="text-indigo-600 font-medium">CPU</a>
-                <a href="/tools" class="text-gray-600 hover:text-indigo-600">工具</a>
-                <a href="/compare" class="text-gray-600 hover:text-indigo-600">对比</a>
-                <a href="/knowledge" class="text-gray-600 hover:text-indigo-600">知识库</a>
             </div>
         </div>
     </nav>
@@ -79,7 +73,41 @@
     </div>
 
     <script>
-        async function loadCpus() {
+        let categories = [];
+
+        // 加载导航栏
+        async function loadNav() {
+            const res = await fetch('/api/categories');
+            categories = await res.json();
+
+            const builtinPages = [
+                {name: '首页', href: '/'},
+                {name: '工具', href: '/tools'},
+                {name: '对比', href: '/compare'},
+                {name: '知识库', href: '/knowledge'}
+            ];
+
+            const categoryPages = {
+                'ai-models': '/models',
+                'gpus': '/gpus',
+                'cpus': '/cpus'
+            };
+
+            let navHtml = '';
+            builtinPages.forEach(p => {
+                const isActive = window.location.pathname === p.href;
+                navHtml += `<a href="${p.href}" class="${isActive ? 'text-indigo-600 font-medium' : 'text-gray-600 hover:text-indigo-600'}">${p.name}</a>`;
+            });
+
+            categories.forEach(cat => {
+                const href = categoryPages[cat.id] || `/category/${cat.id}`;
+                const isActive = window.location.pathname === href;
+                navHtml += `<a href="${href}" class="${isActive ? 'text-indigo-600 font-medium' : 'text-gray-600 hover:text-indigo-600'}">${cat.name}</a>`;
+            });
+
+            document.getElementById('topNav').innerHTML = navHtml;
+        }
+async function loadCpus() {
             const keyword = document.getElementById('searchInput').value.trim();
             let url = '/api/cpus';
             if (keyword) url += `?q=${encodeURIComponent(keyword)}`;

templates/gpus.html

@@ -15,14 +15,8 @@
                 <i class="ri-dashboard-3-line text-2xl text-indigo-600"></i>
                 <span class="text-xl font-bold text-gray-800">ParamHub</span>
             </a>
-            <div class="flex gap-6 text-sm">
+            <div class="flex gap-4 text-sm" id="topNav">
-                <a href="/" class="text-gray-600 hover:text-indigo-600">首页</a>
+                <!-- 动态加载 -->
-                <a href="/models" class="text-gray-600 hover:text-indigo-600">模型</a>
-                <a href="/gpus" class="text-indigo-600 font-medium">GPU</a>
-                <a href="/cpus" class="text-gray-600 hover:text-indigo-600">CPU</a>
-                <a href="/tools" class="text-gray-600 hover:text-indigo-600">工具</a>
-                <a href="/compare" class="text-gray-600 hover:text-indigo-600">对比</a>
-                <a href="/knowledge" class="text-gray-600 hover:text-indigo-600">知识库</a>
             </div>
         </div>
     </nav>
@@ -82,7 +76,41 @@
     </div>
 
     <script>
-        async function loadGpus() {
+        let categories = [];
+
+        // 加载导航栏
+        async function loadNav() {
+            const res = await fetch('/api/categories');
+            categories = await res.json();
+
+            const builtinPages = [
+                {name: '首页', href: '/'},
+                {name: '工具', href: '/tools'},
+                {name: '对比', href: '/compare'},
+                {name: '知识库', href: '/knowledge'}
+            ];
+
+            const categoryPages = {
+                'ai-models': '/models',
+                'gpus': '/gpus',
+                'cpus': '/cpus'
+            };
+
+            let navHtml = '';
+            builtinPages.forEach(p => {
+                const isActive = window.location.pathname === p.href;
+                navHtml += `<a href="${p.href}" class="${isActive ? 'text-indigo-600 font-medium' : 'text-gray-600 hover:text-indigo-600'}">${p.name}</a>`;
+            });
+
+            categories.forEach(cat => {
+                const href = categoryPages[cat.id] || `/category/${cat.id}`;
+                const isActive = window.location.pathname === href;
+                navHtml += `<a href="${href}" class="${isActive ? 'text-indigo-600 font-medium' : 'text-gray-600 hover:text-indigo-600'}">${cat.name}</a>`;
+            });
+
+            document.getElementById('topNav').innerHTML = navHtml;
+        }
+async function loadGpus() {
             const keyword = document.getElementById('searchInput').value.trim();
             let url = '/api/gpus';
             if (keyword) url += `?q=${encodeURIComponent(keyword)}`;

templates/index.html

@@ -16,15 +16,8 @@
                 <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" id="navLinks">
+            <div class="flex gap-4 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>
-                <a href="/cpus" class="text-gray-600 hover:text-indigo-600">CPU</a>
-                <a href="/tools" class="text-gray-600 hover:text-indigo-600">工具</a>
-                <a href="/compare" class="text-gray-600 hover:text-indigo-600">对比</a>
-                <a href="/knowledge" class="text-gray-600 hover:text-indigo-600">知识库</a>
-                <a href="/admin" class="text-gray-600 hover:text-indigo-600">后台</a>
             </div>
         </div>
     </nav>
@@ -91,6 +84,40 @@
             red: {bg: 'bg-red-500', gradient: 'from-red-500 to-red-600', icon: 'text-red-500'}
         };
 
+        // 加载导航栏
+        function renderNavBar() {
+            // 内置页面
+            const builtinPages = [
+                {name: '首页', href: '/'},
+                {name: '工具', href: '/tools'},
+                {name: '对比', href: '/compare'},
+                {name: '知识库', href: '/knowledge'}
+            ];
+            
+            // 内置分类映射
+            const categoryPages = {
+                'ai-models': '/models',
+                'gpus': '/gpus',
+                'cpus': '/cpus'
+            };
+            
+            let navHtml = '';
+            
+            // 先添加内置页面
+            builtinPages.forEach(p => {
+                const isActive = window.location.pathname === p.href;
+                navHtml += `<a href="${p.href}" class="${isActive ? 'text-indigo-600 font-medium' : 'text-gray-600 hover:text-indigo-600'}">${p.name}</a>`;
+            });
+            
+            // 添加分类
+            categories.forEach(cat => {
+                const href = categoryPages[cat.id] || `/category/${cat.id}`;
+                navHtml += `<a href="${href}" class="text-gray-600 hover:text-indigo-600">${cat.name}</a>`;
+            });
+            
+            document.getElementById('navLinks').innerHTML = navHtml;
+        }
+
         // 加载分类和数据统计
         async function loadData() {
             // 并行加载分类和统计
@@ -101,6 +128,9 @@
             categories = await catRes.json();
             const stats = await statsRes.json();
             
+            // 渲染导航栏
+            renderNavBar();
+            
             // 渲染统计卡片
             renderStatsCards(stats);
             

templates/knowledge.html

@@ -14,14 +14,8 @@
                 <i class="ri-dashboard-3-line text-2xl text-indigo-600"></i>
                 <span class="text-xl font-bold text-gray-800">ParamHub</span>
             </a>
-            <div class="flex gap-6 text-sm">
+            <div class="flex gap-4 text-sm" id="topNav">
-                <a href="/" class="text-gray-600 hover:text-indigo-600">首页</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>
-                <a href="/cpus" class="text-gray-600 hover:text-indigo-600">CPU</a>
-                <a href="/tools" class="text-gray-600 hover:text-indigo-600">工具</a>
-                <a href="/compare" class="text-gray-600 hover:text-indigo-600">对比</a>
-                <a href="/knowledge" class="text-indigo-600 font-medium">知识库</a>
             </div>
         </div>
     </nav>

templates/models.html

@@ -15,14 +15,8 @@
                 <i class="ri-dashboard-3-line text-2xl text-indigo-600"></i>
                 <span class="text-xl font-bold text-gray-800">ParamHub</span>
             </a>
-            <div class="flex gap-6 text-sm">
+            <div class="flex gap-4 text-sm" id="topNav">
-                <a href="/" class="text-gray-600 hover:text-indigo-600">首页</a>
+                <!-- 动态加载 -->
-                <a href="/models" class="text-indigo-600 font-medium">模型</a>
-                <a href="/gpus" class="text-gray-600 hover:text-indigo-600">GPU</a>
-                <a href="/cpus" class="text-gray-600 hover:text-indigo-600">CPU</a>
-                <a href="/tools" class="text-gray-600 hover:text-indigo-600">工具</a>
-                <a href="/compare" class="text-gray-600 hover:text-indigo-600">对比</a>
-                <a href="/knowledge" class="text-gray-600 hover:text-indigo-600">知识库</a>
             </div>
         </div>
     </nav>
@@ -101,6 +95,40 @@
 
     <script>
         let allModels = [];
+        let categories = [];
+
+        // 加载导航栏
+        async function loadNav() {
+            const res = await fetch('/api/categories');
+            categories = await res.json();
+            
+            const builtinPages = [
+                {name: '首页', href: '/'},
+                {name: '工具', href: '/tools'},
+                {name: '对比', href: '/compare'},
+                {name: '知识库', href: '/knowledge'}
+            ];
+            
+            const categoryPages = {
+                'ai-models': '/models',
+                'gpus': '/gpus',
+                'cpus': '/cpus'
+            };
+            
+            let navHtml = '';
+            builtinPages.forEach(p => {
+                const isActive = window.location.pathname === p.href;
+                navHtml += `<a href="${p.href}" class="${isActive ? 'text-indigo-600 font-medium' : 'text-gray-600 hover:text-indigo-600'}">${p.name}</a>`;
+            });
+            
+            categories.forEach(cat => {
+                const href = categoryPages[cat.id] || `/category/${cat.id}`;
+                const isActive = window.location.pathname === href;
+                navHtml += `<a href="${href}" class="${isActive ? 'text-indigo-600 font-medium' : 'text-gray-600 hover:text-indigo-600'}">${cat.name}</a>`;
+            });
+            
+            document.getElementById('topNav').innerHTML = navHtml;
+        }
 
         async function loadModels() {
             const keyword = document.getElementById('searchInput').value.trim();
@@ -234,6 +262,7 @@
         });
 
         // 初始化
+        loadNav();
         loadModels();
     </script>
 </body>

templates/tools.html

@@ -15,14 +15,8 @@
                 <i class="ri-dashboard-3-line text-2xl text-indigo-600"></i>
                 <span class="text-xl font-bold text-gray-800">ParamHub</span>
             </a>
-            <div class="flex gap-6 text-sm">
+            <div class="flex gap-4 text-sm" id="topNav">
-                <a href="/" class="text-gray-600 hover:text-indigo-600">首页</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>
-                <a href="/cpus" class="text-gray-600 hover:text-indigo-600">CPU</a>
-                <a href="/tools" class="text-indigo-600 font-medium">工具</a>
-                <a href="/compare" class="text-gray-600 hover:text-indigo-600">对比</a>
-                <a href="/knowledge" class="text-gray-600 hover:text-indigo-600">知识库</a>
             </div>
         </div>
     </nav>
@@ -144,7 +138,41 @@
     </main>
 
     <script>
-        async function calculateVram() {
+        let categories = [];
+
+        // 加载导航栏
+        async function loadNav() {
+            const res = await fetch('/api/categories');
+            categories = await res.json();
+
+            const builtinPages = [
+                {name: '首页', href: '/'},
+                {name: '工具', href: '/tools'},
+                {name: '对比', href: '/compare'},
+                {name: '知识库', href: '/knowledge'}
+            ];
+
+            const categoryPages = {
+                'ai-models': '/models',
+                'gpus': '/gpus',
+                'cpus': '/cpus'
+            };
+
+            let navHtml = '';
+            builtinPages.forEach(p => {
+                const isActive = window.location.pathname === p.href;
+                navHtml += `<a href="${p.href}" class="${isActive ? 'text-indigo-600 font-medium' : 'text-gray-600 hover:text-indigo-600'}">${p.name}</a>`;
+            });
+
+            categories.forEach(cat => {
+                const href = categoryPages[cat.id] || `/category/${cat.id}`;
+                const isActive = window.location.pathname === href;
+                navHtml += `<a href="${href}" class="${isActive ? 'text-indigo-600 font-medium' : 'text-gray-600 hover:text-indigo-600'}">${cat.name}</a>`;
+            });
+
+            document.getElementById('topNav').innerHTML = navHtml;
+        }
+async function calculateVram() {
             const params = document.getElementById('params').value;
             const precision = document.getElementById('precision').value;