IBKR财经看板

背景

用过IBKR 客户端的朋友都知道，IBKR 的系统非常强大，但它的 UI 设计和交互体验确实一言难尽。

作为证券界的老大哥，IBKR 提供了极其丰富和底层的数据接口，但相比于富途、长桥等现代化券商客户端，用户想要直观地查看自己的净值走势、真实历史盈亏、资金分布等信息，门槛太高了。

所以我就想着自己做一个看板：IBKR Dashboard

实现效果

目前系统已经完美集成到我的博客中，博客 Header 导航栏已附带链接，感兴趣的朋友可以去实际体验一下

核心功能模块

1. 总览页

• 四个核心指标卡：展示总资产 、当日盈亏/收益率、总盈亏/年初至今收益以及可用现金余额。

• 三模式图表：展示资产趋势折线图、每日盈亏柱状图、累计收益折线图

• 盈亏日历：直观展示当月每日盈亏金额和收益率以及当月总收益

2. 持仓明细

• 持仓指标卡：展示持仓总市值、总浮盈/收益率、以及当前重仓标的。

• 资产分布环形图：多维度（按标的代码、资产类型、币种）动态渲染的饼状图，账户权重分布一目了然。

• 持仓明细表：包含完整的 11 列核心字段（代码、名称、类型、数量、现价、成本、市值、浮盈、占比、月/年至今收益）

3. 个股K线

• 标的信息卡片：展示股票代码、名称、币种及实时/延时价格。

• 交互K线图表：内置条件筛选器，支持切换不同时间周期以及MA 均线技术指标，查看详细K线图。

技术实现

系统采用了前后端分离与自动化架构。通过定时任务拉取数据，再由 Next.js 全栈能力完成解析与渲染。

• 数据链路：IBKR 定制 XML 报表 -> GitHub Actions (Cron 定时每日拉取) -> Next.js 后端解析 -> 前端展示。

• 技术栈：

  • 框架：Next.js/React 19

  • 样式：Tailwind CSS + Shadcn UI

  • 图表：lightweight-charts（TradingView开源的专业股票图表库）+ recharts

  • 行情数据：yahoo-finance2

  • XML解析：fast-xml-parser

总结

开发这个看板的初衷，是为了让自己在使用和复盘时能有一个直观的数据中心。后续会继续优化一下，目前的想法是实现Docker镜像话，将其开源，让感兴趣的朋友自己也可以部署使用。