# 🌍 LMS - 轻量级课程落地页与学习系统

一个基于 Next.js 的课程落地页与视频学习系统，支持配置化课程、学习进度、支付对接、PWA 等。开箱即用，适合知识付费、在线课程、培训等场景。

![Next.js](https://img.shields.io/badge/Next.js-16-black?logo=next.js)
![React](https://img.shields.io/badge/React-19-61dafb?logo=react)
![TypeScript](https://img.shields.io/badge/TypeScript-5-3178c6?logo=typescript)
![Tailwind CSS](https://img.shields.io/badge/Tailwind-4-38bdf8?logo=tailwindcss)

## ✨ 功能特性

### 课程展示
- **落地页**：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。