Parcourir la source

📝 docs(stories): 细化财务仪表盘变动幅度弹窗组件任务

- 将变动幅度弹窗组件拆分为多个基础组件:ModalOverlay、ModalDialog、ModalContent等
- 为每个拆分后的组件添加明确的文件路径和功能描述
- 添加弹窗组件单元测试任务,覆盖所有拆分后的子组件
- 更新变更日志,记录弹窗组件拆分和细化任务的版本信息
yourname il y a 2 mois
Parent
commit
637a4bd259
1 fichiers modifiés avec 21 ajouts et 9 suppressions
  1. 21 9
      docs/stories/006.002.实现财务数据可视化大屏页面.md

+ 21 - 9
docs/stories/006.002.实现财务数据可视化大屏页面.md

@@ -40,14 +40,17 @@ Draft
     - [ ] **集成API数据** - 使用 `incomeStatement` 数据渲染收入图表 [Source: docs/stories/006.001.创建财务数据API接口.md#L111-L118]
   - [ ] `src/client/home/pages/FinancialDashboard/components/DebtRatioMetrics.tsx` - 资产负债率(百分比)模块
     - [ ] **集成API数据** - 使用 `assetLiabilityRatio` 数据渲染资产负债率图表 [Source: docs/stories/006.001.创建财务数据API接口.md#L119-L126]
-- [ ] 创建变动幅度弹窗组件 `src/client/home/pages/FinancialDashboard/components/VariationModal.tsx` (AC: 3)
-  - [ ] 实现四个层次构成:遮罩层、弹出框、弹出框数据、返回按钮
-  - [ ] 基于Figma设计实现:
-    - 遮罩层:`https://www.figma.com/design/mTu6gamzMFEybbSb8WssKK/可视化素材2-25?node-id=1949-81702&m=dev`
-    - 弹出框:`https://www.figma.com/design/mTu6gamzMFEybbSb8WssKK/可视化素材2-25?node-id=1949-81703&m=dev`
-    - 弹出框数据:`https://www.figma.com/design/mTu6gamzMFEybbSb8WssKK/可视化素材2-25?node-id=1949-81714&m=dev`
-    - 返回按钮:`https://www.figma.com/design/mTu6gamzMFEybbSb8WssKK/可视化素材2-25?node-id=1949-82235&m=dev`
-  - [ ] 实现点击外部关闭功能
+- [ ] 创建变动幅度弹窗组件 (AC: 3)
+  - [ ] `src/client/home/pages/FinancialDashboard/components/VariationModal.tsx` - 弹窗主组件 [Source: docs/战略部署主页面+弹窗figma-jsx.md#L2135-L2148]
+    - [ ] 聚合所有弹窗子组件
+    - [ ] 实现点击外部关闭功能
+  - [ ] 创建弹窗基础组件
+    - [ ] `src/client/home/pages/FinancialDashboard/components/ModalOverlay.tsx` - 遮罩层组件 [Source: docs/战略部署主页面+弹窗figma-jsx.md#L2143]
+    - [ ] `src/client/home/pages/FinancialDashboard/components/ModalDialog.tsx` - 弹出框容器组件 [Source: docs/战略部署主页面+弹窗figma-jsx.md#L460-L511]
+    - [ ] `src/client/home/pages/FinancialDashboard/components/ModalContent.tsx` - 弹出框数据内容组件 [Source: docs/战略部署主页面+弹窗figma-jsx.md#L2145-L2148]
+    - [ ] `src/client/home/pages/FinancialDashboard/components/ModalHeader.tsx` - 弹窗头部组件(包含"变动幅度"标题)
+    - [ ] `src/client/home/pages/FinancialDashboard/components/ModalDataRow.tsx` - 弹窗数据行组件(包含财务指标和数值)
+    - [ ] `src/client/home/pages/FinancialDashboard/components/ModalCloseButton.tsx` - 返回按钮组件
 - [ ] 创建组件单元测试 (AC: 1, 2, 3)
   - [ ] `tests/unit/client/home/pages/FinancialDashboard/FinancialDashboard.test.tsx` - 主页面测试
     - [ ] **测试API数据集成** - 验证主页面正确调用 `/api/v1/dash/outlook` 接口并渲染数据
@@ -63,7 +66,15 @@ Draft
     - [ ] **测试API数据渲染** - 验证 `incomeStatement` 数据正确渲染为收入图表
   - [ ] `tests/unit/client/home/pages/FinancialDashboard/components/DebtRatioMetrics.test.tsx` - 资产负债率模块测试
     - [ ] **测试API数据渲染** - 验证 `assetLiabilityRatio` 数据正确渲染为资产负债率图表
-  - [ ] `tests/unit/client/home/pages/FinancialDashboard/components/VariationModal.test.tsx` - 弹窗组件测试
+  - [ ] `tests/unit/client/home/pages/FinancialDashboard/components/VariationModal.test.tsx` - 弹窗主组件测试
+    - [ ] 测试弹窗显示/隐藏功能
+    - [ ] 测试点击外部关闭功能
+  - [ ] `tests/unit/client/home/pages/FinancialDashboard/components/ModalOverlay.test.tsx` - 遮罩层组件测试
+  - [ ] `tests/unit/client/home/pages/FinancialDashboard/components/ModalDialog.test.tsx` - 弹出框容器测试
+  - [ ] `tests/unit/client/home/pages/FinancialDashboard/components/ModalContent.test.tsx` - 弹出框数据内容测试
+  - [ ] `tests/unit/client/home/pages/FinancialDashboard/components/ModalHeader.test.tsx` - 弹窗头部组件测试
+  - [ ] `tests/unit/client/home/pages/FinancialDashboard/components/ModalDataRow.test.tsx` - 弹窗数据行组件测试
+  - [ ] `tests/unit/client/home/pages/FinancialDashboard/components/ModalCloseButton.test.tsx` - 返回按钮组件测试
 
 ## Dev Notes
 
@@ -192,6 +203,7 @@ Draft
 ## Change Log
 | Date | Version | Description | Author |
 |------|---------|-------------|---------|
+| 2025-11-14 | 1.6 | 按照Figma设计将弹窗分解为多个组件,添加详细的弹窗组件任务 | Bob (Scrum Master) |
 | 2025-11-14 | 1.5 | 集成财务数据API接口调用任务,为四个数据模块添加API数据集成和测试 | Bob (Scrum Master) |
 | 2025-11-14 | 1.4 | 添加详细的Figma转JSX文档引用位置,标识准确的代码行号 | Bob (Scrum Master) |
 | 2025-11-14 | 1.3 | 重写主页面组件任务,细化基础组件实现要求 | Bob (Scrum Master) |