架构

KLineChartQuant 是一个围绕无头引擎构建的 pnpm monorepo。框架包负责挂载，Agent 与 UI 调用同一组方法，所有像素都出自同一条帧管线。本页是一张地图，细节在它链接的专题页里。

包与边界

三条边界撑起整个结构：

• Core 不依赖框架。 各绑定包通过 workspace:* 依赖 Core，Core 从不导入 Vue、React 或 Angular。绑定层只做容器挂载、输入转发，以及把信号桥接到各自的响应式系统。
• 只有一个控制器门面。 ChartController 对外提供只读信号（视口、数据、指标、主题、pane 布局、交互状态等）和命令方法，如 setData、setSymbols、addIndicator。所有绑定都只和这一层打交道。
• Agent 没有桥接层。 Core 中用 @Tool 装饰的方法就是 Agent 的工具。Agent 运行时直接调用它们，作用在用户看到的同一份状态上。

React 是有意绕一段路：React → Web Component → 控制器。这样 UI 只有一份实现，而不是两份。

从数据到一帧

Provider ── SourceRouter ── MarketDataCache
                                 │
                          图表数据 Buffer
                                 │
                   StateKernel（data 信号更新）
                                 │
                       scheduleDraw(level)
                                 │
     FrameTransaction：capture → derive → seal → render → publish
                                 │
                 Scene / Layer（按 pane、role 与 z 顺序）
                                 │
              Renderer ── WebGPU · WebGL2 · Canvas2D

1. 绑定层调用 setSymbols 或传入自定义数据，ChartDataManager 定位或创建对应序列的 Buffer。
2. MarketDataCache 经 SourceRouter 取数，负责分页、重试和去重，再写入 Buffer。详见行情数据。
3. Buffer 变化更新 StateKernel 的 data 信号，并调用 scheduleDraw()。
4. FrameTransaction 把下一个动画帧之前到达的请求合并为一次。它先封存输入，一次性推导可见范围与 K 线几何，再封存几何，让命中检测与屏幕上的图形属于同一代，然后绘制。
5. 每个 pane 通过统一的 Renderer 契约（drawInstances、drawLines）绘制各层。帧进行中到达的输入进入下一代，当前帧不会被中途改写。

交互走更短的路径。指针、滚轮和双指缩放只更新交互状态并重绘 Overlay 层，移动十字线不会重画静态主层。

渲染后端

业务层从不直接调用 GPU API，只向 Renderer 提交绘制原语，由 RendererHost 决定实际后端。

实际后端低于偏好时，运行时状态为 degraded。切换后端是热替换：Scene 与 Layer 保持不变，新 Renderer 接管后再销毁旧的。WebGPU 设备丢失时依次降级到 WebGL、Canvas。GPU 批次无法完成时，业务层完整执行 Canvas2D 路径。绘制以物理像素执行、逻辑像素输入，设备像素比只有一个来源。

深入阅读

下一步