# Story 007.003: 常见问题功能优化

## Status
Ready for Review

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

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

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

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

### File List
- [mini/src/components/FAQDialog.tsx](mini/src/components/FAQDialog.tsx) - 新增常见问题弹窗组件
- [mini/src/pages/profile/index.tsx](mini/src/pages/profile/index.tsx) - 集成FAQDialog组件
- [mini/tests/pages/profile.test.tsx](mini/tests/pages/profile.test.tsx) - 更新测试文件
- [mini/src/app.config.ts](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