407 lines
13 KiB
Markdown
407 lines
13 KiB
Markdown
# si-educational
|
||
|
||
在线教育平台着陆页模板，适用于教育机构、在线课程平台、培训中心展示课程和服务。
|
||
|
||
## 技术栈
|
||
|
||
- Next.js 15.5.9 (已锁定版本，App Router)
|
||
- React 19.2.3 (已锁定版本，修复 CVE-2025-55182 漏洞)
|
||
- TypeScript 5
|
||
- Tailwind CSS 4
|
||
- next-auth (身份认证)
|
||
- next-themes (深色/浅色主题切换)
|
||
- Framer Motion (高级动画)
|
||
- AOS (滚动动画)
|
||
- react-slick (轮播组件)
|
||
- @headlessui/react (无头 UI 组件)
|
||
- @iconify/react (图标库)
|
||
|
||
## 快速开始
|
||
|
||
```bash
|
||
pnpm install
|
||
pnpm run dev
|
||
```
|
||
|
||
## 目录结构
|
||
|
||
```text
|
||
src/
|
||
├── app/ # Next.js App Router 入口
|
||
│ ├── layout.tsx # 根布局 (Header + Footer + 主题Provider)
|
||
│ ├── page.tsx # 首页 (Hero + 课程 + 导师 + 评价)
|
||
│ ├── not-found.tsx # 404 页面
|
||
│ ├── globals.css # 全局样式 + Tailwind 主题变量
|
||
│ ├── (site)/ # 路由分组 (共享布局)
|
||
│ │ ├── (auth)/ # 认证路由组
|
||
│ │ │ ├── signin/page.tsx # 登录页面
|
||
│ │ │ └── signup/page.tsx # 注册页面
|
||
│ │ └── documentation/page.tsx # 文档页面
|
||
│ ├── api/ # API 路由
|
||
│ │ ├── auth/[...nextauth]/route.ts # NextAuth 认证 API
|
||
│ │ └── data/route.ts # 静态数据 API (菜单、课程、导师)
|
||
│ ├── components/ # 可复用组件
|
||
│ │ ├── Layout/ # 布局组件
|
||
│ │ │ ├── Header/index.tsx # 导航栏 (Logo + 菜单 + 主题切换)
|
||
│ │ │ │ ├── Logo/index.tsx # Logo 组件
|
||
│ │ │ │ ├── ThemeToggler.tsx # 主题切换按钮
|
||
│ │ │ │ └── Navigation/ # 导航链接
|
||
│ │ │ │ ├── HeaderLink.tsx # 桌面导航
|
||
│ │ │ │ └── MobileHeaderLink.tsx # 移动导航
|
||
│ │ │ └── Footer/index.tsx # 页脚
|
||
│ │ ├── Home/ # 首页专用组件
|
||
│ │ │ ├── Hero/index.tsx # Hero 区域 (主标题 + 下拉选择器)
|
||
│ │ │ │ ├── Dropdownone.tsx # 课程类型选择
|
||
│ │ │ │ └── Dropdowntwo.tsx # 学习时长选择
|
||
│ │ │ ├── Companies/index.tsx # 公司 Logo 轮播
|
||
│ │ │ ├── Courses/index.tsx # 课程列表 (分类过滤)
|
||
│ │ │ ├── Mentor/index.tsx # 导师卡片网格
|
||
│ │ │ ├── Testimonial/index.tsx # 学生评价轮播
|
||
│ │ │ └── Newsletter/index.tsx # 邮件订阅区
|
||
│ │ ├── Auth/ # 认证相关组件
|
||
│ │ │ ├── SignIn/index.tsx # 登录表单
|
||
│ │ │ ├── SignUp/index.tsx # 注册表单
|
||
│ │ │ ├── ForgotPassword/index.tsx # 忘记密码
|
||
│ │ │ ├── MagicLink/index.tsx # 魔法链接登录
|
||
│ │ │ ├── ResetPassword/index.tsx # 重置密码
|
||
│ │ │ ├── SocialSignIn.tsx # 社交登录按钮
|
||
│ │ │ └── SocialSignUp.tsx # 社交注册按钮
|
||
│ │ ├── Contact/ # 联系表单
|
||
│ │ │ └── Form/index.tsx
|
||
│ │ ├── Documentation/ # 文档相关组件
|
||
│ │ │ ├── Documentation.tsx # 主文档组件
|
||
│ │ │ ├── Introduction.tsx # 介绍
|
||
│ │ │ ├── QuickStart.tsx # 快速开始
|
||
│ │ │ ├── Configuration.tsx # 配置说明
|
||
│ │ │ ├── ColorConfiguraion.tsx # 颜色配置
|
||
│ │ │ ├── TypographyConfiguration.tsx # 字体配置
|
||
│ │ │ ├── LogoConfiguration.tsx # Logo 配置
|
||
│ │ │ ├── PackageStructure.tsx # 包结构说明
|
||
│ │ │ └── DocNavigation.tsx # 文档侧边导航
|
||
│ │ ├── Common/ # 通用组件
|
||
│ │ │ ├── Breadcrumb.tsx # 面包屑
|
||
│ │ │ ├── Loader.tsx # 加载动画
|
||
│ │ │ ├── PreLoader.tsx # 页面预加载
|
||
│ │ │ └── ScrollUp.tsx # 回到顶部按钮
|
||
│ │ ├── Skeleton/ # 骨架屏组件
|
||
│ │ │ ├── CourseDetail/index.tsx # 课程加载骨架
|
||
│ │ │ ├── Mentor/index.tsx # 导师加载骨架
|
||
│ │ │ └── Testimonial/index.tsx # 评价加载骨架
|
||
│ │ ├── SharedComponent/ # 共享组件
|
||
│ │ │ ├── HeroSub/index.tsx # 子页面 Hero
|
||
│ │ │ └── Volunteer/index.tsx # 志愿者组件
|
||
│ │ ├── Breadcrumb/index.tsx # 面包屑导航
|
||
│ │ ├── NotFound/index.tsx # 404 组件
|
||
│ │ └── ScrollToTop/index.tsx # 滚动到顶部
|
||
│ └── types/ # TypeScript 类型定义
|
||
│ ├── blog.ts # 博客类型
|
||
│ ├── breadcrumb.ts # 面包屑类型
|
||
│ ├── course.ts # 课程分类类型
|
||
│ ├── coursedetail.ts # 课程详情类型
|
||
│ ├── footerlinks.ts # 页脚链接类型
|
||
│ ├── hour.ts # 学习时长类型
|
||
│ ├── menu.ts # 菜单类型
|
||
│ ├── mentor.ts # 导师类型
|
||
│ └── testimonial.ts # 评价类型
|
||
├── utils/ # 工具函数
|
||
│ ├── aos.tsx # AOS 动画初始化
|
||
│ └── validateEmail.ts # 邮箱验证
|
||
|
||
public/ # 静态资源
|
||
└── images/
|
||
├── logo/ # Logo 图片
|
||
├── banner/ # Hero 区域背景
|
||
├── courses/ # 课程卡片图片
|
||
├── mentor/ # 导师头像
|
||
├── testimonial/ # 评价用户头像
|
||
├── slickCompany/ # 公司 Logo 轮播
|
||
├── newsletter/ # 新闻订阅图片
|
||
├── documentation/ # 文档图片
|
||
└── 404-*.svg # 404 页面图片
|
||
```
|
||
|
||
## 路由配置
|
||
|
||
| 路径 | 页面 | 说明 |
|
||
|------|------|------|
|
||
| `/` | Home | 首页 (Hero + 公司轮播 + 课程 + 导师 + 评价 + 订阅) |
|
||
| `/signin` | SignIn | 登录页面 |
|
||
| `/signup` | SignUp | 注册页面 |
|
||
| `/documentation` | Documentation | 模板文档 |
|
||
|
||
## API 路由
|
||
|
||
| 端点 | 方法 | 说明 |
|
||
|------|------|------|
|
||
| `/api/data` | GET | 获取所有前端数据 (导航、课程、导师、评价) |
|
||
| `/api/auth/*` | - | NextAuth 认证端点 |
|
||
| `/api/register` | POST | 用户注册 |
|
||
|
||
## 数据结构
|
||
|
||
### 导航菜单数据 (src/app/api/data/route.ts)
|
||
|
||
```typescript
|
||
const HeaderData = [
|
||
{
|
||
label: 'Home',
|
||
href: '/',
|
||
},
|
||
{
|
||
label: 'Pages',
|
||
href: '#',
|
||
submenu: [
|
||
{ label: 'Sign In', href: '/signin' },
|
||
{ label: 'Sign Up', href: '/signup' },
|
||
]
|
||
},
|
||
// ...
|
||
];
|
||
```
|
||
|
||
### 课程数据 (src/app/api/data/route.ts)
|
||
|
||
```typescript
|
||
const CourseDetailData = [
|
||
{
|
||
course: 'HTML, CSS & Javascript Course for Web Developers',
|
||
imageSrc: '/images/courses/courses1.svg',
|
||
profession: 'Web Development',
|
||
price: '$70.00',
|
||
category: 'webdevelopment' // 用于分类过滤
|
||
},
|
||
// ...
|
||
];
|
||
|
||
// 课程分类
|
||
const CourseData = [
|
||
{ name: 'Web Development' },
|
||
{ name: 'Mobile Development' },
|
||
{ name: 'Data Science' },
|
||
{ name: 'Cloud Computing' },
|
||
];
|
||
```
|
||
|
||
### 导师数据 (src/app/api/data/route.ts)
|
||
|
||
```typescript
|
||
const MentorData = [
|
||
{
|
||
name: 'Brooklyn Simmons',
|
||
href: '#',
|
||
imageSrc: '/images/mentor/mentor1.svg',
|
||
imageAlt: 'Brooklyn Simmons',
|
||
color: 'bg-success' // 颜色标签
|
||
},
|
||
// ...
|
||
];
|
||
```
|
||
|
||
### 评价数据 (src/app/api/data/route.ts)
|
||
|
||
```typescript
|
||
const TestimonialData = [
|
||
{
|
||
profession: 'UI/UX Designer',
|
||
name: 'Robert Fox',
|
||
imgSrc: '/images/testimonial/testimonial1.svg',
|
||
starimg: '/images/testimonial/stars.svg',
|
||
detail: '评价内容...'
|
||
},
|
||
// ...
|
||
];
|
||
```
|
||
|
||
### 类型定义
|
||
|
||
```typescript
|
||
// src/app/types/coursedetail.ts
|
||
type CourseDetailType = {
|
||
course: string;
|
||
imageSrc: string;
|
||
profession: string;
|
||
price: string;
|
||
category: 'mobiledevelopment' | 'webdevelopment' | 'datascience' | 'cloudcomputing';
|
||
};
|
||
|
||
// src/app/types/mentor.ts
|
||
type MentorType = {
|
||
name: string;
|
||
href: string;
|
||
imageSrc: string;
|
||
imageAlt: string;
|
||
color: string;
|
||
};
|
||
|
||
// src/app/types/testimonial.ts
|
||
type TestimonialType = {
|
||
profession: string;
|
||
name: string;
|
||
imgSrc: string;
|
||
starimg: string;
|
||
detail: string;
|
||
};
|
||
|
||
// src/app/types/menu.ts
|
||
type HeaderItem = {
|
||
label: string;
|
||
href: string;
|
||
submenu?: SubmenuItem[];
|
||
};
|
||
```
|
||
|
||
## 核心组件说明
|
||
|
||
### 布局系统
|
||
|
||
- `RootLayout` (src/app/layout.tsx): 根布局，包含主题Provider、认证Provider、Header和Footer
|
||
- 使用 `next-themes` 实现深色/浅色模式切换
|
||
- 使用 `next-auth` 实现用户认证
|
||
|
||
### 主题切换
|
||
|
||
主题通过 `next-themes` 的 `ThemeProvider` 管理，支持:
|
||
|
||
- `light` - 浅色主题
|
||
- `dark` - 深色主题
|
||
- `system` - 跟随系统
|
||
|
||
### 主题颜色 (src/app/globals.css)
|
||
|
||
```css
|
||
--color-primary: #611f69; /* 紫色 - 主色 */
|
||
--color-cream: #fcf5ef; /* 奶油色 - 背景 */
|
||
--color-success: #6b9f36; /* 绿色 - 成功状态 */
|
||
--color-orange: #f9cd92; /* 橙色 - 强调 */
|
||
```
|
||
|
||
### 动画效果
|
||
|
||
- **AOS (Animate On Scroll)**: 在 `src/utils/aos.tsx` 初始化，页面滚动时的进入动画
|
||
- **Framer Motion**: 高级动画库，支持复杂过渡效果
|
||
- **react-slick**: 轮播组件动画
|
||
|
||
### 认证系统
|
||
|
||
使用 `next-auth` v4，配置文件位于 `src/app/api/auth/[...nextauth]/route.ts`。
|
||
|
||
启用社交登录需要：
|
||
|
||
1. 在 `.env.local` 中配置环境变量：
|
||
|
||
```bash
|
||
NEXTAUTH_SECRET=your-secret-key
|
||
NEXTAUTH_URL=http://localhost:3000
|
||
|
||
# Google 登录
|
||
GOOGLE_CLIENT_ID=your-google-client-id
|
||
GOOGLE_CLIENT_SECRET=your-google-client-secret
|
||
|
||
# GitHub 登录
|
||
GITHUB_ID=your-github-id
|
||
GITHUB_SECRET=your-github-secret
|
||
```
|
||
|
||
2. 在 `route.ts` 中取消对应 provider 的注释
|
||
|
||
### 数据获取模式
|
||
|
||
所有页面数据从 `/api/data` 集中获取：
|
||
|
||
```typescript
|
||
// 组件中的数据获取示例
|
||
useEffect(() => {
|
||
const fetchData = async () => {
|
||
const res = await fetch('/api/data');
|
||
const data = await res.json();
|
||
setCourses(data.CourseDetailData);
|
||
};
|
||
fetchData();
|
||
}, []);
|
||
```
|
||
|
||
## 常见修改任务
|
||
|
||
### 修改网站信息
|
||
|
||
1. 修改 `src/app/components/Layout/Header/Logo/index.tsx` 中的 Logo
|
||
2. 修改 `src/app/components/Layout/Footer/index.tsx` 中的版权信息
|
||
3. 修改 `src/app/layout.tsx` 中的 metadata
|
||
|
||
### 修改导航菜单
|
||
|
||
编辑 `src/app/api/data/route.ts` 中的 `HeaderData` 数组
|
||
|
||
### 添加新页面
|
||
|
||
1. 在 `src/app/(site)/` 目录下创建新文件夹和 `page.tsx`
|
||
2. 在 `HeaderData` 中添加导航项
|
||
|
||
### 修改样式主题
|
||
|
||
1. 编辑 `src/app/globals.css` 中的 CSS 变量
|
||
2. 主要颜色: `--color-primary`, `--color-cream`, `--color-success`, `--color-orange`
|
||
|
||
### 修改课程/导师/评价数据
|
||
|
||
编辑 `src/app/api/data/route.ts` 中对应的数据数组：
|
||
- `CourseDetailData` - 课程列表
|
||
- `MentorData` - 导师列表
|
||
- `TestimonialData` - 评价列表
|
||
- `CourseData` - 课程分类
|
||
|
||
### 添加新的课程分类
|
||
|
||
1. 在 `CourseData` 添加新分类
|
||
2. 在 `CourseDetailType` 类型中添加新的 category 值
|
||
3. 在课程数据中使用新分类
|
||
|
||
## 组件使用示例
|
||
|
||
### 课程列表组件 (Courses)
|
||
|
||
```tsx
|
||
// 支持分类过滤
|
||
const categories = ['webdevelopment', 'mobiledevelopment', 'datascience', 'cloudcomputing'];
|
||
|
||
// 过滤逻辑
|
||
const filteredCourses = courses.filter(
|
||
course => selectedCategory === 'all' || course.category === selectedCategory
|
||
);
|
||
```
|
||
|
||
### 轮播组件 (Companies/Testimonial)
|
||
|
||
```tsx
|
||
// react-slick 配置
|
||
const settings = {
|
||
dots: false,
|
||
infinite: true,
|
||
slidesToShow: 4,
|
||
slidesToScroll: 1,
|
||
autoplay: true,
|
||
autoplaySpeed: 2000,
|
||
responsive: [
|
||
{ breakpoint: 1024, settings: { slidesToShow: 3 } },
|
||
{ breakpoint: 768, settings: { slidesToShow: 2 } },
|
||
]
|
||
};
|
||
```
|
||
|
||
## 图片资源
|
||
|
||
- 存放在 `public/images/` 目录
|
||
- 引用路径：`/images/xxx.svg`
|
||
- 课程图片：`/images/courses/`
|
||
- 导师头像：`/images/mentor/`
|
||
- 评价头像：`/images/testimonial/`
|
||
|
||
## 安全说明
|
||
|
||
以下依赖版本已锁定以修复安全漏洞：
|
||
|
||
- **Next.js 15.5.9** - 锁定版本，修复漏洞编号为：CVE-2025-66478
|
||
- **React 19.2.3** - 修复 React Server Components 远程代码执行漏洞 (CVE-2025-55182)
|
||
|
||
请勿使用 `^` 或 `~` 前缀以避免自动升级到有漏洞的版本。
|