138 lines
3.5 KiB
Markdown
138 lines
3.5 KiB
Markdown
# SatoNano Frontend
|
||
|
||
现代化的用户认证系统前端，基于 Next.js 15 构建。
|
||
|
||
## 快速开始
|
||
|
||
### 1. 安装依赖
|
||
|
||
```bash
|
||
cd frontend
|
||
npm install
|
||
```
|
||
|
||
### 2. 启动开发服务器
|
||
|
||
确保后端服务已启动在 `http://localhost:8000`，然后：
|
||
|
||
```bash
|
||
npm run dev
|
||
```
|
||
|
||
前端将运行在 `http://localhost:3000`，API 请求会自动代理到后端。
|
||
|
||
### 3. 配置 OAuth2（可选）
|
||
|
||
如果需要使用 Linux.do OAuth2 登录：
|
||
|
||
1. 在 Linux.do 开发者后台注册应用
|
||
2. 设置回调 URL 为：
|
||
- 开发环境：`http://localhost:3000/oauth2/callback`
|
||
- 生产环境：`https://your-domain.com/oauth2/callback`
|
||
3. 更新 `config.yaml` 中的 OAuth2 配置
|
||
|
||
## 技术栈
|
||
|
||
- **框架**: Next.js 15 (App Router)
|
||
- **语言**: TypeScript
|
||
- **样式**: Tailwind CSS
|
||
- **状态管理**: Zustand
|
||
- **表单处理**: React Hook Form + Zod
|
||
- **动画**: Framer Motion
|
||
- **图标**: Lucide Icons
|
||
|
||
## 开发
|
||
|
||
### 安装依赖
|
||
|
||
```bash
|
||
npm install
|
||
# 或
|
||
pnpm install
|
||
```
|
||
|
||
### 启动开发服务器
|
||
|
||
```bash
|
||
npm run dev
|
||
```
|
||
|
||
开发环境下，API 请求会自动代理到 `http://localhost:8000`。
|
||
|
||
### 构建生产版本
|
||
|
||
```bash
|
||
npm run build
|
||
```
|
||
|
||
构建后的静态文件将输出到 `out` 目录。
|
||
|
||
## 项目结构
|
||
|
||
```
|
||
frontend/
|
||
├── src/
|
||
│ ├── app/ # Next.js App Router 页面
|
||
│ │ ├── dashboard/ # 用户控制台
|
||
│ │ ├── login/ # 登录页
|
||
│ │ ├── register/ # 注册页
|
||
│ │ ├── oauth2/ # OAuth2 回调
|
||
│ │ ├── globals.css # 全局样式
|
||
│ │ ├── layout.tsx # 根布局
|
||
│ │ └── page.tsx # 首页
|
||
│ ├── components/ # React 组件
|
||
│ │ ├── ui/ # 通用 UI 组件
|
||
│ │ ├── auth/ # 认证相关组件
|
||
│ │ └── dashboard/ # Dashboard 组件
|
||
│ └── lib/ # 工具库
|
||
│ ├── api.ts # API 服务层
|
||
│ ├── store.ts # 状态管理
|
||
│ ├── utils.ts # 工具函数
|
||
│ └── validations.ts # 表单验证
|
||
├── public/ # 静态资源
|
||
├── next.config.ts # Next.js 配置
|
||
├── tailwind.config.ts # Tailwind 配置
|
||
└── tsconfig.json # TypeScript 配置
|
||
```
|
||
|
||
## 开发/生产环境
|
||
|
||
### 开发环境
|
||
|
||
- 前端运行在 `http://localhost:3000`
|
||
- API 请求通过 Next.js 的 rewrites 代理到后端 `http://localhost:8000`
|
||
- 支持热重载
|
||
|
||
### 生产环境
|
||
|
||
构建后输出静态文件到 `out` 目录，由后端 FastAPI 服务托管：
|
||
|
||
1. 构建前端：`npm run build`
|
||
2. 静态文件会被输出到 `frontend/out/`
|
||
3. 后端会自动挂载该目录作为静态文件服务
|
||
4. 前后端位于同一域名，无跨域问题
|
||
|
||
### OAuth2 配置说明
|
||
|
||
OAuth2 登录流程：
|
||
|
||
```
|
||
用户点击登录 → 前端获取授权URL → 重定向到Linux.do →
|
||
用户授权 → 重定向回前端/oauth2/callback → 前端调用后端API →
|
||
获取JWT令牌 → 登录成功
|
||
```
|
||
|
||
**重要**：确保 `config.yaml` 中的 `oauth2_callback_path` 设置为 `/oauth2/callback`（前端路由），而非后端 API 路径。
|
||
|
||
## 功能特性
|
||
|
||
- ✅ 用户登录/注册
|
||
- ✅ OAuth2 第三方登录 (Linux.do)
|
||
- ✅ JWT 令牌自动刷新
|
||
- ✅ 个人资料管理
|
||
- ✅ 密码修改
|
||
- ✅ 响应式设计
|
||
- ✅ 深色主题
|
||
- ✅ 动画效果
|
||
|