1.8.category-basic-components.story.md 5.4 KB
Story 1.8: 商品分类页基础组件开发
Status
Draft
Story
As a 小程序用户， I want 在商品分类页使用符合tcb-shop-demo设计规范的侧边栏和标签栏组件， so that 能够方便地浏览和选择商品分类，获得一致的UI体验。
Acceptance Criteria
- 实现侧边栏组件（c-sidebar），宽度176rpx，支持垂直滚动
- 实现侧边栏项组件（c-sidebar-item），支持选中状态（左侧红色指示条，文字红色圆角背景）
- 实现标签栏组件（c-tabbar），支持水平滚动，当超过4项时显示更多按钮
- 实现标签栏更多组件（c-tabbar-more），支持下拉面板，3列网格布局
- 所有组件应用tcb-shop-demo组件设计规范
- 保持与现有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) |