|
|
@@ -0,0 +1,88 @@
|
|
|
+# Story 007.003: 常见问题功能优化
|
|
|
+
|
|
|
+## Status
|
|
|
+Draft
|
|
|
+
|
|
|
+## Story
|
|
|
+**As a** 小程序用户，
|
|
|
+**I want** 点击常见问题按钮时看到富文本内容弹窗，
|
|
|
+**so that** 能够方便地查看详细的常见问题解答。
|
|
|
+
|
|
|
+## Acceptance Criteria
|
|
|
+1. 实现弹窗显示富文本内容
|
|
|
+2. 使用Dialog组件显示常见问题
|
|
|
+3. 使用mp-html组件（参考docs/mp-html.md）支持HTML格式的内容显示
|
|
|
+4. 验证常见问题功能正常工作
|
|
|
+
|
|
|
+## 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
|
|
|
+
|
|
|
+### Debug Log References
|
|
|
+
|
|
|
+### Completion Notes List
|
|
|
+
|
|
|
+### File List
|
|
|
+
|
|
|
+## QA Results
|
yourname