# Pandora 前后端集成说明

## 🚀 快速启动

### 1. 启动后端服务

```bash
cd backend
npm install
npm run dev
```

后端服务将在 `http://localhost:3001` 启动

### 2. 启动前端服务

```bash
cd frontend
npm install
npm run dev
```

前端服务将在 `http://localhost:3000` 启动

## 🔧 配置说明

### 后端配置

后端使用 SQLite 数据库，无需额外配置。主要配置项在 `backend/.env` 文件中：

- `DATABASE_URL`: SQLite 数据库路径
- `JWT_SECRET`: JWT 密钥
- `PORT`: 服务端口 (默认 3001)

### 前端配置

前端 API 基础 URL 配置在 `frontend/src/utils/api.ts` 中：

```typescript
const API_BASE_URL = import.meta.env.VITE_API_BASE_URL || 'http://localhost:3001/api'
```

## 🧪 测试集成

### 1. API 测试页面

访问 `http://localhost:3000/test` 可以测试各种 API 功能：

- 获取路径列表
- 用户注册
- 用户登录
- 获取用户信息

### 2. 功能测试

1. **用户注册**: 访问首页，切换到注册模式，填写信息并注册
2. **用户登录**: 使用注册的邮箱和密码登录
3. **路径权限**: 登录后查看仪表板中的路径权限
4. **账号管理**: 查看分配的网站账号

## 📋 已实现的功能

### 后端 API

- ✅ 用户注册 (`POST /api/auth/register`)
- ✅ 用户登录 (`POST /api/auth/login`)
- ✅ 邮箱验证 (`POST /api/auth/verify-email`)
- ✅ 密码重置 (`POST /api/auth/forgot-password`, `POST /api/auth/reset-password`)
- ✅ TOTP 二步验证 (`POST /api/auth/verify-totp`)
- ✅ 用户信息管理 (`GET /api/auth/profile`, `PUT /api/auth/profile`)
- ✅ 路径权限管理 (`GET /api/paths`, `GET /api/paths/user`)
- ✅ 账号管理 (`GET /api/accounts/user`)
- ✅ 管理员功能 (`/api/admin/*`)

### 前端功能

- ✅ 用户认证状态管理 (Pinia Store)
- ✅ API 服务层 (Axios)
- ✅ 路由守卫
- ✅ 登录/注册界面
- ✅ 用户仪表板
- ✅ 路径权限显示
- ✅ 账号列表显示
- ✅ Toast 通知
- ✅ 响应式设计

## 🔐 认证流程

1. **注册**: 用户填写信息 → 后端创建用户 → 发送验证邮件
2. **登录**: 用户输入邮箱密码 → 后端验证 → 返回 JWT Token
3. **权限验证**: 前端请求携带 Token → 后端验证权限 → 返回数据
4. **路径选择**: 用户选择登录路径 → 验证路径权限 → 进入系统

## 🛠️ 开发工具

### 后端开发

```bash
# 数据库迁移
npm run db:migrate

# 生成 Prisma 客户端
npm run db:generate

# 查看数据库
npm run db:studio
```

### 前端开发

```bash
# 代码检查
npm run lint

# 类型检查
npm run type-check

# 构建生产版本
npm run build
```

## 🐛 常见问题

### 1. CORS 错误

确保后端 CORS 配置正确，允许前端域名访问。

### 2. 数据库连接错误

检查 SQLite 数据库文件是否存在，确保有写入权限。

### 3. API 请求失败

检查后端服务是否正常运行，API 地址是否正确。

### 4. 认证失败

检查 JWT Token 是否正确传递，Token 是否过期。

## 📝 下一步开发

1. **完善管理后台**: 实现用户管理、权限管理、账号管理界面
2. **添加更多安全功能**: API 限流、IP 白名单、审计日志
3. **优化用户体验**: 添加加载状态、错误处理、表单验证
4. **性能优化**: 数据库查询优化、前端代码分割、缓存策略
5. **测试覆盖**: 单元测试、集成测试、端到端测试

## 🔗 相关文档

- [后端 API 文档](./backend/README.md)
- [前端开发文档](./frontend/README.md)
- [数据库设计文档](./TODO.md)