Răsfoiți Sursa

📝 docs(story): add schedule page display optimization story

- create story document for schedule page optimization requirements
- define acceptance criteria for origin display format and route selection logic
- outline development tasks including UI modification and logic optimization
- provide technical implementation strategy and testing requirements
- document data models and API integration points for the feature
yourname 3 luni în urmă
părinte
comite
d79c71163d

+ 127 - 0
docs/stories/007.010.schedule-page-display-optimization.story.md

@@ -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