关系图面板
GraphPreview
账户与分类之间资金流向的力导向图可视化。节点代表账户和支出类别；边代表它们之间的交易流。
图表类型
| 属性 | 值 |
|---|---|
| 库 | Apache ECharts（原始 echarts.init()） |
| 系列类型 | graph，layout: 'force' |
| 渲染 | Canvas，直接初始化（非 BaseChart） |
| 调整大小处理 | 容器上的手动 ResizeObserver |
| 源文件 | src/components/panels/GraphPanel.tsx |
面板有意绕过 BaseChart，以避免力布局的重新挂载问题。在容器 div 上进行原始 echarts.init() 调用，并配有专用的 ResizeObserver 实现响应式调整。
显示内容
- 节点 —— 银行账户和支出类别，按交易量确定大小
- 边 —— 账户和类别之间的交易流，宽度按流量金额缩放
- 邻接高亮 —— 悬停节点时以该节点颜色高亮其连接的边
节点着色
| 账户类型 | 颜色 |
|---|---|
| CHECKING（活期） | 强调色 (#00d4aa) |
| SAVINGS（储蓄） | 强调色 (#00d4aa) |
| CREDIT（信用） | 危险色（红色） |
| INVESTMENT（投资） | 警告色（琥珀色） |
| 类别 | 来自 CATEGORY_COLORS 的每类别颜色 |
当节点名称匹配组的搜索查询时，自定义颜色组会覆盖默认值。
交互操作
全画布平移和缩放
ECharts 内置的 roam 被禁用。取而代之的是自定义鼠标处理器提供无界导航：
- 拖拽平移 —— 在画布任意位置点击拖拽来平移
- 滚轮缩放 —— 向鼠标光标位置缩放（范围：0.1x 到 15x）
- 适应边界 —— 初始加载时自动适应图形；通过标题按钮重新居中
手动邻接高亮
内置的 focus: 'adjacency' 强调被手动实现补充，该实现：
- 在每次选项更新时构建节点到边索引的邻接映射
- 在
mouseover时，对悬停的节点、其邻居和连接的边分发高亮操作 - 将边的描边颜色覆盖为悬停节点的颜色
- 在
mouseout时，分发downplay并强制 zrender 刷新
节点拖拽
单个节点在力布局中可拖拽（draggable: true）。力模拟以 animation: false 运行实现即时布局。
设置侧边栏
220px 可折叠侧边栏（通过标题中的齿轮图标切换），包含 5 个区域：
1. 过滤器
| 控件 | 描述 |
|---|---|
| 文本过滤 | 按名称子串匹配过滤节点 |
| 账户切换 | 显示/隐藏账户节点 |
| 类别切换 | 显示/隐藏类别节点 |
| 孤立节点切换 | 显示/隐藏无连接的节点 |
2. 分组
| 控件 | 选项 |
|---|---|
| 分组模式 | 按类型、按银行、按类别类型、无 |
| 颜色分组 | 自定义搜索查询到颜色的映射，支持添加/移除 |
3. 显示
| 控件 | 范围 |
|---|---|
| 标签 | 开/关 |
| 箭头 | 开/关（边箭头符号） |
| 节点大小 | 5 -- 80 |
| 连线粗细 | 1 -- 10 |
| 标签大小 | 6 -- 18 |
| 标签透明度 | 0% -- 100% |
| 节点透明度 | 0.1 -- 1.0 |
| 连线样式 | 直线、曲线、虚线 |
| 节点形状 | 圆形、方形、圆角方形、菱形 |
4. 力
| 控件 | 范围 |
|---|---|
| 中心力（引力） | 0 -- 0.5 |
| 排斥力 | 5 -- 500 |
| 连线距离最小值 | 1 -- 200 |
| 连线距离最大值 | 5 -- 400 |
| 摩擦力 | 0 -- 1 |
5. 恢复默认
通过 useGraphStore.resetToDefaults() 将所有设置重置为初始值。
数据来源
| 状态管理 | 字段 |
|---|---|
useFinanceStore | accounts, transactions, categories |
useGraphStore | 所有布局/显示/力设置, settingsOpen |
useChartTheme | 提示框、标签、边框的主题颜色 |
空状态
当 transactions.length === 0 时，在面板中居中显示"无交易数据"。