# Story 001.009: 商品分类页开发

## Status
Done

## 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组件：Toast
13. 使用现有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/`
- [ ] 集成标签栏组件 (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/`
- [ ] 实现二级分类网格布局 (AC: 5)
  - [ ] 实现3列网格布局
  - [ ] 实现分类图片显示
  - [ ] 实现分类名称显示
  - [ ] 应用网格样式规范
  - [ ] **对照文件**: `/mnt/code/186-175-template-6/tcb-shop-demo/pages/goods/category/components/goods-category/index.wxml`
- [x] 集成分类数据API (AC: 7)
  - [x] 使用 goodsCategoryClient API (原getCates())
  - [x] 实现数据加载状态管理
  - [x] 实现错误处理
  - [x] 实现数据转换和格式化
- [ ] 实现广告图显示 (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`)
  - [ ] 确保组件兼容性

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

## Dev Agent Record

### Agent Model Used

### Debug Log References

### Completion Notes List

### File List

## QA Results