@363045841yyt/klinechart 0.8.1 → 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",
+  "version": "0.8.2",
   "description": "Vue 3 bindings for @363045841yyt/klinechart-core. Idiomatic composables, SFC components.",
   "license": "MIT",
   "repository": {

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,6 +3,7 @@
     <TopToolbar
       :symbol="currentSymbol"
       :k-line-level="kLineLevel"
+      :k-line-adjust="kLineAdjust"
       :symbol-loading="symbolLoading"
       :symbol-error="symbolError"
       :overlay-symbols="overlaySymbols"
@@ -11,6 +12,7 @@
       @add-overlay-symbol="onAddOverlaySymbol"
       @remove-overlay-symbol="onRemoveOverlaySymbol"
       @k-line-level-change="onKLineLevelChange"
+      @k-line-adjust-change="onKLineAdjustChange"
       @toggle-indicator="onToggleIndicator"
       @symbol-change="onSymbolChange"
     />
@@ -91,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"
@@ -168,8 +172,8 @@ import TopToolbar, { type SymbolItem } from './TopToolbar.vue'
 
 const props = withDefaults(
   defineProps<{
-    /** 语义化配置（必需，唯一控制源） */
-    semanticConfig: SemanticChartConfig
+    /** 语义化配置（可选，唯一控制源） */
+    semanticConfig?: SemanticChartConfig
 
     /** 数据获取函数（必需）。框架不绑定数据源，由使用者注入。 */
     dataFetcher: DataFetcher
@@ -190,6 +194,8 @@ const props = withDefaults(
     initialZoomLevel?: number
     /** 是否全屏 */
     isFullscreen?: boolean
+    /** 时区，默认 Asia/Shanghai */
+    timezone?: string
   }>(),
   {
     yPaddingPx: 20,
@@ -201,6 +207,7 @@ const props = withDefaults(
     zoomLevels: 20,
     initialZoomLevel: 3,
     isFullscreen: false,
+    timezone: 'Asia/Shanghai',
   },
 )
 
@@ -209,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)
@@ -225,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
@@ -253,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,
   }
 }
 
@@ -706,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) {

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

@@ -464,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

@@ -20,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"
@@ -36,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'
@@ -45,6 +50,7 @@ export type { SymbolItem }
 const props = defineProps<{
   symbol?: string
   kLineLevel?: string
+  kLineAdjust?: string
   symbols?: SymbolItem[]
   symbolLoading?: boolean
   symbolError?: boolean
@@ -57,30 +63,29 @@ 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() ?? '')