|
@@ -0,0 +1,177 @@
|
|
|
|
|
+# Mini 小程序用户体验优化 - Brownfield Enhancement
|
|
|
|
|
+
|
|
|
|
|
+## Epic Goal
|
|
|
|
|
+
|
|
|
|
|
+对现有 mini 小程序进行用户体验优化和功能完善,提升用户界面的友好性和操作便利性,同时简化部分功能以降低开发复杂度。
|
|
|
|
|
+
|
|
|
|
|
+## Epic Description
|
|
|
|
|
+
|
|
|
|
|
+### Existing System Context
|
|
|
|
|
+
|
|
|
|
|
+**Current relevant functionality:**
|
|
|
|
|
+- 用户个人资料页面:显示用户头像、用户名、会员信息等功能(mini/src/pages/profile/index.tsx:1-320)
|
|
|
|
|
+- 客服系统:当前显示"功能开发中..."提示,需要集成微信客服API
|
|
|
|
|
+- 活动选择页面:显示活动列表和活动图片(mini/src/pages/select-activity/ActivitySelectPage.tsx:1-365)
|
|
|
|
|
+- 购票页面:包含出发日期选择、乘车人信息、价格计算等功能(mini/src/pages/order/index.tsx:1-838)
|
|
|
|
|
+- 首页:包含目的地选择、出行方式选择、轮播图等功能(mini/src/pages/home/index.tsx:1-342)
|
|
|
|
|
+
|
|
|
|
|
+**Technology stack:**
|
|
|
|
|
+- Taro + React + TypeScript 小程序框架
|
|
|
|
|
+- 微信小程序原生API
|
|
|
|
|
+- TanStack Query 数据管理
|
|
|
|
|
+- 现有的UI组件系统(Button, Card, Dialog等)
|
|
|
|
|
+- 环境变量配置系统(mini/.env.development)
|
|
|
|
|
+
|
|
|
|
|
+**Integration points:**
|
|
|
|
|
+- 微信客服API集成(wx.openCustomerServiceChat)
|
|
|
|
|
+- 用户认证系统(useAuth hook)
|
|
|
|
|
+- 地区选择组件(AreaPicker)
|
|
|
|
|
+- 活动数据接口(routeClient)
|
|
|
|
|
+- 环境变量配置(TARO_APP_*)
|
|
|
|
|
+
|
|
|
|
|
+### Enhancement Details
|
|
|
|
|
+
|
|
|
|
|
+**What's being added/changed:**
|
|
|
|
|
+1. **微信客服功能优化** - 实现通过API直接打开微信客服
|
|
|
|
|
+ - 替换现有的"功能开发中..."提示
|
|
|
|
|
+ - 使用微信官方API `wx.openCustomerServiceChat`
|
|
|
|
|
+ - 配置企业ID和客服链接到环境变量
|
|
|
|
|
+ - 添加错误处理和降级方案
|
|
|
|
|
+
|
|
|
|
|
+2. **个人资料显示优化** - 实现默认头像显示和统一用户名
|
|
|
|
|
+ - 用户无头像时显示默认头像(mini/images/default_avatar.jpg)
|
|
|
|
|
+ - 用户名统一暂时显示为"普通用户"
|
|
|
|
|
+ - 保持现有的头像上传功能
|
|
|
|
|
+
|
|
|
|
|
+3. **常见问题功能优化** - 实现弹窗显示富文本内容
|
|
|
|
|
+ - 替换现有的"功能开发中..."提示
|
|
|
|
|
+ - 使用Dialog组件显示富文本内容
|
|
|
|
|
+ - 支持HTML格式的常见问题内容
|
|
|
|
|
+ - 提升用户体验和操作便利性
|
|
|
|
|
+
|
|
|
|
|
+4. **购票页面优化** - 暂时隐藏出发日期选择功能
|
|
|
|
|
+ - 在购票页面暂时隐藏出发日期选择
|
|
|
|
|
+ - 保持现有的其他购票流程完整
|
|
|
|
|
+ - 简化用户操作步骤
|
|
|
|
|
+
|
|
|
|
|
+5. **首页目的地默认值配置** - 实现通过环境变量配置默认省市区ID
|
|
|
|
|
+ - 在mini/.env和mini/.env.development中添加默认目的地配置
|
|
|
|
|
+ - 首页自动使用配置的默认省市区ID
|
|
|
|
|
+ - 支持开发环境和正式环境不同配置
|
|
|
|
|
+
|
|
|
|
|
+6. **活动选择页面优化** - 暂时移除活动图片显示
|
|
|
|
|
+ - 在活动选择页面暂时移除活动图片占位符
|
|
|
|
|
+ - 简化页面布局,提升加载速度
|
|
|
|
|
+ - 保持活动信息显示完整
|
|
|
|
|
+
|
|
|
|
|
+**How it integrates:**
|
|
|
|
|
+- 微信客服:使用现有的微信小程序API,配置环境变量
|
|
|
|
|
+- 个人资料:修改现有的用户信息显示逻辑,使用默认头像和用户名
|
|
|
|
|
+- 常见问题:使用现有的Dialog组件,显示富文本内容
|
|
|
|
|
+- 购票页面:修改现有的日期选择逻辑,暂时隐藏该功能
|
|
|
|
|
+- 首页:修改现有的地区选择逻辑,使用环境变量配置的默认值
|
|
|
|
|
+- 活动选择:修改现有的活动列表显示逻辑,移除图片占位符
|
|
|
|
|
+
|
|
|
|
|
+**Success criteria:**
|
|
|
|
|
+- 用户点击"联系客服"时直接打开微信客服,不再显示开发中提示
|
|
|
|
|
+- 用户无头像时显示默认头像,用户名统一显示为"普通用户"
|
|
|
|
|
+- 用户点击"常见问题"时弹出Dialog显示富文本内容
|
|
|
|
|
+- 购票页面不再显示出发日期选择功能
|
|
|
|
|
+- 首页自动使用环境变量配置的默认目的地
|
|
|
|
|
+- 活动选择页面不再显示活动图片占位符
|
|
|
|
|
+- 所有现有功能保持正常工作
|
|
|
|
|
+- 用户体验明显提升,操作更加便利
|
|
|
|
|
+
|
|
|
|
|
+## Stories
|
|
|
|
|
+
|
|
|
|
|
+1. **Story 1:** 微信客服功能优化
|
|
|
|
|
+ - 实现通过API直接打开微信客服,替换现有的开发中提示
|
|
|
|
|
+ - 使用微信官方API `wx.openCustomerServiceChat`
|
|
|
|
|
+ - 配置企业ID和客服链接到环境变量
|
|
|
|
|
+ - 添加错误处理和降级方案
|
|
|
|
|
+ - 验证微信客服功能正常工作
|
|
|
|
|
+
|
|
|
|
|
+2. **Story 2:** 个人资料显示优化
|
|
|
|
|
+ - 实现默认头像显示(mini/images/default_avatar.jpg)
|
|
|
|
|
+ - 用户名统一暂时显示为"普通用户"
|
|
|
|
|
+ - 保持现有的头像上传功能
|
|
|
|
|
+ - 验证个人资料显示功能正常工作
|
|
|
|
|
+
|
|
|
|
|
+3. **Story 3:** 常见问题功能优化
|
|
|
|
|
+ - 实现弹窗显示富文本内容
|
|
|
|
|
+ - 使用Dialog组件显示常见问题
|
|
|
|
|
+ - 支持HTML格式的内容显示
|
|
|
|
|
+ - 验证常见问题功能正常工作
|
|
|
|
|
+
|
|
|
|
|
+4. **Story 4:** 购票页面优化
|
|
|
|
|
+ - 暂时隐藏出发日期选择功能
|
|
|
|
|
+ - 保持现有的其他购票流程完整
|
|
|
|
|
+ - 验证购票功能正常工作
|
|
|
|
|
+
|
|
|
|
|
+5. **Story 5:** 首页目的地默认值配置
|
|
|
|
|
+ - 在环境变量中添加默认目的地配置
|
|
|
|
|
+ - 首页自动使用配置的默认省市区ID
|
|
|
|
|
+ - 支持开发环境和正式环境不同配置
|
|
|
|
|
+ - 验证默认目的地功能正常工作
|
|
|
|
|
+
|
|
|
|
|
+6. **Story 6:** 活动选择页面优化
|
|
|
|
|
+ - 暂时移除活动图片显示
|
|
|
|
|
+ - 简化页面布局
|
|
|
|
|
+ - 保持活动信息显示完整
|
|
|
|
|
+ - 验证活动选择功能正常工作
|
|
|
|
|
+
|
|
|
|
|
+## Compatibility Requirements
|
|
|
|
|
+
|
|
|
|
|
+- [x] 现有API保持不变:所有现有的用户、活动、订单API保持兼容
|
|
|
|
|
+- [x] 数据库架构变更向后兼容:无数据库变更
|
|
|
|
|
+- [x] UI变更遵循现有模式:使用现有的组件和设计系统
|
|
|
|
|
+- [x] 性能影响最小:优化后页面加载速度可能提升
|
|
|
|
|
+- [x] 现有功能无回归:所有现有功能通过回归测试
|
|
|
|
|
+
|
|
|
|
|
+## Risk Mitigation
|
|
|
|
|
+
|
|
|
|
|
+**Primary Risk:** 微信客服API调用可能失败
|
|
|
|
|
+**Mitigation:** 添加错误处理和降级方案,保留原有的提示作为备选
|
|
|
|
|
+
|
|
|
|
|
+**Secondary Risk:** 环境变量配置可能在不同环境不一致
|
|
|
|
|
+**Mitigation:** 确保开发环境和正式环境都正确配置,添加配置验证
|
|
|
|
|
+
|
|
|
|
|
+**Technical Risk:** 默认头像和用户名显示可能影响现有用户数据
|
|
|
|
|
+**Mitigation:** 仅在用户无头像时显示默认头像,用户名显示为临时方案
|
|
|
|
|
+
|
|
|
|
|
+**Rollback Plan:** 所有修改都是前端逻辑,可以快速回退到原有状态
|
|
|
|
|
+
|
|
|
|
|
+## Definition of Done
|
|
|
|
|
+
|
|
|
|
|
+- [ ] 所有stories完成且验收标准满足
|
|
|
|
|
+- [ ] 现有功能通过测试验证:用户认证、活动选择、购票流程等
|
|
|
|
|
+- [ ] 集成点正常工作:微信客服API、环境变量配置、UI组件
|
|
|
|
|
+- [ ] 微信客服功能正常工作,无错误提示
|
|
|
|
|
+- [ ] 个人资料显示优化完成,默认头像和用户名显示正确
|
|
|
|
|
+- [ ] 常见问题弹窗显示正常,富文本内容正确渲染
|
|
|
|
|
+- [ ] 购票页面日期选择已隐藏,其他功能正常
|
|
|
|
|
+- [ ] 首页默认目的地配置生效,自动使用环境变量值
|
|
|
|
|
+- [ ] 活动选择页面图片已移除,布局简化完成
|
|
|
|
|
+- [ ] 文档适当更新:更新相关配置说明
|
|
|
|
|
+- [ ] 现有功能无回归:所有现有功能通过回归测试
|
|
|
|
|
+
|
|
|
|
|
+---
|
|
|
|
|
+
|
|
|
|
|
+## Story Manager Handoff
|
|
|
|
|
+
|
|
|
|
|
+"请为这个棕地epic开发详细用户故事。关键考虑:
|
|
|
|
|
+
|
|
|
|
|
+- 这是对运行在Taro + React + TypeScript + 微信小程序技术栈的现有系统的增强
|
|
|
|
|
+- 集成点:微信客服API、用户认证系统、环境变量配置、现有UI组件
|
|
|
|
|
+- 现有模式遵循:现有的组件结构和状态管理方式,Taro小程序开发规范
|
|
|
|
|
+- 关键兼容性要求:保持现有API不变,UI变更遵循现有设计模式
|
|
|
|
|
+- 每个故事必须包含验证现有功能保持完整的检查
|
|
|
|
|
+- 技术细节:
|
|
|
|
|
+ - 微信客服:使用 `wx.openCustomerServiceChat` API,配置环境变量中的企业ID和客服链接
|
|
|
|
|
+ - 个人资料:用户无头像时显示 `mini/images/default_avatar.jpg`,用户名统一显示"普通用户"
|
|
|
|
|
+ - 常见问题:使用现有的Dialog组件显示富文本内容
|
|
|
|
|
+ - 购票页面:暂时隐藏出发日期选择功能
|
|
|
|
|
+ - 首页:在环境变量中添加默认目的地配置,自动使用配置的省市区ID
|
|
|
|
|
+ - 活动选择:暂时移除活动图片占位符显示
|
|
|
|
|
+
|
|
|
|
|
+这个epic应在保持系统完整性的同时,实现mini小程序用户体验优化和功能完善的目标。"
|