✨ feat(financial-dashboard): 创建新分支并删除复杂代码

- 创建新分支 financial-dashboard-static
- 删除之前故事006.002创建的复杂代码目录
- 添加故事006.003文档
- 将PNG格式的SVG图片重命名为.svg扩展名

🤖 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

@@ -0,0 +1,236 @@
+# Story 006.003: 实现财务数据可视化大屏静态页面
+
+## Status
+Draft
+
+## 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
+- [ ] 创建财务数据可视化大屏静态主页面组件 `src/client/home/pages/FinancialDashboard/FinancialDashboard.tsx` (AC: 1, 2, 3)
+  - [ ] 基于Figma设计实现主页面布局：`https://www.figma.com/design/mTu6gamzMFEybbSb8WssKK/可视化素材2-25?node-id=1715-121572&m=dev`
+  - [ ] **严格按照1920*1080分辨率实现布局**，确保在大屏设备上完美显示
+  - [ ] 实现四个数据模块的容器布局：资产负债率、收入、利润总额与净利润、资产负债率（百分比）
+  - [ ] 添加右下角浮动按钮用于后续触发变动幅度弹窗
+  - [ ] 实现完整的页面背景和网格系统
+  - [ ] 集成所有基础组件构建完整页面
+  - [ ] **使用静态数据填充图表** - 使用硬编码的示例数据渲染四个数据模块
+- [ ] 创建基础组件 (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]
+- [ ] 创建四个财务数据模块组件 (AC: 2, 4)
+  - [ ] `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` - 资产负债率（百分比）模块
+    - [ ] **使用静态数据** - 使用硬编码的示例数据渲染资产负债率图表
+    - [ ] **添加静态图表** - 实现图表布局和样式，不添加动画效果
+- [ ] 下载和配置图片资源 (AC: 2)
+  - [ ] 创建 `public/financial-dashboard/` 目录
+  - [ ] 下载所有Figma设计中的图片资源
+  - [ ] **检查下载文件的实际格式** - 使用 `file` 命令验证文件是PNG还是SVG格式
+  - [ ] **重命名SVG文件** - 将实际为SVG格式但使用.png扩展名的文件重命名为.svg扩展名
+  - [ ] 配置图片引用路径
+
+## 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)
+- **动画库**: 暂不使用，先实现静态页面
+- **图表实现**: **自定义React组件** (基于Figma设计，不使用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 }
+];
+```
+
+### 设计组件规范 [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类转换为目标样式系统，同时保持精确的视觉设计
+- 遵循项目的现有模式和约定
+
+### 编码标准 [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-14 | 1.1 | 添加图片格式检查和重命名任务 - 发现大多数Figma图片实际为SVG格式 | Bob (Scrum Master) |
+| 2025-11-14 | 1.0 | 初始故事创建 - 专注于实现1920*1080静态页面效果 | Bob (Scrum Master) |
+
+## Dev Agent Record
+
+### Agent Model Used
+
+### Debug Log References
+
+### Completion Notes List
+
+### File List
+
+## QA Results

docs/战略部署主页面figma-jsx.md

@@ -1,74 +1,82 @@
 ```jsx
-const imgProperty1 = "https://www.figma.com/api/mcp/asset/ad3f1fa8-0cec-4ff9-a24b-f3dea29b0925";
-const imgEllipse4119 = "https://www.figma.com/api/mcp/asset/fcf74522-1000-42fd-8999-d2f9337c522e";
-const img = "https://www.figma.com/api/mcp/asset/6e33453e-bfea-4c73-abb8-93813828acd2";
-const img1 = "https://www.figma.com/api/mcp/asset/59477634-8247-4a5a-9b3c-98304aea3e1d";
-const img2 = "https://www.figma.com/api/mcp/asset/371d8e07-1858-4b6c-96d9-1841362a039c";
-const img3 = "https://www.figma.com/api/mcp/asset/91dfae88-ef21-4b34-bf2b-e16237b480a6";
-const imgVector = "https://www.figma.com/api/mcp/asset/286628a7-3ede-45e2-8c76-5f4ca8913ede";
-const imgVector1 = "https://www.figma.com/api/mcp/asset/dd1cdfa2-b95f-49bc-9e3f-11382a309ca5";
-const imgVector2 = "https://www.figma.com/api/mcp/asset/6e19994b-d9cf-4f17-8af0-c3e9cc0c2e27";
-const imgRectangle3709 = "https://www.figma.com/api/mcp/asset/5d0e159a-ff97-47b4-9e08-bbacc0d02c98";
-const imgGroup1321314607 = "https://www.figma.com/api/mcp/asset/91fc4252-a6d8-4041-9340-1589e4f5ae38";
-const imgVector3 = "https://www.figma.com/api/mcp/asset/32a8ab24-f095-4d72-9dab-2b5d55843c86";
-const imgFrame10907 = "https://www.figma.com/api/mcp/asset/8ecc449c-7f4c-4cb0-a640-cfa6168a3845";
-const imgEllipse305 = "https://www.figma.com/api/mcp/asset/e3ae326e-3da9-4f78-a1d1-c97c3a6c3205";
-const imgEllipse304 = "https://www.figma.com/api/mcp/asset/a57ca60a-b6db-42df-b9e9-1fcb4a439a9d";
-const imgEllipse306 = "https://www.figma.com/api/mcp/asset/43e5d3a3-053a-467a-980b-9c46976b6718";
-const imgVector4 = "https://www.figma.com/api/mcp/asset/7cc7a761-911a-4878-a218-b6beb3141ccc";
-const imgFrame10908 = "https://www.figma.com/api/mcp/asset/8ba3eb41-15c5-448f-9f74-7599a917e560";
-const imgEllipse307 = "https://www.figma.com/api/mcp/asset/9aadd54e-4660-4e6e-8b71-34ac6dbd7b47";
-const imgEllipse308 = "https://www.figma.com/api/mcp/asset/18d18c20-4a69-492a-8bad-0d4477dd2d8a";
-const imgEllipse309 = "https://www.figma.com/api/mcp/asset/7c0de09a-9d87-4343-8fbd-1396e62eff89";
-const imgVector5 = "https://www.figma.com/api/mcp/asset/4fdbebfb-b378-47e1-bd08-c3ba8ab7764c";
-const imgVector6 = "https://www.figma.com/api/mcp/asset/fbd885f6-cc0d-4b4b-822e-48fb27da3770";
-const imgVector7 = "https://www.figma.com/api/mcp/asset/cb0a753b-4827-4cdb-bef0-d421d0f12849";
-const imgRectangle3710 = "https://www.figma.com/api/mcp/asset/adc755e3-e9df-45ad-aa33-d77532784913";
-const imgGroup1321314608 = "https://www.figma.com/api/mcp/asset/42157d06-8863-4914-b09f-800ac22e226c";
-const imgVector8 = "https://www.figma.com/api/mcp/asset/0bb2c472-a226-4860-8ccd-afc2e11b6190";
-const imgVector9 = "https://www.figma.com/api/mcp/asset/b1f67e06-f709-4e73-b8cb-e2ccf26690ab";
-const imgVector10 = "https://www.figma.com/api/mcp/asset/8e2be2e8-f565-45af-8bd6-1cfeb59476bc";
-const imgRectangle3711 = "https://www.figma.com/api/mcp/asset/b788398c-c93b-4379-ba9e-b33e2aac8802";
-const imgGroup1321314609 = "https://www.figma.com/api/mcp/asset/dce2b4f9-d9cc-461a-afe5-3a22fce7e46e";
-const imgRectangle3714 = "https://www.figma.com/api/mcp/asset/ef028a52-ae97-4ffa-8197-e5ac50be2bde";
-const imgIconTime = "https://www.figma.com/api/mcp/asset/406d1236-4922-4a5d-b0c6-2b405f9d9587";
-const imgVector11 = "https://www.figma.com/api/mcp/asset/a834e22a-ee50-4fa6-afcd-5662a590ba13";
-const img4 = "https://www.figma.com/api/mcp/asset/1ba01f7d-beae-4e5f-af35-1aaa61e6c7af";
-const img5 = "https://www.figma.com/api/mcp/asset/47af8281-6d74-4c1b-b6e7-4a33fa0769a0";
-const img6 = "https://www.figma.com/api/mcp/asset/4a407cb3-5fa8-431e-82f5-a4e80a6dd6c6";
-const img7 = "https://www.figma.com/api/mcp/asset/4ad06a6f-cfb7-4fea-8165-d29f16d7b724";
-const img8 = "https://www.figma.com/api/mcp/asset/ae4b53fa-3f00-4539-a630-cf34cf9fa174";
-const img9 = "https://www.figma.com/api/mcp/asset/3dcb2741-2af5-4c81-ba87-7641d083ce85";
-const img10 = "https://www.figma.com/api/mcp/asset/7c5766a0-60d9-4dce-a61a-ab77fe504687";
-const img11 = "https://www.figma.com/api/mcp/asset/ebab66be-608a-4f15-9ee0-5b0ea2ee5f86";
-const img12 = "https://www.figma.com/api/mcp/asset/816963c1-ec66-4f4f-9e3c-8c00047d33dd";
-const img13 = "https://www.figma.com/api/mcp/asset/22bc7622-a7da-401d-9451-5cf73bd1532c";
-const img14 = "https://www.figma.com/api/mcp/asset/4a995039-f8b4-4442-9960-d25cd2d1958f";
-const img15 = "https://www.figma.com/api/mcp/asset/9a551809-608f-48bc-889b-7c0c5823b923";
-const img16 = "https://www.figma.com/api/mcp/asset/ded89b08-063f-4157-9180-3f5db085cd63";
-const img17 = "https://www.figma.com/api/mcp/asset/67c8f7ae-1bee-4847-b616-fa67f0b69404";
-const img18 = "https://www.figma.com/api/mcp/asset/bd7171cc-ccf5-448f-b785-68a5378281d6";
-const img19 = "https://www.figma.com/api/mcp/asset/fab64b95-af76-4ae2-9f5c-6448dca5dd51";
-const img20 = "https://www.figma.com/api/mcp/asset/f1b7724b-9cfb-48db-b394-c921099b78c1";
-const img21 = "https://www.figma.com/api/mcp/asset/a1d9fa81-a3e5-42da-9c88-470f0f864853";
-const img22 = "https://www.figma.com/api/mcp/asset/2e171e2c-2a35-4ea1-834a-9cce5b144912";
-const img23 = "https://www.figma.com/api/mcp/asset/c6ddd14b-ee55-4b4f-b66d-6bfac8018ab6";
-const img24 = "https://www.figma.com/api/mcp/asset/85ded886-f6a0-4f7a-b136-40a9d03e7600";
-const img25 = "https://www.figma.com/api/mcp/asset/e4e1784b-4035-4d81-916c-5d3f2bcf9351";
-const img26 = "https://www.figma.com/api/mcp/asset/84434179-280a-4e81-8ad3-4a90a28674b9";
-const img27 = "https://www.figma.com/api/mcp/asset/b520f998-24be-4342-9a5a-a724592f940c";
-const img28 = "https://www.figma.com/api/mcp/asset/34e273b8-75f4-4e5a-bbe3-af4f14cbf4fe";
-const img29 = "https://www.figma.com/api/mcp/asset/2fa8b641-8683-4691-af2b-e2b951862674";
-const img30 = "https://www.figma.com/api/mcp/asset/5d801346-5841-48a9-947b-c524135193c0";
-const img31 = "https://www.figma.com/api/mcp/asset/aa2b7420-7fe4-4495-938c-0c5e3b284cfe";
-const img32 = "https://www.figma.com/api/mcp/asset/c65a79d5-cb2e-4e12-8f0f-3561a60bf8ad";
-const img33 = "https://www.figma.com/api/mcp/asset/2c2fa98f-df52-4ca3-a59c-662b35f5bad1";
-const img34 = "https://www.figma.com/api/mcp/asset/0144747c-764a-4fbd-bf24-2131b4d76fbe";
-const img35 = "https://www.figma.com/api/mcp/asset/05966125-e08f-473f-9714-1baf2f4067a7";
-const img36 = "https://www.figma.com/api/mcp/asset/8bd560f7-4744-41bd-adc1-c550cf53d121";
-const img37 = "https://www.figma.com/api/mcp/asset/86f1373e-51d2-44ac-8389-0516647f3829";
-const img38 = "https://www.figma.com/api/mcp/asset/c0aa7f46-d408-4c9d-b8f1-04a2df05f3e7";
-const img39 = "https://www.figma.com/api/mcp/asset/d8920737-0ff8-4441-8666-ffbf3861dde2";
+// 图片格式分析注释（基于已下载文件的实际内容检查）：
+// 注意：虽然文件名使用.png扩展名，但大多数文件实际上是SVG格式
+
+// 真正的PNG格式图片（仅1个）：
+const imgProperty1 = "https://www.figma.com/api/mcp/asset/ad3f1fa8-0cec-4ff9-a24b-f3dea29b0925"; // PNG (background-property1.png)
+
+// 实际为SVG格式的图片（虽然文件名使用.png扩展名）：
+const imgEllipse4119 = "https://www.figma.com/api/mcp/asset/fcf74522-1000-42fd-8999-d2f9337c522e"; // SVG (ellipse4119.png)
+const img = "https://www.figma.com/api/mcp/asset/6e33453e-bfea-4c73-abb8-93813828acd2"; // SVG (icon-path.png)
+const img1 = "https://www.figma.com/api/mcp/asset/59477634-8247-4a5a-9b3c-98304aea3e1d"; // SVG (header-left.png)
+const img2 = "https://www.figma.com/api/mcp/asset/371d8e07-1858-4b6c-96d9-1841362a039c"; // SVG (header-right.png)
+const img3 = "https://www.figma.com/api/mcp/asset/91dfae88-ef21-4b34-bf2b-e16237b480a6"; // SVG (base-frame.png)
+const imgVector = "https://www.figma.com/api/mcp/asset/286628a7-3ede-45e2-8c76-5f4ca8913ede"; // SVG (vector.png)
+const imgVector1 = "https://www.figma.com/api/mcp/asset/dd1cdfa2-b95f-49bc-9e3f-11382a309ca5"; // SVG (vector1.png)
+const imgVector2 = "https://www.figma.com/api/mcp/asset/6e19994b-d9cf-4f17-8af0-c3e9cc0c2e27"; // SVG (vector2.png)
+const imgRectangle3709 = "https://www.figma.com/api/mcp/asset/5d0e159a-ff97-47b4-9e08-bbacc0d02c98"; // SVG (rectangle3709.png)
+const imgGroup1321314607 = "https://www.figma.com/api/mcp/asset/91fc4252-a6d8-4041-9340-1589e4f5ae38"; // SVG (group1321314607.png)
+const imgVector3 = "https://www.figma.com/api/mcp/asset/32a8ab24-f095-4d72-9dab-2b5d55843c86"; // SVG (vector3.png)
+const imgFrame10907 = "https://www.figma.com/api/mcp/asset/8ecc449c-7f4c-4cb0-a640-cfa6168a3845"; // SVG (frame10907.png)
+const imgEllipse305 = "https://www.figma.com/api/mcp/asset/e3ae326e-3da9-4f78-a1d1-c97c3a6c3205"; // SVG (ellipse305.png)
+const imgEllipse304 = "https://www.figma.com/api/mcp/asset/a57ca60a-b6db-42df-b9e9-1fcb4a439a9d"; // SVG (ellipse304.png)
+const imgEllipse306 = "https://www.figma.com/api/mcp/asset/43e5d3a3-053a-467a-980b-9c46976b6718"; // SVG (ellipse306.png)
+const imgVector4 = "https://www.figma.com/api/mcp/asset/7cc7a761-911a-4878-a218-b6beb3141ccc"; // SVG (vector4.png)
+const imgFrame10908 = "https://www.figma.com/api/mcp/asset/8ba3eb41-15c5-448f-9f74-7599a917e560"; // SVG (frame10908.png)
+const imgEllipse307 = "https://www.figma.com/api/mcp/asset/9aadd54e-4660-4e6e-8b71-34ac6dbd7b47"; // SVG (ellipse307.png)
+const imgEllipse308 = "https://www.figma.com/api/mcp/asset/18d18c20-4a69-492a-8bad-0d4477dd2d8a"; // SVG (ellipse308.png)
+const imgEllipse309 = "https://www.figma.com/api/mcp/asset/7c0de09a-9d87-4343-8fbd-1396e62eff89"; // SVG (ellipse309.png)
+const imgVector5 = "https://www.figma.com/api/mcp/asset/4fdbebfb-b378-47e1-bd08-c3ba8ab7764c"; // SVG (vector5.png)
+const imgVector6 = "https://www.figma.com/api/mcp/asset/fbd885f6-cc0d-4b4b-822e-48fb27da3770"; // SVG (vector6.png)
+const imgVector7 = "https://www.figma.com/api/mcp/asset/cb0a753b-4827-4cdb-bef0-d421d0f12849"; // SVG (vector7.png)
+const imgRectangle3710 = "https://www.figma.com/api/mcp/asset/adc755e3-e9df-45ad-aa33-d77532784913"; // SVG (rectangle3710.png)
+const imgGroup1321314608 = "https://www.figma.com/api/mcp/asset/42157d06-8863-4914-b09f-800ac22e226c"; // SVG (group1321314608.png)
+const imgVector8 = "https://www.figma.com/api/mcp/asset/0bb2c472-a226-4860-8ccd-afc2e11b6190"; // SVG (vector8.png)
+const imgVector9 = "https://www.figma.com/api/mcp/asset/b1f67e06-f709-4e73-b8cb-e2ccf26690ab"; // SVG (vector9.png)
+const imgVector10 = "https://www.figma.com/api/mcp/asset/8e2be2e8-f565-45af-8bd6-1cfeb59476bc"; // SVG (vector10.png)
+const imgRectangle3711 = "https://www.figma.com/api/mcp/asset/b788398c-c93b-4379-ba9e-b33e2aac8802"; // SVG (rectangle3711.png)
+const imgGroup1321314609 = "https://www.figma.com/api/mcp/asset/dce2b4f9-d9cc-461a-afe5-3a22fce7e46e"; // SVG (group1321314609.png)
+const imgRectangle3714 = "https://www.figma.com/api/mcp/asset/ef028a52-ae97-4ffa-8197-e5ac50be2bde"; // SVG (rectangle3714.png)
+const imgIconTime = "https://www.figma.com/api/mcp/asset/406d1236-4922-4a5d-b0c6-2b405f9d9587"; // SVG (icon-time相关文件)
+const imgVector11 = "https://www.figma.com/api/mcp/asset/a834e22a-ee50-4fa6-afcd-5662a590ba13"; // SVG (vector11.png)
+
+// 其他SVG格式图片（网格和装饰元素）：
+const img4 = "https://www.figma.com/api/mcp/asset/1ba01f7d-beae-4e5f-af35-1aaa61e6c7af"; // SVG (网格相关)
+const img5 = "https://www.figma.com/api/mcp/asset/47af8281-6d74-4c1b-b6e7-4a33fa0769a0"; // SVG (网格相关)
+const img6 = "https://www.figma.com/api/mcp/asset/4a407cb3-5fa8-431e-82f5-a4e80a6dd6c6"; // SVG (header-decoration-6.svg)
+const img7 = "https://www.figma.com/api/mcp/asset/4ad06a6f-cfb7-4fea-8165-d29f16d7b724"; // SVG (header-decoration-7.svg)
+const img8 = "https://www.figma.com/api/mcp/asset/ae4b53fa-3f00-4539-a630-cf34cf9fa174"; // SVG (header-decoration-8.svg)
+const img9 = "https://www.figma.com/api/mcp/asset/3dcb2741-2af5-4c81-ba87-7641d083ce85"; // SVG (header-decoration-9.svg)
+const img10 = "https://www.figma.com/api/mcp/asset/7c5766a0-60d9-4dce-a61a-ab77fe504687"; // SVG (header-decoration-10.svg)
+const img11 = "https://www.figma.com/api/mcp/asset/ebab66be-608a-4f15-9ee0-5b0ea2ee5f86"; // SVG (发光边框相关)
+const img12 = "https://www.figma.com/api/mcp/asset/816963c1-ec66-4f4f-9e3c-8c00047d33dd"; // SVG (标题背景相关)
+const img13 = "https://www.figma.com/api/mcp/asset/22bc7622-a7da-401d-9451-5cf73bd1532c"; // SVG (顶部导航相关)
+const img14 = "https://www.figma.com/api/mcp/asset/4a995039-f8b4-4442-9960-d25cd2d1958f"; // SVG (网格线相关)
+const img15 = "https://www.figma.com/api/mcp/asset/9a551809-608f-48bc-889b-7c0c5823b923"; // SVG (网格线相关)
+const img16 = "https://www.figma.com/api/mcp/asset/ded89b08-063f-4157-9180-3f5db085cd63"; // SVG (网格线相关)
+const img17 = "https://www.figma.com/api/mcp/asset/67c8f7ae-1bee-4847-b616-fa67f0b69404"; // SVG (网格线相关)
+const img18 = "https://www.figma.com/api/mcp/asset/bd7171cc-ccf5-448f-b785-68a5378281d6"; // SVG (网格线相关)
+const img19 = "https://www.figma.com/api/mcp/asset/fab64b95-af76-4ae2-9f5c-6448dca5dd51"; // SVG (网格线相关)
+const img20 = "https://www.figma.com/api/mcp/asset/f1b7724b-9cfb-48db-b394-c921099b78c1"; // SVG (网格线相关)
+const img21 = "https://www.figma.com/api/mcp/asset/a1d9fa81-a3e5-42da-9c88-470f0f864853"; // SVG (网格线相关)
+const img22 = "https://www.figma.com/api/mcp/asset/2e171e2c-2a35-4ea1-834a-9cce5b144912"; // SVG (网格线相关)
+const img23 = "https://www.figma.com/api/mcp/asset/c6ddd14b-ee55-4b4f-b66d-6bfac8018ab6"; // SVG (网格线相关)
+const img24 = "https://www.figma.com/api/mcp/asset/85ded886-f6a0-4f7a-b136-40a9d03e7600"; // SVG (网格线相关)
+const img25 = "https://www.figma.com/api/mcp/asset/e4e1784b-4035-4d81-916c-5d3f2bcf9351"; // SVG (网格线相关)
+const img26 = "https://www.figma.com/api/mcp/asset/84434179-280a-4e81-8ad3-4a90a28674b9"; // SVG (网格线相关)
+const img27 = "https://www.figma.com/api/mcp/asset/b520f998-24be-4342-9a5a-a724592f940c"; // SVG (网格线相关)
+const img28 = "https://www.figma.com/api/mcp/asset/34e273b8-75f4-4e5a-bbe3-af4f14cbf4fe"; // SVG (网格线相关)
+const img29 = "https://www.figma.com/api/mcp/asset/2fa8b641-8683-4691-af2b-e2b951862674"; // SVG (网格线相关)
+const img30 = "https://www.figma.com/api/mcp/asset/5d801346-5841-48a9-947b-c524135193c0"; // SVG (网格线相关)
+const img31 = "https://www.figma.com/api/mcp/asset/aa2b7420-7fe4-4495-938c-0c5e3b284cfe"; // SVG (网格线相关)
+const img32 = "https://www.figma.com/api/mcp/asset/c65a79d5-cb2e-4e12-8f0f-3561a60bf8ad"; // SVG (网格线相关)
+const img33 = "https://www.figma.com/api/mcp/asset/2c2fa98f-df52-4ca3-a59c-662b35f5bad1"; // SVG (网格线相关)
+const img34 = "https://www.figma.com/api/mcp/asset/0144747c-764a-4fbd-bf24-2131b4d76fbe"; // SVG (网格线相关)
+const img35 = "https://www.figma.com/api/mcp/asset/05966125-e08f-473f-9714-1baf2f4067a7"; // SVG (网格线相关)
+const img36 = "https://www.figma.com/api/mcp/asset/8bd560f7-4744-41bd-adc1-c550cf53d121"; // SVG (网格线相关)
+const img37 = "https://www.figma.com/api/mcp/asset/86f1373e-51d2-44ac-8389-0516647f3829"; // SVG (网格线相关)
+const img38 = "https://www.figma.com/api/mcp/asset/c0aa7f46-d408-4c9d-b8f1-04a2df05f3e7"; // SVG (网格线相关)
+const img39 = "https://www.figma.com/api/mcp/asset/d8920737-0ff8-4441-8666-ffbf3861dde2"; // SVG (网格线相关)
 
 function icon({ className }: { className?: string }) {
   return (

src/client/home/pages/FinancialDashboard/FinancialDashboard.tsx

@@ -1,196 +0,0 @@
-import React, { useState } from 'react';
-import { useQuery } from '@tanstack/react-query';
-import { dashClient } from '@/client/api';
-
-// 导入基础组件
-import Icon from './components/Icon';
-import ReportHeader from './components/ReportHeader';
-import BaseContainer from './components/BaseContainer';
-import GridBackground from './components/GridBackground';
-import BackgroundOverlay from './components/BackgroundOverlay';
-
-// 导入数据模块组件
-import AssetMetrics from './components/AssetMetrics';
-import ProfitMetrics from './components/ProfitMetrics';
-import IncomeMetrics from './components/IncomeMetrics';
-import DebtRatioMetrics from './components/DebtRatioMetrics';
-
-// 导入弹窗组件
-import VariationModal from './components/VariationModal';
-
-// API 响应类型定义
-interface FinancialDataItem {
-  id: number;
-  year: number;
-  assetTotal?: number; // 资产总额（单位：元）
-  assetNet?: number;   // 资产净额（单位：元）
-  profitTotal?: number; // 利润总额（单位：元）
-  profitNet?: number;   // 净利润（单位：元）
-  income?: number;      // 收入（单位：元）
-  assetLiabilityRatio?: number; // 资产负债率（单位：%）
-  dataDeadline: string;
-  createTime: string;
-  updateTime: string;
-}
-
-interface FinancialOutlookData {
-  code: 200;
-  msg: '查询成功';
-  rows: Array<{
-    assetTotalNet: FinancialDataItem[];
-    profitTotalNet: FinancialDataItem[];
-    incomeStatement: FinancialDataItem[];
-    assetLiabilityRatio: FinancialDataItem[];
-  }>;
-}
-
-const FinancialDashboard: React.FC = () => {
-  const [isModalOpen, setIsModalOpen] = useState(false);
-
-  // 使用真实API调用获取财务数据
-  const { data: financialData, isLoading, error } = useQuery({
-    queryKey: ['financial-outlook'],
-    queryFn: async () => {
-      const response = await dashClient.outlook.$get();
-      if (!response.ok) {
-        throw new Error('Failed to fetch financial data');
-      }
-      return response.json() as Promise<FinancialOutlookData>;
-    },
-  });
-
-  const handleOpenModal = () => {
-    setIsModalOpen(true);
-  };
-
-  const handleCloseModal = () => {
-    setIsModalOpen(false);
-  };
-
-  if (isLoading) {
-    return (
-      <div className="w-screen h-screen bg-gray-900 flex items-center justify-center">
-        <div className="text-white text-xl">加载中...</div>
-      </div>
-    );
-  }
-
-  if (error) {
-    return (
-      <div className="w-screen h-screen bg-gray-900 flex items-center justify-center">
-        <div className="text-white text-xl">数据加载失败</div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="relative size-full" data-name="战略部署-首页-优化" data-node-id="1715:121572">
-      {/* 背景层 */}
-      <BackgroundOverlay />
-      <GridBackground />
-
-      {/* 底部装饰层 */}
-      <div className="absolute contents left-0 top-0" data-name="我是底部" data-node-id="I1715:121572;1703:114628">
-        {/* Component5和Component4已通过BackgroundOverlay和GridBackground实现 */}
-      </div>
-
-      {/* 头部装饰层 */}
-      <div className="absolute contents left-0 top-px" data-name="头部" data-node-id="I1715:121572;1703:114631">
-        <div className="absolute h-[74px] left-0 top-px w-[1920px]" data-name="头部" data-node-id="I1715:121572;1703:114632">
-          <div className="absolute contents left-[1269px] top-[-3.98px]" data-node-id="I1715:121572;1703:114633">
-            <div className="absolute flex h-[65px] items-center justify-center left-[calc(50%+638px)] top-[calc(50%+-5.48px)] translate-x-[-50%] translate-y-[-50%] w-[658px]">
-              <div className="flex-none rotate-[180deg] scale-y-[-100%]">
-                <div className="h-[65px] relative w-[658px]" data-name="装饰_左" data-node-id="I1715:121572;1703:114634">
-                  <div className="absolute h-[64.5px] left-0 top-0 w-[663px]" data-node-id="I1715:121572;1703:114635">
-                    <img alt="" className="block max-w-none size-full" src="/financial-dashboard/header-decoration-6.svg" />
-                  </div>
-                  <div className="absolute h-[8px] left-[124.5px] top-[27px] w-[301px]" data-node-id="I1715:121572;1703:114637">
-                    <div className="absolute bottom-[-12.5%] left-0 right-0 top-[-12.5%]">
-                      <img alt="" className="block max-w-none size-full" src="/financial-dashboard/header-decoration-7.svg" />
-                    </div>
-                  </div>
-                  <div className="absolute h-0 left-0 top-[22px] w-[162px]" data-node-id="I1715:121572;1703:114639">
-                    <div className="absolute bottom-[-1px] left-0 right-0 top-[-1px]">
-                      <img alt="" className="block max-w-none size-full" src="/financial-dashboard/header-decoration-8.svg" />
-                    </div>
-                  </div>
-                  <div className="absolute content-stretch flex gap-[4px] items-start left-[438px] top-[27px]" data-node-id="I1715:121572;1703:114646">
-                    <div className="bg-[#a2beff] blur-[0.25px] filter h-[5px] shrink-0 w-[10px]" data-node-id="I1715:121572;1703:114647" />
-                    <div className="bg-[#a2beff] blur-[0.25px] filter h-[5px] opacity-80 shrink-0 w-[6px]" data-node-id="I1715:121572;1703:114648" />
-                    <div className="bg-[#a2beff] blur-[0.25px] filter opacity-60 shrink-0 size-[5px]" data-node-id="I1715:121572;1703:114649" />
-                    <div className="bg-[#a2beff] blur-[0.25px] filter h-[5px] opacity-40 shrink-0 w-[4px]" data-node-id="I1715:121572;1703:114650" />
-                    <div className="bg-[#a2beff] blur-[0.25px] filter h-[5px] opacity-20 shrink-0 w-[3px]" data-node-id="I1715:121572;1703:114651" />
-                  </div>
-                  <div className="absolute h-[22.5px] left-0 top-[42px] w-[661px]" data-node-id="I1715:121572;1703:114652">
-                    <div className="absolute bottom-[-2.22%] left-0 right-0 top-[-2.22%]">
-                      <img alt="" className="block max-w-none size-full" src="/financial-dashboard/header-decoration-9.svg" />
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div className="absolute flex inset-[-5.37%_30.52%_22.94%_66.51%] items-center justify-center">
-              <div className="flex-none h-[61px] rotate-[180deg] scale-y-[-100%] w-[57px]">
-                <div className="relative size-full" data-name="Union" data-node-id="I1715:121572;1703:114654">
-                  <img alt="" className="block max-w-none size-full" src="/financial-dashboard/header-decoration-10.svg" />
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      {/* 中间报表数据区域 */}
-      <div className="absolute content-stretch flex gap-[20px] items-center left-1/2 top-[79.5px] translate-x-[-50%]" data-name="中间报表数据" data-node-id="I1715:121572;1709:120424">
-        <div className="content-stretch flex flex-col gap-[16px] items-start relative shrink-0 w-[934.496px]" data-node-id="I1715:121572;1705:119731">
-          {/* 左上：资产负债率模块 */}
-          <div className="h-[480px] overflow-clip relative shrink-0 w-full" data-name="左侧-资产负债率" data-node-id="I1715:121572;1705:119144">
-            <BaseContainer>
-              <AssetMetrics data={financialData?.rows[0]?.assetTotalNet} />
-            </BaseContainer>
-          </div>
-
-          {/* 左下：利润总额与净利润模块 */}
-          <div className="h-[480px] overflow-clip relative shrink-0 w-full" data-name="左侧-资产负债率" data-node-id="I1715:121572;1709:120059">
-            <BaseContainer>
-              <ProfitMetrics data={financialData?.rows[0]?.profitTotalNet} />
-            </BaseContainer>
-          </div>
-        </div>
-
-        <div className="content-stretch flex flex-col gap-[16px] items-start relative shrink-0 w-[934.496px]" data-node-id="I1715:121572;1705:119731">
-          {/* 右上：收入模块 */}
-          <div className="h-[480px] overflow-clip relative shrink-0 w-full" data-name="左侧-收入" data-node-id="I1715:121572;1705:119355">
-            <BaseContainer>
-              <IncomeMetrics data={financialData?.rows[0]?.incomeStatement} />
-            </BaseContainer>
-          </div>
-
-          {/* 右下：资产负债率（百分比）模块 */}
-          <div className="h-[480px] overflow-clip relative shrink-0 w-full" data-name="左侧-收入" data-node-id="I1715:121572;1709:120155">
-            <BaseContainer>
-              <DebtRatioMetrics data={financialData?.rows[0]?.assetLiabilityRatio} />
-            </BaseContainer>
-          </div>
-        </div>
-      </div>
-
-      {/* 浮动按钮 */}
-      <button
-        onClick={handleOpenModal}
-        className="absolute bottom-8 right-8 w-16 h-16 bg-blue-600 rounded-full flex items-center justify-center shadow-lg hover:bg-blue-700 transition-colors z-20"
-      >
-        <Icon />
-      </button>
-
-      {/* 变动幅度弹窗 */}
-      <VariationModal
-        isOpen={isModalOpen}
-        onClose={handleCloseModal}
-        data={financialData?.rows[0]}
-      />
-    </div>
-  );
-};
-
-export default FinancialDashboard;

src/client/home/pages/FinancialDashboard/components/AssetMetrics.tsx

@@ -1,129 +0,0 @@
-import React from 'react';
-import { motion } from 'framer-motion';
-import BarElement from './BarElement';
-import DataLabel from './DataLabel';
-
-interface FinancialDataItem {
-  id: number;
-  year: number;
-  assetTotal?: number; // 资产总额（单位：元）
-  assetNet?: number;   // 资产净额（单位：元）
-  dataDeadline: string;
-  createTime: string;
-  updateTime: string;
-}
-
-interface AssetMetricsProps {
-  data?: FinancialDataItem[];
-}
-
-const AssetMetrics: React.FC<AssetMetricsProps> = ({ data }) => {
-  // 从数组数据中提取2023和2024年的数据
-  const data2023 = data?.find(item => item.year === 2023);
-  const data2024 = data?.find(item => item.year === 2024);
-
-  // 计算最大值用于图表比例（暂时不使用，保留用于未来动态高度）
-  const _maxValue = data ? Math.max(
-    data2023?.assetTotal || 0,
-    data2023?.assetNet || 0,
-    data2024?.assetTotal || 0,
-    data2024?.assetNet || 0
-  ) : 0;
-
-  return (
-    <motion.div
-      className="h-full flex flex-col"
-      initial={{ opacity: 0, scale: 0.95 }}
-      animate={{ opacity: 1, scale: 1 }}
-      transition={{ duration: 0.6 }}
-    >
-      {/* 模块标题 */}
-      <motion.div
-        className="text-center mb-4"
-        initial={{ opacity: 0, y: -20 }}
-        animate={{ opacity: 1, y: 0 }}
-        transition={{ duration: 0.5 }}
-      >
-        <h3 className="text-xl font-bold text-white">资产负债率</h3>
-        <p className="text-sm text-white/70">资产总额与资产净额</p>
-      </motion.div>
-
-      {/* 数据图表区域 */}
-      <div className="flex-1 flex items-end justify-center space-x-8">
-        {data ? (
-          <>
-            {/* 2023年数据 */}
-            <motion.div
-              className="flex flex-col items-center"
-              initial={{ opacity: 0, x: -30 }}
-              animate={{ opacity: 1, x: 0 }}
-              transition={{ duration: 0.5, delay: 0.2 }}
-            >
-              <BarElement
-                value={data2023?.assetTotal || 0}
-                maxValue={_maxValue}
-                type="asset-total"
-                label="2023"
-              />
-              <DataLabel
-                value={data2023?.assetTotal || 0}
-                label="资产总额"
-                unit="元"
-                className="mt-4"
-              />
-            </motion.div>
-
-            {/* 2024年数据 */}
-            <motion.div
-              className="flex flex-col items-center"
-              initial={{ opacity: 0, x: 30 }}
-              animate={{ opacity: 1, x: 0 }}
-              transition={{ duration: 0.5, delay: 0.4 }}
-            >
-              <BarElement
-                value={data2024?.assetNet || 0}
-                maxValue={_maxValue}
-                type="asset-net"
-                label="2024"
-              />
-              <DataLabel
-                value={data2024?.assetNet || 0}
-                label="资产净额"
-                unit="元"
-                className="mt-4"
-              />
-            </motion.div>
-          </>
-        ) : (
-          <motion.div
-            className="text-white/50 text-center"
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            transition={{ duration: 0.5 }}
-          >
-            数据加载中...
-          </motion.div>
-        )}
-      </div>
-
-      {/* 图例说明 */}
-      <motion.div
-        className="flex justify-center space-x-6 mt-4 text-xs text-white/60"
-        initial={{ opacity: 0, y: 20 }}
-        animate={{ opacity: 1, y: 0 }}
-        transition={{ duration: 0.5, delay: 0.6 }}
-      >
-        <div className="flex items-center">
-          <div className="w-3 h-3 bg-blue-500 rounded mr-1" />
-          <span>资产总额</span>
-        </div>
-        <div className="flex items-center">
-          <div className="w-3 h-3 bg-yellow-500 rounded mr-1" />
-          <span>资产净额</span>
-        </div>
-      </motion.div>
-    </motion.div>
-  );
-};
-
-export default AssetMetrics;

src/client/home/pages/FinancialDashboard/components/BackgroundOverlay.tsx

@@ -1,22 +0,0 @@
-import React from 'react';
-
-const BackgroundOverlay: React.FC = () => {
-  return (
-    <div className="absolute inset-0" data-name="Property 1=常规界面">
-      <div aria-hidden="true" className="absolute inset-0 pointer-events-none">
-        {/* 背景图片 */}
-        <img
-          alt=""
-          className="absolute max-w-none object-center object-cover w-full h-full"
-          src="/financial-dashboard/background-property1.png"
-        />
-        {/* 深灰色半透明遮罩 */}
-        <div className="absolute bg-[rgba(33,33,33,0.6)] inset-0" />
-      </div>
-      {/* 装饰元素层 */}
-      <div className="absolute contents left-0 top-0" />
-    </div>
-  );
-};
-
-export default BackgroundOverlay;

src/client/home/pages/FinancialDashboard/components/BarElement.tsx

@@ -1,91 +0,0 @@
-import React from 'react';
-import { motion } from 'framer-motion';
-
-interface BarElementProps {
-  className?: string;
-  value: number;
-  maxValue: number;
-  type: 'asset-total' | 'asset-net' | 'profit-total' | 'profit-net' | 'income' | 'debt-ratio';
-  label: string;
-}
-
-const BarElement: React.FC<BarElementProps> = ({
-  className,
-  value,
-  maxValue,
-  type,
-  label
-}) => {
-  // 计算柱形高度比例 (0-100%)
-  const heightPercentage = maxValue > 0 ? (value / maxValue) * 100 : 0;
-
-  // 根据类型设置颜色
-  const getBarColor = () => {
-    switch (type) {
-      case 'asset-total':
-        return 'from-[#c2e6ff] to-[rgba(0,68,170,0.3)]';
-      case 'asset-net':
-        return 'from-[#ffd700] to-[rgba(255,215,0,0.3)]';
-      case 'profit-total':
-        return 'from-[#ff6b6b] to-[rgba(255,107,107,0.3)]';
-      case 'profit-net':
-        return 'from-[#4ecdc4] to-[rgba(78,205,196,0.3)]';
-      case 'income':
-        return 'from-[#45b7d1] to-[rgba(69,183,209,0.3)]';
-      case 'debt-ratio':
-        return 'from-[#96ceb4] to-[rgba(150,206,180,0.3)]';
-      default:
-        return 'from-[#c2e6ff] to-[rgba(0,68,170,0.3)]';
-    }
-  };
-
-  return (
-    <motion.div
-      className={className}
-      initial={{ opacity: 0, y: 20 }}
-      animate={{ opacity: 1, y: 0 }}
-      transition={{ duration: 0.5, delay: 0.1 }}
-    >
-      {/* 柱形图主体 */}
-      <div className="flex flex-col items-center h-48">
-        {/* 柱形图 */}
-        <motion.div
-          className={`w-12 bg-gradient-to-b ${getBarColor()} rounded-t-lg`}
-          style={{ height: `${Math.max(heightPercentage, 10)}%` }}
-          initial={{ height: '10%' }}
-          animate={{ height: `${Math.max(heightPercentage, 10)}%` }}
-          transition={{
-            duration: 1.2,
-            ease: "easeOut",
-            delay: 0.3
-          }}
-        />
-
-        {/* 标签 */}
-        <motion.div
-          className="mt-2 text-white text-sm font-medium"
-          initial={{ opacity: 0 }}
-          animate={{ opacity: 1 }}
-          transition={{ duration: 0.5, delay: 0.8 }}
-        >
-          {label}
-        </motion.div>
-
-        {/* 数值显示 */}
-        <motion.div
-          className="mt-1 text-white/70 text-xs"
-          initial={{ opacity: 0, scale: 0.8 }}
-          animate={{ opacity: 1, scale: 1 }}
-          transition={{ duration: 0.4, delay: 1.0 }}
-        >
-          {type === 'debt-ratio' ? `${value.toFixed(1)}%` :
-           value >= 100000000 ? `${(value / 100000000).toFixed(1)}亿` :
-           value >= 10000 ? `${(value / 10000).toFixed(1)}万` :
-           value.toLocaleString()}
-        </motion.div>
-      </div>
-    </motion.div>
-  );
-};
-
-export default BarElement;

src/client/home/pages/FinancialDashboard/components/BaseContainer.tsx

@@ -1,33 +0,0 @@
-import React from 'react';
-
-interface BaseContainerProps {
-  children: React.ReactNode;
-  className?: string;
-}
-
-const BaseContainer: React.FC<BaseContainerProps> = ({
-  children,
-  className = ''
-}) => {
-  return (
-    <div className={`relative w-full h-full ${className}`}>
-      {/* 底框 */}
-      <div className="absolute inset-0" data-name="底框" data-node-id="1705:119101">
-        <img alt="" className="block max-w-none size-full" src="/financial-dashboard/base-frame.png" />
-      </div>
-
-      {/* 头部 */}
-      <div className="absolute top-0 left-0 right-0 h-8" data-name="头部" data-node-id="1705:119126">
-        {/* 头部装饰，暂时用占位符 */}
-        <div className="bg-gradient-to-r from-blue-500/80 to-purple-500/80 rounded-t-lg h-full" />
-      </div>
-
-      {/* 内容区域 */}
-      <div className="relative z-10 p-6 h-full pt-10">
-        {children}
-      </div>
-    </div>
-  );
-};
-
-export default BaseContainer;

src/client/home/pages/FinancialDashboard/components/DataLabel.tsx

@@ -1,37 +0,0 @@
-import React from 'react';
-
-interface DataLabelProps {
-  value: number | string;
-  label?: string;
-  unit?: string;
-  className?: string;
-}
-
-const DataLabel: React.FC<DataLabelProps> = ({
-  value,
-  label,
-  unit,
-  className = ''
-}) => {
-  return (
-    <div className={`flex flex-col items-center ${className}`}>
-      {/* 装饰元素 */}
-      <div className="w-2 h-2 bg-blue-400 rounded-full mb-1" />
-
-      {/* 数值显示 */}
-      <div className="text-lg font-bold text-white drop-shadow-sm">
-        {typeof value === 'number' ? value.toLocaleString() : value}
-        {unit && <span className="text-sm ml-1">{unit}</span>}
-      </div>
-
-      {/* 标签 */}
-      {label && (
-        <div className="text-xs text-white/70 mt-1">
-          {label}
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default DataLabel;

src/client/home/pages/FinancialDashboard/components/DebtRatioMetrics.tsx

@@ -1,126 +0,0 @@
-import React from 'react';
-import { motion } from 'framer-motion';
-import BarElement from './BarElement';
-import DataLabel from './DataLabel';
-
-interface FinancialDataItem {
-  id: number;
-  year: number;
-  assetLiabilityRatio?: number; // 资产负债率（单位：%）
-  dataDeadline: string;
-  createTime: string;
-  updateTime: string;
-}
-
-interface DebtRatioMetricsProps {
-  data?: FinancialDataItem[];
-}
-
-const DebtRatioMetrics: React.FC<DebtRatioMetricsProps> = ({ data }) => {
-  // 从数组数据中提取2023和2024年的数据
-  const data2023 = data?.find(item => item.year === 2023);
-  const data2024 = data?.find(item => item.year === 2024);
-
-  // 计算最大值用于图表比例
-  const maxValue = data ? Math.max(
-    data2023?.assetLiabilityRatio || 0,
-    data2024?.assetLiabilityRatio || 0
-  ) : 0;
-
-  return (
-    <motion.div
-      className="h-full flex flex-col"
-      initial={{ opacity: 0, scale: 0.95 }}
-      animate={{ opacity: 1, scale: 1 }}
-      transition={{ duration: 0.6, delay: 0.3 }}
-    >
-      {/* 模块标题 */}
-      <motion.div
-        className="text-center mb-4"
-        initial={{ opacity: 0, y: -20 }}
-        animate={{ opacity: 1, y: 0 }}
-        transition={{ duration: 0.5, delay: 0.4 }}
-      >
-        <h3 className="text-xl font-bold text-white">资产负债率（百分比）</h3>
-        <p className="text-sm text-white/70">资产负债率对比</p>
-      </motion.div>
-
-      {/* 数据图表区域 */}
-      <div className="flex-1 flex items-end justify-center space-x-8">
-        {data ? (
-          <>
-            {/* 2023年数据 */}
-            <motion.div
-              className="flex flex-col items-center"
-              initial={{ opacity: 0, x: -30 }}
-              animate={{ opacity: 1, x: 0 }}
-              transition={{ duration: 0.5, delay: 0.5 }}
-            >
-              <BarElement
-                value={data2023?.assetLiabilityRatio || 0}
-                maxValue={maxValue}
-                type="debt-ratio"
-                label="2023"
-              />
-              <DataLabel
-                value={data2023?.assetLiabilityRatio || 0}
-                label="资产负债率"
-                unit="%"
-                className="mt-4"
-              />
-            </motion.div>
-
-            {/* 2024年数据 */}
-            <motion.div
-              className="flex flex-col items-center"
-              initial={{ opacity: 0, x: 30 }}
-              animate={{ opacity: 1, x: 0 }}
-              transition={{ duration: 0.5, delay: 0.7 }}
-            >
-              <BarElement
-                value={data2024?.assetLiabilityRatio || 0}
-                maxValue={maxValue}
-                type="debt-ratio"
-                label="2024"
-              />
-              <DataLabel
-                value={data2024?.assetLiabilityRatio || 0}
-                label="资产负债率"
-                unit="%"
-                className="mt-4"
-              />
-            </motion.div>
-          </>
-        ) : (
-          <motion.div
-            className="text-white/50 text-center"
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            transition={{ duration: 0.5 }}
-          >
-            数据加载中...
-          </motion.div>
-        )}
-      </div>
-
-      {/* 图例说明 */}
-      <motion.div
-        className="flex justify-center space-x-6 mt-4 text-xs text-white/60"
-        initial={{ opacity: 0, y: 20 }}
-        animate={{ opacity: 1, y: 0 }}
-        transition={{ duration: 0.5, delay: 0.9 }}
-      >
-        <div className="flex items-center">
-          <div className="w-3 h-3 bg-blue-500 rounded mr-1" />
-          <span>2023年负债率</span>
-        </div>
-        <div className="flex items-center">
-          <div className="w-3 h-3 bg-blue-700 rounded mr-1" />
-          <span>2024年负债率</span>
-        </div>
-      </motion.div>
-    </motion.div>
-  );
-};
-
-export default DebtRatioMetrics;

src/client/home/pages/FinancialDashboard/components/GridBackground.tsx

@@ -1,24 +0,0 @@
-import React from 'react';
-
-const GridBackground: React.FC = () => {
-  return (
-    <div className="absolute inset-0 bg-gray-900">
-      {/* 网格背景 */}
-      <div
-        className="absolute inset-0 opacity-20"
-        style={{
-          backgroundImage: `
-            linear-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px),
-            linear-gradient(90deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px)
-          `,
-          backgroundSize: '50px 50px'
-        }}
-      />
-
-      {/* 渐变遮罩 */}
-      <div className="absolute inset-0 bg-gradient-to-br from-blue-900/10 via-transparent to-purple-900/10" />
-    </div>
-  );
-};
-
-export default GridBackground;

src/client/home/pages/FinancialDashboard/components/Icon.tsx

@@ -1,32 +0,0 @@
-import React from 'react';
-
-interface IconProps {
-  className?: string;
-}
-
-const Icon: React.FC<IconProps> = ({ className = '' }) => {
-  return (
-    <div className={className} data-name="返回icon" data-node-id="853:111934">
-      <div className="absolute aspect-[84/84] bottom-[2.38%] flex items-center justify-center left-1/2 top-[2.38%] translate-x-[-50%]">
-        <div className="flex-none rotate-[180deg] scale-y-[-100%] size-[80px]">
-          <div className="relative size-full" data-node-id="1412:67849">
-            <div className="absolute inset-[-1.25%]">
-              <img alt="" className="block max-w-none size-full" src="/financial-dashboard/ellipse4119.png" />
-            </div>
-          </div>
-        </div>
-      </div>
-      <div className="absolute flex inset-[31.17%_39.47%] items-center justify-center">
-        <div className="flex-none h-[17.684px] rotate-[270deg] w-[31.641px]">
-          <div className="relative size-full" data-name="路径" data-node-id="853:111931">
-            <div className="absolute inset-[-50.89%_-28.44%]">
-              <img alt="" className="block max-w-none size-full" src="/financial-dashboard/icon-path.png" />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default Icon;

src/client/home/pages/FinancialDashboard/components/IncomeMetrics.tsx

@@ -1,126 +0,0 @@
-import React from 'react';
-import { motion } from 'framer-motion';
-import BarElement from './BarElement';
-import DataLabel from './DataLabel';
-
-interface FinancialDataItem {
-  id: number;
-  year: number;
-  income?: number;      // 收入（单位：元）
-  dataDeadline: string;
-  createTime: string;
-  updateTime: string;
-}
-
-interface IncomeMetricsProps {
-  data?: FinancialDataItem[];
-}
-
-const IncomeMetrics: React.FC<IncomeMetricsProps> = ({ data }) => {
-  // 从数组数据中提取2023和2024年的数据
-  const data2023 = data?.find(item => item.year === 2023);
-  const data2024 = data?.find(item => item.year === 2024);
-
-  // 计算最大值用于图表比例
-  const maxValue = data ? Math.max(
-    data2023?.income || 0,
-    data2024?.income || 0
-  ) : 0;
-
-  return (
-    <motion.div
-      className="h-full flex flex-col"
-      initial={{ opacity: 0, scale: 0.95 }}
-      animate={{ opacity: 1, scale: 1 }}
-      transition={{ duration: 0.6, delay: 0.2 }}
-    >
-      {/* 模块标题 */}
-      <motion.div
-        className="text-center mb-4"
-        initial={{ opacity: 0, y: -20 }}
-        animate={{ opacity: 1, y: 0 }}
-        transition={{ duration: 0.5, delay: 0.3 }}
-      >
-        <h3 className="text-xl font-bold text-white">收入</h3>
-        <p className="text-sm text-white/70">收入数据对比</p>
-      </motion.div>
-
-      {/* 数据图表区域 */}
-      <div className="flex-1 flex items-end justify-center space-x-8">
-        {data ? (
-          <>
-            {/* 2023年数据 */}
-            <motion.div
-              className="flex flex-col items-center"
-              initial={{ opacity: 0, x: -30 }}
-              animate={{ opacity: 1, x: 0 }}
-              transition={{ duration: 0.5, delay: 0.4 }}
-            >
-              <BarElement
-                value={data2023?.income || 0}
-                maxValue={maxValue}
-                type="income"
-                label="2023"
-              />
-              <DataLabel
-                value={data2023?.income || 0}
-                label="收入"
-                unit="元"
-                className="mt-4"
-              />
-            </motion.div>
-
-            {/* 2024年数据 */}
-            <motion.div
-              className="flex flex-col items-center"
-              initial={{ opacity: 0, x: 30 }}
-              animate={{ opacity: 1, x: 0 }}
-              transition={{ duration: 0.5, delay: 0.6 }}
-            >
-              <BarElement
-                value={data2024?.income || 0}
-                maxValue={maxValue}
-                type="income"
-                label="2024"
-              />
-              <DataLabel
-                value={data2024?.income || 0}
-                label="收入"
-                unit="元"
-                className="mt-4"
-              />
-            </motion.div>
-          </>
-        ) : (
-          <motion.div
-            className="text-white/50 text-center"
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            transition={{ duration: 0.5 }}
-          >
-            数据加载中...
-          </motion.div>
-        )}
-      </div>
-
-      {/* 图例说明 */}
-      <motion.div
-        className="flex justify-center space-x-6 mt-4 text-xs text-white/60"
-        initial={{ opacity: 0, y: 20 }}
-        animate={{ opacity: 1, y: 0 }}
-        transition={{ duration: 0.5, delay: 0.8 }}
-      >
-        <div className="flex items-center">
-          <div className="w-3 h-3 bg-blue-500 rounded mr-1" />
-          <span>2023年收入</span>
-        </div>
-        <div className="flex items-center">
-          <div className="w-3 h-3 bg-yellow-500 rounded mr-1" />
-          <span>2024年收入</span>
-        </div>
-      </motion.div>
-    </motion.div>
-  );
-};
-
-export default IncomeMetrics;

src/client/home/pages/FinancialDashboard/components/ModalCloseButton.tsx

@@ -1,18 +0,0 @@
-import React from 'react';
-
-interface ModalCloseButtonProps {
-  onClick: () => void;
-}
-
-const ModalCloseButton: React.FC<ModalCloseButtonProps> = ({ onClick }) => {
-  return (
-    <button
-      onClick={onClick}
-      className="px-6 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition-colors duration-200 font-medium"
-    >
-      返回
-    </button>
-  );
-};
-
-export default ModalCloseButton;

src/client/home/pages/FinancialDashboard/components/ModalContent.tsx

@@ -1,69 +0,0 @@
-import React from 'react';
-import ModalHeader from './ModalHeader';
-import ModalDataRow from './ModalDataRow';
-import ModalCloseButton from './ModalCloseButton';
-
-interface ModalContentProps {
-  data?: any;
-  onClose: () => void;
-}
-
-const ModalContent: React.FC<ModalContentProps> = ({ data, onClose }) => {
-  return (
-    <div className="p-6">
-      {/* 弹窗头部 */}
-      <ModalHeader title="变动幅度" />
-
-      {/* 数据内容 */}
-      <div className="mt-6 space-y-4">
-        {data && (
-          <>
-            <ModalDataRow
-              label="资产总额"
-              value2023={data.assetTotalNet?.[2023]}
-              value2024={data.assetTotalNet?.[2024]}
-              unit="元"
-            />
-            <ModalDataRow
-              label="资产净额"
-              value2023={data.assetTotalNet?.[2023]}
-              value2024={data.assetTotalNet?.[2024]}
-              unit="元"
-            />
-            <ModalDataRow
-              label="利润总额"
-              value2023={data.profitTotalNet?.[2023]}
-              value2024={data.profitTotalNet?.[2024]}
-              unit="元"
-            />
-            <ModalDataRow
-              label="净利润"
-              value2023={data.profitTotalNet?.[2023]}
-              value2024={data.profitTotalNet?.[2024]}
-              unit="元"
-            />
-            <ModalDataRow
-              label="收入"
-              value2023={data.incomeStatement?.[2023]}
-              value2024={data.incomeStatement?.[2024]}
-              unit="元"
-            />
-            <ModalDataRow
-              label="资产负债率"
-              value2023={data.assetLiabilityRatio?.[2023]}
-              value2024={data.assetLiabilityRatio?.[2024]}
-              unit="%"
-            />
-          </>
-        )}
-      </div>
-
-      {/* 关闭按钮 */}
-      <div className="mt-8 flex justify-center">
-        <ModalCloseButton onClick={onClose} />
-      </div>
-    </div>
-  );
-};
-
-export default ModalContent;

src/client/home/pages/FinancialDashboard/components/ModalDataRow.tsx

@@ -1,57 +0,0 @@
-import React from 'react';
-
-interface ModalDataRowProps {
-  label: string;
-  value2023?: number;
-  value2024?: number;
-  unit?: string;
-}
-
-const ModalDataRow: React.FC<ModalDataRowProps> = ({
-  label,
-  value2023,
-  value2024,
-  unit
-}) => {
-  const calculateChange = () => {
-    if (!value2023 || !value2024) return 0;
-    return ((value2024 - value2023) / value2023) * 100;
-  };
-
-  const change = calculateChange();
-  const isPositive = change >= 0;
-
-  return (
-    <div className="flex justify-between items-center py-3 border-b border-gray-600/30">
-      <div className="text-white font-medium">{label}</div>
-
-      <div className="flex items-center space-x-6">
-        {/* 2023年数据 */}
-        <div className="text-right">
-          <div className="text-white/70 text-sm">2023</div>
-          <div className="text-white font-medium">
-            {value2023 ? value2023.toLocaleString() : '-'} {unit}
-          </div>
-        </div>
-
-        {/* 2024年数据 */}
-        <div className="text-right">
-          <div className="text-white/70 text-sm">2024</div>
-          <div className="text-white font-medium">
-            {value2024 ? value2024.toLocaleString() : '-'} {unit}
-          </div>
-        </div>
-
-        {/* 变动幅度 */}
-        <div className="text-right">
-          <div className="text-white/70 text-sm">变动</div>
-          <div className={`font-medium ${isPositive ? 'text-green-400' : 'text-red-400'}`}>
-            {value2023 && value2024 ? `${isPositive ? '+' : ''}${change.toFixed(2)}%` : '-'}
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default ModalDataRow;

src/client/home/pages/FinancialDashboard/components/ModalDialog.tsx

@@ -1,15 +0,0 @@
-import React from 'react';
-
-interface ModalDialogProps {
-  children: React.ReactNode;
-}
-
-const ModalDialog: React.FC<ModalDialogProps> = ({ children }) => {
-  return (
-    <div className="relative bg-gray-800/90 border border-gray-600/50 rounded-lg shadow-2xl backdrop-blur-sm w-[600px] max-h-[80vh] overflow-hidden">
-      {children}
-    </div>
-  );
-};
-
-export default ModalDialog;

src/client/home/pages/FinancialDashboard/components/ModalHeader.tsx

@@ -1,16 +0,0 @@
-import React from 'react';
-
-interface ModalHeaderProps {
-  title?: string;
-}
-
-const ModalHeader: React.FC<ModalHeaderProps> = ({ title = "变动幅度" }) => {
-  return (
-    <div className="text-center">
-      <h2 className="text-2xl font-bold text-white">{title}</h2>
-      <div className="h-px bg-gradient-to-r from-transparent via-blue-500 to-transparent mt-2" />
-    </div>
-  );
-};
-
-export default ModalHeader;

src/client/home/pages/FinancialDashboard/components/ModalOverlay.tsx

@@ -1,16 +0,0 @@
-import React from 'react';
-
-interface ModalOverlayProps {
-  onClick: () => void;
-}
-
-const ModalOverlay: React.FC<ModalOverlayProps> = ({ onClick }) => {
-  return (
-    <div
-      className="fixed inset-0 bg-black/50 backdrop-blur-sm transition-opacity duration-300"
-      onClick={onClick}
-    />
-  );
-};
-
-export default ModalOverlay;

src/client/home/pages/FinancialDashboard/components/ProfitMetrics.tsx

@@ -1,129 +0,0 @@
-import React from 'react';
-import { motion } from 'framer-motion';
-import BarElement from './BarElement';
-import DataLabel from './DataLabel';
-
-interface FinancialDataItem {
-  id: number;
-  year: number;
-  profitTotal?: number; // 利润总额（单位：元）
-  profitNet?: number;   // 净利润（单位：元）
-  dataDeadline: string;
-  createTime: string;
-  updateTime: string;
-}
-
-interface ProfitMetricsProps {
-  data?: FinancialDataItem[];
-}
-
-const ProfitMetrics: React.FC<ProfitMetricsProps> = ({ data }) => {
-  // 从数组数据中提取2023和2024年的数据
-  const data2023 = data?.find(item => item.year === 2023);
-  const data2024 = data?.find(item => item.year === 2024);
-
-  // 计算最大值用于图表比例（暂时不使用，保留用于未来动态高度）
-  const _maxValue = data ? Math.max(
-    data2023?.profitTotal || 0,
-    data2023?.profitNet || 0,
-    data2024?.profitTotal || 0,
-    data2024?.profitNet || 0
-  ) : 0;
-
-  return (
-    <motion.div
-      className="h-full flex flex-col"
-      initial={{ opacity: 0, scale: 0.95 }}
-      animate={{ opacity: 1, scale: 1 }}
-      transition={{ duration: 0.6, delay: 0.1 }}
-    >
-      {/* 模块标题 */}
-      <motion.div
-        className="text-center mb-4"
-        initial={{ opacity: 0, y: -20 }}
-        animate={{ opacity: 1, y: 0 }}
-        transition={{ duration: 0.5, delay: 0.2 }}
-      >
-        <h3 className="text-xl font-bold text-white">利润总额与净利润</h3>
-        <p className="text-sm text-white/70">利润数据对比</p>
-      </motion.div>
-
-      {/* 数据图表区域 */}
-      <div className="flex-1 flex items-end justify-center space-x-8">
-        {data ? (
-          <>
-            {/* 2023年数据 */}
-            <motion.div
-              className="flex flex-col items-center"
-              initial={{ opacity: 0, x: -30 }}
-              animate={{ opacity: 1, x: 0 }}
-              transition={{ duration: 0.5, delay: 0.3 }}
-            >
-              <BarElement
-                value={data2023?.profitTotal || 0}
-                maxValue={_maxValue}
-                type="profit-total"
-                label="2023"
-              />
-              <DataLabel
-                value={data2023?.profitTotal || 0}
-                label="利润总额"
-                unit="元"
-                className="mt-4"
-              />
-            </motion.div>
-
-            {/* 2024年数据 */}
-            <motion.div
-              className="flex flex-col items-center"
-              initial={{ opacity: 0, x: 30 }}
-              animate={{ opacity: 1, x: 0 }}
-              transition={{ duration: 0.5, delay: 0.5 }}
-            >
-              <BarElement
-                value={data2024?.profitNet || 0}
-                maxValue={_maxValue}
-                type="profit-net"
-                label="2024"
-              />
-              <DataLabel
-                value={data2024?.profitNet || 0}
-                label="净利润"
-                unit="元"
-                className="mt-4"
-              />
-            </motion.div>
-          </>
-        ) : (
-          <motion.div
-            className="text-white/50 text-center"
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            transition={{ duration: 0.5 }}
-          >
-            数据加载中...
-          </motion.div>
-        )}
-      </div>
-
-      {/* 图例说明 */}
-      <motion.div
-        className="flex justify-center space-x-6 mt-4 text-xs text-white/60"
-        initial={{ opacity: 0, y: 20 }}
-        animate={{ opacity: 1, y: 0 }}
-        transition={{ duration: 0.5, delay: 0.7 }}
-      >
-        <div className="flex items-center">
-          <div className="w-3 h-3 bg-yellow-500 rounded mr-1" />
-          <span>利润总额</span>
-        </div>
-        <div className="flex items-center">
-          <div className="w-3 h-3 bg-purple-500 rounded mr-1" />
-          <span>净利润</span>
-        </div>
-      </motion.div>
-    </motion.div>
-  );
-};
-
-export default ProfitMetrics;

src/client/home/pages/FinancialDashboard/components/ReportHeader.tsx

@@ -1,39 +0,0 @@
-import React from 'react';
-
-interface ReportHeaderProps {
-  className?: string;
-  title?: string;
-}
-
-const ReportHeader: React.FC<ReportHeaderProps> = ({
-  className = '',
-  title = "资产负债率"
-}) => {
-  return (
-    <div className={className} data-name="报表头部" data-node-id="1705:119710">
-      {/* 渐变背景 */}
-      <div className="absolute bg-gradient-to-r blur-[14.5px] bottom-0 filter from-[rgba(162,190,255,0)] left-[18.55%] right-[18.15%] to-[95.957%] to-[rgba(162,190,255,0)] top-0 via-[51.477%] via-[rgba(162,190,255,0.302)]" data-node-id="1705:119700" />
-
-      {/* 左侧装饰 */}
-      <div className="absolute flex inset-[38.16%_77.08%_38.16%_0.03%] items-center justify-center">
-        <div className="flex-none h-[9px] rotate-[180deg] scale-y-[-100%] w-[136px]">
-          <div className="relative size-full" data-name="左侧" data-node-id="1705:119702">
-            <img alt="" className="block max-w-none size-full" src="/financial-dashboard/header-left.png" />
-          </div>
-        </div>
-      </div>
-
-      {/* 标题 */}
-      <p className="absolute font-['HarmonyOS_Sans_SC:Regular',sans-serif] inset-[19.74%_29.03%_19.74%_28.81%] leading-[normal] not-italic text-[20px] text-center text-white whitespace-pre-wrap" data-node-id="1705:119705">
-        {title}
-      </p>
-
-      {/* 右侧装饰 */}
-      <div className="absolute inset-[38.16%_0.24%_38.16%_76.86%]" data-name="右侧" data-node-id="1705:119706">
-        <img alt="" className="block max-w-none size-full" src="/financial-dashboard/header-right.png" />
-      </div>
-    </div>
-  );
-};
-
-export default ReportHeader;

src/client/home/pages/FinancialDashboard/components/TimeIcon.tsx

@@ -1,29 +0,0 @@
-import React from 'react';
-
-interface TimeIconProps {
-  className?: string;
-}
-
-const TimeIcon: React.FC<TimeIconProps> = ({ className = '' }) => {
-  return (
-    <svg
-      width="20"
-      height="20"
-      viewBox="0 0 20 20"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      className={`text-white/70 ${className}`}
-    >
-      <circle cx="10" cy="10" r="9" stroke="currentColor" strokeWidth="2" />
-      <path
-        d="M10 5V10L13 13"
-        stroke="currentColor"
-        strokeWidth="2"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-    </svg>
-  );
-};
-
-export default TimeIcon;

src/client/home/pages/FinancialDashboard/components/VariationModal.tsx

@@ -1,73 +0,0 @@
-import React, { useEffect } from 'react';
-import { motion, AnimatePresence } from 'framer-motion';
-import ModalOverlay from './ModalOverlay';
-import ModalDialog from './ModalDialog';
-import ModalContent from './ModalContent';
-
-interface VariationModalProps {
-  isOpen: boolean;
-  onClose: () => void;
-  data?: any;
-}
-
-const VariationModal: React.FC<VariationModalProps> = ({
-  isOpen,
-  onClose,
-  data
-}) => {
-  // 点击外部关闭弹窗
-  useEffect(() => {
-    const handleEscape = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') {
-        onClose();
-      }
-    };
-
-    if (isOpen) {
-      document.addEventListener('keydown', handleEscape);
-      document.body.style.overflow = 'hidden';
-    }
-
-    return () => {
-      document.removeEventListener('keydown', handleEscape);
-      document.body.style.overflow = 'unset';
-    };
-  }, [isOpen, onClose]);
-
-  return (
-    <AnimatePresence>
-      {isOpen && (
-        <div className="fixed inset-0 z-50 flex items-center justify-center">
-          {/* 遮罩层 */}
-          <motion.div
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            exit={{ opacity: 0 }}
-            transition={{ duration: 0.3 }}
-          >
-            <ModalOverlay onClick={onClose} />
-          </motion.div>
-
-          {/* 弹窗容器 */}
-          <motion.div
-            initial={{ opacity: 0, scale: 0.8, y: 20 }}
-            animate={{ opacity: 1, scale: 1, y: 0 }}
-            exit={{ opacity: 0, scale: 0.8, y: 20 }}
-            transition={{
-              duration: 0.4,
-              ease: "easeOut"
-            }}
-            className="relative z-10"
-          >
-            <ModalDialog>
-              {/* 弹窗内容 */}
-              <ModalContent data={data} onClose={onClose} />
-            </ModalDialog>
-          </motion.div>
-        </div>
-      )}
-    </AnimatePresence>
-  );
-};
-
-export default VariationModal;