📝 docs(story): update financial dashboard story with variation modal tasks

- change story status from "Ready for Review" to "In Progress"
- add implementation tasks for variation modal component (12 subtasks)
- add technical specifications for variation modal component
- update change log with version 1.4 entry (2025-11-15)

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

@@ -1,7 +1,7 @@
 # Story 006.003: 实现财务数据可视化大屏静态页面
 
 ## Status
-Ready for Review
+In Progress
 
 ## Story
 **As a** 财务数据可视化大屏用户，
@@ -78,6 +78,18 @@ Ready for Review
   - [x] **严格验证1920*1080分辨率** - 确保所有尺寸和位置精确匹配设计
   - [x] **测试大屏显示效果** - 验证在大屏设备上的显示效果
   - [x] **优化性能** - 确保页面加载和渲染性能
+- [ ] 实现变化幅度弹窗组件 (AC: 2)
+  - [ ] **先查看JSXMD文件** - 在实现前仔细阅读 `docs/战略部署主页面+弹窗figma-jsx.md` 中的弹窗设计规范
+  - [ ] 创建弹窗组件 `src/client/home/pages/FinancialDashboard/components/VariationModal.tsx`
+  - [ ] **实现弹窗背景和遮罩** - 按照figma-jsx.md第2135-2144行实现弹窗背景和遮罩层
+  - [ ] **实现弹窗容器** - 按照figma-jsx.md第2144-2145行实现1440x852px的弹窗容器
+  - [ ] **添加弹窗标题** - 按照figma-jsx.md第2146-2148行实现"变动幅度"标题
+  - [ ] **实现图例区域** - 按照figma-jsx.md第2149-2223行实现六个财务指标的图例
+  - [ ] **实现坐标轴系统** - 按照figma-jsx.md第2224-2257行实现Y轴刻度标签
+  - [ ] **实现Recharts柱状图** - 使用Recharts库实现柱状图，包含所有六个指标的数据
+  - [ ] **自定义图例颜色** - 确保图例颜色与当前四个图的柱子颜色保持一致
+  - [ ] **集成弹窗交互** - 将弹窗与主页面右下角浮动按钮关联
+  - [ ] **使用静态数据** - 使用硬编码的示例数据填充弹窗图表
 
 ## Dev Notes
 
@@ -233,6 +245,34 @@ for file in *.png; do if file "$file" | grep -q "SVG"; then mv "$file" "${file%.
 - 保持与现有项目技术栈的一致性
 - 确保颜色样式尽量匹配Figma设计
 
+### 变化幅度弹窗技术规范 [Source: docs/战略部署主页面+弹窗figma-jsx.md#L2135-L2429]
+**弹窗组件结构**:
+- **弹窗容器**: 1440x852px，居中显示 [Source: docs/战略部署主页面+弹窗figma-jsx.md#L2144]
+- **遮罩层**: 全屏黑色半透明遮罩，带模糊效果 [Source: docs/战略部署主页面+弹窗figma-jsx.md#L2143]
+- **标题**: "变动幅度"，28px白色字体 [Source: docs/战略部署主页面+弹窗figma-jsx.md#L2146-L2148]
+
+**图例区域规范** [Source: docs/战略部署主页面+弹窗figma-jsx.md#L2149-L2223]:
+- **六个财务指标**: 资产总额、资产净额、资产负债率、收入、利润总额、净利润
+- **图例颜色**: 必须与当前四个图的柱子颜色保持一致
+- **图例样式**: 14px柱形图标 + 18px白色文字标签
+- **数据说明**: "*数据截止至2025年9月"，"单元：%"
+
+**坐标轴系统** [Source: docs/战略部署主页面+弹窗figma-jsx.md#L2224-L2257]:
+- **Y轴范围**: -50% 到 400%，包含0、50、100、150、200、250、300、350、400刻度
+- **Y轴位置**: 左侧82px宽度
+- **图表区域**: 1197x511px
+
+**柱状图实现要求**:
+- **使用Recharts库**: 实现多系列柱状图
+- **数据系列**: 六个财务指标的变化幅度数据
+- **颜色匹配**: 图例颜色与柱子颜色必须与主页面四个图保持一致
+- **静态数据**: 使用硬编码的示例变化幅度数据
+
+**交互集成**:
+- **触发方式**: 主页面右下角浮动按钮点击触发
+- **关闭方式**: 点击遮罩层或ESC键关闭弹窗
+- **状态管理**: 使用React useState管理弹窗显示状态
+
 ### 编码标准 [Source: architecture/coding-standards.md#关键集成规则]
 - **现有API兼容性**: 确保组件不破坏现有API契约
 - **错误处理**: 实现适当的错误边界和加载状态
@@ -261,6 +301,7 @@ for file in *.png; do if file "$file" | grep -q "SVG"; then mv "$file" "${file%.
 ## Change Log
 | Date | Version | Description | Author |
 |------|---------|-------------|---------|
+| 2025-11-15 | 1.4 | 更新故事状态为In Progress - 增加变化幅度弹窗实现任务 | Bob (Scrum Master) |
 | 2025-11-15 | 1.3 | 更新故事状态为Ready for Review - 财务数据可视化大屏静态页面已完全实现 | James (Developer) |
 | 2025-11-14 | 1.2 | 补充完善任务列表 - 基于与figma-jsx.md设计规范的对比分析 | James (Developer) |
 | 2025-11-14 | 1.1 | 添加图片格式检查和重命名任务 - 发现大多数Figma图片实际为SVG格式 | Bob (Scrum Master) |