# Story 007.006: 活动选择页面优化

## Status
Completed

## Story
**As a** 小程序用户，
**I want** 活动选择页面暂时移除活动图片显示并简化布局，
**so that** 页面加载更快，操作更简洁，同时保持活动信息完整显示。

## Acceptance Criteria
1. 暂时移除活动图片显示
2. 简化页面布局
3. 保持活动信息显示完整
4. 验证活动选择功能正常工作

## Tasks / Subtasks
- [x] 移除活动图片占位符 (AC: 1)
  - [x] 移除去程活动中的图片占位符（第262-264行）
  - [x] 移除返程活动中的图片占位符（第323-325行）
  - [x] 调整布局结构，移除图片占位符后的空白区域
- [x] 优化活动列表布局 (AC: 2)
  - [x] 调整去程活动列表的flex布局，移除图片占位符后的间距
  - [x] 调整返程活动列表的flex布局，移除图片占位符后的间距
  - [x] 优化活动信息显示区域，充分利用可用空间
- [x] 保持活动信息完整性 (AC: 3)
  - [x] 确保活动名称、日期、地点、地址信息完整显示
  - [x] 验证活动选择功能正常，点击活动可以正确导航到班次列表
  - [x] 确保去程和返程活动分类显示正确
- [x] 编写和更新相关测试 (AC: 4)
  - [x] 创建活动选择页面测试文件 `mini/tests/pages/ActivitySelectPage.test.tsx`
  - [x] 添加活动列表渲染测试
  - [x] 添加活动选择功能测试
  - [x] 验证页面布局优化后的功能完整性

## 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小程序测试体系]

### 关键测试场景
- 活动选择页面正确渲染，不显示图片占位符
- 去程活动列表正确显示，包含完整活动信息
- 返程活动列表正确显示，包含完整活动信息
- 活动选择功能正常工作，点击活动正确导航到班次列表
- 页面布局优化后，活动信息显示完整且布局合理
- 无活动时的空状态显示正确
- 使用精确的data-testid验证活动名称正确分配到对应区域

### 测试模式
基于最新的测试文件模式 [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) |
| 2025-10-31 | 1.1 | 完成布局优化和测试修复 | Claude Agent |

## Dev Agent Record

### Agent Model Used
- Claude Sonnet 4.5 (claude-sonnet-4-5-20250929)

### Debug Log References
- 修复了ActivitySelectPage测试中的重复日期元素问题
- 修复了Taro mock中navigateBack函数的导出问题
- 为头部日期和活动名称添加了data-testid以支持精确测试
- 验证了所有10个测试用例都通过

### Completion Notes List
1. **布局优化完成**：成功移除了活动图片占位符，简化了页面布局
2. **测试修复完成**：修复了所有失败的测试用例，确保测试覆盖完整
3. **测试改进**：
   - 为头部日期添加了`data-testid="header-date"`
   - 为去程活动名称添加了`data-testid="departure-activity-name-1"`
   - 为返程活动名称添加了`data-testid="return-activity-name-2"`
   - 使用精确的testid验证活动名称是否正确分配到对应区域
4. **测试状态**：所有10个测试用例全部通过，测试覆盖率完整

### File List
- `mini/src/pages/select-activity/ActivitySelectPage.tsx` - 主页面组件，已移除图片占位符
- `mini/tests/pages/ActivitySelectPage.test.tsx` - 测试文件，包含10个完整的测试用例
- `mini/tests/__mocks__/taroMock.ts` - Taro API mock文件，已修复navigateBack导出问题

## QA Results
*此部分将由QA代理在质量保证过程中填写*