diff --git a/开发文档/1、需求/文章详情-阅读页线框图.md b/开发文档/1、需求/文章详情-阅读页线框图.md
new file mode 100644
index 00000000..c8c5563b
--- /dev/null
+++ b/开发文档/1、需求/文章详情-阅读页线框图.md
@@ -0,0 +1,158 @@
+# 文章详情（阅读页）线框图
+
+> Soul 创业派对 - 小程序 `pages/read/read` 界面结构
+
+---
+
+## 一、完整内容态（免费/已购买）
+
+```
+┌─────────────────────────────────────────┐
+│ ████████████░░░░░░░░░░  阅读进度 60%     │  ← 顶部固定进度条
+├─────────────────────────────────────────┤
+│  ←    第 4 章 真实的行业                 │  ← 导航栏
+├─────────────────────────────────────────┤
+│  [4] [免费]                             │  ← 章节元信息
+│  4.1 旅游号：30天10万粉的真实逻辑       │  ← 章节标题（可长按复制）
+├─────────────────────────────────────────┤
+│                                         │
+│  这是一段正文内容，文中包含 @卡若 和     │
+│  #创业资源 可以点击。支持长按复制文字。  │  ← @ 高亮可点，# 金色可点
+│                                         │
+│  第二段纯文本，无特殊标记。              │
+│                                         │
+│  ┌─────────────────────────────────┐   │  ← 图片（可点击全屏预览）
+│  │         [ 插图 ]                │   │
+│  └─────────────────────────────────┘   │
+│                                         │
+├─────────────────────────────────────────┤
+│  ┌──────────────┐  ┌──────────────────┐│
+│  │ 上一篇       │  │ 下一篇            ││  ← 章节导航
+│  │ 3.5 桶装水   │  │ 4.2 美业整合  →  ││
+│  └──────────────┘  └──────────────────┘│
+│                                         │
+│  [ 📣 分享到朋友圈 ] [ 🖼️ 生成海报 ]    │  ← 操作区
+└─────────────────────────────────────────┘
+```
+
+---
+
+## 二、付费墙态（未登录）
+
+```
+┌─────────────────────────────────────────┐
+│  ←    第 4 章 真实的行业                 │
+├─────────────────────────────────────────┤
+│  这是一段预览内容，显示前 50%...         │
+│  第二段预览...                          │
+│                                         │
+│  ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░  │  ← 渐变遮罩
+│  ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░  │
+├─────────────────────────────────────────┤
+│              🔒                         │
+│        登录后继续阅读                    │
+│    已阅读50%，登录后查看完整内容          │
+│                                         │
+│        [ 立即登录 ]                      │
+├─────────────────────────────────────────┤
+│  [ 上一篇 ]          [ 下一篇 → ]       │
+└─────────────────────────────────────────┘
+```
+
+---
+
+## 三、付费墙态（已登录未购买）
+
+```
+┌─────────────────────────────────────────┐
+│  （同上：预览内容 + 渐变遮罩）            │
+├─────────────────────────────────────────┤
+│              🔒                         │
+│        解锁完整内容                      │
+│    已阅读50%，购买后继续阅读              │
+│                                         │
+│  [ 购买本章  ¥1.0 ]                      │
+│  [ ✨ 解锁全部 62 章  ¥9.9  省82% ]      │  ← 购买≥3章才显示
+│                                         │
+│  分享给好友一起学习，还能赚取佣金         │
+├─────────────────────────────────────────┤
+│  [ 上一篇 ]          [ 下一篇 → ]       │
+└─────────────────────────────────────────┘
+```
+
+---
+
+## 四、交互说明
+
+| 元素 | 交互 |
+|------|------|
+| **@卡若** | 点击 → 确认弹窗「是否添加 @卡若？」→ 调 CKB 留资加好友 |
+| **#创业资源** | 点击 → 按类型：内链跳转 / 外链复制 / 小程序唤醒 / CKB 加好友 |
+| **正文/标题** | 长按 → 选中复制（user-select） |
+| **图片** | 点击 → 全屏预览；长按 → 保存菜单 |
+| **上一篇/下一篇** | 点击 → 切换章节 |
+
+---
+
+## 五、@ / # 三端数据流线框图
+
+```mermaid
+flowchart TB
+    subgraph 管理端["管理端 soul-admin"]
+        A1[链接人与事 Person]
+        A2[链接标签 LinkTag]
+        A3[RichEditor 编辑]
+        A4[autoLinkContent 转换]
+        A1 --> A3
+        A2 --> A3
+        A3 --> A4
+        A4 --> |"content HTML"| DB
+    end
+
+    subgraph 后端["后端 soul-api"]
+        DB[(chapters.content)]
+        API[GET /api/miniprogram/book/chapter]
+        CKB[POST /api/miniprogram/ckb/lead]
+        CFG[GET /api/miniprogram/config]
+        DB --> API
+    end
+
+    subgraph 小程序["小程序 miniprogram"]
+        B1[contentParser 解析]
+        B2[contentSegments 渲染]
+        B3[onMentionTap]
+        B4[onLinkTagTap]
+        API --> B1
+        B1 --> B2
+        B2 --> B3
+        B2 --> B4
+        B3 --> CKB
+        B4 --> |"内链"| Nav[wx.navigateTo]
+        B4 --> |"外链"| Clip[复制剪贴板]
+        B4 --> |"miniprogram"| MP[wx.navigateToMiniProgram]
+        CFG --> B4
+    end
+```
+
+---
+
+## 六、数据流文字说明
+
+```
+管理端 ContentPage
+  → 编辑插入 @[名称](token) / #标签
+  → 保存 content（TipTap HTML）
+
+后端 chapters.content
+  → 原样存储、原样返回
+
+小程序 contentParser
+  → 解析 → contentSegments
+  → WXML 渲染 text / mention / linkTag / image
+
+用户点击 @
+  → onMentionTap → POST /api/miniprogram/ckb/lead
+
+用户点击 #
+  → onLinkTagTap → 按 tagType 分支处理
+```