mini-starter/docs/stories/001.010.goods-list-ui-refactor.story.md

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