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

package/dist/web-component.d.ts

@@ -1,6 +1,6 @@
 import { SemanticChartConfig, DataFetcher } from '@363045841yyt/klinechart-core/semantic';
 declare const KLineChartElement: import('vue').VueElementConstructor<{
-    semanticConfig: SemanticChartConfig;
+    semanticConfig?: SemanticChartConfig;
     dataFetcher: DataFetcher;
     yPaddingPx?: number;
     minKWidth?: number;
@@ -11,6 +11,7 @@ declare const KLineChartElement: import('vue').VueElementConstructor<{
     zoomLevels?: number;
     initialZoomLevel?: number;
     isFullscreen?: boolean;
+    timezone?: string;
 }>;
 export { KLineChartElement };
 export default KLineChartElement;

package/dist/web-component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"web-component.d.ts","sourceRoot":"","sources":["../src/web-component.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,mBAAmB,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAA;AAE9F,QAAA,MAAM,iBAAiB;;;;;;;;;;;;EAErB,CAAA;AAIF,OAAO,EAAE,iBAAiB,EAAE,CAAA;AAC5B,eAAe,iBAAiB,CAAA;AAEhC,YAAY,EAAE,mBAAmB,EAAE,WAAW,EAAE,CAAA"}
+{"version":3,"file":"web-component.d.ts","sourceRoot":"","sources":["../src/web-component.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,mBAAmB,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAA;AAE9F,QAAA,MAAM,iBAAiB;;;;;;;;;;;;;EAErB,CAAA;AAIF,OAAO,EAAE,iBAAiB,EAAE,CAAA;AAC5B,eAAe,iBAAiB,CAAA;AAEhC,YAAY,EAAE,mBAAmB,EAAE,WAAW,EAAE,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@363045841yyt/klinechart",
-  "version": "0.8.1-alpha.4",
+  "version": "0.8.2",
   "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/KLineAdjustmentDropdown.vue

@@ -0,0 +1,32 @@
+<template>
+  <Dropdown
+    :model-value="modelValue"
+    :options="adjustmentOptions"
+    label="复权"
+    title="复权方式"
+    size="md"
+    @update:model-value="emit('update:modelValue', $event as KLineAdjustment)"
+  />
+</template>
+
+<script setup lang="ts">
+import Dropdown from './Dropdown.vue'
+import type { AdjustType } from '@363045841yyt/klinechart-core/semantic'
+
+export type KLineAdjustment = AdjustType
+
+const adjustmentOptions: Array<{ label: string; value: KLineAdjustment }> = [
+  { label: '前复权', value: 'qfq' },
+  { label: '后复权', value: 'hfq' },
+  { label: '仅拆股', value: 'splits' },
+  { label: '不复权', value: 'none' },
+]
+
+defineProps<{
+  modelValue?: string
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', adjust: KLineAdjustment): void
+}>()
+</script>

package/src/components/KLineChart.vue

@@ -3,12 +3,16 @@
     <TopToolbar
       :symbol="currentSymbol"
       :k-line-level="kLineLevel"
+      :k-line-adjust="kLineAdjust"
       :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"
+      @k-line-adjust-change="onKLineAdjustChange"
       @toggle-indicator="onToggleIndicator"
       @symbol-change="onSymbolChange"
     />
@@ -89,6 +93,8 @@
             :anchor-placement="tooltipAnchorPlacement"
             :up-color="tooltipColors.upColor"
             :down-color="tooltipColors.downColor"
+            :timezone="props.timezone"
+            :show-time="isIntraday"
           />
           <MarkerTooltip
             v-if="hoveredMarker || hoveredCustomMarker"
@@ -152,6 +158,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,
@@ -165,8 +172,8 @@ import TopToolbar, { type SymbolItem } from './TopToolbar.vue'
 
 const props = withDefaults(
   defineProps<{
-    /** 语义化配置（必需，唯一控制源） */
-    semanticConfig: SemanticChartConfig
+    /** 语义化配置（可选，唯一控制源） */
+    semanticConfig?: SemanticChartConfig
 
     /** 数据获取函数（必需）。框架不绑定数据源，由使用者注入。 */
     dataFetcher: DataFetcher
@@ -187,6 +194,8 @@ const props = withDefaults(
     initialZoomLevel?: number
     /** 是否全屏 */
     isFullscreen?: boolean
+    /** 时区，默认 Asia/Shanghai */
+    timezone?: string
   }>(),
   {
     yPaddingPx: 20,
@@ -198,6 +207,7 @@ const props = withDefaults(
     zoomLevels: 20,
     initialZoomLevel: 3,
     isFullscreen: false,
+    timezone: 'Asia/Shanghai',
   },
 )
 
@@ -206,9 +216,12 @@ const emit = defineEmits<{
   (e: 'toggleFullscreen'): void
   (e: 'themeChange', theme: 'light' | 'dark'): void
   (e: 'kLineLevelChange', level: string): void
+  (e: 'kLineAdjustChange', adjust: 'qfq' | 'hfq' | 'splits' | 'none'): void
 }>()
 
-const kLineLevel = ref(props.semanticConfig.data.period)
+const kLineLevel = ref(props.semanticConfig?.data?.period ?? 'daily')
+const kLineAdjust = ref(props.semanticConfig?.data?.adjust ?? 'none')
+const isIntraday = computed(() => kLineLevel.value.includes('min'))
 const currentSymbol = ref('选择商品')
 const currentSymbolItem = ref<SymbolItem | null>(null)
 const symbolLoading = ref(false)
@@ -222,6 +235,12 @@ function onKLineLevelChange(level: string) {
   syncSymbolsToController()
 }
 
+function onKLineAdjustChange(adjust: 'qfq' | 'hfq' | 'splits' | 'none') {
+  kLineAdjust.value = adjust
+  emit('kLineAdjustChange', adjust)
+  syncSymbolsToController()
+}
+
 function onSymbolChange(item: SymbolItem) {
   symbolError.value = false
   currentSymbol.value = item.code
@@ -235,13 +254,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 {
@@ -250,9 +269,9 @@ function toSymbolSpec(item: SymbolItem): SymbolSpec {
     exchange: item.exchange,
     period: kLineLevel.value,
     source: item.source,
-    startDate: props.semanticConfig.data.startDate,
-    endDate: props.semanticConfig.data.endDate,
-    adjust: props.semanticConfig.data.adjust,
+    startDate: props.semanticConfig?.data?.startDate ?? '',
+    endDate: props.semanticConfig?.data?.endDate ?? '',
+    adjust: kLineAdjust.value,
   }
 }
 
@@ -269,6 +288,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 +318,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
@@ -698,7 +722,7 @@ function clearAllSubPanes(): void {
 function initIndicatorsFromConfig(): void {
   const config = props.semanticConfig
   const c = controller.value
-  if (!c) return
+  if (!config || !c) return
 
   const mainIndicators = config.indicators?.main
   if (mainIndicators) {
@@ -983,6 +1007,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 +1024,8 @@ function setupChartCallbacks(ctrl: ChartController): void {
     unsubscribeTheme()
     unsubscribeIndicators()
     unsubscribeSubPanes()
+    unsubscribeComparisonColors()
+    unsubscribeComparisonLoading()
     autoThemeMediaQuery?.removeEventListener('change', onSystemThemeChange)
   })
 }

package/src/components/KLineLevelDropdown.vue

@@ -18,12 +18,14 @@ export type KLineLevel =
   | '15min'
   | '30min'
   | '60min'
+  | 'daily'
   | 'weekly'
   | 'monthly'
   | 'quarterly'
   | 'yearly'
 
 const kLineLevelOptions: Array<{ label: string; value: KLineLevel }> = [
+  { label: '1day', value: 'daily' },
   { label: '1min', value: '1min' },
   { label: '5min', value: '5min' },
   { label: '15min', value: '15min' },

package/src/components/KLineTooltip.vue

@@ -8,7 +8,7 @@
   >
     <div class="kline-tooltip__title">
       <span v-if="k.stockCode">{{ k.stockCode }}</span>
-      <span>{{ formatDate(k.timestamp) }}</span>
+      <span>{{ formattedDate }}</span>
     </div>
     <div class="kline-tooltip__grid">
       <div class="row">
@@ -51,6 +51,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import type { ComponentPublicInstance } from 'vue'
+import { formatTimestamp } from '@363045841yyt/klinechart-core'
 
 export interface KLineData {
   timestamp: number
@@ -79,9 +80,23 @@ const props = withDefaults(defineProps<{
   upColor?: string
   /** 跌的颜色（默认绿跌） */
   downColor?: string
+  /** 时区，默认 Asia/Shanghai */
+  timezone?: string
+  /** 是否显示时分，默认 false */
+  showTime?: boolean
 }>(), {
   upColor: '#ef4444',
   downColor: '#22c55e',
+  timezone: 'Asia/Shanghai',
+  showTime: false,
+})
+
+const formattedDate = computed(() => {
+  if (!props.k) return ''
+  return formatTimestamp(props.k.timestamp, {
+    timeZone: props.timezone,
+    showTime: props.showTime,
+  })
 })
 
 const useAnchor = computed(() => props.useAnchor === true)
@@ -93,14 +108,6 @@ function onRef(el: Element | ComponentPublicInstance | null) {
   props.setEl?.(el as HTMLDivElement | null)
 }
 
-function formatDate(ts: number): string {
-  const d = new Date(ts)
-  const y = d.getFullYear()
-  const m = String(d.getMonth() + 1).padStart(2, '0')
-  const day = String(d.getDate()).padStart(2, '0')
-  return `${y}-${m}-${day}`
-}
-
 function formatVolume(v: number): string {
   if (v >= 1e8) return (v / 1e8).toFixed(2) + '亿'
   if (v >= 1e4) return (v / 1e4).toFixed(2) + '万'

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;
@@ -455,6 +464,8 @@ watch(() => props.symbol, () => {
 }
 
 .symbol-chip__spinner {
+  display: inline-block;
+  flex-shrink: 0;
   width: 12px;
   height: 12px;
   border: 2px solid var(--klc-color-axis-text);

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)"
     />
@@ -18,6 +20,10 @@
       :model-value="kLineLevel"
       @update:model-value="emit('kLineLevelChange', $event)"
     />
+    <KLineAdjustmentDropdown
+      :model-value="kLineAdjust"
+      @update:model-value="emit('kLineAdjustChange', $event)"
+    />
     <button
       type="button"
       class="indicator-button"
@@ -34,6 +40,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import KLineLevelDropdown, { type KLineLevel } from './KLineLevelDropdown.vue'
+import KLineAdjustmentDropdown, { type KLineAdjustment } from './KLineAdjustmentDropdown.vue'
 import SymbolSelector from './SymbolSelector.vue'
 import CompareSymbolSelector from './CompareSymbolSelector.vue'
 import type { SymbolItem } from './SymbolSelector.vue'
@@ -43,40 +50,42 @@ export type { SymbolItem }
 const props = defineProps<{
   symbol?: string
   kLineLevel?: string
+  kLineAdjust?: string
   symbols?: SymbolItem[]
   symbolLoading?: boolean
   symbolError?: boolean
   overlaySymbols?: string[]
+  comparisonColors?: Map<string, string>
+  comparisonLoading?: boolean
 }>()
 
 const emit = defineEmits<{
   (e: 'addOverlaySymbol', item: SymbolItem): void
   (e: 'removeOverlaySymbol', code: string): void
   (e: 'kLineLevelChange', level: KLineLevel): void
+  (e: 'kLineAdjustChange', adjust: KLineAdjustment): void
   (e: 'toggleIndicator'): void
   (e: 'symbolChange', symbol: SymbolItem): void
 }>()
 
 const MOCK_SYMBOLS: SymbolItem[] = [
   // ── 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' },
+  { 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: '1810', description: '小米集团', exchange: 'HKEX', source: 'tradingview' },
+  // ── gotdx A 股 ──
+  { code: '600519', description: '贵州茅台', exchange: 'SSE', source: 'gotdx' },
+  { code: '601360', description: '三六零', exchange: 'SSE', source: 'gotdx' },
+  { code: '000858', description: '五 粮 液', exchange: 'SZSE', source: 'gotdx' },
+  { code: '000001', description: '平安银行', exchange: 'SZSE', source: 'gotdx' },
   // ── Mock ──
-  { code: 'MOCK-100',   description: 'Mock 100 条',       exchange: 'MOCK',     source: 'mock-100' },
-  { code: 'MOCK-10000', description: 'Mock 10000 条',     exchange: 'MOCK',     source: 'mock-10000' },
+  { 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() ?? '')