提供基本前后端骨架

2026-01-06 23:49:23 +08:00
parent 84d4ccc226
commit 06f8176e23
89 changed files with 19293 additions and 2 deletions
--- a/frontend/README.md
+++ b/frontend/README.md
@@ -0,0 +1,137 @@
+# 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 令牌自动刷新
+- ✅ 个人资料管理
+- ✅ 密码修改
+- ✅ 响应式设计
+- ✅ 深色主题
+- ✅ 动画效果
+