📝 docs(epic): update financial dashboard epic documentation

- add asset net worth as a key financial indicator in epic goal
- update technical stack to include Tailwind CSS
- add reference documentation including API specification and Figma design prototypes
- clarify the four main data modules in the dashboard design
- update story details with more specific implementation requirements
- add component responsibilities in directory structure section
- specify data units for each financial metric in data interface definition

🔧 chore(settings): add figma remote mcp capabilities

- add mcp__figma-remote-mcp__get_design_context to allowed capabilities
- add mcp__figma-remote-mcp__get_metadata to allowed capabilities
- add mcp__figma-remote-mcp__whoami to allowed capabilities

.claude/settings.local.json

@@ -35,7 +35,10 @@
       "Bash(pnpm test:unit:*)",
       "Bash(mkdir:*)",
       "Bash(xargs sed:*)",
-      "mcp__figma__get_design_context"
+      "mcp__figma__get_design_context",
+      "mcp__figma-remote-mcp__get_design_context",
+      "mcp__figma-remote-mcp__get_metadata",
+      "mcp__figma-remote-mcp__whoami"
     ],
     "deny": [],
     "ask": []

docs/epic-006-financial-dashboard.md

@@ -2,39 +2,50 @@
 
 ## Epic Goal
 
-实现财务数据可视化大屏，通过 `/dev-api/dash/outlook` API 接口提供资产总额、利润总额、收入数据和资产负债率等关键财务指标的实时可视化展示，为管理层提供直观的财务运营概览。
+实现财务数据可视化大屏，通过 `/dev-api/dash/outlook` API 接口提供资产总额、资产净额、利润总额、净利润、收入数据和资产负债率等关键财务指标的实时可视化展示，为管理层提供直观的财务运营概览。大屏设计包含四个主要数据模块：资产负债率、收入、利润总额与净利润、资产负债率（百分比）。
 
 ## Epic Description
 
 ### 现有系统上下文
 
 - **当前相关功能**：项目已有供应链可视化大屏（GrainOilDashboard），包含地图展示、关键指标和供应链模型组件
-- **技术栈**：React + TypeScript + Hono后端 + shadcn/ui组件库 + PostgreSQL数据库
+- **技术栈**：React + TypeScript + Hono后端 + shadcn/ui组件库 + Tailwind CSS + PostgreSQL数据库
 - **集成点**：
   - 现有API路由结构：`src/server/api/`
   - 现有前端大屏组件：`src/client/home/pages/SupplyChainDashboards/`
   - 现有API客户端：`src/client/api.ts`
+  - 现有可视化组件：`src/client/components/ui/chart.tsx` (基于Recharts)
+- **参考文档**：
+  - API接口规范：`/mnt/code/182-169-template-6/docs/战略步署api.md` - 包含财务数据API的完整接口定义和数据结构
+  - UI设计原型：
+    - 主页面：`https://www.figma.com/design/mTu6gamzMFEybbSb8WssKK/可视化素材2-25?node-id=1715-121572&m=dev` - 财务数据可视化大屏主页面设计，包含四个数据模块
+    - 弹窗页面：`https://www.figma.com/design/mTu6gamzMFEybbSb8WssKK/可视化素材2-25?node-id=1819-154497&m=dev` - 点击变动幅度按钮后弹出的弹窗设计
 
 ### 增强详情
 
 - **新增内容**：
   - 后端API：`/dev-api/dash/outlook` GET接口，返回财务数据
-  - 前端页面：财务数据可视化大屏页面
+  - 前端页面：财务数据可视化大屏页面，包含四个数据模块
   - Mock数据：财务数据的模拟数据实现
+  - 可视化组件：基于Recharts的柱状图组件，支持多数据系列展示
 - **集成方式**：
   - 遵循现有API路由模式创建新的dashboard相关接口
   - 复用现有大屏组件的布局和样式模式
   - 使用现有API客户端模式进行数据获取
+  - 使用现有Recharts组件库实现数据可视化
 - **成功标准**：
   - API接口正确返回财务数据结构
-  - 前端大屏正确展示财务数据可视化图表
+  - 前端大屏正确展示四个数据模块的可视化图表
   - 数据更新和交互功能正常工作
+  - 变动幅度弹窗功能正常
 
 ## Stories
 
-1. **Story 1：创建财务数据API接口** - 在 `src/server/api/dash/outlook` 下创建GET接口，实现财务数据返回逻辑
-2. **Story 2：实现财务数据可视化大屏页面** - 在 `src/client/home/pages/FinancialDashboard/` 下创建财务数据可视化大屏组件
-3. **Story 3：集成API与前端数据展示** - 实现前端API调用、数据状态管理和可视化图表展示
+1. **Story 1：创建财务数据API接口** - 在 `src/server/api/dash/outlook` 下创建GET接口，实现财务数据返回逻辑，包含四个数据模块：资产总额与资产净额、利润总额与净利润、收入、资产负债率
+2. **Story 2：实现财务数据可视化大屏页面** - 在 `src/client/home/pages/FinancialDashboard/` 下创建财务数据可视化大屏组件，包括：
+   - 主页面（参考：`node-id=1715-121572`）- 包含四个数据模块的可视化展示
+   - 变动幅度弹窗（参考：`node-id=1819-154497`）- 点击右下角浮动按钮后显示
+3. **Story 3：集成API与前端数据展示** - 实现前端API调用、数据状态管理和可视化图表展示，使用Recharts组件库实现柱状图可视化
 
 ## 兼容性要求
 
@@ -74,19 +85,20 @@ src/server/modules/dash/__tests__/
 src/client/home/pages/FinancialDashboard/
 ├── FinancialDashboard.tsx
 ├── components/
-│   ├── AssetMetrics.tsx
-│   ├── ProfitMetrics.tsx
-│   ├── IncomeMetrics.tsx
-│   └── DebtRatioMetrics.tsx
+│   ├── AssetMetrics.tsx          # 资产负债率模块（资产总额与资产净额）
+│   ├── ProfitMetrics.tsx         # 利润总额与净利润模块
+│   ├── IncomeMetrics.tsx         # 收入模块
+│   ├── DebtRatioMetrics.tsx      # 资产负债率（百分比）模块
+│   └── VariationModal.tsx        # 变动幅度弹窗组件
 └── __tests__/
 ```
 
 ### 数据接口定义
-基于提供的API响应结构，包含：
-- 资产总额与资产净额数据
-- 利润总额与净利润数据
-- 收入数据
-- 资产负债率数据
+基于提供的API响应结构（详细定义见 `/mnt/code/182-169-template-6/docs/战略步署api.md`），包含：
+- **资产总额与资产净额数据**：2021-2025年数据，单位：亿元
+- **利润总额与净利润数据**：2021-2025年数据，单位：亿元
+- **收入数据**：2021-2025年数据，单位：亿元
+- **资产负债率数据**：2021-2025年数据，单位：%
 
 ## 验证清单