交易面板
最大且最复杂的面板(约 900 行代码)。提供完整的交易账本,支持虚拟化滚动、行内分类指定、AI 辅助分类,以及完整的分类管理侧边栏。
显示内容
可滚动、可搜索的交易表格。每行显示商户 Logo、描述、周期性/转账指示器、分类标签、日期和金额。
| 列 | 内容 |
|---|---|
| Logo | 商户 Logo(通过 merchant-logos.ts 缓存) |
| 描述 | 交易描述文本 |
| 指示器 | 周期性图标、转账图标(适用时) |
| 分类 | 彩色标签;可点击进行行内编辑 |
| 日期 | 交易日期 |
| 金额 | NZD 金额,颜色编码(绿色正值、红色负值) |
主要功能
- 虚拟化滚动 —— 仅渲染屏幕可见部分,流畅处理数千条交易。
- 实时搜索 —— 同时在描述、分类和账户字段中过滤。
- 排序控制 —— 切换按日期最新优先或最早优先。
- 多选 —— 单行复选框选择,加上全选切换。选中的交易可批量指定分类。
- 行内分类编码 —— 点击任何行的分类区域,打开下拉选择器。从现有分类中选择或保持未编码。
- AI 分类按钮 —— 每笔交易的 Sparkles 图标触发 Freddy AI 层的 AI 辅助分类建议。
- 未编码标记 —— 标题显示未分类交易的数量。
- 待处理交易 —— 待处理(未结算)交易显示在独立的区域。
- 周期性收款人 —— 检测到的周期性收款人列出频率信息。
- 平滑动画 —— 详情视图的展开/折叠过渡效果。
分类管理侧边栏
从面板内打开。提供分类的完整增删改查功能:
| 功能 | 详情 |
|---|---|
| 创建 | 名称、类型、颜色、图标 |
| 编辑 | 行内重命名、更改颜色/图标/类型 |
| 删除 | 带确认提示 |
| 类型 | 收入、支出、储蓄、转账 |
| 颜色 | 25 个预设颜色 (COLOR_PRESETS) |
| 图标 | 带搜索功能的完整图标选择器 |
分类按 TYPE_ORDER 排序:收入、支出、储蓄、转账。
数据来源
| 状态管理 | 字段 |
|---|---|
useFinanceStore | transactions, categories, selectedAccountId, updateTransactionCategory |
遵循账户面板设置的 selectedAccountId。所有货币使用 formatNZD() 格式化,日期使用 formatDate() 格式化。
交互操作
| 操作 | 结果 |
|---|---|
| 搜索 | 跨所有文本字段的实时过滤 |
| 点击分类标签 | 打开行内分类选择器 |
| 点击 AI 图标 | 触发该交易的 AI 分类 |
| 复选框选择 | 添加到多选集合 |
| 批量指定 | 将选定分类应用到所有选中的交易 |
| 排序切换 | 切换日期排序方向 |
| 调整手柄 | 通过 onResizeStart 调整列宽 |
新西兰特有逻辑
- 所有金额通过
formatNZD()使用 NZD - 商户 Logo 在可用时通过 Akahu 商户数据解析
en-NZ日期区域设置