|
|
@@ -0,0 +1,127 @@
|
|
|
+# Story 007.010: 班次选择页顶部显示优化
|
|
|
+
|
|
|
+## Status
|
|
|
+Draft
|
|
|
+
|
|
|
+## Story
|
|
|
+**As a** 小程序用户,
|
|
|
+**I want** 在班次选择页面看到起点显示为完整的省市区格式,并且在未选择路线时不会默认显示路线信息,
|
|
|
+**so that** 能够更清晰地了解出发地点信息,避免被预设的路线选择误导。
|
|
|
+
|
|
|
+## Acceptance Criteria
|
|
|
+1. 将起点显示格式从地点名称改为省市区格式(例如"广东省 广州市 市辖区 → 大湾区文化体育中心")
|
|
|
+2. 在顾客还没有选择路线的时候,不应该默认给顾客选择好路线并显示出来
|
|
|
+3. 使用地区API获取完整的省市区信息
|
|
|
+4. 优化页面加载逻辑,避免默认选择路线
|
|
|
+5. 验证班次选择功能正常工作
|
|
|
+
|
|
|
+## Tasks / Subtasks
|
|
|
+- [ ] 修改班次选择页面起点显示格式 (AC: 1, 3)
|
|
|
+ - [ ] 在 `mini/src/pages/schedule-list/ScheduleListPage.tsx` 中修改起点显示逻辑
|
|
|
+ - [ ] 使用地区API获取完整的省市区信息
|
|
|
+ - [ ] 将地点名称显示改为"省份 城市 区县 → 地点名称"格式
|
|
|
+ - [ ] 确保终点显示格式保持不变
|
|
|
+- [ ] 优化页面加载逻辑避免默认选择路线 (AC: 2, 4)
|
|
|
+ - [ ] 修改 `ScheduleListPage.tsx` 中的页面初始化逻辑
|
|
|
+ - [ ] 在没有有效路线数据时不显示默认路线信息
|
|
|
+ - [ ] 确保页面在没有选择路线时显示适当的提示信息
|
|
|
+ - [ ] 验证页面加载时不会自动选择第一条路线
|
|
|
+- [ ] 更新相关测试文件 (AC: 5)
|
|
|
+ - [ ] 更新 `mini/tests/pages/schedule-list.test.tsx` 测试文件
|
|
|
+ - [ ] 添加起点显示格式的测试用例
|
|
|
+ - [ ] 添加页面加载逻辑的测试用例
|
|
|
+ - [ ] 验证班次选择功能测试通过
|
|
|
+- [ ] 验证功能完整性 (AC: 5)
|
|
|
+ - [ ] 验证起点显示格式正确
|
|
|
+ - [ ] 验证页面加载时不会默认选择路线
|
|
|
+ - [ ] 验证班次选择功能正常工作
|
|
|
+ - [ ] 验证拼车和包车服务都正确应用优化
|
|
|
+
|
|
|
+## 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/schedule-list/ScheduleListPage.tsx` [Source: architecture/source-tree.md#实际项目结构]
|
|
|
+- **地区选择组件位置**: `mini/src/components/AreaPicker.tsx` [Source: architecture/source-tree.md#实际项目结构]
|
|
|
+- **API客户端**: `mini/src/api.ts` [Source: architecture/source-tree.md#实际项目结构]
|
|
|
+- **测试文件位置**: `mini/tests/pages/schedule-list.test.tsx` [Source: architecture/testing-strategy.md#taro小程序测试体系]
|
|
|
+
|
|
|
+### 现有实现分析
|
|
|
+基于对 `ScheduleListPage.tsx` 的分析:
|
|
|
+- **当前起点显示** (第216行):
|
|
|
+ ```typescript
|
|
|
+ <Text className="text-base text-white/90 mt-1 block">
|
|
|
+ {routes[0]?.startLocation.name} → {routes[0]?.endLocation.name}
|
|
|
+ </Text>
|
|
|
+ ```
|
|
|
+ - 问题:直接使用 `routes[0]` 显示第一条路线,在没有选择路线时也会显示
|
|
|
+ - 需要修改为:在没有有效路线时不显示,或者显示提示信息
|
|
|
+
|
|
|
+- **地点数据结构** (第16-31行):
|
|
|
+ ```typescript
|
|
|
+ startLocation: {
|
|
|
+ id: number
|
|
|
+ name: string
|
|
|
+ provinceId: number
|
|
|
+ cityId: number
|
|
|
+ districtId: number
|
|
|
+ address: string
|
|
|
+ }
|
|
|
+ ```
|
|
|
+ - 包含完整的省市区ID信息
|
|
|
+ - 需要调用地区API获取对应的省市区名称
|
|
|
+
|
|
|
+- **地区API可用性**:
|
|
|
+ - 省份接口: `areaClient.provinces.$get()`
|
|
|
+ - 城市接口: `areaClient.cities.$get({ provinceId })`
|
|
|
+ - 区县接口: `areaClient.districts.$get({ cityId })`
|
|
|
+ - 已在 `AreaPicker.tsx` 中实现相关调用
|
|
|
+
|
|
|
+### 修改策略
|
|
|
+- **起点显示格式**: 将 `{startLocation.name}` 改为 `{provinceName} {cityName} {districtName} → {startLocation.name}`
|
|
|
+- **页面加载逻辑**: 在没有有效路线数据时,不显示路线信息或显示"请选择路线"提示
|
|
|
+- **地区信息获取**: 使用现有的地区API接口获取省市区名称
|
|
|
+- **数据缓存**: 使用React Query缓存地区数据,避免重复请求
|
|
|
+- **错误处理**: 添加地区API调用失败时的降级方案
|
|
|
+
|
|
|
+### 数据模型
|
|
|
+- **Route接口**: 包含 `startLocation` 和 `endLocation` 字段,其中有 `provinceId`, `cityId`, `districtId` [Source: mini/src/pages/schedule-list/ScheduleListPage.tsx:16-31]
|
|
|
+- **地区API响应**:
|
|
|
+ - 省份: `{ id: number, name: string, type: 'province' }`
|
|
|
+ - 城市: `{ id: number, name: string, type: 'city' }`
|
|
|
+ - 区县: `{ id: number, name: string, type: 'district' }`
|
|
|
+ [Source: mini/src/components/AreaPicker.tsx:6-10]
|
|
|
+- **显示逻辑**: 需要将地点ID映射为对应的省市区名称
|
|
|
+
|
|
|
+### Testing
|
|
|
+- **测试框架**: Jest + @testing-library/react + React Query + Taro API mock [Source: architecture/testing-strategy.md#taro小程序测试体系]
|
|
|
+- **测试位置**: `mini/tests/pages/schedule-list.test.tsx` [Source: architecture/testing-strategy.md#taro小程序测试体系]
|
|
|
+- **测试模式**: 页面级集成测试,包含完整的业务逻辑和API集成 [Source: architecture/testing-strategy.md#taro小程序测试模式]
|
|
|
+- **测试重点**:
|
|
|
+ - 验证起点显示格式为省市区格式
|
|
|
+ - 验证页面加载时不会默认选择路线
|
|
|
+ - 验证地区API调用正确
|
|
|
+ - 验证班次选择功能正常工作
|
|
|
+ - 验证拼车和包车服务都正确应用优化
|
|
|
+
|
|
|
+## Change Log
|
|
|
+| Date | Version | Description | Author |
|
|
|
+|------|---------|-------------|--------|
|
|
|
+| 2025-11-05 | 1.0 | 初始故事创建 | Bob (Scrum Master) |
|
|
|
+
|
|
|
+## Dev Agent Record
|
|
|
+
|
|
|
+### Agent Model Used
|
|
|
+
|
|
|
+### Debug Log References
|
|
|
+
|
|
|
+### Completion Notes List
|
|
|
+
|
|
|
+### File List
|
|
|
+
|
|
|
+## QA Results
|