# 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 `Taro.openCustomerServiceChat`
   - 配置企业ID和客服链接到环境变量
   - 添加错误处理和降级方案

2. **个人资料显示优化** - 实现默认头像显示和统一用户名
   - 用户无头像时显示默认头像（mini/images/default_avatar.jpg）
   - 用户名统一暂时显示为"普通用户"
   - 保持现有的头像上传功能

3. **常见问题功能优化** - 实现弹窗显示富文本内容
   - 替换现有的"功能开发中..."提示
   - 使用Dialog组件显示富文本内容
   - 使用mp-html组件（参考docs/mp-html.md）支持HTML格式的常见问题内容
   - 提升用户体验和操作便利性

4. **班次页面优化** - 暂时隐藏出发日期选择功能
   - 在班次页面暂时隐藏出发日期选择
   - 保持现有的其他购票流程完整
   - 简化用户操作步骤

5. **首页目的地默认值配置** - 实现通过环境变量配置默认省市区ID
   - 在mini/.env和mini/.env.development中添加默认目的地配置
   - 首页自动使用配置的默认省市区ID
   - 支持开发环境和正式环境不同配置

6. **活动选择页面优化** - 暂时移除活动图片显示
   - 在活动选择页面暂时移除活动图片占位符
   - 简化页面布局，提升加载速度
   - 保持活动信息显示完整

7. **小程序分享配置** - 在首页添加微信小程序分享功能
   - 使用微信小程序 `onShareAppMessage` API 配置分享
   - 配置分享标题为"开心去看，就用去看出行"
   - 配置分享图片为 `process.env.TARO_APP_PUBLIC_IMAGE_BASE_URL + '/images/wp_home_share.jpg'`
   - 实现分享成功和取消的回调处理
   - 提升小程序的传播能力

**How it integrates:**
- 微信客服：使用现有的微信小程序API，配置环境变量
- 个人资料：修改现有的用户信息显示逻辑，使用默认头像和用户名
- 常见问题：使用现有的Dialog组件，显示富文本内容
- 购票页面：修改现有的日期选择逻辑，暂时隐藏该功能
- 首页：修改现有的地区选择逻辑，使用环境变量配置的默认值
- 活动选择：修改现有的活动列表显示逻辑，移除图片占位符
- 小程序分享：使用微信小程序 `onShareAppMessage` API，配置分享参数

**Success criteria:**
- 用户点击"联系客服"时直接打开微信客服，不再显示开发中提示
- 用户无头像时显示默认头像，用户名统一显示为"普通用户"
- 用户点击"常见问题"时弹出Dialog显示富文本内容
- 购票页面不再显示出发日期选择功能
- 首页自动使用环境变量配置的默认目的地
- 活动选择页面不再显示活动图片占位符
- 小程序分享功能正常工作，用户可以通过右上角分享按钮分享小程序
- 所有现有功能保持正常工作
- 用户体验明显提升，操作更加便利

## Stories

1. **Story 1:** 微信客服功能优化
   - 实现通过API直接打开微信客服，替换现有的开发中提示
   - 使用微信官方API `wx.openCustomerServiceChat`
   - 配置企业ID和客服链接到环境变量
   - 添加错误处理和降级方案
   - 验证微信客服功能正常工作

2. **Story 2:** 个人资料显示优化
   - 实现默认头像显示（mini/images/default_avatar.jpg）
   - 用户名统一暂时显示为"普通用户"
   - 保持现有的头像上传功能
   - 验证个人资料显示功能正常工作

3. **Story 3:** 常见问题功能优化
   - 实现弹窗显示富文本内容
   - 使用Dialog组件显示常见问题
   - 使用mp-html组件（参考docs/mp-html.md）支持HTML格式的内容显示
   - 验证常见问题功能正常工作

4. **Story 4:** 购票页面优化
   - 暂时隐藏出发日期选择功能
   - 保持现有的其他购票流程完整
   - 验证购票功能正常工作

5. **Story 5:** 首页目的地默认值配置
   - 在环境变量中添加默认目的地配置
   - 首页自动使用配置的默认省市区ID
   - 支持开发环境和正式环境不同配置
   - 验证默认目的地功能正常工作

6. **Story 6:** 活动选择页面优化
   - 暂时移除活动图片显示
   - 简化页面布局
   - 保持活动信息显示完整
   - 验证活动选择功能正常工作

7. **Story 7:** 小程序分享配置
   - 在首页添加微信小程序分享功能
   - 配置分享标题为"开心去看，就用去看出行"
   - 配置分享图片为 `process.env.TARO_APP_PUBLIC_IMAGE_BASE_URL + '/images/wp_home_share.jpg'`
   - 实现分享回调处理
   - 验证分享功能正常工作

8. **Story 8:** 活动选择页时间隐藏优化
   - 在活动选择页面隐藏活动时间显示
   - 保持活动名称、地点和地址信息正常显示
   - 确保去程和返程活动卡片都应用相同的优化
   - 验证活动选择功能正常工作

9. **Story 9:** 订单确认页出发时间显示优化
   - 在订单确认页面将出发时间显示改为"客服将与您沟通确认"
   - 保持其他班次信息（车辆型号、上下车地点、价格等）正常显示
   - 确保拼车和包车服务都应用相同的优化
   - 验证订单确认功能正常工作

10. **Story 10:** 班次选择页顶部显示优化
   - 将起点显示格式从地点名称改为省市区格式（例如"广东省 广州市 市辖区 → 大湾区文化体育中心"）
   - 在顾客还没有选择路线的时候，不应该默认给顾客选择好路线并显示出来
   - 使用地区API获取完整的省市区信息
   - 优化页面加载逻辑，避免默认选择路线
   - 验证班次选择功能正常工作

## 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组件、小程序分享API
- [ ] 微信客服功能正常工作，无错误提示
- [ ] 个人资料显示优化完成，默认头像和用户名显示正确
- [ ] 常见问题弹窗显示正常，富文本内容正确渲染
- [ ] 购票页面日期选择已隐藏，其他功能正常
- [ ] 首页默认目的地配置生效，自动使用环境变量值
- [ ] 活动选择页面图片已移除，布局简化完成
- [ ] 小程序分享功能正常工作，分享配置正确生效
- [ ] 活动选择页面时间已隐藏，页面更加简洁
- [ ] 订单确认页面出发时间显示已改为"客服将与您沟通确认"
- [ ] 班次选择页面起点显示格式已改为省市区格式
- [ ] 班次选择页面不再默认选择路线，避免给顾客预设选择
- [ ] 文档适当更新：更新相关配置说明
- [ ] 现有功能无回归：所有现有功能通过回归测试

---

## Story Manager Handoff

"请为这个棕地epic开发详细用户故事。关键考虑：

- 这是对运行在Taro + React + TypeScript + 微信小程序技术栈的现有系统的增强
- 集成点：微信客服API、用户认证系统、环境变量配置、现有UI组件
- 现有模式遵循：现有的组件结构和状态管理方式，Taro小程序开发规范
- 关键兼容性要求：保持现有API不变，UI变更遵循现有设计模式
- 每个故事必须包含验证现有功能保持完整的检查
- 技术细节：
  - 微信客服：使用 `Taro.openCustomerServiceChat` API，配置环境变量中的企业ID和客服链接
  - 个人资料：用户无头像时显示 `mini/images/default_avatar.jpg`，用户名统一显示"普通用户"
  - 常见问题：使用现有的Dialog组件显示富文本内容，使用mp-html组件（参考docs/mp-html.md）
  - 购票页面：暂时隐藏出发日期选择功能
  - 首页：在环境变量中添加默认目的地配置，自动使用配置的省市区ID
  - 活动选择：暂时移除活动图片占位符显示

这个epic应在保持系统完整性的同时，实现mini小程序用户体验优化和功能完善的目标。

- 小程序分享：使用微信小程序 `onShareAppMessage` API 配置分享功能，设置分享标题为"开心去看，就用去看出行"，分享图片为 `process.env.TARO_APP_PUBLIC_IMAGE_BASE_URL + '/images/wp_home_share.jpg'`，实现分享回调处理"