📝 docs(story): add story for goods detail page UI refactoring

- create story document for goods detail page UI refactoring task
- define acceptance criteria including page structure, carousel, product info, specification selection, reviews, etc.
- outline tasks and subtasks for implementing each functional area
- provide technical notes including page structure, styling, interactions, and API integration details
- reference project architecture, tech stack, and coding standards

docs/stories/001.011.goods-detail-ui-refactor.story.md

@@ -0,0 +1,186 @@
+# Story 001.011: 商品详情页UI重构
+
+## Status
+Draft
+
+## 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
+- [ ] 重构页面整体结构 (AC: 2)
+  - [ ] 重新组织页面布局，包含轮播图、商品信息、规格选择、评价、详情介绍等区域
+  - [ ] 应用tcb-shop-demo页面结构类名和容器布局
+  - [ ] 确保页面结构与demo设计完全一致
+- [ ] 重构轮播图区域 (AC: 3)
+  - [ ] 调整Carousel组件高度为750rpx（当前为375）
+  - [ ] 保持自动播放、分页指示器功能
+  - [ ] 应用demo轮播图样式规范
+- [ ] 重构商品信息区域 (AC: 4, 5)
+  - [ ] 重新设计商品信息布局，显示价格、标题、规格选择
+  - [ ] 价格显示使用DIN Alternate字体，红色主题色
+  - [ ] 添加"起"字标识支持
+  - [ ] 应用demo商品信息区域样式
+- [ ] 实现规格选择功能 (AC: 6, 10)
+  - [ ] 实现规格选择交互，显示"已选"状态
+  - [ ] 实现规格弹窗组件，支持SKU选择和数量调整
+  - [ ] 集成SKU数据API
+  - [ ] 应用demo规格选择样式
+- [ ] 实现商品评价功能 (AC: 7)
+  - [ ] 新增评价统计显示
+  - [ ] 实现部分评价列表展示
+  - [ ] 支持跳转到评价列表页
+  - [ ] 应用demo评价区域样式
+- [ ] 重构详情介绍区域 (AC: 8)
+  - [ ] 重新设计详情介绍布局
+  - [ ] 显示商品详情图片和富文本内容
+  - [ ] 应用demo详情介绍样式
+- [ ] 重构底部操作栏 (AC: 9)
+  - [ ] 改为固定底部布局
+  - [ ] 包含加入购物车、立即购买等功能
+  - [ ] 应用demo底部操作栏样式
+- [ ] 数据集成和API调用 (AC: 11)
+  - [ ] 集成商品详情API获取商品信息
+  - [ ] 集成SKU数据API获取规格信息
+  - [ ] 集成评价数据API获取评价信息
+  - [ ] 保持现有购物车和购买功能
+- [ ] 样式集成和主题应用 (AC: 12)
+  - [ ] 应用tcb-shop-demo商品详情页设计规范
+  - [ ] 替换现有Tailwind样式为tcb-theme.css样式
+  - [ ] 确保样式与demo完全一致
+- [ ] 功能完整性和测试 (AC: 13)
+  - [ ] 验证加入购物车功能正常工作
+  - [ ] 验证立即购买功能正常工作
+  - [ ] 验证规格选择功能正常工作
+  - [ ] 验证评价查看功能正常工作
+
+## 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`) 包含：
+- 基础商品信息显示
+- 简单轮播图（高度375rpx）
+- 基础详情展示
+- 底部操作栏（数量调整，加入购物车，立即购买）
+
+需要重构的部分：
+- 页面结构完全重构
+- 轮播图高度调整
+- 规格选择功能添加
+- 评价功能添加
+- 样式完全替换
+
+## Testing
+
+### 测试标准
+[Source: architecture/testing-strategy.md]
+- **测试文件位置**: `mini/tests/unit/client/pages/goods-detail/`
+- **测试框架**: Vitest + Testing Library
+- **测试模式**: 单元测试
+- **覆盖率要求**: ≥ 80%
+
+### 具体测试要求
+- 页面组件渲染测试
+- 轮播图功能测试
+- 规格选择交互测试
+- 评价功能测试
+- 底部操作栏功能测试
+- 数据API集成测试
+- 样式应用测试
+
+## 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