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

package/src/engine/chart.ts

@@ -1,22 +1,24 @@
 import type { KLineData } from '../types/price'
 import type { ChartSettings } from '../config/chartSettings'
-import { createSignal, computed, type Signal, type Computed } from '../reactivity/signal'
-import type { SymbolSpec, DataFetcher } from '../controllers/types'
-import { DataBuffer } from '../data-fetchers/dataBuffer'
-import { getVisibleRange } from './viewport/viewport'
-import { Pane, type VisibleRange, UpdateLevel } from './layout/pane'
+import { createSignal, type Signal, type Computed } from '../reactivity/signal'
+import type { SymbolSpec } from '../controllers/types'
+import { ChartDataManager } from './data/chartDataManager'
+import { ChartPaneLayout } from './layout/chartPaneLayout'
+import { UpdateLevel } from './layout/pane'
 import type { ScaleType } from './utils/tickPosition'
 import { InteractionController, type InteractionSnapshot } from './controller/interaction'
 export type { InteractionSnapshot }
+import type { ChartDom, PaneSpec, ChartOptions, Viewport, ViewportState, IndicatorInstance, SubPaneInfo, DrawingToolType } from './chartTypes'
 import { PaneRenderer } from './paneRenderer'
 import { SharedWebGLSurface } from './renderers/webgl/sharedWebGLSurface'
-import { MarkerManager, type CustomMarkerEntity } from './marker/registry'
-import { getPhysicalKLineConfig, calcKWidthPx } from './utils/klineConfig'
-import { computeZoom, computeZoomToLevel, type ZoomConfig } from './utils/zoom'
-import { IndicatorScheduler } from './indicators/scheduler'
-import { getBuiltinIndicatorDefinitions } from './indicators/registerBuiltins'
-import { getRegisteredIndicatorDefinitions } from './indicators/indicatorDefinitionRegistry'
-import { SubPaneManager, type SubPaneEntry } from './subPaneManager'
+import type { MarkerManager, CustomMarkerEntity } from './marker/registry'
+import { getPhysicalKLineConfig } from './utils/klineConfig'
+import { ChartZoomController } from './utils/chartZoomController'
+import { ChartViewportManager } from './viewport/chartViewportManager'
+import { ChartIndicatorManager } from './indicators/chartIndicatorManager'
+import type { IndicatorScheduler } from './indicators/scheduler'
+import type { SubPaneEntry } from './subPaneManager'
+import { ChartRenderer } from './render/chartRenderer'
 
 import {
     createPluginHost,
@@ -24,159 +26,30 @@ import {
     RendererPluginManager,
     type RendererPlugin,
     type RendererPluginWithHost,
-    type RenderContext,
     wrapPaneInfo,
-    type PaneRole,
-    type PaneCapabilities,
-    type YAxisLabel,
-    type XAxisLabel,
-    type YAxisRange,
-    type XAxisRange,
 } from '../plugin'
-import { createSubIndicatorRenderer, type SubIndicatorType } 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'
+import type { SubIndicatorType } from './renderers/Indicator'
 
 
 // 重新导出以保持向后兼容
-export { getPhysicalKLineConfig, calcKWidthPx }
-
-/**
- * 图表 DOM 元素引用
- * @property container 图表容器 div
- * @property canvasLayer Canvas 层容器 div（包含所有绘制 canvas）
- */
-/**
- * 图表 DOM 元素引用
- * @property container 图表容器 div
- * @property canvasLayer Canvas 层容器 div（包含所有绘制 canvas）
- * @property xAxisCanvas X 轴时间轴 canvas
- */
-export type ChartDom = {
-    container: HTMLDivElement
-    scrollContent?: HTMLDivElement
-    canvasLayer: HTMLDivElement
-    rightAxisLayer: HTMLDivElement
-    xAxisCanvas: HTMLCanvasElement
-}
-
-/**
- * Pane 面板配置
- * @property id Pane 标识符
- * @property ratio Pane 高度占比
- * @property visible 是否可见（默认 true）
- */
-export type PaneSpec = {
-    id: string
-    ratio: number
-    visible?: boolean
-    minHeightPx?: number
-    role?: PaneRole
-    capabilities?: Partial<PaneCapabilities>
-}
-
-export type PaneRendererDom = {
-    mainCanvas: HTMLCanvasElement
-    overlayCanvas: HTMLCanvasElement
-    yAxisCanvas: HTMLCanvasElement
-}
-
-export type ChartOptions = {
-    /** K 线宽度（可选，由 zoomLevel 派生） */
-    kWidth?: number
-    /** K 线间隙（可选，由 DPR 计算） */
-    kGap?: number
-    yPaddingPx: number
-    rightAxisWidth: number
-    bottomAxisHeight: number
-    minKWidth: number
-    maxKWidth: number
-    panes: PaneSpec[]
-
-    /** pane 之间的真实分隔空隙（逻辑像素） */
-    paneGap?: number
-
-    /** 价格标签额外宽度（用于显示涨跌幅，默认 60px） */
-    priceLabelWidth?: number
-
-    /** pane 最小高度（逻辑像素，默认 60） */
-    defaultPaneMinHeightPx?: number
-
-    /**
-     * 缩放级别数量（默认 10）
-     * - 将 minKWidth ~ maxKWidth 划分为多少个离散级别
-     * - 例如 10 表示有 10 个缩放级别（1-10）
-     */
-    zoomLevels?: number
-
-    /**
-     * 初始缩放级别（1 ~ zoomLevels，默认 1）
-     * 未指定时默认为最小级别
-     */
-    initialZoomLevel?: number
-}
-
-/** K 线起始 x 坐标数组，positions[i] 表示第 i 根 K 线的起始 x 坐标（逻辑像素） */
-export type KLinePositions = number[]
-
-export type Viewport = {
-    viewWidth: number
-    viewHeight: number
-    plotWidth: number
-    plotHeight: number
-    scrollLeft: number
-    dpr: number
-}
+export { getPhysicalKLineConfig }
+export type { ChartDom, PaneSpec, PaneRendererDom, ChartOptions, KLinePositions, Viewport, ViewportState, IndicatorRole, IndicatorInstance, SubPaneInfo, DrawingToolType, DrawingObject } from './chartTypes'
 
 type ResolvedChartOptions = Omit<ChartOptions, 'kWidth' | 'kGap'> & {
     kWidth: number
     kGap: number
 }
 
-type FrameData = {
-    vp: Viewport
-    range: VisibleRange
-    kLinePositions: KLinePositions
-    kLineCenters: number[]
-    kBarRects: Array<{ x: number; width: number }>
-    kWidthPx: number
-    useCachedFrame: boolean
-}
-
-/** 主图指标条目，存在 = 激活 */
-interface MainIndicatorEntry {
-    params: Record<string, number | boolean | string>
-}
-
 export class Chart {
     private dom: ChartDom
     private opt: ResolvedChartOptions
-    private _internalData: KLineData[] = []
-    private _dataFetcher: DataFetcher | null = null
-    private _dataBuffer: DataBuffer = new DataBuffer()
-    private _dataBufferUnsub: (() => void) | null = null
-    private _comparisonSpecs: SymbolSpec[] = []
-    private _comparisonData: Map<string, KLineData[]> = new Map()
-    private _comparisonBuffers: Map<string, DataBuffer> = new Map()
-    private _comparisonBufferUnsubs: Map<string, () => void> = new Map()
-
-    private raf: number | null = null
-    private pendingUpdateLevel: UpdateLevel = UpdateLevel.All
-    private _internalViewport: Viewport | null = null
-
-    private paneRenderers: PaneRenderer[] = []
-    private markerManager: MarkerManager
-    private drawingStore = new DrawingStore()
+    private dataManager: ChartDataManager
+
+    private viewportManager: ChartViewportManager
+    private layoutManager: ChartPaneLayout
+    private get paneRenderers(): PaneRenderer[] {
+        return this.layoutManager.getPaneRenderers()
+    }
     readonly interaction: InteractionController
 
     /** 插件宿主 */
@@ -185,182 +58,17 @@ export class Chart {
     /** 渲染器插件管理器 */
     private rendererPluginManager: RendererPluginManager
 
-    /** 精确 DPR（来自 ResizeObserver 的 devicePixelContentBoxSize） */
-    private preciseDpr = 0
-
-    /** 统一监听容器尺寸与 DPR 变化 */
-    private resizeObserver?: ResizeObserver
-
-    /** scroll 事件处理器引用（用于 cleanup） */
-    private onScroll?: () => void
-
-    /** 最近一次观测到的容器尺寸 */
-    private observedSize = { width: 0, height: 0 }
-
-    /** 缓存的 scrollLeft（通过 scroll 事件同步，避免每帧读取 DOM 触发强制回流） */
-    private cachedScrollLeft = 0
-
-    /** 左侧加载缓冲宽度；DOM scrollLeft 不能为负，用它映射出逻辑负滚动 */
-    private leftLoadBufferWidth = 0
-
-    /** 待写入 DOM 的 scrollLeft（在 RAF 回调中应用，确保 Vue 已完成 DOM 更新） */
-    private _pendingScrollLeft: number | null = null
-
-    private incrementalLoadHintEl: HTMLDivElement | null = null
-    private incrementalLoadHintTimer: number | null = null
-    private pendingPrependedCount = 0
-
-    /** overlay 上一帧是否有十字线（用于判断何时需要清除） */
-    private overlayHadCrosshair = false
-
-    /** 用户设置配置（传递给渲染器） */
-    private settings: ChartSettings = {}
-
-    /** pane ratio 状态（按 paneId 维护，sum=1 仅对可见 pane） */
-    private _internalPaneRatios: Map<string, number> = new Map()
-
-    /** 共享 X 轴上下文缓存 */
-    private xAxisCtx: CanvasRenderingContext2D | null = null
-
     /** Chart 级共享 WebGL canvas/context */
     private sharedWebGLSurface: SharedWebGLSurface
 
-    private getScrollContentHost(): HTMLDivElement | null {
-        return this.dom.scrollContent ?? this.dom.container ?? null
-    }
-
-    private ensureIncrementalLoadHint(): HTMLDivElement | null {
-        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
-    }
-
-    private clearIncrementalLoadHintTimer(): void {
-        if (this.incrementalLoadHintTimer !== null) {
-            window.clearTimeout(this.incrementalLoadHintTimer)
-            this.incrementalLoadHintTimer = null
-        }
-    }
-
-    private hideIncrementalLoadHint(): void {
-        const hint = this.incrementalLoadHintEl
-        if (!hint) return
-        hint.style.opacity = '0'
-        hint.style.filter = 'blur(10px)'
-    }
-
-    private showIncrementalLoadHint(count: number): void {
-        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)'
+    /** 缩放控制器 */
+    private zoomController: ChartZoomController
 
-        this.incrementalLoadHintTimer = window.setTimeout(() => {
-            this.hideIncrementalLoadHint()
-            this.incrementalLoadHintTimer = null
-        }, 900)
-    }
-
-    /** 当前缩放级别（1 ~ zoomLevelCount） */
-    private currentZoomLevel: number = 1
+    /** 指标管理器 */
+    private indicatorManager: ChartIndicatorManager
 
-    /** 缩放级别总数 */
-    private readonly zoomLevelCount: number
-
-    /** 指标调度器（负责计算 MA 等指标并写入 StateStore）
-     * TODO: 阶段5迁移为插件注册，Scheduler 通过事件监听 data/viewport 变更，Chart 不直接持有
-     */
-    private indicatorScheduler: IndicatorScheduler
-
-    /** 数据已更新但 Worker 指标尚未回写，期间避免用旧指标 state 绘制中间帧 */
-    private pendingIndicatorDataUpdate = false
-
-    /** 上次可见范围（用于检测视口变化） */
-    private lastVisibleRange: VisibleRange = { start: 0, end: 0 }
-
-    /** 原始可见范围可为负数，仅用于判断左侧空白区加载 */
-    private lastRawVisibleRange: VisibleRange = { start: 0, end: 0 }
-
-    /** Overlay 帧复用的最近主渲染结果 */
-    private cachedDrawFrame: {
-        viewport: Viewport
-        range: VisibleRange
-        kLinePositions: KLinePositions
-        kLineCenters: number[]
-        kBarRects: Array<{ x: number; width: number }>
-        kWidthPx: number
-    } | null = null
-
-    /** 副图管理器 */
-    private subPaneManager = new SubPaneManager()
-
-    /** 主图指标激活状态与参数（存在即激活，默认参数在 enable 时初始化） */
-    private _mainIndicatorsSignal: Signal<Map<string, MainIndicatorEntry>> = createSignal<Map<string, MainIndicatorEntry>>(new Map())
-
-    /** 主图指标默认参数（从注册表中懒加载） */
-    private static _defaultMainParamsCache: Record<string, Record<string, number | boolean | string>> | null = null
-
-    private static get DEFAULT_MAIN_PARAMS(): Record<string, Record<string, number | boolean | string>> {
-        if (Chart._defaultMainParamsCache === null) {
-            Chart._defaultMainParamsCache = {}
-            for (const def of getRegisteredIndicatorDefinitions()) {
-                if (def.category === 'main') {
-                    Chart._defaultMainParamsCache[def.displayName.toUpperCase()] = (def.runtime?.defaultConfig ?? {}) as Record<string, number | boolean | string>
-                }
-            }
-        }
-        return Chart._defaultMainParamsCache
-    }
-
-    /** 可启用的主图指标白名单（从注册表中懒加载） */
-    private static _enableMainIndicatorsCache: string[] | null = null
-
-    private static get ENABLE_MAIN_INDICATORS(): string[] {
-        if (Chart._enableMainIndicatorsCache === null) {
-            Chart._enableMainIndicatorsCache = getRegisteredIndicatorDefinitions()
-                .filter(d => d.category === 'main')
-                .map(d => d.displayName.toUpperCase())
-        }
-        return Chart._enableMainIndicatorsCache
-    }
+    /** 渲染器 */
+    private renderer: ChartRenderer
 
     /**
      * 启用主图指标
@@ -369,216 +77,42 @@ export class Chart {
      * @returns 是否成功启用
      */
     enableMainIndicator(indicatorId: string, params?: Record<string, number | boolean | string>): boolean {
-        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: string): boolean {
-        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: string, enabled: boolean): void {
-        if (enabled) {
-            this.enableMainIndicator(indicatorId)
-        } else {
-            this.disableMainIndicator(indicatorId)
-        }
+        this.indicatorManager.toggleMainIndicator(indicatorId, enabled)
     }
 
-    /**
-     * 获取当前激活的主图指标列表
-     * @returns 激活的指标ID数组
-     */
     getActiveMainIndicators(): string[] {
-        return [...this._mainIndicatorsSignal.peek().keys()]
+        return this.indicatorManager.getActiveMainIndicators()
     }
 
-    /**
-     * 检查主图指标是否激活
-     * @param indicatorId 指标ID
-     */
     isMainIndicatorActive(indicatorId: string): boolean {
-        return this._mainIndicatorsSignal.peek().has(indicatorId.toUpperCase())
+        return this.indicatorManager.isMainIndicatorActive(indicatorId)
     }
 
-    /**
-     * 更新主图指标参数
-     * @param indicatorId 指标ID
-     * @param params 参数对象
-     */
     updateMainIndicatorParams(indicatorId: string, params: Record<string, number | boolean | string>): void {
-        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: string): Record<string, number | boolean | string> | null {
-        return this._mainIndicatorsSignal.peek().get(indicatorId.toUpperCase())?.params ?? null
+        return this.indicatorManager.getMainIndicatorParams(indicatorId)
     }
 
-    /**
-     * 清除所有主图指标
-     */
     clearMainIndicators(): void {
-        const map = this._mainIndicatorsSignal.peek()
-        for (const id of map.keys()) {
-            this.disableMainIndicatorRenderer(id)
-        }
-        this._mainIndicatorsSignal.set(new Map())
-        this.scheduleDraw()
-    }
-
-    /**
-     * 启用主图指标渲染器（内部方法）
-     */
-    private enableMainIndicatorRenderer(indicatorId: string): void {
-        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 }))
-        }
-    }
-
-    /**
-     * 禁用主图指标渲染器（内部方法）
-     */
-    private disableMainIndicatorRenderer(indicatorId: string): void {
-        const rendererName = this.indicatorScheduler.getIndicatorMetadata(indicatorId)?.mainPane?.rendererName
-        if (rendererName) {
-            this.setRendererEnabled(rendererName, false)
-        }
-    }
-
-    /**
-     * 更新调度器配置（内部方法）
-     */
-    private updateIndicatorSchedulerConfig(indicatorId: string): void {
-        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: string[]): void {
-        // 计算需要启用和禁用的指标
-        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)
     }
 
     /**
@@ -595,7 +129,6 @@ 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()
@@ -604,189 +137,140 @@ export class Chart {
         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 as any).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()
-    }
-
-
-    private initCoreRenderers(): void {
-        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 }
             },
-        }))
-    }
-
-
-    private 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 as any).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' as ResizeObserverBoxOptions })
-        } catch {
-            this.resizeObserver.observe(target)
-        }
-    }
-
-
+        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(),
+        })
 
-    private updateObservedMetrics(entry: ResizeObserverEntry) {
-        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
+        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() 传入
 
-        const pixelSize = entry.devicePixelContentBoxSize?.[0]
-        const cssSize = entry.contentBoxSize?.[0]
-        if (!pixelSize || !cssSize || cssSize.inlineSize <= 0) {
-            this.preciseDpr = 0
-            return
-        }
+        // 初始化指标管理器
+        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 },
+        })
 
-        const raw = pixelSize.inlineSize / cssSize.inlineSize
-        this.preciseDpr = Math.round(raw * 64) / 64
+        // 初始化渲染器
+        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()
     }
 
-    private getEffectiveDpr(): number {
-        let dpr = this.preciseDpr > 0
-            ? this.preciseDpr
-            : Math.round((window.devicePixelRatio || 1) * 64) / 64
-        if (dpr < 1) dpr = 1
-        return dpr
-    }
 
     getViewport(): Viewport | null {
-        return this._internalViewport
+        return this.viewportManager.getViewport()
     }
 
     getCurrentDpr(): number {
-        return this.getEffectiveDpr()
+        return this.viewportManager.getEffectiveDpr()
     }
 
     /** 获取缓存的 scrollLeft（避免读取 DOM 触发强制回流） */
     getCachedScrollLeft(): number {
-        return this.cachedScrollLeft
+        return this.viewportManager.getCachedScrollLeft()
     }
 
     /** 获取逻辑 scrollLeft（减去左侧加载缓冲宽度，可为负值） */
     getLogicalScrollLeft(): number {
-        return this.cachedScrollLeft - this.getLeftLoadBufferWidth()
+        return this.viewportManager.getLogicalScrollLeft()
     }
 
     /** 获取插件宿主 */
@@ -831,15 +315,20 @@ export class Chart {
 
     /** 更新用户设置（触发重绘） */
     updateSettings(settings: ChartSettings): void {
-        this.settings = { ...settings }
+        this.renderer.updateSettings(settings)
         this.interaction.updateSettings(settings)
 
         // 同步刻度类型设置到所有 pane（百分比仅用于主图）
-        const axisType = (settings.axisType as ScaleType) ?? '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 as ScaleType) ?? '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()
@@ -850,321 +339,10 @@ export class Chart {
      * @param level 更新级别，决定渲染哪些层
      */
     draw(level: UpdateLevel = 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)
-    }
-
-    private prepareFrameData(level: UpdateLevel): FrameData | null {
-        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: number[]
-        let kBarRects: Array<{ x: number; width: number }>
-        let kWidthPx: number
-
-        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 }
+        this.renderer.draw(level)
     }
 
-    private 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)
-        }
-    }
 
-    private renderPanes(
-        vp: Viewport,
-        range: VisibleRange,
-        kLinePositions: KLinePositions,
-        kLineCenters: number[],
-        kBarRects: Array<{ x: number; width: number }>,
-        kWidthPx: number,
-        mainIndicatorRange: { min: number; max: number } | null,
-        hasCrosshair: boolean,
-        useCachedFrame: boolean,
-        level: UpdateLevel,
-    ): { sharedXAxisLabels: XAxisLabel[]; sharedXAxisRanges: XAxisRange[] } {
-        const sharedYAxisLabels: YAxisLabel[] = []
-        const sharedXAxisLabels: XAxisLabel[] = []
-        const sharedYAxisRanges: YAxisRange[] = []
-        const sharedXAxisRanges: XAxisRange[] = []
-
-        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: RenderContext = {
-                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 as boolean,
-                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 }
-    }
-
-    private renderXAxis(
-        vp: Viewport,
-        range: VisibleRange,
-        kLinePositions: KLinePositions,
-        kLineCenters: number[],
-        kBarRects: Array<{ x: number; width: number }>,
-        kWidthPx: number,
-        sharedXAxisLabels: XAxisLabel[],
-        sharedXAxisRanges: XAxisRange[],
-    ): void {
-        const xAxisCtx = this.xAxisCtx ?? this.dom.xAxisCanvas.getContext('2d')
-        if (!this.xAxisCtx) {
-            this.xAxisCtx = xAxisCtx
-        }
-        if (xAxisCtx) {
-            const timeAxisContext: RenderContext = {
-                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' as const,
-                        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 as boolean,
-                colorPresetSettings: this.settings.colorPresetSettings,
-            }
-            const errors = this.rendererPluginManager.renderPlugin('timeAxis', timeAxisContext)
-            if (errors.length > 0) {
-                this.pluginHost.events.emit('renderer:error', { paneId: 'timeAxis', errors })
-            }
-        }
-    }
 
     // ========== Render State API (Vue SSOT) ==========
 
@@ -1175,11 +353,11 @@ export class Chart {
      */
     applyRenderState(kWidth: number, kGap: number, zoomLevel?: number): void {
         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
@@ -1187,7 +365,7 @@ export class Chart {
 
         this.opt = { ...this.opt, kWidth, kGap }
         if (zoomLevel !== undefined) {
-            this.currentZoomLevel = nextZoomLevel
+            this.zoomController.setZoomLevel(nextZoomLevel)
         }
         this.updateViewportSignal()
         this.scheduleDraw()
@@ -1195,7 +373,7 @@ export class Chart {
 
     /** 获取总缩放级别数 */
     getZoomLevelCount(): number {
-        return this.zoomLevelCount
+        return this.zoomController.zoomLevelCount
     }
 
     /** 获取所有 PaneRenderer */
@@ -1205,18 +383,18 @@ export class Chart {
 
     /** 获取 MarkerManager（供 InteractionController 使用） */
     getMarkerManager(): MarkerManager {
-        return this.markerManager
+        return this.renderer.getMarkerManager()
     }
 
     /** 更新自定义标记 */
     updateCustomMarkers(markers: CustomMarkerEntity[]): void {
-        this.markerManager.setCustomMarkers(markers)
+        this.renderer.getMarkerManager().setCustomMarkers(markers)
         this.scheduleDraw()
     }
 
     /** 清除自定义标记 */
     clearCustomMarkers(): void {
-        this.markerManager.clearCustomMarkers()
+        this.renderer.getMarkerManager().clearCustomMarkers()
         this.scheduleDraw()
     }
 
@@ -1230,36 +408,6 @@ export class Chart {
         return this.opt
     }
 
-    /**
-     * 计算 K 线起始 x 坐标数组，与 candle.ts 的像素对齐方式保持一致
-     * @param range 可见 K 线索引范围
-     * @returns x 坐标数组（逻辑像素，经过物理像素对齐）
-     */
-    calcKLinePositions(range: VisibleRange): KLinePositions {
-        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: number[] = 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 部分配置项
@@ -1277,7 +425,7 @@ 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
         }
 
@@ -1285,347 +433,93 @@ export class Chart {
         this.resize()
     }
 
-    /** 更新 pane 布局配置
-     * @param panes 新的 pane 配置数组
-     *
-     * 显式整盘替换：清空之前 user-resize 留下的 paneRatios 缓存，让 spec 中的 ratio
-     * 真正生效。`addPane`/`upsertPane`/`removePaneDefinition` 走 `applyPaneLayoutSpecs`
-     * 时仍保留 prev 值以记住用户拖拽过的高度——只有显式的 layout replacement 才重置。
-     */
     updatePaneLayout(panes: PaneSpec[]): void {
-        this._internalPaneRatios.clear()
-        this.applyPaneLayoutSpecs(panes)
+        this.layoutManager.updatePaneLayout(panes)
     }
 
     setPaneDefinitions(defs: PaneSpec[]): void {
-        this.applyPaneLayoutSpecs(defs)
+        this.layoutManager.setPaneDefinitions(defs)
     }
 
     upsertPane(def: PaneSpec): void {
-        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: string): void {
-        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: string, indicatorId: SubIndicatorType, params?: Record<string, number | boolean | string>): void {
-        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: import('../plugin').DrawingObject[]): void {
-        this.drawingStore.setAll(drawings)
+        this.renderer.getDrawingStore().setAll(drawings)
         this._drawingsSignal.set(drawings)
         this.scheduleDraw()
     }
 
     /** 更新选中的绘图 ID */
     setSelectedDrawingId(id: string | null): void {
-        if (this.drawingStore.getSelectedId() === id) return
-        this.drawingStore.setSelectedId(id)
+        const store = this.renderer.getDrawingStore()
+        if (store.getSelectedId() === id) return
+        store.setSelectedId(id)
         this.scheduleDraw()
     }
 
-    /** 获取当前 pane 布局快照（含 ratio） */
     getPaneLayoutSpecs(): PaneSpec[] {
-        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,
-            }
-        })
-    }
-
-    private emitPaneLayoutChange(): void {
-        // 同步 pane ratios 到 signal
-        const ratios: Record<string, number> = {}
-        this._internalPaneRatios.forEach((ratio, id) => {
-            ratios[id] = ratio
-        })
-        this._paneRatiosSignal.set(ratios)
-
-        this._paneLayoutSignal.set(this.getPaneLayoutSpecs())
-    }
-
-    private applyPaneLayoutSpecs(panes: PaneSpec[]): void {
-        this.opt.panes = panes.map((spec) => ({ ...spec }))
-        this.syncPaneRatiosFromSpecs(this.opt.panes)
-        this.initPanes()
-        this.layoutPanes()
-        this.emitPaneLayoutChange()
-        this.scheduleDraw()
+        return this.layoutManager.getPaneLayoutSpecs()
     }
 
-    /**
-     * 调整相邻 pane 边界（支持连锁挤压）
-     * @param upperPaneId 上方 pane ID（边界位于此 pane 与其下方邻居之间）
-     * @param deltaY Y 方向位移（逻辑像素，正数表示边界向下，upper 增大；负数表示向上，upper 减小）
-     */
     resizePaneBoundary(upperPaneId: string, deltaY: number): boolean {
-        // === 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<string, number>()
-        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
+        return this.layoutManager.resizePaneBoundary(upperPaneId, deltaY)
     }
 
-    private resolvePaneRole(spec: PaneSpec, index: number): PaneRole {
-        if (spec.role) return spec.role
-        return index === 0 ? 'price' : 'indicator'
-    }
-
-
     addPane(paneId: string): void {
-        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: PaneRole = 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: string): void {
-        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: string): boolean {
-        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: string, indicatorId: SubIndicatorType, params?: Record<string, number | boolean | string>): boolean {
-        // 调整 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: string): void {
-        this.subPaneManager.remove(this, paneId)
+        this.indicatorManager.removeSubPane(paneId)
     }
 
-    /**
-     * 替换副图的指标类型
-     * @param paneId 副图实例标识符
-     * @param newIndicatorId 新的指标类型
-     * @param params 新指标参数
-     */
     replaceSubPaneIndicator(paneId: string, newIndicatorId: SubIndicatorType, params?: Record<string, number | boolean | string>): void {
-        this.subPaneManager.replaceIndicator(this, paneId, newIndicatorId, params ?? this.getDefaultSubPaneParams(newIndicatorId))
+        this.indicatorManager.replaceSubPaneIndicator(paneId, newIndicatorId, params)
     }
 
-    /**
-     * 更新副图指标参数
-     * @param paneId 副图实例标识符
-     * @param params 新参数
-     */
     updateSubPaneParams(paneId: string, params: Record<string, unknown>): void {
-        this.subPaneManager.updateParams(this, paneId, params)
+        this.indicatorManager.updateSubPaneParams(paneId, params)
     }
 
-    /**
-     * 清除所有副图面板
-     */
     clearSubPanes(): void {
-        // 获取所有副图 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(): SubIndicatorType[] {
-        return this.subPaneManager.getAll().map((entry) => entry.indicatorId)
+        return this.indicatorManager.getSubPaneIndicators()
     }
 
-    /**
-     * 获取所有副图条目
-     */
     getSubPaneEntries(): SubPaneEntry[] {
-        return this.subPaneManager.getAll()
+        return this.indicatorManager.getSubPaneEntries()
     }
 
-    /**
-     * 根据 paneId 获取副图条目
-     * @param paneId 副图实例标识符
-     */
     getSubPaneEntry(paneId: string): SubPaneEntry | undefined {
-        return this.subPaneManager.getByPaneId(paneId)
+        return this.indicatorManager.getSubPaneEntry(paneId)
     }
 
     private getDefaultSubPaneParams(indicatorId: SubIndicatorType): Record<string, unknown> {
@@ -1671,8 +565,7 @@ export class Chart {
         return { ...(defaults[indicatorId] ?? {}) }
     }
 
-    /** 副图渲染器名称前缀（保留向后兼容） */
-    private static readonly SUB_PANE_PREFIX = 'sub_'
+
 
     /**
      * 平移价格轴（用于主图区域上下拖动）
@@ -1730,166 +623,58 @@ export class Chart {
      * @param data K 线数据数组
      */
     updateData(data: KLineData[]) {
-        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(): KLineData[] {
-        return this._internalData
+        return this.dataManager.getData()
     }
 
     /** 获取指标调度器（供外部控制器更新指标配置） */
     getIndicatorScheduler(): IndicatorScheduler {
-        return this.indicatorScheduler
-    }
-
-    private getTrailingSlotCount(): number {
-        return 24
+        return this.indicatorManager.indicatorSchedulerAccessor
     }
 
     getLogicalSlotCount(): number {
-        return this._internalData.length + this.getTrailingSlotCount()
+        return this.dataManager.getLogicalSlotCount()
     }
 
     getTimestampAtLogicalIndex(index: number): number | null {
-        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: number): number | null {
-        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: number): number | null {
-        const index = this.getLogicalIndexAtX(mouseX)
-        if (index === null || index >= this._internalData.length) return null
-        return index
+        return this.dataManager.getDataIndexAtX(mouseX)
     }
 
 
-    private static readonly LEADING_SLOTS = 60
-    private static readonly TRAILING_DRAWING_SLOTS = 24
-
     /** 获取内容总宽度（用于外部 scroll-content 撑开 scrollWidth） */
     getContentWidth(): number {
-        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(): void {
-        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
-    }
-
-    private getLeftLoadBufferWidth(): number {
-        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
-    }
-
-    private computeRawVisibleRange(): VisibleRange | null {
-        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()
     }
 
@@ -1898,432 +683,27 @@ export class Chart {
      * @param level 更新级别，默认为 All
      */
     scheduleDraw(level: UpdateLevel = UpdateLevel.All): void {
-        // 合并更新级别：如果已有更高级别的调度，保持高级别
-        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 */
-    private 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))
-    }
-
-
-    private syncPaneRatiosFromSpecs(specs: PaneSpec[]): void {
-        const next = new Map<string, number>()
-        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()
-    }
-
-    private syncPaneRatiosToSpecs(): void {
-        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 }
-        })
-    }
-
-    private normalizeVisiblePaneRatios(specs: PaneSpec[]): void {
-        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)
-        }
-    }
-
-    private getPaneMinHeight(spec: PaneSpec, plotHeight: number): number {
-        const fallback = this.opt.defaultPaneMinHeightPx ?? 120 // 最小高度
-        const raw = spec.minHeightPx ?? fallback
-        return Math.max(1, Math.min(Math.round(raw), Math.max(1, plotHeight)))
-    }
-
-    private computePaneHeightsByRatio(visibleSpecs: PaneSpec[], availableH: number): number[] {
-        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） */
-    private 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()
-    }
     private computeViewport(): Viewport | null {
-        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: Viewport = {
-            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 ----------
-    private _viewportSignal = createSignal<ViewportState>({
-        zoomLevel: 1,
-        plotWidth: 0,
-        plotHeight: 0,
-        dpr: 1,
-        visibleFrom: 0,
-        visibleTo: 0,
-        kWidth: 0,
-        kGap: 1,
-    })
-
-    private _dataSignal = createSignal<ReadonlyArray<KLineData>>([])
-    private _symbolsSignal = createSignal<ReadonlyArray<SymbolSpec>>([])
     private _themeSignal = createSignal<'light' | 'dark'>('light')
     private _drawingToolSignal = createSignal<DrawingToolType | null>(null)
     private _drawingsSignal = createSignal<ReadonlyArray<import('../plugin').DrawingObject>>([])
@@ -2346,51 +726,29 @@ export class Chart {
         isHoveringRightAxis: false,
     })
 
-    private _indicatorsComputed = computed<ReadonlyArray<IndicatorInstance>>(() => {
-        const mainIndicators: IndicatorInstance[] = [...this._mainIndicatorsSignal().entries()].map(([id, entry]) => ({
-            id,
-            definitionId: id,
-            label: id,
-            name: id,
-            role: 'main' as const,
-            params: { ...entry.params },
-        }))
-
-        const subIndicators: IndicatorInstance[] = this.subPaneManager.entriesSignal().map(entry => ({
-            id: entry.paneId,
-            definitionId: entry.indicatorId,
-            label: entry.indicatorId,
-            name: entry.indicatorId,
-            role: 'sub' as const,
-            paneId: entry.paneId,
-            params: { ...entry.params },
-        }))
-
-        return [...mainIndicators, ...subIndicators]
-    })
-    private _subPanesComputed = computed<ReadonlyArray<SubPaneInfo>>(() => {
-        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(): Signal<ViewportState> {
-        return this._viewportSignal
+        return this.viewportManager.viewportSignal
     }
 
     /** 数据信号 */
     get data(): Signal<ReadonlyArray<KLineData>> {
-        return this._dataSignal
+        return this.dataManager.data
     }
 
     /** 符号信号 */
     get symbols(): Signal<ReadonlyArray<SymbolSpec>> {
-        return this._symbolsSignal
+        return this.dataManager.symbols
+    }
+
+    /** 比较商品颜色信号 */
+    get comparisonColors(): Signal<ReadonlyMap<string, string>> {
+        return this.dataManager.comparisonColors
+    }
+
+    /** 比较商品加载信号 */
+    get comparisonLoading(): Signal<boolean> {
+        return this.dataManager.comparisonLoading
     }
 
     /** 主题信号 */
@@ -2400,12 +758,12 @@ export class Chart {
 
     /** 指标实例列表信号（派生信号，自动随主/副图状态更新） */
     get indicators(): Computed<ReadonlyArray<IndicatorInstance>> {
-        return this._indicatorsComputed
+        return this.indicatorManager.indicatorsComputed
     }
 
     /** 子图信息信号（派生信号，自动随副图条目/比例更新） */
     get subPanes(): Computed<ReadonlyArray<SubPaneInfo>> {
-        return this._subPanesComputed
+        return this.indicatorManager.subPanesComputed
     }
 
     /** 当前绘图工具信号 */
@@ -2434,233 +792,36 @@ export class Chart {
 
     // ---------- Data ----------
 
-    /**
-     * 设置数据（高层 API）
-     * 内部调用 updateData，并更新 data signal
-     */
     setData(data: KLineData[]): void {
-        this.updateData(data)
+        this.dataManager.setData(data)
     }
 
-    /**
-     * 追加数据（高层 API）
-     * 合并现有数据并更新
-     */
     appendData(newData: KLineData[]): void {
-        const merged = [...this._internalData, ...newData]
-        this.setData(merged)
+        this.dataManager.appendData(newData)
     }
 
-    /**
-     * 设置数据获取器适配器
-     */
-    setDataFetcher(fetcher: DataFetcher | null): void {
-        this._dataFetcher = fetcher
-        this._dataBuffer.setFetcher(fetcher)
-        for (const buffer of this._comparisonBuffers.values()) {
-            buffer.setFetcher(fetcher)
-        }
+    setDataFetcher(fetcher: import('../controllers/types').DataFetcher | null): void {
+        this.dataManager.setDataFetcher(fetcher)
     }
 
-    get dataBuffer(): DataBuffer {
-        return this._dataBuffer
+    get dataBuffer(): import('../data-fetchers/dataBuffer').DataBuffer {
+        return this.dataManager.dataBuffer
     }
 
     checkVisibleRangeGap(): void {
-        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)
-        }
-    }
-
-    private checkVisibleRangeGapWhenIdle(): void {
-        if (this.interaction.isPointerDown()) return
-        this.checkVisibleRangeGap()
-    }
-
-    private getComparisonEquivalentPriceRange(range: VisibleRange): { min: number; max: number } | null {
-        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<number, KLineData>()
-            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 }
+        this.dataManager.checkVisibleRangeGap()
     }
 
-    private findComparisonBaseline(data: ReadonlyArray<KLineData>, timestamp: number): KLineData | null {
-        for (const item of data) {
-            if (item.timestamp >= timestamp) return item
-        }
-        return null
-    }
-
-    private mergeNumericRanges(
-        left: { min: number; max: number } | null | undefined,
-        right: { min: number; max: number } | null | undefined,
-    ): { min: number; max: number } | null {
-        if (!left) return right ?? null
-        if (!right) return left
-        return {
-            min: Math.min(left.min, right.min),
-            max: Math.max(left.max, right.max),
-        }
-    }
-
-    private syncComparisonBuffers(specs: ReadonlyArray<SymbolSpec>): void {
-        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)
-        }
+    setSymbols(specs: ReadonlyArray<SymbolSpec>): void {
+        this.dataManager.setSymbols(specs)
     }
 
-    private clearComparisonBuffers(): void {
-        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 = []
+    addComparisonSymbol(spec: SymbolSpec): void {
+        this.dataManager.addComparisonSymbol(spec)
     }
 
-    /**
-     * 设置当前符号并触发数据加载
-     */
-    setSymbols(specs: ReadonlyArray<SymbolSpec>): void {
-        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: number) => {
-            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: string): void {
+        this.dataManager.removeComparisonSymbol(symbol)
     }
 
     // ---------- Theme ----------
@@ -2680,57 +841,21 @@ export class Chart {
      * 计算并应用新的 render state，更新 viewport signal
      */
     zoomToLevel(level: number, anchorX?: number): void {
-        const clamped = Math.max(1, Math.min(this.zoomLevelCount, Math.round(level)))
-        this.applyZoom(clamped, anchorX)
+        this.zoomController.zoomToLevel(level, anchorX)
     }
 
     /**
      * 放大（高层 API）
      */
     zoomIn(anchorX?: number): void {
-        this.zoomToLevel(this.currentZoomLevel + 1, anchorX)
+        this.zoomController.zoomIn(anchorX)
     }
 
     /**
      * 缩小（高层 API）
      */
     zoomOut(anchorX?: number): void {
-        this.zoomToLevel(this.currentZoomLevel - 1, anchorX)
-    }
-
-    /**
-     * 内部缩放实现
-     * 使用 computeZoom 纯函数计算精确的 scrollLeft
-     */
-    private applyZoom(targetLevel: number, anchorViewportX?: number): void {
-        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) ----------
@@ -2806,16 +931,8 @@ export class Chart {
      * 使用 computeZoom 计算精确的 scrollLeft，更新 viewport signal
      */
     handleWheelEvent(e: WheelEvent): void {
-        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)
     }
 
     /**
@@ -2823,7 +940,7 @@ export class Chart {
      * 更新缓存的 scrollLeft 并触发交互 controller
      */
     handleScrollEvent(): void {
-        this.interaction.onScroll({ scheduleDraw: !this.pendingIndicatorDataUpdate })
+        this.interaction.onScroll({ scheduleDraw: !this.dataManager.pendingIndicatorDataUpdate })
         // 更新 viewport signal 中的 visible range
         this.updateViewportSignal()
     }
@@ -2834,30 +951,14 @@ export class Chart {
      * @param centerClientX 捏合中心在视口中的 X 坐标
      */
     handlePinchZoom(delta: number, centerClientX: number): void {
-        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（用于滚动事件）
      */
     private updateViewportSignal(): void {
-        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) ----------
@@ -2874,81 +975,19 @@ export class Chart {
         role: 'main' | 'sub',
         params?: Record<string, unknown>,
     ): string | null {
-        if (role === 'main') {
-            const success = this.enableMainIndicator(definitionId, params as Record<string, number | boolean | string>)
-            if (!success) return null
-            return definitionId.toUpperCase()
-        } else {
-            // 副图指标
-            const paneId = `${definitionId.toUpperCase()}_${Date.now()}`
-            const success = this.createSubPane(
-                paneId,
-                definitionId as SubIndicatorType,
-                params as Record<string, number | boolean | string>,
-            )
-            if (!success) return null
-            return paneId
-        }
+        return this.indicatorManager.addIndicator(definitionId, role, params)
     }
 
-    /**
-     * 移除指标（高层 API）
-     * @param instanceId 指标实例 ID
-     * @returns 是否成功移除
-     */
     removeIndicator(instanceId: string): boolean {
-        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: string, params: Record<string, unknown>): boolean {
-        const id = instanceId.toUpperCase()
-
-        // 先尝试作为主图指标更新
-        if (this._mainIndicatorsSignal.peek().has(id)) {
-            this.updateMainIndicatorParams(instanceId, params as Record<string, number | boolean | string>)
-            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: string[]): boolean {
-        // TODO: 实现副图指标的重新排序
-        // 需要调用 updatePaneLayout 来调整 pane 顺序
-        console.warn('[Chart] reorderIndicators not fully implemented yet')
-        return false
+        return this.indicatorManager.reorderIndicators(orderedInstanceIds)
     }
 
 
@@ -3017,43 +1056,6 @@ export class Chart {
      */
 }
 
-// ==================== Type definitions for Facade ====================
-
-export type ViewportState = {
-    zoomLevel: number
-    plotWidth: number
-    plotHeight: number
-    dpr: number
-    visibleFrom: number
-    visibleTo: number
-    kWidth: number
-    kGap: number
-}
 
-export type IndicatorRole = 'main' | 'sub'
-
-export interface IndicatorInstance {
-    id: string
-    definitionId: string
-    label: string
-    name: string
-    role: IndicatorRole
-    paneId?: string
-    params: Record<string, unknown>
-}
-
-export interface SubPaneInfo {
-    paneId: string
-    indicatorId: string
-    params: Record<string, unknown>
-    ratio: number
-}
-
-export type DrawingToolType = 'trendline' | 'horizontal' | 'fib' | 'rectangle' | 'arrow'
-
-export interface DrawingObject {
-    id: string
-    type: DrawingToolType
-}