AI百科主页设计：移动优先

AI百科主页设计方案如下，旨在提供直观且移动友好的浏览体验：

1. 整体设计理念

响应式优先 (Mobile-First)：所有布局和组件都将首先考虑手机屏幕，然后逐步适配平板和桌面。
简洁直观：减少不必要的视觉干扰，确保用户能快速找到所需内容。
高效信息流：通过合理的布局，引导用户发现有价值的AI知识。

2. 页面结构与组件

A. 顶部导航 (Header)

左侧：站点Logo/名称 (例如：“AI百科”)，点击返回首页。
居中：全局搜索框 (Search Bar)，醒目且易于访问，占大部分宽度。
- PC端：直接显示搜索输入框。
- 移动端：可显示为放大镜图标，点击后展开全宽搜索框，或直接显示小尺寸搜索框。
右侧：用户中心/菜单图标 (可选，根据是否有用户登录或更多导航需求，移动端通常为汉堡包菜单)。

B. 核心内容区域

热门标签 (Popular Tags)
- 位置：紧随搜索框下方，或位于页面上部明显位置。
- 展示：从 cms_tag 表中查询 count 最高的N个标签。以醒目的“标签云”或按钮形式展示。
- 交互：每个标签可点击，点击后跳转到该标签下的文章列表页。
- 目的：提供快速内容分类入口，让用户概览热点话题。
精选文章 (Featured Articles)
- 位置：热门标签下方，或页面中心区域。
- 数据源：从 cms_article 表中，根据 score (高价值内容)、click_count 或 like_count 筛选出少数高质量文章。
- 展示：采用卡片式布局，每张卡片包含：
  - 文章标题 (title)：大字体，醒目。
  - 简要描述 (description)：精简摘要。
  - 相关标签 (tags)：显示文章所属的关键标签，可点击。
  - 缩略图 (可选，若 cms_article 增加图片字段)。
- 布局：
  - PC端：可使用2-3列网格布局。
  - 移动端：单列堆叠布局，确保可读性。
- 目的：向用户推荐最具价值和受欢迎的内容。
最新文章 (Latest Articles)
- 位置：精选文章下方。
- 数据源：从 cms_article 表中，按 created_at 或 updated_at 倒序排列。
- 展示：与精选文章类似，卡片式布局，或更简洁的列表形式。包含 title、简要 description 和 tags。
- 布局：同精选文章，自适应列数。
- 目的：展示平台最新更新的内容，保持内容新鲜度。

C. 底部版权 (Footer)

内容：版权信息、隐私政策、关于我们等链接。
布局：简洁的单行或多行文本。

3. 移动端兼容性考量

弹性布局 (Flexbox/Grid)：利用 CSS Flexbox 或 Grid 实现自适应布局。
媒体查询 (Media Queries)：针对不同屏幕尺寸调整样式，例如改变字体大小、组件间距、隐藏非核心元素等。
可点击区域大小：按钮和链接的点击区域不小于44x44dp，方便触摸操作。
图片优化：使用响应式图片技术（srcset），根据设备视口加载合适尺寸的图片。
字体大小：确保在小屏幕上文字清晰可读，避免过小或过大的字体。

4. 数据查询示例 (SQL伪代码)

获取热门标签：

SELECT name, count FROM cms_tag ORDER BY count DESC LIMIT 10;

获取精选文章：

SELECT id, title, description, tags, created_at FROM cms_article
WHERE status = 1
ORDER BY score DESC, click_count DESC, updated_at DESC
LIMIT 6; -- 例如显示6篇

获取最新文章：

SELECT id, title, description, tags, created_at FROM cms_article
WHERE status = 1
ORDER BY created_at DESC
LIMIT 12; -- 例如显示12篇