|
|
@@ -4,9 +4,9 @@
|
|
|
将tcb-shop-demo包中的主题、样式和设计规范分析并集成到当前小程序项目中，提升UI一致性和用户体验，同时保持现有系统的完整性。
|
|
|
|
|
|
## 当前进度
|
|
|
-- **完成度**: 66% (2/3 故事完成)
|
|
|
+- **完成度**: 75% (3/4 故事完成)
|
|
|
- **已集成**: 主题变量、颜色系统、字体系统、布局工具类
|
|
|
-- **待完成**: 图标字体系统、组件样式
|
|
|
+- **待完成**: 图标字体系统、组件样式、首页UI重构
|
|
|
|
|
|
## 史诗描述
|
|
|
|
|
|
@@ -25,6 +25,7 @@
|
|
|
1. ✅ **故事1：主题变量和颜色系统集成** - 迁移tcb-shop-demo的主题变量和完整的颜色系统 (已完成)
|
|
|
2. ✅ **故事2：字体系统和布局工具类集成** - 集成字体大小、字重系统和Flex布局工具类 (已完成)
|
|
|
3. **故事3：图标字体和组件样式集成** - 集成图标字体系统和常用组件样式
|
|
|
+4. **故事4：首页UI重构** - 参照tcb-shop-demo首页设计，重构小程序首页UI
|
|
|
|
|
|
## 兼容性要求
|
|
|
|
|
|
@@ -41,7 +42,7 @@
|
|
|
|
|
|
## 完成定义
|
|
|
|
|
|
-- [ ] 所有故事完成且验收标准满足 (2/3 完成)
|
|
|
+- [ ] 所有故事完成且验收标准满足 (3/4 完成)
|
|
|
- [x] 现有功能通过测试验证
|
|
|
- [x] 集成点正常工作
|
|
|
- [x] 文档适当更新
|
|
|
@@ -105,6 +106,20 @@
|
|
|
- **按钮组件**：多种按钮变体和状态
|
|
|
- **加载状态**：加载动画和状态指示器
|
|
|
|
|
|
+#### 7. 首页UI设计模式
|
|
|
+- **页面结构**：
|
|
|
+ - 顶部搜索栏（禁用状态，带搜索图标）
|
|
|
+ - 轮播图区域（自动播放，圆角设计）
|
|
|
+ - 商品列表区域（瀑布流布局）
|
|
|
+- **组件依赖**：
|
|
|
+ - TDesign组件：search, swiper, icon, toast, tabs
|
|
|
+ - 自定义组件：goods-list, goods-card, load-more
|
|
|
+- **样式特点**：
|
|
|
+ - 渐变背景：`linear-gradient(#fff, #f5f5f5)`
|
|
|
+ - 搜索框：圆角32rpx，高度64rpx
|
|
|
+ - 商品卡片：图片+标题+价格+购物车按钮布局
|
|
|
+ - 主色调应用：搜索图标颜色、购物车按钮颜色、选中状态颜色
|
|
|
+
|
|
|
## 集成策略
|
|
|
|
|
|
1. **分阶段集成**：按故事顺序逐步集成
|
|
|
@@ -148,4 +163,22 @@
|
|
|
- 与现有Tailwind CSS系统完全兼容
|
|
|
|
|
|
### 故事3：图标字体和组件样式集成 (待开始)
|
|
|
-- **计划内容**: 集成图标字体系统和常用组件样式
|
|
|
+- **计划内容**: 集成图标字体系统和常用组件样式
|
|
|
+
|
|
|
+### 故事4：首页UI重构 (待开始)
|
|
|
+- **计划内容**: 参照tcb-shop-demo首页设计，重构小程序首页UI
|
|
|
+- **主要功能模块**:
|
|
|
+ - 搜索栏组件（带搜索图标，禁用状态）
|
|
|
+ - 轮播图组件（自动播放，导航指示器）
|
|
|
+ - 商品列表组件（商品卡片布局）
|
|
|
+ - 加载状态和下拉刷新
|
|
|
+ - 商品卡片组件（图片、标题、价格、购物车按钮）
|
|
|
+- **设计规范**:
|
|
|
+ - 渐变背景色（#fff 到 #f5f5f5）
|
|
|
+ - 圆角搜索框（32rpx）
|
|
|
+ - 商品卡片间距和布局
|
|
|
+ - 主色调使用（#fa550f, #fa4126）
|
|
|
+- **技术实现**:
|
|
|
+ - 使用TDesign MiniProgram组件
|
|
|
+ - 集成已完成的主题变量和样式系统
|
|
|
+ - 保持与现有TabBarLayout的兼容性
|
yourname