@363045841yyt/klinechart-core 0.9.0-alpha.2 → 0.9.0-alpha.3

package/src/engine/renderers/Indicator/mainIndicatorLegendContext.ts

@@ -0,0 +1,282 @@
+import type { PluginHost, RenderContext } from '../../../foundation/plugin/index'
+import { resolveThemeColors } from '../../../foundation/tokens/index'
+import type { KLineData, TimeShareData } from '../../../foundation/types/price'
+import type { TitleInfo, TitleValueItem } from '../../indicators/indicatorMetadata'
+import type { IndicatorScheduler } from '../../indicators/scheduler'
+
+/** 图例渲染模式：canvas 默认绘制；external 仅发布上下文，不画 Canvas 文字 */
+export type LegendRenderMode = 'canvas' | 'external'
+
+export interface LegendLayout {
+  x: number
+  y: number
+  lineHeight: number
+  gap: number
+  paneWidth: number
+  compact: boolean
+}
+
+/** 当前 K 线及图例派生的展示字段，保留 KLineData 自定义属性。 */
+export type LegendOhlcRow = Omit<KLineData, 'volume'> & {
+  volume: number | null
+  volumeText: string | null
+  color: string
+}
+
+export interface LegendTimeshareRow {
+  price: number
+  average: number
+  changeAmount: number
+  changePercent: number
+  volume: number
+  volumeText: string
+  amount: number
+  amountText: string
+  changeColor: string
+}
+
+export interface LegendIndicatorRow {
+  name: string
+  params?: number[]
+  values?: TitleValueItem[]
+}
+
+export interface LegendComparisonRow {
+  symbol: string
+  percent: number
+  color: string
+  percentColor: string
+}
+
+/**
+ * 主图左上角图例完整上下文。
+ * Canvas 绘制与 Vue legend slot 共用同一份数据。
+ */
+export interface LegendTemplateContext {
+  period: string
+  index: number
+  hasCrosshair: boolean
+  layout: LegendLayout
+  colors: {
+    textPrimary: string
+    textTertiary: string
+    up: string
+    down: string
+  }
+  ohlc: LegendOhlcRow | null
+  timeshare: LegendTimeshareRow | null
+  indicators: ReadonlyArray<LegendIndicatorRow>
+  comparisons: ReadonlyArray<LegendComparisonRow>
+  /** 当前索引处的 K 线（分时模式下可能无 close） */
+  bar: KLineData | TimeShareData | null
+}
+
+export interface BuildLegendTemplateContextInput {
+  context: RenderContext
+  host: PluginHost | null
+  yPaddingPx: number
+}
+
+export function formatVolumeShort(v: number): string {
+  if (v >= 1e8) return (v / 1e8).toFixed(2) + '亿'
+  if (v >= 1e4) return (v / 1e4).toFixed(2) + '万'
+  return v.toFixed(2)
+}
+
+export function formatAmountShort(v: number): string {
+  if (v >= 1e8) return (v / 1e8).toFixed(2) + '亿'
+  if (v >= 1e4) return (v / 1e4).toFixed(2) + '万'
+  return v.toFixed(2)
+}
+
+export function buildLegendTemplateContext(
+  input: BuildLegendTemplateContextInput,
+): LegendTemplateContext | null {
+  const { context, host, yPaddingPx } = input
+  const klineData = context.data as KLineData[]
+  if (!klineData.length) return null
+
+  const colors = resolveThemeColors(
+    context.theme,
+    context.isAsiaMarket,
+    context.colorPresetSettings,
+  )
+  const fontSize = 12
+  const lineHeight = fontSize + 6
+  const legendX = 12
+  const gap = 10
+  const legendYOffset = 6
+  const compact = context.paneWidth < 400
+  const range = context.range
+  const crosshairIndex = context.crosshairIndex
+  const hasCrosshair = typeof crosshairIndex === 'number'
+  const targetIndex = hasCrosshair
+    ? crosshairIndex
+    : Math.min(range.end - 1, klineData.length - 1)
+
+  const layout: LegendLayout = {
+    x: legendX,
+    y: yPaddingPx / 2 + legendYOffset,
+    lineHeight,
+    gap,
+    paneWidth: context.paneWidth,
+    compact,
+  }
+
+  let timeshare: LegendTimeshareRow | null = null
+  if (context.period === 'timeshare') {
+    const tsData = context.data as TimeShareData[]
+    const preClose = (context.settings?.preClose as number) ?? tsData[0]?.price ?? 0
+    const item = tsData[targetIndex]
+    if (item) {
+      const changeAmount = item.price - preClose
+      const changePercent = preClose !== 0 ? (changeAmount / preClose) * 100 : 0
+      timeshare = {
+        price: item.price,
+        average: item.average,
+        changeAmount,
+        changePercent,
+        volume: item.volume,
+        volumeText: formatVolumeShort(item.volume),
+        amount: item.amount,
+        amountText: formatAmountShort(item.amount),
+        changeColor: changeAmount >= 0 ? colors.candleUpBody : colors.candleDownBody,
+      }
+    }
+  }
+
+  let ohlc: LegendOhlcRow | null = null
+  if (hasCrosshair) {
+    const k = klineData[targetIndex]
+    if (k && typeof k.close === 'number') {
+      const isUp = k.close >= k.open
+      ohlc = {
+        ...k,
+        volume: typeof k.volume === 'number' ? k.volume : null,
+        volumeText: typeof k.volume === 'number' ? formatVolumeShort(k.volume) : null,
+        color: isUp ? colors.candleUpBody : colors.candleDownBody,
+      }
+    }
+  }
+
+  const indicators = collectIndicatorRows(host, klineData, targetIndex)
+  const comparisons = collectComparisonRows(context, klineData, targetIndex, range, colors)
+
+  return {
+    period: context.period,
+    index: targetIndex,
+    hasCrosshair,
+    layout,
+    colors: {
+      textPrimary: colors.text.primary,
+      textTertiary: colors.text.tertiary,
+      up: colors.candleUpBody,
+      down: colors.candleDownBody,
+    },
+    ohlc,
+    timeshare,
+    indicators,
+    comparisons,
+    bar: klineData[targetIndex] ?? null,
+  }
+}
+
+function collectIndicatorRows(
+  host: PluginHost | null,
+  klineData: KLineData[],
+  targetIndex: number,
+): LegendIndicatorRow[] {
+  if (!host || typeof host.getService !== 'function') return []
+  const scheduler = host.getService<IndicatorScheduler>('indicatorScheduler')
+  if (!scheduler) return []
+
+  const rows: LegendIndicatorRow[] = []
+  for (const meta of scheduler.getMainIndicators()) {
+    if (!meta.getTitleInfo) continue
+    if (!scheduler.isMainIndicatorActive(meta.name)) continue
+    const params = scheduler.getMainIndicatorParams(meta.name) ?? {}
+    const titleInfo: TitleInfo | null = meta.getTitleInfo(
+      klineData,
+      targetIndex,
+      params as Record<string, number | boolean | string>,
+      host,
+      'main',
+    )
+    if (!titleInfo) continue
+    rows.push({
+      name: titleInfo.name,
+      params: titleInfo.params,
+      values: titleInfo.values,
+    })
+  }
+  return rows
+}
+
+function collectComparisonRows(
+  context: RenderContext,
+  klineData: KLineData[],
+  targetIndex: number,
+  range: { start: number; end: number },
+  colors: ReturnType<typeof resolveThemeColors>,
+): LegendComparisonRow[] {
+  const comparisonSymbols = context.comparisonSymbols
+  const comparisonData = context.comparisonData
+  const comparisonColors = context.comparisonColors
+  if (!comparisonSymbols?.length || !comparisonData?.size) return []
+
+  const baseIndex = Math.max(0, range.start)
+  const baseItem = klineData[baseIndex]
+  if (!baseItem || !Number.isFinite(baseItem.close) || baseItem.close <= 0) return []
+
+  const baseDate = baseItem.date ?? ''
+  const rows: LegendComparisonRow[] = []
+
+  for (const spec of comparisonSymbols) {
+    const data = comparisonData.get(spec.symbol)
+    if (!data?.length) continue
+
+    const baseline = baseDate
+      ? findBaselineByDate(data, baseDate)
+      : findBaselineByTimestamp(data, baseItem.timestamp)
+    if (!baseline || baseline.close <= 0) continue
+
+    const byDate = new Map<string, KLineData>()
+    for (const item of data) {
+      byDate.set(item.date ?? String(item.timestamp), item)
+    }
+
+    const mainItem = klineData[targetIndex]
+    if (!mainItem) continue
+    const key = mainItem.date ?? String(mainItem.timestamp)
+    const currentItem = byDate.get(key)
+    if (!currentItem || !Number.isFinite(currentItem.close)) continue
+
+    const percent = ((currentItem.close - baseline.close) / baseline.close) * 100
+    const color = comparisonColors?.get(spec.symbol) ?? '#f59e0b'
+    rows.push({
+      symbol: spec.symbol,
+      percent,
+      color,
+      percentColor:
+        percent > 0 ? colors.candleUpBody : percent < 0 ? colors.candleDownBody : colors.text.primary,
+    })
+  }
+  return rows
+}
+
+function findBaselineByDate(data: ReadonlyArray<KLineData>, date: string): KLineData | null {
+  for (const item of data) {
+    if (item.date && item.date >= date) return item
+  }
+  return null
+}
+
+function findBaselineByTimestamp(
+  data: ReadonlyArray<KLineData>,
+  timestamp: number,
+): KLineData | null {
+  for (const item of data) {
+    if (item.timestamp >= timestamp) return item
+  }
+  return null
+}

package/src/engine/renderers/__tests__/mainIndicatorLegend.renderer.test.ts

@@ -20,7 +20,7 @@ import type { KLineData } from '@/types/price'
 // Type helper for tests - we know these methods exist on the implementation
 interface TestableLegendRenderer extends RendererPluginWithHost {
   draw: (context: RenderContext) => void
-  getConfig: () => { yPaddingPx: number }
+  getConfig: () => { yPaddingPx: number; renderMode: 'canvas' | 'external' }
   setConfig: (config: Record<string, unknown>) => void
 }
 
@@ -210,7 +210,7 @@ describe('createMainIndicatorLegendRendererPlugin', () => {
     const plugin = createMainIndicatorLegendRendererPlugin({ yPaddingPx: 20 })
 
     expect(plugin.name).toBe('mainIndicatorLegend')
-    expect(plugin.version).toBe('2.1.0')
+    expect(plugin.version).toBe('2.2.0')
     expect(plugin.description).toBe('主图指标图例渲染器（MA 数据来自 StateStore）')
     expect(plugin.debugName).toBe('主图指标图例')
     expect(plugin.paneId).toBe('main')
@@ -552,3 +552,74 @@ describe('MainIndicatorLegend with other indicators', () => {
     expect(wmaLabelCalls.length).toBeGreaterThan(0)
   })
 })
+
+describe('MainIndicatorLegend external mode & context callback', () => {
+  it('publishes legend context via onContext while still painting in canvas mode', () => {
+    const onContext = vi.fn()
+    const scheduler = createMockScheduler({ ma: { getTitleInfo: createMAGetTitleInfo() } }, ['ma'])
+    const state = createTestMARenderState()
+    const mockHost = createMockPluginHost(state, scheduler)
+    const plugin = createMainIndicatorLegendRendererPlugin({
+      yPaddingPx: 20,
+      onContext,
+    }) as TestableLegendRenderer
+    plugin.onInstall(mockHost)
+
+    const ctx = createMockCanvasContext()
+    const context = createMockRenderContext(ctx, { crosshairIndex: 50 })
+    plugin.draw(context)
+
+    expect(onContext).toHaveBeenCalledTimes(1)
+    const legend = onContext.mock.calls[0]![0]
+    expect(legend).not.toBeNull()
+    expect(legend.index).toBe(50)
+    expect(legend.hasCrosshair).toBe(true)
+    expect(legend.ohlc).not.toBeNull()
+    expect(legend.indicators.some((row: { name: string }) => row.name === 'MA')).toBe(true)
+    expect(vi.mocked(ctx.fillText).mock.calls.length).toBeGreaterThan(0)
+  })
+
+  it('does not paint canvas text when renderMode is external but still publishes context', () => {
+    const onContext = vi.fn()
+    const scheduler = createMockScheduler({ ma: { getTitleInfo: createMAGetTitleInfo() } }, ['ma'])
+    const state = createTestMARenderState()
+    const mockHost = createMockPluginHost(state, scheduler)
+    const plugin = createMainIndicatorLegendRendererPlugin({
+      yPaddingPx: 20,
+      onContext,
+    }) as TestableLegendRenderer
+    plugin.onInstall(mockHost)
+    plugin.setConfig({ renderMode: 'external' })
+    expect(plugin.getConfig().renderMode).toBe('external')
+
+    const ctx = createMockCanvasContext()
+    const context = createMockRenderContext(ctx, { crosshairIndex: 10 })
+    plugin.draw(context)
+
+    expect(onContext).toHaveBeenCalledTimes(1)
+    expect(onContext.mock.calls[0]![0]).not.toBeNull()
+    expect(vi.mocked(ctx.fillText)).not.toHaveBeenCalled()
+  })
+
+  it('retains custom KLineData fields in the ohlc slot context', () => {
+    const onContext = vi.fn()
+    const plugin = createMainIndicatorLegendRendererPlugin({
+      yPaddingPx: 20,
+      onContext,
+    }) as TestableLegendRenderer
+    plugin.onInstall(createMockPluginHost())
+    plugin.setConfig({ renderMode: 'external' })
+
+    const ctx = createMockCanvasContext()
+    const context = createMockRenderContext(ctx, { crosshairIndex: 10 })
+    Object.assign((context.data as KLineData[])[10]!, {
+      turnoverRate: 3.14,
+      customLabel: 'featured',
+    })
+    plugin.draw(context)
+
+    const legend = onContext.mock.calls[0]![0]
+    expect(legend.ohlc.turnoverRate).toBe(3.14)
+    expect(legend.ohlc.customLabel).toBe('featured')
+  })
+})

package/src/engine/renderers/__tests__/yAxis.renderer.test.ts

@@ -1,6 +1,6 @@
 import { describe, it, expect, vi, beforeEach } from 'vitest'
 
-import { createYAxisRendererPlugin } from '@/core/renderers/yAxis'
+import { createYAxisRendererPlugin, createYAxisOverlayRendererPlugin } from '@/core/renderers/yAxis'
 import type { RenderContext, PaneInfo, YAxisTick } from '@/plugin'
 
 vi.mock('@/utils/kLineDraw/axis', () => ({
@@ -135,9 +135,10 @@ describe('yAxis renderer', () => {
   })
 
   it('draws last price label via drawAxisPriceLabel for main pane when yAxisLabels contains lastPrice', () => {
-    const plugin = createYAxisRendererPlugin({ axisWidth: 80, yPaddingPx: 0 })
+    const plugin = createYAxisOverlayRendererPlugin({ axisWidth: 80, yPaddingPx: 0 })
     const context = createContext({
       pane: createPane({ id: 'main' }),
+      yAxisOverlayCtx: createCtx(),
       yAxisLabels: [
         {
           type: 'lastPrice',
@@ -165,12 +166,15 @@ describe('yAxis renderer', () => {
   })
 
   it('draws crosshair price label exactly once for active pane', () => {
-    const plugin = createYAxisRendererPlugin({
+    const plugin = createYAxisOverlayRendererPlugin({
       axisWidth: 80,
       yPaddingPx: 0,
       getCrosshair: () => ({ y: 55, price: 95, activePaneId: 'main' }),
     })
-    const context = createContext({ pane: createPane({ id: 'main' }) })
+    const context = createContext({
+      pane: createPane({ id: 'main' }),
+      yAxisOverlayCtx: createCtx(),
+    })
 
     plugin.draw(context)
 
@@ -178,12 +182,12 @@ describe('yAxis renderer', () => {
   })
 
   it('does not draw crosshair price label when getCrosshair returns null', () => {
-    const plugin = createYAxisRendererPlugin({
+    const plugin = createYAxisOverlayRendererPlugin({
       axisWidth: 80,
       yPaddingPx: 0,
       getCrosshair: () => null,
     })
-    const context = createContext()
+    const context = createContext({ yAxisOverlayCtx: createCtx() })
 
     plugin.draw(context)
 

package/src/engine/renderers/leftYAxis.ts

@@ -6,49 +6,52 @@ import { roundToPhysicalPixel } from '../../foundation/utils/pixelAlign'
 import { getFont, setCanvasFont } from '../../foundation/tokens/fonts'
 import { priceAtYForScaleType, type ScaleType } from '../utils/tickPosition'
 
-export function createLeftYAxisRendererPlugin(options: {
+type LeftYAxisOptions = {
   axisWidth: number
   yPaddingPx: number
   getCrosshair?: () => { y: number; price: number; activePaneId: string | null } | null
-}): RendererPlugin {
+}
+
+function shouldShowLeftAxis(period: string, settings: RenderContext['settings']): boolean {
+  if (period === 'timeshare') return true
+  const leftType = settings?.leftAxisType as string | undefined
+  return Boolean(leftType && leftType !== 'none')
+}
+
+/**
+ * 左 Y 轴静态层：刻度，画到 leftAxisCtx（main 级刷新）
+ */
+export function createLeftYAxisStaticRendererPlugin(options: LeftYAxisOptions): RendererPlugin {
   return {
     name: 'leftYAxis',
-    version: '1.0.0',
-    description: '左侧Y轴价格刻度渲染器',
-    debugName: '左侧Y轴',
+    version: '2.0.0',
+    description: '左侧Y轴价格刻度渲染器（静态）',
+    debugName: '左侧Y轴刻度',
     paneId: GLOBAL_PANE_ID,
     priority: RENDERER_PRIORITY.SYSTEM_YAXIS,
-    layer: 'overlay',
 
     draw(context: RenderContext) {
       const { leftAxisCtx, pane, dpr, period } = context
       if (!leftAxisCtx) return
+      if (!shouldShowLeftAxis(period, context.settings)) return
+      if (!pane.capabilities.showPriceAxisTicks) return
+      if (!context.yAxisTicks) return
 
       const axisWidth = leftAxisCtx.canvas ? leftAxisCtx.canvas.width / dpr : 0
       if (axisWidth <= 0) return
 
-      // 分时模式始终显示左轴（线性），不受设置约束
-      if (period !== 'timeshare') {
-        const leftType = context.settings?.leftAxisType as string | undefined
-        if (!leftType || leftType === 'none') return
-      }
-
       const tokenColors = resolveThemeColors(
         context.theme,
         context.isAsiaMarket,
         context.colorPresetSettings,
       )
 
-      if (!pane.capabilities.showPriceAxisTicks) return
-
       const scaleType: ScaleType =
         period === 'timeshare'
           ? 'linear'
           : ((context.settings?.leftAxisType as ScaleType) ?? 'linear')
       const paneScaleType = pane.yAxis.getScaleType()
 
-      if (!context.yAxisTicks) return
-
       leftAxisCtx.clearRect(0, 0, axisWidth, pane.height)
 
       const font = getFont(12)
@@ -58,7 +61,6 @@ export function createLeftYAxisRendererPlugin(options: {
       leftAxisCtx.fillStyle = tokenColors.text.secondary
 
       const textX = roundToPhysicalPixel(axisWidth / 2, dpr)
-
       const needsOwnValues = scaleType !== paneScaleType
       const crosshairPriceRange = pane.yAxis.getDisplayRange()
 
@@ -92,14 +94,47 @@ export function createLeftYAxisRendererPlugin(options: {
         }
         leftAxisCtx.fillText(formatTick(displayValue), textX, tick.y)
       }
+    },
+  }
+}
+
+/**
+ * 左 Y 轴动态层：十字线价签，画到 leftAxisOverlayCtx（overlay 级刷新）
+ */
+export function createLeftYAxisOverlayRendererPlugin(options: LeftYAxisOptions): RendererPlugin {
+  return {
+    name: 'leftYAxisOverlay',
+    version: '2.0.0',
+    description: '左侧Y轴动态标签渲染器',
+    debugName: '左侧Y轴标签',
+    paneId: GLOBAL_PANE_ID,
+    priority: RENDERER_PRIORITY.SYSTEM_YAXIS + 1,
+    layer: 'overlay',
+
+    draw(context: RenderContext) {
+      const { leftAxisOverlayCtx, leftAxisCtx, pane, dpr, period } = context
+      if (!shouldShowLeftAxis(period, context.settings)) return
+
+      const targetCtx = leftAxisOverlayCtx ?? leftAxisCtx
+      if (!targetCtx) return
+
+      const axisWidth = targetCtx.canvas ? targetCtx.canvas.width / dpr : 0
+      if (axisWidth <= 0) return
+
+      targetCtx.clearRect(0, 0, axisWidth, pane.height)
 
       const crosshair = options.getCrosshair?.()
       if (!crosshair || crosshair.activePaneId !== pane.id || crosshair.price === null) return
 
+      const scaleType: ScaleType =
+        period === 'timeshare'
+          ? 'linear'
+          : ((context.settings?.leftAxisType as ScaleType) ?? 'linear')
       const isCrosshairPercent = scaleType === 'percent'
       const crosshairPrice = isCrosshairPercent
         ? pane.yAxis.toPercent(crosshair.price)
         : crosshair.price
+      const crosshairPriceRange = pane.yAxis.getDisplayRange()
       const crosshairLabelRange: { minPrice: number; maxPrice: number } = isCrosshairPercent
         ? (() => {
             const p = pane.yAxis.getDisplayPercentRange()
@@ -114,7 +149,7 @@ export function createLeftYAxisRendererPlugin(options: {
         : undefined
 
       drawCrosshairPriceLabel(
-        leftAxisCtx,
+        targetCtx,
         {
           x: 0,
           y: pane.top,
@@ -136,3 +171,10 @@ export function createLeftYAxisRendererPlugin(options: {
     },
   }
 }
+
+/**
+ * @deprecated 使用 createLeftYAxisStaticRendererPlugin + createLeftYAxisOverlayRendererPlugin
+ */
+export function createLeftYAxisRendererPlugin(options: LeftYAxisOptions): RendererPlugin {
+  return createLeftYAxisStaticRendererPlugin(options)
+}

package/src/engine/renderers/yAxis.ts

@@ -1,37 +1,37 @@
 import type { RendererPlugin, RenderContext } from '../../foundation/plugin/index'
 import { RENDERER_PRIORITY, GLOBAL_PANE_ID } from '../../foundation/plugin/index'
 import { resolveThemeColors } from '../../foundation/tokens/index'
-import type { KLineData } from '../../foundation/types/price'
 import { drawCrosshairPriceLabel, drawAxisPriceLabel } from '../../foundation/utils/kLineDraw/axis'
 import { roundToPhysicalPixel } from '../../foundation/utils/pixelAlign'
 import { getFont, setCanvasFont } from '../../foundation/tokens/fonts'
 
-/**
- * 创建 Y 轴渲染器插件
- * 按 pane capability 决定是否绘制刻度与价格标签
- */
-export function createYAxisRendererPlugin(options: {
+type YAxisOptions = {
   axisWidth: number
   yPaddingPx: number
   getCrosshair?: () => { y: number; price: number; activePaneId: string | null } | null
-}): RendererPlugin {
+}
+
+function shouldShowRightAxis(period: string, settings: RenderContext['settings']): boolean {
+  if (period === 'timeshare') return true
+  const rightType = settings?.rightAxisType as string | undefined
+  return rightType !== 'none'
+}
+
+/**
+ * Y 轴静态层：刻度 + 价格范围带，画到 yAxisCtx（main 级刷新）
+ */
+export function createYAxisStaticRendererPlugin(options: YAxisOptions): RendererPlugin {
   return {
     name: 'yAxis',
-    version: '1.0.0',
-    description: 'Y轴价格刻度渲染器',
-    debugName: 'Y轴',
+    version: '2.0.0',
+    description: 'Y轴价格刻度渲染器（静态）',
+    debugName: 'Y轴刻度',
     paneId: GLOBAL_PANE_ID,
     priority: RENDERER_PRIORITY.SYSTEM_YAXIS,
-    layer: 'overlay',
 
     draw(context: RenderContext) {
-      const { ctx, pane, dpr, yAxisCtx, data, period } = context
-
-      // 分时模式始终显示右轴，不受设置约束
-      if (period !== 'timeshare') {
-        const rightType = context.settings?.rightAxisType as string | undefined
-        if (rightType === 'none') return
-      }
+      const { ctx, pane, dpr, yAxisCtx, period } = context
+      if (!shouldShowRightAxis(period, context.settings)) return
 
       const tokenColors = resolveThemeColors(
         context.theme,
@@ -39,11 +39,8 @@ export function createYAxisRendererPlugin(options: {
         context.colorPresetSettings,
       )
       const scaleType = pane.yAxis.getScaleType()
-
       const targetCtx = yAxisCtx || ctx
       const axisWidth = yAxisCtx?.canvas ? yAxisCtx.canvas.width / dpr : options.axisWidth
-      const displayRange = pane.yAxis.getDisplayRange(pane.priceRange)
-
       const isPercent = scaleType === 'percent' && pane.role === 'price'
 
       if (pane.capabilities.showPriceAxisTicks && context.yAxisTicks) {
@@ -70,7 +67,7 @@ export function createYAxisRendererPlugin(options: {
         }
       }
 
-      // 绘制价格范围带（先于标签，使标签覆盖在范围带之上）
+      // 价格范围带（先于标签，使标签覆盖在范围带之上）
       if (context.yAxisRanges && pane.role === 'price') {
         for (const range of context.yAxisRanges) {
           const topY = range.topY + pane.top
@@ -83,6 +80,36 @@ export function createYAxisRendererPlugin(options: {
           targetCtx.restore()
         }
       }
+    },
+  }
+}
+
+/**
+ * Y 轴动态层：yAxisLabels + 十字线价签，画到 yAxisOverlayCtx（overlay 级刷新）
+ */
+export function createYAxisOverlayRendererPlugin(options: YAxisOptions): RendererPlugin {
+  return {
+    name: 'yAxisOverlay',
+    version: '2.0.0',
+    description: 'Y轴动态标签渲染器',
+    debugName: 'Y轴标签',
+    paneId: GLOBAL_PANE_ID,
+    priority: RENDERER_PRIORITY.SYSTEM_YAXIS + 1,
+    layer: 'overlay',
+
+    draw(context: RenderContext) {
+      const { pane, dpr, yAxisOverlayCtx, yAxisCtx, period } = context
+      if (!shouldShowRightAxis(period, context.settings)) return
+
+      const targetCtx = yAxisOverlayCtx ?? yAxisCtx
+      if (!targetCtx) return
+
+      const axisWidth = targetCtx.canvas ? targetCtx.canvas.width / dpr : options.axisWidth
+      targetCtx.clearRect(0, 0, axisWidth, pane.height)
+
+      const scaleType = pane.yAxis.getScaleType()
+      const displayRange = pane.yAxis.getDisplayRange(pane.priceRange)
+      const isPercent = scaleType === 'percent' && pane.role === 'price'
 
       // 绘制来自 yAxisLabels 的标签（最新价格、极值点、绘图锚点等）
       if (context.yAxisLabels && pane.role === 'price') {
@@ -151,3 +178,11 @@ export function createYAxisRendererPlugin(options: {
     },
   }
 }
+
+/**
+ * @deprecated 使用 createYAxisStaticRendererPlugin + createYAxisOverlayRendererPlugin
+ * 保留兼容：静态+动态合画到 yAxisCtx
+ */
+export function createYAxisRendererPlugin(options: YAxisOptions): RendererPlugin {
+  return createYAxisStaticRendererPlugin(options)
+}