📝 docs(story-006.003): 添加JSXMD文件查看要求

- 在每个组件实现任务中明确标注必须先查看JSXMD文件
- 添加重要开发原则说明
- 确保准确重现Figma设计

🤖 Generated with [Claude Code](https://claude.ai/code)
via [Happy](https://happy.engineering)

Co-Authored-By: Claude <noreply@anthropic.com>
Co-Authored-By: Happy <yesreply@happy.engineering>

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

@@ -16,6 +16,7 @@ Draft
 
 ## Tasks / Subtasks
 - [ ] 创建财务数据可视化大屏静态主页面组件 `src/client/home/pages/FinancialDashboard/FinancialDashboard.tsx` (AC: 1, 2, 3)
+  - [ ] **先查看JSXMD文件** - 在实现前仔细阅读 `docs/战略部署主页面figma-jsx.md` 中的主页面设计规范
   - [ ] 基于Figma设计实现主页面布局：`https://www.figma.com/design/mTu6gamzMFEybbSb8WssKK/可视化素材2-25?node-id=1715-121572&m=dev`
   - [ ] **严格按照1920*1080分辨率实现布局**，确保在大屏设备上完美显示
   - [ ] 实现四个数据模块的容器布局：资产负债率、收入、利润总额与净利润、资产负债率（百分比）
@@ -24,25 +25,37 @@ Draft
   - [ ] 集成所有基础组件构建完整页面
   - [ ] **使用静态数据填充图表** - 使用硬编码的示例数据渲染四个数据模块
 - [ ] 创建基础组件 (AC: 2)
-  - [ ] `src/client/home/pages/FinancialDashboard/components/Icon.tsx` - 返回按钮图标组件（包含旋转和缩放变换）[Source: docs/战略部署主页面figma-jsx.md#L73-L104]
-  - [ ] `src/client/home/pages/FinancialDashboard/components/ReportHeader.tsx` - 报表头部组件（包含渐变背景和标题）[Source: docs/战略部署主页面figma-jsx.md#L106-L125]
-  - [ ] `src/client/home/pages/FinancialDashboard/components/BaseContainer.tsx` - 底框和头部容器组件（作为模块容器背景）[Source: docs/战略部署主页面figma-jsx.md#L127-L137]
-  - [ ] `src/client/home/pages/FinancialDashboard/components/BarElement.tsx` - 柱形元素组件（支持多种颜色变体：资产总额、资产净额、利润总额、净利润、资产负债率）[Source: docs/战略部署主页面figma-jsx.md#L138-L325]
-  - [ ] `src/client/home/pages/FinancialDashboard/components/DataLabel.tsx` - 定位数据组件（包含数值显示和装饰元素）[Source: docs/战略部署主页面figma-jsx.md#L326-L344]
-  - [ ] `src/client/home/pages/FinancialDashboard/components/TimeIcon.tsx` - 时间图标组件[Source: docs/战略部署主页面figma-jsx.md#L346-L355]
-  - [ ] `src/client/home/pages/FinancialDashboard/components/GridBackground.tsx` - 底部网格组件（包含背景网格图案）[Source: docs/战略部署主页面figma-jsx.md#L357-L370]
-  - [ ] `src/client/home/pages/FinancialDashboard/components/BackgroundOverlay.tsx` - 常规界面组件（包含背景图片和遮罩层）[Source: docs/战略部署主页面figma-jsx.md#L371-L386]
+  - [ ] `src/client/home/pages/FinancialDashboard/components/Icon.tsx` - 返回按钮图标组件（包含旋转和缩放变换）
+    - [ ] **先查看JSXMD文件** - 参考 `docs/战略部署主页面figma-jsx.md#L73-L104` 中的图标设计规范
+  - [ ] `src/client/home/pages/FinancialDashboard/components/ReportHeader.tsx` - 报表头部组件（包含渐变背景和标题）
+    - [ ] **先查看JSXMD文件** - 参考 `docs/战略部署主页面figma-jsx.md#L106-L125` 中的头部设计规范
+  - [ ] `src/client/home/pages/FinancialDashboard/components/BaseContainer.tsx` - 底框和头部容器组件（作为模块容器背景）
+    - [ ] **先查看JSXMD文件** - 参考 `docs/战略部署主页面figma-jsx.md#L127-L137` 中的容器设计规范
+  - [ ] `src/client/home/pages/FinancialDashboard/components/BarElement.tsx` - 柱形元素组件（支持多种颜色变体：资产总额、资产净额、利润总额、净利润、资产负债率）
+    - [ ] **先查看JSXMD文件** - 参考 `docs/战略部署主页面figma-jsx.md#L138-L325` 中的柱形元素设计规范
+  - [ ] `src/client/home/pages/FinancialDashboard/components/DataLabel.tsx` - 定位数据组件（包含数值显示和装饰元素）
+    - [ ] **先查看JSXMD文件** - 参考 `docs/战略部署主页面figma-jsx.md#L326-L344` 中的数据标签设计规范
+  - [ ] `src/client/home/pages/FinancialDashboard/components/TimeIcon.tsx` - 时间图标组件
+    - [ ] **先查看JSXMD文件** - 参考 `docs/战略部署主页面figma-jsx.md#L346-L355` 中的时间图标设计规范
+  - [ ] `src/client/home/pages/FinancialDashboard/components/GridBackground.tsx` - 底部网格组件（包含背景网格图案）
+    - [ ] **先查看JSXMD文件** - 参考 `docs/战略部署主页面figma-jsx.md#L357-L370` 中的网格背景设计规范
+  - [ ] `src/client/home/pages/FinancialDashboard/components/BackgroundOverlay.tsx` - 常规界面组件（包含背景图片和遮罩层）
+    - [ ] **先查看JSXMD文件** - 参考 `docs/战略部署主页面figma-jsx.md#L371-L386` 中的背景遮罩设计规范
 - [ ] 创建四个财务数据模块组件 (AC: 2, 4)
   - [ ] `src/client/home/pages/FinancialDashboard/components/AssetMetrics.tsx` - 资产负债率模块（资产总额与资产净额）
+    - [ ] **先查看JSXMD文件** - 参考 `docs/战略部署主页面figma-jsx.md` 中的资产负债率模块设计规范
     - [ ] **使用静态数据** - 使用硬编码的示例数据渲染资产总额与资产净额图表
     - [ ] **添加静态图表** - 实现图表布局和样式，不添加动画效果
   - [ ] `src/client/home/pages/FinancialDashboard/components/ProfitMetrics.tsx` - 利润总额与净利润模块
+    - [ ] **先查看JSXMD文件** - 参考 `docs/战略部署主页面figma-jsx.md` 中的利润模块设计规范
     - [ ] **使用静态数据** - 使用硬编码的示例数据渲染利润总额与净利润图表
     - [ ] **添加静态图表** - 实现图表布局和样式，不添加动画效果
   - [ ] `src/client/home/pages/FinancialDashboard/components/IncomeMetrics.tsx` - 收入模块
+    - [ ] **先查看JSXMD文件** - 参考 `docs/战略部署主页面figma-jsx.md` 中的收入模块设计规范
     - [ ] **使用静态数据** - 使用硬编码的示例数据渲染收入图表
     - [ ] **添加静态图表** - 实现图表布局和样式，不添加动画效果
   - [ ] `src/client/home/pages/FinancialDashboard/components/DebtRatioMetrics.tsx` - 资产负债率（百分比）模块
+    - [ ] **先查看JSXMD文件** - 参考 `docs/战略部署主页面figma-jsx.md` 中的资产负债率百分比模块设计规范
     - [ ] **使用静态数据** - 使用硬编码的示例数据渲染资产负债率图表
     - [ ] **添加静态图表** - 实现图表布局和样式，不添加动画效果
 - [ ] 下载和配置图片资源 (AC: 2)
@@ -110,6 +123,13 @@ const debtRatioData = [
 ];
 ```
 
+### 重要开发原则
+**在实现每个组件和每个步骤时，必须先查看JSXMD文件**：
+- 每个组件实现前必须仔细阅读 `docs/战略部署主页面figma-jsx.md` 中的对应设计规范
+- 确保准确重现Figma设计的视觉效果和布局
+- 严格按照1920*1080分辨率实现所有尺寸和间距
+- 保持与设计文档中完全一致的组件结构和样式
+
 ### 设计组件规范 [Source: docs/战略部署主页面figma-jsx.md#L1-L1330]
 基于Figma设计文档，需要实现以下核心组件：