📝 docs(stories): update financial dashboard development plan

- add API integration tasks for financial data modules:
  - integrate `/api/v1/dash/outlook` interface to fetch financial data
  - add API data integration for AssetMetrics, ProfitMetrics, IncomeMetrics and DebtRatioMetrics components
- enhance test coverage by adding API data rendering tests for all financial modules
- add detailed Figma to JSX conversion requirements and technical specifications
- update component documentation with precise source code line references
- add Change Log entry for API integration tasks and documentation updates

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

@@ -21,6 +21,7 @@ Draft
   - [ ] 添加右下角浮动按钮用于触发变动幅度弹窗
   - [ ] 实现完整的页面背景和网格系统
   - [ ] 集成所有基础组件构建完整页面
+  - [ ] **集成财务数据API调用** - 调用 `/api/v1/dash/outlook` 接口获取财务数据 [Source: docs/stories/006.001.创建财务数据API接口.md#L86-L129]
 - [ ] 创建基础组件 (AC: 2)
   - [ ] `src/client/home/pages/FinancialDashboard/components/Icon.tsx` - 返回按钮图标组件（包含旋转和缩放变换）
   - [ ] `src/client/home/pages/FinancialDashboard/components/ReportHeader.tsx` - 报表头部组件（包含渐变背景和标题）
@@ -32,9 +33,13 @@ Draft
   - [ ] `src/client/home/pages/FinancialDashboard/components/BackgroundOverlay.tsx` - 常规界面组件（包含背景图片和遮罩层）
 - [ ] 创建四个财务数据模块组件 (AC: 2)
   - [ ] `src/client/home/pages/FinancialDashboard/components/AssetMetrics.tsx` - 资产负债率模块（资产总额与资产净额）
+    - [ ] **集成API数据** - 使用 `assetTotalNet` 数据渲染资产总额与资产净额图表 [Source: docs/stories/006.001.创建财务数据API接口.md#L93-L101]
   - [ ] `src/client/home/pages/FinancialDashboard/components/ProfitMetrics.tsx` - 利润总额与净利润模块
+    - [ ] **集成API数据** - 使用 `profitTotalNet` 数据渲染利润总额与净利润图表 [Source: docs/stories/006.001.创建财务数据API接口.md#L102-L110]
   - [ ] `src/client/home/pages/FinancialDashboard/components/IncomeMetrics.tsx` - 收入模块
+    - [ ] **集成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设计实现：
@@ -45,14 +50,19 @@ Draft
   - [ ] 实现点击外部关闭功能
 - [ ] 创建组件单元测试 (AC: 1, 2, 3)
   - [ ] `tests/unit/client/home/pages/FinancialDashboard/FinancialDashboard.test.tsx` - 主页面测试
+    - [ ] **测试API数据集成** - 验证主页面正确调用 `/api/v1/dash/outlook` 接口并渲染数据
   - [ ] `tests/unit/client/home/pages/FinancialDashboard/components/Icon.test.tsx` - 图标组件测试
   - [ ] `tests/unit/client/home/pages/FinancialDashboard/components/ReportHeader.test.tsx` - 报表头部测试
   - [ ] `tests/unit/client/home/pages/FinancialDashboard/components/BarElement.test.tsx` - 柱形元素测试
   - [ ] `tests/unit/client/home/pages/FinancialDashboard/components/DataLabel.test.tsx` - 数据标签测试
   - [ ] `tests/unit/client/home/pages/FinancialDashboard/components/AssetMetrics.test.tsx` - 资产模块测试
+    - [ ] **测试API数据渲染** - 验证 `assetTotalNet` 数据正确渲染为资产总额与资产净额图表
   - [ ] `tests/unit/client/home/pages/FinancialDashboard/components/ProfitMetrics.test.tsx` - 利润模块测试
+    - [ ] **测试API数据渲染** - 验证 `profitTotalNet` 数据正确渲染为利润总额与净利润图表
   - [ ] `tests/unit/client/home/pages/FinancialDashboard/components/IncomeMetrics.test.tsx` - 收入模块测试
+    - [ ] **测试API数据渲染** - 验证 `incomeStatement` 数据正确渲染为收入图表
   - [ ] `tests/unit/client/home/pages/FinancialDashboard/components/DebtRatioMetrics.test.tsx` - 资产负债率模块测试
+    - [ ] **测试API数据渲染** - 验证 `assetLiabilityRatio` 数据正确渲染为资产负债率图表
   - [ ] `tests/unit/client/home/pages/FinancialDashboard/components/VariationModal.test.tsx` - 弹窗组件测试
 
 ## Dev Notes
@@ -65,27 +75,27 @@ Draft
 - **UI组件库**: shadcn/ui (基于Radix UI)
 - **可视化组件**: Recharts (已集成在 `src/client/components/ui/chart.tsx`)
 
-### 设计组件规范 [Source: docs/战略部署主页面figma-jsx.md]
+### 设计组件规范 [Source: docs/战略部署主页面figma-jsx.md#L1-L1330]
 基于Figma设计文档，需要实现以下核心组件：
 
-**基础组件**:
-- `icon` - 返回按钮图标组件，包含旋转和缩放变换
-- `Component` - 报表头部组件，包含渐变背景和标题
-- `Component1` - 底框组件，作为容器背景
-- `Component2` - 头部组件，作为容器顶部
-- `Component3` - 柱形元素组件，支持多种颜色变体：
-  - `property2="1-1"` - 资产总额柱形（蓝色渐变）
-  - `property2="1-2"` - 资产净额柱形（黄色渐变）
-  - `property2="2-1"` - 利润总额柱形（黄色渐变）
-  - `property2="2-3"` - 净利润柱形（紫色渐变）
-  - `property2="2-4"` - 资产负债率柱形（蓝色渐变）
-- `Component7` - 定位数据组件，包含数值显示和装饰元素
-- `IconTime` - 时间图标组件
-- `Component4` - 底部网格组件，包含背景网格图案
-- `Component5` - 常规界面组件，包含背景图片和遮罩层
-
-**主页面组件结构**:
-- `Component6` - 战略部署主页面，聚合所有子组件
+**基础组件** [Source: docs/战略部署主页面figma-jsx.md#L73-L347]:
+- `icon` - 返回按钮图标组件，包含旋转和缩放变换 [Source: docs/战略部署主页面figma-jsx.md#L73-L96]
+- `Component` - 报表头部组件，包含渐变背景和标题 [Source: docs/战略部署主页面figma-jsx.md#L98-L117]
+- `Component1` - 底框组件，作为容器背景 [Source: docs/战略部署主页面figma-jsx.md#L119-L125]
+- `Component2` - 头部组件，作为容器顶部 [Source: docs/战略部署主页面figma-jsx.md#L127-L129]
+- `Component3` - 柱形元素组件，支持多种颜色变体 [Source: docs/战略部署主页面figma-jsx.md#L130-L317]:
+  - `property2="1-1"` - 资产总额柱形（蓝色渐变）[Source: docs/战略部署主页面figma-jsx.md#L210-L246]
+  - `property2="1-2"` - 资产净额柱形（黄色渐变）[Source: docs/战略部署主页面figma-jsx.md#L173-L209]
+  - `property2="2-1"` - 利润总额柱形（黄色渐变）[Source: docs/战略部署主页面figma-jsx.md#L283-L317]
+  - `property2="2-3"` - 净利润柱形（紫色渐变）[Source: docs/战略部署主页面figma-jsx.md#L247-L282]
+  - `property2="2-4"` - 资产负债率柱形（蓝色渐变）[Source: docs/战略部署主页面figma-jsx.md#L136-L172]
+- `Component7` - 定位数据组件，包含数值显示和装饰元素 [Source: docs/战略部署主页面figma-jsx.md#L318-L336]
+- `IconTime` - 时间图标组件 [Source: docs/战略部署主页面figma-jsx.md#L338-L347]
+- `Component4` - 底部网格组件，包含背景网格图案 [Source: docs/战略部署主页面figma-jsx.md#L349-L362]
+- `Component5` - 常规界面组件，包含背景图片和遮罩层 [Source: docs/战略部署主页面figma-jsx.md#L363-L378]
+
+**主页面组件结构** [Source: docs/战略部署主页面figma-jsx.md#L380-L1329]:
+- `Component6` - 战略部署主页面，聚合所有子组件 [Source: docs/战略部署主页面figma-jsx.md#L380-L1329]
 - 包含四个主要数据模块：资产负债率、收入、利润总额与净利润、资产负债率（百分比）
 - 每个模块包含：头部标题、数据表格、柱形图、坐标轴、数值标签
 
@@ -116,7 +126,7 @@ Draft
 - **响应式**: 使用 `ResponsiveContainer` 实现响应式图表
 
 ### 设计参考
-**主页面设计** [Source: Figma]:
+**主页面设计** [Source: docs/战略部署主页面figma-jsx.md#L380-L1329]:
 - **主页面**: `https://www.figma.com/design/mTu6gamzMFEybbSb8WssKK/可视化素材2-25?node-id=1715-121572&m=dev` - 财务数据可视化大屏主页面设计，包含四个数据模块
 
 ### 分辨率要求
@@ -126,11 +136,11 @@ Draft
 - 组件位置和间距必须精确匹配Figma设计
 - 字体大小、图标尺寸等视觉元素必须保持设计比例
 
-**弹窗设计** [Source: Figma]:
+**弹窗设计** [Source: docs/战略部署主页面+弹窗figma-jsx.md#L2135-L2148]:
 **四个层次构成**:
-1. **遮罩层** (Overlay) - `https://www.figma.com/design/mTu6gamzMFEybbSb8WssKK/可视化素材2-25?node-id=1949-81702&m=dev` - 背景遮罩，提供视觉隔离和点击外部关闭功能
-2. **弹出框** (Dialog Container) - `https://www.figma.com/design/mTu6gamzMFEybbSb8WssKK/可视化素材2-25?node-id=1949-81703&m=dev` - 弹窗主体容器，包含边框、阴影和圆角样式
-3. **弹出框数据** (Dialog Content) - `https://www.figma.com/design/mTu6gamzMFEybbSb8WssKK/可视化素材2-25?node-id=1949-81714&m=dev` - 弹窗内容区域，展示财务数据详情
+1. **遮罩层** (Overlay) - `https://www.figma.com/design/mTu6gamzMFEybbSb8WssKK/可视化素材2-25?node-id=1949-81702&m=dev` - 背景遮罩，提供视觉隔离和点击外部关闭功能 [Source: docs/战略部署主页面+弹窗figma-jsx.md#L2137-L2140]
+2. **弹出框** (Dialog Container) - `https://www.figma.com/design/mTu6gamzMFEybbSb8WssKK/可视化素材2-25?node-id=1949-81703&m=dev` - 弹窗主体容器，包含边框、阴影和圆角样式 [Source: docs/战略部署主页面+弹窗figma-jsx.md#L2144]
+3. **弹出框数据** (Dialog Content) - `https://www.figma.com/design/mTu6gamzMFEybbSb8WssKK/可视化素材2-25?node-id=1949-81714&m=dev` - 弹窗内容区域，展示财务数据详情 [Source: docs/战略部署主页面+弹窗figma-jsx.md#L2145-L2148]
 4. **返回按钮** (Action Controls) - `https://www.figma.com/design/mTu6gamzMFEybbSb8WssKK/可视化素材2-25?node-id=1949-82235&m=dev` - 弹窗操作控件，包含关闭按钮和交互元素
 
 ### 数据模块定义
@@ -140,6 +150,19 @@ Draft
 - **收入数据**: 2023-2024年数据，单位：元
 - **资产负债率数据**: 2023-2024年数据，单位：%
 
+### 技术转换说明
+**Figma转JSX代码转换要求** [Source: docs/战略部署主页面figma-jsx.md#L1331-L1340]:
+- **技术栈适配**: 将生成的React+Tailwind代码转换为项目现有技术栈
+- **样式系统转换**: 将Tailwind类名转换为项目现有样式系统，同时保持精确的视觉设计
+- **组件模式**: 遵循项目现有的组件模式和约定
+- **依赖管理**: 不安装Tailwind作为依赖，除非用户明确指示
+
+**关键转换规则**:
+- 分析目标代码库以识别：技术栈、样式方法、组件模式、设计标记
+- 将React语法转换为目标框架/库
+- 将所有Tailwind类转换为目标样式系统，同时保持精确的视觉设计
+- 遵循项目的现有模式和约定
+
 ### 编码标准 [Source: architecture/coding-standards.md#关键集成规则]
 - **现有API兼容性**: 确保组件不破坏现有API契约
 - **错误处理**: 实现适当的错误边界和加载状态
@@ -169,6 +192,8 @@ Draft
 ## Change Log
 | Date | Version | Description | Author |
 |------|---------|-------------|---------|
+| 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) |
 | 2025-11-14 | 1.2 | 基于战略部署主页面Figma设计文档更新组件规范和任务列表 | Bob (Scrum Master) |
 | 2025-11-14 | 1.1 | 添加严格的1920*1080分辨率要求 | Bob (Scrum Master) |