@363045841yyt/klinechart-core 0.7.12-alpha.1 → 0.7.13

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

@@ -1,10 +1,12 @@
 import type { RendererPluginWithHost, RenderContext, PluginHost } from '../../../plugin'
 import { RENDERER_PRIORITY } from '../../../plugin'
+import type { KLineData } from '../../../types/price'
 import type { KeltnerRenderState } from '../../indicators/keltnerState'
 import { createKeltnerStateKey, EMPTY_KELTNER_STATE } from '../../indicators/keltnerState'
 import { Indicator } from '../../indicators/indicatorDefinitionRegistry'
-import { resolveStateKey } from '../../indicators/indicatorMetadata'
+import { resolveStateKey, type TitleInfo, type GetTitleInfoFn } from '../../indicators/indicatorMetadata'
 import type { IndicatorScheduler, KeltnerSchedulerConfig } from '../../indicators/scheduler'
+import { calcKeltnerData } from '../../indicators/calculators'
 import { createBandVisibleStateComposer } from '../../indicators/visibleStateComposers'
 
 const KELTNER_UPPER_COLOR = '#7c3aed'
@@ -122,23 +124,40 @@ function drawLine(ctx: CanvasRenderingContext2D, pts: Point[], color: string): v
     ctx.stroke()
 }
 
+export function getKeltnerTitleInfo(
+    _data: KLineData[],
+    index: number | null,
+    params: Record<string, number | boolean | string>,
+    host: PluginHost,
+    paneId: string,
+): TitleInfo | null {
+    if (index === null) return null
+    const state = host.getSharedState<KeltnerRenderState>(createKeltnerStateKey(paneId))
+    const p = state?.series[index]
+    if (!p) return null
+
+    return {
+        name: 'Keltner',
+        params: [(params.emaPeriod as number) ?? 20, (params.atrPeriod as number) ?? 10, (params.multiplier as number) ?? 2],
+        values: [
+            { label: 'Upper', value: p.upper, color: '#7c3aed' },
+            { label: 'Mid', value: p.middle, color: '#f59e0b' },
+            { label: 'Lower', value: p.lower, color: '#7c3aed' },
+        ],
+    }
+}
+
 @Indicator({
     name: 'keltner',
     displayName: 'Keltner',
+    getTitleInfo: getKeltnerTitleInfo,
     category: 'main',
-    stateKey: createKeltnerStateKey,
     defaultPaneId: 'main',
-    paneIdField: 'keltnerPaneId',
     allowMainPane: true,
     mainPane: { rendererName: 'keltner_main', toActiveConfig: (params, active) => ({ ...params, showUpper: active, showMiddle: active, showLower: active }) },
     scale: { indicatorKey: 'keltner', label: 'Keltner', decimals: 2 },
     visibleState: { compose: createBandVisibleStateComposer('keltner', EMPTY_KELTNER_STATE, 'lower', 'upper') },
-    updateConfig: (scheduler, params, paneId) => {
-        (scheduler as IndicatorScheduler).updateKeltnerConfig(params as Partial<KeltnerSchedulerConfig>, paneId)
-    },
-    applyResult: (host, state, paneId) => {
-        host.setSharedState(createKeltnerStateKey(paneId), state as any, 'indicator_scheduler')
-    },
+    runtime: { defaultConfig:{emaPeriod:20,atrPeriod:10,multiplier:2,showUpper:true,showMiddle:true,showLower:true}, computeKey:'calcKeltnerData', compute:(data,c)=>calcKeltnerData(data,c.emaPeriod,c.atrPeriod,c.multiplier) },
 })
 class KeltnerDefinition {
     static rendererFactory = createKeltnerRendererPlugin

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

@@ -9,6 +9,8 @@ import { Indicator } from '../../indicators/indicatorDefinitionRegistry'
 import { resolveStateKey } from '../../indicators/indicatorMetadata'
 import type { IndicatorScheduler, KSTSchedulerConfig } from '../../indicators/scheduler'
 import { createKstScaleRendererPlugin } from './scale/kst_scale'
+import { calcKSTData } from '../../indicators/calculators'
+import type { KLineData } from '../../../types/price'
 
 type LinePoint = { x: number; y: number }
 
@@ -208,7 +210,7 @@ const { ctx, pane, range, scrollLeft, dpr, kLineCenters, lineWebGLSurface } = co
         },
 
         setConfig() {
-            // no-op: 配置通过 scheduler.updateKSTConfig() 更新
+            // no-op: 配置通过 scheduler.updateIndicatorConfig() 更新
         },
     }
 }
@@ -259,18 +261,19 @@ function drawKSTLinesWithCanvas2D(
  * 获取 KST 标题信息（供 paneTitle 使用）
  */
 export function getKSTTitleInfo(
-    index: number,
-    roc1: number,
-    roc2: number,
-    roc3: number,
-    roc4: number,
-    signalPeriod: number,
+    _data: KLineData[],
+    index: number | null,
+    params: Record<string, number | boolean | string>,
     pluginHost: PluginHost,
-    paneId: string = 'sub_KST',
-    theme: 'light' | 'dark' = 'light',
-    isAsiaMarket?: boolean
+    paneId: string,
 ): { name: string; params: number[]; values: Array<{ label: string; value: number; color: string }> } | null {
-    const colors = resolveThemeColors(theme, isAsiaMarket)
+    if (index === null) return null
+    const roc1 = (params.roc1 as number) ?? 10
+    const roc2 = (params.roc2 as number) ?? 15
+    const roc3 = (params.roc3 as number) ?? 20
+    const roc4 = (params.roc4 as number) ?? 30
+    const signalPeriod = (params.signalPeriod as number) ?? 9
+    const colors = resolveThemeColors('light')
     const state = pluginHost.getSharedState<KSTRenderState>(createKSTStateKey(paneId))
     if (!state) return null
 
@@ -294,17 +297,11 @@ export function getKSTTitleInfo(
     name: 'kst',
     displayName: 'KST',
     category: 'oscillator',
-    stateKey: createKSTStateKey,
     defaultPaneId: 'sub_KST',
-    paneIdField: 'kstPaneId',
     scaleRendererFactory: createKstScaleRendererPlugin,
-    updateConfig: (scheduler, params, paneId) => {
-    (scheduler as IndicatorScheduler).updateKSTConfig(params as Partial<KSTSchedulerConfig>, paneId)
-  },
     visibleState: { compose: createPaddedPointVisibleStateComposer('kst', EMPTY_KST_STATE, ['kst', 'signal'] as const) },
-    applyResult: (host, state, paneId) => {
-        host.setSharedState(createKSTStateKey(paneId), state as any, 'indicator_scheduler')
-    },
+    getTitleInfo: getKSTTitleInfo,
+    runtime: { defaultConfig:{roc1:10,roc2:15,roc3:20,roc4:30,signalPeriod:9,showKST:true,showSignal:true}, computeKey:'calcKSTData', compute:(data,c)=>calcKSTData(data,c.roc1,c.roc2,c.roc3,c.roc4,c.signalPeriod) },
 })
 class KSTIndicatorDefinition {
     static rendererFactory = createKSTRendererPlugin

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

@@ -3,9 +3,10 @@ import { RENDERER_PRIORITY } from '../../../plugin'
 import { MA_STATE_KEY, type MARenderState } from '../../indicators/maState'
 import { Indicator } from '../../indicators/indicatorDefinitionRegistry'
 import { resolveStateKey } from '../../indicators/indicatorMetadata'
-import type { IndicatorPriceRangeComputer, IndicatorRenderStateComposer } from '../../indicators/indicatorMetadata'
+import type { IndicatorPriceRangeComputer, IndicatorRenderStateComposer, GetTitleInfoFn, TitleInfo, TitleValueItem } from '../../indicators/indicatorMetadata'
+import type { KLineData } from '../../../types/price'
 import type { IndicatorScheduler } from '../../indicators/scheduler'
-import type { MAFlags } from '../../indicators/calculators'
+import { calcMAData, type MAFlags } from '../../indicators/calculators'
 import { alignToPhysicalPixelCenter } from '../../draw/pixelAlign'
 import { resolveThemeColors } from '../../../tokens'
 
@@ -93,11 +94,49 @@ function getMAStateKey(host: PluginHost | null): string | null {
     return resolveStateKey(meta.stateKey)
 }
 
+export function getMATitleInfo(
+    _data: KLineData[],
+    index: number | null,
+    _params: Record<string, number | boolean | string>,
+    pluginHost: PluginHost,
+    _paneId: string,
+): TitleInfo | null {
+    if (index === null) return null
+
+    const stateKey = getMAStateKey(pluginHost)
+    if (!stateKey) return null
+
+    const state = pluginHost?.getSharedState<MARenderState>(stateKey)
+    if (!state || state.visibleMin > state.visibleMax) return null
+
+    const maColors: Record<number, string> = {
+        5: '#f5a623',
+        10: '#4ecdc4',
+        20: '#45b7d1',
+        30: '#96ceb4',
+        60: '#dda0dd',
+    }
+
+    const values: TitleValueItem[] = []
+    for (const period of state.enabledPeriods) {
+        const series = state.series[period]
+        const value = series?.[index]
+        if (value === undefined) continue
+
+        values.push({
+            label: `MA${period}`,
+            value,
+            color: maColors[period] ?? '#f5a623',
+        })
+    }
+
+    return { name: 'MA', params: [], values }
+}
+
 @Indicator({
     name: 'ma',
     displayName: 'MA',
     category: 'main',
-    stateKey: MA_STATE_KEY,
     defaultPaneId: 'main',
     mainPane: {
         rendererName: 'ma',
@@ -111,9 +150,6 @@ function getMAStateKey(host: PluginHost | null): string | null {
         computePriceRange: computeMAPriceRange,
         composeRenderState: composeMARenderState,
     },
-    updateConfig: (scheduler, params) => {
-        (scheduler as IndicatorScheduler).updateMAConfig(params as MAFlags)
-    },
     semantic: {
         apply: (chart, indicator) => {
             const periods = (indicator as { params?: { periods?: number[] } }).params?.periods ?? [5, 10, 20, 30, 60]
@@ -125,9 +161,8 @@ function getMAStateKey(host: PluginHost | null): string | null {
             chart.updateRendererConfig('ma', maFlags)
         },
     },
-    applyResult: (host, state, _paneId) => {
-        host.setSharedState(MA_STATE_KEY, state as any, 'ma_scheduler')
-    },
+    runtime: { defaultConfig:{ma5:true,ma10:true,ma20:true,ma30:true,ma60:true}, computeKey:'calcMAData', compute:(data,c)=>{const p=[5,10,20,30,60];const r:Record<number,(number|undefined)[]>={};for(const o of p){if((c as any)['ma'+o])r[o]=calcMAData(data,o)}return r} },
+    getTitleInfo: getMATitleInfo,
 })
 class MADefinition {
     static rendererFactory = createMARendererPlugin

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

@@ -345,25 +345,25 @@ function drawMacdBarsWithCanvas2D(
   ctx.fillStyle = barUpColor
   for (let i = 0; i < barUpCount; i++) {
     const off = i * 4
-    ctx.fillRect(barUpBuf[off], barUpBuf[off + 1], barUpBuf[off + 2], barUpBuf[off + 3])
+    ctx.fillRect(barUpBuf[off]!, barUpBuf[off + 1]!, barUpBuf[off + 2]!, barUpBuf[off + 3]!)
   }
 
   ctx.fillStyle = barUpLightColor
   for (let i = 0; i < barUpLightCount; i++) {
     const off = i * 4
-    ctx.fillRect(barUpLightBuf[off], barUpLightBuf[off + 1], barUpLightBuf[off + 2], barUpLightBuf[off + 3])
+    ctx.fillRect(barUpLightBuf[off]!, barUpLightBuf[off + 1]!, barUpLightBuf[off + 2]!, barUpLightBuf[off + 3]!)
   }
 
   ctx.fillStyle = barDownColor
   for (let i = 0; i < barDownCount; i++) {
     const off = i * 4
-    ctx.fillRect(barDownBuf[off], barDownBuf[off + 1], barDownBuf[off + 2], barDownBuf[off + 3])
+    ctx.fillRect(barDownBuf[off]!, barDownBuf[off + 1]!, barDownBuf[off + 2]!, barDownBuf[off + 3]!)
   }
 
   ctx.fillStyle = barDownLightColor
   for (let i = 0; i < barDownLightCount; i++) {
     const off = i * 4
-    ctx.fillRect(barDownLightBuf[off], barDownLightBuf[off + 1], barDownLightBuf[off + 2], barDownLightBuf[off + 3])
+    ctx.fillRect(barDownLightBuf[off]!, barDownLightBuf[off + 1]!, barDownLightBuf[off + 2]!, barDownLightBuf[off + 3]!)
   }
 
   ctx.restore()
@@ -438,48 +438,43 @@ export function calcMACDAtIndex(
  * 从 pluginHost 获取已计算好的数据，避免重复计算
  */
 export function getMACDTitleInfo(
-  index: number,
-  fastPeriod: number,
-  slowPeriod: number,
-  signalPeriod: number,
-  pluginHost: PluginHost,
-  paneId: string = 'sub_MACD',
-  theme: 'light' | 'dark' = 'light',
-  isAsiaMarket?: boolean
+    _data: KLineData[],
+    index: number | null,
+    params: Record<string, number | boolean | string>,
+    pluginHost: PluginHost,
+    paneId: string,
 ): { name: string; params: number[]; values: Array<{ label: string; value: number; color: string }> } | null {
-  const colors = resolveThemeColors(theme, isAsiaMarket)
-  const state = pluginHost.getSharedState<MACDRenderState>(createMACDStateKey(paneId))
-  if (!state) return null
-
-  const point = state.series[index]
-  if (!point) return null
-
-  return {
-    name: 'MACD',
-    params: [fastPeriod, slowPeriod, signalPeriod],
-    values: [
-      { label: 'DIF', value: point.dif, color: colors.macd.dif },
-      { label: 'DEA', value: point.dea, color: colors.macd.dea },
-      { label: 'MACD', value: point.macd, color: point.macd >= 0 ? colors.macd.barUp : colors.macd.barDown },
-    ],
-  }
+    if (index === null) return null
+    const fastPeriod = (params.fastPeriod as number) ?? 12
+    const slowPeriod = (params.slowPeriod as number) ?? 26
+    const signalPeriod = (params.signalPeriod as number) ?? 9
+    const colors = resolveThemeColors('light')
+    const state = pluginHost.getSharedState<MACDRenderState>(createMACDStateKey(paneId))
+    if (!state) return null
+
+    const point = state.series[index]
+    if (!point) return null
+
+    return {
+        name: 'MACD',
+        params: [fastPeriod, slowPeriod, signalPeriod],
+        values: [
+            { label: 'DIF', value: point.dif, color: colors.macd.dif },
+            { label: 'DEA', value: point.dea, color: colors.macd.dea },
+            { label: 'MACD', value: point.macd, color: point.macd >= 0 ? colors.macd.barUp : colors.macd.barDown },
+        ],
+    }
 }
 
 @Indicator({
   name: 'macd',
   displayName: 'MACD',
   category: 'oscillator',
-  stateKey: createMACDStateKey,
   defaultPaneId: 'sub_MACD',
-  paneIdField: 'macdPaneId',
   scaleRendererFactory: createMacdScaleRendererPlugin,
   visibleState: { compose: createMACDVisibleStateComposer('macd', EMPTY_MACD_STATE) },
-  updateConfig: (scheduler, params, paneId) => {
-    (scheduler as IndicatorScheduler).updateMACDConfig(params as Partial<MACDSchedulerConfig>, paneId)
-  },
-  applyResult: (host, state, paneId) => {
-    host.setSharedState(createMACDStateKey(paneId), state as any, 'indicator_scheduler')
-  },
+    getTitleInfo: getMACDTitleInfo,
+    runtime: { defaultConfig:{fastPeriod:12,slowPeriod:26,signalPeriod:9,showDIF:true,showDEA:true,showBAR:true}, computeKey:'calcMACDData', compute:(data,c)=>calcMACDData(data,c.fastPeriod,c.slowPeriod,c.signalPeriod) },
 })
 class MACDIndicatorDefinition {
   static rendererFactory = createMACDRendererPlugin

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

@@ -1,12 +1,9 @@
 import type { RendererPluginWithHost, PluginHost, RenderContext } from '../../../plugin'
 import { RENDERER_PRIORITY } from '../../../plugin'
 import type { KLineData } from '../../../types/price'
-import { MA_STATE_KEY, type MARenderState } from '../../indicators/maState'
-import { BOLL_STATE_KEY, type BOLLRenderState } from '../../indicators/bollState'
-import { EXPMA_STATE_KEY, type EXPMARenderState } from '../../indicators/expmaState'
-import { ENE_STATE_KEY, type ENERenderState } from '../../indicators/eneState'
 import { resolveThemeColors } from '../../../tokens'
 import { getFont, setCanvasFont } from '../../theme/fonts'
+import type { IndicatorScheduler } from '../../indicators/scheduler'
 
 const textWidthCache = new Map<string, number>()
 const TEXT_WIDTH_CACHE_LIMIT = 512
@@ -26,16 +23,9 @@ function measureTextWidth(ctx: CanvasRenderingContext2D, text: string): number {
   return width
 }
 
-/** 指标行数据 */
-interface IndicatorRow {
-  enabled: boolean
-  params: Record<string, unknown>
-}
-
 /** 渲染器配置 */
 interface MainIndicatorLegendConfig {
   yPaddingPx: number
-  indicators: Record<string, IndicatorRow>
 }
 
 /**
@@ -49,12 +39,6 @@ export function createMainIndicatorLegendRendererPlugin(options: {
 }): RendererPluginWithHost {
   const config: MainIndicatorLegendConfig = {
     yPaddingPx: options.yPaddingPx,
-    indicators: {
-      MA: { enabled: true, params: {} },
-      BOLL: { enabled: false, params: { period: 20, multiplier: 2 } },
-      EXPMA: { enabled: false, params: { fastPeriod: 12, slowPeriod: 50 } },
-      ENE: { enabled: false, params: { period: 10, deviation: 11 } },
-    },
   }
 
   let pluginHost: PluginHost | null = null
@@ -74,7 +58,7 @@ export function createMainIndicatorLegendRendererPlugin(options: {
     },
 
     getDeclaredNamespaces(): string[] {
-      return [MA_STATE_KEY, BOLL_STATE_KEY, EXPMA_STATE_KEY, ENE_STATE_KEY]
+      return []
     },
 
     draw(context: RenderContext) {
@@ -87,153 +71,64 @@ export function createMainIndicatorLegendRendererPlugin(options: {
       const lineHeight = fontSize + 6
       const legendX = 12
       const gap = 10
+      const legendYOffset = 6
 
       overlayCtx.save()
       setCanvasFont(overlayCtx, getFont(fontSize))
       overlayCtx.textAlign = 'left'
+      overlayCtx.textBaseline = 'top'
 
       const targetIndex = crosshairIndex ?? Math.min(range.end - 1, klineData.length - 1)
       const rows: Array<{ draw: (rowIndex: number) => void }> = []
 
-      const maIndicator = config.indicators.MA
-      if (maIndicator?.enabled) {
-        rows.push({
-          draw: (rowIndex: number) => {
-            const items: Array<{ label: string; color: string; value?: number }> = []
-            const state = pluginHost?.getSharedState<MARenderState>(MA_STATE_KEY)
-
-            if (state && state.visibleMin <= state.visibleMax) {
-              for (const period of state.enabledPeriods) {
-                const colorKey = `ma${period}` as keyof typeof colors.ma
-                const series = state.series[period]
-                const value = series?.[targetIndex]
-
-                items.push({
-                  label: `MA${period}`,
-                  color: colors.ma[colorKey] || colors.ma.ma5,
-                  value: value,
-                })
-              }
-            }
-
-            if (items.length > 0) {
-              let x = legendX
-              const y = config.yPaddingPx / 2 + fontSize + rowIndex * lineHeight
-
-              overlayCtx.fillStyle = colors.text.primary
-              overlayCtx.fillText('MA', x, y)
-              x += measureTextWidth(overlayCtx, 'MA') + gap
-
-              for (const it of items) {
-                const valText = typeof it.value === 'number' ? ` ${it.value.toFixed(2)}` : ''
-                const text = `${it.label}${valText}`
-                overlayCtx.fillStyle = it.color
-                overlayCtx.fillText(text, x, y)
-                x += measureTextWidth(overlayCtx, text) + gap
-              }
-            }
-          }
-        })
-      }
-
-      const bollIndicator = config.indicators.BOLL
-      if (bollIndicator?.enabled) {
-        rows.push({
-          draw: (rowIndex: number) => {
-            const bollState = pluginHost?.getSharedState<BOLLRenderState>(BOLL_STATE_KEY)
-            const boll = bollState?.series[targetIndex]
-            const period = bollState?.params.period ?? 20
-            const multiplier = bollState?.params.multiplier ?? 2
-
-            let x = legendX
-            const y = config.yPaddingPx / 2 + fontSize + rowIndex * lineHeight
-            const titleText = `BOLL(${period},${multiplier})`
-
-            overlayCtx.fillStyle = colors.text.primary
-            overlayCtx.fillText(titleText, x, y)
-            x += measureTextWidth(overlayCtx, titleText) + gap
-
-            if (boll) {
-              const upperText = `上轨:${boll.upper.toFixed(2)}`
-              overlayCtx.fillStyle = colors.boll.upper
-              overlayCtx.fillText(upperText, x, y)
-              x += measureTextWidth(overlayCtx, upperText) + gap
+      const scheduler = pluginHost && typeof pluginHost.getService === 'function'
+        ? pluginHost.getService<IndicatorScheduler>('indicatorScheduler')
+        : undefined
 
-              const middleText = `中轨:${boll.middle.toFixed(2)}`
-              overlayCtx.fillStyle = colors.boll.middle
-              overlayCtx.fillText(middleText, x, y)
-              x += measureTextWidth(overlayCtx, middleText) + gap
+      const mainIndicators = scheduler?.getMainIndicators() ?? []
+      for (const meta of mainIndicators) {
+        if (!meta.getTitleInfo) continue
+        if (!scheduler?.isMainIndicatorActive(meta.name)) continue
+        const params = scheduler?.getMainIndicatorParams(meta.name) ?? {}
+        const getTitleInfo = meta.getTitleInfo
 
-              const lowerText = `下轨:${boll.lower.toFixed(2)}`
-              overlayCtx.fillStyle = colors.boll.lower
-              overlayCtx.fillText(lowerText, x, y)
-            }
-          }
-        })
-      }
-
-      const expmaIndicator = config.indicators.EXPMA
-      if (expmaIndicator?.enabled) {
         rows.push({
           draw: (rowIndex: number) => {
-            const expmaState = pluginHost?.getSharedState<EXPMARenderState>(EXPMA_STATE_KEY)
-            const expma = expmaState?.series[targetIndex]
-            const fastPeriod = expmaState?.params.fastPeriod ?? 12
-            const slowPeriod = expmaState?.params.slowPeriod ?? 50
+            const titleInfo = getTitleInfo(
+              klineData,
+              targetIndex,
+              params as Record<string, number | boolean | string>,
+              pluginHost!,
+              'main',
+            )
+            if (!titleInfo) return
 
             let x = legendX
-            const y = config.yPaddingPx / 2 + fontSize + rowIndex * lineHeight
-            const titleText = `EXPMA(${fastPeriod},${slowPeriod})`
-
+            let y = config.yPaddingPx / 2 + legendYOffset + rowIndex * lineHeight
+            // 指标名称
             overlayCtx.fillStyle = colors.text.primary
-            overlayCtx.fillText(titleText, x, y)
-            x += measureTextWidth(overlayCtx, titleText) + gap
-
-            if (expma) {
-              const fastText = `快:${expma.fast.toFixed(2)}`
-              overlayCtx.fillStyle = colors.expma.fast
-              overlayCtx.fillText(fastText, x, y)
-              x += measureTextWidth(overlayCtx, fastText) + gap
-
-              const slowText = `慢:${expma.slow.toFixed(2)}`
-              overlayCtx.fillStyle = colors.expma.slow
-              overlayCtx.fillText(slowText, x, y)
+            overlayCtx.fillText(titleInfo.name, x, y)
+            x += measureTextWidth(overlayCtx, titleInfo.name)
+
+            // 指标参数
+            if (titleInfo.params && titleInfo.params.length > 0) {
+              const paramText = `(${titleInfo.params.join(',')})`
+              overlayCtx.fillStyle = colors.text.tertiary
+              overlayCtx.fillText(paramText, x, y)
+              x += measureTextWidth(overlayCtx, paramText) + gap
+            } else {
+              x += gap
             }
-          }
-        })
-      }
 
-      const eneIndicator = config.indicators.ENE
-      if (eneIndicator?.enabled) {
-        rows.push({
-          draw: (rowIndex: number) => {
-            const eneState = pluginHost?.getSharedState<ENERenderState>(ENE_STATE_KEY)
-            const ene = eneState?.series[targetIndex]
-            const period = eneState?.params.period ?? 10
-            const deviation = eneState?.params.deviation ?? 11
-
-            let x = legendX
-            const y = config.yPaddingPx / 2 + fontSize + rowIndex * lineHeight
-            const titleText = `ENE(${period},${deviation})`
-
-            overlayCtx.fillStyle = colors.text.primary
-            overlayCtx.fillText(titleText, x, y)
-            x += measureTextWidth(overlayCtx, titleText) + gap
-
-            if (ene) {
-              const upperText = `上轨:${ene.upper.toFixed(2)}`
-              overlayCtx.fillStyle = colors.ene.upper
-              overlayCtx.fillText(upperText, x, y)
-              x += measureTextWidth(overlayCtx, upperText) + gap
-
-              const middleText = `中轨:${ene.middle.toFixed(2)}`
-              overlayCtx.fillStyle = colors.ene.middle
-              overlayCtx.fillText(middleText, x, y)
-              x += measureTextWidth(overlayCtx, middleText) + gap
-
-              const lowerText = `下轨:${ene.lower.toFixed(2)}`
-              overlayCtx.fillStyle = colors.ene.lower
-              overlayCtx.fillText(lowerText, x, y)
+            // 指标数值
+            if (titleInfo.values) {
+              y += 1
+              for (const item of titleInfo.values) {
+                const valText = `${item.label} ${item.value.toFixed(3)}`
+                overlayCtx.fillStyle = item.color
+                overlayCtx.fillText(valText, x, y)
+                x += measureTextWidth(overlayCtx, valText) + gap
+              }
             }
           }
         })
@@ -246,7 +141,6 @@ export function createMainIndicatorLegendRendererPlugin(options: {
     getConfig() {
       return {
         yPaddingPx: config.yPaddingPx,
-        indicators: { ...config.indicators },
       }
     },
 
@@ -254,19 +148,6 @@ export function createMainIndicatorLegendRendererPlugin(options: {
       if (typeof newConfig.yPaddingPx === 'number') {
         config.yPaddingPx = newConfig.yPaddingPx
       }
-      if (newConfig.indicators && typeof newConfig.indicators === 'object') {
-        for (const [id, row] of Object.entries(newConfig.indicators) as [string, IndicatorRow][]) {
-          if (!config.indicators[id]) {
-            config.indicators[id] = { enabled: false, params: {} }
-          }
-          if (row.enabled !== undefined) {
-            config.indicators[id].enabled = row.enabled
-          }
-          if (row.params) {
-            config.indicators[id].params = row.params
-          }
-        }
-      }
     },
   }
 }

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

@@ -2,10 +2,13 @@ import type { RendererPluginWithHost, RenderContext, PluginHost } from '../../..
 import { RENDERER_PRIORITY } from '../../../plugin'
 import type { MFIRenderState } from '../../indicators/mfiState'
 import { createMFIStateKey, EMPTY_MFI_STATE } from '../../indicators/mfiState'
+import type { TitleInfo } from '../../indicators/indicatorMetadata'
+import type { KLineData } from '../../../types/price'
 import { Indicator } from '../../indicators/indicatorDefinitionRegistry'
 import { createFixedRangeSparseVisibleStateComposer } from '../../indicators/visibleStateComposers'
 import { resolveStateKey } from '../../indicators/indicatorMetadata'
 import type { IndicatorScheduler, MFISchedulerConfig } from '../../indicators/scheduler'
+import { calcMFIData } from '../../indicators/calculators'
 
 const MFI_COLOR = '#fb923c'
 
@@ -127,20 +130,38 @@ export function createMFIRendererPlugin(options: { paneId?: string } = {}): Rend
     }
 }
 
+export function getMFITitleInfo(
+    _data: KLineData[],
+    index: number | null,
+    params: Record<string, number | boolean | string>,
+    host: PluginHost,
+    paneId: string,
+): TitleInfo | null {
+    if (index === null) return null
+    const period = (params.period as number) ?? 14
+    const state = host.getSharedState<MFIRenderState>(createMFIStateKey(paneId))
+    const value = state?.series[index]
+    if (value === undefined) return null
+
+    return {
+        name: 'MFI',
+        params: [period],
+        values: [{ label: 'MFI', value, color: MFI_COLOR }],
+    }
+}
+
 @Indicator({
     name: 'mfi',
     displayName: 'MFI',
     category: 'volume',
-    stateKey: createMFIStateKey,
     defaultPaneId: 'sub_MFI',
-    paneIdField: 'mfiPaneId',
     visibleState: { compose: createFixedRangeSparseVisibleStateComposer('mfi', EMPTY_MFI_STATE) },
     scale: { indicatorKey: 'mfi', label: 'MFI', decimals: 2 },
-    updateConfig: (scheduler, params, paneId) => {
-        (scheduler as IndicatorScheduler).updateMFIConfig(params as Partial<MFISchedulerConfig>, paneId)
-    },
-    applyResult: (host, state, paneId) => {
-        host.setSharedState(createMFIStateKey(paneId), state as any, 'indicator_scheduler')
+    getTitleInfo: getMFITitleInfo,
+    runtime: {
+        defaultConfig: { period: 14, showMFI: true },
+        computeKey: 'calcMFIData',
+        compute: (data, c) => calcMFIData(data, c.period),
     },
 })
 class MFIIndicatorDefinition {