📝 docs(stories): update financial dashboard development plan with animation requirements

- add animation tasks for BarElement component: data column growth animation, hover effect, and loading skeleton animation
- add chart animation requirements for four financial data modules: fade-in animation and column growth animation
- add popup animation task: implement scale-in and scale-out animation effects
- add animation testing tasks: verify animation effects work correctly
- add animation library specification: recommend Framer Motion with fallback to React Spring
- define animation effect requirements: column growth (0.5-1s), hover scaling (1.05x), popup scaling (0.3s)
- add performance requirements: maintain 60fps, respect reduced motion preferences
- update change log with animation library introduction (version 1.7)

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

@@ -27,6 +27,9 @@ Draft
   - [ ] `src/client/home/pages/FinancialDashboard/components/ReportHeader.tsx` - 报表头部组件（包含渐变背景和标题）
   - [ ] `src/client/home/pages/FinancialDashboard/components/BaseContainer.tsx` - 底框和头部容器组件（作为模块容器背景）
   - [ ] `src/client/home/pages/FinancialDashboard/components/BarElement.tsx` - 柱形元素组件（支持多种颜色变体：资产总额、资产净额、利润总额、净利润、资产负债率）
+    - [ ] **添加动画效果** - 实现数据柱从底部向上生长的动画效果
+    - [ ] **添加悬停效果** - 鼠标悬停时柱形轻微放大和阴影变化
+    - [ ] **添加加载动画** - 数据加载时的骨架屏动画
   - [ ] `src/client/home/pages/FinancialDashboard/components/DataLabel.tsx` - 定位数据组件（包含数值显示和装饰元素）
   - [ ] `src/client/home/pages/FinancialDashboard/components/TimeIcon.tsx` - 时间图标组件
   - [ ] `src/client/home/pages/FinancialDashboard/components/GridBackground.tsx` - 底部网格组件（包含背景网格图案）
@@ -34,16 +37,21 @@ Draft
 - [ ] 创建四个财务数据模块组件 (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]
+    - [ ] **添加图表动画** - 实现图表数据加载时的渐入动画和柱形生长动画
 - [ ] 创建变动幅度弹窗组件 (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]
@@ -57,6 +65,7 @@ Draft
   - [ ] `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` 数据正确渲染为资产总额与资产净额图表
@@ -69,6 +78,7 @@ Draft
   - [ ] `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` - 弹出框数据内容测试
@@ -85,6 +95,22 @@ Draft
 - **状态管理**: React Query 5.83.0 (服务端状态) + Context (本地状态)
 - **UI组件库**: shadcn/ui (基于Radix UI)
 - **可视化组件**: Recharts (已集成在 `src/client/components/ui/chart.tsx`)
+- **动画库**: Framer Motion (推荐) 或 React Spring (备选) - 为图表数据柱添加流畅的动画效果
+
+### 动画效果规范
+**推荐动画库**: Framer Motion (性能优秀，API简洁)
+
+**动画效果要求**:
+- **柱形生长动画**: 数据柱从底部向上生长，持续0.5-1秒
+- **悬停交互效果**: 鼠标悬停时柱形轻微放大(1.05倍)和阴影加深
+- **加载骨架动画**: 数据加载时显示骨架屏，有脉动效果
+- **弹窗缩放动画**: 弹窗从中心缩放出现，持续0.3秒
+- **渐入动画**: 图表整体渐入显示，持续0.5秒
+
+**性能要求**:
+- 动画帧率保持60fps
+- 避免过度动画影响页面性能
+- 支持用户偏好设置（减少动画选项）
 
 ### 设计组件规范 [Source: docs/战略部署主页面figma-jsx.md#L1-L1330]
 基于Figma设计文档，需要实现以下核心组件：
@@ -203,6 +229,7 @@ Draft
 ## Change Log
 | Date | Version | Description | Author |
 |------|---------|-------------|---------|
+| 2025-11-14 | 1.7 | 引入前端动画库，为图表数据柱和弹窗添加动画效果任务 | Bob (Scrum Master) |
 | 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) |