Files
soul-yongping/开发文档/4、前端/ui/01-项目概述.md
2026-02-09 15:09:29 +08:00

3.6 KiB
Raw Blame History

一场SOUL的创业实验 - 项目概述

项目简介

这是一个基于 Next.js 16 构建的知识付费+分销系统,核心功能包括:

  • 📚 电子书阅读与付费购买
  • 🤝 创业伙伴匹配功能
  • 💰 90%高佣分销系统
  • 👤 用户中心与账号管理

技术栈

┌─────────────────────────────────────────────────┐
│                   前端技术                       │
├─────────────────────────────────────────────────┤
│  Next.js 16        React 19        TypeScript   │
│  Tailwind CSS      Framer Motion   Zustand      │
│  Lucide Icons      QRCode          shadcn/ui    │
└─────────────────────────────────────────────────┘
                        │
                        ▼
┌─────────────────────────────────────────────────┐
│                   后端技术                       │
├─────────────────────────────────────────────────┤
│  Next.js API Routes    MySQL(本地数据库)         │
│  存客宝CKB API         微信支付API               │
└─────────────────────────────────────────────────┘

项目结构

一场soul的创业实验/
├── app/                    # Next.js App Router 页面
│   ├── page.tsx           # 首页
│   ├── chapters/          # 目录页
│   ├── read/[id]/         # 阅读页
│   ├── match/             # 找伙伴页
│   ├── my/                # 我的页面
│   │   ├── page.tsx       # 个人中心
│   │   ├── referral/      # 分销中心
│   │   ├── settings/      # 设置页
│   │   └── purchases/     # 订单页
│   ├── about/             # 关于作者
│   ├── admin/             # 管理后台
│   └── api/               # API接口
├── components/            # 组件库
│   ├── ui/               # 基础UI组件
│   └── modules/          # 业务模块组件
├── lib/                   # 工具库
│   ├── store.ts          # Zustand状态管理
│   └── book-data.ts      # 书籍数据
├── book/                  # Markdown书籍内容
└── docs/                  # 项目文档

核心功能模块

模块 说明 页面路径
首页 书籍介绍、购买入口 /
目录 章节列表、付费状态 /chapters
阅读 文章内容、购买弹窗 /read/[id]
找伙伴 四种匹配类型 /match
我的 个人中心、收益 /my
分销中心 推广、提现 /my/referral
设置 账号绑定 /my/settings
管理后台 数据管理 /admin

定价策略

  • 单章购买¥1/章
  • 基础版全书¥9.9固定50章
  • 最新完整版¥9.9 + 新增章节数 × ¥1
  • 分销返利推广者90%好友享5%优惠

数据存储

当前使用 Zustand + localStorage 进行状态管理,生产环境需要:

  1. 连接MySQL数据库
  2. 配置微信支付
  3. 配置存客宝API

文档版本v2.0 | 更新日期2026-01-18