feat: 发布日期、热度、置顶、图片上传功能

- 新增发布日期(publish_date)、热度(views)、置顶(is_pinned)字段 - 后台管理表格显示新字段和置顶操作按钮 - 前端默认排序：置顶优先 → 发布日期最新 - 新增多种排序选项：发布日期、热度、名称等 - 新增图片上传API（支持多图上传） - 后台管理表单添加图片上传组件（支持文件选择和粘贴） - 数据创建时自动初始化新字段
feat: 知识库数据添加显示开关功能
2026-04-20 21:25:57 +08:00 · 2026-04-11 02:32:10 +08:00 · 2026-04-11 02:27:21 +08:00 · 2026-04-11 02:12:55 +08:00 · 2026-04-11 02:06:06 +08:00 · 2026-04-11 02:00:20 +08:00
16 changed files with 3275 additions and 214 deletions
--- a/app.py
+++ b/app.py
--- a/data/categories.json
+++ b/data/categories.json
@@ -0,0 +1,52 @@
+[
+  {
+    "id": "ai-models",
+    "name": "AI模型",
+    "icon": "ri-robot-line",
+    "color": "blue",
+    "description": "大语言模型、图像模型等AI模型参数",
+    "order": 1
+  },
+  {
+    "id": "gpus",
+    "name": "GPU显卡",
+    "icon": "ri-cpu-line",
+    "color": "green",
+    "description": "NVIDIA、AMD等GPU显卡规格参数",
+    "order": 2
+  },
+  {
+    "id": "cpus",
+    "name": "CPU处理器",
+    "icon": "ri-cpu-line",
+    "color": "purple",
+    "description": "Intel、AMD等CPU处理器参数",
+    "order": 3
+  },
+  {
+    "id": "phones",
+    "name": "手机",
+    "icon": "ri-smartphone-line",
+    "color": "orange",
+    "description": "各品牌手机参数规格",
+    "order": 4,
+    "visible": false
+  },
+  {
+    "id": "laptops",
+    "name": "电脑",
+    "icon": "ri-macbook-line",
+    "color": "teal",
+    "description": "笔记本电脑、台式机参数",
+    "order": 5
+  },
+  {
+    "id": "021dc76d36be",
+    "name": "汽车",
+    "icon": "ri-car-line",
+    "color": "red",
+    "order": 6,
+    "description": "汽车方面",
+    "created_at": "2026-04-09 10:09:01"
+  }
+]
--- a/data/config.json
+++ b/data/config.json
@@ -0,0 +1,10 @@
+{
+  "site_name": "ParamHub",
+  "site_subtitle": "参数百科",
+  "footer_text": "ParamHub - 模型与硬件参数速查平台",
+  "icp_number": "",
+  "copyright_year": "2026",
+  "contact_email": "wlq@tphai.com",
+  "github_url": "",
+  "updated_at": "2026-04-11 02:28:39"
+}
--- a/data/items_021dc76d36be.json
+++ b/data/items_021dc76d36be.json
@@ -0,0 +1,34 @@
+[
+  {
+    "name": "比亚迪宋plus dmi 2021款",
+    "brand": "比亚迪",
+    "price": "18.87",
+    "year": "2021",
+    "category_id": "021dc76d36be",
+    "id": "3d20dbcd4bdd",
+    "created_at": "2026-04-09 10:09:56"
+  },
+  {
+    "name": "秦PLUS",
+    "brand": "比亚迪",
+    "price": 5.98,
+    "specs": {
+      "长宽高": "4780*1837*1515mm",
+      "轴距": "2718mm",
+      "前轮距": "1580mm",
+      "后轮距": "1590mm",
+      "轮胎规格": "225/60 R16",
+      "发动机": "1.5L 101马力 L4",
+      "最大功率": "74kW",
+      "最大扭矩": "126N·m",
+      "变速器": "E-CVT无级变速器",
+      "中控屏幕尺寸": "10.1英寸"
+    },
+    "description": "秦PLUS是一款外观设计极具现代感和运动气息的车型，采用家族化设计语言，配备大尺寸进气格栅和锐利LED大灯。车身线条流畅，内饰简洁大气，配备10.1英寸中控屏和语音识别系统。搭载1.5L发动机和E-CVT变速器，提供平稳动力输出和低油耗。内部空间宽敞，座椅舒适，支持多种调节功能。",
+    "id": "b78fc7983a70",
+    "category_id": "021dc76d36be",
+    "created_at": "2026-04-11 02:03:45",
+    "visible": true,
+    "raw_text": "秦PLUS的外观设计极具现代感和运动气息，前脸采用了家族化设计语言，标志性的大尺寸进气格栅占据了前脸的大部分空间，搭配锐利的LED大灯组，营造出强烈的视觉冲击力。车身线条流畅，腰线从车头贯穿至车尾，增强了整车的运动感。车尾部分，简洁大方的设计与前脸相呼应，整体风格时尚而不失稳重。\n\n上海：秦PLUS优惠促销，最新报价5.98万！轻松开新车\n\n秦PLUS拥有4780*1837*1515mm的长宽高尺寸和2718mm的轴距，赋予其宽敞的内部空间。车侧线条流畅且动感十足，从前轮距1580mm到后轮距1590mm，车轮布局合理，增强了车辆的稳定性和操控性。配备的225/60 R16轮胎规格，匹配独特风格的轮圈，为车辆增添了一抹动感与时尚的气息。\n\n上海：秦PLUS优惠促销，最新报价5.98万！轻松开新车\n\n秦PLUS的内饰风格简洁大气，给人以科技感和舒适感。中控台布局合理，配备了10.1英寸的中控屏幕，支持语音识别控制系统，可轻松操作多媒体系统、导航、电话和空调等功能。方向盘采用皮质材料，手感舒适，支持手动上下和前后调节，方便驾驶员调整到最佳驾驶姿势。座椅采用仿皮材质，主驾驶座椅具备前后调节、靠背调节和高低调节功能，而副驾驶座椅则支持前后调节和靠背调节，确保了乘客的舒适度。后排座椅可以按比例放倒，增加储物空间，同时，车内还配备了USB和Type-C接口，方便乘客为电子设备充电。\n\n上海：秦PLUS优惠促销，最新报价5.98万！轻松开新车\n\n秦PLUS搭载了一台1.5L 101马力的L4发动机，最大功率为74kW，最大扭矩为126N·m。与之匹配的是E-CVT无级变速器，这使得车辆在提供平稳的动力输出的同时，还能有效降低油耗。\n\n汽车之家车主@天艺风云 表示，外观设计是他当初选择秦PLUS的原因之一。他赞赏整体造型时尚大气，龙脸设计搭配犀利的大灯，辨识度极高。车身线条流畅，溜背式造型增添了几分运动感。全新的“龙鳞辉熠”格栅，精致又霸气，每次停车都有人问这是什么车，外观确实很吸引人。"
+  }
+]
--- a/data/knowledge.json
+++ b/data/knowledge.json
@@ -0,0 +1,9 @@
+[
+  {"id": "k001", "title": "什么是参数量？", "category": "ai-models", "icon": "ri-calculator-line", "content": "参数量（Parameters）是衡量大模型规模的指标，表示模型中权重参数的数量。例如 GPT-3 有 175B 参数，即约1750亿个参数。", "detail": "参数量决定了模型的容量和表达能力。一般来说，参数量越大，模型能力越强，但也需要更多计算资源。\n\n常见规模分类：\n- 小模型：<1B (适合边缘设备)\n- 中模型：1B-10B (消费级GPU可运行)\n- 大模型：10B-100B (需要多GPU)\n- 超大模型：>100B (需要数据中心)", "order": 1},
+  {"id": "k002", "title": "什么是上下文长度？", "category": "ai-models", "icon": "ri-text-wrap", "content": "上下文长度（Context Length）是模型能处理的输入文本最大长度。更长的上下文意味着模型可以理解更长的文档或对话历史。", "detail": "常见长度：\n- 4K：传统长度，适合简单对话\n- 32K：中等长度，适合长文档\n- 128K：超长上下文，如GPT-4 Turbo\n- 200K：Claude 3的极限长度", "order": 2},
+  {"id": "k003", "title": "什么是量化？", "category": "ai-models", "icon": "ri-scales-3-line", "content": "量化（Quantization）是将模型参数从高精度转换为低精度，减少显存占用和计算量。如FP16→INT8→INT4，精度损失可控，资源节省显著。", "detail": "量化效果：\n- FP32→FP16: 显存减半，精度基本不变\n- FP16→INT8: 显存再减半，精度略降\n- INT8→INT4: 显存再减半，需特殊技术\n\n推荐工具：llama.cpp、GPTQ、AWQ等", "order": 3},
+  {"id": "k004", "title": "什么是MMLU？", "category": "ai-models", "icon": "ri-bar-chart-box-line", "content": "MMLU（Massive Multitask Language Understanding）是评估大模型综合能力的标准测试集，覆盖57个学科领域。", "detail": "分数参考：\n- 60-70%：入门级，如GPT-3\n- 70-80%：中等水平，如Llama 2 70B\n- 80-90%：优秀水平，如GPT-4、Claude 3", "order": 4},
+  {"id": "k005", "title": "如何计算显存需求？", "category": "gpus", "icon": "ri-memory-line", "content": "模型显存需求 ≈ 参数量 × 每参数字节数 × 1.3（含KV Cache开销）", "detail": "计算公式：\n- FP32: 参数量 × 4字节 × 1.3\n- FP16: 参数量 × 2字节 × 1.3\n- INT8: 参数量 × 1字节 × 1.3\n- INT4: 参数量 × 0.5字节 × 1.3\n\n例如：7B模型FP16加载需要约 7 × 2 × 1.3 ≈ 18GB显存", "order": 1},
+  {"id": "k006", "title": "GPU架构演进", "category": "gpus", "icon": "ri-history-line", "content": "NVIDIA GPU架构从Fermi到Hopper，每一代都有显著提升。了解架构有助于选择合适的GPU。", "detail": "主要架构：\n- Volta (2017): V100, 引入Tensor Core\n- Turing (2018): RTX 20系列, RT Core\n- Ampere (2020): A100, RTX 30系列\n- Hopper (2022): H100, FP8支持\n- Ada Lovelace (2022): RTX 40系列, L40S", "order": 2},
+  {"id": "k007", "title": "CPU核心数选择", "category": "cpus", "icon": "ri-database-2-line", "content": "CPU核心数的选择取决于应用场景。更多核心适合并行任务，但单核性能也很重要。", "detail": "场景推荐：\n- 办公/日常：4-6核足够\n- 开发/编译：8-16核\n- 服务器/虚拟化：16-64核\n- 高性能计算：64核以上\n\n注意：AI训练主要依赖GPU，CPU主要用于数据预处理", "order": 1}
+]
--- a/data/models.json
+++ b/data/models.json
@@ -1,14 +1,195 @@
 [
-  {"id": "gpt4", "name": "GPT-4", "organization": "OpenAI", "parameters": 1760, "architecture": "Transformer", "context_length": 8192, "input_price": 0.03, "output_price": 0.06, "mmlu": 86.4, "humaneval": 67.0, "is_open_source": false, "license": "Proprietary", "description": "OpenAI最强大的多模态大模型", "created_at": "2024-01-01"},
-  {"id": "gpt4turbo", "name": "GPT-4 Turbo", "organization": "OpenAI", "parameters": 1760, "architecture": "Transformer", "context_length": 128000, "input_price": 0.01, "output_price": 0.03, "mmlu": 86.4, "humaneval": 67.0, "is_open_source": false, "license": "Proprietary", "description": "GPT-4增强版，128K上下文", "created_at": "2024-01-01"},
-  {"id": "gpt35", "name": "GPT-3.5 Turbo", "organization": "OpenAI", "parameters": 175, "architecture": "Transformer", "context_length": 16385, "input_price": 0.0005, "output_price": 0.0015, "mmlu": 70.0, "humaneval": 48.1, "is_open_source": false, "license": "Proprietary", "description": "性价比高的通用模型", "created_at": "2024-01-01"},
-  {"id": "claude3opus", "name": "Claude 3 Opus", "organization": "Anthropic", "parameters": 400, "architecture": "Transformer", "context_length": 200000, "input_price": 0.015, "output_price": 0.075, "mmlu": 86.8, "humaneval": 84.9, "is_open_source": false, "license": "Proprietary", "description": "Anthropic最强模型，200K上下文", "created_at": "2024-01-01"},
-  {"id": "claude3sonnet", "name": "Claude 3 Sonnet", "organization": "Anthropic", "parameters": 175, "architecture": "Transformer", "context_length": 200000, "input_price": 0.003, "output_price": 0.015, "mmlu": 79.0, "humaneval": 73.0, "is_open_source": false, "license": "Proprietary", "description": "平衡性能与成本", "created_at": "2024-01-01"},
-  {"id": "llama270b", "name": "Llama 2 70B", "organization": "Meta", "parameters": 70, "architecture": "Transformer", "context_length": 4096, "input_price": 0, "output_price": 0, "mmlu": 69.8, "humaneval": 29.9, "is_open_source": true, "license": "Llama 2 Community", "description": "Meta开源大模型，70B参数", "created_at": "2024-01-01"},
-  {"id": "llama3", "name": "Llama 3 70B", "organization": "Meta", "parameters": 70, "architecture": "Transformer", "context_length": 8192, "input_price": 0, "output_price": 0, "mmlu": 82.0, "humaneval": 81.7, "is_open_source": true, "license": "Llama 3 Community", "description": "Meta最新开源模型，性能接近GPT-4", "created_at": "2024-01-01"},
-  {"id": "mistral7b", "name": "Mistral 7B", "organization": "Mistral AI", "parameters": 7, "architecture": "Transformer", "context_length": 32768, "input_price": 0, "output_price": 0, "mmlu": 62.5, "humaneval": 26.8, "is_open_source": true, "license": "Apache 2.0", "description": "小巧高效的开源模型", "created_at": "2024-01-01"},
-  {"id": "mixtral8x7b", "name": "Mixtral 8x7B", "organization": "Mistral AI", "parameters": 47, "architecture": "MoE", "context_length": 32768, "input_price": 0, "output_price": 0, "mmlu": 70.6, "humaneval": 40.2, "is_open_source": true, "license": "Apache 2.0", "description": "MoE架构，高效推理", "created_at": "2024-01-01"},
-  {"id": "qwen72b", "name": "Qwen 72B", "organization": "Alibaba", "parameters": 72, "architecture": "Transformer", "context_length": 32768, "input_price": 0, "output_price": 0, "mmlu": 83.1, "humaneval": 65.4, "is_open_source": true, "license": "Apache 2.0", "description": "阿里开源大模型，中文能力强", "created_at": "2024-01-01"},
-  {"id": "deepseekv3", "name": "DeepSeek V3", "organization": "DeepSeek", "parameters": 685, "architecture": "MoE", "context_length": 128000, "input_price": 0.00014, "output_price": 0.00028, "mmlu": 88.5, "humaneval": 86.2, "is_open_source": true, "license": "MIT", "description": "DeepSeek最新模型，性价比极高", "created_at": "2024-01-01"},
-  {"id": "glm4", "name": "GLM-4", "organization": "Zhipu AI", "parameters": 130, "architecture": "Transformer", "context_length": 128000, "input_price": 0.014, "output_price": 0.014, "mmlu": 81.0, "humaneval": 70.0, "is_open_source": false, "license": "Proprietary", "description": "智谱AI大模型，中文能力强", "created_at": "2024-01-01"}
+  {
+    "id": "gpt4",
+    "name": "GPT-4",
+    "organization": "OpenAI",
+    "parameters": 1760,
+    "architecture": "Transformer",
+    "context_length": 8192,
+    "input_price": 0.03,
+    "output_price": 0.06,
+    "mmlu": 86.4,
+    "humaneval": 67.0,
+    "is_open_source": false,
+    "license": "Proprietary",
+    "description": "OpenAI最强大的多模态大模型",
+    "created_at": "2024-01-01"
+  },
+  {
+    "id": "gpt4turbo",
+    "name": "GPT-4 Turbo",
+    "organization": "OpenAI",
+    "parameters": 1760,
+    "architecture": "Transformer",
+    "context_length": 128000,
+    "input_price": 0.01,
+    "output_price": 0.03,
+    "mmlu": 86.4,
+    "humaneval": 67.0,
+    "is_open_source": false,
+    "license": "Proprietary",
+    "description": "GPT-4增强版，128K上下文",
+    "created_at": "2024-01-01"
+  },
+  {
+    "id": "gpt35",
+    "name": "GPT-3.5 Turbo",
+    "organization": "OpenAI",
+    "parameters": 175,
+    "architecture": "Transformer",
+    "context_length": 16385,
+    "input_price": 0.0005,
+    "output_price": 0.0015,
+    "mmlu": 70.0,
+    "humaneval": 48.1,
+    "is_open_source": false,
+    "license": "Proprietary",
+    "description": "性价比高的通用模型",
+    "created_at": "2024-01-01"
+  },
+  {
+    "id": "claude3opus",
+    "name": "Claude 3 Opus",
+    "organization": "Anthropic",
+    "parameters": 400,
+    "architecture": "Transformer",
+    "context_length": 200000,
+    "input_price": 0.015,
+    "output_price": 0.075,
+    "mmlu": 86.8,
+    "humaneval": 84.9,
+    "is_open_source": false,
+    "license": "Proprietary",
+    "description": "Anthropic最强模型，200K上下文",
+    "created_at": "2024-01-01"
+  },
+  {
+    "id": "claude3sonnet",
+    "name": "Claude 3 Sonnet",
+    "organization": "Anthropic",
+    "parameters": 175,
+    "architecture": "Transformer",
+    "context_length": 200000,
+    "input_price": 0.003,
+    "output_price": 0.015,
+    "mmlu": 79.0,
+    "humaneval": 73.0,
+    "is_open_source": false,
+    "license": "Proprietary",
+    "description": "平衡性能与成本",
+    "created_at": "2024-01-01"
+  },
+  {
+    "id": "llama270b",
+    "name": "Llama 2 70B",
+    "organization": "Meta",
+    "parameters": 70,
+    "architecture": "Transformer",
+    "context_length": 4096,
+    "input_price": 0,
+    "output_price": 0,
+    "mmlu": 69.8,
+    "humaneval": 29.9,
+    "is_open_source": true,
+    "license": "Llama 2 Community",
+    "description": "Meta开源大模型，70B参数",
+    "created_at": "2024-01-01"
+  },
+  {
+    "id": "llama3",
+    "name": "Llama 3 70B",
+    "organization": "Meta",
+    "parameters": 70,
+    "architecture": "Transformer",
+    "context_length": 8192,
+    "input_price": 0,
+    "output_price": 0,
+    "mmlu": 82.0,
+    "humaneval": 81.7,
+    "is_open_source": true,
+    "license": "Llama 3 Community",
+    "description": "Meta最新开源模型，性能接近GPT-4",
+    "created_at": "2024-01-01"
+  },
+  {
+    "id": "mistral7b",
+    "name": "Mistral 7B",
+    "organization": "Mistral AI",
+    "parameters": 7,
+    "architecture": "Transformer",
+    "context_length": 32768,
+    "input_price": 0,
+    "output_price": 0,
+    "mmlu": 62.5,
+    "humaneval": 26.8,
+    "is_open_source": true,
+    "license": "Apache 2.0",
+    "description": "小巧高效的开源模型",
+    "created_at": "2024-01-01"
+  },
+  {
+    "id": "mixtral8x7b",
+    "name": "Mixtral 8x7B",
+    "organization": "Mistral AI",
+    "parameters": 47,
+    "architecture": "MoE",
+    "context_length": 32768,
+    "input_price": 0,
+    "output_price": 0,
+    "mmlu": 70.6,
+    "humaneval": 40.2,
+    "is_open_source": true,
+    "license": "Apache 2.0",
+    "description": "MoE架构，高效推理",
+    "created_at": "2024-01-01"
+  },
+  {
+    "id": "qwen72b",
+    "name": "Qwen 72B",
+    "organization": "Alibaba",
+    "parameters": 72,
+    "architecture": "Transformer",
+    "context_length": 32768,
+    "input_price": 0,
+    "output_price": 0,
+    "mmlu": 83.1,
+    "humaneval": 65.4,
+    "is_open_source": true,
+    "license": "Apache 2.0",
+    "description": "阿里开源大模型，中文能力强",
+    "created_at": "2024-01-01"
+  },
+  {
+    "id": "deepseekv3",
+    "name": "DeepSeek V3",
+    "organization": "DeepSeek",
+    "parameters": 685,
+    "architecture": "MoE",
+    "context_length": 128000,
+    "input_price": 0.00014,
+    "output_price": 0.00028,
+    "mmlu": 88.5,
+    "humaneval": 86.2,
+    "is_open_source": true,
+    "license": "MIT",
+    "description": "DeepSeek最新模型，性价比极高",
+    "created_at": "2024-01-01"
+  },
+  {
+    "id": "glm4",
+    "name": "GLM-4",
+    "organization": "Zhipu AI",
+    "parameters": 130,
+    "architecture": "Transformer",
+    "context_length": 128000,
+    "input_price": 0.014,
+    "output_price": 0.014,
+    "mmlu": 81.0,
+    "humaneval": 70.0,
+    "is_open_source": false,
+    "license": "Proprietary",
+    "description": "智谱AI大模型，中文能力强",
+    "created_at": "2024-01-01",
+    "visible": true
+  }
 ]
--- a/static/favicon.svg
+++ b/static/favicon.svg
@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+  <!-- 背景 -->
+  <rect x="2" y="2" width="28" height="28" rx="6" fill="#4f46e5"/>
+  <!-- 数据网格 -->
+  <rect x="6" y="6" width="8" height="8" rx="2" fill="white"/>
+  <rect x="18" y="6" width="8" height="8" rx="2" fill="white"/>
+  <rect x="6" y="18" width="8" height="8" rx="2" fill="white"/>
+  <rect x="18" y="18" width="8" height="8" rx="2" fill="white"/>
+  <!-- 连接线 -->
+  <line x1="14" y1="10" x2="18" y2="10" stroke="#4f46e5" stroke-width="2"/>
+  <line x1="10" y1="14" x2="10" y2="18" stroke="#4f46e5" stroke-width="2"/>
+  <line x1="22" y1="14" x2="22" y2="18" stroke="#4f46e5" stroke-width="2"/>
+  <line x1="14" y1="22" x2="18" y2="22" stroke="#4f46e5" stroke-width="2"/>
+</svg>
--- a/templates/admin.html
+++ b/templates/admin.html
--- a/templates/category.html
+++ b/templates/category.html
@@ -0,0 +1,199 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>ParamHub - 参数百科</title>
+    <link rel="icon" type="image/svg+xml" href="/static/favicon.svg">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link href="https://cdn.jsdelivr.net/npm/remixicon@3.5.0/fonts/remixicon.css" rel="stylesheet">
+</head>
+<body class="bg-gray-50 min-h-screen">
+    <!-- 导航栏 -->
+    <nav class="bg-white shadow-sm sticky top-0 z-50">
+        <div class="max-w-7xl mx-auto px-4 py-3 flex justify-between items-center">
+            <div class="flex items-center gap-2">
+                <a href="/" class="flex items-center gap-2">
+                    <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>
+            <div class="flex gap-4 text-sm" id="topNav">
+                <!-- 动态加载 -->
+            </div>
+        </div>
+    </nav>
+
+    <!-- 主内容 -->
+    <main class="max-w-7xl mx-auto px-4 py-8">
+        <!-- 分类标题 -->
+        <div class="bg-white rounded-xl shadow-sm p-6 mb-6">
+            <div class="flex items-center gap-4">
+                <div class="w-16 h-16 rounded-xl bg-indigo-100 flex items-center justify-center">
+                    <i class="{{ category.icon or 'ri-folder-line' }} text-3xl text-indigo-600"></i>
+                </div>
+                <div>
+                    <h1 class="text-2xl font-bold text-gray-800">{{ category.name }}</h1>
+                    <p class="text-gray-500 mt-1">{{ category.description or '参数数据' }}</p>
+                </div>
+                <div class="ml-auto">
+                    <span class="text-sm text-gray-400">共 <span id="itemCount">0</span> 条数据</span>
+                </div>
+            </div>
+        </div>
+
+        <!-- 搜索和筛选 -->
+        <div class="bg-white rounded-xl shadow-sm p-4 mb-6">
+            <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="搜索..."
+                        class="w-full pl-12 pr-4 py-2 border border-gray-200 rounded-lg focus:outline-none focus:border-indigo-400"
+                        onkeyup="filterItems()">
+                </div>
+                <select id="sortBy" onchange="loadItems()" class="px-4 py-2 border border-gray-200 rounded-lg focus:outline-none">
+                    <option value="default">默认排序（置顶优先）</option>
+                    <option value="publish_date">按发布日期</option>
+                    <option value="views">按热度</option>
+                    <option value="name">按名称</option>
+                    <option value="created_at">按创建时间</option>
+                </select>
+                <select id="sortOrder" onchange="loadItems()" class="px-4 py-2 border border-gray-200 rounded-lg focus:outline-none">
+                    <option value="desc">降序</option>
+                    <option value="asc">升序</option>
+                </select>
+            </div>
+        </div>
+
+        <!-- 数据列表 -->
+        <div class="bg-white rounded-xl shadow-sm p-6">
+            <div id="itemsList" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+                <div class="text-center text-gray-400 py-8">加载中...</div>
+            </div>
+        </div>
+    </main>
+
+    <!-- 页脚 -->
+    <footer class="bg-white border-t mt-8 py-6 text-center text-gray-500 text-sm">
+        ParamHub - 参数百科
+    </footer>
+
+    <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() {
+            const sortBy = document.getElementById('sortBy').value;
+            const sortOrder = document.getElementById('sortOrder').value;
+            const res = await fetch(`/api/items/${categoryId}?sort=${sortBy}&order=${sortOrder}`);
+            allItems = await res.json();
+            
+            document.getElementById('itemCount').textContent = allItems.length;
+            renderItems(allItems);
+        }
+
+        // 渲染数据
+        function renderItems(items) {
+            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 block"></i>
+                        <p class="text-gray-400">暂无数据</p>
+                    </div>
+                `;
+                return;
+            }
+
+            document.getElementById('itemsList').innerHTML = items.map(item => {
+                const fields = Object.entries(item)
+                    .filter(([key, val]) => !['id', 'category_id', 'created_at', 'updated_at', 'visible', 'is_pinned', 'views', 'publish_date'].includes(key) && val)
+                    .slice(0, 5)
+                    .map(([key, val]) => `<span class="text-gray-500 text-sm">${key}: ${val}</span>`)
+                    .join('<br>');
+
+                return `
+                    <div class="border border-gray-200 rounded-lg p-4 hover:shadow-md transition group ${item.is_pinned ? 'bg-yellow-50 border-yellow-300' : ''}">
+                        <div class="flex items-start justify-between">
+                            <div>
+                                <h3 class="font-medium text-gray-800 group-hover:text-indigo-600 flex items-center gap-2">
+                                    ${item.is_pinned ? '<i class="ri-pushpin-fill text-yellow-500" title="置顶"></i>' : ''}
+                                    ${item.name || item.title || '未命名'}
+                                </h3>
+                                <div class="mt-2 space-y-1">
+                                    ${fields}
+                                </div>
+                            </div>
+                            <div class="text-right">
+                                <div class="text-xs text-gray-400">
+                                    ${item.publish_date || (item.created_at ? item.created_at.split(' ')[0] : '')}
+                                </div>
+                                ${item.views ? `<div class="text-xs text-gray-400 mt-1"><i class="ri-eye-line"></i> ${item.views}</div>` : ''}
+                            </div>
+                        </div>
+                    </div>
+                `;
+            }).join('');
+        }
+
+        // 搜索过滤
+        function filterItems() {
+            const keyword = document.getElementById('searchInput').value.trim().toLowerCase();
+            if (!keyword) {
+                renderItems(allItems);
+                return;
+            }
+
+            const filtered = allItems.filter(item => {
+                return Object.values(item).some(val => 
+                    String(val).toLowerCase().includes(keyword)
+                );
+            });
+            renderItems(filtered);
+        }
+
+        // 初始化
+        loadNav();
+        loadItems();
+    </script>
+</body>
+</html>
--- a/templates/compare.html
+++ b/templates/compare.html
@@ -3,7 +3,8 @@
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>对比工具 - ParamHub</title>
+    <title>ParamHub - 参数百科</title>
+    <link rel="icon" type="image/svg+xml" href="/static/favicon.svg">
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/remixicon@3.5.0/fonts/remixicon.css" rel="stylesheet">
 </head>
@@ -15,14 +16,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">
-                <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 class="flex gap-4 text-sm" id="topNav">
+                <!-- 动态加载 -->
            </div>
        </div>
    </nav>
@@ -46,7 +41,7 @@
                    <i class="ri-cpu-line mr-2"></i>GPU对比
                </button>
                <button onclick="setCompareType('cpu')" id="btnCpu" class="px-4 py-2 bg-gray-200 text-gray-600 rounded-lg hover:bg-gray-300">
-                    <i class="ri-memory-line mr-2"></i>CPU对比
+                    <i class="ri-cpu-line mr-2"></i>CPU对比
                </button>
            </div>
        </div>
@@ -75,7 +70,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) {
@@ -202,6 +231,7 @@
        }

        // 初始化
+        loadNav();
        setCompareType('model');
    </script>
 </body>
--- a/templates/cpus.html
+++ b/templates/cpus.html
@@ -3,7 +3,8 @@
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>CPU数据库 - ParamHub</title>
+    <title>ParamHub - 参数百科</title>
+    <link rel="icon" type="image/svg+xml" href="/static/favicon.svg">
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/remixicon@3.5.0/fonts/remixicon.css" rel="stylesheet">
 </head>
@@ -15,14 +16,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">
-                <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 class="flex gap-4 text-sm" id="topNav">
+                <!-- 动态加载 -->
            </div>
        </div>
    </nav>
@@ -30,7 +25,7 @@
    <main class="max-w-7xl mx-auto px-4 py-8">
        <div class="mb-6">
            <h1 class="text-2xl font-bold text-gray-800 flex items-center gap-2">
-                <i class="ri-memory-line text-purple-600"></i>
+                <i class="ri-cpu-line text-purple-600"></i>
                CPU数据库
            </h1>
            <p class="text-gray-500 mt-1">处理器规格参数一览</p>
@@ -79,7 +74,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)}`;
@@ -180,6 +209,8 @@
            if (e.target === this) closeModal();
        });

+        // 初始化
+        loadNav();
        loadCpus();
    </script>
 </body>
--- a/templates/gpus.html
+++ b/templates/gpus.html
@@ -3,7 +3,8 @@
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>GPU数据库 - ParamHub</title>
+    <title>ParamHub - 参数百科</title>
+    <link rel="icon" type="image/svg+xml" href="/static/favicon.svg">
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/remixicon@3.5.0/fonts/remixicon.css" rel="stylesheet">
 </head>
@@ -15,14 +16,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">
-                <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 class="flex gap-4 text-sm" id="topNav">
+                <!-- 动态加载 -->
            </div>
        </div>
    </nav>
@@ -82,7 +77,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)}`;
@@ -187,6 +216,8 @@
            if (e.target === this) closeModal();
        });

+        // 初始化
+        loadNav();
        loadGpus();
    </script>
 </body>
--- a/templates/index.html
+++ b/templates/index.html
@@ -3,7 +3,8 @@
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>ParamHub - 参数百科</title>
+    <title id="pageTitle">ParamHub - 参数百科</title>
+    <link rel="icon" type="image/svg+xml" href="/static/favicon.svg">
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/remixicon@3.5.0/fonts/remixicon.css" rel="stylesheet">
 </head>
@@ -13,17 +14,11 @@
        <div class="max-w-7xl mx-auto px-4 py-3 flex justify-between items-center">
            <div class="flex items-center gap-2">
                <i class="ri-dashboard-3-line text-2xl text-indigo-600"></i>
-                <span class="text-xl font-bold text-gray-800">ParamHub</span>
-                <span class="text-sm text-gray-500">参数百科</span>
+                <span class="text-xl font-bold text-gray-800" id="navSiteName">ParamHub</span>
+                <span class="text-sm text-gray-500" id="navSiteSubtitle">参数百科</span>
            </div>
-            <div class="flex gap-6 text-sm">
-                <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>
+            <div class="flex gap-4 text-sm" id="navLinks">
+                <!-- 动态加载 -->
            </div>
        </div>
    </nav>
@@ -35,7 +30,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,73 +40,26 @@
            </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>
+                <i class="ri-cpu-line text-indigo-600"></i>
                热门模型
            </h2>
            <div id="latestModels" class="grid grid-cols-2 gap-4">
@@ -122,47 +70,183 @@

    <!-- 页脚 -->
    <footer class="bg-white border-t mt-8 py-6 text-center text-gray-500 text-sm">
-        ParamHub - 参数百科 | AI模型与硬件参数速查平台
+        <span id="footerText">ParamHub - 参数百科 | AI模型与硬件参数速查平台</span>
    </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'}
+        };
+
+        // 加载导航栏
+        function renderNavBar() {
+            // 内置页面
+            const builtinPages = [
+                {name: '首页', href: '/'},
+                {name: '工具', href: '/tools'},
+                {name: '对比', href: '/compare'},
+                {name: '知识库', href: '/knowledge'}
+            ];
            
-            document.getElementById('modelsCount').textContent = data.models_count;
-            document.getElementById('gpusCount').textContent = data.gpus_count;
-            document.getElementById('cpusCount').textContent = data.cpus_count;
+            // 内置分类映射
+            const categoryPages = {
+                'ai-models': '/models',
+                'gpus': '/gpus',
+                'cpus': '/cpus'
+            };
            
-            // 最新模型
-            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)}
-                        </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;
+            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() {
+            // 并行加载分类、统计、配置
+            const [catRes, statsRes, configRes] = await Promise.all([
+                fetch('/api/categories'),
+                fetch('/api/stats'),
+                fetch('/api/config')
+            ]);
+            categories = await catRes.json();
+            const stats = await statsRes.json();
+            const config = await configRes.json();
+            
+            // 更新网站名称等
+            if (config.site_name) {
+                document.getElementById('navSiteName').textContent = config.site_name;
            }
+            if (config.site_subtitle) {
+                document.getElementById('navSiteSubtitle').textContent = config.site_subtitle;
+            }
+            if (config.site_name && config.site_subtitle) {
+                document.getElementById('pageTitle').textContent = `${config.site_name} - ${config.site_subtitle}`;
+            }
+            if (config.footer_text) {
+                document.getElementById('footerText').textContent = config.footer_text;
+            }
+            if (config.icp_number) {
+                document.getElementById('footerText').innerHTML += ` | <a href="https://beian.miit.gov.cn/" target="_blank" class="hover:text-gray-700">${config.icp_number}</a>`;
+            }
+            
+            // 渲染导航栏
+            renderNavBar();
+            
+            // 渲染统计卡片
+            renderStatsCards(stats);
+            
+            // 渲染分类卡片
+            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-cpu-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>
+                `;
+            }).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>
--- a/templates/knowledge.html
+++ b/templates/knowledge.html
@@ -3,7 +3,8 @@
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>知识库 - ParamHub</title>
+    <title>ParamHub - 参数百科</title>
+    <link rel="icon" type="image/svg+xml" href="/static/favicon.svg">
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/remixicon@3.5.0/fonts/remixicon.css" rel="stylesheet">
 </head>
@@ -14,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">
-                <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 class="flex gap-4 text-sm" id="topNav">
+                <!-- 动态加载 -->
            </div>
        </div>
    </nav>
@@ -81,7 +76,7 @@
            <!-- 显存计算 -->
            <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-memory-line text-orange-600"></i>
+                    <i class="ri-cpu-line text-orange-600"></i>
                    如何计算显存需求？
                </h2>
                <p class="text-gray-600 leading-relaxed">
@@ -183,5 +178,43 @@
            </table>
        </div>
    </main>
+
+    <script>
+        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}`;
+                navHtml += `<a href="${href}" class="text-gray-600 hover:text-indigo-600">${cat.name}</a>`;
+            });
+
+            document.getElementById('topNav').innerHTML = navHtml;
+        }
+
+        loadNav();
+    </script>
 </body>
 </html>
--- a/templates/models.html
+++ b/templates/models.html
@@ -3,7 +3,8 @@
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>模型数据库 - ParamHub</title>
+    <title>ParamHub - 参数百科</title>
+    <link rel="icon" type="image/svg+xml" href="/static/favicon.svg">
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/remixicon@3.5.0/fonts/remixicon.css" rel="stylesheet">
 </head>
@@ -15,14 +16,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">
-                <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 class="flex gap-4 text-sm" id="topNav">
+                <!-- 动态加载 -->
            </div>
        </div>
    </nav>
@@ -47,14 +42,18 @@
                        oninput="loadModels()">
                </div>
                <select id="sortBy" class="px-4 py-2 border border-gray-200 rounded-lg" onchange="loadModels()">
+                    <option value="default">默认排序（置顶优先）</option>
+                    <option value="publish_date">按发布日期</option>
+                    <option value="views">按热度</option>
                    <option value="name">按名称</option>
                    <option value="parameters">按参数量</option>
                    <option value="mmlu">按MMLU分数</option>
                    <option value="context_length">按上下文长度</option>
+                    <option value="created_at">按创建时间</option>
                </select>
                <select id="sortOrder" class="px-4 py-2 border border-gray-200 rounded-lg" onchange="loadModels()">
-                    <option value="asc">升序</option>
                    <option value="desc">降序</option>
+                    <option value="asc">升序</option>
                </select>
                <select id="filterType" class="px-4 py-2 border border-gray-200 rounded-lg" onchange="loadModels()">
                    <option value="all">全部</option>
@@ -101,6 +100,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();
@@ -134,10 +167,15 @@
            }
            
            const html = models.map(m => `
-                <tr class="border-b hover:bg-gray-50 transition">
+                <tr class="border-b hover:bg-gray-50 transition ${m.is_pinned ? 'bg-yellow-50' : ''}">
                    <td class="px-4 py-3">
-                        <div class="font-medium text-gray-800">${m.name}</div>
-                        <div class="text-xs text-gray-500">${m.architecture || ''}</div>
+                        <div class="flex items-center gap-2">
+                            ${m.is_pinned ? '<i class="ri-pushpin-fill text-yellow-500" title="置顶"></i>' : ''}
+                            <div>
+                                <div class="font-medium text-gray-800">${m.name}</div>
+                                <div class="text-xs text-gray-500">${m.architecture || ''}</div>
+                            </div>
+                        </div>
                    </td>
                    <td class="px-4 py-3 text-gray-600">${m.organization}</td>
                    <td class="px-4 py-3">
@@ -234,6 +272,7 @@
        });

        // 初始化
+        loadNav();
        loadModels();
    </script>
 </body>
--- a/templates/tools.html
+++ b/templates/tools.html
@@ -3,7 +3,8 @@
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>实用工具 - ParamHub</title>
+    <title>ParamHub - 参数百科</title>
+    <link rel="icon" type="image/svg+xml" href="/static/favicon.svg">
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/remixicon@3.5.0/fonts/remixicon.css" rel="stylesheet">
 </head>
@@ -15,14 +16,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">
-                <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 class="flex gap-4 text-sm" id="topNav">
+                <!-- 动态加载 -->
            </div>
        </div>
    </nav>
@@ -39,7 +34,7 @@
        <!-- 显存计算器 -->
        <div class="bg-white rounded-xl shadow-sm p-6 mb-6">
            <h2 class="text-lg font-semibold text-gray-800 mb-4 flex items-center gap-2">
-                <i class="ri-memory-line text-green-600"></i>
+                <i class="ri-cpu-line text-green-600"></i>
                显存计算器
            </h2>
            <p class="text-gray-500 mb-4">计算大模型所需的显存大小，并推荐合适的GPU</p>
@@ -144,7 +139,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;
            
@@ -169,6 +198,9 @@
            
            document.getElementById('vramResult').classList.remove('hidden');
        }
+
+        // 初始化
+        loadNav();
    </script>
 </body>
 </html>
Author	SHA1	Message	Date
hubian	45190980a9	feat: 发布日期、热度、置顶、图片上传功能 - 新增发布日期(publish_date)、热度(views)、置顶(is_pinned)字段 - 后台管理表格显示新字段和置顶操作按钮 - 前端默认排序：置顶优先 → 发布日期最新 - 新增多种排序选项：发布日期、热度、名称等 - 新增图片上传API（支持多图上传） - 后台管理表单添加图片上传组件（支持文件选择和粘贴） - 数据创建时自动初始化新字段	2026-04-20 21:25:57 +08:00
hubian	627148a87f	feat: 知识库数据添加显示开关功能 - knowledge API添加visible字段支持 - 前台过滤隐藏的知识条目（默认） - 后台显示全部知识条目（all=1） - 新增toggle knowledge visible API - 知识库表格增加显示开关列	2026-04-11 02:32:10 +08:00
hubian	74be7688c9	feat: v1.2.0 新增网站配置管理功能新功能： - 后台管理新增'网站配置'菜单 - 支持配置：网站名称、副标题、备案号、联系邮箱、GitHub、页脚文字 - 前台页面自动读取配置显示 - 页脚支持备案号链接配置存储在 data/config.json	2026-04-11 02:27:21 +08:00
hubian	7a2b1da9ff	fix: 后台管理显示全部数据，包括隐藏的 - 分类API添加all=1参数 - 动态分类数据API添加all=1参数 - 动态分类表格增加显示开关列 - 所有表格的眼睛按钮添加title提示 - 隐藏数据用灰色背景/透明度区分 - showRawData支持动态分类数据	2026-04-11 02:12:55 +08:00
hubian	dfd7234fd6	fix: 修复模型排序错误，改名为大模型管理 - 修复智能添加创建的不完整数据导致排序错误 - 添加安全排序函数处理缺失字段 - 改名：模型管理 → 大模型管理 - 清理测试数据	2026-04-11 02:06:06 +08:00
hubian	22b1a78132	fix: 修复后台管理页面JS语法错误（getCategoryForm重复）	2026-04-11 02:00:20 +08:00
hubian	d28ad1a292	feat: v1.1.0 新增智能添加和展示开关功能功能更新： - 新增智能添加功能：粘贴文本自动解析为结构化数据 - 新增展示开关：各分类和产品支持显示/隐藏控制 - 保留原始数据：智能添加的产品保留raw_text字段 - 优化价格显示：支持多币种、价格区间、单位 - 修复图标问题：CPU图标改为ri-cpu-line - 新增favicon：所有页面添加浏览器标签图标技术改进： - 新增大模型API集成（LLM Proxy） - 新增smart-add API接口 - 新增visible字段和toggle API - 优化前端表格显示	2026-04-11 01:54:28 +08:00
hubian	1b22718d5a	fix: 所有页面导航栏统一动态加载类别修复：各页面顶部导航栏添加 loadNav() 调用，确保所有页面显示一致的类别列表	2026-04-09 12:42:06 +08:00
hubian	cb52022662	fix: 前端导航栏改为动态加载修复问题: 1. 顶部导航栏不显示后台新增的类别 → 改为从API动态加载 2. 前端页面移除"添加数据"按钮 → 数据由后台管理员管理 3. 前端移除"后台"入口 → 管理员直接访问/admin	2026-04-09 12:36:16 +08:00
hubian	842663278c	fix: 添加动态分类页面路由和模板修复问题: - 新增类别的详情页面路由不存在 - 导航栏缺少后台入口新增: - /category/{id} 路由 - category.html 模板页面 - 导航栏添加后台入口	2026-04-09 12:22:56 +08:00
hubian	fc0e8c3443	fix: 修复后台管理多个问题修复: 1. 分类编辑功能正常工作 2. 动态生成侧边栏菜单，新增分类自动出现管理入口 3. 首页动态加载分类并展示 4. 新增动态分类数据管理API 5. 修复CPU等页面图标问题	2026-04-09 02:32:35 +08:00
hubian	420107730c	feat: 分类管理和知识库管理功能: - 分类管理：可动态添加手机、电脑、汽车等参数大类 - 知识库管理：增删改查知识条目，支持分类筛选 - 概览统计增加分类和知识数量 - 侧边栏导航优化	2026-04-09 02:20:55 +08:00
hubian	32bf9c59bc	feat: 添加后台管理功能功能: - 概览统计 - 模型/GPU/CPU管理（增删改查） - 侧边栏导航 - 表单验证	2026-04-09 02:12:34 +08:00