quyun-v2/docs/design/portal/PAGE_CONTENT_DETAIL.md

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

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

1. 页面结构 (Structure)

[ 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 体验。