📝 docs(story): add商品分类页开发故事文档

- 创建商品分类页开发故事文档，包含需求描述和验收标准
- 定义开发任务和子任务，明确实现步骤和对照文件
- 提供技术实现细节、样式规范和测试要求
- 记录项目结构、技术栈和API集成信息

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

@@ -0,0 +1,177 @@
+# 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