Files
soul-yongping/开发文档/4、前端/ui/02-页面功能说明.md
2026-02-09 15:09:29 +08:00

265 lines
13 KiB
Markdown
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

# 页面功能说明
## 1. 首页 (`/`)
### 功能概述
书籍介绍页,展示书籍封面、简介、购买入口。
### 页面元素
```
┌─────────────────────────────────────┐
│ 书籍封面图片 │
│ │
│ 《一场SOUL的创业实验场》 │
│ 来自Soul派对房的真实商业故事 │
│ │
│ ┌─────────┐ ┌─────────┐ │
│ │ 立即阅读 │ │ 购买全书 │ │
│ └─────────┘ └─────────┘ │
│ │
│ [ 首页 ] [ 目录 ] [找伙伴] [ 我的 ] │
└─────────────────────────────────────┘
```
### 交互逻辑
- 点击"立即阅读" → 跳转到序言
- 点击"购买全书" → 弹出支付弹窗
- 底部导航可切换页面
---
## 2. 目录页 (`/chapters`)
### 功能概述
展示书籍全部章节,显示购买状态和价格。
### 页面元素
```
┌─────────────────────────────────────┐
│ 目录 │
├─────────────────────────────────────┤
│ 📚 一场SOUL的创业实验场 62章 │
├─────────────────────────────────────┤
│ [基础版 ¥9.9] [最新版 ¥XX.X] │ ← 版本切换(可隐藏)
├─────────────────────────────────────┤
│ 📖 序言|为什么我每天早上... [免费] │
├─────────────────────────────────────┤
│ ▼ 01 真实的人 │
│ └ 第1章 人与人之间的底层逻辑 │
│ └ 1.1 荷包:电动车出租... [免费]│
│ └ 1.2 老墨:资源整合... [¥1] │
│ └ 1.3 笑声背后的MBTI [¥1] │
├─────────────────────────────────────┤
│ ▶ 02 真实的行业 │
│ ▶ 03 真实的错误 │
│ ... │
└─────────────────────────────────────┘
```
### 状态说明
- 🟢 免费 - 可直接阅读
- 🔓 已购 - 已购买章节
- 🔒 ¥1 - 未购买,显示价格
---
## 3. 阅读页 (`/read/[id]`)
### 功能概述
文章内容展示,包含购买和分享功能。
### 页面元素
```
┌─────────────────────────────────────┐
│ ← 返回 第1章 人与人... [分享] │
├─────────────────────────────────────┤
│ 1.1 荷包:电动车出租的被动收入模式 │
│ │
│ (文章内容) │
│ ... │
│ │
│ ┌─────────────────────────────────┐│
│ │ 需要购买才能继续阅读 ││
│ │ ┌─────────┐ ┌─────────┐ ││
│ │ │ 购买本章 │ │ 购买全书 │ ││
│ │ │ ¥1 │ │ ¥9.9 │ ││
│ │ └─────────┘ └─────────┘ ││
│ └─────────────────────────────────┘│
│ │
│ ┌────────────┐ ┌────────────┐ │
│ │ ← 上一篇 │ │ 下一篇 → │ │
│ └────────────┘ └────────────┘ │
└─────────────────────────────────────┘
```
### 付费逻辑
1. 免费章节 → 直接显示全文
2. 已购章节 → 直接显示全文
3. 未购章节 → 显示预览 + 付费墙
---
## 4. 找伙伴页 (`/match`)
### 功能概述
四种匹配类型,匹配已购买用户。
### 页面元素
```
┌─────────────────────────────────────┐
│ 找伙伴 │
├─────────────────────────────────────┤
│ │
│ ┌─────────────────────┐ │
│ │ │ │
│ │ 开始匹配 │ │
│ │ 匹配创业伙伴 │ │
│ │ │ │
│ └─────────────────────┘ │
│ │
│ 当前模式: 创业合伙 │
│ │
│ ┌────┐ ┌────┐ ┌────┐ ┌────┐ │
│ │ ⭐ │ │ 👥 │ │ ❤️ │ │ 🎮 │ │
│ │创业 │ │资源 │ │导师 │ │团队 │ │
│ │合伙 │ │对接 │ │顾问 │ │招募 │ │
│ └────┘ └────┘ └────┘ └────┘ │
└─────────────────────────────────────┘
```
### 匹配类型说明
| 类型 | 匹配标签 | 匹配方式 |
|------|---------|---------|
| 创业合伙 | 创业伙伴 | 从数据库匹配已购用户 |
| 资源对接 | 资源对接 | 弹出加入弹窗 |
| 导师顾问 | 商业顾问 | 弹出加入弹窗 |
| 团队招募 | 加入项目 | 弹出加入弹窗 |
---
## 5. 我的页面 (`/my`)
### 功能概述
个人中心,展示收益、订单、设置入口。
### 页面元素
```
┌─────────────────────────────────────┐
│ 我的 │
├─────────────────────────────────────┤
│ ┌─────────────────────────────────┐│
│ │ 👤 用户昵称 VIP ││
│ │ ID: xxxxxxxx ││
│ │ ││
│ │ [已购章节] [推荐好友] [待领收益] ││
│ │ 12 5 ¥89 ││
│ └─────────────────────────────────┘│
├─────────────────────────────────────┤
│ ┌─────────────────────────────────┐│
│ │ 💰 我的收益 ││
│ │ ││
│ │ 累计收益 可提现 ││
│ │ ¥89.00 ¥89.00 ││
│ │ ││
│ │ [推广中心] [提现] ││
│ └─────────────────────────────────┘│
├─────────────────────────────────────┤
│ 📦 我的订单 → │
│ 🎁 推广中心 → │
关于作者 → │
│ ⚙️ 设置 → │
├─────────────────────────────────────┤
│ [ 退出登录 ] │
└─────────────────────────────────────┘
```
---
## 6. 分销中心 (`/my/referral`)
### 功能概述
推广管理、收益提现、绑定用户管理。
### 页面元素
```
┌─────────────────────────────────────┐
│ ← 分销中心 🔔 ⚙️ │
├─────────────────────────────────────┤
│ ┌─────────────────────────────────┐│
│ │ 累计收益 ¥89.00 ││
│ │ 90% 返利 待结算: ¥0.00 ││
│ │ ││
│ │ [ 申请提现 ] [自动提现开启] ││
│ └─────────────────────────────────┘│
├─────────────────────────────────────┤
│ [绑定中 3] [已付款 1] [即将过期 2] [总邀请 0] │
├─────────────────────────────────────┤
│ ⚠️ 推广规则 │
│ • 好友通过你的链接购买立享5%优惠 │
│ • 好友成功付款后你获得90%收益 │
│ • 绑定期30天期满未付款自动解除 │
├─────────────────────────────────────┤
│ 👥 绑定用户 (5) ▼ │
│ ├ [绑定中(3)] [已付款(1)] [已过期(1)]│
│ │ │
│ │ 小明 绑定于2025/12/24 [5天] │
│ │ 小红 绑定于2026/1/8 [20天] │
│ │ 阿强 绑定于2025/12/21 [2天后过期]│
├─────────────────────────────────────┤
│ 我的邀请码: REFMKEL7JAC │
│ 好友购买立省5%你获得90%收益 │
├─────────────────────────────────────┤
│ 🖼️ 生成推广海报 → │
│ 💬 分享到朋友圈 → │
│ 📤 更多分享方式 → │
└─────────────────────────────────────┘
```
---
## 7. 设置页 (`/my/settings`)
### 功能概述
账号绑定管理,退出登录。
### 页面元素
```
┌─────────────────────────────────────┐
│ ← 设置 │
├─────────────────────────────────────┤
│ 🛡️ 账号绑定 │
│ 绑定后可用于提现和找伙伴功能 │
├─────────────────────────────────────┤
│ 📱 手机号 │
│ 138****1234 ✓ │
├─────────────────────────────────────┤
│ 💬 微信号 │
│ 未绑定 去绑定 │
├─────────────────────────────────────┤
│ 💳 支付宝 │
│ 未绑定 去绑定 │
├─────────────────────────────────────┤
│ ⚠️ 提示:绑定至少一个支付方式才能提现 │
├─────────────────────────────────────┤
│ [ 退出登录 ] │
└─────────────────────────────────────┘
```
---
## 8. 管理后台 (`/admin`)
### 功能概述
数据统计、内容管理、用户管理、设置管理。
### 主要功能
- 数据概览:用户数、收入、订单数、转化率
- 内容管理:书籍章节导入/导出/编辑
- 用户管理:查看用户列表、购买记录
- 分销管理:分销商列表、佣金设置
- 提现管理:处理提现申请
- 系统设置:支付配置、作者信息等
---
*文档版本v2.0 | 更新日期2026-01-18*