Ready for Review
As a 出行用户 I want 能够查询出行路线和筛选活动类型 so that 快速找到适合的出行方案
GET /api/v1/routes/searchmini/src/components/ 创建 AreaCascader.tsx 组件/api/v1/areas/provinces, /api/v1/areas/cities, /api/v1/areas/districtsmini/src/components/ 创建 LocationSearch.tsx 组件GET /api/v1/locationsmini-demo/pages/home/home 在 mini/src/pages/home/ 创建 index.tsxmini-demo/pages/select-activity/select-activity 在 mini/src/pages/select-activity/ 创建 ActivitySelectPage.tsxmini-demo/pages/schedule-list/schedule-list 在 mini/src/pages/schedule-list/ 创建 ScheduleListPage.tsxmini/src/components/ 创建 RouteFilter.tsx 组件mini/tests/components/)mini/tests/pages/)tests/e2e/travel-flow/)[x] 优化首页出发地目的地选择器布局 (UI/UX优化)
AreaPicker.tsxmini/src/components/AreaPicker.tsxpicker mode="multiSelector" 交互/api/v1/areas/provinces, /api/v1/areas/cities, /api/v1/areas/districtsAreaCascader 和 LocationSearch 组件SearchParams 接口:移除 startLocation/endLocation,添加 startAreaIds/endAreaIdsActivitySelectPage.tsx:接收省市区参数,直接根据省市区查询活动,无需精确地点选择ScheduleListPage.tsx:适配新的查询参数格式AreaPicker 组件单元测试:测试弹出层交互、数据加载、选择确认[x] 优化活动选择页面用户体验 (UI/UX优化)
LocationSearch 组件在活动选择页面的使用[x] 优化首页日期选择组件 (UI/UX优化)
<input type="date"> 组件mode="date" 的 Picker 组件start 为今日,end 为未来7天fields="day" 显示年月日选择器handleDateChange 函数适配新的日期选择方式根据 docs/mvp.md,以下功能在MVP阶段暂时不要实现:
GET /api/v1/routes/search
GET /api/v1/areas/provinces - 获取省份列表GET /api/v1/areas/cities?provinceId=1 - 获取城市列表GET /api/v1/areas/districts?cityId=34 - 获取区县列表GET /api/v1/locations
src/server/api/routes/index.ts (包含用户端路线查询API) [Source: architecture/source-tree.md#实际项目结构]src/server/api/areas/index.ts (故事5.1已实现) [Source: architecture/source-tree.md#实际项目结构]src/server/api/locations/index.ts (故事5.1已实现) [Source: architecture/source-tree.md#实际项目结构]mini/src/pages/home/index.tsx (首页)mini/src/pages/select-activity/ActivitySelectPage.tsx (活动选择页面)mini/src/pages/schedule-list/ScheduleListPage.tsx (班次列表页面) [Source: architecture/source-tree.md#实际项目结构]mini/src/components/AreaCascader.tsx (省市区三级联动组件)mini/src/components/LocationSearch.tsx (地点搜索组件)mini/src/components/RouteFilter.tsx (路线筛选组件) [Source: architecture/source-tree.md#实际项目结构]src/share/route.types.ts, src/share/activity.types.ts, src/share/location.types.ts, src/share/area.types.ts [Source: architecture/source-tree.md#实际项目结构]用户端路线查询: 使用React Query调用用户端路线查询API
const { data, isLoading } = useQuery({
queryKey: ['routes', searchParams],
queryFn: async () => {
const res = await routeClient.search.$get({
query: {
startLocationId: searchParams.startLocationId,
endLocationId: searchParams.endLocationId,
date: searchParams.date,
routeType: searchParams.routeType,
sortBy: searchParams.sortBy,
sortOrder: searchParams.sortOrder
}
});
if (res.status !== 200) throw new Error('查询失败');
return await res.json();
}
});
省市区查询: 使用React Query调用省市区三级联动API
地点搜索: 使用防抖搜索优化地点查询性能
认证中间件: 所有用户端API使用 authMiddleware 进行认证保护
authMiddleware 进行认证保护mini-demo/pages/ 目录下的对应页面 [Source: docs/prd/epic-005-travel-service-core.md#mini-demo页面分析]组件设计:
AreaPicker.tsx 组件采用弹出层模式,模仿小程序原生 picker 组件的交互体验布局优化:
.route-selector 布局:display: flex; align-items: center; gap: 16rpx;数据流调整:
startAreaIds, endAreaIdsstartAreaIds=[provinceId,cityId,districtId]交互流程:
AreaPicker 选择省市区API集成:
/api/v1/areas/provinces, /api/v1/areas/cities, /api/v1/areas/districts问题分析:
<input type="date"> 组件在小程序环境中存在兼容性问题解决方案:使用 Taro Picker 组件 优势:
实现方案:
<Picker
mode="date"
value={searchParams.date}
start={today}
end={future7Days}
fields="day"
onChange={handleDateChange}
>
<View className="picker-trigger">
<Text>{formatDate(searchParams.date)}</Text>
</View>
</Picker>
实现要点:
首页 (home/home):
活动选择页面 (select-activity/select-activity):
班次列表页面 (schedule-list/schedule-list):
测试要求:
tests/unit/, tests/integration/, tests/e2e/ 目录 [Source: architecture/testing-strategy.md#主项目测试体系]mini/tests/ 目录 [Source: architecture/testing-strategy.md#taro小程序测试体系]具体测试要求:
mini/tests/components/)
mini/tests/pages/)
tests/e2e/travel-flow/)
| Date | Version | Description | Author |
|---|---|---|---|
| 2025-10-20 | 2.3 | 活动选择页面用户体验优化完成:移除地点选择区域,优化查询逻辑,修复API关联关系冲突,提升页面性能 | James (Developer) |
| 2025-10-19 | 2.2 | 技术决策更新:推荐使用 Taro Picker 组件替代水平滚动方案,提供更好的小程序兼容性 | John (PM) |
| 2025-10-19 | 2.1 | 添加首页日期选择组件优化需求,解决小程序兼容性问题 | John (PM) |
| 2025-10-18 | 2.0 | 更新数据模型概念,集成故事5.1已实现功能,添加省市区三级联动和动态路线类型判断 | John (PM) |
| 2025-10-16 | 1.8 | 移除基础数据实体任务,迁移到Story 5.1 | Bob (Scrum Master) |
| 2025-10-15 | 1.7 | 修正Taro测试位置,统一使用mini/tests/目录 | Winston (Architect) |
| 2025-10-15 | 1.6 | 修正前端页面路径从src/client到mini/src目录 | Bob (Scrum Master) |
| 2025-10-15 | 1.5 | 修复测试位置与测试策略文档不一致问题,添加安全要求和数据库迁移任务 | Bob (Scrum Master) |
| 2025-10-15 | 1.4 | 补充MVP文档中标识为暂时不要的页面元素 | Bob (Scrum Master) |
| 2025-10-15 | 1.3 | 明确迁移来源为mini-demo并添加页面结构分析 | Bob (Scrum Master) |
| 2025-10-15 | 1.2 | 添加页面迁移任务和具体页面实现 | Bob (Scrum Master) |
| 2025-10-15 | 1.1 | 更新为使用通用CRUD服务 | Bob (Scrum Master) |
| 2025-10-15 | 1.0 | 初始故事创建 | Bob (Scrum Master) |
此部分由开发代理在实施过程中填写
James (Developer Agent)
src/server/utils/jwt.util.ts:1-2src/server/api/areas/index.tssrc/server/api/locations/index.tssrc/server/api.ts:13-14, 124-125, 136-137mini/src/api.ts:1-11mini/src/components/AreaCascader.tsxmini/src/components/LocationSearch.tsxmini/src/components/RouteFilter.tsxmini/src/pages/home/index.tsxmini/src/pages/select-activity/ActivitySelectPage.tsxmini/src/pages/schedule-list/ScheduleListPage.tsxmini/src/app.config.ts:2-11mini/tests/components/mini/tests/pages/tests/e2e/travel-flow/travel-flow.spec.tsAreaPicker.tsx,支持省市区三级联动src/server/api/areas/index.ts - 省市区API路由src/server/api/locations/index.ts - 地点API路由src/server/api.ts - 主API配置(添加用户端路由注册)src/server/utils/jwt.util.ts - 修复jsonwebtoken导入src/server/api/routes/index.ts - 路线API路由(支持省市区ID查询)src/server/modules/routes/route.service.ts - 路线服务(修复关联关系冲突,使用直接查询构建器)mini/src/api.ts - 更新API客户端,添加省市区、地点和路线客户端mini/src/components/AreaCascader.tsx - 省市区三级联动组件mini/src/components/LocationSearch.tsx - 地点搜索组件mini/src/components/RouteFilter.tsx - 路线筛选组件mini/src/components/AreaPicker.tsx - 弹出层省市区选择器组件mini/src/pages/home/index.tsx - 首页(已更新为紧凑布局)mini/src/pages/select-activity/ActivitySelectPage.tsx - 活动选择页面(已优化用户体验,移除地点选择,直接从路线数据获取地区信息)mini/src/pages/schedule-list/ScheduleListPage.tsx - 班次列表页面(支持省市区参数)mini/src/app.config.ts - 更新路由配置mini/tests/components/AreaCascader.test.tsx - 省市区组件单元测试mini/tests/components/LocationSearch.test.tsx - 地点搜索组件单元测试mini/tests/components/RouteFilter.test.tsx - 路线筛选组件单元测试mini/tests/components/AreaPicker.test.tsx - 弹出层省市区选择器单元测试mini/tests/pages/HomePage.test.tsx - 首页集成测试mini/tests/pages/ActivitySelectPage.test.tsx - 活动选择页面集成测试mini/tests/pages/ScheduleListPage.test.tsx - 班次列表页面集成测试tests/e2e/travel-flow/travel-flow.spec.ts - 完整出行流程E2E测试此部分由QA代理在审查完成后填写