# 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 令牌自动刷新
- ✅ 个人资料管理
- ✅ 密码修改
- ✅ 响应式设计
- ✅ 深色主题
- ✅ 动画效果