📝 docs(category): add story for basic category components development

- create story document for商品分类页基础组件开发
- define acceptance criteria for sidebar and tabbar components
- outline implementation tasks for CategorySidebar, CategorySidebarItem, CategoryTabbar and CategoryTabbarMore
- specify testing requirements and technical implementation details

docs/stories/1.8.category-basic-components.story.md

@@ -0,0 +1,153 @@
+# Story 1.8: 商品分类页基础组件开发
+
+## Status
+Draft
+
+## Story
+**As a** 小程序用户，
+**I want** 在商品分类页使用符合tcb-shop-demo设计规范的侧边栏和标签栏组件，
+**so that** 能够方便地浏览和选择商品分类，获得一致的UI体验。
+
+## Acceptance Criteria
+1. 实现侧边栏组件（c-sidebar），宽度176rpx，支持垂直滚动
+2. 实现侧边栏项组件（c-sidebar-item），支持选中状态（左侧红色指示条，文字红色圆角背景）
+3. 实现标签栏组件（c-tabbar），支持水平滚动，当超过4项时显示更多按钮
+4. 实现标签栏更多组件（c-tabbar-more），支持下拉面板，3列网格布局
+5. 所有组件应用tcb-shop-demo组件设计规范
+6. 保持与现有TDesign组件系统的兼容性
+
+## Tasks / Subtasks
+- [ ] 实现侧边栏组件 CategorySidebar (AC: 1)
+  - [ ] 创建 `mini/src/components/category/CategorySidebar.tsx`
+  - [ ] 实现滚动容器，固定宽度176rpx
+  - [ ] 支持垂直滚动，隐藏滚动条
+  - [ ] 实现子组件管理（children tracking）
+  - [ ] 实现选中状态管理（setActive方法）
+  - [ ] 实现圆角效果管理（getTopRightRadiusItemIndexs, getBottomRightRadiusItemIndexs）
+- [ ] 实现侧边栏项组件 CategorySidebarItem (AC: 2)
+  - [ ] 创建 `mini/src/components/category/CategorySidebarItem.tsx`
+  - [ ] 实现选中状态样式（左侧红色指示条，文字红色圆角背景）
+  - [ ] 支持禁用状态
+  - [ ] 实现圆角效果（topRightRadius, bottomRightRadius）
+  - [ ] 实现点击事件处理
+- [ ] 实现标签栏组件 CategoryTabbar (AC: 3)
+  - [ ] 创建 `mini/src/components/category/CategoryTabbar.tsx`
+  - [ ] 实现水平滚动容器
+  - [ ] 支持超过4项时显示更多按钮
+  - [ ] 实现选中状态（蓝色文字，底部边框）
+  - [ ] 实现点击事件处理
+- [ ] 实现标签栏更多组件 CategoryTabbarMore (AC: 4)
+  - [ ] 创建 `mini/src/components/category/CategoryTabbarMore.tsx`
+  - [ ] 实现下拉面板
+  - [ ] 实现3列网格布局
+  - [ ] 实现展开/收起功能
+  - [ ] 实现选择事件处理
+- [ ] 应用tcb-shop-demo设计规范 (AC: 5)
+  - [ ] 应用颜色系统（主色#fa4126，选中色#0071ce）
+  - [ ] 应用字体大小和间距规范
+  - [ ] 应用圆角和边框样式
+- [ ] 确保与TDesign组件系统兼容 (AC: 6)
+  - [ ] 验证组件导入和导出
+  - [ ] 测试组件在现有页面中的集成
+  - [ ] 确保TypeScript类型定义正确
+
+## Dev Notes
+
+### 对照文件分析
+基于tcb-shop-demo组件实现，需要转换为React + Taro组件：
+
+**侧边栏组件 (c-sidebar)**
+- 宽度：176rpx，高度：100vh
+- 滚动容器：scroll-view，隐藏滚动条
+- 子组件管理：children数组跟踪，支持动态添加/移除
+- 选中状态管理：activeKey属性，setActive方法
+- 圆角效果：getTopRightRadiusItemIndexs, getBottomRightRadiusItemIndexs方法
+
+**侧边栏项组件 (c-sidebar-item)**
+- 选中状态：左侧红色指示条（6rpx宽，48rpx高），文字红色圆角背景
+- 样式：背景色#f5f5f5，选中时白色背景
+- 文字：宽度136rpx，高度36rpx，圆角36rpx
+- 圆角效果：topRightRadius, bottomRightRadius
+
+**标签栏组件 (c-tabbar)**
+- 水平滚动：scroll-view，scroll-x=true
+- 更多按钮：当tabList.length > 4时显示
+- 选中状态：蓝色文字（#0071ce），底部边框
+- 高度：100rpx，字体大小：28rpx
+
+**标签栏更多组件 (c-tabbar-more)**
+- 下拉面板：position: absolute，3列网格布局
+- 网格：flex: 0 0 calc((100% - 60rpx) / 3)
+- 样式：圆角30rpx，高度60rpx，背景色#eee
+
+### 技术栈信息
+[Source: architecture/tech-stack.md]
+- **前端框架**: React 19.1.0
+- **构建工具**: Vite 7.0.0
+- **样式**: Tailwind CSS 4.1.11 + tcb-theme.css
+- **小程序框架**: Taro
+
+### 项目结构
+[Source: architecture/source-tree.md]
+- 组件位置：`mini/src/components/category/`
+- 文件命名：PascalCase
+- 目录结构：分类组件使用子目录组织
+
+### 编码标准
+[Source: architecture/coding-standards.md]
+- TypeScript严格模式
+- 一致的缩进和命名
+- ESLint规则已配置
+
+### 测试要求
+[Source: architecture/testing-strategy.md]
+- **测试位置**: `mini/tests/unit/client/components/category/`
+- **测试框架**: Vitest + Testing Library
+- **覆盖率目标**: ≥ 80%
+- **测试类型**: 单元测试
+
+### 样式系统
+[Source: docs/prd/epic-001-tcb-shop-theme-integration.md]
+- 主色调：`#fa4126` (按钮主色)
+- 选中色：`#0071ce` (标签栏选中)
+- 背景色：`#f5f5f5` (侧边栏背景)
+- 字体大小：26rpx-28rpx
+- 圆角：16rpx-36rpx
+
+### 组件交互
+- 侧边栏与侧边栏项：父子组件关系
+- 标签栏与标签栏更多：兄弟组件关系
+- 事件传递：onClick, onChange, onSelect
+
+## Testing
+
+### 测试标准
+[Source: architecture/testing-strategy.md]
+- **测试文件位置**: `mini/tests/unit/client/components/category/`
+- **测试框架**: Vitest + Testing Library
+- **测试模式**: 单元测试
+- **覆盖率要求**: ≥ 80%
+
+### 具体测试要求
+- 每个组件独立的单元测试
+- 验证组件渲染和样式
+- 测试交互事件（点击、选中状态）
+- 测试组件间通信
+- 验证与TDesign组件的兼容性
+
+## 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