143 lines
7.0 KiB
Markdown
143 lines
7.0 KiB
Markdown
# 页面设计: 内容详情页 (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 "您无权访问此内容"。
|