# 前端多规格功能测试指南

## 功能概述
已完成商品详情页多规格功能集成，包括：
- 规格数据加载
- 规格选择器组件
- 购物车支持SKU信息
- 立即购买支持SKU信息

## 测试步骤

### 1. 准备测试数据
在后端创建一个多规格商品，包含：
- 基础商品信息
- 规格组：颜色(红色、蓝色)、尺寸(S、M、L)
- 对应的SKU数据

### 2. 商品详情页测试
1. 访问商品详情页：`/shop/goodsDetail/index?id={商品ID}`
2. 检查是否正确加载：
   - 商品基本信息
   - 商品图片轮播
   - 价格显示

### 3. 规格选择测试
1. 点击"加入购物车"按钮
2. 应该弹出规格选择器
3. 检查规格选择器内容：
   - 商品图片和基本信息
   - 规格组显示(颜色、尺寸)
   - 规格值选项
   - 数量选择器

### 4. 规格交互测试
1. 选择不同规格组合
2. 检查：
   - SKU价格更新
   - 库存数量更新
   - 不可选规格置灰
   - 数量限制(不超过库存)

### 5. 加入购物车测试
1. 选择完整规格
2. 设置购买数量
3. 点击确定
4. 检查：
   - 成功提示
   - 购物车数量更新
   - 购物车页面显示规格信息

### 6. 立即购买测试
1. 点击"立即购买"按钮
2. 选择规格和数量
3. 点击确定
4. 检查是否正确跳转到订单确认页

## 预期行为

### 单规格商品
- 直接加入购物车/立即购买
- 不显示规格选择器

### 多规格商品
- 必须选择规格才能操作
- 显示规格选择器
- 根据选择更新价格和库存

## 数据流验证

### 1. API调用检查
打开浏览器开发者工具，检查以下API调用：
```
GET /shop/shop-goods/{id}           // 商品详情
GET /shop/shop-goods-spec?goodsId={id}  // 商品规格
GET /shop/shop-goods-sku?goodsId={id}   // 商品SKU
```

### 2. 购物车数据检查
检查本地存储中的购物车数据：
```javascript
// 在浏览器控制台执行
JSON.parse(localStorage.getItem('cart_items') || '[]')
```

应该包含SKU信息：
```json
[{
  "goodsId": 123,
  "name": "测试商品",
  "price": "99.00",
  "image": "...",
  "quantity": 2,
  "skuId": 456,
  "specInfo": "颜色:红色|尺寸:L",
  "addTime": 1640995200000
}]
```

## 常见问题排查

### 1. 规格选择器不显示
- 检查 `specs` 数组是否有数据
- 检查 `showSpecSelector` 状态
- 检查API返回数据格式

### 2. SKU匹配失败
- 检查规格值字符串格式
- 检查SKU数据中的 `sku` 字段格式
- 确认规格名称排序一致性

### 3. 价格不更新
- 检查SKU数据中的 `price` 字段
- 检查 `selectedSku` 状态更新
- 确认价格显示逻辑

### 4. 库存显示错误
- 检查SKU数据中的 `stock` 字段
- 检查库存为0时的处理逻辑
- 确认数量选择器的最大值限制

## 调试技巧

### 1. 控制台日志
在关键位置添加日志：
```javascript
console.log('Specs loaded:', specs);
console.log('SKUs loaded:', skus);
console.log('Selected SKU:', selectedSku);
```

### 2. React DevTools
使用React DevTools检查组件状态：
- GoodsDetail组件的state
- SpecSelector组件的props和state

### 3. 网络面板
检查API请求和响应：
- 请求参数是否正确
- 响应数据格式是否符合预期
- 是否有错误状态码

## 性能优化建议

1. **数据预加载**: 考虑在商品详情加载时同时加载规格数据
2. **缓存策略**: 对规格数据进行适当缓存
3. **懒加载**: 规格选择器可以考虑懒加载
4. **防抖处理**: 规格选择时的价格更新可以添加防抖

## 后续优化方向

1. **规格图片**: 支持规格值对应的商品图片
2. **规格预设**: 支持默认选中某个规格组合
3. **批量操作**: 支持批量添加不同规格的商品
4. **规格搜索**: 在规格较多时支持搜索功能