Skip to content

交易面板

最大且最复杂的面板(约 900 行代码)。提供完整的交易账本,支持虚拟化滚动、行内分类指定、AI 辅助分类,以及完整的分类管理侧边栏。

显示内容

可滚动、可搜索的交易表格。每行显示商户 Logo、描述、周期性/转账指示器、分类标签、日期和金额。

内容
Logo商户 Logo(通过 merchant-logos.ts 缓存)
描述交易描述文本
指示器周期性图标、转账图标(适用时)
分类彩色标签;可点击进行行内编辑
日期交易日期
金额NZD 金额,颜色编码(绿色正值、红色负值)

主要功能

  • 虚拟化滚动 —— 仅渲染屏幕可见部分,流畅处理数千条交易。
  • 实时搜索 —— 同时在描述、分类和账户字段中过滤。
  • 排序控制 —— 切换按日期最新优先或最早优先。
  • 多选 —— 单行复选框选择,加上全选切换。选中的交易可批量指定分类。
  • 行内分类编码 —— 点击任何行的分类区域,打开下拉选择器。从现有分类中选择或保持未编码。
  • AI 分类按钮 —— 每笔交易的 Sparkles 图标触发 Freddy AI 层的 AI 辅助分类建议。
  • 未编码标记 —— 标题显示未分类交易的数量。
  • 待处理交易 —— 待处理(未结算)交易显示在独立的区域。
  • 周期性收款人 —— 检测到的周期性收款人列出频率信息。
  • 平滑动画 —— 详情视图的展开/折叠过渡效果。

分类管理侧边栏

从面板内打开。提供分类的完整增删改查功能:

功能详情
创建名称、类型、颜色、图标
编辑行内重命名、更改颜色/图标/类型
删除带确认提示
类型收入、支出、储蓄、转账
颜色25 个预设颜色 (COLOR_PRESETS)
图标带搜索功能的完整图标选择器

分类按 TYPE_ORDER 排序:收入、支出、储蓄、转账。

数据来源

状态管理字段
useFinanceStoretransactions, categories, selectedAccountId, updateTransactionCategory

遵循账户面板设置的 selectedAccountId。所有货币使用 formatNZD() 格式化,日期使用 formatDate() 格式化。

交互操作

操作结果
搜索跨所有文本字段的实时过滤
点击分类标签打开行内分类选择器
点击 AI 图标触发该交易的 AI 分类
复选框选择添加到多选集合
批量指定将选定分类应用到所有选中的交易
排序切换切换日期排序方向
调整手柄通过 onResizeStart 调整列宽

新西兰特有逻辑

  • 所有金额通过 formatNZD() 使用 NZD
  • 商户 Logo 在可用时通过 Akahu 商户数据解析
  • en-NZ 日期区域设置

相关面板