mini-starter/docs/stories/001.008.category-basic-components.story.md

Story 001.008: 商品分类页基础组件开发

Status

Ready for Review

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/ 文件夹
  • 创建 mini/src/components/category/CategorySidebar/index.tsx
  • 创建 mini/src/components/category/CategorySidebar/CategorySidebar.css
  • 实现滚动容器，固定宽度176rpx
  • 支持垂直滚动，隐藏滚动条
  • 实现子组件管理（children tracking）
  • 实现选中状态管理（setActive方法）
  • 实现圆角效果管理（getTopRightRadiusItemIndexs, getBottomRightRadiusItemIndexs）
  • 对照文件: /mnt/code/186-175-template-6/tcb-shop-demo/pages/goods/category/components/goods-category/components/c-sidebar/
• 实现侧边栏项组件 CategorySidebarItem (AC: 2)
  • 创建 mini/src/components/category/CategorySidebarItem/ 文件夹
  • 创建 mini/src/components/category/CategorySidebarItem/index.tsx
  • 创建 mini/src/components/category/CategorySidebarItem/CategorySidebarItem.css
  • 实现选中状态样式（左侧红色指示条，文字红色圆角背景）
  • 支持禁用状态
  • 实现圆角效果（topRightRadius, bottomRightRadius）
  • 实现点击事件处理
  • 对照文件: /mnt/code/186-175-template-6/tcb-shop-demo/pages/goods/category/components/goods-category/components/c-sidebar/c-sidebar-item/
• 实现标签栏组件 CategoryTabbar (AC: 3)
  • 创建 mini/src/components/category/CategoryTabbar/ 文件夹
  • 创建 mini/src/components/category/CategoryTabbar/index.tsx
  • 创建 mini/src/components/category/CategoryTabbar/CategoryTabbar.css
  • 实现水平滚动容器
  • 支持超过4项时显示更多按钮
  • 实现选中状态（蓝色文字，底部边框）
  • 实现点击事件处理
  • 对照文件: /mnt/code/186-175-template-6/tcb-shop-demo/pages/goods/category/components/goods-category/components/c-tabbar/
• 实现标签栏更多组件 CategoryTabbarMore (AC: 4)
  • 创建 mini/src/components/category/CategoryTabbarMore/ 文件夹
  • 创建 mini/src/components/category/CategoryTabbarMore/index.tsx
  • 创建 mini/src/components/category/CategoryTabbarMore/CategoryTabbarMore.css
  • 实现下拉面板
  • 实现3列网格布局
  • 实现展开/收起功能
  • 实现选择事件处理
  • 对照文件: /mnt/code/186-175-template-6/tcb-shop-demo/pages/goods/category/components/goods-category/components/c-tabbar/c-tabbar-more/
• 应用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)
2025-11-21	1.1	实现侧边栏组件 CategorySidebar 和 CategorySidebarItem	James (Developer)
2025-11-21	1.2	完成标签栏组件 CategoryTabbar 和 CategoryTabbarMore	James (Developer)

Dev Agent Record

Agent Model Used

• James (Developer Agent)

Debug Log References

• 成功创建 CategorySidebar 和 CategorySidebarItem 组件
• 组件类型检查通过
• 基于对照文件完整实现功能

Completion Notes List

• ✅ 实现侧边栏组件 CategorySidebar (AC: 1)
• ✅ 实现侧边栏项组件 CategorySidebarItem (AC: 2)
• ✅ 实现标签栏组件 CategoryTabbar (AC: 3)
• ✅ 实现标签栏更多组件 CategoryTabbarMore (AC: 4)
• ✅ 应用 tcb-shop-demo 设计规范 (AC: 5)
• ✅ 确保与 TDesign 组件系统兼容 (AC: 6)

File List

• mini/src/components/category/CategorySidebar/index.tsx
• mini/src/components/category/CategorySidebar/CategorySidebar.css
• mini/src/components/category/CategorySidebar/README.md
• mini/src/components/category/CategorySidebarItem/index.tsx
• mini/src/components/category/CategorySidebarItem/CategorySidebarItem.css
• mini/src/components/category/CategoryTabbar/index.tsx
• mini/src/components/category/CategoryTabbar/CategoryTabbar.css
• mini/src/components/category/CategoryTabbarMore/index.tsx
• mini/src/components/category/CategoryTabbarMore/CategoryTabbarMore.css
• mini/src/components/category/index.ts

QA Results