002.001.homepage-styles-refinement.md 3.2 KB

Story 002.001: 首页样式精修

Status

Draft

Story

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

Acceptance Criteria

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

Tasks / Subtasks

  • 修改首页组件结构,添加Navbar组件 (AC: 5, 6, 7)
    • 在首页头部添加Navbar组件
    • 配置Navbar标题为"首页"
    • 确保Navbar样式与购物车页面一致
    • 验证Navbar不影响现有布局
  • 调整轮播图容器高度为500rpx (AC: 4, 6)
    • 修改Carousel组件高度配置
    • 更新首页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,需要修改为500rpx:

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

现有首页结构

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

兼容性要求

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

Testing

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

Change Log

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

Dev Agent Record

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

Agent Model Used

Debug Log References

Completion Notes List

File List

QA Results

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