📝 docs(prd): add epic and story for homepage style refinement

- 创建Epic 002文档，描述小程序页面样式精修目标和背景
- 添加Story 001详细文档，包含首页样式精修的用户故事、验收标准和技术说明
- 记录首页样式改进的具体任务和技术实现指导

docs/prd/epic-002-tcb-shop-theme-integration.md

@@ -0,0 +1,79 @@
+# Epic 002: 小程序页面样式精修
+
+## 史诗目标
+精修和增强小程序页面的视觉样式，以改善用户体验和视觉一致性，同时保持现有功能。
+
+## 史诗描述
+
+### 现有系统上下文
+- **当前相关功能：** 功能完整的小程序，包含工作正常的页面和组件
+- **技术栈：** Taro.js、TypeScript、Tailwind CSS、React 组件
+- **集成点：** 现有组件结构、主题变量、CSS 类
+
+### 增强详情
+- **新增/修改内容：** 对现有页面进行视觉样式改进
+- **集成方式：** 更新 CSS 类和组件样式
+- **成功标准：** 提升视觉吸引力、跨页面样式一致、保持功能完整
+
+### 用户故事
+
+## Story 001：首页样式精修
+
+作为小程序用户，
+我希望看到改进且视觉吸引人的首页，
+以便获得更好的用户体验并更愿意使用平台。
+
+### 故事上下文
+- **集成对象：** 现有首页组件结构（mini/src/pages/index/index.tsx）
+- **技术：** Taro.js、React、TypeScript、Tailwind CSS
+- **遵循模式：** 现有小程序组件样式模式
+- **接触点：** 首页组件样式、Navbar组件、Carousel组件
+
+### 验收标准
+
+#### 功能要求
+1. 轮播图容器高度固定为500rpx
+2. 头部增加navbar（参照购物车页面的navbar）
+3. 首页保持所有现有功能
+4. 视觉设计通过更好的间距、颜色和布局得到改进
+5. 所有交互元素保持完全功能
+
+#### 集成要求
+6. 现有首页功能继续正常工作且不变
+7. 新样式遵循现有小程序组件模式
+8. 与现有导航和组件的集成保持当前行为
+
+#### 质量要求
+9. 变更通过视觉回归测试覆盖
+10. 文档根据需要更新
+11. 验证现有功能无回归
+
+### 技术说明
+- **集成方法：** 修改Carousel组件高度配置，添加Navbar组件
+- **现有模式参考：** 购物车页面的Navbar组件模式
+- **关键约束：** 必须保持现有功能和性能，遵循现有组件API
+
+### 完成定义
+- [ ] 功能要求满足
+- [ ] 集成要求验证
+- [ ] 现有功能回归测试
+- [ ] 代码遵循现有模式和标准
+- [ ] 测试通过（现有和新测试）
+- [ ] 文档根据需要更新
+
+### 风险和兼容性检查
+- **主要风险：** 破坏现有布局或样式
+- **缓解措施：** 增量变更并进行充分测试
+- **回滚：** Git 回滚到之前的样式状态
+
+### 兼容性验证
+- [x] 对现有 API 无破坏性变更
+- [x] 数据库变更（如有）仅为添加性
+- [x] UI 变更遵循现有设计模式
+- [x] 性能影响可忽略
+
+
+**创建时间：** 2025-11-22
+**状态：** 进行中
+**优先级：** 中等
+**史诗类型：** 棕地增强

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

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