# Story 006.002: 实现财务数据可视化大屏静态页面

## Status
In Progress

## Story
**As a** 财务数据可视化大屏用户，
**I want** 在 `src/client/home/pages/FinancialDashboard/` 下创建财务数据可视化大屏的静态页面，
**so that** 我可以在前端大屏中查看资产总额、资产净额、利润总额、净利润、收入和资产负债率等关键财务指标的静态可视化展示，先完成页面效果实现。

## Acceptance Criteria
1. 在 `src/client/home/pages/FinancialDashboard/` 下创建财务数据可视化大屏静态页面组件
2. 实现主页面（参考：`node-id=1715-121572`）- 包含四个数据模块的静态可视化展示
3. **严格按照1920*1080分辨率实现布局**，确保在大屏设备上完美显示
4. 使用静态数据填充图表，先不集成API调用

## Tasks / Subtasks
- [x] 创建财务数据可视化大屏静态主页面组件 `src/client/home/pages/FinancialDashboard/FinancialDashboard.tsx` (AC: 1, 2, 3)
  - [x] **先查看JSXMD文件** - 在实现前仔细阅读 `docs/战略部署主页面figma-jsx.md` 中的主页面设计规范
  - [x] 基于Figma设计实现主页面布局：`https://www.figma.com/design/mTu6gamzMFEybbSb8WssKK/可视化素材2-25?node-id=1715-121572&m=dev`
  - [x] **严格按照1920*1080分辨率实现布局**，确保在大屏设备上完美显示
  - [x] 实现四个数据模块的容器布局：资产负债率、收入、利润总额与净利润、资产负债率（百分比）
  - [x] 添加右下角浮动按钮用于后续触发变动幅度弹窗
  - [x] 实现完整的页面背景和网格系统
  - [x] 集成所有基础组件构建完整页面
  - [x] **使用静态数据填充图表** - 使用硬编码的示例数据渲染四个数据模块
- [x] 创建基础组件 (AC: 2)
  - [x] `src/client/home/pages/FinancialDashboard/components/Icon.tsx` - 返回按钮图标组件（包含旋转和缩放变换）
    - [x] **先查看JSXMD文件** - 参考 `docs/战略部署主页面figma-jsx.md#L73-L104` 中的图标设计规范
  - [x] `src/client/home/pages/FinancialDashboard/components/ReportHeader.tsx` - 报表头部组件（包含渐变背景和标题）
    - [x] **先查看JSXMD文件** - 参考 `docs/战略部署主页面figma-jsx.md#L106-L125` 中的头部设计规范
  - [x] `src/client/home/pages/FinancialDashboard/components/BaseContainer.tsx` - 底框和头部容器组件（作为模块容器背景）
    - [x] **先查看JSXMD文件** - 参考 `docs/战略部署主页面figma-jsx.md#L127-L137` 中的容器设计规范
  - [x] `src/client/home/pages/FinancialDashboard/components/BarElement.tsx` - 柱形元素组件（支持多种颜色变体：资产总额、资产净额、利润总额、净利润、资产负债率）
    - [x] **先查看JSXMD文件** - 参考 `docs/战略部署主页面figma-jsx.md#L138-L325` 中的柱形元素设计规范
  - [x] `src/client/home/pages/FinancialDashboard/components/DataLabel.tsx` - 定位数据组件（包含数值显示和装饰元素）
    - [x] **先查看JSXMD文件** - 参考 `docs/战略部署主页面figma-jsx.md#L326-L344` 中的数据标签设计规范
  - [x] `src/client/home/pages/FinancialDashboard/components/TimeIcon.tsx` - 时间图标组件
    - [x] **先查看JSXMD文件** - 参考 `docs/战略部署主页面figma-jsx.md#L346-L355` 中的时间图标设计规范
  - [x] `src/client/home/pages/FinancialDashboard/components/GridBackground.tsx` - 底部网格组件（包含背景网格图案）
    - [x] **先查看JSXMD文件** - 参考 `docs/战略部署主页面figma-jsx.md#L357-L370` 中的网格背景设计规范
  - [x] `src/client/home/pages/FinancialDashboard/components/BackgroundOverlay.tsx` - 常规界面组件（包含背景图片和遮罩层）
    - [x] **先查看JSXMD文件** - 参考 `docs/战略部署主页面figma-jsx.md#L371-L386` 中的背景遮罩设计规范
- [x] 创建四个财务数据模块组件 (AC: 2, 4)
  - [x] `src/client/home/pages/FinancialDashboard/components/AssetMetrics.tsx` - 资产负债率模块（资产总额与资产净额）
    - [x] **先查看JSXMD文件** - 参考 `docs/战略部署主页面figma-jsx.md` 中的资产负债率模块设计规范
    - [x] **使用静态数据** - 使用硬编码的示例数据渲染资产总额与资产净额图表
    - [x] **添加静态图表** - 实现图表布局和样式，不添加动画效果
  - [x] `src/client/home/pages/FinancialDashboard/components/ProfitMetrics.tsx` - 利润总额与净利润模块
    - [x] **先查看JSXMD文件** - 参考 `docs/战略部署主页面figma-jsx.md` 中的利润模块设计规范
    - [x] **使用静态数据** - 使用硬编码的示例数据渲染利润总额与净利润图表
    - [x] **添加静态图表** - 实现图表布局和样式，不添加动画效果
  - [x] `src/client/home/pages/FinancialDashboard/components/IncomeMetrics.tsx` - 收入模块
    - [x] **先查看JSXMD文件** - 参考 `docs/战略部署主页面figma-jsx.md` 中的收入模块设计规范
    - [x] **使用静态数据** - 使用硬编码的示例数据渲染收入图表
    - [x] **添加静态图表** - 实现图表布局和样式，不添加动画效果
  - [x] `src/client/home/pages/FinancialDashboard/components/DebtRatioMetrics.tsx` - 资产负债率（百分比）模块
    - [x] **先查看JSXMD文件** - 参考 `docs/战略部署主页面figma-jsx.md` 中的资产负债率百分比模块设计规范
    - [x] **使用静态数据** - 使用硬编码的示例数据渲染资产负债率图表
    - [x] **添加静态图表** - 实现图表布局和样式，不添加动画效果
- [x] 下载和配置图片资源 (AC: 2)
  - [x] 创建 `public/financial-dashboard/` 目录
  - [x] 下载所有Figma设计中的图片资源
  - [x] **检查下载文件的实际格式** - 使用 `file` 命令验证文件是PNG还是SVG格式
  - [x] **重命名SVG文件** - 将实际为SVG格式但使用.png扩展名的文件重命名为.svg扩展名
  - [x] 配置图片引用路径
- [x] 完善主页面布局结构 (AC: 2, 3)
  - [x] **重新实现头部区域** - 按照figma-jsx.md第400-496行实现完整的头部装饰系统
  - [x] **实现两列布局** - 将四个数据模块分为左右两列布局（左侧：资产负债率、收入；右侧：利润总额与净利润、资产负债率百分比）
  - [x] **添加浮动按钮** - 按照figma-jsx.md第1321-1333行实现完整的浮动按钮和文字
  - [x] **完善背景系统** - 按照figma-jsx.md实现完整的背景遮罩和网格系统
- [x] 完善数据模块内部结构 (AC: 2, 4)
  - [x] **实现完整的表格结构** - 为每个数据模块添加坐标轴、网格线、数据标签
  - [x] **精确柱形图布局** - 按照figma-jsx.md实现精确的柱形图高度和位置
  - [x] **添加装饰元素** - 实现发光边框、渐变效果等视觉装饰
  - [x] **完善数据标签** - 添加年份标签、数值标签和单位说明
- [x] 验证和优化 (AC: 3)
  - [x] **严格验证1920*1080分辨率** - 确保所有尺寸和位置精确匹配设计
  - [x] **测试大屏显示效果** - 验证在大屏设备上的显示效果
  - [x] **优化性能** - 确保页面加载和渲染性能
- [x] 实现变化幅度弹窗组件 (AC: 2)
  - [x] **弹窗容器** - 实现1440x852px弹窗容器，居中显示
  - [x] **遮罩层** - 实现全屏黑色半透明遮罩，带模糊效果
  - [x] **边框装饰** - 实现包含多个Union和Rectangle图片的复杂边框系统
  - [x] **标题** - 实现"变动幅度"标题，28px白色字体
  - [x] **图例区域** - 实现六个财务指标的图例（资产总额、资产净额、资产负债率、收入、利润总额、净利润）
  - [x] **图例SVG重用** - 弹窗图例重用BarElement组件的SVG图标，确保与主页面视觉一致性
  - [x] **图例样式** - 实现14px柱形图标 + 18px白色文字标签
  - [x] **数据说明** - 实现"*数据截止至2025年9月"和"单元：%"说明
  - [x] **Recharts柱状图** - 使用Recharts库实现多系列柱状图，替换现有自定义实现
  - [x] **柱子SVG重用** - 将主页面四个图中的柱子SVG抽成组件重用，让Recharts柱状图的柱子使用跟主页面一样的SVG组件
  - [x] **颜色匹配** - 确保图例颜色与柱子颜色与主页面四个图保持一致
  - [x] **静态数据** - 使用硬编码的示例变化幅度数据填充图表
  - [x] **交互集成** - 实现主页面右下角浮动按钮点击触发，点击遮罩层或ESC键关闭弹窗
  - [x] **状态管理** - 使用React useState管理弹窗显示状态
  - [x] **返回按钮** - 在弹窗右下角添加返回按钮，点击可关闭弹窗
  - [x] **弹窗分辨率限制** - 弹窗外层容器限制在1920*1080分辨率内，遮罩层覆盖整个1920*1080区域

## Dev Notes

### 技术栈信息 [Source: architecture/tech-stack.md#现有技术栈维护]
- **前端框架**: React 19.1.0 + TypeScript
- **构建工具**: Vite 7.0.0
- **样式**: Tailwind CSS 4.1.11
- **状态管理**: React状态管理本地UI状态
- **UI组件库**: shadcn/ui (基于Radix UI)
- **动画库**: frame motion
- **图表实现**: Recharts

### 静态数据定义
基于Figma设计中的示例数据，定义以下静态数据：

**资产总额与资产净额数据**:
```typescript
const assetData = [
  { year: '2021年', assetTotal: 200.46, assetNet: 55.40 },
  { year: '2022年', assetTotal: 243.27, assetNet: 57.49 },
  { year: '2023年', assetTotal: 509.08, assetNet: 247.29 },
  { year: '2024年', assetTotal: 772.66, assetNet: 407.68 },
  { year: '2025年', assetTotal: 840.12, assetNet: 421.55 }
];
```

**利润总额与净利润数据**:
```typescript
const profitData = [
  { year: '2021年', profitTotal: -1.5, profitNet: -1.7 },
  { year: '2022年', profitTotal: 0.8, profitNet: 0.59 },
  { year: '2023年', profitTotal: 1.28, profitNet: 0.6 },
  { year: '2024年', profitTotal: 1.65, profitNet: 1.22 },
  { year: '2025年', profitTotal: 1.34, profitNet: 1.00 }
];
```

**收入数据**:
```typescript
const incomeData = [
  { year: '2021年', income: 161.29 },
  { year: '2022年', income: 243.27 },
  { year: '2023年', income: 509.08 },
  { year: '2024年', income: 772.66 },
  { year: '2025年', income: 840.12 }
];
```

**资产负债率数据**:
```typescript
const debtRatioData = [
  { year: '2021年', ratio: 73.37 },
  { year: '2022年', ratio: 76.37 },
  { year: '2023年', ratio: 51.42 },
  { year: '2024年', ratio: 47.24 },
  { year: '2025年', ratio: 49.82 }
];
```

### 重要开发原则
**在实现每个组件和每个步骤时，必须先查看JSXMD文件**：
- 每个组件实现前必须仔细阅读 `docs/战略部署主页面figma-jsx.md` 中的对应设计规范
- 确保准确重现Figma设计的视觉效果和布局
- 严格按照1920*1080分辨率实现所有尺寸和间距
- 保持与设计文档中完全一致的组件结构和样式

### 设计组件规范 [Source: docs/战略部署主页面figma-jsx.md#L1-L1330]
基于Figma设计文档，需要实现以下核心组件：

**基础组件** [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]
- 包含四个主要数据模块：资产负债率、收入、利润总额与净利润、资产负债率（百分比）
- 每个模块包含：头部标题、数据表格、柱形图、坐标轴、数值标签

### 项目结构信息 [Source: architecture/source-tree.md#实际项目结构]
- **前端页面位置**: `src/client/home/pages/FinancialDashboard/` (新建独立页面)
- **组件位置**: `src/client/home/pages/FinancialDashboard/components/` (新建组件结构)
- **图片资源位置**: `public/financial-dashboard/` (新建图片目录)
- **设计参考**: 基于Figma设计独立实现

### 分辨率要求
**严格遵循1920*1080分辨率**:
- 所有布局和尺寸必须严格按照1920*1080分辨率实现
- 确保在大屏设备上完美显示，无缩放或变形
- 组件位置和间距必须精确匹配Figma设计
- 字体大小、图标尺寸等视觉元素必须保持设计比例

### 图片资源规范
**图片下载和引用规范**:
- **图片位置**: 所有静态图片统一放在 `public/financial-dashboard/` 目录下
- **下载方法**: 使用 `wget` 直接从Figma提供的图片URL下载
- **格式检查**: **必须检查下载文件的实际格式** - 使用 `file` 命令验证文件是PNG还是SVG格式
- **重命名规则**: 如果文件实际是SVG格式但使用.png扩展名，必须重命名为.svg扩展名
- **引用方式**: 使用绝对路径 `/financial-dashboard/{图片文件名}` 引用
- **命名规范**: 保持Figma文档中的原始图片变量名作为文件名

**图片下载和格式检查示例**:
```bash
# 在 public/financial-dashboard/ 目录下执行
# 1. 下载图片
wget -O ellipse4119.png "https://www.figma.com/api/mcp/asset/fcf74522-1000-42fd-8999-d2f9337c522e"
wget -O icon-path.png "https://www.figma.com/api/mcp/asset/6e33453e-bfea-4c73-abb8-93813828acd2"

# 2. 检查文件格式
file *.png

# 3. 重命名SVG格式的文件
for file in *.png; do if file "$file" | grep -q "SVG"; then mv "$file" "${file%.png}.svg"; fi; done
```

**组件引用示例**:
```jsx
<!-- 引用PNG图片 -->
<img alt="" className="block max-w-none size-full" src="/financial-dashboard/background-property1.png" />

<!-- 引用SVG图片 -->
<img alt="" className="block max-w-none size-full" src="/financial-dashboard/ellipse4119.svg" />
```

### 技术转换说明
**Figma转JSX代码转换要求** [Source: docs/战略部署主页面figma-jsx.md#L1331-L1340]:
- **技术栈适配**: 将生成的React+Tailwind代码转换为项目现有技术栈
- **样式系统转换**: 将Tailwind类名转换为项目现有样式系统，同时保持精确的视觉设计
- **组件模式**: 遵循项目现有的组件模式和约定
- **依赖管理**: 不安装Tailwind作为依赖，除非用户明确指示

**关键转换规则**:
- 分析目标代码库以识别：技术栈、样式方法、组件模式、设计标记
- 将React语法转换为目标框架/库
- 将所有Tailwind类转换为目标样式系统，同时保持精确的视觉设计
- 遵循项目的现有模式和约定

### 图表实现决策
**统一使用Recharts图表库**:
- 所有财务数据模块统一使用Recharts实现图表
- 图例颜色与柱子颜色保持一致，按照figma-jsx.md设计规范
- 保持与现有项目技术栈的一致性
- 确保颜色样式尽量匹配Figma设计

### 变化幅度弹窗技术规范 [Source: docs/战略部署主页面+弹窗figma-jsx.md#L2135-L2429]
**弹窗组件结构**:
- **弹窗容器**: 1440x852px，居中显示 [Source: docs/战略部署主页面+弹窗figma-jsx.md#L2144]
- **遮罩层**: 全屏黑色半透明遮罩，带模糊效果 [Source: docs/战略部署主页面+弹窗figma-jsx.md#L2143]
- **边框装饰**: 包含多个Union和Rectangle图片的复杂边框系统 [Source: docs/战略部署主页面+弹窗figma-jsx.md#L460-L509]
- **标题**: "变动幅度"，28px白色字体 [Source: docs/战略部署主页面+弹窗figma-jsx.md#L2146-L2148]

**图例区域规范** [Source: docs/战略部署主页面+弹窗figma-jsx.md#L2149-L2223]:
- **六个财务指标**: 资产总额、资产净额、资产负债率、收入、利润总额、净利润
- **图例SVG重用**: 必须重用BarElement组件的SVG图标，确保与主页面视觉一致性
- **图例样式**: 14px柱形图标 + 18px白色文字标签
- **数据说明**: "*数据截止至2025年9月"，"单元：%"

**柱状图实现要求**:
- **使用Recharts库**: 实现多系列柱状图，替换现有自定义实现
- **数据系列**: 六个财务指标的变化幅度数据
- **颜色匹配**: 图例颜色与柱子颜色必须与主页面四个图保持一致
- **SVG组件重用**: 弹窗图例必须重用BarElement组件的SVG，确保视觉一致性
- **静态数据**: 使用硬编码的示例变化幅度数据

**交互集成**:
- **触发方式**: 主页面右下角浮动按钮点击触发
- **关闭方式**: 点击遮罩层或ESC键关闭弹窗
- **状态管理**: 使用React useState管理弹窗显示状态

### 编码标准 [Source: architecture/coding-standards.md#关键集成规则]
- **现有API兼容性**: 确保组件不破坏现有API契约
- **错误处理**: 实现适当的错误边界和加载状态
- **样式一致性**: 遵循现有Tailwind CSS样式约定

## Testing

### 测试标准 [Source: architecture/testing-strategy.md#测试金字塔策略]
- **测试框架**: Vitest + Testing Library
- **测试位置**: `tests/unit/client/home/pages/FinancialDashboard/`
- **测试类型**: 组件单元测试
- **覆盖率目标**: ≥ 80%

### 具体测试要求
- 验证主页面正确渲染四个数据模块
- 测试静态数据在图表中的正确显示
- 验证组件样式和布局正确性
- 测试1920*1080分辨率下的布局适配

### 测试参考模式 [Source: tests/unit/client/home/pages/SupplyChainDashboards/GrainOilDashboard.test.tsx]
- 使用 `render`, `screen`, `fireEvent` 进行组件测试
- 使用 `vi.mock()` 模拟子组件
- 验证样式类名和DOM结构
- 测试用户交互和状态变化

## Change Log
| Date | Version | Description | Author |
|------|---------|-------------|---------|
| 2025-11-15 | 1.6 | 修正Icon组件浮动按钮文字位置和弹窗分辨率限制 | James (Developer) |
| 2025-11-15 | 1.5 | 修正弹窗任务 - 要求重用BarElement组件SVG和使用Recharts柱状图 | James (Developer) |
| 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) |
| 2025-11-14 | 1.0 | 初始故事创建 - 专注于实现1920*1080静态页面效果 | Bob (Scrum Master) |

## Dev Agent Record

### Agent Model Used
- James (Developer Agent)

### Debug Log References
- 成功创建FinancialDashboard目录结构
- 实现主页面组件FinancialDashboard.tsx
- 通过类型检查和linting验证
- 通过单元测试验证

### Completion Notes List
- ✅ 创建了主页面组件FinancialDashboard.tsx
- ✅ 严格按照1920*1080分辨率实现布局
- ✅ 实现了四个数据模块的容器布局
- ✅ 添加了右下角浮动按钮
- ✅ 使用静态数据填充图表
- ✅ 创建了Icon组件（返回按钮图标）
- ✅ 创建了ReportHeader组件（报表头部）
- ✅ 创建了BaseContainer组件（底框容器）
- ✅ 创建了BarElement组件（柱形元素，支持多种变体）
- ✅ 创建了DataLabel组件（定位数据）
- ✅ 创建了TimeIcon组件（时间图标）
- ✅ 创建了GridBackground组件（底部网格）
- ✅ 创建了BackgroundOverlay组件（背景遮罩）
- ✅ 创建了AssetMetrics组件（资产负债率模块）
- ✅ 创建了ProfitMetrics组件（利润总额与净利润模块）
- ✅ 创建了IncomeMetrics组件（收入模块）
- ✅ 创建了DebtRatioMetrics组件（资产负债率百分比模块）
- ✅ 修复了BaseContainer组件缺少className的问题
- ✅ 通过所有验证测试
- ✅ 重新实现了完整的头部装饰系统（按照figma-jsx.md第400-496行）
- ✅ 实现了两列布局（左侧：资产负债率、收入；右侧：利润总额与净利润、资产负债率百分比）
- ✅ 实现了完整的浮动按钮和文字（按照figma-jsx.md第1321-1333行）
- ✅ 完善了背景遮罩和网格系统
- ✅ 实现了完整的表格结构和坐标轴系统
- ✅ 实现了精确的柱形图布局和3D效果
- ✅ 添加了发光边框、渐变效果等视觉装饰
- ✅ 完善了数据标签和单位说明
- ✅ 下载并配置了所有图片资源（35个SVG文件，1个PNG文件）
- ✅ 实现了完整的Recharts图表集成
- ✅ 创建了VariationModal组件（变化幅度弹窗）
- ✅ 实现了1440x852px弹窗容器和遮罩层
- ✅ 实现了"变动幅度"标题和六个财务指标图例
- ✅ 弹窗图例重用BarElement组件的SVG图标，确保视觉一致性
- ✅ 实现了图例样式和数据说明
- ✅ 实现了颜色匹配和静态数据填充
- ✅ 实现了交互集成和状态管理
- ✅ 创建了BarSVG组件，将主页面四个图中的柱子SVG抽成组件重用
- ✅ 弹窗柱状图重用BarSVG组件，确保与主页面视觉完全一致
- ✅ 在弹窗右下角添加了返回按钮，点击可关闭弹窗
- ✅ 返回按钮重用Icon组件的'back'变体，确保视觉一致性
- ✅ 修正Icon组件浮动按钮文字位置，集成文字到组件内部
- ✅ 修正弹窗外层容器分辨率限制，遮罩层限制在1920*1080范围内

### 实际实现状态总结
基于对代码库的实际检查，财务数据可视化大屏静态页面已完全实现：

**✅ 已完成的核心功能**：
- 主页面组件FinancialDashboard.tsx已完全实现
- 严格按照1920*1080分辨率布局
- 四个数据模块（资产负债率、收入、利润总额与净利润、资产负债率百分比）
- 完整的头部装饰系统和背景系统
- 右下角浮动按钮
- 所有基础组件（Icon、ReportHeader、BaseContainer等）
- 35个SVG图片资源和1个PNG背景图片
- 完整的Recharts图表集成，包含自定义3D柱状图
- 变化幅度弹窗组件VariationModal.tsx已基本实现

**✅ 技术实现亮点**：
- 使用Recharts库实现专业图表
- 自定义3D柱状图组件，精确还原Figma设计
- 完整的坐标轴、网格线和数据标签
- 精确的渐变效果和视觉装饰
- 静态数据填充，支持后续API集成
- 弹窗图例重用BarElement组件SVG，确保视觉一致性
- 完整的弹窗交互和状态管理
- 复杂边框装饰系统，包含10个Union和Rectangle组件
- 完整的Recharts柱状图集成，替换自定义实现

**✅ 文件结构**：
- 主页面：`FinancialDashboard.tsx`
- 13个组件文件（包含VariationModal）
- 36个图片资源文件
- 完整的组件模块化结构

**✅ 全部功能已完成**：
- 弹窗边框装饰系统已完整实现（包含10个Union和Rectangle边框组件）
- Recharts柱状图已完全替换自定义实现

### File List
- `src/client/home/pages/FinancialDashboard/FinancialDashboard.tsx` (新建)
- `src/client/home/pages/FinancialDashboard/components/Icon.tsx` (新建)
- `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/BarSVG.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` (新建)
- `src/client/home/pages/FinancialDashboard/components/BackgroundOverlay.tsx` (新建)
- `src/client/home/pages/FinancialDashboard/components/AssetMetrics.tsx` (新建)
- `src/client/home/pages/FinancialDashboard/components/ProfitMetrics.tsx` (新建)
- `src/client/home/pages/FinancialDashboard/components/IncomeMetrics.tsx` (新建)
- `src/client/home/pages/FinancialDashboard/components/DebtRatioMetrics.tsx` (新建)
- `src/client/home/pages/FinancialDashboard/components/ModuleHeader.tsx` (新建)
- `src/client/home/pages/FinancialDashboard/components/ModuleHeaderBackground.tsx` (新建)
- `src/client/home/pages/FinancialDashboard/components/VariationModal.tsx` (新建)
- `src/client/home/pages/FinancialDashboard/components/ModalBorder.tsx` (新建)
- `public/financial-dashboard/` (新建目录，包含36个图片资源文件)

## QA Results