# Design Document: Admin Integration Testing

## Overview

本文档描述了后台管理系统前后端联调测试的策略和流程设计。联调测试确保后端 API 和前端页面能够正确协作。

## 联调策略

### 分阶段联调

```mermaid
gantt
    title 前后端并行开发与联调计划
    dateFormat  YYYY-MM-DD
    section 后端开发
    基础设施搭建           :a1, 2026-02-03, 2d
    配置+内容模块          :a2, after a1, 3d
    测评模块              :a3, after a2, 4d
    用户+订单模块          :a4, after a3, 3d
    规划师+分销模块        :a5, after a4, 4d
    权限控制              :a6, after a5, 2d
    
    section 前端开发
    基础设施搭建           :b1, 2026-02-03, 2d
    Dashboard+Config      :b2, after b1, 2d
    Content模块           :b3, after b2, 2d
    Assessment模块        :b4, after b3, 4d
    User+Order模块        :b5, after b4, 3d
    Planner+Distribution  :b6, after b5, 4d
    权限控制              :b7, after b6, 2d
    
    section 联调测试
    联调1: 基础模块        :c1, 2026-02-08, 1d
    联调2: 内容+测评       :c2, 2026-02-14, 1d
    联调3: 用户+订单       :c3, 2026-02-18, 1d
    联调4: 规划师+分销     :c4, 2026-02-23, 1d
    联调5: 权限+最终验收   :c5, 2026-02-25, 2d
```

### 联调检查点

| 检查点 | 后端完成任务 | 前端完成任务 | 联调内容 |
|-------|------------|------------|---------|
| CP1 | Task 1-4 | Task 1-4 | Dashboard, Config |
| CP2 | Task 5-10 | Task 5-6 | Content, Assessment |
| CP3 | Task 11-14 | Task 7-9 | User, Order |
| CP4 | Task 15-19 | Task 10-11 | Planner, Distribution |
| CP5 | Task 20-23 | Task 12-14 | 权限控制, 最终验收 |

## 联调环境配置

### 后端配置

```json
// appsettings.Development.json
{
  "Cors": {
    "AllowedOrigins": ["http://localhost:5173"]
  }
}
```

### 前端配置

```typescript
// vite.config.ts
export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:61551',
        changeOrigin: true
      }
    }
  }
})
```

## 联调测试用例

### 1. 认证流程

```
测试步骤:
1. 打开登录页面
2. 输入用户名: admin, 密码: 123456
3. 点击登录按钮

预期结果:
- 登录成功，跳转到首页
- localStorage 中存储 accessToken 和 refreshToken
- 后续请求 Header 中包含 Authorization: Bearer {token}
```

### 2. CRUD 操作流程

```
测试步骤 (以轮播图为例):
1. 访问轮播图管理页面
2. 点击新增按钮
3. 上传图片，填写标题，选择跳转类型
4. 点击保存

预期结果:
- 图片上传成功，返回 URL
- 表单数据正确提交到后端
- 列表刷新显示新增数据
- 数据库中有对应记录
```

### 3. 分页和筛选

```
测试步骤:
1. 访问用户管理页面
2. 输入筛选条件 (手机号: 138)
3. 点击搜索
4. 切换到第 2 页

预期结果:
- 列表只显示手机号包含 138 的用户
- 分页信息正确 (总数、当前页)
- 切换页面数据正确加载
```

### 4. 权限控制

```
测试步骤:
1. 使用普通运营账号登录
2. 访问提现审核页面
3. 尝试点击审核按钮

预期结果:
- 如果无权限，审核按钮不显示
- 如果直接调用 API，返回 403 错误
```

## 常见问题排查

### 1. CORS 错误

```
问题: Access to XMLHttpRequest has been blocked by CORS policy
解决: 检查后端 CORS 配置是否包含前端地址
```

### 2. 401 未授权

```
问题: 请求返回 401 Unauthorized
解决: 
- 检查 token 是否正确存储
- 检查请求 Header 是否包含 Authorization
- 检查 token 是否过期
```

### 3. 数据格式不一致

```
问题: 前端解析数据失败
解决:
- 对比 API 文档和实际返回数据
- 检查字段名大小写 (后端 PascalCase vs 前端 camelCase)
- 检查日期格式
```

### 4. 文件上传失败

```
问题: 图片上传返回错误
解决:
- 检查文件大小限制
- 检查文件类型限制
- 检查上传路径配置
```

## 联调沟通模板

### 问题报告

```markdown
**模块**: 轮播图管理
**接口**: POST /api/admin/content/banner/create
**问题描述**: 创建轮播图时返回 500 错误
**请求参数**:
{
  "title": "测试",
  "imageUrl": "http://xxx/test.jpg",
  "linkType": 1,
  "linkUrl": "/pages/index"
}
**返回结果**:
{
  "code": 500,
  "message": "Internal Server Error"
}
**期望结果**: 返回创建成功的 ID
**前端/后端**: 后端
```

### 接口变更通知

```markdown
**接口**: GET /api/admin/user/getList
**变更类型**: 新增字段
**变更内容**: 响应数据新增 inviteCount 字段
**变更原因**: 需要显示用户邀请人数
**影响范围**: 用户列表页面
**生效时间**: 2026-02-10
```

## 验收标准

### 功能验收

- [ ] 所有 CRUD 操作正常
- [ ] 分页和筛选功能正常
- [ ] 文件上传功能正常
- [ ] 导出功能正常
- [ ] 权限控制正常

### 性能验收

- [ ] 列表页面加载时间 < 2s
- [ ] 表单提交响应时间 < 1s
- [ ] 文件上传响应时间 < 5s

### 兼容性验收

- [ ] Chrome 最新版本
- [ ] Edge 最新版本
- [ ] Firefox 最新版本