|
@@ -4,9 +4,9 @@
|
|
|
将tcb-shop-demo包中的主题、样式和设计规范分析并集成到当前小程序项目中,提升UI一致性和用户体验,同时保持现有系统的完整性。
|
|
将tcb-shop-demo包中的主题、样式和设计规范分析并集成到当前小程序项目中,提升UI一致性和用户体验,同时保持现有系统的完整性。
|
|
|
|
|
|
|
|
## 当前进度
|
|
## 当前进度
|
|
|
-- **完成度**: 87.5% (7/8 故事完成)
|
|
|
|
|
|
|
+- **完成度**: 77.8% (7/9 故事完成)
|
|
|
- **已集成**: 主题变量、颜色系统、字体系统、布局工具类、组件样式、首页UI重构、首页商品列表数据读取、首页轮播图后台广告数据、用户中心UI重构
|
|
- **已集成**: 主题变量、颜色系统、字体系统、布局工具类、组件样式、首页UI重构、首页商品列表数据读取、首页轮播图后台广告数据、用户中心UI重构
|
|
|
-- **待完成**: 商品分类页开发
|
|
|
|
|
|
|
+- **待完成**: 商品分类页基础组件开发、商品分类页开发
|
|
|
|
|
|
|
|
## 史诗描述
|
|
## 史诗描述
|
|
|
|
|
|
|
@@ -69,17 +69,40 @@
|
|
|
- 保持现有用户认证和头像上传功能
|
|
- 保持现有用户认证和头像上传功能
|
|
|
- 集成客服弹窗功能
|
|
- 集成客服弹窗功能
|
|
|
|
|
|
|
|
-8. **故事8:商品分类页开发** - 参照tcb-shop-demo商品分类页设计,在mini增加商品分类页,并作为tabbar一级页
|
|
|
|
|
|
|
+8. **故事8:商品分类页基础组件开发** - 实现商品分类页所需的4个基础组件:侧边栏、侧边栏项、标签栏、标签栏更多组件
|
|
|
|
|
+ - **组件依赖**:
|
|
|
|
|
+ - 侧边栏组件:c-sidebar(滚动容器,宽度176rpx)- 待实现
|
|
|
|
|
+ - 侧边栏项组件:c-sidebar-item(选中状态、圆角效果)- 待实现
|
|
|
|
|
+ - 标签栏组件:c-tabbar(水平滚动,支持更多)- 待实现
|
|
|
|
|
+ - 标签栏更多组件:c-tabbar-more(下拉面板,3列网格)- 待实现
|
|
|
|
|
+ - **对照文件**:
|
|
|
|
|
+ - `tcb-shop-demo/pages/goods/category/components/goods-category/components/c-sidebar/*` - 侧边栏组件
|
|
|
|
|
+ - `tcb-shop-demo/pages/goods/category/components/goods-category/components/c-sidebar/c-sidebar-item/*` - 侧边栏项组件
|
|
|
|
|
+ - `tcb-shop-demo/pages/goods/category/components/goods-category/components/c-tabbar/*` - 标签栏组件
|
|
|
|
|
+ - `tcb-shop-demo/pages/goods/category/components/goods-category/components/c-tabbar/c-tabbar-more/*` - 标签栏更多组件
|
|
|
|
|
+ - **目标文件**:
|
|
|
|
|
+ - `mini/src/components/category/CategorySidebar.tsx` - 侧边栏组件
|
|
|
|
|
+ - `mini/src/components/category/CategorySidebarItem.tsx` - 侧边栏项组件
|
|
|
|
|
+ - `mini/src/components/category/CategoryTabbar.tsx` - 标签栏组件
|
|
|
|
|
+ - `mini/src/components/category/CategoryTabbarMore.tsx` - 标签栏更多组件
|
|
|
|
|
+ - **技术要点**:
|
|
|
|
|
+ - 实现侧边栏滚动容器,固定宽度176rpx
|
|
|
|
|
+ - 实现侧边栏项选中状态(左侧红色指示条,文字红色圆角背景)
|
|
|
|
|
+ - 实现标签栏水平滚动,支持超过4项时显示更多按钮
|
|
|
|
|
+ - 实现标签栏更多下拉面板,3列网格布局
|
|
|
|
|
+ - 应用tcb-shop-demo组件设计规范
|
|
|
|
|
+ - 保持与现有TDesign组件系统的兼容性
|
|
|
|
|
+
|
|
|
|
|
+9. **故事9:商品分类页开发** - 参照tcb-shop-demo商品分类页设计,在mini增加商品分类页,并作为tabbar一级页
|
|
|
- **对照文件**:
|
|
- **对照文件**:
|
|
|
- `tcb-shop-demo/pages/goods/category/index.wxml` - 商品分类页结构模板
|
|
- `tcb-shop-demo/pages/goods/category/index.wxml` - 商品分类页结构模板
|
|
|
- `tcb-shop-demo/pages/goods/category/index.wxss` - 商品分类页样式文件
|
|
- `tcb-shop-demo/pages/goods/category/index.wxss` - 商品分类页样式文件
|
|
|
- `tcb-shop-demo/pages/goods/category/index.js` - 商品分类页逻辑文件
|
|
- `tcb-shop-demo/pages/goods/category/index.js` - 商品分类页逻辑文件
|
|
|
- `tcb-shop-demo/pages/goods/category/components/goods-category/index.wxml` - 商品分类组件结构
|
|
- `tcb-shop-demo/pages/goods/category/components/goods-category/index.wxml` - 商品分类组件结构
|
|
|
- `tcb-shop-demo/pages/goods/category/components/goods-category/index.wxss` - 商品分类组件样式
|
|
- `tcb-shop-demo/pages/goods/category/components/goods-category/index.wxss` - 商品分类组件样式
|
|
|
- - `tcb-shop-demo/pages/goods/category/components/goods-category/components/c-sidebar/*` - 侧边栏组件
|
|
|
|
|
- - `tcb-shop-demo/pages/goods/category/components/goods-category/components/c-tabbar/*` - 标签栏组件
|
|
|
|
|
- **目标文件**: `mini/src/pages/category/index.tsx`
|
|
- **目标文件**: `mini/src/pages/category/index.tsx`
|
|
|
- **技术要点**:
|
|
- **技术要点**:
|
|
|
|
|
+ - 使用故事8中实现的4个基础组件
|
|
|
- 实现左侧边栏一级分类导航(c-sidebar组件,宽度176rpx)
|
|
- 实现左侧边栏一级分类导航(c-sidebar组件,宽度176rpx)
|
|
|
- 实现侧边栏项组件(c-sidebar-item),支持选中状态和圆角效果
|
|
- 实现侧边栏项组件(c-sidebar-item),支持选中状态和圆角效果
|
|
|
- 实现右侧二级分类网格布局(3列网格,grid-template-columns: 33.33% 33.33% 33.33%)
|
|
- 实现右侧二级分类网格布局(3列网格,grid-template-columns: 33.33% 33.33% 33.33%)
|
|
@@ -106,7 +129,7 @@
|
|
|
|
|
|
|
|
## 完成定义
|
|
## 完成定义
|
|
|
|
|
|
|
|
-- [ ] 所有故事完成且验收标准满足 (7/8 完成)
|
|
|
|
|
|
|
+- [ ] 所有故事完成且验收标准满足 (7/9 完成)
|
|
|
- [x] 现有功能通过测试验证
|
|
- [x] 现有功能通过测试验证
|
|
|
- [x] 集成点正常工作
|
|
- [x] 集成点正常工作
|
|
|
- [x] 文档适当更新
|
|
- [x] 文档适当更新
|
|
@@ -206,10 +229,7 @@
|
|
|
- 右侧内容区:二级分类网格布局(3列)- 待实现
|
|
- 右侧内容区:二级分类网格布局(3列)- 待实现
|
|
|
- 广告图区域:固定位置显示广告图 - 待实现
|
|
- 广告图区域:固定位置显示广告图 - 待实现
|
|
|
- **组件依赖**:
|
|
- **组件依赖**:
|
|
|
- - 侧边栏组件:c-sidebar(滚动容器,宽度176rpx)- 待实现
|
|
|
|
|
- - 侧边栏项组件:c-sidebar-item(选中状态、圆角效果)- 待实现
|
|
|
|
|
- - 标签栏组件:c-tabbar(水平滚动,支持更多)- 待实现
|
|
|
|
|
- - 标签栏更多组件:c-tabbar-more(下拉面板,3列网格)- 待实现
|
|
|
|
|
|
|
+ - 使用故事8中实现的4个基础组件
|
|
|
- TDesign组件:image, toast - 待实现
|
|
- TDesign组件:image, toast - 待实现
|
|
|
- **样式特点**:
|
|
- **样式特点**:
|
|
|
- 左侧边栏背景色:`#f5f5f5` - 待实现
|
|
- 左侧边栏背景色:`#f5f5f5` - 待实现
|
|
@@ -241,6 +261,7 @@
|
|
|
- ✅ 首页商品数据真实化
|
|
- ✅ 首页商品数据真实化
|
|
|
- ✅ 首页轮播图使用后台广告数据
|
|
- ✅ 首页轮播图使用后台广告数据
|
|
|
- ✅ 用户中心UI与tcb-shop-demo设计一致
|
|
- ✅ 用户中心UI与tcb-shop-demo设计一致
|
|
|
|
|
+- [ ] 商品分类页基础组件与tcb-shop-demo设计一致
|
|
|
- [ ] 商品分类页与tcb-shop-demo设计一致
|
|
- [ ] 商品分类页与tcb-shop-demo设计一致
|
|
|
|
|
|
|
|
## 故事完成状态
|
|
## 故事完成状态
|