@363045841yyt/klinechart 0.8.1-alpha.3 → 0.8.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@363045841yyt/klinechart",
-  "version": "0.8.1-alpha.3",
+  "version": "0.8.1",
   "description": "Vue 3 bindings for @363045841yyt/klinechart-core. Idiomatic composables, SFC components.",
   "license": "MIT",
   "repository": {

package/src/components/CompareSymbolSelector.vue

@@ -11,6 +11,7 @@
     >
       <span class="compare-chip__icon" aria-hidden="true">+</span>
       <span class="compare-chip__text">比较商品</span>
+      <span v-if="comparisonLoading" class="compare-chip__spinner" />
       <span v-if="selected.length > 0" class="compare-chip__badge">{{ selected.length }}</span>
     </button>
     <Transition name="symbol-popover">
@@ -65,6 +66,10 @@
               :key="item.code"
               class="compare-selected__item"
             >
+              <span
+                class="compare-selected__color"
+                :style="{ background: comparisonColors?.get(item.code) ?? '#888' }"
+              />
               <span class="compare-selected__code">{{ item.code }}</span>
               <span class="compare-selected__desc">{{ item.description }}</span>
               <button
@@ -140,6 +145,8 @@ import type { SymbolItem } from './SymbolSelector.vue'
 const props = withDefaults(defineProps<{
   symbols: SymbolItem[]
   selected?: string[]
+  comparisonColors?: Map<string, string>
+  comparisonLoading?: boolean
 }>(), {
   selected: () => [],
 })
@@ -280,6 +287,20 @@ onBeforeUnmount(() => document.removeEventListener('mousedown', onDocumentClick)
   line-height: 1;
 }
 
+.compare-chip__spinner {
+  display: inline-block;
+  width: 12px;
+  height: 12px;
+  border: 2px solid var(--klc-color-axis-text);
+  border-top-color: transparent;
+  border-radius: 50%;
+  animation: compare-spin 0.6s linear infinite;
+}
+
+@keyframes compare-spin {
+  to { transform: rotate(360deg); }
+}
+
 .compare-popover {
   position: absolute;
   top: calc(100% + 8px);
@@ -406,6 +427,14 @@ onBeforeUnmount(() => document.removeEventListener('mousedown', onDocumentClick)
   line-height: 1.3;
 }
 
+.compare-selected__color {
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
 .compare-selected__code {
   font-weight: 600;
   color: var(--klc-color-foreground);

package/src/components/KLineChart.vue

@@ -6,6 +6,8 @@
       :symbol-loading="symbolLoading"
       :symbol-error="symbolError"
       :overlay-symbols="overlaySymbols"
+      :comparison-colors="comparisonColorsMap"
+      :comparison-loading="comparisonLoading"
       @add-overlay-symbol="onAddOverlaySymbol"
       @remove-overlay-symbol="onRemoveOverlaySymbol"
       @k-line-level-change="onKLineLevelChange"
@@ -145,7 +147,6 @@ import {
   type SymbolSpec,
   zoomLevelToKWidth,
   kGapFromKWidth,
-  getPhysicalKLineConfig,
   DrawingInteractionController,
 } from '@363045841yyt/klinechart-core/controllers'
 import {
@@ -153,6 +154,7 @@ import {
   getRegisteredIndicatorDefinitions,
 } from '@363045841yyt/klinechart-core/indicators'
 import type { DrawingObject, DrawingStyle } from '@363045841yyt/klinechart-core/plugin'
+import { SETTINGS_STORAGE_KEY } from '@363045841yyt/klinechart-core/config'
 import type { ChartSettings } from '@363045841yyt/klinechart-core/config'
 import {
   resolveThemeColors,
@@ -236,13 +238,13 @@ function onAddOverlaySymbol(item: SymbolItem) {
   overlaySymbolItems.value = [...overlaySymbolItems.value, item]
   overlaySymbols.value = overlaySymbolItems.value.map((symbol) => symbol.code)
   forcePercentAxis()
-  syncSymbolsToController()
+  controller.value?.addComparisonSymbol(toSymbolSpec(item))
 }
 
 function onRemoveOverlaySymbol(code: string) {
   overlaySymbolItems.value = overlaySymbolItems.value.filter((item) => item.code !== code)
   overlaySymbols.value = overlaySymbolItems.value.map((symbol) => symbol.code)
-  syncSymbolsToController()
+  controller.value?.removeComparisonSymbol(code)
 }
 
 function toSymbolSpec(item: SymbolItem): SymbolSpec {
@@ -270,6 +272,9 @@ function forcePercentAxis() {
   const nextSettings = { ...chartSettings.value, axisType: 'percent' as const }
   chartSettings.value = nextSettings
   controller.value?.updateSettingsFacade(nextSettings)
+  try {
+    localStorage.setItem(SETTINGS_STORAGE_KEY, JSON.stringify(nextSettings))
+  } catch { /* quota exceeded */ }
 }
 
 const containerRef = ref<HTMLDivElement | null>(null)
@@ -297,6 +302,8 @@ const viewWidth = ref(0)
 const paneRatios = ref<Record<string, number>>({})
 const selectedDrawingId = ref<string | null>(null)
 const drawings = ref<DrawingObject[]>([])
+const comparisonColorsMap = ref<Map<string, string>>(new Map())
+const comparisonLoading = ref(false)
 
 // 初始化 kWidth / kGap（与 Chart 引擎 zoom→物理值 转换一致）
 const initZoom = zoomLevel.value
@@ -529,7 +536,6 @@ function onDeleteDrawing() {
   const d = selectedDrawing.value
   if (!d || !drawingController.value) return
   drawingController.value.removeDrawing(d.id)
-  selectedDrawingId.value = null
   drawings.value = drawingController.value.getDrawings()
 }
 
@@ -537,7 +543,6 @@ function onPointerDown(e: PointerEvent) {
   controller.value?.handlePointerEvent(e, {
     onPointerDown: (event, container) => {
       if (drawingController.value?.onPointerDown(event, container)) {
-        drawings.value = drawingController.value.getDrawings()
         return true
       }
       return false
@@ -569,7 +574,6 @@ function onPointerUp(e: PointerEvent) {
   controller.value?.handlePointerEvent(e, {
     onPointerUp: (event, container) => {
       if (drawingController.value?.onPointerUp(event, container)) {
-        drawings.value = drawingController.value.getDrawings()
         return true
       }
       return false
@@ -673,15 +677,6 @@ function isSubPaneIndicator(id: string): boolean {
   return !!def && def.category !== 'main'
 }
 
-// 副图实例计数器：用于生成 'RSI_0', 'MACD_0' 这样的 paneId
-const subPaneCounters = new Map<SubIndicatorType, number>()
-
-function generatePaneId(indicatorId: SubIndicatorType): string {
-  const count = subPaneCounters.get(indicatorId) ?? 0
-  subPaneCounters.set(indicatorId, count + 1)
-  return `${indicatorId}_${count}`
-}
-
 // 添加副图（使用 Chart API）
 function addSubPane(
   indicatorId: SubIndicatorType = 'VOLUME',
@@ -706,7 +701,6 @@ function clearAllSubPanes(): void {
   for (const pane of subPanes.value) {
     controller.value?.removeIndicator(pane.id)
   }
-  subPaneCounters.clear()
 }
 
 function initIndicatorsFromConfig(): void {
@@ -728,22 +722,6 @@ function initIndicatorsFromConfig(): void {
   }
 }
 
-function syncSubPanesFromChart(): void {
-  const entries = controller.value?.subPanes.peek() ?? []
-  for (const entry of entries) {
-    const { paneId, indicatorId, params } = entry
-    const match = paneId.match(/^(.+)_(\d+)$/)
-    if (match) {
-      const [, indicator, countStr] = match
-      const count = parseInt(countStr!, 10)
-      const currentCount = subPaneCounters.get(indicator as SubIndicatorType) ?? 0
-      if (count >= currentCount) {
-        subPaneCounters.set(indicator as SubIndicatorType, count + 1)
-      }
-    }
-  }
-}
-
 function switchSubIndicator(paneId: string, newIndicatorId: SubIndicatorType): void {
   const nextParams = getDefaultParams(newIndicatorId)
   controller.value?.replaceSubPaneIndicator(paneId, newIndicatorId, nextParams)
@@ -753,27 +731,9 @@ function handleIndicatorToggle(indicatorId: string, active: boolean) {
   const c = controller.value
   if (!c) return
 
-  const mainIndicatorIds = [
-    'MA',
-    'BOLL',
-    'EXPMA',
-    'ENE',
-    'WMA',
-    'DEMA',
-    'TEMA',
-    'HMA',
-    'KAMA',
-    'SAR',
-    'SUPERTREND',
-    'KELTNER',
-    'DONCHIAN',
-    'ICHIMOKU',
-    'PIVOT',
-    'FIB',
-    'STRUCTURE',
-    'ZONES',
-  ]
-  if (mainIndicatorIds.includes(indicatorId)) {
+  const def = getRegisteredIndicatorDefinition(indicatorId)
+  const isMain = def && (def.category === 'main' || def.allowMainPane)
+  if (isMain) {
     const existingIndicator = mainActiveIndicators.value.find((id) => id === indicatorId)
     if (active && !existingIndicator) {
       c.addIndicator(indicatorId, 'main', indicatorParams.value[indicatorId])
@@ -873,35 +833,12 @@ const totalWidth = computed(() => {
   return controller.value?.getContentWidth() ?? 0
 })
 
-function scrollToRight() {
-  const container = containerRef.value
-  const c = controller.value
-  if (!container || !c) return
-
-  const dataLength = c.getData()?.length ?? 0
-  if (dataLength === 0) return
-
-  const vp = c.viewport.peek()
-  const dpr = vp.dpr
-  const { unitPx, startXPx } = getPhysicalKLineConfig(kWidth.value, kGap.value, dpr)
-
-  const lastKLineEndPx = (startXPx + dataLength * unitPx) / dpr
-  const maxScrollLeft = Math.max(0, container.scrollWidth - container.clientWidth)
-  const targetScrollLeft = Math.min(
-    maxScrollLeft,
-    Math.max(0, lastKLineEndPx - container.clientWidth),
-  )
-
-  container.scrollLeft = Math.round(targetScrollLeft * dpr) / dpr
-}
-
 function applyZoomToLevel(targetLevel: number, anchorX?: number) {
   controller.value?.zoomToLevel(targetLevel, anchorX)
 }
 
 defineExpose({
   scheduleRender,
-  scrollToRight,
   addSubPane,
   removeSubPane,
   switchSubIndicator,
@@ -982,19 +919,6 @@ function setupChartCallbacks(ctrl: ChartController): void {
       kWidth.value = vp.kWidth
       kGap.value = vp.kGap
     }
-
-    const desiredLeft = vp.desiredScrollLeft
-    if (desiredLeft !== undefined && desiredLeft !== containerRef.value?.scrollLeft) {
-      invalidateContainerRectCache()
-      nextTick(() => {
-        const c = containerRef.value
-        if (!c) return
-        const maxScrollLeft = Math.max(0, c.scrollWidth - c.clientWidth)
-        const clampedScrollLeft = Math.min(Math.max(0, desiredLeft), maxScrollLeft)
-        const dpr = vp.dpr
-        c.scrollLeft = Math.round(clampedScrollLeft * dpr) / dpr
-      })
-    }
   })
 
   const unsubscribeData = ctrl.data.subscribe(() => {
@@ -1067,6 +991,14 @@ function setupChartCallbacks(ctrl: ChartController): void {
     indicatorParams.value = nextParams
   })
 
+  const unsubscribeComparisonColors = ctrl.comparisonColors.subscribe(() => {
+    comparisonColorsMap.value = new Map(ctrl.comparisonColors.peek())
+  })
+
+  const unsubscribeComparisonLoading = ctrl.comparisonLoading.subscribe(() => {
+    comparisonLoading.value = ctrl.comparisonLoading.peek()
+  })
+
   onUnmounted(() => {
     unsubscribeViewport()
     unsubscribeData()
@@ -1076,6 +1008,8 @@ function setupChartCallbacks(ctrl: ChartController): void {
     unsubscribeTheme()
     unsubscribeIndicators()
     unsubscribeSubPanes()
+    unsubscribeComparisonColors()
+    unsubscribeComparisonLoading()
     autoThemeMediaQuery?.removeEventListener('change', onSystemThemeChange)
   })
 }
@@ -1122,8 +1056,7 @@ function setupSemanticController(ctrl: ChartController): void {
   // config:ready → Chart 侧已完成创建，Vue 回读状态
   semanticController.value.on('config:ready', () => {
     initIndicatorsFromConfig()
-    syncSubPanesFromChart()
-    nextTick(() => scrollToRight())
+    nextTick(() => controller.value?.scrollToRight())
   })
   // 暂时断开语义化配置加载，由搜索结果驱动
   // semanticController.value.applyConfig(props.semanticConfig).then((result) => {

package/src/components/SymbolSelector.vue

@@ -4,12 +4,12 @@
       type="button"
       class="symbol-chip"
       :class="{ 'is-open': showPopup }"
-      :title="symbol"
+      :title="displayText"
       :aria-expanded="showPopup"
       aria-haspopup="dialog"
       @click="togglePopup"
     >
-      <span class="symbol-chip__code">{{ symbol }}</span>
+      <span class="symbol-chip__code">{{ displayText }}</span>
       <span v-if="loading" class="symbol-chip__spinner" aria-hidden="true" />
       <IconTablerAlertTriangle v-else-if="error" class="symbol-chip__warn" aria-hidden="true" />
     </button>
@@ -127,6 +127,16 @@ const searchQuery = ref('')
 const searchInputRef = ref<HTMLInputElement | null>(null)
 const chipWrapRef = ref<HTMLElement | null>(null)
 
+const currentSymbol = computed<SymbolItem | undefined>(() =>
+  props.symbols.find((s) => s.code === props.symbol),
+)
+
+const displayText = computed(() => {
+  const cur = currentSymbol.value
+  if (cur) return `${cur.code} - ${cur.description}`
+  return props.symbol
+})
+
 const filteredSymbols = computed<SymbolItem[]>(() => {
   const q = searchQuery.value.trim().toLowerCase()
   if (!q) return props.symbols
@@ -186,7 +196,6 @@ watch(() => props.symbol, () => {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  max-width: 160px;
   padding: 0 10px;
   gap: 5px;
   border: 1px solid transparent;

package/src/components/TopToolbar.vue

@@ -11,6 +11,8 @@
     <CompareSymbolSelector
       :symbols="symbolPool"
       :selected="overlaySymbols"
+      :comparison-colors="comparisonColors"
+      :comparison-loading="comparisonLoading"
       @add="emit('addOverlaySymbol', $event)"
       @remove="emit('removeOverlaySymbol', $event)"
     />
@@ -47,6 +49,8 @@ const props = defineProps<{
   symbolLoading?: boolean
   symbolError?: boolean
   overlaySymbols?: string[]
+  comparisonColors?: Map<string, string>
+  comparisonLoading?: boolean
 }>()
 
 const emit = defineEmits<{
@@ -58,24 +62,25 @@ const emit = defineEmits<{
 }>()
 
 const MOCK_SYMBOLS: SymbolItem[] = [
-  { code: 'AAPL', description: 'Apple Inc.', exchange: 'NASDAQ', source: 'baostock' },
-  { code: 'TSLA', description: 'Tesla, Inc.', exchange: 'NASDAQ', source: 'baostock' },
-  { code: 'GOOGL', description: 'Alphabet Inc.', exchange: 'NASDAQ', source: 'baostock' },
-  { code: 'MSFT', description: 'Microsoft Corporation', exchange: 'NASDAQ', source: 'baostock' },
-  { code: 'AMZN', description: 'Amazon.com, Inc.', exchange: 'NASDAQ', source: 'baostock' },
-  { code: 'NVDA', description: 'NVIDIA Corporation', exchange: 'NASDAQ', source: 'baostock' },
-  { code: 'META', description: 'Meta Platforms, Inc.', exchange: 'NASDAQ', source: 'baostock' },
-  { code: 'BRK.B', description: 'Berkshire Hathaway Inc.', exchange: 'NYSE', source: 'baostock' },
-  { code: 'JPM', description: 'JPMorgan Chase & Co.', exchange: 'NYSE', source: 'baostock' },
-  { code: 'V', description: 'Visa Inc.', exchange: 'NYSE', source: 'baostock' },
-  { code: 'BTCUSDT', description: 'Bitcoin / Tether', exchange: 'BINANCE', source: 'baostock' },
-  { code: 'ETHUSDT', description: 'Ethereum / Tether', exchange: 'BINANCE', source: 'baostock' },
-  { code: 'sh.601360', description: '三六零', exchange: 'SSE', source: 'baostock' },
-  { code: 'sh.600519', description: '贵州茅台', exchange: 'SSE', source: 'baostock' },
-  { code: '000858', description: '五 粮 液', exchange: 'SZSE', source: 'baostock' },
-  { code: '000001', description: '平安银行', exchange: 'SZSE', source: 'baostock' },
-  { code: 'MOCK-100', description: 'Mock 100 条', exchange: 'MOCK', source: 'mock-100' },
-  { code: 'MOCK-10000', description: 'Mock 10000 条', exchange: 'MOCK', source: 'mock-10000' },
+  // ── TradingView 全球品种 ──
+  { code: 'XAUUSD',  description: '现货黄金',             exchange: 'OANDA',    source: 'tradingview' },
+  { code: 'BTCUSDT', description: 'Bitcoin / Tether',     exchange: 'BINANCE',  source: 'tradingview' },
+  { code: 'ETHUSDT', description: 'Ethereum / Tether',    exchange: 'BINANCE',  source: 'tradingview' },
+  { code: 'EURUSD',  description: '欧元/美元',            exchange: 'OANDA',    source: 'tradingview' },
+  { code: 'SPX',     description: '标普 500 指数',        exchange: 'SP',       source: 'tradingview' },
+  { code: 'AAPL',    description: 'Apple Inc.',           exchange: 'NASDAQ',   source: 'tradingview' },
+  { code: 'TSLA',    description: 'Tesla, Inc.',          exchange: 'NASDAQ',   source: 'tradingview' },
+  { code: '600519',  description: '贵州茅台',             exchange: 'SSE',      source: 'tradingview' },
+  { code: '000001',  description: '平安银行',             exchange: 'SZSE',     source: 'tradingview' },
+  { code: '1810',    description: '小米集团',             exchange: 'HKEX',     source: 'tradingview' },
+  // ── Baostock A 股 ──
+  { code: 'sh.600519', description: '贵州茅台',            exchange: 'SSE',      source: 'baostock' },
+  { code: 'sh.601360', description: '三六零',              exchange: 'SSE',      source: 'baostock' },
+  { code: '000858',  description: '五 粮 液',             exchange: 'SZSE',     source: 'baostock' },
+  { code: '000001',  description: '平安银行',             exchange: 'SZSE',     source: 'baostock' },
+  // ── Mock ──
+  { code: 'MOCK-100',   description: 'Mock 100 条',       exchange: 'MOCK',     source: 'mock-100' },
+  { code: 'MOCK-10000', description: 'Mock 10000 条',     exchange: 'MOCK',     source: 'mock-10000' },
 ]
 
 const displaySymbol = computed(() => props.symbol?.trim() ?? '')