175 lines
4.9 KiB
Markdown
175 lines
4.9 KiB
Markdown
# 🌍 LMS - 轻量级课程落地页与学习系统
|
||
|
||
一个基于 Next.js 的课程落地页与视频学习系统，支持配置化课程、学习进度、支付对接、PWA 等。开箱即用，适合知识付费、在线课程、培训等场景。
|
||
|
||
|
||
|
||
|
||
|
||
|
||
## ✨ 功能特性
|
||
|
||
### 课程展示
|
||
- **落地页**：Hero、受众、收益、课程大纲、导师、FAQ、CTA
|
||
- **课程大纲**：模块折叠、全文搜索、收藏标记、完成状态
|
||
- **试看机制**：前 2 节免费试看，可配置
|
||
|
||
### 学习体验
|
||
- **继续学习**：记住上次观看章节，一键续播
|
||
- **学习进度**：完成度展示、进度条
|
||
- **视频播放**：续播提示、倍速、全屏、观看进度自动保存
|
||
- **收藏/书签**：章节收藏，便于回看
|
||
- **课程证书**：完成全部课程后可查看证书
|
||
|
||
### 互动与分享
|
||
- **分享海报**：生成课程海报、二维码，支持下载分享
|
||
- **社群入口**：报名后解锁社群二维码弹窗
|
||
- **课程评价**：星级 + 文字评价（可配置隐藏）
|
||
|
||
### 支付与接入
|
||
- **支付对接**：支持第三方支付（如 ZPay 等），可扩展
|
||
- **支付状态**：本地模拟 / 服务端校验，可配置
|
||
|
||
### 其他
|
||
- **PWA**：manifest.json，支持添加到主屏
|
||
- **深色模式**：跟随系统主题切换
|
||
- **响应式**：适配桌面与移动端
|
||
|
||
---
|
||
|
||
## 🛠 技术栈
|
||
|
||
| 类别 | 技术 |
|
||
|------|------|
|
||
| 框架 | Next.js 16 (App Router)、React 19 |
|
||
| 语言 | TypeScript 5 |
|
||
| 样式 | Tailwind CSS 4、animate.css |
|
||
| 动画 | Framer Motion、tsParticles |
|
||
| 文档 | react-markdown、remark-gfm、rehype-highlight |
|
||
| 其他 | highlight.js、github-markdown-css |
|
||
|
||
### 核心依赖
|
||
|
||
- **framer-motion**：滚动入场、组件动画
|
||
- **@tsparticles/react**：粒子背景效果
|
||
- **animate.css**：Hero 入场动画
|
||
- **react-markdown**：课程配套文档 Markdown 渲染
|
||
|
||
---
|
||
|
||
## 📁 项目结构
|
||
|
||
```
|
||
lms/
|
||
├── app/
|
||
│ ├── api/ # API 路由
|
||
│ │ ├── pay/ # 支付相关
|
||
│ │ └── pay/status/ # 支付状态
|
||
│ ├── certificate/ # 证书页
|
||
│ ├── course/[module]/[lesson]/ # 课程详情页
|
||
│ ├── pay/ # 支付页
|
||
│ ├── components/ # 组件
|
||
│ │ ├── custom/ # 自实现封装（无依赖可选）
|
||
│ │ └── sections/ # 区块组件
|
||
│ ├── lib/ # 业务逻辑
|
||
│ │ ├── learning.ts # 学习进度、收藏、笔记
|
||
│ │ └── payment.ts # 支付状态
|
||
│ └── providers/ # 主题等 Provider
|
||
├── config/
|
||
│ ├── course.ts # 课程落地页配置
|
||
│ └── lessons.ts # 章节详情
|
||
├── public/
|
||
│ └── manifest.json # PWA Manifest
|
||
└── ...
|
||
```
|
||
|
||
---
|
||
|
||
## 🚀 快速开始
|
||
|
||
### 环境要求
|
||
|
||
- Node.js 18+
|
||
- pnpm / npm / yarn
|
||
|
||
### 安装
|
||
|
||
```bash
|
||
# 使用 pnpm（推荐）
|
||
pnpm install
|
||
|
||
# 或 npm
|
||
npm install
|
||
|
||
# 或 yarn
|
||
yarn install
|
||
```
|
||
|
||
### 开发
|
||
|
||
```bash
|
||
pnpm dev
|
||
```
|
||
|
||
访问 [http://localhost:3000](http://localhost:3000)
|
||
|
||
### 构建与预览
|
||
|
||
```bash
|
||
# 构建
|
||
pnpm build
|
||
|
||
# 启动生产服务
|
||
pnpm start
|
||
```
|
||
|
||
---
|
||
|
||
## ⚙️ 配置说明
|
||
|
||
### 课程配置 `config/course.ts`
|
||
|
||
| 配置项 | 说明 |
|
||
|--------|------|
|
||
| `SITE_CONFIG` | 站点名称、Footer 等 |
|
||
| `HERO_CONFIG` | 标题、副标题、数据卡片 |
|
||
| `CURRICULUM_CONFIG` | 课程模块与章节 |
|
||
| `AUDIENCE_CONFIG` | 受众说明 |
|
||
| `BENEFITS_CONFIG` | 学完收益 |
|
||
| `INSTRUCTORS_CONFIG` | 导师信息 |
|
||
| `FAQ_CONFIG` | 常见问题 |
|
||
| `COMMUNITY_CONFIG` | 社群入口、二维码 URL |
|
||
| `DOWNLOAD_CONFIG` | 网盘下载模块 |
|
||
|
||
### 章节配置 `config/lessons.ts`
|
||
|
||
- 视频 URL、Markdown 文档
|
||
- 按 `moduleIndex`、`lessonIndex` 映射
|
||
|
||
### 支付与测试
|
||
|
||
- 支付逻辑在 `app/lib/payment.ts`，通过 `localStorage` 的 `pay` 键判断是否已支付
|
||
- 测试时可手动设置：`localStorage.setItem('pay', 'ok')` 模拟已报名
|
||
|
||
---
|
||
|
||
## 🎨 特色
|
||
|
||
1. **配置驱动**：课程内容、落地页、FAQ、社群等均通过配置修改，无需改组件
|
||
2. **轻量学习逻辑**：进度、收藏、笔记、证书基于 localStorage，无后端即可运行
|
||
3. **动画体验**：使用 Framer Motion、tsParticles、animate.css 等库，提供流畅动效
|
||
4. **自实现可选**：`app/components/custom/` 提供无依赖的粒子与滚动动画实现，可替换第三方库
|
||
5. **PWA 支持**：可安装到主屏，支持离线访问
|
||
|
||
---
|
||
|
||
## 📄 许可证
|
||
|
||
MIT
|
||
|
||
---
|
||
|
||
## 🤝 贡献
|
||
|
||
欢迎提交 Issue 和 Pull Request。
|