Przeglądaj źródła

📝 docs(category-page): update development story with completed tasks and API changes

- mark "集成分类数据API" task as completed
- update API client from goodsClient.getCates() to goodsCategoryClient.$get()
- replace TDesign Image component with Shadcn Image component reference
- add API使用模式章节 with react-query and state management guidelines
yourname 1 miesiąc temu
rodzic
commit
36e729ab51

+ 14 - 7
docs/stories/001.009.category-page-development.story.md

@@ -50,14 +50,14 @@ Draft
   - [ ] 实现分类名称显示
   - [ ] 应用网格样式规范
   - [ ] **对照文件**: `/mnt/code/186-175-template-6/tcb-shop-demo/pages/goods/category/components/goods-category/index.wxml`
-- [ ] 集成分类数据API (AC: 7)
-  - [ ] 使用 goodsClient.getCates() API
-  - [ ] 实现数据加载状态管理
-  - [ ] 实现错误处理
-  - [ ] 实现数据转换和格式化
+- [x] 集成分类数据API (AC: 7)
+  - [x] 使用 goodsCategoryClient API (原getCates())
+  - [x] 实现数据加载状态管理
+  - [x] 实现错误处理
+  - [x] 实现数据转换和格式化
 - [ ] 实现广告图显示 (AC: 8)
   - [ ] 实现固定位置广告图
-  - [ ] 使用 TDesign Image 组件
+  - [ ] 使用 Shadcn Image 组件 (`mini/src/components/ui/image.tsx`)
   - [ ] 应用固定位置样式
   - [ ] 支持点击跳转功能
 - [ ] 实现分类跳转功能 (AC: 9)
@@ -128,10 +128,17 @@ Draft
 - 圆角:16rpx-36rpx
 
 ### API集成
-- **分类数据**: `goodsClient.getCates()`
+- **分类数据**: `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