# Story 001.011: 商品详情页UI重构

## Status
Done

## Story
**As a** 小程序用户，
**I want** 在商品详情页查看完整的商品信息和购买选项，
**so that** 能够做出明智的购买决策并完成购物流程。

## Acceptance Criteria
1. 参照tcb-shop-demo商品详情页设计，重构小程序商品详情页UI
2. 页面结构重构，包含商品轮播图、商品信息、规格选择、商品评价、详情介绍等区域
3. 轮播图区域保持使用现有shadcn Carousel组件，高度调整为750rpx（当前为375）
4. 商品信息区域重新设计，显示商品价格、标题、规格选择
5. 价格显示使用特殊字体DIN Alternate，红色主题色，支持"起"字标识
6. 规格选择实现规格选择交互，显示"已选"状态，支持规格弹窗
7. 商品评价新增评价统计和部分评价列表，支持跳转到评价列表页
8. 详情介绍重新设计详情介绍区域，显示商品详情图片和富文本内容
9. 底部操作栏重构，改为固定底部，包含加入购物车、立即购买等功能
10. 规格弹窗实现商品规格选择弹窗，支持SKU选择和数量调整
11. 数据集成商品详情API，获取商品信息、SKU数据、评价数据
12. 样式集成应用tcb-shop-demo商品详情页设计规范，替换现有Tailwind样式
13. 功能实现支持加入购物车、立即购买、规格选择、评价查看等完整功能

## Tasks / Subtasks
- [x] 重构页面整体结构 (AC: 2)
  - [x] 重新组织页面布局，包含轮播图、商品信息、规格选择、评价、详情介绍等区域 (`mini/src/pages/goods-detail/index.tsx`)
  - [x] 应用tcb-shop-demo页面结构类名和容器布局 (`mini/src/pages/goods-detail/index.tsx`)
  - [x] 确保页面结构与demo设计完全一致 (`mini/src/pages/goods-detail/index.tsx`)
- [x] 重构轮播图区域 (AC: 3)
  - [x] 调整Carousel组件高度为750rpx（当前为375） (`mini/src/pages/goods-detail/index.tsx`)
  - [x] 保持自动播放、分页指示器功能 (`mini/src/pages/goods-detail/index.tsx`)
  - [x] 应用demo轮播图样式规范 (`mini/src/pages/goods-detail/index.tsx`)
- [x] 重构商品信息区域 (AC: 4, 5)
  - [x] 重新设计商品信息布局，显示价格、标题、规格选择 (`mini/src/pages/goods-detail/index.tsx`)
  - [x] 价格显示使用DIN Alternate字体，红色主题色 (`mini/src/pages/goods-detail/index.tsx`)
  - [x] 添加"起"字标识支持 (`mini/src/pages/goods-detail/index.tsx`)
  - [x] 应用demo商品信息区域样式 (`mini/src/pages/goods-detail/index.tsx`)
- [x] 实现规格选择功能 (AC: 6, 10)
  - [x] 实现规格选择交互，显示"已选"状态 (`mini/src/pages/goods-detail/index.tsx`)
  - [x] 实现规格弹窗组件，支持SKU选择和数量调整 (`mini/src/components/goods-spec-selector/index.tsx`)
  - [x] 集成SKU数据API (`mini/src/pages/goods-detail/index.tsx`)
  - [x] 应用demo规格选择样式 (`mini/src/pages/goods-detail/index.tsx`, `mini/src/components/goods-spec-selector/index.tsx`)
- [x] 实现商品评价功能 (AC: 7)
  - [x] 新增评价统计显示 (`mini/src/pages/goods-detail/index.tsx`)
  - [x] 实现部分评价列表展示 (`mini/src/pages/goods-detail/index.tsx`)
  - [x] 支持跳转到评价列表页 (`mini/src/pages/goods-detail/index.tsx`)
  - [x] 应用demo评价区域样式 (`mini/src/pages/goods-detail/index.tsx`)
- [x] 重构详情介绍区域 (AC: 8)
  - [x] 重新设计详情介绍布局 (`mini/src/pages/goods-detail/index.tsx`)
  - [x] 显示商品详情图片和富文本内容 (`mini/src/pages/goods-detail/index.tsx`)
  - [x] 应用demo详情介绍样式 (`mini/src/pages/goods-detail/index.tsx`)
- [x] 重构底部操作栏 (AC: 9)
  - [x] 改为固定底部布局 (`mini/src/pages/goods-detail/index.tsx`)
  - [x] 包含加入购物车、立即购买等功能 (`mini/src/pages/goods-detail/index.tsx`)
  - [x] 应用demo底部操作栏样式 (`mini/src/pages/goods-detail/index.tsx`)
- [x] 数据集成和API调用 (AC: 11)
  - [x] 集成商品详情API获取商品信息 (`mini/src/pages/goods-detail/index.tsx`)
  - [x] 集成SKU数据API获取规格信息 (`mini/src/pages/goods-detail/index.tsx`)
  - [x] 集成评价数据API获取评价信息 (`mini/src/pages/goods-detail/index.tsx`)
  - [x] 保持现有购物车和购买功能 (`mini/src/pages/goods-detail/index.tsx`)
- [x] 样式集成和主题应用 (AC: 12)
  - [x] 应用tcb-shop-demo商品详情页设计规范 (`mini/src/pages/goods-detail/index.tsx`)
  - [x] 替换现有Tailwind样式为专用CSS文件 (`mini/src/pages/goods-detail/index.css`)
  - [x] 确保样式与demo完全一致 (`mini/src/pages/goods-detail/index.tsx`)
- [x] 功能完整性和测试 (AC: 13)
  - [x] 验证加入购物车功能正常工作 (`mini/src/pages/goods-detail/index.tsx`)
  - [x] 验证立即购买功能正常工作 (`mini/src/pages/goods-detail/index.tsx`)
  - [x] 验证规格选择功能正常工作 (`mini/src/pages/goods-detail/index.tsx`, `mini/src/components/goods-spec-selector/index.tsx`)
  - [x] 验证评价查看功能正常工作 (`mini/src/pages/goods-detail/index.tsx`)

## Dev Notes

### 对照文件分析
基于tcb-shop-demo商品详情页实现，需要转换为React + Taro组件：

**页面结构**
- 轮播图区域：高度750rpx，自动播放，分页指示器
- 商品信息区域：价格（DIN Alternate字体，红色），标题，规格选择
- 规格选择区域：显示"已选"状态，支持规格弹窗
- 商品评价区域：评价统计，部分评价列表，跳转链接
- 详情介绍区域：商品详情图片，富文本内容
- 底部操作栏：固定底部，加入购物车，立即购买

**样式特点**
- 轮播图高度：750rpx
- 价格字体：DIN Alternate，红色主题色
- 规格选择：选中状态样式，弹窗样式
- 评价区域：评分显示，评价列表样式
- 底部操作栏：固定定位，按钮样式

**交互功能**
- 规格选择弹窗交互
- 评价列表跳转
- 加入购物车和立即购买
- 数量调整功能

### 技术栈信息
[Source: architecture/tech-stack.md]
- **前端框架**: React 19.1.0
- **构建工具**: Vite 7.0.0
- **样式**: Tailwind CSS 4.1.11 + tcb-theme.css
- **小程序框架**: Taro
- **状态管理**: React Query 5.83.0

### 项目结构
[Source: architecture/source-tree.md]
- 页面位置：`mini/src/pages/goods-detail/`
- 组件位置：`mini/src/components/ui/`
- 文件命名：PascalCase
- 目录结构：页面使用独立目录组织

### 编码标准
[Source: architecture/coding-standards.md]
- TypeScript严格模式
- 一致的缩进和命名
- ESLint规则已配置
- 使用Hono RPC客户端进行API调用

### 样式系统
[Source: docs/prd/epic-001-tcb-shop-theme-integration.md]
- 主色调：`#fa4126` (按钮主色)
- 价格字体：DIN Alternate
- 轮播图高度：750rpx
- 规格选择：选中状态样式

### API集成
- **商品详情**: `goodsClient[':id'].$get()` 使用现有API
- **SKU数据**: 需要集成SKU相关API
- **评价数据**: 需要集成评价相关API
- **购物车功能**: 保持现有购物车逻辑

### 组件依赖
- **基础组件**: Carousel, Button, Card, Navbar (现有)
- **新组件**: 规格选择弹窗，评价列表组件
- **TDesign组件**: 可能需要新的TDesign组件

### 现有代码分析
当前商品详情页 (`mini/src/pages/goods-detail/index.tsx`) 包含：
- 基础商品信息显示 (`mini/src/pages/goods-detail/index.tsx:141-169`)
- 简单轮播图（高度375rpx）(`mini/src/pages/goods-detail/index.tsx:127-137`)
- 基础详情展示 (`mini/src/pages/goods-detail/index.tsx:172-186`)
- 底部操作栏（数量调整，加入购物车，立即购买）(`mini/src/pages/goods-detail/index.tsx:191-232`)

需要重构的部分：
- 页面结构完全重构 (`mini/src/pages/goods-detail/index.tsx`)
- 轮播图高度调整 (`mini/src/pages/goods-detail/index.tsx:131`)
- 规格选择功能添加 (`mini/src/pages/goods-detail/index.tsx`, `mini/src/components/goods-spec-selector/index.tsx`)
- 评价功能添加 (`mini/src/pages/goods-detail/index.tsx`)
- 样式完全替换 (`mini/src/pages/goods-detail/index.tsx`)

## Testing

### 测试标准
[Source: architecture/testing-strategy.md]
- **测试文件位置**: `mini/tests/unit/client/pages/goods-detail/`
- **测试框架**: Vitest + Testing Library
- **测试模式**: 单元测试
- **覆盖率要求**: ≥ 80%

### 具体测试要求
- 页面组件渲染测试 (`mini/tests/unit/client/pages/goods-detail/index.test.tsx`)
- 轮播图功能测试 (`mini/tests/unit/client/pages/goods-detail/index.test.tsx`)
- 规格选择交互测试 (`mini/tests/unit/client/pages/goods-detail/index.test.tsx`, `mini/tests/unit/client/components/goods-spec-selector/index.test.tsx`)
- 评价功能测试 (`mini/tests/unit/client/pages/goods-detail/index.test.tsx`)
- 底部操作栏功能测试 (`mini/tests/unit/client/pages/goods-detail/index.test.tsx`)
- 数据API集成测试 (`mini/tests/unit/client/pages/goods-detail/index.test.tsx`)
- 样式应用测试 (`mini/tests/unit/client/pages/goods-detail/index.test.tsx`)

## Change Log
| Date | Version | Description | Author |
|------|---------|-------------|--------|
| 2025-11-21 | 1.0 | 初始故事创建 | Bob (Scrum Master) |

## Dev Agent Record

### Agent Model Used

### Debug Log References

### Completion Notes List

### File List

## QA Results