Explorar el Código

📝 docs(prd): add mini program ux optimization epic document

- create epic document for mini program user experience optimization
- document enhancement details including wechat customer service integration, profile display optimization, FAQ functionality, ticket purchase page simplification, home page default configuration, and activity selection page optimization
- outline stories, compatibility requirements, risk mitigation and definition of done
- provide technical implementation details and integration points

📝 docs(story): add wechat customer service optimization story

- define user story for wechat customer service functionality
- specify acceptance criteria including API integration and error handling
- outline development tasks and technical implementation details
- include testing requirements and risk assessment
yourname hace 3 meses
padre
commit
9862ab8343
Se han modificado 2 ficheros con 340 adiciones y 0 borrados
  1. 177 0
      docs/prd/epic-007-mini-program-ux-optimization.md
  2. 163 0
      docs/stories/007.001.story.md

+ 177 - 0
docs/prd/epic-007-mini-program-ux-optimization.md

@@ -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小程序用户体验优化和功能完善的目标。"

+ 163 - 0
docs/stories/007.001.story.md

@@ -0,0 +1,163 @@
+# Story 007.001: 微信客服功能优化
+
+## Status
+Draft
+
+## Story
+**As a** 小程序用户,
+**I want** 能够直接通过微信客服功能联系客服,
+**so that** 可以快速获得帮助和解决问题。
+
+## Acceptance Criteria
+1. 用户点击个人中心的"联系客服"按钮时,直接打开微信客服聊天界面
+2. 使用微信官方API `wx.openCustomerServiceChat` 实现客服功能
+3. 从环境变量读取企业ID和客服链接配置
+4. 现有的个人中心页面布局和样式保持不变
+5. 新的客服功能遵循现有的微信API调用模式
+6. 与现有的用户认证系统保持兼容
+7. 添加客服功能相关的单元测试
+8. 更新相关文档说明客服功能已可用
+9. 验证现有功能无回归
+
+## Tasks / Subtasks
+- [ ] 修改个人中心页面的客服按钮点击事件处理 (mini/src/pages/profile/index.tsx)
+- [ ] 实现 `wx.openCustomerServiceChat` API调用
+- [ ] 从环境变量读取企业ID和客服链接配置
+- [ ] 添加错误处理和降级方案
+- [ ] 编写单元测试验证客服功能
+- [ ] 验证现有功能无回归
+- [ ] 更新相关文档
+
+## Dev Notes
+
+### 技术栈要求
+- **前端框架**: Taro 3.x + React
+- **小程序平台**: 微信小程序
+- **API调用**: 微信小程序官方API
+- **状态管理**: React Query (TanStack Query)
+- **UI组件**: 自定义组件 + Heroicons
+
+### 项目结构
+- **个人中心页面**: `mini/src/pages/profile/index.tsx`
+- **环境变量配置**: `mini/.env.development`, `mini/.env.production`
+- **微信客服文档**: `docs/wx-kefu.md`
+- **错误处理规范**: `docs/error-handling.md`
+
+### API 集成
+- **微信客服API**: `wx.openCustomerServiceChat`
+- **环境变量**:
+  - `TARO_APP_WX_CORP_ID=wwc6d7911e2d23b7fb`
+  - `TARO_APP_WX_KEFU_URL=https://work.weixin.qq.com/kfid/kfc5f4d729bc3c893d7`
+
+### 实现细节
+
+#### 环境变量配置
+已配置完成:
+- `TARO_APP_WX_CORP_ID=wwc6d7911e2d23b7fb`
+- `TARO_APP_WX_KEFU_URL=https://work.weixin.qq.com/kfid/kfc5f4d729bc3c893d7`
+
+#### 代码位置
+- 修改文件:`/mnt/code/176-162-template-21/mini/src/pages/profile/index.tsx`
+- 替换第273-296行的"功能开发中..."代码
+
+#### API调用示例
+```typescript
+const handleCustomerService = () => {
+  try {
+    wx.openCustomerServiceChat({
+      extInfo: {
+        url: process.env.TARO_APP_WX_KEFU_URL
+      },
+      corpId: process.env.TARO_APP_WX_CORP_ID,
+      success: () => {
+        console.log('客服聊天打开成功')
+      },
+      fail: (error) => {
+        console.error('客服聊天打开失败:', error)
+        Taro.showToast({
+          title: '客服功能暂不可用,请稍后重试',
+          icon: 'none'
+        })
+      }
+    })
+  } catch (error) {
+    console.error('客服功能异常:', error)
+    Taro.showToast({
+      title: '客服功能异常,请稍后重试',
+      icon: 'none'
+    })
+  }
+}
+```
+
+### 错误处理
+- **API调用失败**: 显示友好提示信息
+- **网络错误**: 实现重试机制
+- **兼容性检查**: 确保微信小程序基础库版本支持
+
+### 用户体验
+- **加载状态**: 显示操作进度指示器
+- **操作反馈**: 使用 Taro.showToast 显示操作结果
+- **降级方案**: API失败时显示友好提示
+
+### 项目结构对齐
+- **组件位置**: 符合现有的页面组织模式
+- **API设计**: 遵循现有的微信API调用模式
+- **文件命名**: 保持现有的kebab-case命名约定
+- **导入导出**: 使用ES模块和现有别名系统
+
+## Testing
+
+### 测试标准
+- **测试文件位置**:
+  - 前端单元测试: `mini/tests/unit/pages/profile.test.tsx`
+- **测试框架**: Vitest + Testing Library
+- **测试模式**: 模拟微信API调用
+- **覆盖率要求**: 核心业务逻辑 ≥ 80%
+
+### 关键测试场景
+- 客服按钮点击事件测试
+- 微信客服API调用测试
+- 错误处理测试
+- 环境变量配置测试
+- 降级方案测试
+
+### 测试数据管理
+- **模拟环境变量**: 测试环境配置
+- **API模拟**: 模拟微信API成功和失败场景
+- **边界测试**: 测试不同微信基础库版本兼容性
+
+## Risk and Compatibility Check
+
+### 风险评估
+- **主要风险**: 微信客服API调用失败影响用户体验
+- **缓解措施**: 实现错误处理和降级方案
+- **回滚方案**: 恢复显示"功能开发中..."提示
+
+### 兼容性验证
+- [ ] 对现有API无破坏性变更
+- [ ] 无数据库变更
+- [ ] UI变更遵循现有设计模式
+- [ ] 性能影响可忽略
+
+## Change Log
+| Date | Version | Description | Author |
+|------|---------|-------------|---------|
+| 2025-10-30 | 1.0 | 初始故事创建 | John (PM) |
+
+## Dev Agent Record
+
+### Agent Model Used
+- Claude Sonnet 4.5
+
+### Completion Notes List
+- ✅ 故事需求分析和范围定义
+- ✅ 技术方案设计
+- ✅ 风险评估和兼容性检查
+
+### File List
+- [docs/stories/007.001.story.md](docs/stories/007.001.story.md) - 用户故事文档
+- [mini/src/pages/profile/index.tsx](mini/src/pages/profile/index.tsx) - 待修改的个人中心页面
+
+## QA Results
+*此部分将由QA代理在质量保证过程中填写*