mini-starter/docs/stories/001.009.category-page-development.story.md

Story 001.009: 商品分类页开发

Status

Draft

Story

As a 小程序用户， I want 在商品分类页浏览和选择商品分类， so that 能够快速找到感兴趣的商品类别，提升购物体验。

Acceptance Criteria

1. 实现商品分类页，参照tcb-shop-demo商品分类页设计
2. 使用故事8中实现的4个基础组件（侧边栏、侧边栏项、标签栏、标签栏更多）
3. 实现左侧边栏一级分类导航（c-sidebar组件，宽度176rpx）
4. 实现侧边栏项组件（c-sidebar-item），支持选中状态和圆角效果
5. 实现右侧二级分类网格布局（3列网格，grid-template-columns: 33.33% 33.33% 33.33%）
6. 实现标签栏组件（c-tabbar），支持水平滚动和下拉更多功能
7. 集成分类数据API调用（getCates服务）
8. 支持广告图显示（固定位置：bottom: 13%; right: 3%）
9. 点击分类跳转到商品列表页（传递cateId参数）
10. 应用tcb-shop-demo商品分类页设计规范
11. 作为tabbar一级页面集成
12. 使用现有TDesign组件：Image、Toast

Tasks / Subtasks

• 创建商品分类页面组件 (AC: 1, 11)
  • 创建 mini/src/pages/category/ 文件夹
  • 创建 mini/src/pages/category/index.tsx
  • 创建 mini/src/pages/category/index.config.ts
  • 实现页面布局结构
  • 集成到TabBarLayout作为一级页面
  • 对照文件: /mnt/code/186-175-template-6/tcb-shop-demo/pages/goods/category/index.wxml
• 集成侧边栏组件 (AC: 2, 3, 4)
  • 导入 CategorySidebar 组件
  • 导入 CategorySidebarItem 组件
  • 实现一级分类数据绑定
  • 实现选中状态管理
  • 实现圆角效果
  • 对照文件: /mnt/code/186-175-template-6/tcb-shop-demo/pages/goods/category/components/goods-category/components/c-sidebar/
• 集成标签栏组件 (AC: 2, 6)
  • 导入 CategoryTabbar 组件
  • 导入 CategoryTabbarMore 组件
  • 实现二级分类数据绑定
  • 实现水平滚动功能
  • 实现下拉更多功能
  • 对照文件: /mnt/code/186-175-template-6/tcb-shop-demo/pages/goods/category/components/goods-category/components/c-tabbar/
• 实现二级分类网格布局 (AC: 5)
  • 实现3列网格布局
  • 实现分类图片显示
  • 实现分类名称显示
  • 应用网格样式规范
  • 对照文件: /mnt/code/186-175-template-6/tcb-shop-demo/pages/goods/category/components/goods-category/index.wxml
• 集成分类数据API (AC: 7)
  • 使用 goodsClient.getCates() API
  • 实现数据加载状态管理
  • 实现错误处理
  • 实现数据转换和格式化
• 实现广告图显示 (AC: 8)
  • 实现固定位置广告图
  • 使用 TDesign Image 组件
  • 应用固定位置样式
  • 支持点击跳转功能
• 实现分类跳转功能 (AC: 9)
  • 实现侧边栏项点击事件
  • 实现二级分类点击事件
  • 传递 cateId 参数到商品列表页
  • 使用 Taro 导航 API
• 应用tcb-shop-demo设计规范 (AC: 10)
  • 应用颜色系统
  • 应用字体大小和间距规范
  • 应用圆角和边框样式
  • 应用布局规范
• 集成TDesign组件 (AC: 12)
  • 使用 TDesign Image 组件
  • 使用 TDesign Toast 组件
  • 确保组件兼容性
• 添加单元测试 (AC: 所有)
  • 创建页面组件测试
  • 测试数据加载功能
  • 测试交互事件
  • 测试导航功能

Dev Notes

对照文件分析

基于tcb-shop-demo商品分类页实现，需要转换为React + Taro组件：

页面结构

• 左侧边栏：一级分类导航（固定宽度176rpx）
• 右侧内容区：二级分类网格布局（3列）
• 广告图区域：固定位置显示广告图

样式特点

• 左侧边栏背景色：#f5f5f5
• 右侧内容区背景色：white
• 二级分类网格：grid-template-columns: 33.33% 33.33% 33.33%
• 分类图片尺寸：144rpx × 144rpx
• 广告图位置：position: fixed; bottom: 13%; right: 3%

交互功能

• 点击侧边栏项切换一级分类
• 点击二级分类跳转到商品列表页
• 标签栏超过4项时显示更多下拉面板

技术栈信息

[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/category/
• 组件位置：mini/src/components/category/
• 文件命名：PascalCase
• 目录结构：页面使用独立目录组织

编码标准

[Source: architecture/coding-standards.md]

• TypeScript严格模式
• 一致的缩进和命名
• ESLint规则已配置
• 使用Hono RPC客户端进行API调用

样式系统

[Source: docs/prd/epic-001-tcb-shop-theme-integration.md]

• 主色调：#fa4126 (按钮主色)
• 选中色：#0071ce (标签栏选中)
• 背景色：#f5f5f5 (侧边栏背景)
• 字体大小：26rpx-28rpx
• 圆角：16rpx-36rpx

API集成

• 分类数据: goodsClient.getCates()
• 商品列表: 跳转到商品列表页传递cateId参数
• 广告数据: 使用现有advertisementClient

组件依赖

• 基础组件: CategorySidebar, CategorySidebarItem, CategoryTabbar, CategoryTabbarMore
• TDesign组件: Image, Toast
• 布局组件: TabBarLayout

Testing

测试标准

[Source: architecture/testing-strategy.md]

• 测试文件位置: mini/tests/unit/client/pages/category/
• 测试框架: 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