@ kit/ ui
网络驾驶舱 反测试- kit。自动托管的仪表板将运行的回放测试或直播会话转换成屏幕,您可以读取:组合卡、KPI板、带有信号覆盖的烛台图表、通知信息、策略热图、标记下报、垃圾文件探索器、实时手动控制面板、以及浏览中松脚本编辑器.
交互仪表板,用于反测试-吻合,并配有信号可视化、烛光图表、风险分析和通知管理。 由React 18,Material-UI和轻量级图表所建.
新来的? 最快的真正设置是克隆 参考执行 ——具有LLM预报,多时帧数据,并有文献记载的2026年2月回检功能的实用新闻-报关AI交易系统. 从那里开始,不是从头开始.
npm install @backtest-kit/ui backtest-kit
import { serve } from "@backtest-kit/ui";
serve("0.0.0.0", 60050); // → http://localhost:60050
一个呼叫靴子的服务器 并服务仪表板。 下面的一切描述 每个屏幕都显示什么 ——布局,数据,以及你在那里可以做什么.
壳
每个页面都坐落在一个共同框内:上 应用程序栏 带有徽标( 点击切换家口) , 水平可滚动的行区域标签, 直播 通知铃声和GitHub链接。 一个瘦子 进度栏 当屏幕装入数据时, 在应用程序栏下动画 。 在栏下,大多数屏幕打开 面包屑条 作为动作栏的双倍——刷新,下载,打印,以及模式开关按钮都住在那里.
家用屏幕/main是一个 发射纸: 三组被贴上标签的大有色瓦片,每块瓦片有通往一节的出道口,上方有状态旗来总结引擎. 这些团体:
- 应用 ——组合概览,PNL性能,系统日志
- 现场直播 - 通知、待决状态、倾斜探测器
- 其它 - Markdown报告、价格图、热图
组合概览 - /overview
按符号组合的闭合交易信号 备份 财务报告和审定财务报表 现场直播 选项卡.
页面上有什么
每个符号都得到一款牌;每张牌是显示位置类型(长/短),入场价格,收成和收成损失水平,以及实现的闭合信号 PNL(数量和百分比)当一个位置使用美元成本平均或部分关闭时,卡片显示 DCA 条目数 财务报告和审定财务报表 部分关闭计数。一个 Backtest/Live 标签切换数据集;列表支持 JSON 导出 手动刷新。 布局是一个可滚动的有装饰背景的标签容器.
PNL 性能( Dashboard) - /dashboard • 妇女 /dashboard/:mode
KPI董事会. 交易业绩合计 覆盖所有符号 用于选择的模式.
页面上有什么
在面包屑头内(KPI BACKTEST 编号 : KPI LIVE) 身体为宣场网格(dashboard_fields由四道组合测量法提供活件,按符号计算并汇总:
- 四张税卡 (单位:千美元)
SingleValueWidget——今天/昨天/7天/31天,各显示有贸易统计标题的USDT利润, 颜色编码 红色(损失)/绿色(利润)/橙色(平面). - 贸易业绩甜甜圈 (单位:千美元)
SpeedDonutWidget) — 失败 vs. 成功 vs. 总信号计数. - 每日交易图 (单位:千美元)
ChartWidget)——每日系列总/解决/拒绝交易. - 成功率小组 (单位:千美元)
SuccessRateWidget)——每个符号(icon + 显示名),被分解为取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取. - 信号网格 (单位:千美元)
SignalGridWidget)——用于活性模式的相接信号表.
面包屑行动: 下载 (将原始信号作为时间标注的JSON blob出口), 切换到 LIVE / 备份 (模式之间的跳动),以及 手动刷新 (清除信号缓存并重新装入). 模式加载器在重算时会覆盖板.
系统日志 - /logs
一个虚拟化,可过滤的引擎运行时日志的种子.
页面上有什么
每个条目都是一行 类型徽章 (调试/信息/警告/日志),日志 专题页:1 时间戳,以及原始 JSON 参数在单一空间中提供。 搜索提示过滤器 关键词或正则x。整个日志导出为 JSON 文件 。 虚拟化了,所以它保持平滑 超过很长的历史.
通知 - /notifications
该事件为整个信号生命周期提供反馈.
页面上有什么
彩色编码卡片,每个事件一张—— 打开、关闭、调度、出错 ——每个显示符号,位置,PNL,以及入/出/TP/SL价格. 无限滚动 pagination 加载更多。 点击一张牌打开一个 详细模式 为了那个事件 手动刷新拉动最新活动 。 同样的通知驱动 铃声徽章在应用程序栏.
现况 - /status → /status/:id → /status/:id/control
3级钻井 现场直播 职位:名单 详细情况 手动控制.
页面上有什么
名单/status(中文(简体) ) ——按策略分组的活性信号,作为策略按钮的网格提供;点击一来检查.
细节( E)/status/:id(中文(简体) ) ——一个待发信号作为有条理的场景的全部状态(status_fields:入站,出站,有效(混合)出站价格,DCA入站数和部分入站数,活出PnL. 页眉动作 : 手动控制, (中文(简体) ), 打印 (将信号的字段交给可下载的PDF/markdown), 下载 (杰森语), 刷新空状态读取 "失败了..." 或者说 "没有待发信号"
手动控制( O)/status/:id/control(中文(简体) ) 操作员面板(RecordView在那里,你通过四手进行现场干预 多步向导模式数字 : 打开待决, (中文(简体) ), 平均购买额, (中文(简体) ), 关闭待决,以及 断面。每个都通过发射器从面板上发射出来,走过 简报-投入-提交并重新装入记录 导出为 JSON 。 (见 模式体系 说明如何建造这些设施。 )
标记下的报告—— /report
为Backtest和Live运行编写战略业绩报告.
页面上有什么
一组战略按钮, 按类型分组,按信号音量排序;选择一个会使其减记报告内入。 每次报告下载为 标记下, PDF, 或生 JSON。手动刷新内容。 这是该引擎分析法(战略/断面/风险/部分缩减/排程/性能/同步报告)的人文视角.
价格图表 - /price_chart → /price_chart/:symbol → /price_chart/:symbol/:interval
互动烛台由TradeView轻量级图表提供动力.
页面上有什么
导航 按符号,然后按间隔 (1m / 15m / 1h) 取景价格历史. 图表覆盖了活动信号的行: 条目, (中文(简体) ), 营利(绿色),以及 停止损失(红色)。支持图表图像导出并单击以显示细节。 建于共享上 ChartWidget。 。 。 .
热图 - /heat
每个有轨电车符号的颜色编码性能矩阵.
页面上有什么
单元格以性能为取色; 每个显示 赢率、利润系数、夏普比率 以及每个符号的其他总指标。 整个热映射输出为 JSON 降标报告或PDF,用手动刷新来重新计算统计数据。 (同一热量报告下载直播于家用屏幕的动作栏
倾斜探测器 - /dump • 妇女 /dump/:search
引擎写给磁盘的全部文件浏览器 .
页面上有什么
A 类 树状结构 后端测试输出和文物文件的浏览器. 图标标记文件类型——图像,JSON,纯文本,或通用. 单击打开文件 全屏预览模式。关键字搜索过滤树;手动刷新重建树。 后被击倒 FileTreeWidget。 。 。 .
关于设置( S) - /about • 妇女 /about/setup
框架资料/about)和a 数据 设置 视图( e)/about/setup)显示运行实例的解析配置/环境.
部件 — 可重复使用的棋子屏幕由
基石
- 图表元件 ——轻量级图表烛台/线上渲染有信号覆盖(价格图表,信号细节).
- 信号GridWidget ——相接信号表(抵消相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相相接相接相接相接相接相接相接相接相接相接相接相接相相接相相接相接相接相相接相接相接相接相接相接相接相接相接相接相接相接相接相相接相接相接相相接相接相接相接相相.
- 状态元件 活负荷状况瓦片.
- 成功部件 编号 : 快速多纳窗口 ——甜甜圈测得中和吞吐量.
- 单值窗口 编号 : 指标 ——单一KPI和指标值卡.
- 显示 部件 ——DCA-梯子/有效价格可视化.
- 部分部件 ——部分断裂.
- 文件窗口 ——倒放-探索树.
共有的铬生活在 components/common/数字 : AppHeader页:1 Markdown 变形器 CodeEditor, (中文(简体) ), NotificationView, (中文(简体) ), Tooltip, (中文(简体) ), IconPhoto, (中文(简体) ), ErrorView装饰 Background 编号 : BottomImage. 供应商AlertProvider, (中文(简体) ), ErrorProvider, (中文(简体) ), LayoutModalProvider, (中文(简体) ), StatusInfo, (中文(简体) ), Translate) 为提醒,出错边界,模式堆放,状态横幅和i18n来包装应用程序.
模式系统——具有导航历史的窗口管理器
仪表板的核心是 模式窗口管理器有两个互补机制位于 反应-声明是因为 useModalManager 编号 : useWizardModal,两者都保留自己的 导航历史 因此,模式堆栈,回去, 关闭作为一个管理堆栈而不是临时对话框.
1. 全球模式登记册——管理下堆栈上有标签的详细模式
一个提供者包起整个应用和注册 ~25个详细模式 ——每一次信号寿命周期事件并承诺类型——每一次电线接通 layoutService 主题。 应用程序的任何地方,推向一个对象(例如:. pickSignalSubject.next(signal)(中文(简体) ) push如果匹配模式在 管理堆栈; 因为堆栈跟踪深度, 打开一个模式 从内部 另一条(例如点击相關相關相關相關相關相關相關相關相關相關相關相關相關相關相關相關相關相關相 回来 箭头 pop让你去上一个. closeModalSubject 编号 : ctx.clear() 撕下整个堆积中央。 提供商还主持全球 提示, (中文(简体) ), 警报,以及 文档下载/审查 (单位:千美元)useOpenDocument流动.
这些模式是点击通知卡、网格信号或风险事件时打开的——位置生命中的每一个点都有专用的外出模式,每个模式都有相同的后出/打印/搜索/复制/ 动作菜单 / 关闭标题栏和相同的 StockChart 蜡烛标签 .
什么是注册(每个模式钩)
下方每个钩子都是 pick* 打开器订阅 layoutService.pick*Subject; 钩子使一个模式,通过它来显示事件的 DTO assets/*_fields.tsx 计程器, 标签外壳内 + <ActionMenu /> 上述标题栏:
| 钩子 | 打开模式 |
|---|---|
useSignalView | 通用信号(signal_fields(中文(简体) ) |
useRiskView | 拒绝风险(risk_fields(中文(简体) ) |
useSignalOpenedView 编号 : useSignalClosedView 编号 : useSignalScheduledView 编号 : useSignalCancelledView | 四种信号通知类型 |
useSignalNotifyView | 信息通知 |
useSignalSyncOpenView 编号 : useSignalSyncCloseView | 经纪人同步打开/ 关闭 |
useActivateScheduledView | 预定信号激活 |
useAverageBuyCommitView | a DCA中的承诺 |
useClosePendingView 编号 : useCancelScheduledView | 关闭/ 取消承诺 |
usePartialProfitAvailableView 编号 : usePartialProfitCommitView | 可用部分利润+承付额 |
usePartialLossAvailableView 编号 : usePartialLossCommitView | 部分可动用损失+承付 |
useBreakevenAvailableView 编号 : useBreakevenCommitView | 可用间断 + 承诺 |
useTrailingStopView 编号 : useTrailingTakeView | 跟踪停止/ 采取 |
useDumpContentView | 垃圾文件预览 |
这些模式是点击通知卡、网格信号或风险事件时打开的——位置生命中的每一个点都有专用的外出模式,每个模式都有相同的后出/打印/搜索/复制/ 动作菜单 / 关闭标题栏 .
2. 人工控制向导模式(操作、自身历史)
手动控制屏幕上的四项操作是 多步向导中,每个 useWizardModal 一个私人 createMemoryHistory() 因此,每种模式都有其 拥有 后向/后向导航通过三个路由步骤.
向导解剖学( 由全部四人共享)
文件夹 : useOpenPendingModal, (中文(简体) ), useAverageBuyModal, (中文(简体) ), useClosePendingModal, (中文(简体) ), useBreakevenModal。每个都包含 useXModal.tsx (单位:千美元) useWizardModal 配置——标题,全屏大小请求,关闭按钮, onSubmit 重新装入, routes.tsx (三个) IWizardModal 路线, steps.ts (脚步标签), view/{BriefView,FormView,SubmitView}.tsx,以及 components/StatusCard.tsx。页ControlView)订阅了四个发射国(commitOpenPendingEmitter, (中文(简体) ), commitAverageBuyEmitter, (中文(简体) ), commitClosePendingEmitter, (中文(简体) ), commitBreakevenEmitter)和电话 pickData() 以启动匹配向导.
三个步骤(开放位置示例):
- 简介 ——获取并显示符号+当前有效价格(
controlViewService.getAveragePrice带有 "验证符号和价格" 警告 警告他们.Next → /form, (中文(简体) ),Close开除. - 表单 收集方向(长/短)、数额(美元)和说明; 活计算硬币数量 = 数量 qq 价格作为只读字段;警告位置打开 马上。 。 。 .
Back → /brief, (中文(简体) ),Next → /submit。 。 。 . - 提交 - 开火(
controlViewService.commitOpenPending编号 :commitAverageBuy编号 :commitClosePending编号 :commitBreakeven并显示StatusCard内 装入 成功/出错 状态;Close定稿beginSave)和基础记录重载.
平均购买、关闭待发和Breakevin遵循相同的简况 – Form – 提交形状,并带有操作特定格式字段和状态卡副本.
战地计划( E)assets/*_fields.tsx)——每个DTO作为真实形式提供
24个文件 assets/ 这是 申报场计划 既驱使细节页,又驱使上面的每一个模式。 每次导出默认值 TypedField[] 数组(反应-声明),所以一个 DTO 用打字,标签,验证,分组的字段显示,如果有用,则用活部件显示,而不是用生 JSON 堆放. 信号生命中没有什么是隐藏在操作员身上的.
计划以及进口者
dashboard_fields(-)DashboardPage()——不是文本形式而是 部件网格:收入卡,甜甜圈,日交易图,成功率面板,信号网(见上文PNL Performation).signal_fields(-)StatusView细节 + 打印,useSignalView和status_fields(-)StatusView)——完整的待发/闭塞信号记录.risk_fields(-)useRiskView, (中文(简体) ),setup_fields(- 关于/Setup视图).- 生命周期/承诺计划 (每个 )
use*View全球登记册中的钩:signal_opened_fields, (中文(简体) ),signal_closed_fields, (中文(简体) ),signal_scheduled_fields, (中文(简体) ),signal_cancelled_fields, (中文(简体) ),signal_notify_fields, (中文(简体) ),signal_sync_open_fields, (中文(简体) ),signal_sync_close_fields, (中文(简体) ),activate_scheduled_fields, (中文(简体) ),average_buy_commit_fields, (中文(简体) ),close_pending_commit_fields, (中文(简体) ),cancel_scheduled_commit_fields, (中文(简体) ),breakeven_available_fields, (中文(简体) ),breakeven_commit_fields, (中文(简体) ),partial_profit_available_fields, (中文(简体) ),partial_profit_commit_fields, (中文(简体) ),partial_loss_available_fields, (中文(简体) ),partial_loss_commit_fields, (中文(简体) ),trailing_stop_fields, (中文(简体) ),trailing_take_fields。 。 。 .
这些是软件包中最大的源文件(大多数是27–37 KB),正因为他们描述了每个生命周期的每个领域——计划 为: uI对引擎数据模型的了解.