feat: add pages

docs/design/portal/PAGE_CONTENT_DETAIL.md

@@ -0,0 +1,66 @@
+# 页面设计: 内容详情页 (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 体验。