gitadmin/turingflow-landing-002
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
“dongming”
2025-12-19 13:01:41 +08:00
commit c5e710b94b
114 changed files with 5902 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

406
README.md Normal file
View File

@@ -0,0 +1,406 @@
# 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
npm install
npm 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)
请勿使用 `^` 或 `~` 前缀以避免自动升级到有漏洞的版本。