@363045841yyt/klinechart-core 0.8.1-alpha.4 → 0.8.2

package/dist/engine/chart.js

@@ -1,189 +1,39 @@
-import { createSignal, computed } from '../reactivity/signal';
-import { DataBuffer } from '../data-fetchers/dataBuffer';
-import { getVisibleRange } from './viewport/viewport';
-import { Pane, UpdateLevel } from './layout/pane';
+import { createSignal } from '../reactivity/signal';
+import { ChartDataManager } from './data/chartDataManager';
+import { ChartPaneLayout } from './layout/chartPaneLayout';
+import { UpdateLevel } from './layout/pane';
 import { InteractionController } from './controller/interaction';
-import { PaneRenderer } from './paneRenderer';
 import { SharedWebGLSurface } from './renderers/webgl/sharedWebGLSurface';
-import { MarkerManager } from './marker/registry';
-import { getPhysicalKLineConfig, calcKWidthPx } from './utils/klineConfig';
-import { computeZoom } from './utils/zoom';
-import { IndicatorScheduler } from './indicators/scheduler';
-import { getBuiltinIndicatorDefinitions } from './indicators/registerBuiltins';
-import { getRegisteredIndicatorDefinitions } from './indicators/indicatorDefinitionRegistry';
-import { SubPaneManager } from './subPaneManager';
+import { getPhysicalKLineConfig } from './utils/klineConfig';
+import { ChartZoomController } from './utils/chartZoomController';
+import { ChartViewportManager } from './viewport/chartViewportManager';
+import { ChartIndicatorManager } from './indicators/chartIndicatorManager';
+import { ChartRenderer } from './render/chartRenderer';
 import { createPluginHost, RendererPluginManager, wrapPaneInfo, } from '../plugin';
-import { createSubIndicatorRenderer } from './renderers/Indicator';
-import { createMainIndicatorLegendRendererPlugin } from './renderers/Indicator/mainIndicatorLegend';
-import { DrawingStore } from './drawing';
-import { createDrawingRendererPlugin, createDrawingLabelOverlayPlugin } from './drawing/plugin';
-import { createGridLinesRendererPlugin } from './renderers/gridLines';
-import { createCandleRenderer } from './renderers/candle';
-import { createComparisonLineRenderer } from './renderers/comparisonLine';
-import { createLastPriceLineRendererPlugin, createLastPriceLabelRegistrarPlugin } from './renderers/lastPrice';
-import { createCustomMarkersRenderer } from './renderers/customMarkers';
-import { createExtremaMarkersRendererPlugin } from './renderers/extremaMarkers';
-import { createYAxisRendererPlugin } from './renderers/yAxis';
-import { createCrosshairRendererPlugin } from './renderers/crosshair';
-import { createTimeAxisRendererPlugin } from './renderers/timeAxis';
 // 重新导出以保持向后兼容
-export { getPhysicalKLineConfig, calcKWidthPx };
+export { getPhysicalKLineConfig };
 export class Chart {
     dom;
     opt;
-    _internalData = [];
-    _dataFetcher = null;
-    _dataBuffer = new DataBuffer();
-    _dataBufferUnsub = null;
-    _comparisonSpecs = [];
-    _comparisonData = new Map();
-    _comparisonBuffers = new Map();
-    _comparisonBufferUnsubs = new Map();
-    raf = null;
-    pendingUpdateLevel = UpdateLevel.All;
-    _internalViewport = null;
-    paneRenderers = [];
-    markerManager;
-    drawingStore = new DrawingStore();
+    dataManager;
+    viewportManager;
+    layoutManager;
+    get paneRenderers() {
+        return this.layoutManager.getPaneRenderers();
+    }
     interaction;
     /** 插件宿主 */
     pluginHost;
     /** 渲染器插件管理器 */
     rendererPluginManager;
-    /** 精确 DPR（来自 ResizeObserver 的 devicePixelContentBoxSize） */
-    preciseDpr = 0;
-    /** 统一监听容器尺寸与 DPR 变化 */
-    resizeObserver;
-    /** scroll 事件处理器引用（用于 cleanup） */
-    onScroll;
-    /** 最近一次观测到的容器尺寸 */
-    observedSize = { width: 0, height: 0 };
-    /** 缓存的 scrollLeft（通过 scroll 事件同步，避免每帧读取 DOM 触发强制回流） */
-    cachedScrollLeft = 0;
-    /** 左侧加载缓冲宽度；DOM scrollLeft 不能为负，用它映射出逻辑负滚动 */
-    leftLoadBufferWidth = 0;
-    /** 待写入 DOM 的 scrollLeft（在 RAF 回调中应用，确保 Vue 已完成 DOM 更新） */
-    _pendingScrollLeft = null;
-    incrementalLoadHintEl = null;
-    incrementalLoadHintTimer = null;
-    pendingPrependedCount = 0;
-    /** overlay 上一帧是否有十字线（用于判断何时需要清除） */
-    overlayHadCrosshair = false;
-    /** 用户设置配置（传递给渲染器） */
-    settings = {};
-    /** pane ratio 状态（按 paneId 维护，sum=1 仅对可见 pane） */
-    _internalPaneRatios = new Map();
-    /** 共享 X 轴上下文缓存 */
-    xAxisCtx = null;
     /** Chart 级共享 WebGL canvas/context */
     sharedWebGLSurface;
-    getScrollContentHost() {
-        return this.dom.scrollContent ?? this.dom.container ?? null;
-    }
-    ensureIncrementalLoadHint() {
-        const host = this.getScrollContentHost();
-        if (!host)
-            return null;
-        if (this.incrementalLoadHintEl && this.incrementalLoadHintEl.isConnected) {
-            return this.incrementalLoadHintEl;
-        }
-        const ownerDoc = host.ownerDocument;
-        if (!ownerDoc)
-            return null;
-        const hint = ownerDoc.createElement('div');
-        hint.className = 'klc-incremental-load-hint';
-        hint.style.position = 'absolute';
-        hint.style.left = '0';
-        hint.style.top = '0';
-        hint.style.height = '0px';
-        hint.style.width = '0px';
-        hint.style.pointerEvents = 'none';
-        hint.style.opacity = '0';
-        hint.style.filter = 'blur(10px)';
-        hint.style.transition = 'opacity 420ms ease, filter 420ms ease';
-        hint.style.background = 'rgba(71, 91, 132, 0.5)';
-        hint.style.zIndex = '3';
-        hint.style.willChange = 'opacity, filter, width';
-        host.appendChild(hint);
-        this.incrementalLoadHintEl = hint;
-        return hint;
-    }
-    clearIncrementalLoadHintTimer() {
-        if (this.incrementalLoadHintTimer !== null) {
-            window.clearTimeout(this.incrementalLoadHintTimer);
-            this.incrementalLoadHintTimer = null;
-        }
-    }
-    hideIncrementalLoadHint() {
-        const hint = this.incrementalLoadHintEl;
-        if (!hint)
-            return;
-        hint.style.opacity = '0';
-        hint.style.filter = 'blur(10px)';
-    }
-    showIncrementalLoadHint(count) {
-        if (count <= 0)
-            return;
-        const hint = this.ensureIncrementalLoadHint();
-        if (!hint)
-            return;
-        this.clearIncrementalLoadHintTimer();
-        const dpr = this.getEffectiveDpr();
-        const { unitPx, startXPx } = getPhysicalKLineConfig(this.opt.kWidth, this.opt.kGap, dpr);
-        const width = this.getLeftLoadBufferWidth() + (startXPx + count * unitPx) / dpr;
-        hint.style.width = `${Math.max(0, width)}px`;
-        hint.style.height = `${Math.max(0, this._internalViewport?.viewHeight ?? this.dom.container?.clientHeight ?? 0)}px`;
-        hint.getBoundingClientRect();
-        hint.style.opacity = '1';
-        hint.style.filter = 'blur(0px)';
-        this.incrementalLoadHintTimer = window.setTimeout(() => {
-            this.hideIncrementalLoadHint();
-            this.incrementalLoadHintTimer = null;
-        }, 900);
-    }
-    /** 当前缩放级别（1 ~ zoomLevelCount） */
-    currentZoomLevel = 1;
-    /** 缩放级别总数 */
-    zoomLevelCount;
-    /** 指标调度器（负责计算 MA 等指标并写入 StateStore）
-     * TODO: 阶段5迁移为插件注册，Scheduler 通过事件监听 data/viewport 变更，Chart 不直接持有
-     */
-    indicatorScheduler;
-    /** 数据已更新但 Worker 指标尚未回写，期间避免用旧指标 state 绘制中间帧 */
-    pendingIndicatorDataUpdate = false;
-    /** 上次可见范围（用于检测视口变化） */
-    lastVisibleRange = { start: 0, end: 0 };
-    /** 原始可见范围可为负数，仅用于判断左侧空白区加载 */
-    lastRawVisibleRange = { start: 0, end: 0 };
-    /** Overlay 帧复用的最近主渲染结果 */
-    cachedDrawFrame = null;
-    /** 副图管理器 */
-    subPaneManager = new SubPaneManager();
-    /** 主图指标激活状态与参数（存在即激活，默认参数在 enable 时初始化） */
-    _mainIndicatorsSignal = createSignal(new Map());
-    /** 主图指标默认参数（从注册表中懒加载） */
-    static _defaultMainParamsCache = null;
-    static get DEFAULT_MAIN_PARAMS() {
-        if (Chart._defaultMainParamsCache === null) {
-            Chart._defaultMainParamsCache = {};
-            for (const def of getRegisteredIndicatorDefinitions()) {
-                if (def.category === 'main') {
-                    Chart._defaultMainParamsCache[def.displayName.toUpperCase()] = (def.runtime?.defaultConfig ?? {});
-                }
-            }
-        }
-        return Chart._defaultMainParamsCache;
-    }
-    /** 可启用的主图指标白名单（从注册表中懒加载） */
-    static _enableMainIndicatorsCache = null;
-    static get ENABLE_MAIN_INDICATORS() {
-        if (Chart._enableMainIndicatorsCache === null) {
-            Chart._enableMainIndicatorsCache = getRegisteredIndicatorDefinitions()
-                .filter(d => d.category === 'main')
-                .map(d => d.displayName.toUpperCase());
-        }
-        return Chart._enableMainIndicatorsCache;
-    }
+    /** 缩放控制器 */
+    zoomController;
+    /** 指标管理器 */
+    indicatorManager;
+    /** 渲染器 */
+    renderer;
     /**
      * 启用主图指标
      * @param indicatorId 指标ID
@@ -191,189 +41,34 @@ export class Chart {
      * @returns 是否成功启用
      */
     enableMainIndicator(indicatorId, params) {
-        const id = indicatorId.toUpperCase();
-        if (!Chart.ENABLE_MAIN_INDICATORS.includes(id)) {
-            console.warn(`[Chart] 未知的主图指标: ${indicatorId}`);
-            return false;
-        }
-        const map = this._mainIndicatorsSignal.peek();
-        const existing = map.get(id);
-        if (existing) {
-            // 已启用，更新参数
-            if (params) {
-                const next = new Map(map);
-                next.set(id, { params: { ...existing.params, ...params } });
-                this._mainIndicatorsSignal.set(next);
-                this.updateIndicatorSchedulerConfig(id);
-            }
-            return true;
-        }
-        // 合并默认参数和传入参数
-        const defaults = Chart.DEFAULT_MAIN_PARAMS[id] ?? {};
-        const merged = params ? { ...defaults, ...params } : defaults;
-        const next = new Map(map);
-        next.set(id, { params: merged });
-        this._mainIndicatorsSignal.set(next);
-        // 启用对应的渲染器
-        this.enableMainIndicatorRenderer(id);
-        // 更新调度器配置（触发异步重算）
-        this.updateIndicatorSchedulerConfig(id);
-        // 同步重算主图状态：latestResult 已有该指标的 series，只是没注册到 registry
-        // 补调 updateVisibleRange 使其走 updateVisibleStatesOnly，立即从 latestResult 合成极值
-        this.indicatorScheduler.updateVisibleRange(this.lastVisibleRange);
-        this.scheduleDraw();
-        return true;
+        return this.indicatorManager.enableMainIndicator(indicatorId, params);
     }
-    /**
-     * 禁用主图指标
-     * @param indicatorId 指标ID
-     * @returns 是否成功禁用
-     */
     disableMainIndicator(indicatorId) {
-        const id = indicatorId.toUpperCase();
-        const map = this._mainIndicatorsSignal.peek();
-        if (!map.has(id))
-            return false;
-        const next = new Map(map);
-        next.delete(id);
-        this._mainIndicatorsSignal.set(next);
-        // 禁用对应的渲染器
-        this.disableMainIndicatorRenderer(id);
-        // 更新调度器配置
-        this.updateIndicatorSchedulerConfig(id);
-        this.scheduleDraw();
-        return true;
+        return this.indicatorManager.disableMainIndicator(indicatorId);
     }
-    /**
-     * 切换主图指标启用状态
-     * @param indicatorId 指标ID
-     * @param enabled 是否启用
-     */
     toggleMainIndicator(indicatorId, enabled) {
-        if (enabled) {
-            this.enableMainIndicator(indicatorId);
-        }
-        else {
-            this.disableMainIndicator(indicatorId);
-        }
+        this.indicatorManager.toggleMainIndicator(indicatorId, enabled);
     }
-    /**
-     * 获取当前激活的主图指标列表
-     * @returns 激活的指标ID数组
-     */
     getActiveMainIndicators() {
-        return [...this._mainIndicatorsSignal.peek().keys()];
+        return this.indicatorManager.getActiveMainIndicators();
     }
-    /**
-     * 检查主图指标是否激活
-     * @param indicatorId 指标ID
-     */
     isMainIndicatorActive(indicatorId) {
-        return this._mainIndicatorsSignal.peek().has(indicatorId.toUpperCase());
+        return this.indicatorManager.isMainIndicatorActive(indicatorId);
     }
-    /**
-     * 更新主图指标参数
-     * @param indicatorId 指标ID
-     * @param params 参数对象
-     */
     updateMainIndicatorParams(indicatorId, params) {
-        const id = indicatorId.toUpperCase();
-        const map = this._mainIndicatorsSignal.peek();
-        const entry = map.get(id);
-        if (!entry)
-            return;
-        const merged = { ...entry.params, ...params };
-        const next = new Map(map);
-        next.set(id, { params: merged });
-        this._mainIndicatorsSignal.set(next);
-        // 同步更新渲染器配置
-        const rendererName = id.toLowerCase();
-        const renderer = this.getRenderer(rendererName);
-        if (renderer && renderer.setConfig) {
-            renderer.setConfig(merged);
-        }
-        // 更新调度器
-        this.updateIndicatorSchedulerConfig(id);
-        this.scheduleDraw();
+        this.indicatorManager.updateMainIndicatorParams(indicatorId, params);
     }
-    /**
-     * 获取主图指标参数
-     * @param indicatorId 指标ID
-     */
     getMainIndicatorParams(indicatorId) {
-        return this._mainIndicatorsSignal.peek().get(indicatorId.toUpperCase())?.params ?? null;
+        return this.indicatorManager.getMainIndicatorParams(indicatorId);
     }
-    /**
-     * 清除所有主图指标
-     */
     clearMainIndicators() {
-        const map = this._mainIndicatorsSignal.peek();
-        for (const id of map.keys()) {
-            this.disableMainIndicatorRenderer(id);
-        }
-        this._mainIndicatorsSignal.set(new Map());
-        this.scheduleDraw();
-    }
-    /**
-     * 启用主图指标渲染器（内部方法）
-     */
-    enableMainIndicatorRenderer(indicatorId) {
-        const definition = this.indicatorScheduler.getIndicatorMetadata(indicatorId);
-        const mainPane = definition?.mainPane;
-        if (!definition || !mainPane)
-            return;
-        if (!this.getRenderer(mainPane.rendererName)) {
-            this.useRenderer(definition.rendererFactory({ paneId: 'main', indicatorId }));
-        }
-        this.setRendererEnabled(mainPane.rendererName, true);
-        if (!this.getRenderer('mainIndicatorLegend')) {
-            this.useRenderer(createMainIndicatorLegendRendererPlugin({ yPaddingPx: this.opt.yPaddingPx }));
-        }
-    }
-    /**
-     * 禁用主图指标渲染器（内部方法）
-     */
-    disableMainIndicatorRenderer(indicatorId) {
-        const rendererName = this.indicatorScheduler.getIndicatorMetadata(indicatorId)?.mainPane?.rendererName;
-        if (rendererName) {
-            this.setRendererEnabled(rendererName, false);
-        }
-    }
-    /**
-     * 更新调度器配置（内部方法）
-     */
-    updateIndicatorSchedulerConfig(indicatorId) {
-        const entry = this._mainIndicatorsSignal.peek().get(indicatorId);
-        const isActive = entry !== undefined;
-        const params = entry?.params ?? {};
-        const definition = this.indicatorScheduler.getIndicatorMetadata(indicatorId);
-        const toActiveConfig = definition?.mainPane?.toActiveConfig;
-        if (!definition?.updateConfig || !toActiveConfig)
-            return;
-        const config = toActiveConfig(params, isActive);
-        if (config !== null) {
-            definition.updateConfig(this.indicatorScheduler, config, 'main');
-        }
+        this.indicatorManager.clearMainIndicators();
     }
     /**
      * @deprecated 使用 enableMainIndicator/disableMainIndicator 替代
      */
     setActiveMainIndicators(indicators) {
-        // 计算需要启用和禁用的指标
-        const newSet = new Set(indicators.map(i => i.toUpperCase()));
-        const currentSet = new Set(this._mainIndicatorsSignal.peek().keys());
-        // 禁用不再激活的
-        for (const id of currentSet) {
-            if (!newSet.has(id)) {
-                this.disableMainIndicator(id);
-            }
-        }
-        // 启用新激活的
-        for (const id of newSet) {
-            if (!currentSet.has(id)) {
-                this.enableMainIndicator(id);
-            }
-        }
+        this.indicatorManager.setActiveMainIndicators(indicators);
     }
     /**
      * 创建图表实例
@@ -389,169 +84,136 @@ export class Chart {
         this.interaction.setOnInteractionChange((snapshot) => {
             this._interactionSignal.set(snapshot);
         });
-        this.markerManager = new MarkerManager();
         this.pluginHost = createPluginHost();
         this.rendererPluginManager = new RendererPluginManager();
         this.sharedWebGLSurface = new SharedWebGLSurface();
         // 注入依赖
         this.rendererPluginManager.setPluginHost(this.pluginHost);
         this.rendererPluginManager.setInvalidateCallback(() => this.scheduleDraw());
-        this.syncPaneRatiosFromSpecs(this.opt.panes);
-        // 缩放级别由外部 SSOT 管理，Chart 只接收不计算
-        this.zoomLevelCount = Math.max(2, Math.round(this.opt.zoomLevels ?? 20));
-        this.currentZoomLevel = this.opt.initialZoomLevel ?? 1;
-        this.currentZoomLevel = Math.max(1, Math.min(this.zoomLevelCount, this.currentZoomLevel));
-        // 注意：初始 kWidth/kGap 应由外部通过 applyRenderState() 传入
-        // 初始化指标调度器
-        this.indicatorScheduler = new IndicatorScheduler();
-        this.indicatorScheduler.setPluginHost(this.pluginHost);
-        for (const definition of getBuiltinIndicatorDefinitions()) {
-            this.indicatorScheduler.registerIndicator(definition);
-        }
-        this.indicatorScheduler.setInvalidateCallback(() => {
-            this.pendingIndicatorDataUpdate = false;
-            this.scheduleDraw();
+        this.viewportManager = new ChartViewportManager({
+            getDom: () => this.dom,
+            getBottomAxisHeight: () => this.opt.bottomAxisHeight,
+            getLeftLoadBufferWidth: () => this.dataManager.getLeftLoadBufferWidth(),
+            getZoomLevel: () => this.zoomController.currentZoomLevel,
+            getLastVisibleRange: () => this.dataManager.lastVisibleRange,
+            getKWidth: () => this.opt.kWidth,
+            getKGap: () => this.opt.kGap,
+            scheduleDraw: (level) => this.scheduleDraw(level),
+            onResizeCompleted: () => { this.resize(); },
+            resizeSharedWebGLSurface: (plotWidth, plotHeight, dpr) => this.sharedWebGLSurface.resize(plotWidth, plotHeight, dpr),
         });
-        // 注册副图活跃列表提供者，调度器据此只计算启用的副图
-        this.indicatorScheduler.setActiveSubPaneProvider(() => this.subPaneManager.getPaneIds());
-        this.initPanes();
-        // dev: 主副图状态变更日志
-        if (import.meta.env?.MODE !== 'production') {
-            this._indicatorsComputed.subscribe(() => {
-                const instances = this._indicatorsComputed.peek();
-                console.log('[Chart] indicators signal changed:', instances);
-            });
-            this._subPanesComputed.subscribe(() => {
-                const subPanes = this._subPanesComputed.peek();
-                console.log('[Chart] subPanes signal changed:', subPanes);
-            });
-        }
-        // 注册绘图主插件（负责绘制 shape，layer: 'main'）
-        this.useRenderer(createDrawingRendererPlugin({ store: this.drawingStore }));
-        // 注册绘图标签插件（负责推送选中绘图的轴标签，layer: 'overlay'）
-        // 注意：此插件依赖 overlay 更新级别，若将来添加 Main 级别需调整
-        this.useRenderer(createDrawingLabelOverlayPlugin({ store: this.drawingStore }));
-        this.initCoreRenderers();
-        this.initResizeObserver();
-    }
-    initCoreRenderers() {
-        const axisWidth = this.opt.rightAxisWidth + (this.opt.priceLabelWidth ?? 0);
-        this.useRenderer(createGridLinesRendererPlugin());
-        this.useRenderer(createCandleRenderer());
-        this.useRenderer(createComparisonLineRenderer());
-        this.useRenderer(createLastPriceLineRendererPlugin());
-        this.useRenderer(createLastPriceLabelRegistrarPlugin());
-        this.useRenderer(createCustomMarkersRenderer());
-        this.useRenderer(createExtremaMarkersRendererPlugin());
-        this.useRenderer(createMainIndicatorLegendRendererPlugin({
-            yPaddingPx: this.opt.yPaddingPx,
-        }));
-        this.useRenderer(createYAxisRendererPlugin({
-            axisWidth,
-            yPaddingPx: this.opt.yPaddingPx,
-            getCrosshair: () => {
-                const pos = this.interaction.crosshairPos;
-                const price = this.interaction.crosshairPrice;
-                const activePaneId = this.interaction.activePaneId;
-                if (pos && price !== null) {
-                    return { y: pos.y, price, activePaneId };
-                }
-                return null;
-            },
-        }));
-        this.useRenderer(createCrosshairRendererPlugin({
-            getCrosshairState: () => ({
-                pos: this.interaction.crosshairPos,
-                activePaneId: this.interaction.activePaneId,
-                isDragging: this.interaction.isDraggingState(),
-                price: this.interaction.crosshairPrice,
+        this.layoutManager = new ChartPaneLayout(this.opt.panes, {
+            getDom: () => this.dom,
+            getOption: () => ({
+                rightAxisWidth: this.opt.rightAxisWidth,
+                yPaddingPx: this.opt.yPaddingPx,
+                priceLabelWidth: this.opt.priceLabelWidth,
+                paneGap: this.opt.paneGap,
+                defaultPaneMinHeightPx: this.opt.defaultPaneMinHeightPx,
             }),
-        }));
-        this.useRenderer(createTimeAxisRendererPlugin({
-            height: this.opt.bottomAxisHeight,
-            getCrosshair: () => {
-                const pos = this.interaction.crosshairPos;
-                const idx = this.interaction.crosshairIndex;
-                if (pos && idx !== null) {
-                    return { x: pos.x, index: idx };
-                }
-                return null;
+            getViewport: () => this.viewportManager.getViewport(),
+            getSharedWebGLSurface: () => this.sharedWebGLSurface,
+            setKnownPaneIds: (ids) => this.rendererPluginManager.setKnownPaneIds(ids),
+            notifyPaneResize: (paneId, pane) => this.rendererPluginManager.notifyResize(paneId, wrapPaneInfo(pane)),
+            scheduleDraw: (level) => this.scheduleDraw(level),
+            onLayoutChange: (ratios, specs) => {
+                this._paneRatiosSignal.set(ratios);
+                this._paneLayoutSignal.set(specs);
+                this.opt = { ...this.opt, panes: specs };
             },
-        }));
-    }
-    initResizeObserver() {
-        if (typeof ResizeObserver === 'undefined')
-            return;
-        const target = this.dom.container;
-        if (!target)
-            return;
-        // 初始化 scrollLeft 缓存
-        this.cachedScrollLeft = target.scrollLeft;
-        this.onScroll = () => { this.cachedScrollLeft = target.scrollLeft; };
-        target.addEventListener('scroll', this.onScroll, { passive: true });
-        this.resizeObserver = new ResizeObserver((entries) => {
-            const entry = entries[0];
-            if (!entry)
-                return;
-            const prevWidth = this.observedSize.width;
-            const prevHeight = this.observedSize.height;
-            const prevDpr = this.preciseDpr;
-            this.updateObservedMetrics(entry);
-            const widthChanged = this.observedSize.width !== prevWidth;
-            const heightChanged = this.observedSize.height !== prevHeight;
-            const dprChanged = this.preciseDpr !== prevDpr;
-            if (import.meta.env?.MODE !== 'production') {
-                console.log(`[Chart] resize observer: ` +
-                    `size ${prevWidth}x${prevHeight} -> ${this.observedSize.width}x${this.observedSize.height} ` +
-                    `dpr ${prevDpr} -> ${this.preciseDpr} ` +
-                    `changed: ${widthChanged || heightChanged ? 'size' : ''}${widthChanged || heightChanged && dprChanged ? '+' : ''}${dprChanged ? 'dpr' : ''}`);
-            }
-            if (widthChanged || heightChanged || dprChanged) {
-                this.resize();
-            }
         });
-        try {
-            this.resizeObserver.observe(target, { box: 'device-pixel-content-box' });
-        }
-        catch {
-            this.resizeObserver.observe(target);
-        }
-    }
-    updateObservedMetrics(entry) {
-        const cssWidth = Math.max(1, Math.round(entry.contentRect.width));
-        const cssHeight = Math.max(1, Math.round(entry.contentRect.height));
-        this.observedSize.width = cssWidth;
-        this.observedSize.height = cssHeight;
-        const pixelSize = entry.devicePixelContentBoxSize?.[0];
-        const cssSize = entry.contentBoxSize?.[0];
-        if (!pixelSize || !cssSize || cssSize.inlineSize <= 0) {
-            this.preciseDpr = 0;
-            return;
-        }
-        const raw = pixelSize.inlineSize / cssSize.inlineSize;
-        this.preciseDpr = Math.round(raw * 64) / 64;
-    }
-    getEffectiveDpr() {
-        let dpr = this.preciseDpr > 0
-            ? this.preciseDpr
-            : Math.round((window.devicePixelRatio || 1) * 64) / 64;
-        if (dpr < 1)
-            dpr = 1;
-        return dpr;
+        this.dataManager = new ChartDataManager({
+            getOption: () => this.opt,
+            getEffectiveDpr: () => this.viewportManager.getEffectiveDpr(),
+            getLogicalScrollLeft: () => this.viewportManager.getLogicalScrollLeft(),
+            getCachedScrollLeft: () => this.viewportManager.getCachedScrollLeft(),
+            setCachedScrollLeft: (v) => { this.viewportManager.setCachedScrollLeft(v); },
+            setPendingScrollLeft: (v) => { this.viewportManager.setPendingScrollLeft(v); },
+            getDom: () => this.dom,
+            getObservedSize: () => this.viewportManager.getObservedSize(),
+            getViewport: () => this.viewportManager.getViewport(),
+            scheduleDraw: (level) => this.scheduleDraw(level),
+            resetInteraction: () => this.interaction.reset(),
+            getIndicatorScheduler: () => this.indicatorManager.indicatorSchedulerAccessor,
+            setPendingIndicatorDataUpdate: (v) => { this.dataManager.pendingIndicatorDataUpdate = v; },
+            isPointerDown: () => this.interaction.isPointerDown(),
+        });
+        this.zoomController = new ChartZoomController({
+            getLogicalScrollLeft: () => this.viewportManager.getLogicalScrollLeft(),
+            getCurrentDpr: () => this.viewportManager.getEffectiveDpr(),
+            getLeftLoadBufferWidth: () => this.dataManager.getLeftLoadBufferWidth(),
+            setScrollLeft: (v) => { this.viewportManager.setScrollLeft(v); },
+            onZoomCommitted: (result) => {
+                this.opt = { ...this.opt, kWidth: result.kWidth, kGap: result.kGap };
+                this.updateViewportSignal();
+                this.scheduleDraw();
+            },
+            getKWidth: () => this.opt.kWidth,
+            getKGap: () => this.opt.kGap,
+            getMinKWidth: () => this.opt.minKWidth,
+            getMaxKWidth: () => this.opt.maxKWidth,
+            zoomLevelCount: Math.max(2, Math.round(this.opt.zoomLevels ?? 20)),
+            initialZoomLevel: this.opt.initialZoomLevel ?? 1,
+        });
+        // 注意：初始 kWidth/kGap 应由外部通过 applyRenderState() 传入
+        // 初始化指标管理器
+        this.indicatorManager = new ChartIndicatorManager({
+            getOption: () => this.opt,
+            getPluginHost: () => this.pluginHost,
+            getRenderer: (name) => this.getRenderer(name),
+            useRenderer: (plugin, config) => this.useRenderer(plugin, config),
+            removeRenderer: (name) => this.removeRenderer(name),
+            updateRendererConfig: (name, config) => this.updateRendererConfig(name, config),
+            setRendererEnabled: (name, enabled) => this.setRendererEnabled(name, enabled),
+            hasPane: (paneId) => this.layoutManager.hasPane(paneId),
+            upsertPane: (def) => this.layoutManager.upsertPane(def),
+            removePaneDefinition: (paneId) => this.layoutManager.removePaneDefinition(paneId),
+            getPaneSpecs: () => this.layoutManager.getPaneSpecs(),
+            getPaneRatiosSignal: () => this._paneRatiosSignal,
+            getInternalPaneRatios: () => this.layoutManager.getInternalPaneRatios(),
+            setInternalPaneRatio: (paneId, ratio) => this.layoutManager.setInternalPaneRatio(paneId, ratio),
+            deleteInternalPaneRatio: (paneId) => this.layoutManager.deleteInternalPaneRatio(paneId),
+            applyPaneLayoutSpecs: (specs) => this.layoutManager.applyPaneLayoutSpecs(specs),
+            getLastVisibleRange: () => this.dataManager.lastVisibleRange,
+            getCrosshairPos: () => this.interaction.crosshairPos,
+            getCrosshairPrice: () => this.interaction.crosshairPrice,
+            getActivePaneId: () => this.interaction.activePaneId,
+            scheduleDraw: (level) => this.scheduleDraw(level),
+            setPendingIndicatorDataUpdate: (v) => { this.dataManager.pendingIndicatorDataUpdate = v; },
+        });
+        // 初始化渲染器
+        this.renderer = new ChartRenderer({
+            getDom: () => this.dom,
+            getOption: () => this.opt,
+            getPaneRenderers: () => this.paneRenderers,
+            getInteraction: () => this.interaction,
+            getSharedWebGLSurface: () => this.sharedWebGLSurface,
+            getPluginHost: () => this.pluginHost,
+            getRendererPluginManager: () => this.rendererPluginManager,
+            getTheme: () => this._themeSignal.peek(),
+            getCurrentZoomLevel: () => this.zoomController.currentZoomLevel,
+            getZoomLevelCount: () => this.zoomController.zoomLevelCount,
+            getViewportManager: () => this.viewportManager,
+            getDataManager: () => this.dataManager,
+            getIndicatorManager: () => this.indicatorManager,
+        });
+        this.renderer.registerDrawingPlugins();
+        this.renderer.initCoreRenderers();
+        this.viewportManager.init();
     }
     getViewport() {
-        return this._internalViewport;
+        return this.viewportManager.getViewport();
     }
     getCurrentDpr() {
-        return this.getEffectiveDpr();
+        return this.viewportManager.getEffectiveDpr();
     }
     /** 获取缓存的 scrollLeft（避免读取 DOM 触发强制回流） */
     getCachedScrollLeft() {
-        return this.cachedScrollLeft;
+        return this.viewportManager.getCachedScrollLeft();
     }
     /** 获取逻辑 scrollLeft（减去左侧加载缓冲宽度，可为负值） */
     getLogicalScrollLeft() {
-        return this.cachedScrollLeft - this.getLeftLoadBufferWidth();
+        return this.viewportManager.getLogicalScrollLeft();
     }
     /** 获取插件宿主 */
     get plugin() {
@@ -587,14 +249,19 @@ export class Chart {
     }
     /** 更新用户设置（触发重绘） */
     updateSettings(settings) {
-        this.settings = { ...settings };
+        this.renderer.updateSettings(settings);
         this.interaction.updateSettings(settings);
         // 同步刻度类型设置到所有 pane（百分比仅用于主图）
-        const axisType = settings.axisType ?? 'linear';
-        for (const renderer of this.paneRenderers) {
-            const pane = renderer.getPane();
-            const scaleType = axisType === 'percent' && pane.role !== 'price' ? 'linear' : axisType;
-            pane.yAxis.setScaleType(scaleType);
+        if ('axisType' in settings) {
+            const axisType = settings.axisType ?? 'linear';
+            const currentType = this.paneRenderers[0]?.getPane().yAxis.getScaleType();
+            if (axisType !== currentType) {
+                for (const renderer of this.paneRenderers) {
+                    const pane = renderer.getPane();
+                    const scaleType = axisType === 'percent' && pane.role !== 'price' ? 'linear' : axisType;
+                    pane.yAxis.setScaleType(scaleType);
+                }
+            }
         }
         this.scheduleDraw();
     }
@@ -603,259 +270,7 @@ export class Chart {
      * @param level 更新级别，决定渲染哪些层
      */
     draw(level = UpdateLevel.All) {
-        // 1. 重置 Marker 标记
-        this.markerManager.clear();
-        // 2. 准备帧数据（视口 / 可见范围 / K 线坐标，优先走缓存）
-        const frame = this.prepareFrameData(level);
-        if (!frame) {
-            if (this._internalData.length === 0)
-                this.clearAllCanvases();
-            return;
-        }
-        const { vp, range, kLinePositions, kLineCenters, kBarRects, kWidthPx, useCachedFrame } = frame;
-        // 3. 更新交互控制器坐标映射
-        this.interaction.setKLinePositions(kLinePositions, range, kWidthPx);
-        // 4. 通知调度器当前活跃主图指标 + 获取价格范围
-        this.indicatorScheduler.setActiveMainIndicators([...this._mainIndicatorsSignal.peek().entries()].map(([id, entry]) => ({ id, params: entry.params })));
-        const mainIndicatorRange = useCachedFrame ? null : this.indicatorScheduler.getMainIndicatorPriceRange();
-        const hasCrosshair = this.interaction.getCrosshairIndex() !== null;
-        // 5. 遍历所有 Pane 渲染主层 / overlay / Y 轴
-        const { sharedXAxisLabels, sharedXAxisRanges } = this.renderPanes(vp, range, kLinePositions, kLineCenters, kBarRects, kWidthPx, mainIndicatorRange, hasCrosshair, useCachedFrame, level);
-        // 6. 持久化十字线状态供下帧判断清除
-        this.overlayHadCrosshair = hasCrosshair;
-        // 7. 渲染 X 轴时间轴
-        this.renderXAxis(vp, range, kLinePositions, kLineCenters, kBarRects, kWidthPx, sharedXAxisLabels, sharedXAxisRanges);
-    }
-    prepareFrameData(level) {
-        const useCachedFrame = level === UpdateLevel.Overlay && this.cachedDrawFrame !== null;
-        const vp = useCachedFrame ? this.cachedDrawFrame.viewport : this.computeViewport();
-        if (!vp)
-            return null;
-        if (this._internalData.length === 0)
-            return null;
-        const rawRange = useCachedFrame
-            ? this.cachedDrawFrame.range
-            : (() => {
-                const { start, end } = getVisibleRange(vp.scrollLeft, vp.plotWidth, this.opt.kWidth, this.opt.kGap, this._internalData.length, vp.dpr);
-                return { start, end };
-            })();
-        const range = { start: Math.max(0, rawRange.start), end: rawRange.end };
-        if (!useCachedFrame && (range.start !== this.lastVisibleRange.start
-            || range.end !== this.lastVisibleRange.end
-            || rawRange.start !== this.lastRawVisibleRange.start
-            || rawRange.end !== this.lastRawVisibleRange.end)) {
-            this.indicatorScheduler.updateVisibleRange(range);
-            this.lastVisibleRange = range;
-            this.lastRawVisibleRange = rawRange;
-            this.checkVisibleRangeGapWhenIdle();
-        }
-        const kLinePositions = useCachedFrame
-            ? this.cachedDrawFrame.kLinePositions
-            : this.calcKLinePositions(range);
-        let kLineCenters;
-        let kBarRects;
-        let kWidthPx;
-        if (useCachedFrame) {
-            kLineCenters = this.cachedDrawFrame.kLineCenters;
-            kBarRects = this.cachedDrawFrame.kBarRects;
-            kWidthPx = this.cachedDrawFrame.kWidthPx;
-        }
-        else {
-            const physConfig = getPhysicalKLineConfig(this.opt.kWidth, this.opt.kGap, vp.dpr);
-            let barWidthPx = Math.max(1, physConfig.unitPx - 1);
-            if (barWidthPx % 2 === 0)
-                barWidthPx -= 1;
-            kLineCenters = new Array(kLinePositions.length);
-            kBarRects = new Array(kLinePositions.length);
-            for (let i = 0; i < kLinePositions.length; i++) {
-                const x = kLinePositions[i];
-                const leftPx = Math.round(x * vp.dpr);
-                const wickXPx = leftPx + (physConfig.kWidthPx - 1) / 2;
-                kLineCenters[i] = wickXPx / vp.dpr;
-                const barLeftPx = wickXPx - (barWidthPx - 1) / 2;
-                kBarRects[i] = { x: barLeftPx / vp.dpr, width: barWidthPx / vp.dpr };
-            }
-            kWidthPx = getPhysicalKLineConfig(this.opt.kWidth, this.opt.kGap, vp.dpr).kWidthPx;
-            this.cachedDrawFrame = {
-                viewport: { ...vp },
-                range: { ...range },
-                kLinePositions,
-                kLineCenters,
-                kBarRects,
-                kWidthPx,
-            };
-        }
-        return { vp, range, kLinePositions, kLineCenters, kBarRects, kWidthPx, useCachedFrame };
-    }
-    clearAllCanvases() {
-        const vp = this.computeViewport();
-        if (!vp)
-            return;
-        for (const r of this.paneRenderers) {
-            const { mainCtx, overlayCtx, yAxisCtx } = r.getContexts();
-            const pane = r.getPane();
-            mainCtx?.clearRect(0, 0, vp.plotWidth + 1, pane.height + 2 / vp.dpr);
-            overlayCtx?.clearRect(0, 0, vp.plotWidth + 1, pane.height + 2 / vp.dpr);
-            yAxisCtx?.clearRect(0, 0, vp.plotWidth + 1, pane.height + 2 / vp.dpr);
-        }
-        const xCtx = this.xAxisCtx;
-        if (xCtx) {
-            const xW = xCtx.canvas.width;
-            const xH = xCtx.canvas.height;
-            xCtx.clearRect(0, 0, xW, xH);
-        }
-    }
-    renderPanes(vp, range, kLinePositions, kLineCenters, kBarRects, kWidthPx, mainIndicatorRange, hasCrosshair, useCachedFrame, level) {
-        const sharedYAxisLabels = [];
-        const sharedXAxisLabels = [];
-        const sharedYAxisRanges = [];
-        const sharedXAxisRanges = [];
-        for (const renderer of this.paneRenderers) {
-            const pane = renderer.getPane();
-            const { mainCtx, overlayCtx, yAxisCtx } = renderer.getContexts();
-            const { candleSurface, lineSurface } = renderer.getWebGL();
-            if (!useCachedFrame) {
-                const indicatorRange = pane.role === 'price' ? mainIndicatorRange : null;
-                const comparisonRange = pane.id === 'main' ? this.getComparisonEquivalentPriceRange(range) : null;
-                const mergedRange = this.mergeNumericRanges(indicatorRange, comparisonRange);
-                pane.updateRange(this._internalData, range, mergedRange);
-                if (pane.id === 'main' && this.settings.disableMainPaneVerticalScroll) {
-                    pane.yAxis.resetTransform();
-                }
-            }
-            const shouldUpdateMain = level === UpdateLevel.Main || level === UpdateLevel.All;
-            const shouldUpdateOverlay = level === UpdateLevel.All || (level === UpdateLevel.Overlay && (hasCrosshair || this.overlayHadCrosshair));
-            if (shouldUpdateMain && mainCtx) {
-                mainCtx.setTransform(1, 0, 0, 1, 0, 0);
-                mainCtx.scale(vp.dpr, vp.dpr);
-                mainCtx.clearRect(0, 0, vp.plotWidth + 1, pane.height + 2 / vp.dpr);
-                candleSurface?.clear();
-                lineSurface?.clear();
-            }
-            if (shouldUpdateOverlay && overlayCtx) {
-                const overlayWidth = overlayCtx.canvas.width / vp.dpr;
-                overlayCtx.setTransform(1, 0, 0, 1, 0, 0);
-                overlayCtx.scale(vp.dpr, vp.dpr);
-                overlayCtx.clearRect(0, 0, overlayWidth + 1, pane.height + 2 / vp.dpr);
-            }
-            if (yAxisCtx && !useCachedFrame) {
-                const yAxisWidth = yAxisCtx.canvas.width / vp.dpr;
-                yAxisCtx.setTransform(1, 0, 0, 1, 0, 0);
-                yAxisCtx.scale(vp.dpr, vp.dpr);
-                yAxisCtx.clearRect(0, 0, yAxisWidth, pane.height + 2 / vp.dpr);
-            }
-            const context = {
-                ctx: mainCtx,
-                overlayCtx: overlayCtx ?? undefined,
-                pane: wrapPaneInfo(pane),
-                data: this._internalData,
-                comparisonData: this._comparisonData,
-                comparisonSymbols: this._comparisonSpecs,
-                range,
-                scrollLeft: vp.scrollLeft,
-                kWidth: this.opt.kWidth,
-                kGap: this.opt.kGap,
-                dpr: vp.dpr,
-                paneWidth: vp.plotWidth,
-                kLinePositions,
-                kLineCenters,
-                kBarRects,
-                markerManager: this.markerManager,
-                crosshairIndex: this.interaction.getCrosshairIndex(),
-                yAxisCtx: yAxisCtx ?? undefined,
-                candleWebGLSurface: candleSurface ?? undefined,
-                lineWebGLSurface: lineSurface ?? undefined,
-                zoomLevel: this.currentZoomLevel,
-                zoomLevelCount: this.zoomLevelCount,
-                viewport: {
-                    scrollLeft: vp.scrollLeft,
-                    plotWidth: vp.plotWidth,
-                    plotHeight: vp.plotHeight,
-                },
-                settings: this.settings,
-                yAxisLabels: sharedYAxisLabels,
-                xAxisLabels: sharedXAxisLabels,
-                yAxisRanges: sharedYAxisRanges,
-                xAxisRanges: sharedXAxisRanges,
-                theme: this._themeSignal.peek(),
-                isAsiaMarket: this.settings.isAsiaMarket,
-                colorPresetSettings: this.settings.colorPresetSettings,
-            };
-            if (shouldUpdateMain || shouldUpdateOverlay) {
-                const errors = this.rendererPluginManager.render(pane.id, context, level);
-                if (errors.length > 0) {
-                    this.pluginHost.events.emit('renderer:error', { paneId: pane.id, errors });
-                }
-                const yAxisErrors = this.rendererPluginManager.renderPlugin('yAxis', context);
-                if (yAxisErrors.length > 0) {
-                    this.pluginHost.events.emit('renderer:error', { paneId: pane.id, errors: yAxisErrors });
-                }
-            }
-        }
-        return { sharedXAxisLabels, sharedXAxisRanges };
-    }
-    renderXAxis(vp, range, kLinePositions, kLineCenters, kBarRects, kWidthPx, sharedXAxisLabels, sharedXAxisRanges) {
-        const xAxisCtx = this.xAxisCtx ?? this.dom.xAxisCanvas.getContext('2d');
-        if (!this.xAxisCtx) {
-            this.xAxisCtx = xAxisCtx;
-        }
-        if (xAxisCtx) {
-            const timeAxisContext = {
-                ctx: xAxisCtx,
-                pane: {
-                    id: 'xAxis',
-                    role: 'auxiliary',
-                    capabilities: {
-                        showPriceAxisTicks: false,
-                        showCrosshairPriceLabel: false,
-                        candleHitTest: false,
-                        supportsPriceTranslate: false,
-                    },
-                    top: 0,
-                    height: this.opt.bottomAxisHeight,
-                    yAxis: {
-                        priceToY: () => 0,
-                        yToPrice: () => 0,
-                        getPaddingTop: () => 0,
-                        getPaddingBottom: () => 0,
-                        getPriceOffset: () => 0,
-                        getDisplayRange: (baseRange) => baseRange ?? { maxPrice: 0, minPrice: 0 },
-                        getScaleType: () => 'linear',
-                        getBasePrice: () => null,
-                        toPercent: () => 0,
-                        fromPercent: () => 0,
-                        getDisplayPercentRange: () => ({ minPct: 0, maxPct: 0 }),
-                    },
-                    priceRange: { maxPrice: 0, minPrice: 0 },
-                },
-                data: this._internalData,
-                range,
-                scrollLeft: vp.scrollLeft,
-                kWidth: this.opt.kWidth,
-                kGap: this.opt.kGap,
-                dpr: vp.dpr,
-                paneWidth: vp.plotWidth,
-                kLinePositions,
-                kLineCenters,
-                kBarRects,
-                xAxisCtx,
-                viewport: {
-                    scrollLeft: vp.scrollLeft,
-                    plotWidth: vp.plotWidth,
-                    plotHeight: vp.plotHeight,
-                },
-                yAxisLabels: [],
-                xAxisLabels: sharedXAxisLabels,
-                xAxisRanges: sharedXAxisRanges,
-                theme: this._themeSignal.peek(),
-                isAsiaMarket: this.settings.isAsiaMarket,
-                colorPresetSettings: this.settings.colorPresetSettings,
-            };
-            const errors = this.rendererPluginManager.renderPlugin('timeAxis', timeAxisContext);
-            if (errors.length > 0) {
-                this.pluginHost.events.emit('renderer:error', { paneId: 'timeAxis', errors });
-            }
-        }
+        this.renderer.draw(level);
     }
     // ========== Render State API (Vue SSOT) ==========
     /**
@@ -865,24 +280,24 @@ export class Chart {
      */
     applyRenderState(kWidth, kGap, zoomLevel) {
         const nextZoomLevel = zoomLevel !== undefined
-            ? Math.max(1, Math.min(this.zoomLevelCount, zoomLevel))
-            : this.currentZoomLevel;
+            ? Math.max(1, Math.min(this.zoomController.zoomLevelCount, zoomLevel))
+            : this.zoomController.currentZoomLevel;
         const renderStateChanged = this.opt.kWidth !== kWidth
             || this.opt.kGap !== kGap
-            || this.currentZoomLevel !== nextZoomLevel;
+            || this.zoomController.currentZoomLevel !== nextZoomLevel;
         if (!renderStateChanged) {
             return;
         }
         this.opt = { ...this.opt, kWidth, kGap };
         if (zoomLevel !== undefined) {
-            this.currentZoomLevel = nextZoomLevel;
+            this.zoomController.setZoomLevel(nextZoomLevel);
         }
         this.updateViewportSignal();
         this.scheduleDraw();
     }
     /** 获取总缩放级别数 */
     getZoomLevelCount() {
-        return this.zoomLevelCount;
+        return this.zoomController.zoomLevelCount;
     }
     /** 获取所有 PaneRenderer */
     getPaneRenderers() {
@@ -890,16 +305,16 @@ export class Chart {
     }
     /** 获取 MarkerManager（供 InteractionController 使用） */
     getMarkerManager() {
-        return this.markerManager;
+        return this.renderer.getMarkerManager();
     }
     /** 更新自定义标记 */
     updateCustomMarkers(markers) {
-        this.markerManager.setCustomMarkers(markers);
+        this.renderer.getMarkerManager().setCustomMarkers(markers);
         this.scheduleDraw();
     }
     /** 清除自定义标记 */
     clearCustomMarkers() {
-        this.markerManager.clearCustomMarkers();
+        this.renderer.getMarkerManager().clearCustomMarkers();
         this.scheduleDraw();
     }
     /** 获取 ChartDom（供 InteractionController 使用） */
@@ -910,29 +325,6 @@ export class Chart {
     getOption() {
         return this.opt;
     }
-    /**
-     * 计算 K 线起始 x 坐标数组，与 candle.ts 的像素对齐方式保持一致
-     * @param range 可见 K 线索引范围
-     * @returns x 坐标数组（逻辑像素，经过物理像素对齐）
-     */
-    calcKLinePositions(range) {
-        const { start, end } = range;
-        const count = end - start;
-        // 边界检查：防止负数或零长度数组
-        if (count <= 0) {
-            return [];
-        }
-        const dpr = this.getEffectiveDpr();
-        // 统一使用 getPhysicalKLineConfig，确保与渲染完全一致
-        const { unitPx, startXPx } = getPhysicalKLineConfig(this.opt.kWidth, this.opt.kGap, dpr);
-        const positions = new Array(count);
-        for (let i = 0; i < count; i++) {
-            const dataIndex = start + i;
-            const leftPx = startXPx + dataIndex * unitPx;
-            positions[i] = leftPx / dpr;
-        }
-        return positions;
-    }
     /**
      * 更新配置并触发布局/重绘
      * @param partial 部分配置项
@@ -949,315 +341,80 @@ export class Chart {
         if (partial.panes) {
             const nextPanes = partial.panes.map((pane) => ({ ...pane }));
             this.opt = { ...this.opt, ...partial, panes: nextPanes };
-            this.applyPaneLayoutSpecs(nextPanes);
+            this.layoutManager.applyPaneLayoutSpecs(nextPanes);
             return;
         }
         this.opt = { ...this.opt, ...partial };
         this.resize();
     }
-    /** 更新 pane 布局配置
-     * @param panes 新的 pane 配置数组
-     *
-     * 显式整盘替换：清空之前 user-resize 留下的 paneRatios 缓存，让 spec 中的 ratio
-     * 真正生效。`addPane`/`upsertPane`/`removePaneDefinition` 走 `applyPaneLayoutSpecs`
-     * 时仍保留 prev 值以记住用户拖拽过的高度——只有显式的 layout replacement 才重置。
-     */
     updatePaneLayout(panes) {
-        this._internalPaneRatios.clear();
-        this.applyPaneLayoutSpecs(panes);
+        this.layoutManager.updatePaneLayout(panes);
     }
     setPaneDefinitions(defs) {
-        this.applyPaneLayoutSpecs(defs);
+        this.layoutManager.setPaneDefinitions(defs);
     }
     upsertPane(def) {
-        const idx = this.opt.panes.findIndex((pane) => pane.id === def.id);
-        if (idx === -1) {
-            this.applyPaneLayoutSpecs([...this.opt.panes, { ...def }]);
-            return;
-        }
-        const next = [...this.opt.panes];
-        next[idx] = { ...next[idx], ...def };
-        this.applyPaneLayoutSpecs(next);
+        this.layoutManager.upsertPane(def);
     }
     removePaneDefinition(paneId) {
-        if (!this.opt.panes.some((pane) => pane.id === paneId))
-            return;
-        this._internalPaneRatios.delete(paneId);
-        this.applyPaneLayoutSpecs(this.opt.panes.filter((pane) => pane.id !== paneId));
+        this.layoutManager.removePaneDefinition(paneId);
     }
     bindIndicatorToPane(paneId, indicatorId, params) {
-        const paneExists = this.opt.panes.some((pane) => pane.id === paneId);
-        if (!paneExists) {
-            this.upsertPane({ id: paneId, ratio: 1, visible: true, role: 'indicator' });
-        }
-        const definition = this.indicatorScheduler.getIndicatorMetadata(indicatorId);
-        if (!definition) {
-            throw new Error(`[Chart] Unknown indicator: ${indicatorId}`);
-        }
-        const renderer = createSubIndicatorRenderer({ indicatorId, paneId, definition, params });
-        const rendererName = renderer.name;
-        const existing = this.getRenderer(rendererName);
-        if (existing) {
-            if (params)
-                this.updateRendererConfig(rendererName, params);
-            return;
-        }
-        this.useRenderer(renderer, params);
+        this.indicatorManager.bindIndicatorToPane(paneId, indicatorId, params);
     }
     /** 更新绘图对象 */
     setDrawings(drawings) {
-        this.drawingStore.setAll(drawings);
+        this.renderer.getDrawingStore().setAll(drawings);
         this._drawingsSignal.set(drawings);
         this.scheduleDraw();
     }
     /** 更新选中的绘图 ID */
     setSelectedDrawingId(id) {
-        if (this.drawingStore.getSelectedId() === id)
+        const store = this.renderer.getDrawingStore();
+        if (store.getSelectedId() === id)
             return;
-        this.drawingStore.setSelectedId(id);
+        store.setSelectedId(id);
         this.scheduleDraw();
     }
-    /** 获取当前 pane 布局快照（含 ratio） */
     getPaneLayoutSpecs() {
-        const visible = this.opt.panes.filter(p => p.visible !== false);
-        const sum = visible.reduce((s, p) => s + (this._internalPaneRatios.get(p.id) ?? p.ratio ?? 0), 0);
-        const safeSum = sum > 0 ? sum : 1;
-        return this.opt.panes.map((spec) => {
-            const base = this._internalPaneRatios.get(spec.id) ?? spec.ratio ?? 0;
-            const ratio = spec.visible === false ? base : base / safeSum;
-            const pane = this.paneRenderers.find((r) => r.getPane().id === spec.id)?.getPane();
-            return {
-                ...spec,
-                ratio,
-                role: pane?.role ?? spec.role,
-                capabilities: pane ? { ...pane.capabilities } : spec.capabilities,
-            };
-        });
+        return this.layoutManager.getPaneLayoutSpecs();
     }
-    emitPaneLayoutChange() {
-        // 同步 pane ratios 到 signal
-        const ratios = {};
-        this._internalPaneRatios.forEach((ratio, id) => {
-            ratios[id] = ratio;
-        });
-        this._paneRatiosSignal.set(ratios);
-        this._paneLayoutSignal.set(this.getPaneLayoutSpecs());
-    }
-    applyPaneLayoutSpecs(panes) {
-        this.opt.panes = panes.map((spec) => ({ ...spec }));
-        this.syncPaneRatiosFromSpecs(this.opt.panes);
-        this.initPanes();
-        this.layoutPanes();
-        this.emitPaneLayoutChange();
-        this.scheduleDraw();
-    }
-    /**
-     * 调整相邻 pane 边界（支持连锁挤压）
-     * @param upperPaneId 上方 pane ID（边界位于此 pane 与其下方邻居之间）
-     * @param deltaY Y 方向位移（逻辑像素，正数表示边界向下，upper 增大；负数表示向上，upper 减小）
-     */
     resizePaneBoundary(upperPaneId, deltaY) {
-        // === 1. 参数校验 ===
-        if (!Number.isFinite(deltaY) || deltaY === 0)
-            return false;
-        const vp = this._internalViewport;
-        if (!vp)
-            return false;
-        // === 2. 定位相邻 pane 对（边界两侧） ===
-        const visibleSpecs = this.opt.panes.filter(p => p.visible !== false);
-        const boundaryIndex = visibleSpecs.findIndex(p => p.id === upperPaneId);
-        if (boundaryIndex < 0 || boundaryIndex >= visibleSpecs.length - 1)
-            return false;
-        const upperSpec = visibleSpecs[boundaryIndex];
-        const lowerSpec = visibleSpecs[boundaryIndex + 1];
-        if (!upperSpec || !lowerSpec)
-            return false;
-        // === 3. 收集所有 pane 当前高度 ===
-        const heights = new Map();
-        for (const spec of visibleSpecs) {
-            const renderer = this.paneRenderers.find(r => r.getPane().id === spec.id);
-            if (renderer) {
-                heights.set(spec.id, renderer.getPane().height);
-            }
-        }
-        // === 4. 连锁挤压/扩展 ===
-        // deltaY > 0: 边界下移，upper expand，lower shrink
-        // deltaY < 0: 边界上移，upper shrink，lower expand
-        const expandIdx = deltaY > 0 ? boundaryIndex : boundaryIndex + 1;
-        const shrinkIdx = deltaY > 0 ? boundaryIndex + 1 : boundaryIndex;
-        const expandDir = deltaY > 0 ? -1 : 1; // expand 方向（向边界方向找）
-        const shrinkDir = deltaY > 0 ? 1 : -1; // shrink 方向（远离边界方向找）
-        let remaining = Math.abs(deltaY);
-        // 先尝试 shrink（从 shrinkIdx 开始，沿 shrinkDir 方向连锁）
-        let shrinkCursor = shrinkIdx;
-        while (remaining > 0 && shrinkCursor >= 0 && shrinkCursor < visibleSpecs.length) {
-            const spec = visibleSpecs[shrinkCursor];
-            if (!spec)
-                break;
-            const currentH = heights.get(spec.id) ?? 0;
-            const minH = this.getPaneMinHeight(spec, vp.plotHeight);
-            const canShrink = Math.max(0, currentH - minH);
-            if (canShrink > 0) {
-                const shrink = Math.min(canShrink, remaining);
-                heights.set(spec.id, currentH - shrink);
-                remaining -= shrink;
-            }
-            // 继续向 shrinkDir 方向找下一个可 shrink 的 pane
-            if (remaining > 0) {
-                shrinkCursor += shrinkDir;
-            }
-        }
-        // 如果还有剩余（无法完全 shrink），说明拖拽无效
-        if (remaining > 0)
-            return false;
-        // 将节省的高度全部加到 expand 方
-        const expandSpec = visibleSpecs[expandIdx];
-        if (!expandSpec)
-            return false;
-        const expandCurrentH = heights.get(expandSpec.id) ?? 0;
-        heights.set(expandSpec.id, expandCurrentH + Math.abs(deltaY));
-        // === 5. 将像素高度转换为 ratio ===
-        const gap = Math.max(0, this.opt.paneGap ?? 0);
-        const totalGaps = gap * Math.max(0, visibleSpecs.length - 1);
-        const availableH = Math.max(1, vp.plotHeight - totalGaps);
-        for (const spec of visibleSpecs) {
-            const h = heights.get(spec.id) ?? 0;
-            this._internalPaneRatios.set(spec.id, h / availableH);
-        }
-        // === 6. 归一化并同步 ===
-        this.normalizeVisiblePaneRatios(visibleSpecs);
-        this.syncPaneRatiosToSpecs();
-        // === 7. 应用布局 ===
-        this.layoutPanes();
-        this.emitPaneLayoutChange();
-        this.scheduleDraw();
-        return true;
-    }
-    resolvePaneRole(spec, index) {
-        if (spec.role)
-            return spec.role;
-        return index === 0 ? 'price' : 'indicator';
+        return this.layoutManager.resizePaneBoundary(upperPaneId, deltaY);
     }
     addPane(paneId) {
-        if (this.opt.panes.some((spec) => spec.id === paneId)) {
-            console.warn(`Pane "${paneId}" already exists`);
-            return;
-        }
-        const hasPricePane = this.opt.panes.some((spec, index) => this.resolvePaneRole(spec, index) === 'price');
-        const role = hasPricePane ? 'indicator' : 'price';
-        this.applyPaneLayoutSpecs([
-            ...this.opt.panes,
-            { id: paneId, ratio: 1, visible: true, role },
-        ]);
+        this.layoutManager.addPane(paneId);
     }
-    /**
-     * 动态移除 pane
-     * @param paneId pane 标识符
-     */
     removePane(paneId) {
-        if (!this.opt.panes.some((spec) => spec.id === paneId))
-            return;
-        const next = this.opt.panes.filter((spec) => spec.id !== paneId);
-        this._internalPaneRatios.delete(paneId);
-        this.applyPaneLayoutSpecs(next);
+        this.layoutManager.removePane(paneId);
     }
-    /**
-     * 检查 pane 是否存在
-     * @param paneId pane 标识符
-     */
     hasPane(paneId) {
-        return this.opt.panes.some((spec) => spec.id === paneId);
+        return this.layoutManager.hasPane(paneId);
     }
     // ========== 副图管理 API ==========
-    /**
-     * 创建副图面板并注册指标渲染器
-     * @param paneId 副图实例标识符（如 'RSI_0', 'MACD_0'）
-     * @param indicatorId 指标类型
-     * @param params 指标参数
-     * @returns 是否创建成功
-     */
     createSubPane(paneId, indicatorId, params) {
-        // 调整 pane ratios：主图占 3，副图各占 1
-        const visibleSpecs = this.opt.panes.filter((pane) => pane.visible !== false);
-        const pricePanes = visibleSpecs.filter((pane, index) => this.resolvePaneRole(pane, index) === 'price');
-        const indicatorPanes = visibleSpecs.filter((pane, index) => this.resolvePaneRole(pane, index) === 'indicator');
-        if (pricePanes.length === 1) {
-            const pricePane = pricePanes[0];
-            if (pricePane) {
-                this._internalPaneRatios.set(pricePane.id, 3);
-            }
-            for (const pane of indicatorPanes) {
-                this._internalPaneRatios.set(pane.id, 1);
-            }
-            this._internalPaneRatios.set(paneId, 1);
-        }
-        else {
-            this._internalPaneRatios.set(paneId, 1);
-        }
-        this.upsertPane({ id: paneId, ratio: this._internalPaneRatios.get(paneId) ?? 1, visible: true, role: 'indicator' });
-        const success = this.subPaneManager.create(this, paneId, indicatorId, params ?? this.getDefaultSubPaneParams(indicatorId));
-        return success;
+        return this.indicatorManager.createSubPane(paneId, indicatorId, params);
     }
-    /**
-     * 移除副图面板及其渲染器
-     * @param paneId 副图实例标识符
-     */
     removeSubPane(paneId) {
-        this.subPaneManager.remove(this, paneId);
+        this.indicatorManager.removeSubPane(paneId);
     }
-    /**
-     * 替换副图的指标类型
-     * @param paneId 副图实例标识符
-     * @param newIndicatorId 新的指标类型
-     * @param params 新指标参数
-     */
     replaceSubPaneIndicator(paneId, newIndicatorId, params) {
-        this.subPaneManager.replaceIndicator(this, paneId, newIndicatorId, params ?? this.getDefaultSubPaneParams(newIndicatorId));
+        this.indicatorManager.replaceSubPaneIndicator(paneId, newIndicatorId, params);
     }
-    /**
-     * 更新副图指标参数
-     * @param paneId 副图实例标识符
-     * @param params 新参数
-     */
     updateSubPaneParams(paneId, params) {
-        this.subPaneManager.updateParams(this, paneId, params);
+        this.indicatorManager.updateSubPaneParams(paneId, params);
     }
-    /**
-     * 清除所有副图面板
-     */
     clearSubPanes() {
-        // 获取所有副图 paneId
-        const subPaneIds = this.subPaneManager.getPaneIds();
-        if (subPaneIds.length === 0)
-            return;
-        // 移除所有副图
-        this.subPaneManager.clear(this);
-        // 清理 pane ratios
-        for (const paneId of subPaneIds) {
-            this._internalPaneRatios.delete(paneId);
-        }
-        // 更新布局，移除所有副图 pane
-        this.applyPaneLayoutSpecs(this.opt.panes.filter((spec) => !subPaneIds.includes(spec.id)));
+        this.indicatorManager.clearSubPanes();
     }
-    /**
-     * 获取当前所有副图指标类型
-     * @deprecated 使用 getSubPaneEntries 获取完整信息
-     */
     getSubPaneIndicators() {
-        return this.subPaneManager.getAll().map((entry) => entry.indicatorId);
+        return this.indicatorManager.getSubPaneIndicators();
     }
-    /**
-     * 获取所有副图条目
-     */
     getSubPaneEntries() {
-        return this.subPaneManager.getAll();
+        return this.indicatorManager.getSubPaneEntries();
     }
-    /**
-     * 根据 paneId 获取副图条目
-     * @param paneId 副图实例标识符
-     */
     getSubPaneEntry(paneId) {
-        return this.subPaneManager.getByPaneId(paneId);
+        return this.indicatorManager.getSubPaneEntry(paneId);
     }
     getDefaultSubPaneParams(indicatorId) {
         // 默认参数定义在 SubPaneManager 中，这里导入使用
@@ -1301,8 +458,6 @@ export class Chart {
         };
         return { ...(defaults[indicatorId] ?? {}) };
     }
-    /** 副图渲染器名称前缀（保留向后兼容） */
-    static SUB_PANE_PREFIX = 'sub_';
     /**
      * 平移价格轴（用于主图区域上下拖动）
      * @param paneId 目标 pane ID
@@ -1358,143 +513,48 @@ export class Chart {
      * @param data K 线数据数组
      */
     updateData(data) {
-        this._internalData = data ?? [];
-        this._dataSignal.set([...this._internalData]);
-        // 重算 DOM scrollLeft 状态, 防止左右滚动超出数据长度范围
-        const container = this.dom.container;
-        if (container) {
-            const minScrollLeft = this.getLeftLoadBufferWidth();
-            if (this.cachedScrollLeft < minScrollLeft) {
-                this.cachedScrollLeft = minScrollLeft;
-                this._pendingScrollLeft = minScrollLeft;
-            }
-            const contentWidth = this.getContentWidth();
-            const maxScrollLeft = Math.max(0, contentWidth - container.clientWidth);
-            if (this.cachedScrollLeft > maxScrollLeft) {
-                this.cachedScrollLeft = maxScrollLeft;
-                this._pendingScrollLeft = maxScrollLeft;
-            }
-        }
-        // 重置交互状态
-        this.interaction.reset();
-        // 如果 visibleRange 还是 {0,0}，先从 viewport 算一个初步范围
-        // 避免 scheduler 第一次计算时用 {0,0} 产出 Infinity 极值
-        if (this.lastVisibleRange.start === 0 && this.lastVisibleRange.end === 0 && this._internalData.length > 0) {
-            const plotWidth = this.observedSize.width > 0
-                ? this.observedSize.width
-                : Math.max(1, Math.round(this.dom.container?.clientWidth ?? 800));
-            const dpr = this.getEffectiveDpr();
-            const { start, end } = getVisibleRange(this.getLogicalScrollLeft(), plotWidth, this.opt.kWidth, this.opt.kGap, this._internalData.length, dpr);
-            this.lastRawVisibleRange = { start, end };
-            this.lastVisibleRange = { start: Math.max(0, start), end };
-        }
-        // 触发指标计算（在 scheduleDraw 之前，确保渲染器读到最新状态）
-        const indicatorsReady = this.indicatorScheduler.update(this._internalData, this.lastVisibleRange);
-        if (indicatorsReady) {
-            this.pendingIndicatorDataUpdate = false;
-            this.scheduleDraw();
-        }
-        else {
-            this.pendingIndicatorDataUpdate = true;
-        }
+        this.dataManager.updateData(data);
     }
     /** 获取当前数据源（供 renderers 和 interaction 使用） */
     getData() {
-        return this._internalData;
+        return this.dataManager.getData();
     }
     /** 获取指标调度器（供外部控制器更新指标配置） */
     getIndicatorScheduler() {
-        return this.indicatorScheduler;
-    }
-    getTrailingSlotCount() {
-        return 24;
+        return this.indicatorManager.indicatorSchedulerAccessor;
     }
     getLogicalSlotCount() {
-        return this._internalData.length + this.getTrailingSlotCount();
+        return this.dataManager.getLogicalSlotCount();
     }
     getTimestampAtLogicalIndex(index) {
-        if (!Number.isInteger(index) || index < 0 || index >= this._internalData.length)
-            return null;
-        return this._internalData[index]?.timestamp ?? null;
+        return this.dataManager.getTimestampAtLogicalIndex(index);
     }
     /** 根据视口内 X 坐标反查逻辑索引（允许超出最后一根 K 线） */
     getLogicalIndexAtX(mouseX) {
-        const vp = this._internalViewport;
-        if (!vp || this._internalData.length === 0)
-            return null;
-        const dpr = this.getEffectiveDpr();
-        const { startXPx, unitPx } = getPhysicalKLineConfig(this.opt.kWidth, this.opt.kGap, dpr);
-        const worldX = Math.round((vp.scrollLeft + mouseX) * dpr);
-        const index = Math.floor((worldX - startXPx) / unitPx);
-        if (index < 0)
-            return null;
-        return index;
+        return this.dataManager.getLogicalIndexAtX(mouseX);
     }
     /** 根据视口内 X 坐标反查数据索引（用于绘图落点） */
     getDataIndexAtX(mouseX) {
-        const index = this.getLogicalIndexAtX(mouseX);
-        if (index === null || index >= this._internalData.length)
-            return null;
-        return index;
+        return this.dataManager.getDataIndexAtX(mouseX);
     }
-    static LEADING_SLOTS = 60;
-    static TRAILING_DRAWING_SLOTS = 24;
     /** 获取内容总宽度（用于外部 scroll-content 撑开 scrollWidth） */
     getContentWidth() {
-        const dataLength = this._internalData.length;
-        if (dataLength === 0)
-            return 0;
-        const kWidth = this.opt.kWidth;
-        const kGap = this.opt.kGap;
-        const viewWidth = this._internalViewport?.plotWidth ?? 0;
-        const dpr = this.getEffectiveDpr();
-        const { startXPx, unitPx } = getPhysicalKLineConfig(kWidth, kGap, dpr);
-        const dataPlotWidth = (startXPx + (Chart.LEADING_SLOTS + dataLength + Chart.TRAILING_DRAWING_SLOTS) * unitPx) / dpr;
-        return this.getLeftLoadBufferWidth() + Math.max(dataPlotWidth, viewWidth);
+        return this.dataManager.getContentWidth();
     }
     /** 滚动到最右侧（最新数据位置） */
     scrollToRight() {
-        const container = this.dom.container;
-        if (!container || this._internalData.length === 0)
-            return;
-        const dpr = this.getEffectiveDpr();
-        const { unitPx, startXPx } = getPhysicalKLineConfig(this.opt.kWidth, this.opt.kGap, dpr);
-        const lastKLineEndPx = (startXPx + this._internalData.length * unitPx) / dpr;
-        const target = this.getLeftLoadBufferWidth() + Math.max(0, lastKLineEndPx - container.clientWidth);
-        const maxScroll = Math.max(0, container.scrollWidth - container.clientWidth);
-        container.scrollLeft = Math.round(Math.min(target, maxScroll) * dpr) / dpr;
-        this.cachedScrollLeft = container.scrollLeft;
-    }
-    getLeftLoadBufferWidth() {
-        if (this._internalData.length === 0) {
-            this.leftLoadBufferWidth = 0;
-            return 0;
-        }
-        const plotWidth = this._internalViewport?.plotWidth
-            ?? (this.observedSize.width > 0 ? this.observedSize.width : undefined)
-            ?? Math.round(this.dom.container?.clientWidth ?? 0);
-        this.leftLoadBufferWidth = Math.max(0, plotWidth);
-        return this.leftLoadBufferWidth;
-    }
-    computeRawVisibleRange() {
-        if (this._internalData.length === 0)
-            return null;
-        const vp = this._internalViewport ?? this.computeViewport();
-        if (!vp)
-            return null;
-        return getVisibleRange(vp.scrollLeft, vp.plotWidth, this.opt.kWidth, this.opt.kGap, this._internalData.length, vp.dpr);
+        this.dataManager.scrollToRight();
     }
     /** 容器尺寸变化时调用 */
     resize() {
-        const vp = this.computeViewport();
+        const vp = this.viewportManager.computeViewport();
         // 防御性检查：容器尺寸无效时跳过布局
         if (!vp || vp.viewWidth < 10 || vp.viewHeight < 10) {
             return;
         }
-        this.cachedDrawFrame = null;
-        this.layoutPanes();
-        this.emitPaneLayoutChange();
-        this.updateViewportSignal();
+        this.renderer.clearCachedFrame();
+        this.layoutManager.layoutPanes();
+        this.viewportManager.updateViewportSignal();
         this.scheduleDraw();
     }
     /**
@@ -1502,371 +562,22 @@ export class Chart {
      * @param level 更新级别，默认为 All
      */
     scheduleDraw(level = UpdateLevel.All) {
-        // 合并更新级别：如果已有更高级别的调度，保持高级别
-        if (this.raf !== null) {
-            // 已有 All 级别调度，任何新请求都忽略
-            if (this.pendingUpdateLevel === UpdateLevel.All)
-                return;
-            // 新请求是 All，覆盖之前的 Main/Overlay
-            if (level === UpdateLevel.All) {
-                this.pendingUpdateLevel = UpdateLevel.All;
-                return;
-            }
-            // Main + Overlay = All
-            if ((this.pendingUpdateLevel === UpdateLevel.Main && level === UpdateLevel.Overlay) ||
-                (this.pendingUpdateLevel === UpdateLevel.Overlay && level === UpdateLevel.Main)) {
-                this.pendingUpdateLevel = UpdateLevel.All;
-                return;
-            }
-            // 同级别或更低级别，忽略
-            return;
-        }
-        this.pendingUpdateLevel = level;
-        this.raf = requestAnimationFrame(() => {
-            this.raf = null;
-            const levelToDraw = this.pendingUpdateLevel;
-            this.pendingUpdateLevel = UpdateLevel.All; // 重置为默认值
-            this.draw(levelToDraw);
-            if (this._pendingScrollLeft !== null) {
-                const c = this.dom.container;
-                if (c) {
-                    c.scrollLeft = this._pendingScrollLeft;
-                    this.cachedScrollLeft = c.scrollLeft;
-                    this._pendingScrollLeft = null;
-                }
-            }
-        });
+        this.renderer.scheduleDraw(level);
     }
     /** 销毁图表实例 */
     async destroy() {
-        if (this.raf !== null) {
-            cancelAnimationFrame(this.raf);
-            this.raf = null;
-        }
-        if (this._dataBufferUnsub) {
-            this._dataBufferUnsub();
-            this._dataBufferUnsub = null;
-        }
-        this.clearIncrementalLoadHintTimer();
-        this.incrementalLoadHintEl?.remove();
-        this.incrementalLoadHintEl = null;
-        this.pendingPrependedCount = 0;
-        this._dataBuffer.dispose();
-        this.clearComparisonBuffers();
-        // 清理尺寸观察器
-        this.resizeObserver?.disconnect();
-        this.resizeObserver = undefined;
-        this.preciseDpr = 0;
-        this.observedSize = { width: 0, height: 0 };
-        // 清理 scroll 监听
-        if (this.onScroll) {
-            this.dom.container?.removeEventListener('scroll', this.onScroll);
-            this.onScroll = undefined;
-        }
-        this._internalViewport = null;
-        this.cachedDrawFrame = null;
-        this.xAxisCtx = null;
-        this.paneRenderers.forEach((r) => r.destroy());
-        this.paneRenderers = [];
+        this.renderer.destroy();
+        this.dataManager.destroy();
+        this.viewportManager.destroy();
+        this.layoutManager.destroy();
         this.sharedWebGLSurface.destroy();
-        // 清理渲染器插件管理器（会调用所有 onUninstall）
-        this.rendererPluginManager.clear();
-        this.indicatorScheduler.destroy();
+        this.indicatorManager.destroy();
         await this.pluginHost.destroy();
     }
-    /** 初始化所有 pane */
-    initPanes() {
-        this.paneRenderers = this.opt.panes.map((spec, index) => {
-            const pane = new Pane(spec.id, {
-                role: this.resolvePaneRole(spec, index),
-                capabilities: spec.capabilities,
-            });
-            const mainCanvas = document.createElement('canvas');
-            const overlayCanvas = document.createElement('canvas');
-            const yAxisCanvas = document.createElement('canvas');
-            const isMain = pane.role === 'price';
-            // Main Canvas - K线、指标、网格
-            mainCanvas.id = `${spec.id}-main`;
-            mainCanvas.className = isMain ? 'main-canvas main' : 'main-canvas sub';
-            mainCanvas.style.position = 'absolute';
-            mainCanvas.style.left = '0';
-            mainCanvas.style.top = '0';
-            // Overlay Canvas - 十字线、Tooltip（透明，事件穿透）
-            overlayCanvas.id = `${spec.id}-overlay`;
-            overlayCanvas.className = 'overlay-canvas';
-            overlayCanvas.style.position = 'absolute';
-            overlayCanvas.style.left = '0';
-            overlayCanvas.style.top = '0';
-            overlayCanvas.style.pointerEvents = 'none'; // 事件穿透到 mainCanvas
-            overlayCanvas.style.backgroundColor = 'transparent';
-            yAxisCanvas.id = `${spec.id}-yAxis`;
-            yAxisCanvas.className = 'right-axis';
-            yAxisCanvas.style.position = 'absolute';
-            yAxisCanvas.style.left = '0';
-            const renderer = new PaneRenderer({ mainCanvas, overlayCanvas, yAxisCanvas }, pane, {
-                rightAxisWidth: this.opt.rightAxisWidth,
-                yPaddingPx: this.opt.yPaddingPx,
-                priceLabelWidth: this.opt.priceLabelWidth,
-            }, this.sharedWebGLSurface);
-            return renderer;
-        });
-        const canvasLayer = this.dom.canvasLayer;
-        const rightAxisLayer = this.dom.rightAxisLayer;
-        if (canvasLayer) {
-            const existingCanvases = canvasLayer.querySelectorAll('canvas:not(.x-axis-canvas)');
-            existingCanvases.forEach((canvas) => canvas.remove());
-        }
-        if (rightAxisLayer) {
-            const existingAxisCanvases = rightAxisLayer.querySelectorAll('canvas.right-axis');
-            existingAxisCanvases.forEach((canvas) => canvas.remove());
-        }
-        this.paneRenderers.forEach((renderer) => {
-            const dom = renderer.getDom();
-            // 先添加 mainCanvas，再添加 overlayCanvas（overlay 在上层）
-            canvasLayer.appendChild(dom.mainCanvas);
-            canvasLayer.appendChild(dom.overlayCanvas);
-            rightAxisLayer.appendChild(dom.yAxisCanvas);
-        });
-        this.rendererPluginManager.setKnownPaneIds(this.paneRenderers.map((renderer) => renderer.getPane().id));
-    }
-    syncPaneRatiosFromSpecs(specs) {
-        const next = new Map();
-        for (const spec of specs) {
-            const prev = this._internalPaneRatios.get(spec.id);
-            const incoming = Number.isFinite(spec.ratio) ? spec.ratio : 0;
-            const ratio = prev !== undefined ? prev : (incoming > 0 ? incoming : 1);
-            next.set(spec.id, ratio);
-        }
-        this._internalPaneRatios = next;
-        this.normalizeVisiblePaneRatios(specs);
-        this.syncPaneRatiosToSpecs();
-    }
-    syncPaneRatiosToSpecs() {
-        const visible = this.opt.panes.filter(p => p.visible !== false);
-        const visibleSum = visible.reduce((s, p) => s + (this._internalPaneRatios.get(p.id) ?? p.ratio ?? 0), 0);
-        const safeVisibleSum = visibleSum > 0 ? visibleSum : 1;
-        this.opt.panes = this.opt.panes.map((spec) => {
-            const ratio = this._internalPaneRatios.get(spec.id) ?? spec.ratio ?? 0;
-            if (spec.visible === false) {
-                return { ...spec, ratio };
-            }
-            return { ...spec, ratio: ratio / safeVisibleSum };
-        });
-    }
-    normalizeVisiblePaneRatios(specs) {
-        const visible = specs.filter(p => p.visible !== false);
-        if (visible.length === 0)
-            return;
-        let sum = 0;
-        for (const spec of visible) {
-            const raw = this._internalPaneRatios.get(spec.id) ?? spec.ratio ?? 0;
-            const safe = Number.isFinite(raw) && raw > 0 ? raw : 0;
-            this._internalPaneRatios.set(spec.id, safe);
-            sum += safe;
-        }
-        if (sum <= 0) {
-            const equal = 1 / visible.length;
-            for (const spec of visible) {
-                this._internalPaneRatios.set(spec.id, equal);
-            }
-            return;
-        }
-        for (const spec of visible) {
-            const v = this._internalPaneRatios.get(spec.id) ?? 0;
-            this._internalPaneRatios.set(spec.id, v / sum);
-        }
-    }
-    getPaneMinHeight(spec, plotHeight) {
-        const fallback = this.opt.defaultPaneMinHeightPx ?? 120; // 最小高度
-        const raw = spec.minHeightPx ?? fallback;
-        return Math.max(1, Math.min(Math.round(raw), Math.max(1, plotHeight)));
-    }
-    computePaneHeightsByRatio(visibleSpecs, availableH) {
-        if (visibleSpecs.length === 0)
-            return [];
-        const ratios = visibleSpecs.map(spec => this._internalPaneRatios.get(spec.id) ?? spec.ratio ?? 0);
-        const ratioSum = ratios.reduce((s, r) => s + (r > 0 ? r : 0), 0);
-        const safeRatios = ratioSum > 0
-            ? ratios.map(r => (r > 0 ? r : 0) / ratioSum)
-            : visibleSpecs.map(() => 1 / visibleSpecs.length);
-        const heights = safeRatios.map(r => Math.max(1, Math.round(availableH * r)));
-        const mins = visibleSpecs.map(spec => this.getPaneMinHeight(spec, availableH));
-        for (let i = 0; i < heights.length; i++) {
-            heights[i] = Math.max(heights[i], Math.min(mins[i], availableH));
-        }
-        let total = heights.reduce((s, h) => s + h, 0);
-        if (total > availableH) {
-            let overflow = total - availableH;
-            while (overflow > 0) {
-                let shrunk = false;
-                for (let i = heights.length - 1; i >= 0 && overflow > 0; i--) {
-                    const minH = Math.max(1, Math.min(mins[i], availableH));
-                    const h = heights[i];
-                    if (h > minH) {
-                        heights[i] = h - 1;
-                        overflow--;
-                        shrunk = true;
-                    }
-                }
-                if (!shrunk)
-                    break;
-            }
-        }
-        else if (total < availableH) {
-            heights[heights.length - 1] = (heights[heights.length - 1] ?? 1) + (availableH - total);
-        }
-        total = heights.reduce((s, h) => s + h, 0);
-        if (total !== availableH && heights.length > 0) {
-            heights[heights.length - 1] = Math.max(1, (heights[heights.length - 1] ?? 1) + (availableH - total));
-        }
-        return heights;
-    }
-    /** 计算每个 pane 的布局（top 和 height） */
-    layoutPanes() {
-        const vp = this._internalViewport;
-        if (!vp)
-            return;
-        const visibleSpecs = this.opt.panes.filter(p => p.visible !== false);
-        if (visibleSpecs.length === 0)
-            return;
-        const gap = Math.max(0, this.opt.paneGap ?? 0);
-        let y = 0;
-        const totalGaps = gap * Math.max(0, visibleSpecs.length - 1);
-        const availableH = Math.max(1, vp.plotHeight - totalGaps);
-        this.normalizeVisiblePaneRatios(visibleSpecs);
-        const paneHeights = this.computePaneHeightsByRatio(visibleSpecs, availableH);
-        for (let i = 0; i < visibleSpecs.length; i++) {
-            const spec = visibleSpecs[i];
-            if (!spec)
-                continue;
-            const renderer = this.paneRenderers.find(r => r.getPane().id === spec.id);
-            if (!renderer)
-                continue;
-            const pane = renderer.getPane();
-            const h = paneHeights[i] ?? 1;
-            pane.setLayout(y, h);
-            pane.setPadding(this.opt.yPaddingPx, this.opt.yPaddingPx);
-            renderer.resize(vp.plotWidth, h, vp.dpr);
-            renderer.setWebGLRegion({
-                x: 0,
-                y,
-                width: vp.plotWidth,
-                height: h,
-                dpr: vp.dpr,
-            });
-            this.rendererPluginManager.notifyResize(pane.id, wrapPaneInfo(pane));
-            const dom = renderer.getDom();
-            dom.mainCanvas.style.top = `${y}px`;
-            dom.overlayCanvas.style.top = `${y}px`;
-            dom.yAxisCanvas.style.top = `${y}px`;
-            dom.yAxisCanvas.style.left = '0px';
-            y += h + gap;
-        }
-        // 按实际像素高度回写 ratio，确保后续 resize 视觉比例稳定
-        const finalAvailable = Math.max(1, availableH);
-        for (const spec of visibleSpecs) {
-            const renderer = this.paneRenderers.find(r => r.getPane().id === spec.id);
-            if (!renderer)
-                continue;
-            const h = renderer.getPane().height;
-            this._internalPaneRatios.set(spec.id, h / finalAvailable);
-        }
-        this.normalizeVisiblePaneRatios(visibleSpecs);
-        this.syncPaneRatiosToSpecs();
-    }
     computeViewport() {
-        const container = this.dom.container;
-        if (!container)
-            return null;
-        const observedWidth = this.observedSize.width;
-        const observedHeight = this.observedSize.height;
-        const viewWidth = observedWidth > 0
-            ? observedWidth
-            : Math.max(1, Math.round(container.clientWidth));
-        const viewHeight = observedHeight > 0
-            ? observedHeight
-            : Math.max(1, Math.round(container.clientHeight));
-        const plotWidth = Math.round(viewWidth);
-        const plotHeight = Math.round(viewHeight - this.opt.bottomAxisHeight);
-        let dpr = this.getEffectiveDpr();
-        const MAX_CANVAS_PIXELS = 16 * 1024 * 1024;
-        const requestedPixels = viewWidth * dpr * (viewHeight * dpr);
-        if (requestedPixels > MAX_CANVAS_PIXELS) {
-            dpr = Math.sqrt(MAX_CANVAS_PIXELS / (viewWidth * viewHeight));
-        }
-        // 对齐 scrollLeft，消除 translate 亚像素偏移
-        const scrollLeft = Math.round(this.getLogicalScrollLeft() * dpr) / dpr;
-        const canvasLayerWidth = `${viewWidth}px`;
-        if (this.dom.canvasLayer.style.width !== canvasLayerWidth) {
-            this.dom.canvasLayer.style.width = canvasLayerWidth;
-        }
-        const canvasLayerHeight = `${viewHeight}px`;
-        if (this.dom.canvasLayer.style.height !== canvasLayerHeight) {
-            this.dom.canvasLayer.style.height = canvasLayerHeight;
-        }
-        const xAxisWidth = Math.round(plotWidth * dpr);
-        if (this.dom.xAxisCanvas.width !== xAxisWidth) {
-            this.dom.xAxisCanvas.width = xAxisWidth;
-        }
-        const xAxisHeight = Math.round(this.opt.bottomAxisHeight * dpr);
-        if (this.dom.xAxisCanvas.height !== xAxisHeight) {
-            this.dom.xAxisCanvas.height = xAxisHeight;
-        }
-        const xAxisCssWidth = `${xAxisWidth / dpr}px`;
-        if (this.dom.xAxisCanvas.style.width !== xAxisCssWidth) {
-            this.dom.xAxisCanvas.style.width = xAxisCssWidth;
-        }
-        const xAxisCssHeight = `${xAxisHeight / dpr}px`;
-        if (this.dom.xAxisCanvas.style.height !== xAxisCssHeight) {
-            this.dom.xAxisCanvas.style.height = xAxisCssHeight;
-        }
-        this.sharedWebGLSurface.resize(plotWidth, plotHeight, dpr);
-        const vp = {
-            viewWidth,
-            viewHeight,
-            plotWidth,
-            plotHeight,
-            scrollLeft,
-            dpr,
-        };
-        const prevViewport = this._internalViewport;
-        const viewportChanged = !prevViewport
-            || prevViewport.viewWidth !== vp.viewWidth
-            || prevViewport.viewHeight !== vp.viewHeight
-            || prevViewport.plotWidth !== vp.plotWidth
-            || prevViewport.plotHeight !== vp.plotHeight
-            || prevViewport.scrollLeft !== vp.scrollLeft
-            || prevViewport.dpr !== vp.dpr;
-        this._internalViewport = vp;
-        if (viewportChanged) {
-            const current = this._viewportSignal.peek();
-            this._viewportSignal.set({
-                zoomLevel: current.zoomLevel,
-                plotWidth: vp.plotWidth,
-                plotHeight: vp.plotHeight,
-                dpr: vp.dpr > 0 ? vp.dpr : current.dpr,
-                visibleFrom: current.visibleFrom,
-                visibleTo: current.visibleTo,
-                kWidth: current.kWidth,
-                kGap: current.kGap,
-            });
-        }
-        return vp;
+        return this.viewportManager.computeViewport();
     }
     // ==================== Facade API (High-level interface for adapters) ====================
-    // ---------- Signals ----------
-    _viewportSignal = createSignal({
-        zoomLevel: 1,
-        plotWidth: 0,
-        plotHeight: 0,
-        dpr: 1,
-        visibleFrom: 0,
-        visibleTo: 0,
-        kWidth: 0,
-        kGap: 1,
-    });
-    _dataSignal = createSignal([]);
-    _symbolsSignal = createSignal([]);
     _themeSignal = createSignal('light');
     _drawingToolSignal = createSignal(null);
     _drawingsSignal = createSignal([]);
@@ -1888,46 +599,25 @@ export class Chart {
         hoveredPaneBoundaryId: null,
         isHoveringRightAxis: false,
     });
-    _indicatorsComputed = computed(() => {
-        const mainIndicators = [...this._mainIndicatorsSignal().entries()].map(([id, entry]) => ({
-            id,
-            definitionId: id,
-            label: id,
-            name: id,
-            role: 'main',
-            params: { ...entry.params },
-        }));
-        const subIndicators = this.subPaneManager.entriesSignal().map(entry => ({
-            id: entry.paneId,
-            definitionId: entry.indicatorId,
-            label: entry.indicatorId,
-            name: entry.indicatorId,
-            role: 'sub',
-            paneId: entry.paneId,
-            params: { ...entry.params },
-        }));
-        return [...mainIndicators, ...subIndicators];
-    });
-    _subPanesComputed = computed(() => {
-        const ratios = this._paneRatiosSignal();
-        return this.subPaneManager.entriesSignal().map(entry => ({
-            paneId: entry.paneId,
-            indicatorId: entry.indicatorId,
-            params: { ...entry.params },
-            ratio: ratios[entry.paneId] ?? 1,
-        }));
-    });
     /** 视口状态信号 */
     get viewport() {
-        return this._viewportSignal;
+        return this.viewportManager.viewportSignal;
     }
     /** 数据信号 */
     get data() {
-        return this._dataSignal;
+        return this.dataManager.data;
     }
     /** 符号信号 */
     get symbols() {
-        return this._symbolsSignal;
+        return this.dataManager.symbols;
+    }
+    /** 比较商品颜色信号 */
+    get comparisonColors() {
+        return this.dataManager.comparisonColors;
+    }
+    /** 比较商品加载信号 */
+    get comparisonLoading() {
+        return this.dataManager.comparisonLoading;
     }
     /** 主题信号 */
     get theme() {
@@ -1935,11 +625,11 @@ export class Chart {
     }
     /** 指标实例列表信号（派生信号，自动随主/副图状态更新） */
     get indicators() {
-        return this._indicatorsComputed;
+        return this.indicatorManager.indicatorsComputed;
     }
     /** 子图信息信号（派生信号，自动随副图条目/比例更新） */
     get subPanes() {
-        return this._subPanesComputed;
+        return this.indicatorManager.subPanesComputed;
     }
     /** 当前绘图工具信号 */
     get drawingTool() {
@@ -1961,220 +651,29 @@ export class Chart {
         return this._interactionSignal;
     }
     // ---------- Data ----------
-    /**
-     * 设置数据（高层 API）
-     * 内部调用 updateData，并更新 data signal
-     */
     setData(data) {
-        this.updateData(data);
+        this.dataManager.setData(data);
     }
-    /**
-     * 追加数据（高层 API）
-     * 合并现有数据并更新
-     */
     appendData(newData) {
-        const merged = [...this._internalData, ...newData];
-        this.setData(merged);
+        this.dataManager.appendData(newData);
     }
-    /**
-     * 设置数据获取器适配器
-     */
     setDataFetcher(fetcher) {
-        this._dataFetcher = fetcher;
-        this._dataBuffer.setFetcher(fetcher);
-        for (const buffer of this._comparisonBuffers.values()) {
-            buffer.setFetcher(fetcher);
-        }
+        this.dataManager.setDataFetcher(fetcher);
     }
     get dataBuffer() {
-        return this._dataBuffer;
+        return this.dataManager.dataBuffer;
     }
     checkVisibleRangeGap() {
-        if (this._internalData.length === 0)
-            return;
-        const window = this._dataBuffer.loadedWindow;
-        if (!window)
-            return;
-        const range = this.computeRawVisibleRange() ?? this.lastRawVisibleRange;
-        if (range.start < 0 && this._dataFetcher) {
-            const MS_PER_DAY = 86_400_000;
-            const earlierThanEarliest = window.earliestTs - 90 * MS_PER_DAY;
-            this._dataBuffer.ensureRange(earlierThanEarliest, window.earliestTs);
-            return;
-        }
-        if (range.start >= this._internalData.length)
-            return;
-        const firstVisibleTs = this._internalData[Math.max(0, range.start)]?.timestamp;
-        if (firstVisibleTs === undefined)
-            return;
-        if (firstVisibleTs < window.earliestTs) {
-            this._dataBuffer.ensureRange(firstVisibleTs, window.earliestTs);
-        }
+        this.dataManager.checkVisibleRangeGap();
     }
-    checkVisibleRangeGapWhenIdle() {
-        if (this.interaction.isPointerDown())
-            return;
-        this.checkVisibleRangeGap();
-    }
-    getComparisonEquivalentPriceRange(range) {
-        if (this._comparisonSpecs.length === 0 || this._comparisonData.size === 0)
-            return null;
-        const baseIndex = Math.max(0, range.start);
-        const mainBase = this._internalData[baseIndex]?.close;
-        const baseTimestamp = this._internalData[baseIndex]?.timestamp;
-        if (!Number.isFinite(mainBase) || mainBase <= 0 || baseTimestamp === undefined)
-            return null;
-        let min = Number.POSITIVE_INFINITY;
-        let max = Number.NEGATIVE_INFINITY;
-        for (const spec of this._comparisonSpecs) {
-            const data = this._comparisonData.get(spec.symbol);
-            if (!data?.length)
-                continue;
-            const baseline = this.findComparisonBaseline(data, baseTimestamp);
-            if (!baseline || !Number.isFinite(baseline.close) || baseline.close <= 0)
-                continue;
-            const byTimestamp = new Map();
-            for (const item of data)
-                byTimestamp.set(item.timestamp, item);
-            for (let i = Math.max(0, range.start); i < range.end && i < this._internalData.length; i++) {
-                const mainItem = this._internalData[i];
-                if (!mainItem)
-                    continue;
-                const item = byTimestamp.get(mainItem.timestamp);
-                if (!item || !Number.isFinite(item.close))
-                    continue;
-                const pct = (item.close - baseline.close) / baseline.close;
-                const equivalentPrice = mainBase * (1 + pct);
-                if (!Number.isFinite(equivalentPrice))
-                    continue;
-                min = Math.min(min, equivalentPrice);
-                max = Math.max(max, equivalentPrice);
-            }
-        }
-        if (!Number.isFinite(min) || !Number.isFinite(max))
-            return null;
-        return { min, max };
-    }
-    findComparisonBaseline(data, timestamp) {
-        for (const item of data) {
-            if (item.timestamp >= timestamp)
-                return item;
-        }
-        return null;
-    }
-    mergeNumericRanges(left, right) {
-        if (!left)
-            return right ?? null;
-        if (!right)
-            return left;
-        return {
-            min: Math.min(left.min, right.min),
-            max: Math.max(left.max, right.max),
-        };
+    setSymbols(specs) {
+        this.dataManager.setSymbols(specs);
     }
-    syncComparisonBuffers(specs) {
-        this._comparisonSpecs = [...specs];
-        const nextKeys = new Set(specs.map((spec) => spec.symbol));
-        for (const [key, buffer] of this._comparisonBuffers) {
-            if (nextKeys.has(key))
-                continue;
-            this._comparisonBufferUnsubs.get(key)?.();
-            this._comparisonBufferUnsubs.delete(key);
-            buffer.dispose();
-            this._comparisonBuffers.delete(key);
-            this._comparisonData.delete(key);
-        }
-        if (!this._dataFetcher)
-            return;
-        for (const spec of specs) {
-            const key = spec.symbol;
-            let buffer = this._comparisonBuffers.get(key);
-            if (!buffer) {
-                const newBuffer = new DataBuffer();
-                newBuffer.setFetcher(this._dataFetcher);
-                this._comparisonBuffers.set(key, newBuffer);
-                const unsubscribe = newBuffer.data.subscribe(() => {
-                    this._comparisonData.set(key, [...newBuffer.data.peek()]);
-                    this.scheduleDraw();
-                });
-                this._comparisonBufferUnsubs.set(key, unsubscribe);
-                buffer = newBuffer;
-            }
-            else {
-                buffer.setFetcher(this._dataFetcher);
-            }
-            buffer.setSymbol(spec);
-        }
+    addComparisonSymbol(spec) {
+        this.dataManager.addComparisonSymbol(spec);
     }
-    clearComparisonBuffers() {
-        for (const unsubscribe of this._comparisonBufferUnsubs.values())
-            unsubscribe();
-        this._comparisonBufferUnsubs.clear();
-        for (const buffer of this._comparisonBuffers.values())
-            buffer.dispose();
-        this._comparisonBuffers.clear();
-        this._comparisonData.clear();
-        this._comparisonSpecs = [];
-    }
-    /**
-     * 设置当前符号并触发数据加载
-     */
-    setSymbols(specs) {
-        this._symbolsSignal.set(specs);
-        if (specs.length === 0) {
-            this.clearComparisonBuffers();
-            return;
-        }
-        const spec = specs[0];
-        this.syncComparisonBuffers(specs.slice(1));
-        if (!this._dataFetcher)
-            return;
-        this._dataBuffer.setFetcher(this._dataFetcher);
-        this._dataBuffer.onPrepend = (count) => {
-            this.pendingPrependedCount = count;
-            const dpr = this.getEffectiveDpr();
-            const { unitPx } = getPhysicalKLineConfig(this.opt.kWidth, this.opt.kGap, dpr);
-            const compensation = (count * unitPx) / dpr;
-            const container = this.dom.container;
-            if (container) {
-                container.scrollLeft += compensation;
-                this.cachedScrollLeft = container.scrollLeft;
-            }
-        };
-        if (!this._dataBufferUnsub) {
-            this._dataBufferUnsub = this._dataBuffer.data.subscribe(() => {
-                const bufferData = this._dataBuffer.data.peek();
-                this._internalData = [...bufferData];
-                this._dataSignal.set([...this._internalData]);
-                const prependedCount = this.pendingPrependedCount;
-                this.pendingPrependedCount = 0;
-                if (this.cachedScrollLeft < this.getLeftLoadBufferWidth()) {
-                    const desiredScrollLeft = this.getLeftLoadBufferWidth();
-                    this.cachedScrollLeft = desiredScrollLeft;
-                    this._pendingScrollLeft = desiredScrollLeft;
-                }
-                this.interaction.reset();
-                if (this.lastVisibleRange.start === 0 && this.lastVisibleRange.end === 0 && this._internalData.length > 0) {
-                    const plotWidth = this.observedSize.width > 0
-                        ? this.observedSize.width
-                        : Math.max(1, Math.round(this.dom.container?.clientWidth ?? 800));
-                    const dpr = this.getEffectiveDpr();
-                    const { start, end } = getVisibleRange(this.getLogicalScrollLeft(), plotWidth, this.opt.kWidth, this.opt.kGap, this._internalData.length, dpr);
-                    this.lastRawVisibleRange = { start, end };
-                    this.lastVisibleRange = { start: Math.max(0, start), end };
-                }
-                const indicatorsReady = this.indicatorScheduler.update(this._internalData, this.lastVisibleRange);
-                if (indicatorsReady) {
-                    this.pendingIndicatorDataUpdate = false;
-                    this.scheduleDraw();
-                }
-                else {
-                    this.pendingIndicatorDataUpdate = true;
-                }
-                this.showIncrementalLoadHint(prependedCount);
-            });
-        }
-        this._dataBuffer.setSymbol(spec);
+    removeComparisonSymbol(symbol) {
+        this.dataManager.removeComparisonSymbol(symbol);
     }
     // ---------- Theme ----------
     /**
@@ -2190,44 +689,19 @@ export class Chart {
      * 计算并应用新的 render state，更新 viewport signal
      */
     zoomToLevel(level, anchorX) {
-        const clamped = Math.max(1, Math.min(this.zoomLevelCount, Math.round(level)));
-        this.applyZoom(clamped, anchorX);
+        this.zoomController.zoomToLevel(level, anchorX);
     }
     /**
      * 放大（高层 API）
      */
     zoomIn(anchorX) {
-        this.zoomToLevel(this.currentZoomLevel + 1, anchorX);
+        this.zoomController.zoomIn(anchorX);
     }
     /**
      * 缩小（高层 API）
      */
     zoomOut(anchorX) {
-        this.zoomToLevel(this.currentZoomLevel - 1, anchorX);
-    }
-    /**
-     * 内部缩放实现
-     * 使用 computeZoom 纯函数计算精确的 scrollLeft
-     */
-    applyZoom(targetLevel, anchorViewportX) {
-        if (targetLevel === this.currentZoomLevel)
-            return;
-        const delta = targetLevel - this.currentZoomLevel;
-        const logicalScrollLeft = this.getLogicalScrollLeft();
-        const dpr = this.getCurrentDpr();
-        const result = computeZoom(delta, anchorViewportX ?? 0, logicalScrollLeft, this.currentZoomLevel, this.opt.kWidth, this.opt.kGap, {
-            minKWidth: this.opt.minKWidth,
-            maxKWidth: this.opt.maxKWidth,
-            zoomLevelCount: this.zoomLevelCount,
-            dpr,
-        });
-        if (!result)
-            return;
-        const domScrollLeft = result.newScrollLeft + this.getLeftLoadBufferWidth();
-        this.currentZoomLevel = result.targetLevel;
-        this.cachedScrollLeft = domScrollLeft;
-        this._pendingScrollLeft = domScrollLeft;
-        this.applyRenderState(result.newKWidth, result.newKGap, result.targetLevel);
+        this.zoomController.zoomOut(anchorX);
     }
     // ---------- Interaction (Zero-config unified entry) ----------
     /**
@@ -2302,21 +776,15 @@ export class Chart {
      * 使用 computeZoom 计算精确的 scrollLeft，更新 viewport signal
      */
     handleWheelEvent(e) {
-        const delta = e.deltaY > 0 ? -1 : 1;
-        const targetLevel = Math.max(1, Math.min(this.zoomLevelCount, this.currentZoomLevel + delta));
-        if (targetLevel === this.currentZoomLevel)
-            return;
-        // 获取鼠标在视口中的位置作为缩放锚点（视口局部坐标）
         const rect = this.dom.container.getBoundingClientRect();
-        const mouseX = e.clientX - rect.left;
-        this.applyZoom(targetLevel, mouseX);
+        this.zoomController.handleWheel(e.deltaY, e.clientX - rect.left);
     }
     /**
      * 滚动事件处理（高层 API）
      * 更新缓存的 scrollLeft 并触发交互 controller
      */
     handleScrollEvent() {
-        this.interaction.onScroll({ scheduleDraw: !this.pendingIndicatorDataUpdate });
+        this.interaction.onScroll({ scheduleDraw: !this.dataManager.pendingIndicatorDataUpdate });
         // 更新 viewport signal 中的 visible range
         this.updateViewportSignal();
     }
@@ -2326,29 +794,13 @@ export class Chart {
      * @param centerClientX 捏合中心在视口中的 X 坐标
      */
     handlePinchZoom(delta, centerClientX) {
-        const targetLevel = Math.max(1, Math.min(this.zoomLevelCount, this.currentZoomLevel + delta));
-        if (targetLevel === this.currentZoomLevel)
-            return;
-        // centerClientX 已经是视口局部坐标，直接使用
-        this.applyZoom(targetLevel, centerClientX);
+        this.zoomController.handlePinch(delta, centerClientX);
     }
     /**
      * 更新 viewport signal（用于滚动事件）
      */
     updateViewportSignal() {
-        const vp = this._internalViewport;
-        if (!vp)
-            return;
-        this._viewportSignal.set({
-            zoomLevel: this.currentZoomLevel,
-            plotWidth: vp.plotWidth,
-            plotHeight: vp.plotHeight,
-            dpr: vp.dpr,
-            visibleFrom: this.lastVisibleRange.start,
-            visibleTo: this.lastVisibleRange.end,
-            kWidth: this.opt.kWidth,
-            kGap: this.opt.kGap,
-        });
+        this.viewportManager.updateViewportSignal();
     }
     // ---------- Indicators (Explicit role) ----------
     /**
@@ -2359,71 +811,16 @@ export class Chart {
      * @returns 实例 ID（成功）或 null（失败）
      */
     addIndicator(definitionId, role, params) {
-        if (role === 'main') {
-            const success = this.enableMainIndicator(definitionId, params);
-            if (!success)
-                return null;
-            return definitionId.toUpperCase();
-        }
-        else {
-            // 副图指标
-            const paneId = `${definitionId.toUpperCase()}_${Date.now()}`;
-            const success = this.createSubPane(paneId, definitionId, params);
-            if (!success)
-                return null;
-            return paneId;
-        }
+        return this.indicatorManager.addIndicator(definitionId, role, params);
     }
-    /**
-     * 移除指标（高层 API）
-     * @param instanceId 指标实例 ID
-     * @returns 是否成功移除
-     */
     removeIndicator(instanceId) {
-        const id = instanceId.toUpperCase();
-        // 先尝试作为主图指标移除
-        if (this._mainIndicatorsSignal.peek().has(id)) {
-            return this.disableMainIndicator(instanceId);
-        }
-        // 再尝试作为副图指标移除
-        const subPaneEntry = this.getSubPaneEntry(instanceId);
-        if (subPaneEntry) {
-            this.removeSubPane(instanceId);
-            return true;
-        }
-        return false;
+        return this.indicatorManager.removeIndicator(instanceId);
     }
-    /**
-     * 更新指标参数（高层 API）
-     * @param instanceId 指标实例 ID
-     * @param params 新参数
-     * @returns 是否成功更新
-     */
     updateIndicatorParams(instanceId, params) {
-        const id = instanceId.toUpperCase();
-        // 先尝试作为主图指标更新
-        if (this._mainIndicatorsSignal.peek().has(id)) {
-            this.updateMainIndicatorParams(instanceId, params);
-            return true;
-        }
-        // 再尝试作为副图指标更新
-        const subPaneEntry = this.getSubPaneEntry(instanceId);
-        if (subPaneEntry) {
-            this.updateSubPaneParams(instanceId, params);
-            return true;
-        }
-        return false;
+        return this.indicatorManager.updateIndicatorParams(instanceId, params);
     }
-    /**
-     * 重新排序指标（高层 API）
-     * @param orderedInstanceIds 排序后的指标实例 ID 数组
-     * @returns 是否成功
-     */
     reorderIndicators(orderedInstanceIds) {
-        // TODO: 实现副图指标的重新排序
-        // 需要调用 updatePaneLayout 来调整 pane 顺序
-        console.warn('[Chart] reorderIndicators not fully implemented yet');
-        return false;
+        return this.indicatorManager.reorderIndicators(orderedInstanceIds);
     }
     // ---------- Sub Panes ----------
     /**