# 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)

请勿使用 `^` 或 `~` 前缀以避免自动升级到有漏洞的版本。