epic-007-mini-program-ux-optimization.md 8.0 KB
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）
- 环境变量配置（TAROAPP*）
Enhancement Details
What's being added/changed:
微信客服功能优化 - 实现通过API直接打开微信客服
- 替换现有的"功能开发中..."提示
- 使用微信官方API
Taro.openCustomerServiceChat - 配置企业ID和客服链接到环境变量
- 添加错误处理和降级方案
个人资料显示优化 - 实现默认头像显示和统一用户名
- 用户无头像时显示默认头像（mini/images/default_avatar.jpg）
- 用户名统一暂时显示为"普通用户"
- 保持现有的头像上传功能
常见问题功能优化 - 实现弹窗显示富文本内容
- 替换现有的"功能开发中..."提示
- 使用Dialog组件显示富文本内容
- 使用mp-html组件（参考docs/mp-html.md）支持HTML格式的常见问题内容
- 提升用户体验和操作便利性
购票页面优化 - 暂时隐藏出发日期选择功能
- 在购票页面暂时隐藏出发日期选择
- 保持现有的其他购票流程完整
- 简化用户操作步骤
首页目的地默认值配置 - 实现通过环境变量配置默认省市区ID
- 在mini/.env和mini/.env.development中添加默认目的地配置
- 首页自动使用配置的默认省市区ID
- 支持开发环境和正式环境不同配置
活动选择页面优化 - 暂时移除活动图片显示
- 在活动选择页面暂时移除活动图片占位符
- 简化页面布局，提升加载速度
- 保持活动信息显示完整
How it integrates:
- 微信客服：使用现有的微信小程序API，配置环境变量
- 个人资料：修改现有的用户信息显示逻辑，使用默认头像和用户名
- 常见问题：使用现有的Dialog组件，显示富文本内容
- 购票页面：修改现有的日期选择逻辑，暂时隐藏该功能
- 首页：修改现有的地区选择逻辑，使用环境变量配置的默认值
- 活动选择：修改现有的活动列表显示逻辑，移除图片占位符
Success criteria:
- 用户点击"联系客服"时直接打开微信客服，不再显示开发中提示
- 用户无头像时显示默认头像，用户名统一显示为"普通用户"
- 用户点击"常见问题"时弹出Dialog显示富文本内容
- 购票页面不再显示出发日期选择功能
- 首页自动使用环境变量配置的默认目的地
- 活动选择页面不再显示活动图片占位符
- 所有现有功能保持正常工作
- 用户体验明显提升，操作更加便利
Stories
Story 1: 微信客服功能优化
- 实现通过API直接打开微信客服，替换现有的开发中提示
- 使用微信官方API
wx.openCustomerServiceChat - 配置企业ID和客服链接到环境变量
- 添加错误处理和降级方案
- 验证微信客服功能正常工作
Story 2: 个人资料显示优化
- 实现默认头像显示（mini/images/default_avatar.jpg）
- 用户名统一暂时显示为"普通用户"
- 保持现有的头像上传功能
- 验证个人资料显示功能正常工作
Story 3: 常见问题功能优化
- 实现弹窗显示富文本内容
- 使用Dialog组件显示常见问题
- 使用mp-html组件（参考docs/mp-html.md）支持HTML格式的内容显示
- 验证常见问题功能正常工作
Story 4: 购票页面优化
- 暂时隐藏出发日期选择功能
- 保持现有的其他购票流程完整
- 验证购票功能正常工作
Story 5: 首页目的地默认值配置
- 在环境变量中添加默认目的地配置
- 首页自动使用配置的默认省市区ID
- 支持开发环境和正式环境不同配置
- 验证默认目的地功能正常工作
Story 6: 活动选择页面优化
- 暂时移除活动图片显示
- 简化页面布局
- 保持活动信息显示完整
- 验证活动选择功能正常工作
Compatibility Requirements
- 现有API保持不变：所有现有的用户、活动、订单API保持兼容
- 数据库架构变更向后兼容：无数据库变更
- UI变更遵循现有模式：使用现有的组件和设计系统
- 性能影响最小：优化后页面加载速度可能提升
- 现有功能无回归：所有现有功能通过回归测试
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变更遵循现有设计模式
- 每个故事必须包含验证现有功能保持完整的检查
- 技术细节：
- 微信客服：使用
Taro.openCustomerServiceChatAPI，配置环境变量中的企业ID和客服链接 - 个人资料：用户无头像时显示
mini/images/default_avatar.jpg，用户名统一显示"普通用户" - 常见问题：使用现有的Dialog组件显示富文本内容，使用mp-html组件（参考docs/mp-html.md）
- 购票页面：暂时隐藏出发日期选择功能
- 首页：在环境变量中添加默认目的地配置，自动使用配置的省市区ID
- 活动选择：暂时移除活动图片占位符显示
- 微信客服：使用
这个epic应在保持系统完整性的同时，实现mini小程序用户体验优化和功能完善的目标。"