rogee/quyun-v2

Fork 0

Files

Rogee 83e846f9dc feat: add pages

2025-12-25 23:52:41 +08:00

7.0 KiB

Raw Permalink Blame History

页面设计: 内容详情页 (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)

位置: 内容容器上方 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。

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

7.0 KiB Raw Permalink Blame History Unescape Escape