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

> **路由**: `/contents/:contentId`
> **布局**: `LayoutMain` (Header + Footer)
> **结构**: 固定宽度经典阅读布局 (左文右侧栏)

## 1. 页面结构 (Structure)

内容区域固定最大宽度为 `max-w-screen-xl` (`1280px`)，水平居中。

- **分栏比例**: 主内容区 (Main) 占 **9份** (`col-span-9`)，侧边栏 (Sidebar) 占 **3份** (`col-span-3`)。
- **间距**: 左右分栏间距 `gap-8` (32px)。
- **Sticky 策略**: 侧边栏采用 `sticky` 定位，顶部偏移 `top-24` (Header 64px + 间距 32px)，确保滚动时不被遮挡。

---

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

### 2.1 顶部面包屑 (Breadcrumb)
- **位置**: 内容容器上方 `py-4`。
- **路径**: `首页 > [一级分类] > [二级标签] > 正文`。
- **交互**: 点击分类可跳转至首页筛选状态。最后一级（正文标题）为灰字不可点。

### 2.2 左侧正文区 (Article Body)
**容器**: `bg-white rounded-lg shadow-sm p-8 min-h-[600px]`。

#### A. 头部信息 (Header)
- **标题 (H1)**: 
  - 结构: `[曲种] 剧目名·选段名` (如: [京剧] 锁麟囊·春秋亭)。
  - 样式: `text-3xl sm:text-4xl font-bold text-slate-900 leading-tight mb-4`。
- **戏曲属性 (Opera Meta)**: 
  - 显示在标题下方，徽章样式。
  - 内容: `[行当: 青衣]` `[主定调: E大调]` `[板式: 西皮流水]`。
- **元数据行**:
  - **左侧**: 作者头像 (32px) + 名称 + "发布于 2025-12-25"。
  - **右侧工具栏**: 字号调节 / 收藏 / 分享。

#### B. 正文内容 (Content)
- **排版规范**:
  - **默认字号**: `text-lg` (18px)，行高 `1.8` (Relaxed)。
  - **戏曲剧本模式 (Script Mode)**:
    - 样式: `[角色]:` 加粗并左侧悬挂，台词缩进对齐。
    - 示例: 
      > **薛湘灵**: (白) 
      > 　　　听薛良一语，一似那金钟猛撞。
- **唱段属性块 (Aria Block)**:
  - 样式: 嵌入正文的播放条卡片。
  - 内容: [播放按钮] + 唱段名 + `Key: E` | `Beat: 原板`。
  - 交互: 点击播放时，高亮当前块。
- **图片交互**: 支持 Lightbox。

#### C. 付费墙与拦截 (Paywall)
- **逻辑**:
  - **免费/已购**: 展示完整内容。
  - **限时免费**: 标题下方显示橙色倒计时条 "限时免费中，剩余 12:00:00"。
  - **付费未购**:
    - **遮罩**: 正文展示前 300 字，下方叠加 `bg-gradient-to-t from-white via-white/90 to-transparent h-64`。
    - **购买卡片**: 位于遮罩中心，阻断阅读。
      - **价格**: `¥ 99.00` (大号红字) + `¥ 199.00` (划线原价)。
      - **按钮**: [立即解锁全文] (Primary, h-14, text-xl)。
      - **提示**: "登录后购买，永久有效"。

#### D. 底部区域 (Article Footer)
- **版权/免责声明**: 灰色背景块，声明内容来源或免责信息。
- **标签云**: 展示关联 Tags，点击跳转搜索。
- **上下篇导航**: 
  - 上一篇: [标题...]
  - 下一篇: [标题...] (若无则不显示)

### 2.3 评论区 (Comments)
**位置**: 正文容器下方，独立卡片 `mt-6 p-8`。

- **排序与统计**: 
  - 顶部显示 "全部评论 (124)"。
  - 右侧排序切换: [最新] (默认) | [热门]。
- **输入交互**: 
  - 文本域: 最小高度 `h-24`，大字号输入。
  - **发布按钮**: 点击后进入 `loading` 状态。
  - **异常反馈**:
    - **敏感词**: 接口返回后，输入框下方显示红字 "评论包含敏感词汇，请修改后发布"，输入内容保留。
    - **重复提交**: 30秒内禁止发布相同内容，提示 "请勿频繁发表重复评论"。
    - **网络失败**: Toast 提示 "发布失败，请检查网络"，内容保留在输入框。
- **列表结构 (两级嵌套)**:
  - **主评论 (Level 1)**: 头像 (40px) + 名称 + 正文 + [时间 / 点赞 / 回复]。
  - **回复列表 (Level 2)**: 在主评论下方灰色区域显示。
    - 结构: `A 回复 B: [内容]`。
    - 交互: 点击 [回复] 自动在输入框前置 `@用户名称`。
    - **适老化**: 不支持三级以上嵌套，所有回复统一平铺在主评论下方，避免视觉混乱。
  - **状态**: 
    - 正常: 显示内容。
    - **审核中**: 显示 "该评论正在审核中" (灰色斜体)。
    - **已删除**: 显示 "评论已折叠/删除"。

### 2.4 右侧侧边栏 (Sidebar)
**特性**: `h-fit sticky top-24`。

1.  **作者/租户名片 (Author Profile)**:
    - 包含: 大头像 (64px)、名称 (H3)、简介、[+ 关注] 按钮、[私信] 按钮。
    - 统计: "102 篇内容" | "1.5w 获赞"。
2.  **目录 (TOC)**:
    - **适老化**: 仅展示 H2 一级目录，避免层级过深。
    - **高亮**: 滚动监听，当前章节左侧加粗色条。
3.  **相关推荐**:
    - 图文列表 (左文右图小图模式)，推荐 5 篇相似内容。

### 2.5 媒体渲染器 (Media Renderers)
根据内容的主体类型，Main 区域将采用不同的渲染组件：

#### A. 视频组件 (Video Player)
- **播放记忆**: 自动记录播放进度。再次打开时 Toast 提示 "已恢复至上次观看处 05:20"。
- **异常处理**:
  - **加载失败**: 容器显示黑色背景 + 居中提示 "内容解析失败" + [点击重试] 按钮。
  - **版权限制**: 显示 "应版权方要求，此内容暂不支持在您所在的地区播放"。
- **控制**: 进度条加宽至 `8px` (Hover 后 `12px`)，始终可见大尺寸 [播放/暂停] 按钮。
- **交互规范**: 增加 [后退10秒] / [快进10秒] 按钮，支持全屏模式。
- **试看模式 (Trial Mode)**:
  - **进度条**: 试看部分显示为**高亮色**，锁定部分显示为**灰色带锁图标**。
  - **交互限制**: 拖拽进度条超过试看点时，自动回弹并提示 "后续内容需购买"。
  - **中断体验**: 播放至试看结束点，视频暂停，画面覆盖半透明 **购买引导遮罩 (Paywall)**，显示 [¥9.9 解锁全片]。

#### B. 音频组件 (Audio Player)
- **播放记忆**: 同视频。
- **试听模式**: 同视频。进度条明确标记 "试听结束点"，播放结束后停止并弹出购买卡片。
- **视觉/控制**: 封面图居中，下方大进度条与大控制钮。
- **控制面板**: 背景浅灰色块，大尺寸 [播放/暂停] 按钮居中，支持倍速播放 (0.75x, 1.0x, 1.25x, 1.5x)。

#### C. 图片集 (Gallery)
- **单图模式**: 默认大图展示。
- **多图模式**: 默认采用 **“流式竖排”** (类似长微博)，避免中老年用户找不到切换箭头的困扰。
- **加载失败**: 占位图显示 "图片加载失败" 图标 + [点击刷新]。
- **交互**: 强制支持 Lightbox 点击放大。

#### D. 混合型 (Mixed Content)
- **规则**: 将上述组件作为“块 (Block)”在正文中穿插。
- **间距**: 媒体块与文本块之间统一保持 `my-8` (32px) 的垂直间距，确保视觉节奏清晰。

---

## 3. 状态与异常
- **内容审核中**: 只有作者自己可见，顶部黄色 Banner "内容审核中，仅自己可见"。
- **内容被下架/删除**: 替换为 404 状态页，提示 "内容已被删除"。
- **无权限**: 若是私密内容，提示 403 "您无权访问此内容"。