Story 007.003: 常见问题功能优化

Status

Ready for Review

Story

As a 小程序用户， I want 点击常见问题按钮时看到富文本内容弹窗， so that 能够方便地查看详细的常见问题解答。

Acceptance Criteria

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

Tasks / Subtasks

安装和配置mp-html组件 (AC: 3)
- 在mini项目中安装mp-html依赖
- 配置微信小程序组件注册
- 验证mp-html组件正常工作
实现常见问题弹窗组件 (AC: 1, 2)
- 创建FAQDialog组件，使用现有的Dialog组件
- 集成mp-html组件显示富文本内容
- 添加常见问题HTML内容数据
- 实现弹窗打开/关闭状态管理
集成到现有页面 (AC: 1, 2)
- 找到现有常见问题按钮位置
- 替换现有的"功能开发中..."提示
- 集成FAQDialog组件
- 验证按钮点击触发弹窗
编写和更新相关测试 (AC: 4)
- 更新页面测试文件
- 添加常见问题弹窗测试场景
- 验证弹窗显示和交互功能
- 确保现有功能无回归

Dev Notes

技术栈要求

前端框架: Taro 4.x + React [Source: architecture/tech-stack.md#现有技术栈维护]
小程序平台: 微信小程序 [Source: architecture/tech-stack.md#现有技术栈维护]
状态管理: React Query (TanStack Query) [Source: architecture/tech-stack.md#现有技术栈维护]
UI组件: 自定义组件 + Heroicons [Source: architecture/tech-stack.md#现有技术栈维护]

项目结构

Dialog组件位置: mini/src/components/ui/dialog.tsx [Source: architecture/source-tree.md#实际项目结构]
页面文件位置: 需要找到包含常见问题按钮的页面 [Source: architecture/source-tree.md#实际项目结构]
测试文件位置: mini/tests/pages/ [Source: architecture/testing-strategy.md#taro小程序测试体系]

组件规范

Dialog组件: 使用现有的Dialog组件体系，包含Dialog、DialogContent、DialogHeader、DialogTitle、DialogFooter等子组件 [Source: mini/src/components/ui/dialog.tsx]
mp-html组件: 需要按照文档安装和配置，支持HTML格式内容显示 [Source: docs/mp-html.md]

集成要求

替换现有提示: 需要找到并替换现有的"功能开发中..."提示
状态管理: 使用React状态管理弹窗显示状态
内容数据: 需要准备常见问题的HTML格式内容

Testing

测试标准

测试框架: Jest + @testing-library/react + React Query + Taro API mock [Source: architecture/testing-strategy.md#taro小程序测试体系]
测试位置: mini/tests/pages/ [Source: architecture/testing-strategy.md#taro小程序测试体系]
测试模式: 页面级集成测试，包含完整的组件渲染和交互测试 [Source: architecture/testing-strategy.md#taro小程序测试体系]

测试要求

验证常见问题按钮点击触发弹窗
验证mp-html组件正确渲染富文本内容
验证弹窗关闭功能正常工作
确保现有功能无回归

Change Log

Date	Version	Description	Author
2025-10-31	1.0	初始故事创建	Bob (Scrum Master)

Dev Agent Record

Agent Model Used

James (Developer Agent)

Debug Log References

已成功安装和配置mp-html组件
FAQDialog组件已创建并集成mp-html富文本显示
常见问题按钮已集成到profile页面
测试已更新并验证功能正常

Completion Notes List

✅ mp-html组件已安装并在app.config.ts中配置
✅ FAQDialog组件已创建，包含完整的常见问题HTML内容
✅ 常见问题按钮已从"功能开发中..."替换为实际弹窗功能
✅ 弹窗状态管理已实现，支持打开/关闭
✅ 测试文件已更新，包含常见问题弹窗的完整测试场景
✅ 所有相关测试通过，功能验证正常

File List

mini/src/components/FAQDialog.tsx - 新增常见问题弹窗组件
mini/src/pages/profile/index.tsx - 集成FAQDialog组件
mini/tests/pages/profile.test.tsx - 更新测试文件
mini/src/app.config.ts - 配置mp-html组件

Change Log

Date	Version	Description	Author
2025-10-31	1.0	初始故事创建	Bob (Scrum Master)
2025-10-31	1.1	实现常见问题弹窗功能	James (Developer)

QA Results