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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@363045841yyt/klinechart",
-  "version": "0.8.1-alpha.4",
+  "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"
@@ -152,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,
@@ -235,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 {
@@ -269,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)
@@ -296,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
@@ -983,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()
@@ -992,6 +1008,8 @@ function setupChartCallbacks(ctrl: ChartController): void {
     unsubscribeTheme()
     unsubscribeIndicators()
     unsubscribeSubPanes()
+    unsubscribeComparisonColors()
+    unsubscribeComparisonLoading()
     autoThemeMediaQuery?.removeEventListener('change', onSystemThemeChange)
   })
 }

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<{