001.009.category-page-development.story.md 6.7 KB
Story 001.009: 商品分类页开发
Status
Done
Story
As a 小程序用户， I want 在商品分类页浏览和选择商品分类， so that 能够快速找到感兴趣的商品类别，提升购物体验。
Acceptance Criteria
- 实现商品分类页，参照tcb-shop-demo商品分类页设计
- 使用故事8中实现的4个基础组件（侧边栏、侧边栏项、标签栏、标签栏更多）
- 实现左侧边栏一级分类导航（c-sidebar组件，宽度176rpx）
- 实现侧边栏项组件（c-sidebar-item），支持选中状态和圆角效果
- 实现右侧二级分类网格布局（3列网格，grid-template-columns: 33.33% 33.33% 33.33%）
- 实现标签栏组件（c-tabbar），支持水平滚动和下拉更多功能
- 集成分类数据API调用（getCates服务）
- 支持广告图显示（固定位置：bottom: 13%; right: 3%）
- 点击分类跳转到商品列表页（传递cateId参数）
- 应用tcb-shop-demo商品分类页设计规范
- 作为tabbar一级页面集成
- 使用现有TDesign组件：Toast
- 使用现有Shadcn组件：Image
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 组件 (
mini/src/components/category/CategorySidebar/index.tsx) - 导入 CategorySidebarItem 组件 (
mini/src/components/category/CategorySidebarItem/index.tsx) - 实现一级分类数据绑定
- 实现选中状态管理
- 实现圆角效果
- 对照文件:
/mnt/code/186-175-template-6/tcb-shop-demo/pages/goods/category/components/goods-category/components/c-sidebar/
- 导入 CategorySidebar 组件 (
- 集成标签栏组件 (AC: 2, 6)
- 导入 CategoryTabbar 组件 (
mini/src/components/category/CategoryTabbar/index.tsx) - 导入 CategoryTabbarMore 组件 (
mini/src/components/category/CategoryTabbarMore/index.tsx) - 实现二级分类数据绑定
- 实现水平滚动功能
- 实现下拉更多功能
- 对照文件:
/mnt/code/186-175-template-6/tcb-shop-demo/pages/goods/category/components/goods-category/components/c-tabbar/
- 导入 CategoryTabbar 组件 (
- 实现二级分类网格布局 (AC: 5)
- 实现3列网格布局
- 实现分类图片显示
- 实现分类名称显示
- 应用网格样式规范
- 对照文件:
/mnt/code/186-175-template-6/tcb-shop-demo/pages/goods/category/components/goods-category/index.wxml
- 集成分类数据API (AC: 7)
- 使用 goodsCategoryClient API (原getCates())
- 实现数据加载状态管理
- 实现错误处理
- 实现数据转换和格式化
- 实现广告图显示 (AC: 8)
- 实现固定位置广告图
- 使用 Shadcn Image 组件 (
mini/src/components/ui/image.tsx) - 应用固定位置样式
- 支持点击跳转功能
- 实现分类跳转功能 (AC: 9)
- 实现侧边栏项点击事件
- 实现二级分类点击事件
- 传递 cateId 参数到商品列表页
- 使用 Taro 导航 API
- 应用tcb-shop-demo设计规范 (AC: 10)
- 应用颜色系统
- 应用字体大小和间距规范
- 应用圆角和边框样式
- 应用布局规范
- 集成TDesign组件 (AC: 12)
- 使用 Shadcn Image 组件 (
mini/src/components/ui/image.tsx) - 使用 TDesign Toast 组件 (
mini/src/components/tdesign/toast) - 确保组件兼容性
- 使用 Shadcn Image 组件 (
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集成
- 分类数据:
goodsCategoryClient.$get()(原getCates()) - 商品列表: 跳转到商品列表页传递cateId参数
- 广告数据: 使用现有advertisementClient
API使用模式（基于首页分析）
- 数据加载: 使用
@tanstack/react-query的useQuery - 状态管理:
isLoading,error,data状态 - 错误处理: try-catch + 状态检查
- 数据转换: 将API返回数据转换为组件所需格式
- 缓存策略:
staleTime: 5 * 60 * 1000(5分钟)
组件依赖
- 基础组件: 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) |