🌍 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

安装

# 使用 pnpm（推荐）
pnpm install

# 或 npm
npm install

# 或 yarn
yarn install

开发

pnpm dev

访问 http://localhost:3000

构建与预览

# 构建
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。