账户面板
显示所有已连接的新西兰银行账户,按机构分组,并提供资产、负债和净资产的汇总数据。同时作为交易面板的全局过滤器。
显示内容
基于卡片的账户列表,数据来自 Akahu,按所属银行分组。每个账户显示名称、类型图标和当前余额。顶部的汇总栏总结所有账户的财务状况。
| 元素 | 详情 |
|---|---|
| 汇总栏 | 资产、负债、净资产 |
| 分组方式 | 按银行(ANZ、ASB、BNZ、Kiwibank、Westpac) |
| 每个账户 | 类型图标、账户名称、余额 |
| 积分奖励区 | Fly Buys、Airpoints 等的独立分组 |
| 空状态 | "未连接账户" |
账户类型图标
| 类型 | 图标 | 颜色 |
|---|---|---|
| CHECKING(活期) | Wallet | 强调绿色 |
| SAVINGS(储蓄) | PiggyBank | 强调绿色 |
| CREDIT(信用) | CreditCard | 红色 (--color-danger) |
| INVESTMENT(投资) | TrendingUp | 强调绿色 |
| REWARDS(积分) | Star | 强调绿色 |
信用账户使用红色文字;所有其他账户类型使用强调色。
主要功能
- 点击过滤 —— 点击任何账户即可过滤交易面板至该账户。再次点击清除过滤。
- 选中高亮 —— 选中的账户会显示强调色边框。
- 积分格式 —— 积分奖励账户显示积分而非货币。注释说明积分不影响净资产计算。
- 表格数字 —— 所有货币值使用
tabular-nums实现列对齐。
数据来源
| 状态管理 | 字段 |
|---|---|
useFinanceStore | accounts, netWorth, selectedAccountId |
所有货币值通过 lib/formatting.ts 中的 formatNZD() 格式化。
交互操作
| 操作 | 结果 |
|---|---|
| 点击账户 | 设置 selectedAccountId,交易面板进行过滤 |
| 点击已选账户 | 清除过滤(取消选中) |
| 悬停账户 | 微妙的高亮效果 |