# V2EX 风格页面结构设计规范（Coding Agent 实现指南）

## 一、页面模块拆解

### 1. 顶部导航栏 (TopNav)
- **布局**：水平横栏 · 固定顶部定位
- **子元素**：
  - 左：站点 Logo（可点击返回首页）
  - 中：搜索框（带放大镜图标）
  - 右：垂直功能入口（首页/发现/我的/登出）
- **交互**：hover 时菜单项有下划线动画

### 2. 分类标签栏 (CategoryTabs)
- **布局**：水平滚动容器（支持左右滑动）
- **视觉特征**：
  - 激活态标签：底部蓝色横线 + 字体加粗
  - 非激活态：灰色细边框
- **数据驱动**：标签内容通过 JSON 配置动态渲染

### 3. 子分类筛选区 (SubFilter)
- **布局**：网格布局（4列/行）
- **交互组件**：
  - 分类标签（Chip 组件）
  - 选中状态：背景色 #F5F5F5 + 边框加深
  - 悬停反馈：轻微阴影上浮效果

### 4. 内容列表 (ContentList)
#### 列表项 (ListItem) 结构
| 区域        | 内容规范                 | 样式特征               |
|-------------|--------------------------|------------------------|
| 左侧        | 分类图标                 | 24×24 圆角矩形 · 固定宽高 |
| 中上        | 分类名称                 | 12px 字重 500 · 灰色   |
| 中中        | 标题文本                 | 支持换行截断 · 主体内容 |
| 中下        | 作者 + 时间              | 10px 字重 400 · #999   |
| 右下        | 互动数据（回复/最后回复）| 蓝色文字 · 点击跳转    |
- **视觉分隔**：浅灰间隔线（1px 实线）

### 5. 侧边栏 (Sidebar)
#### 用户信息卡片 (UserCard)
- **头像区**：圆形图片容器（占位符）
- **数据统计**：
  ```json
  {
    "节点收藏": 12,
    "主题收藏": 24,
    "关注": 8
  }