桑基面板

Money FlowPreview

桑基流向图展示资金如何从收入来源通过中心池流向支出、储蓄和净储蓄。每条流的宽度与金额成正比。

图表类型

属性	值
库	Apache ECharts，通过 BaseChart
系列类型	sankey
方向	horizontal（水平）
源文件	src/components/panels/SankeyPanel.tsx

显示内容

三列流向：

收入来源  -->  可用资金  -->  支出
                          -->  储蓄
                          -->  净储蓄

• 左列 —— 收入来源（工资、自由职业等）
• 中心节点 —— "可用资金"池（总收入）
• 右列 —— 支出类别（按金额排序）、储蓄类别，以及可选的"净储蓄"

"净储蓄"节点仅在总收入超过总支出加储蓄时出现。

主要功能

功能	详情
三列布局	收入 -> 可用资金 -> 流出
节点着色	来自月度摘要的每类别颜色
连线着色	源节点颜色的 50% 透明度（十六进制 80 后缀）
净储蓄节点	天蓝色 (#38bdf8)，仅在正值时出现
邻接强调	悬停时 focus: 'adjacency'
右对齐标签	等宽字体，11px，次要文本色

视觉细节

属性	值
节点宽度	20px
节点间距	12px
节点对齐	justify（两端对齐）
连线曲率	0.5
节点边框	0px（无边框）
布局迭代	0（通过 layout: 'none' 手动布局）
"可用资金"节点颜色	强调色 (#00d4aa)
"净储蓄"节点颜色	天蓝色 (#38bdf8)

提示框

根据悬停对象有两种格式：

边（流向）：

工资 -> 可用资金
$8,500.00

节点：

可用资金
$8,500.00

交互操作

• 悬停节点 —— 高亮该节点及所有直接连接的流向（邻接聚焦）
• 悬停边 —— 高亮特定的流向路径
• 触发 —— mousemove 实现响应式追踪

数据来源

状态管理	字段
useFinanceStore	monthlySummary（拆分为 INCOME、EXPENSE 和 SAVINGS 类型）
useChartTheme	强调色、文本颜色、面板背景色

收入项按 type === 'INCOME' 且 total > 0 过滤。支出项按 type === 'EXPENSE' 且 total < 0 过滤（按金额降序排列）。储蓄项按 type === 'SAVINGS' 且 total < 0 过滤。

空状态

当月度摘要中没有收入或支出条目时，在面板中居中显示"无流向数据"。