|
|
@@ -0,0 +1,114 @@
|
|
|
+# 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配置：
|
|
|
+```tsx
|
|
|
+<Navbar
|
|
|
+ title="购物车"
|
|
|
+ leftIcon=""
|
|
|
+ onClickLeft={() => Taro.navigateBack()}
|
|
|
+ rightIcon="i-heroicons-trash-20-solid"
|
|
|
+ onClickRight={() => { /* 清空购物车逻辑 */ }}
|
|
|
+/>
|
|
|
+```
|
|
|
+
|
|
|
+### Carousel组件配置
|
|
|
+当前轮播图高度为200rpx，需要修改为500rpx：
|
|
|
+```tsx
|
|
|
+<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代理在审查完成后填写*
|
yourname