@363045841yyt/klinechart 0.7.12 → 0.8.1-alpha.1

package/src/components/KLineChart.vue

@@ -1,5 +1,15 @@
 <template>
   <div ref="chartWrapperRef" class="chart-wrapper" :data-theme="chartTheme" :style="themeCssVars">
+    <TopToolbar
+      :symbol="currentSymbol"
+      :k-line-level="kLineLevel"
+      :symbol-loading="symbolLoading"
+      :symbol-error="symbolError"
+      @add-overlay-symbol="$emit('addOverlaySymbol')"
+      @k-line-level-change="onKLineLevelChange"
+      @toggle-indicator="onToggleIndicator"
+      @symbol-change="onSymbolChange"
+    />
     <div
       class="chart-stage"
       :class="{
@@ -99,6 +109,7 @@
       </div>
     </div>
     <IndicatorSelector
+      ref="indicatorSelectorRef"
       :active-indicators="activeIndicators"
       :indicator-params="indicatorParams"
       @toggle="handleIndicatorToggle"
@@ -112,7 +123,6 @@
 import { ref, computed, onMounted, onUnmounted, watch, nextTick, shallowRef } from 'vue'
 import {
   SemanticChartController,
-  __setDataFetcher,
   type SemanticChartConfig,
   type DataFetcher,
 } from '@363045841yyt/klinechart-core/semantic'
@@ -133,14 +143,23 @@ import {
   zoomLevelToKWidth,
   kGapFromKWidth,
   getPhysicalKLineConfig,
-  SUB_PANE_INDICATOR_CONFIGS,
-  SUB_PANE_INDICATORS,
   DrawingInteractionController,
 } from '@363045841yyt/klinechart-core/controllers'
+import {
+  getRegisteredIndicatorDefinition,
+  getRegisteredIndicatorDefinitions,
+} from '@363045841yyt/klinechart-core/indicators'
 import type { DrawingObject, DrawingStyle } from '@363045841yyt/klinechart-core/plugin'
 import type { ChartSettings } from '@363045841yyt/klinechart-core/config'
-import { resolveThemeColors, themeToCssVars, lightTheme, darkTheme, type ColorPresetSettings } from '@363045841yyt/klinechart-core'
+import {
+  resolveThemeColors,
+  themeToCssVars,
+  lightTheme,
+  darkTheme,
+  type ColorPresetSettings,
+} from '@363045841yyt/klinechart-core'
 import LeftToolbar from './LeftToolbar.vue'
+import TopToolbar, { type SymbolItem } from './TopToolbar.vue'
 
 const props = withDefaults(
   defineProps<{
@@ -184,13 +203,43 @@ const emit = defineEmits<{
   (e: 'zoomLevelChange', level: number, kWidth: number): void
   (e: 'toggleFullscreen'): void
   (e: 'themeChange', theme: 'light' | 'dark'): void
+  (e: 'addOverlaySymbol'): void
+  (e: 'kLineLevelChange', level: string): void
 }>()
 
+const kLineLevel = ref(props.semanticConfig.data.period)
+const currentSymbol = ref('选择商品')
+const symbolLoading = ref(false)
+const symbolError = ref(false)
+
+function onKLineLevelChange(level: string) {
+  kLineLevel.value = level as typeof kLineLevel.value
+  emit('kLineLevelChange', level)
+}
+
+function onSymbolChange(item: SymbolItem) {
+  symbolLoading.value = true
+  symbolError.value = false
+  currentSymbol.value = item.code
+  controller.value?.setSymbols([
+    {
+      symbol: item.code,
+      exchange: item.exchange,
+      period: kLineLevel.value,
+      source: item.source,
+      startDate: props.semanticConfig.data.startDate,
+      endDate: props.semanticConfig.data.endDate,
+      adjust: props.semanticConfig.data.adjust,
+    },
+  ])
+}
+
 const containerRef = ref<HTMLDivElement | null>(null)
 const chartMainRef = ref<HTMLDivElement | null>(null)
 const chartWrapperRef = ref<HTMLDivElement | null>(null)
 const tooltipLayerRef = ref<HTMLDivElement | null>(null)
 const toolbarRef = ref<InstanceType<typeof LeftToolbar> | null>(null)
+const indicatorSelectorRef = ref<InstanceType<typeof IndicatorSelector> | null>(null)
 provideFullscreenTeleportTarget(chartWrapperRef)
 
 /* ========== 图表控制器 ========== */
@@ -237,7 +286,9 @@ const tooltipColors = computed(() => {
 
 const themeCssVars = computed(() => {
   const theme = chartTheme.value === 'dark' ? darkTheme : lightTheme
-  const overrides = (chartSettings.value.colorPresetSettings as ColorPresetSettings | undefined)?.[chartTheme.value]
+  const overrides = (chartSettings.value.colorPresetSettings as ColorPresetSettings | undefined)?.[
+    chartTheme.value
+  ]
   if (overrides && Object.keys(overrides).length > 0) {
     return themeToCssVars({ ...theme, colors: { ...theme.colors, ...overrides } })
   }
@@ -278,57 +329,12 @@ function handleSettingsChange(settings: ChartSettings) {
   applyThemeFromSettings(controller.value, settings.theme as string)
   controller.value?.updateSettingsFacade(settings)
 
-  if (settings.performanceTest10kKlines) {
-    const testData = generate10kKLineData()
-    console.time('updateData-10k')
-    controller.value?.updateData(testData)
-    console.timeEnd('updateData-10k')
-    dataLength.value = testData.length
-    dataVersion.value++
-  } else {
-    if (semanticController.value && controller.value?.getData()?.length === 10000) {
-      semanticController.value.applyConfig(props.semanticConfig)
-    }
+  controller.value?.setDataFetcher(props.dataFetcher)
+  if (semanticController.value && props.semanticConfig) {
+    semanticController.value.applyConfig(props.semanticConfig)
   }
 }
 
-// 生成1万条K线测试数据
-function generate10kKLineData() {
-  const data: KLineData[] = []
-  const startTime = new Date('2020-01-01').getTime()
-  const dayMs = 24 * 60 * 60 * 1000
-
-  let lastClose = 3000 // 起始价格
-
-  for (let i = 0; i < 10000; i++) {
-    const timestamp = startTime + i * dayMs
-
-    // 生成随机波动
-    const volatility = 0.02 // 2%日波动率
-    const trend = 0.0001 // 轻微上涨趋势
-    const change = (Math.random() - 0.5) * 2 * volatility + trend
-
-    const open = lastClose
-    const close = open * (1 + change)
-    const high = Math.max(open, close) * (1 + Math.random() * 0.01)
-    const low = Math.min(open, close) * (1 - Math.random() * 0.01)
-    const volume = Math.floor(1000000 + Math.random() * 5000000)
-
-    data.push({
-      timestamp,
-      open: parseFloat(open.toFixed(2)),
-      high: parseFloat(high.toFixed(2)),
-      low: parseFloat(low.toFixed(2)),
-      close: parseFloat(close.toFixed(2)),
-      volume,
-    })
-
-    lastClose = close
-  }
-
-  return data
-}
-
 function measureTooltipSize(el: HTMLDivElement, minWidth: number, minHeight: number) {
   const r = el.getBoundingClientRect()
   return {
@@ -475,10 +481,15 @@ function handleSelectTool(toolId: string) {
   drawingController.value?.setTool(toolId as DrawingToolId)
 }
 
+function onToggleIndicator() {
+  indicatorSelectorRef.value?.toggleMenu()
+}
+
 function onUpdateDrawingStyle(style: Partial<DrawingStyle>) {
   const d = selectedDrawing.value
   if (!d || !drawingController.value) return
   drawingController.value.updateDrawingStyle(d.id, style)
+  drawings.value = drawingController.value.getDrawings()
 }
 
 function onDeleteDrawing() {
@@ -614,7 +625,19 @@ function buildPaneLayoutIntent(): PaneSpec[] {
 function getDefaultParams(
   indicatorId: SubIndicatorType,
 ): Record<string, number | boolean | string> {
-  return { ...SUB_PANE_INDICATOR_CONFIGS[indicatorId].defaultParams }
+  if (indicatorId === 'VOLUME') return {}
+  const meta = getRegisteredIndicatorDefinition(indicatorId)
+  if (meta?.runtime?.defaultConfig) {
+    return { ...meta.runtime.defaultConfig } as Record<string, number | boolean | string>
+  }
+  return {}
+}
+
+// 副图指标判定（基于 registry category + VOLUME 特例）
+function isSubPaneIndicator(id: string): boolean {
+  if (id === 'VOLUME') return true
+  const def = getRegisteredIndicatorDefinition(id)
+  return !!def && def.category !== 'main'
 }
 
 // 副图实例计数器：用于生成 'RSI_0', 'MACD_0' 这样的 paneId
@@ -698,9 +721,24 @@ function handleIndicatorToggle(indicatorId: string, active: boolean) {
   if (!c) return
 
   const mainIndicatorIds = [
-    'MA', 'BOLL', 'EXPMA', 'ENE', 'WMA', 'DEMA', 'TEMA', 'HMA',
-    'KAMA', 'SAR', 'SUPERTREND', 'KELTNER', 'DONCHIAN', 'ICHIMOKU',
-    'PIVOT', 'FIB', 'STRUCTURE', 'ZONES',
+    'MA',
+    'BOLL',
+    'EXPMA',
+    'ENE',
+    'WMA',
+    'DEMA',
+    'TEMA',
+    'HMA',
+    'KAMA',
+    'SAR',
+    'SUPERTREND',
+    'KELTNER',
+    'DONCHIAN',
+    'ICHIMOKU',
+    'PIVOT',
+    'FIB',
+    'STRUCTURE',
+    'ZONES',
   ]
   if (mainIndicatorIds.includes(indicatorId)) {
     const existingIndicator = mainActiveIndicators.value.find((id) => id === indicatorId)
@@ -712,7 +750,7 @@ function handleIndicatorToggle(indicatorId: string, active: boolean) {
     return
   }
 
-  if (SUB_PANE_INDICATORS.includes(indicatorId as SubIndicatorType)) {
+  if (isSubPaneIndicator(indicatorId)) {
     if (active) {
       const existingPane = subPanes.value.find((p) => p.indicatorId === indicatorId)
       if (existingPane) return
@@ -734,13 +772,15 @@ function handleIndicatorToggle(indicatorId: string, active: boolean) {
 
 function handleUpdateParams(indicatorId: string, params: Record<string, unknown>) {
   if (
-    indicatorId === 'MA' || indicatorId === 'BOLL' ||
-    indicatorId === 'EXPMA' || indicatorId === 'ENE'
+    indicatorId === 'MA' ||
+    indicatorId === 'BOLL' ||
+    indicatorId === 'EXPMA' ||
+    indicatorId === 'ENE'
   ) {
     controller.value?.updateIndicatorParams(indicatorId, params)
     return
   }
-  if (SUB_PANE_INDICATORS.includes(indicatorId as SubIndicatorType)) {
+  if (isSubPaneIndicator(indicatorId)) {
     subPanes.value
       .filter((p) => p.indicatorId === indicatorId)
       .forEach((pane) => {
@@ -753,7 +793,7 @@ function handleReorderSubIndicators(orderedIndicatorIds: string[]) {
   if (!orderedIndicatorIds.length || subPanes.value.length <= 1) return
 
   const validOrder = orderedIndicatorIds.filter((id): id is SubIndicatorType =>
-    SUB_PANE_INDICATORS.includes(id as SubIndicatorType),
+    isSubPaneIndicator(id),
   )
   if (!validOrder.length) return
 
@@ -904,11 +944,7 @@ function setupChartCallbacks(ctrl: ChartController): void {
     if (viewWidth.value !== vp.plotWidth) {
       viewWidth.value = vp.plotWidth
     }
-    if (
-      zoomLevel.value !== vp.zoomLevel ||
-      kWidth.value !== vp.kWidth ||
-      kGap.value !== vp.kGap
-    ) {
+    if (zoomLevel.value !== vp.zoomLevel || kWidth.value !== vp.kWidth || kGap.value !== vp.kGap) {
       zoomLevel.value = vp.zoomLevel
       kWidth.value = vp.kWidth
       kGap.value = vp.kGap
@@ -932,6 +968,8 @@ function setupChartCallbacks(ctrl: ChartController): void {
     const data = ctrl.data.peek()
     dataLength.value = data.length
     dataVersion.value++
+    symbolLoading.value = false
+    symbolError.value = data.length === 0
   })
 
   const unsubscribeTheme = ctrl.theme.subscribe(() => {
@@ -1010,13 +1048,6 @@ function applyInitialSettings(ctrl: ChartController): void {
   chartSettings.value = initialSettings
   applyThemeFromSettings(ctrl, initialSettings.theme as string)
   ctrl.updateSettingsFacade(initialSettings)
-
-  if (initialSettings.performanceTest10kKlines) {
-    const testData = generate10kKLineData()
-    console.time('updateData-10k')
-    ctrl.updateData(testData)
-    console.timeEnd('updateData-10k')
-  }
 }
 
 function setupDrawingController(ctrl: ChartController): void {
@@ -1044,7 +1075,7 @@ function setupInteractionCallbacks(ctrl: ChartController): void {
 }
 
 function setupSemanticController(ctrl: ChartController): void {
-  __setDataFetcher(props.dataFetcher)
+  ctrl.setDataFetcher(props.dataFetcher)
   semanticController.value = new SemanticChartController(ctrl)
 
   semanticController.value.on('config:error', (error) => {
@@ -1057,21 +1088,12 @@ function setupSemanticController(ctrl: ChartController): void {
     syncSubPanesFromChart()
     nextTick(() => scrollToRight())
   })
-  // 应用副图、主图配置
-  if (chartSettings.value.performanceTest10kKlines) {
-    // 10k 性能测试模式：数据由外部（applyInitialSettings）提供，
-    // 语义控制器只注册指标和标记，不 fetch/updateData，避免数据跳变
-    const result = semanticController.value.applyIndicatorsOnly(props.semanticConfig)
-    if (result && !result.success) {
-      console.error('Semantic config apply failed:', result.errors)
-    }
-  } else {
-    semanticController.value.applyConfig(props.semanticConfig).then((result) => {
-      if (result && !result.success) {
-        console.error('Semantic config apply failed:', result.errors)
-      }
-    })
-  }
+  // 暂时断开语义化配置加载，由搜索结果驱动
+  // semanticController.value.applyConfig(props.semanticConfig).then((result) => {
+  //   if (result && !result.success) {
+  //     console.error('Semantic config apply failed:', result.errors)
+  //   }
+  // })
 }
 
 onMounted(() => {
@@ -1161,20 +1183,23 @@ watch(
 
   display: flex;
   align-items: center;
-  justify-content: center;
   width: var(--kmap-width);
-  height: var(--kmap-height);
+  height: calc(var(--kmap-height) - 32px);
   min-height: 300px;
   flex-direction: column;
+  margin: 16px 0;
+  padding: 0;
+  box-sizing: border-box;
+  gap: 4px;
 }
 
 .chart-stage {
   width: 95%;
-  height: 85%;
+  flex: 1;
   min-height: 255px;
   display: flex;
   align-items: stretch;
-  gap: 8px;
+  gap: 4px;
 }
 
 .chart-main {
@@ -1243,7 +1268,7 @@ watch(
   -ms-overflow-style: none;
   border: 1px solid var(--chart-border);
   border-right: 0;
-  border-radius: 6px 0 0 6px;
+  border-radius: 3px 0 0 3px;
   box-sizing: border-box;
   background: var(--chart-bg);
 
@@ -1266,8 +1291,8 @@ watch(
   background: var(--chart-bg);
   overflow: visible;
   border: 1px solid var(--chart-border);
-  border-top-right-radius: 6px;
-  border-bottom-right-radius: 6px;
+  border-top-right-radius: 3px;
+  border-bottom-right-radius: 3px;
 
   -webkit-touch-callout: none;
   -webkit-user-select: none;
@@ -1311,8 +1336,12 @@ watch(
 }
 
 @media (max-width: 768px), (max-height: 640px) {
+  .chart-wrapper {
+    gap: 4px;
+  }
+
   .chart-stage {
-    gap: 6px;
+    gap: 4px;
   }
 }
 </style>

package/src/components/KLineLevelDropdown.vue

@@ -0,0 +1,45 @@
+<template>
+  <Dropdown
+    :model-value="modelValue"
+    :options="kLineLevelOptions"
+    label="级别"
+    title="K线级别"
+    size="md"
+    @update:model-value="emit('update:modelValue', $event as KLineLevel)"
+  />
+</template>
+
+<script setup lang="ts">
+import Dropdown from './Dropdown.vue'
+
+export type KLineLevel =
+  | '1min'
+  | '5min'
+  | '15min'
+  | '30min'
+  | '60min'
+  | 'weekly'
+  | 'monthly'
+  | 'quarterly'
+  | 'yearly'
+
+const kLineLevelOptions: Array<{ label: string; value: KLineLevel }> = [
+  { label: '1min', value: '1min' },
+  { label: '5min', value: '5min' },
+  { label: '15min', value: '15min' },
+  { label: '30min', value: '30min' },
+  { label: '1小时', value: '60min' },
+  { label: '1周', value: 'weekly' },
+  { label: '1月', value: 'monthly' },
+  { label: '3月', value: 'quarterly' },
+  { label: '12月', value: 'yearly' },
+]
+
+defineProps<{
+  modelValue?: string
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', level: KLineLevel): void
+}>()
+</script>

package/src/components/LeftToolbar.vue

@@ -307,7 +307,7 @@ onUnmounted(() => {
   gap: 6px;
   padding: 8px 5px;
   border: 1px solid var(--klc-color-border-chart);
-  border-radius: 6px;
+  border-radius: 3px;
   background: var(--klc-color-background);
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
   box-sizing: border-box;
@@ -333,7 +333,7 @@ onUnmounted(() => {
   height: 28px;
   padding: 0;
   border: 1px solid transparent;
-  border-radius: 4px;
+  border-radius: 3px;
   background: transparent;
   color: var(--klc-color-axis-text);
   cursor: pointer;
@@ -420,7 +420,7 @@ onUnmounted(() => {
   backdrop-filter: blur(8px);
   -webkit-backdrop-filter: blur(8px);
   border: 1px solid var(--klc-color-border-chart);
-  border-radius: 6px;
+  border-radius: 3px;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
   box-sizing: border-box;
   z-index: 100;
@@ -451,7 +451,7 @@ onUnmounted(() => {
     flex-basis: 36px;
     padding: 6px 4px;
     gap: 5px;
-    border-radius: 5px;
+    border-radius: 3px;
   }
 
   .left-toolbar__group {