epic-002-tcb-shop-theme-integration.md 5.7 KB
Epic 002: 小程序页面样式精修
史诗目标
精修和增强小程序页面的视觉样式，以改善用户体验和视觉一致性，同时保持现有功能。
史诗描述
现有系统上下文
- 当前相关功能： 功能完整的小程序，包含工作正常的页面和组件
- 技术栈： Taro.js、TypeScript、Tailwind CSS、React 组件
- 集成点： 现有组件结构、主题变量、CSS 类
增强详情
- 新增/修改内容： 对现有页面进行视觉样式改进
- 集成方式： 更新 CSS 类和组件样式
- 成功标准： 提升视觉吸引力、跨页面样式一致、保持功能完整
史诗进度状态
故事列表
Story 001：首页样式精修 - ✅ 已完成
- 状态： 已完成
- 完成时间： 2025-11-22
- 验收标准： 所有功能要求已满足，轮播图高度调整为800rpx，页面滚动正常
Story 002：分类列表页面样式精修 - ✅ 已完成
- 状态： 已完成
- 完成时间： 2025-11-22
- 优先级： 中等
- 验收标准： 分类列表视觉样式优化，布局改进，保持功能完整
整体进度
- 完成故事： 2/2
- 总体进度： 100%
- 预计完成时间： 2025-11-22
用户故事详情
Story 001：首页样式精修
作为小程序用户， 我希望看到改进且视觉吸引人的首页， 以便获得更好的用户体验并更愿意使用平台。
故事上下文
- 集成对象： 现有首页组件结构（mini/src/pages/index/index.tsx）
- 技术： Taro.js、React、TypeScript、Tailwind CSS
- 遵循模式： 现有小程序组件样式模式
- 接触点： 首页组件样式、Navbar组件、Carousel组件
验收标准
功能要求
- ✅ 轮播图容器高度固定为800rpx
- ✅ 头部增加navbar（参照购物车页面的navbar）
- ✅ 首页保持所有现有功能
- ✅ 视觉设计通过更好的间距、颜色和布局得到改进
- ✅ 所有交互元素保持完全功能
集成要求
- ✅ 现有首页功能继续正常工作且不变
- ✅ 新样式遵循现有小程序组件模式
- ✅ 与现有导航和组件的集成保持当前行为
质量要求
- ✅ 变更通过视觉回归测试覆盖
- ✅ 文档根据需要更新
- ✅ 验证现有功能无回归
技术说明
- 集成方法： 修改Carousel组件高度配置，添加Navbar组件
- 现有模式参考： 购物车页面的Navbar组件模式
- 关键约束： 必须保持现有功能和性能，遵循现有组件API
完成定义
- 功能要求满足
- 集成要求验证
- 现有功能回归测试
- 代码遵循现有模式和标准
- 测试通过（现有和新测试）
- 文档根据需要更新
风险和兼容性检查
- 主要风险： 破坏现有布局或样式
- 缓解措施： 增量变更并进行充分测试
- 回滚： Git 回滚到之前的样式状态
兼容性验证
- 对现有 API 无破坏性变更
- 数据库变更（如有）仅为添加性
- UI 变更遵循现有设计模式
- 性能影响可忽略
Story 002：分类列表页面样式精修
作为小程序用户， 我希望看到改进且视觉吸引人的分类列表页面， 以便更轻松地浏览和选择商品分类，提升购物体验。
故事上下文
- 集成对象： 现有分类列表页面组件结构（mini/src/pages/category/index.tsx）
- 技术： Taro.js、React、TypeScript、Tailwind CSS
- 遵循模式： 现有小程序组件样式模式
- 接触点： 分类列表组件样式、分类项布局、页面导航
验收标准
功能要求
- 左侧分类文字高度显示完整，无截断
- 页面加载时默认选中第一个分类
- 选中分类显示左侧橙色竖条指示器（6rpx宽，48rpx高）
- 选中分类文字颜色变为橙色（#fa4126）
- 选中分类背景变为白色
- 右侧产品网格去掉白底背景，只显示图片和名称
- 广告图片高度占据页面可视区域的1/3
- 页面保持所有现有功能
集成要求
- 现有分类列表功能继续正常工作且不变
- 新样式遵循现有小程序组件模式
- 与现有导航和组件的集成保持当前行为
质量要求
- 变更通过视觉回归测试覆盖
- 文档根据需要更新
- 验证现有功能无回归
技术说明
- 集成方法： 修改分类列表组件样式，优化布局和视觉表现
- 具体修改：
- 左侧分类栏：调整文字高度显示，添加选中状态样式（橙色竖条、橙色文字、白色背景）
- 右侧产品网格：去掉白底背景，保持透明背景，只显示图片和名称
- 广告区域：调整容器高度为页面1/3，确保图片比例合适
- 现有模式参考： 首页和其他页面的组件样式模式
- 关键约束： 必须保持现有功能和性能，遵循现有组件API
完成定义
- 功能要求满足
- 集成要求验证
- 现有功能回归测试
- 代码遵循现有模式和标准
- 测试通过（现有和新测试）
- 文档根据需要更新
风险和兼容性检查
- 主要风险： 破坏现有分类列表布局或样式
- 缓解措施： 增量变更并进行充分测试
- 回滚： Git 回滚到之前的样式状态
兼容性验证
- 对现有 API 无破坏性变更
- 数据库变更（如有）仅为添加性
- UI 变更遵循现有设计模式
- 性能影响可忽略
史诗元数据
创建时间： 2025-11-22 最后更新时间： 2025-11-22 (更新故事002.002验收标准) 状态： 已完成 优先级： 中等 史诗类型： 棕地增强