# Story 001.010: 商品列表页UI重构

## Status
Draft

## Story
**As a** 小程序用户，
**I want** 在商品列表页浏览和筛选商品，
**so that** 能够快速找到心仪的商品，提升购物体验。

## Acceptance Criteria
1. 参照tcb-shop-demo商品列表页设计，重构小程序商品列表页UI
2. 页面层级调整为二级页面，移除TabBarLayout
3. 页面背景色应用白色背景 `#fff`
4. 商品列表容器应用灰色背景 `#f2f2f2`，添加内边距 `20rpx 24rpx`
5. 搜索栏样式使用TDesign Search组件，圆角32rpx，高度64rpx
6. 商品列表布局使用现有的`GoodsList`组件，保持flex布局
7. 页面结构参照demo页面结构，使用相同的容器类名
8. 样式集成应用tcb-shop-demo商品列表页设计规范
9. 功能保持现有搜索、分类筛选、分页加载等功能
10. 导航栏添加返回按钮，显示页面标题

## Tasks / Subtasks
- [ ] 调整页面层级结构 (AC: 2)
  - [ ] 移除TabBarLayout包装 (`mini/src/pages/goods-list/index.tsx`)
  - [ ] 将页面改为二级页面结构 (`mini/src/pages/goods-list/index.tsx`)
  - [ ] 添加导航栏组件 (`mini/src/pages/goods-list/index.tsx`)
- [ ] 重构页面样式和布局 (AC: 3, 4, 5, 6, 7, 8)
  - [ ] 应用白色背景色 `#fff` (`mini/src/pages/goods-list/index.tsx`)
  - [ ] 创建商品列表容器，应用灰色背景 `#f2f2f2` (`mini/src/pages/goods-list/index.tsx`)
  - [ ] 添加内边距 `20rpx 24rpx` (`mini/src/pages/goods-list/index.tsx`)
  - [ ] 重构搜索栏样式，使用TDesign Search组件 (`mini/src/pages/goods-list/index.tsx`)
  - [ ] 应用圆角32rpx，高度64rpx (`mini/src/pages/goods-list/index.tsx`)
  - [ ] 保持现有`GoodsList`组件布局 (`mini/src/pages/goods-list/index.tsx`)
  - [ ] 应用tcb-shop-demo页面结构类名 (`mini/src/pages/goods-list/index.tsx`)
- [ ] 集成导航栏功能 (AC: 10)
  - [ ] 添加返回按钮 (`mini/src/pages/goods-list/index.tsx`)
  - [ ] 显示页面标题 (`mini/src/pages/goods-list/index.tsx`)
  - [ ] 实现导航功能 (`mini/src/pages/goods-list/index.tsx`)
- [ ] 保持现有功能 (AC: 9)
  - [ ] 验证搜索功能正常工作 (`mini/src/pages/goods-list/index.tsx`)
  - [ ] 验证分类筛选功能 (`mini/src/pages/goods-list/index.tsx`)
  - [ ] 验证分页加载功能 (`mini/src/pages/goods-list/index.tsx`)
  - [ ] 验证商品点击和添加到购物车功能 (`mini/src/pages/goods-list/index.tsx`)

## Dev Notes

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

**页面结构**
- 页面背景：白色 `#fff`
- 商品列表容器：灰色背景 `#f2f2f2`，内边距 `20rpx 24rpx`
- 搜索栏：TDesign Search组件，圆角32rpx，高度64rpx
- 商品列表：使用现有`GoodsList`组件，flex布局

**样式特点**
- 页面背景色：`#fff`
- 商品列表容器背景色：`#f2f2f2`
- 搜索栏圆角：`32rpx`
- 搜索栏高度：`64rpx`
- 容器内边距：`20rpx 24rpx`

**交互功能**
- 保持现有搜索功能
- 保持现有分类筛选功能
- 保持现有分页加载功能
- 保持现有商品点击和购物车功能

### 技术栈信息
[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-list/`
- 组件位置：`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` (按钮主色)
- 背景色：`#f2f2f2` (商品列表容器)
- 字体大小：28rpx (搜索栏文字)
- 圆角：32rpx (搜索栏)

### API集成
- **商品数据**: `goodsClient.$get()` 使用现有API
- **搜索功能**: 保持现有搜索逻辑
- **分页加载**: 保持现有无限滚动功能

### 组件依赖
- **基础组件**: GoodsList, GoodsCard (现有)
- **TDesign组件**: Search, Image, Toast
- **导航组件**: Navbar

## Testing

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

### 具体测试要求
- 页面组件渲染测试
- 样式应用测试
- 导航功能测试
- 现有功能回归测试
- 搜索和筛选功能测试
- 分页加载测试

## 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