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

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代理在审查完成后填写