|
|
@@ -0,0 +1,171 @@
|
|
|
+# Story 007.006: 活动选择页面优化
|
|
|
+
|
|
|
+## Status
|
|
|
+Draft
|
|
|
+
|
|
|
+## Story
|
|
|
+**As a** 小程序用户,
|
|
|
+**I want** 活动选择页面暂时移除活动图片显示并简化布局,
|
|
|
+**so that** 页面加载更快,操作更简洁,同时保持活动信息完整显示。
|
|
|
+
|
|
|
+## Acceptance Criteria
|
|
|
+1. 暂时移除活动图片显示
|
|
|
+2. 简化页面布局
|
|
|
+3. 保持活动信息显示完整
|
|
|
+4. 验证活动选择功能正常工作
|
|
|
+
|
|
|
+## Tasks / Subtasks
|
|
|
+- [ ] 移除活动图片占位符 (AC: 1)
|
|
|
+ - [ ] 移除去程活动中的图片占位符(第262-264行)
|
|
|
+ - [ ] 移除返程活动中的图片占位符(第323-325行)
|
|
|
+ - [ ] 调整布局结构,移除图片占位符后的空白区域
|
|
|
+- [ ] 优化活动列表布局 (AC: 2)
|
|
|
+ - [ ] 调整去程活动列表的flex布局,移除图片占位符后的间距
|
|
|
+ - [ ] 调整返程活动列表的flex布局,移除图片占位符后的间距
|
|
|
+ - [ ] 优化活动信息显示区域,充分利用可用空间
|
|
|
+- [ ] 保持活动信息完整性 (AC: 3)
|
|
|
+ - [ ] 确保活动名称、日期、地点、地址信息完整显示
|
|
|
+ - [ ] 验证活动选择功能正常,点击活动可以正确导航到班次列表
|
|
|
+ - [ ] 确保去程和返程活动分类显示正确
|
|
|
+- [ ] 编写和更新相关测试 (AC: 4)
|
|
|
+ - [ ] 创建活动选择页面测试文件 `mini/tests/pages/ActivitySelectPage.test.tsx`
|
|
|
+ - [ ] 添加活动列表渲染测试
|
|
|
+ - [ ] 添加活动选择功能测试
|
|
|
+ - [ ] 验证页面布局优化后的功能完整性
|
|
|
+
|
|
|
+## Dev Notes
|
|
|
+
|
|
|
+### 技术栈要求
|
|
|
+- **前端框架**: Taro 4.x + React [Source: architecture/tech-stack.md#现有技术栈维护]
|
|
|
+- **小程序平台**: 微信小程序 [Source: architecture/tech-stack.md#现有技术栈维护]
|
|
|
+- **状态管理**: React Query (TanStack Query) [Source: architecture/tech-stack.md#现有技术栈维护]
|
|
|
+- **UI组件**: 自定义组件 + Heroicons [Source: architecture/tech-stack.md#现有技术栈维护]
|
|
|
+
|
|
|
+### 项目结构
|
|
|
+- **活动选择页面位置**: `mini/src/pages/select-activity/ActivitySelectPage.tsx` [Source: architecture/source-tree.md#实际项目结构]
|
|
|
+- **测试文件位置**: `mini/tests/pages/ActivitySelectPage.test.tsx` [Source: architecture/testing-strategy.md#taro小程序测试体系]
|
|
|
+- **API客户端**: `mini/src/api.ts` [Source: architecture/source-tree.md#实际项目结构]
|
|
|
+
|
|
|
+### 现有实现分析
|
|
|
+基于对 `mini/src/pages/select-activity/ActivitySelectPage.tsx` 的分析:
|
|
|
+- 当前页面包含去程和返程两个活动区域
|
|
|
+- 每个活动项包含图片占位符(第262-264行和第323-325行)
|
|
|
+- 活动信息包括:活动名称、日期、地点、地址、目的地/出发地信息
|
|
|
+- 使用flex布局,图片占位符占据固定宽度(w-16 h-16)
|
|
|
+- 活动选择通过 `handleSelectActivity` 函数处理,导航到班次列表页面
|
|
|
+
|
|
|
+### 需要修改的代码位置
|
|
|
+**去程活动图片占位符**(第262-264行):
|
|
|
+```tsx
|
|
|
+{/* 活动图片占位 - 后续可添加图片功能 */}
|
|
|
+<View className="w-16 h-16 rounded-medium mr-4 bg-gray-200 flex items-center justify-center">
|
|
|
+ <Text className="text-gray-500 text-xs">活动图片</Text>
|
|
|
+</View>
|
|
|
+```
|
|
|
+
|
|
|
+**返程活动图片占位符**(第323-325行):
|
|
|
+```tsx
|
|
|
+{/* 活动图片占位 - 后续可添加图片功能 */}
|
|
|
+<View className="w-16 h-16 rounded-medium mr-4 bg-gray-200 flex items-center justify-center">
|
|
|
+ <Text className="text-gray-500 text-xs">活动图片</Text>
|
|
|
+</View>
|
|
|
+```
|
|
|
+
|
|
|
+### 布局优化方案
|
|
|
+移除图片占位符后,需要调整flex布局:
|
|
|
+- 移除 `mr-4` 类(图片占位符右侧间距)
|
|
|
+- 调整活动信息区域的宽度,充分利用可用空间
|
|
|
+- 保持现有的信息显示结构和样式
|
|
|
+
|
|
|
+### 兼容性考虑
|
|
|
+- 保持现有的API调用和数据流不变
|
|
|
+- 保持活动选择功能完整
|
|
|
+- 确保去程和返程活动分类显示正确
|
|
|
+- 保持现有的路由导航逻辑
|
|
|
+
|
|
|
+### 项目结构对齐
|
|
|
+- **文件命名**: 保持现有kebab-case命名约定 [Source: architecture/source-tree.md#集成指南]
|
|
|
+- **导入导出**: 使用ES模块和现有别名系统 [Source: architecture/source-tree.md#集成指南]
|
|
|
+- **组件位置**: 符合现有的页面组织模式 [Source: architecture/source-tree.md#实际项目结构]
|
|
|
+
|
|
|
+### Taro测试规范
|
|
|
+- **Mock策略**: 使用统一的 `taroMock.ts` 而不是手动mock [Source: architecture/testing-strategy.md#统一Mock]
|
|
|
+- **模块重定向**: 通过jest.config.js的moduleNameMapper将@tarojs/taro重定向到taroMock [Source: architecture/testing-strategy.md#模块重定向]
|
|
|
+- **函数级控制**: 每个mock函数都可以独立控制和验证调用情况 [Source: architecture/testing-strategy.md#函数级控制]
|
|
|
+
|
|
|
+## Testing
|
|
|
+
|
|
|
+### 测试标准
|
|
|
+- **测试文件位置**: `mini/tests/pages/ActivitySelectPage.test.tsx` [Source: architecture/testing-strategy.md#taro小程序测试体系]
|
|
|
+- **测试框架**: Jest + @testing-library/react + React Query + Taro API mock [Source: architecture/testing-strategy.md#taro小程序测试体系]
|
|
|
+- **覆盖率要求**: 页面级测试 ≥ 60% [Source: architecture/testing-strategy.md#taro小程序测试体系]
|
|
|
+
|
|
|
+### 关键测试场景
|
|
|
+- 活动选择页面正确渲染,不显示图片占位符
|
|
|
+- 去程活动列表正确显示,包含完整活动信息
|
|
|
+- 返程活动列表正确显示,包含完整活动信息
|
|
|
+- 活动选择功能正常工作,点击活动正确导航到班次列表
|
|
|
+- 页面布局优化后,活动信息显示完整且布局合理
|
|
|
+- 无活动时的空状态显示正确
|
|
|
+
|
|
|
+### 测试模式
|
|
|
+基于最新的测试文件模式 [Source: architecture/testing-strategy.md#最新测试模式和最佳实践]:
|
|
|
+```typescript
|
|
|
+// 测试环境设置
|
|
|
+const createTestQueryClient = () => new QueryClient({
|
|
|
+ defaultOptions: {
|
|
|
+ queries: { retry: false },
|
|
|
+ },
|
|
|
+})
|
|
|
+
|
|
|
+// 组件包装器
|
|
|
+const Wrapper = ({ children }: { children: React.ReactNode }) => (
|
|
|
+ <QueryClientProvider client={createTestQueryClient()}>
|
|
|
+ {children}
|
|
|
+ </QueryClientProvider>
|
|
|
+)
|
|
|
+
|
|
|
+// 导入统一的Taro mock
|
|
|
+import taroMock, { mockUseRouter } from '../../tests/__mocks__/taroMock'
|
|
|
+```
|
|
|
+
|
|
|
+### 测试数据管理
|
|
|
+- **模拟路由参数**: 测试不同的出发地和目的地组合
|
|
|
+- **API模拟**: 模拟活动数据获取成功和失败场景
|
|
|
+- **边界测试**: 测试无活动、单活动、多活动等边界情况
|
|
|
+
|
|
|
+## Risk and Compatibility Check
|
|
|
+
|
|
|
+### 风险评估
|
|
|
+- **主要风险**: 布局调整可能影响现有样式和用户体验
|
|
|
+- **缓解措施**: 保持现有信息结构,仅移除图片占位符和调整间距
|
|
|
+- **回滚方案**: 恢复原有的图片占位符和布局
|
|
|
+
|
|
|
+### 兼容性验证
|
|
|
+- [x] 对现有API无破坏性变更
|
|
|
+- [x] 无数据库变更
|
|
|
+- [x] UI变更遵循现有设计模式
|
|
|
+- [x] 性能影响可忽略(可能提升加载速度)
|
|
|
+- [x] 现有功能无回归
|
|
|
+
|
|
|
+## Change Log
|
|
|
+| Date | Version | Description | Author |
|
|
|
+|------|---------|-------------|--------|
|
|
|
+| 2025-10-31 | 1.0 | 初始故事创建 | Bob (Scrum Master) |
|
|
|
+
|
|
|
+## Dev Agent Record
|
|
|
+
|
|
|
+### Agent Model Used
|
|
|
+*此部分将由开发代理在实现过程中填写*
|
|
|
+
|
|
|
+### Debug Log References
|
|
|
+*此部分将由开发代理在实现过程中填写*
|
|
|
+
|
|
|
+### Completion Notes List
|
|
|
+*此部分将由开发代理在实现过程中填写*
|
|
|
+
|
|
|
+### File List
|
|
|
+*此部分将由开发代理在实现过程中填写*
|
|
|
+
|
|
|
+## QA Results
|
|
|
+*此部分将由QA代理在质量保证过程中填写*
|