# 页面设计: 内容详情页 (Content Detail)

> **路由**: `/contents/:contentId`
> **布局**: `LayoutMain`
> **结构**: 经典阅读布局 (左文右侧栏)

## 1. 页面结构 (Structure)

```text
[ Breadcrumb ]
----------------------------------------------------------
|                    |                                   |
|   Article Body     |          Sidebar (Sticky)         |
|      (70%)         |    (Author / TOC / Related)       |
|                    |            (30%)                  |
|   Comments Area    |                                   |
|                    |                                   |
```

## 2. 详细设计 (Detailed Specs)

### 2.1 顶部导航 (Breadcrumb)
- **位置**: 容器顶部，Main 内容之前。
- **内容**: `首页 > 分类 > 正文标题`。
- **样式**: `text-sm text-slate-500 py-4`。

### 2.2 左侧正文区 (Article Body - Left Column)
- **容器**: `bg-white rounded-lg shadow-sm p-6 sm:p-10 mb-6`。
- **头部 (Header)**:
  - **标题**: H1, `text-3xl font-bold text-slate-900 mb-4`。
  - **元数据**: 作者头像、名称、发布时间、阅读数、Tag 标签。
    - 样式: `flex items-center text-sm text-slate-500 space-x-4`。
- **正文 (Content)**:
  - 富文本渲染区域。
  - 排版规范: `prose prose-slate max-w-none` (使用 Tailwind Typography 插件)。
  - 图片: `rounded-lg my-4 max-w-full`。
- **底部互动 (Footer Actions)**:
  - **点赞/收藏/分享**: 居中或居左的图标按钮组。
  - **上一篇/下一篇**: 简单的文字链接导航。

### 2.3 评论区 (Comments Section)
- **位置**: 正文容器下方，独立卡片或同一容器底部。
- **结构**:
  - 输入框: 文本域 + 表情/图片按钮 + "发布"按钮。
  - 列表: 头像 + 名称 + 内容 + 时间 + 回复按钮。
  - 嵌套: 二级回复缩进显示。

### 2.4 右侧侧边栏 (Sidebar - Right Column)
- **特性**: `sticky top-20` (随页面滚动固定)。
- **模块**:
  1.  **作者/租户卡片 (Author Profile)**:
      - 大头像、名称、简介。
      - 数据: 文章数、粉丝数。
      - 动作: [关注] [私信] 大按钮。
  2.  **目录 (Table of Contents)**:
      - 自动生成 H2/H3 锚点链接。
      - 当前阅读章节高亮 (ScrollSpy)。
      - 样式: 左侧竖线指示条。
  3.  **相关推荐 (Related Contents)**:
      - 缩略图 + 标题列表。

## 3. 移动端适配 (Mobile)
- **侧边栏**: 隐藏。
- **作者信息**: 移动到文章头部或底部展示。
- **目录**: 变为浮动按钮 (FAB) 或 放在文章头部折叠面板中。
- **底部栏**: 固定底部操作栏 (评论输入框、点赞、收藏、分享)，类似于原生 App 体验。