# @backtest-kit/ui 中文文档

规范地址：https://npmcn.com/package/%40backtest-kit/ui/

版本：23\.7\.0
npm 元数据更新时间：2026-10-29T15:13:25.653Z
中文译文更新时间：2026-11-07T19:47:01.432Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40backtest-kit/ui
原文对照：https://npmcn.com/package/%40backtest-kit/ui/?lang=original
项目主页：https://backtest-kit.github.io/documents/article_07_ai_news_trading_signals.html
源码仓库：https://github.com/tripolskypetr/backtest-kit

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：9.9 MB，74 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：10 个
- peer 依赖：ccxt ^4\.5\.24，typescript ^5\.0\.0，markdown-it ^14\.1\.0，backtest-kit ^23\.7\.0
- 首次发布：2026-02-04T15:50:47.062Z
- 最新版本发布：2026-10-29T15:13:24.890Z
- 近 30 天下载量：2862（2026-10-08 至 2026-11-06，npm 官方下载统计）
- 已发布版本数：180（近 12 个月 180 个）

## 中文简介

用于可视化加密货币交易信号,回放测试,以及实时市场数据的全链式UI框架. 使用烛台图、信号跟踪和风险分析来反应仪表板.

## 安装

```sh
npm install @backtest-kit/ui
```

也可以使用：`pnpm add @backtest-kit/ui`、`yarn add @backtest-kit/ui`、`bun add @backtest-kit/ui`

## README

![](https://github.com/tripolskypetr/backtest-kit/raw/refs/heads/master/assets/decart.svg)

# @ kit/ ui

> 网络驾驶舱 [反测试- kit](https://www.npmjs.com/package/backtest-kit)。自动托管的仪表板将运行的回放测试或直播会话转换成屏幕,您可以读取:组合卡、KPI板、带有信号覆盖的烛台图表、通知信息、策略热图、标记下报、垃圾文件探索器、实时手动控制面板、以及浏览中松脚本编辑器.

![screenshot](https://raw.githubusercontent.com/tripolskypetr/backtest-kit/HEAD/assets/screenshots/screenshot16.png)

[![Ask DeepWiki](https://deepwiki.com/badge.svg)](https://deepwiki.com/tripolskypetr/backtest-kit) [![npm](https://img.shields.io/npm/v/@backtest-kit/ui.svg?style=flat-square)](https://npmjs.org/package/@backtest-kit/ui) ![TypeScript](https://img.shields.io/badge/TypeScript-5.0+-blue)

交互仪表板,用于反测试-吻合,并配有信号可视化、烛光图表、风险分析和通知管理。 由React 18,Material-UI和轻量级图表所建.

📚 **[后端测试 Kit Docs](https://backtest-kit.github.io/documents/article_07_ai_news_trading_signals.html)** | **[GitHub 图像](https://github.com/tripolskypetr/backtest-kit)**

> **新来的?** 最快的真正设置是克隆 [参考执行](https://github.com/tripolskypetr/backtest-kit/tree/master/example) ——具有LLM预报,多时帧数据,并有文献记载的2026年2月回检功能的实用新闻-报关AI交易系统. 从那里开始,不是从头开始.

```bash
npm install @backtest-kit/ui backtest-kit
```

```typescript
import { serve } from "@backtest-kit/ui";
serve("0.0.0.0", 60050); // → http://localhost:60050
```

一个呼叫靴子的服务器 并服务仪表板。 下面的一切描述 **每个屏幕都显示什么** ——布局,数据,以及你在那里可以做什么.

* * *

## 壳

![screenshot](https://raw.githubusercontent.com/tripolskypetr/backtest-kit/HEAD/assets/screenshots/screenshot19.png)

每个页面都坐落在一个共同框内:上 **应用程序栏** 带有徽标( 点击切换家口) , 水平可滚动的行区域标签, 直播 **通知铃声**和GitHub链接。 一个瘦子 **进度栏** 当屏幕装入数据时, 在应用程序栏下动画 。 在栏下,大多数屏幕打开 **面包屑条** 作为动作栏的双倍——刷新,下载,打印,以及模式开关按钮都住在那里.

家用屏幕`/main`是一个 **发射纸**: 三组被贴上标签的大有色瓦片,每块瓦片有通往一节的出道口,上方有状态旗来总结引擎. 这些团体:

-   **应用** ——组合概览,PNL性能,系统日志
-   **现场直播** - 通知、待决状态、倾斜探测器
-   **其它** - Markdown报告、价格图、热图

* * *

## 组合概览 - `/overview`

![screenshot](https://raw.githubusercontent.com/tripolskypetr/backtest-kit/HEAD/assets/screenshots/screenshot1.png)

按符号组合的闭合交易信号 **备份** 财务报告和审定财务报表 **现场直播** 选项卡.

页面上有什么

每个符号都得到一款牌;每张牌是显示位置类型(长/短),入场价格,收成和收成损失水平,以及实现的闭合信号 **PNL(数量和百分比)**当一个位置使用美元成本平均或部分关闭时,卡片显示 **DCA 条目数** 财务报告和审定财务报表 **部分关闭计数**。一个 Backtest/Live 标签切换数据集;列表支持 **JSON 导出** 手动刷新。 布局是一个可滚动的有装饰背景的标签容器.

## PNL 性能( Dashboard) - `/dashboard` • 妇女 `/dashboard/:mode`

![screenshot](https://raw.githubusercontent.com/tripolskypetr/backtest-kit/HEAD/assets/screenshots/screenshot13.png)

KPI董事会. 交易业绩合计 **覆盖所有符号** 用于选择的模式.

页面上有什么

在面包屑头内(`KPI BACKTEST` 编号 : `KPI LIVE`) 身体为宣场网格(`dashboard_fields`由四道组合测量法提供活件,按符号计算并汇总:

-   **四张税卡** (单位:千美元)`SingleValueWidget`——今天/昨天/7天/31天,各显示有贸易统计标题的USDT利润, **颜色编码** 红色(损失)/绿色(利润)/橙色(平面).
-   **贸易业绩甜甜圈** (单位:千美元)`SpeedDonutWidget`) — 失败 vs. 成功 vs. 总信号计数.
-   **每日交易图** (单位:千美元)`ChartWidget`)——每日系列总/解决/拒绝交易.
-   **成功率小组** (单位:千美元)`SuccessRateWidget`)——每个符号(icon + 显示名),被分解为取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取.
-   **信号网格** (单位:千美元)`SignalGridWidget`)——用于活性模式的相接信号表.

面包屑行动: **下载** (将原始信号作为时间标注的JSON blob出口), **切换到 LIVE / 备份** (模式之间的跳动),以及 **手动刷新** (清除信号缓存并重新装入). 模式加载器在重算时会覆盖板.

## 系统日志 - `/logs`

![screenshot](https://raw.githubusercontent.com/tripolskypetr/backtest-kit/HEAD/assets/screenshots/screenshot14.png)

一个虚拟化,可过滤的引擎运行时日志的种子.

页面上有什么

每个条目都是一行 **类型徽章** (调试/信息/警告/日志),日志 **专题**页:1 **时间戳**,以及原始 JSON 参数在单一空间中提供。 搜索提示过滤器 **关键词或正则x**。整个日志导出为 JSON 文件 。 虚拟化了,所以它保持平滑 超过很长的历史.

## 通知 - `/notifications`

![screenshot](https://raw.githubusercontent.com/tripolskypetr/backtest-kit/HEAD/assets/screenshots/screenshot46.png)

该事件为整个信号生命周期提供反馈.

页面上有什么

彩色编码卡片,每个事件一张—— **打开、关闭、调度、出错** ——每个显示符号,位置,PNL,以及入/出/TP/SL价格. **无限滚动** pagination 加载更多。 点击一张牌打开一个 **详细模式** 为了那个事件 手动刷新拉动最新活动 。 同样的通知驱动 铃声徽章在应用程序栏.

## 现况 - `/status` → `/status/:id` → `/status/:id/control`

![screenshot](https://raw.githubusercontent.com/tripolskypetr/backtest-kit/HEAD/assets/screenshots/screenshot18.png)

3级钻井 _现场直播_ 职位:名单 详细情况 手动控制.

页面上有什么

**名单`/status`(中文(简体) )** ——按策略分组的活性信号,作为策略按钮的网格提供;点击一来检查.

**细节( E)`/status/:id`(中文(简体) )** ——一个待发信号作为有条理的场景的全部状态(`status_fields`:入站,出站,有效(混合)出站价格,DCA入站数和部分入站数,活出PnL. 页眉动作 : **手动控制**, (中文(简体) ), **打印** (将信号的字段交给可下载的PDF/markdown), **下载** (杰森语), **刷新**空状态读取 _"失败了..."_ 或者说 _"没有待发信号"_

**手动控制( O)`/status/:id/control`(中文(简体) )** 操作员面板(`RecordView`在那里,你通过四手进行现场干预 **多步向导模式**数字 : **打开待决**, (中文(简体) ), **平均购买额**, (中文(简体) ), **关闭待决**,以及 **断面**。每个都通过发射器从面板上发射出来,走过 _简报-投入-提交_并重新装入记录 导出为 JSON 。 (见 **模式体系** 说明如何建造这些设施。 )

## 标记下的报告—— `/report`

![screenshot](https://raw.githubusercontent.com/tripolskypetr/backtest-kit/HEAD/assets/screenshots/screenshot20.png)

为Backtest和Live运行编写战略业绩报告.

页面上有什么

一组战略按钮, **按类型分组,按信号音量排序**;选择一个会使其减记报告内入。 每次报告下载为 **标记下, PDF, 或生 JSON**。手动刷新内容。 这是该引擎分析法(战略/断面/风险/部分缩减/排程/性能/同步报告)的人文视角.

## 价格图表 - `/price_chart` → `/price_chart/:symbol` → `/price_chart/:symbol/:interval`

![screenshot](https://raw.githubusercontent.com/tripolskypetr/backtest-kit/HEAD/assets/screenshots/screenshot33.png)

互动烛台由TradeView轻量级图表提供动力.

页面上有什么

导航 **按符号,然后按间隔** (1m / 15m / 1h) 取景价格历史. 图表覆盖了活动信号的行: **条目**, (中文(简体) ), **营利(绿色)**,以及 **停止损失(红色)**。支持图表图像导出并单击以显示细节。 建于共享上 `ChartWidget`。 。 。 .

## 热图 - `/heat`

![screenshot](https://raw.githubusercontent.com/tripolskypetr/backtest-kit/HEAD/assets/screenshots/screenshot31.png)

每个有轨电车符号的颜色编码性能矩阵.

页面上有什么

单元格以性能为取色; 每个显示 **赢率、利润系数、夏普比率** 以及每个符号的其他总指标。 整个热映射输出为 **JSON 降标报告或PDF**,用手动刷新来重新计算统计数据。 (同一热量报告下载直播于家用屏幕的动作栏

## 倾斜探测器 - `/dump` • 妇女 `/dump/:search`

![screenshot](https://raw.githubusercontent.com/tripolskypetr/backtest-kit/HEAD/assets/screenshots/screenshot12.png)

引擎写给磁盘的全部文件浏览器 .

页面上有什么

A 类 **树状结构** 后端测试输出和文物文件的浏览器. 图标标记文件类型——图像,JSON,纯文本,或通用. 单击打开文件 **全屏预览模式**。关键字搜索过滤树;手动刷新重建树。 后被击倒 `FileTreeWidget`。 。 。 .

## 关于设置( S) - `/about` • 妇女 `/about/setup`

![screenshot](https://raw.githubusercontent.com/tripolskypetr/backtest-kit/HEAD/assets/screenshots/screenshot36.png)

框架资料`/about`)和a 数据 **设置** 视图( e)`/about/setup`)显示运行实例的解析配置/环境.

* * *

## 部件 — 可重复使用的棋子屏幕由

![screenshot](https://raw.githubusercontent.com/tripolskypetr/backtest-kit/HEAD/assets/screenshots/screenshot8.png)

基石

-   **图表元件** ——轻量级图表烛台/线上渲染有信号覆盖(价格图表,信号细节).
-   **信号GridWidget** ——相接信号表(抵消相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相相接相接相接相接相接相接相接相接相接相接相接相接相相接相相接相接相接相相接相接相接相接相接相接相接相接相接相接相接相接相接相相接相接相接相相接相接相接相接相相.
-   **状态元件** 活负荷状况瓦片.
-   **成功部件** 编号 : **快速多纳窗口** ——甜甜圈测得中和吞吐量.
-   **单值窗口** 编号 : **指标** ——单一KPI和指标值卡.
-   **显示 部件** ——DCA-梯子/有效价格可视化.
-   **部分部件** ——部分断裂.
-   **文件窗口** ——倒放-探索树.

共有的铬生活在 `components/common/`数字 : `AppHeader`页:1 `Markdown` 变形器 `CodeEditor`, (中文(简体) ), `NotificationView`, (中文(简体) ), `Tooltip`, (中文(简体) ), `IconPhoto`, (中文(简体) ), `ErrorView`装饰 `Background` 编号 : `BottomImage`. 供应商`AlertProvider`, (中文(简体) ), `ErrorProvider`, (中文(简体) ), `LayoutModalProvider`, (中文(简体) ), `StatusInfo`, (中文(简体) ), `Translate`) 为提醒,出错边界,模式堆放,状态横幅和i18n来包装应用程序.

## 模式系统——具有导航历史的窗口管理器

![screenshot](https://raw.githubusercontent.com/tripolskypetr/backtest-kit/HEAD/assets/screenshots/screenshot26.png)

仪表板的核心是 **模式窗口管理器**有两个互补机制位于 [反应-声明](https://github.com/react-declarative)是因为 `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()` 以启动匹配向导.

三个步骤(开放位置示例):

1.  **简介** ——获取并显示符号+当前有效价格(`controlViewService.getAveragePrice`带有 _"验证符号和价格"_ 警告 警告他们. `Next → /form`, (中文(简体) ), `Close` 开除.
2.  **表单** 收集方向(长/短)、数额(美元)和说明; **活计算硬币数量** = 数量 qq 价格作为只读字段;警告位置打开 _马上_。 。 。 . `Back → /brief`, (中文(简体) ), `Next → /submit`。 。 。 .
3.  **提交** - 开火(`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对引擎数据模型的了解.

## 常见问题

### @backtest-kit/ui 是什么？

用于可视化加密货币交易信号,回放测试,以及实时市场数据的全链式UI框架\. 使用烛台图、信号跟踪和风险分析来反应仪表板\.

### 如何安装 @backtest-kit/ui？

在项目目录运行 npm install @backtest-kit/ui，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：ccxt（^4\.5\.24）、typescript（^5\.0\.0）、markdown-it（^14\.1\.0）、backtest-kit（^23\.7\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @backtest-kit/ui 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @backtest-kit/ui 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @backtest-kit/ui 可以商用吗？

@backtest-kit/ui 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @backtest-kit/ui 的下载量有多少？

根据 npm 官方下载统计，@backtest-kit/ui 在 2026/10/08 – 2026/11/06 这 30 天内被下载 2,862 次，日均约 95 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @backtest-kit/ui 还在维护吗？

最新版本 23\.7\.0 发布于 2026/10/29（9 天前）；至今共发布 180 个版本，其中过去 12 个月发布了 180 个；首次发布于 2026/02/04。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。