mini-starter/docs/stories/007.008.activity-select-time-hide.story.md

Story 007.008: 活动选择页时间隐藏优化

Status

Ready for Review

Story

As a 小程序用户， I want 在活动选择页面隐藏活动时间显示， so that 页面更加简洁，同时保持活动名称、地点和地址信息的完整显示。

Acceptance Criteria

1. 在活动选择页面隐藏活动时间显示
2. 保持活动名称、地点和地址信息正常显示
3. 确保去程和返程活动卡片都应用相同的优化
4. 验证活动选择功能正常工作

Tasks / Subtasks

• 隐藏去程活动时间显示 (AC: 1, 2, 3)
  • 在 mini/src/pages/select-activity/ActivitySelectPage.tsx 中隐藏去程活动的时间显示（第271行）
  • 确保去程活动名称、地点、地址信息保持正常显示
  • 验证去程活动选择功能正常
• 隐藏返程活动时间显示 (AC: 1, 2, 3)
  • 在 mini/src/pages/select-activity/ActivitySelectPage.tsx 中隐藏返程活动的时间显示（第333行）
  • 确保返程活动名称、地点、地址信息保持正常显示
  • 验证返程活动选择功能正常
• 更新相关测试 (AC: 4)
  • 更新 mini/tests/pages/ActivitySelectPage.test.tsx 测试文件
  • 验证时间隐藏后的页面渲染正确
  • 确保活动选择功能测试通过
• 验证功能完整性 (AC: 4)
  • 验证去程和返程活动选择功能正常工作
  • 验证页面布局优化后的功能完整性
  • 确保活动信息显示完整且正确

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 的分析：

• 活动时间显示在去程活动卡片第271行：<Text className="text-sm text-gray-500 mt-1 block">{info.date}</Text>
• 活动时间显示在返程活动卡片第333行：<Text className="text-sm text-gray-500 mt-1 block">{info.date}</Text>
• 活动名称、地点、地址信息分别显示在时间信息的上方和下方
• 活动选择功能通过 handleSelectActivity 函数实现

修改策略

• 隐藏时间显示：注释掉或移除显示活动时间的Text组件
• 保持其他信息：活动名称、地点、地址信息保持不变
• 布局调整：移除时间显示后可能需要微调布局间距

数据模型

• Activity接口：包含 startDate 和 endDate 字段 [Source: mini/src/pages/select-activity/ActivitySelectPage.tsx:10-45]
• getActivityDisplayInfo函数：格式化活动显示信息，包括日期 [Source: mini/src/pages/select-activity/ActivitySelectPage.tsx:175-189]

测试

• 测试框架: Jest + @testing-library/react + React Query + Taro API mock [Source: architecture/testing-strategy.md#taro小程序测试体系]
• 测试位置: mini/tests/pages/ActivitySelectPage.test.tsx [Source: architecture/testing-strategy.md#taro小程序测试体系]
• 测试模式: 页面级集成测试，包含完整的业务逻辑和API集成 [Source: architecture/testing-strategy.md#taro小程序测试模式]

Change Log

Date	Version	Description	Author
2025-11-01	1.0	初始故事创建	Bob (Scrum Master)

Dev Agent Record

Agent Model Used

• James (Developer Agent)

Debug Log References

• 成功隐藏去程活动时间显示（第271行）
• 成功隐藏返程活动时间显示（第333行）
• 更新测试验证时间隐藏功能
• 所有活动选择页面测试通过

Completion Notes List

1. 使用注释方式隐藏活动时间显示，便于未来恢复使用
2. 保持活动名称、地点、地址信息正常显示
3. 验证去程和返程活动选择功能正常工作
4. 更新测试确保时间隐藏后的页面渲染正确

File List

• mini/src/pages/select-activity/ActivitySelectPage.tsx - 隐藏活动时间显示
• mini/tests/pages/ActivitySelectPage.test.tsx - 更新测试验证时间隐藏

QA Results