mini-starter/docs/stories/002.001.homepage-styles-refinement.md

Story 002.001: 首页样式精修

Status

Ready for Review

Story

As a 小程序用户， I want 看到改进且视觉吸引人的首页， so that 获得更好的用户体验并更愿意使用平台。

Acceptance Criteria

1. 首页保持所有现有功能
2. 视觉设计通过更好的间距、颜色和布局得到改进
3. 所有交互元素保持完全功能
4. 轮播图容器高度固定为600rpx
5. 轮播图图片高度固定为600rpx
6. 头部增加navbar（参照购物车页面的navbar）
7. 现有首页功能继续正常工作且不变
8. 新样式遵循现有小程序组件模式
9. 与现有导航和组件的集成保持当前行为
10. 变更通过视觉回归测试覆盖
11. 文档根据需要更新
12. 验证现有功能无回归

Tasks / Subtasks

• 修改首页组件结构，添加Navbar组件 (AC: 5, 6, 7)
  • 在首页头部添加Navbar组件
  • 配置Navbar标题为"首页"
  • 确保Navbar样式与购物车页面一致
  • 验证Navbar不影响现有布局
• 调整轮播图容器和图片高度为600rpx (AC: 4, 5, 7)
  • 修改Carousel组件高度配置为600rpx
  • 更新首页CSS样式中的轮播图容器高度
  • 更新首页CSS样式中的轮播图图片高度
  • 验证轮播图显示正常
• 精修首页整体样式 (AC: 1, 2, 3)
  • 优化页面间距和布局
  • 改进颜色搭配和视觉层次
  • 确保所有交互元素正常工作
• 进行回归测试 (AC: 9, 11)
  • 验证现有功能无破坏
  • 进行视觉回归测试
  • 测试不同屏幕尺寸的适配

Dev Notes

技术上下文

• 项目结构： 小程序使用Taro.js + React + TypeScript + Tailwind CSS
• 首页位置： mini/src/pages/index/index.tsx
• 相关组件：
  • Navbar组件：mini/src/components/ui/navbar.tsx
  • Carousel组件：mini/src/components/ui/carousel.tsx
  • TabBarLayout布局：mini/src/layouts/tab-bar-layout
• 样式文件： mini/src/pages/index/index.css

Navbar组件参考

购物车页面使用的Navbar配置：

<Navbar
  title="购物车"
  leftIcon=""
  onClickLeft={() => Taro.navigateBack()}
  rightIcon="i-heroicons-trash-20-solid"
  onClickRight={() => { /* 清空购物车逻辑 */ }}
/>

Carousel组件配置

当前轮播图高度为200rpx，需要修改为600rpx：

<Carousel
  items={finalImgSrcs.filter(item => item.imageFile?.fullUrl).map((item) => ({
    src: item.imageFile!.fullUrl
  }))}
  height={600} // 修改此项
/>

现有首页结构

• 使用TabBarLayout作为根布局
• 包含搜索栏和轮播图区域
• 下方是商品列表
• 当前没有Navbar组件

兼容性要求

• 必须保持所有现有功能
• 遵循现有组件模式
• 不破坏现有布局结构

Testing

• 测试位置： mini/src/pages/index/__tests__/
• 测试框架： Vitest + React Testing Library
• 测试要求：
  • 验证Navbar正确显示
  • 验证轮播图容器高度为600rpx
  • 验证轮播图图片高度为600rpx
  • 验证所有现有功能正常工作
  • 进行视觉回归测试

Change Log

Date	Version	Description	Author
2025-11-22	1.0	初始创建故事文档	Bob (Scrum Master)

Dev Agent Record

此部分由开发代理在实施过程中填写

Agent Model Used

• Claude Sonnet 4.5 (claude-sonnet-4-5-20250929)

Debug Log References

• 类型检查通过，仅存在现有项目配置问题
• 代码语法正确，无编译错误

Completion Notes List

1. ✅ 成功添加Navbar组件到首页头部
2. ✅ 将轮播图容器高度从200rpx调整为600rpx
3. ✅ 将轮播图图片高度调整为600rpx
4. ✅ 精修首页整体样式，包括：
   • 优化页面间距和布局
   • 改进颜色搭配和视觉层次
   • 增强加载状态和错误状态的视觉反馈
5. ✅ 修复轮播图图片显示问题
   • 修复图片不显示：修复finalImgSrcs变量定义，确保默认值为空数组
   • 替换Carousel组件为直接使用Taro Swiper组件，解决高度和显示问题
   • 使用aspectFit模式，配合flex布局确保图片在固定高度容器内居中显示
   • 优化图片显示：高度600rpx固定，宽度自适应，图片居中显示
6. ✅ 完成回归测试验证

File List

• mini/src/pages/index/index.tsx - 添加Navbar组件，修改Carousel高度，修复轮播图图片显示问题
• mini/src/pages/index/index.css - 更新轮播图容器和图片高度，优化整体样式
• mini/src/components/ui/carousel.tsx - 优化图片显示：高度固定600rpx，宽度自适应，图片居中显示
• docs/stories/002.001.homepage-styles-refinement.md - 更新故事文档

QA Results

此部分由QA代理在审查完成后填写