SatoNano/frontend

SatoNano Frontend

现代化的用户认证系统前端，基于 Next.js 15 构建。

快速开始

1. 安装依赖

cd frontend
npm install

2. 启动开发服务器

确保后端服务已启动在 http://localhost:8000，然后：

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

开发

安装依赖

npm install
# 或
pnpm install

启动开发服务器

npm run dev

开发环境下，API 请求会自动代理到 http://localhost:8000。

构建生产版本

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