@363045841yyt/klinechart 0.8.4 → 0.8.6

package/src/components/LeftToolbar.vue

@@ -139,6 +139,7 @@ import IconTablerShape from '~icons/tabler/shape'
 import IconTablerChartDots3 from '~icons/tabler/chart-dots-3'
 import IconTablerCaretUpDown from '~icons/tabler/caret-up-down'
 import IconTablerBrackets from '~icons/tabler/brackets'
+import IconTablerArrowsHorizontal from '~icons/tabler/arrows-horizontal'
 import {
   DEFAULT_SETTINGS,
   SETTINGS_STORAGE_KEY,
@@ -181,6 +182,7 @@ const primaryTools: ToolDef[] = [
       { id: 'disjoint-channel', title: '不相交通道', icon: IconTablerBrackets },
     ],
   },
+  { id: 'range-select', title: '导出区间数据', icon: IconTablerArrowsHorizontal },
 ]
 
 defineProps<{
@@ -416,7 +418,7 @@ onUnmounted(() => {
   gap: 4px;
   padding: 0 5px;
   height: 40px;
-  background: var(--klc-color-tag-bg-white);
+  background: var(--klc-color-background);
   backdrop-filter: blur(8px);
   -webkit-backdrop-filter: blur(8px);
   border: 1px solid var(--klc-color-border-chart);
@@ -482,5 +484,4 @@ onUnmounted(() => {
     height: 36px;
   }
 }
-
 </style>

package/src/components/RangeSelectionExport.vue

@@ -0,0 +1,117 @@
+<template>
+  <CanvasToolbar>
+    <input
+      class="range-input"
+      :value="startDate"
+      @input="$emit('update:startDate', ($event.target as HTMLInputElement).value)"
+      :placeholder="startLabel"
+    />
+    <span class="range-sep">~</span>
+    <input
+      class="range-input"
+      :value="endDate"
+      @input="$emit('update:endDate', ($event.target as HTMLInputElement).value)"
+      :placeholder="endLabel"
+    />
+    <span class="range-count">共 {{ count }} 条</span>
+    <button type="button" class="toolbar-btn" title="批量设置" @click="$emit('batchSetting')">
+      批量设置
+    </button>
+    <button type="button" class="toolbar-btn" title="导出" @click="$emit('export')">导出</button>
+    <button
+      type="button"
+      class="toolbar-btn toolbar-btn--delete"
+      title="取消选区"
+      @click="$emit('clear')"
+    >
+      <svg
+        class="delete-icon"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        aria-hidden="true"
+      >
+        <path d="M3 6h18" />
+        <path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6" />
+        <path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2" />
+      </svg>
+    </button>
+  </CanvasToolbar>
+</template>
+
+<script setup lang="ts">
+import CanvasToolbar from './common/CanvasToolbar.vue'
+
+defineProps<{
+  startDate: string
+  endDate: string
+  startLabel: string
+  endLabel: string
+  count: number
+}>()
+
+defineEmits<{
+  'update:startDate': [value: string]
+  'update:endDate': [value: string]
+  export: []
+  clear: []
+  batchSetting: []
+}>()
+</script>
+
+<style scoped>
+.range-input {
+  color: var(--klc-color-axis-text);
+  font-size: 12px;
+  white-space: nowrap;
+  border: none;
+  background: transparent;
+  outline: none;
+  padding: 0 8px;
+  width: auto;
+  field-sizing: content;
+  min-width: 60px;
+  height: 26px;
+  box-sizing: border-box;
+  font-family: inherit;
+  border-radius: 4px;
+  text-align: center;
+  transition:
+    background 0.15s ease,
+    color 0.15s ease;
+}
+
+.range-input::placeholder {
+  color: var(--klc-color-axis-text);
+  opacity: 0.6;
+}
+
+.range-input:hover,
+.range-input:focus {
+  background: var(--klc-color-grid-minor);
+  color: var(--klc-color-foreground);
+}
+
+.range-sep {
+  color: var(--klc-color-axis-text);
+  font-size: 12px;
+  opacity: 0.6;
+  user-select: none;
+}
+
+.range-count {
+  color: var(--klc-color-axis-text);
+  font-size: 12px;
+  white-space: nowrap;
+  user-select: none;
+  padding: 0 8px;
+  margin-right: 4px;
+  display: flex;
+  align-items: center;
+  height: 18px;
+  border-right: 1px solid var(--klc-color-border-button);
+}
+</style>

package/src/components/SymbolSelector.vue

@@ -13,8 +13,16 @@
       <span v-if="loading" class="symbol-chip__spinner" aria-hidden="true" />
       <IconTablerAlertTriangle v-else-if="error" class="symbol-chip__warn" aria-hidden="true" />
     </button>
-    <Transition name="symbol-popover">
-      <div v-if="showPopup" class="symbol-popover" role="dialog" aria-label="切换合约">
+    <Teleport :to="teleportTarget">
+      <Transition name="symbol-popover">
+        <div
+          v-if="showPopup"
+          ref="popupRef"
+          class="symbol-popover"
+          :style="popupStyle"
+          role="dialog"
+          aria-label="切换合约"
+        >
         <div class="symbol-search">
           <span class="symbol-search__icon" aria-hidden="true">
             <svg width="14" height="14" viewBox="0 0 16 16" fill="none">
@@ -95,14 +103,17 @@
             <span class="symbol-list__exchange">{{ item.exchange }}</span>
           </button>
         </div>
-      </div>
-    </Transition>
+        </div>
+      </Transition>
+    </Teleport>
   </div>
 </template>
 
 <script setup lang="ts">
 import { ref, computed, watch, nextTick, onMounted, onBeforeUnmount } from 'vue'
 import IconTablerAlertTriangle from '~icons/tabler/alert-triangle'
+import { useTeleportedPopup } from '../composables/useTeleportedPopup'
+import { useFullscreenTeleportTarget } from '../composables/useFullscreenTeleportTarget'
 
 export interface SymbolItem {
   code: string
@@ -126,6 +137,15 @@ const showPopup = ref(false)
 const searchQuery = ref('')
 const searchInputRef = ref<HTMLInputElement | null>(null)
 const chipWrapRef = ref<HTMLElement | null>(null)
+const popupRef = ref<HTMLElement | null>(null)
+
+const teleportTarget = useFullscreenTeleportTarget()
+
+const { popupStyle, startPositionSync, stopPositionSync } = useTeleportedPopup(
+  chipWrapRef,
+  popupRef,
+  8,
+)
 
 const currentSymbol = computed<SymbolItem | undefined>(() =>
   props.symbols.find((s) => s.code === props.symbol),
@@ -155,6 +175,14 @@ function togglePopup() {
   }
 }
 
+watch(showPopup, (val) => {
+  if (val) {
+    startPositionSync()
+  } else {
+    stopPositionSync()
+  }
+})
+
 function clearSearch() {
   searchQuery.value = ''
   searchInputRef.value?.focus()
@@ -170,7 +198,9 @@ function selectSymbol(item: SymbolItem) {
 }
 
 function onDocumentClick(e: MouseEvent) {
-  if (chipWrapRef.value && !chipWrapRef.value.contains(e.target as Node)) {
+  const chip = chipWrapRef.value
+  const popup = popupRef.value
+  if (chip && !chip.contains(e.target as Node) && !popup?.contains(e.target as Node)) {
     showPopup.value = false
   }
 }
@@ -238,15 +268,12 @@ watch(() => props.symbol, () => {
 }
 
 .symbol-popover {
-  position: absolute;
-  top: calc(100% + 8px);
-  left: 0;
-  z-index: 20;
+  z-index: 110;
   width: min(320px, calc(100vw - 24px));
   padding: 14px;
   border: 1px solid var(--klc-color-border-button);
   border-radius: 3px;
-  background: var(--klc-color-tag-bg-white);
+  background: var(--klc-color-background);
   color: var(--klc-color-foreground);
   
   box-sizing: border-box;

package/src/components/TopToolbar.vue

@@ -1,5 +1,12 @@
 <template>
-  <div class="top-toolbar">
+  <div
+    ref="toolbarRef"
+    class="top-toolbar"
+    @mousedown="onMouseDown"
+    @mousemove="onMouseMove"
+    @mouseup="onMouseUp"
+    @mouseleave="onMouseUp"
+  >
     <SymbolSelector
       v-if="displaySymbol"
       :symbol="displaySymbol"
@@ -38,7 +45,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
 import KLineLevelDropdown, { type KLineLevel } from './KLineLevelDropdown.vue'
 import KLineAdjustmentDropdown, { type KLineAdjustment } from './KLineAdjustmentDropdown.vue'
 import SymbolSelector from './SymbolSelector.vue'
@@ -47,6 +54,41 @@ import type { SymbolItem } from './SymbolSelector.vue'
 
 export type { SymbolItem }
 
+const toolbarRef = ref<HTMLElement | null>(null)
+
+let isDown = false
+let startX = 0
+let scrollLeft = 0
+
+function onMouseDown(e: MouseEvent) {
+  const el = toolbarRef.value
+  if (!el) return
+  isDown = true
+  startX = e.pageX - el.getBoundingClientRect().left
+  scrollLeft = el.scrollLeft
+  el.style.cursor = 'grabbing'
+  el.style.userSelect = 'none'
+}
+
+function onMouseMove(e: MouseEvent) {
+  if (!isDown) return
+  const el = toolbarRef.value
+  if (!el) return
+  e.preventDefault()
+  const x = e.pageX - el.getBoundingClientRect().left
+  const walk = x - startX
+  el.scrollLeft = scrollLeft - walk
+}
+
+function onMouseUp() {
+  if (!isDown) return
+  isDown = false
+  const el = toolbarRef.value
+  if (!el) return
+  el.style.cursor = ''
+  el.style.userSelect = ''
+}
+
 const props = defineProps<{
   symbol?: string
   kLineLevel?: string
@@ -115,6 +157,14 @@ function onSymbolSelectorChange(item: SymbolItem) {
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
   box-sizing: border-box;
   user-select: none;
+  overflow-x: auto;
+  overflow-y: hidden;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+.top-toolbar::-webkit-scrollbar {
+  display: none;
 }
 
 .indicator-button {
@@ -168,5 +218,8 @@ function onSymbolSelectorChange(item: SymbolItem) {
   .indicator-button__text {
     display: none;
   }
+  .indicator-button {
+    height: 26px;
+  }
 }
 </style>

package/src/components/common/CanvasToolbar.vue

@@ -0,0 +1,70 @@
+<template>
+  <div class="canvas-toolbar" @pointerdown.stop @pointermove.stop @pointerup.stop>
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+.canvas-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px;
+  background: color-mix(in srgb, var(--klc-color-background) 92%, transparent);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border: 1px solid var(--klc-color-border-button);
+  border-radius: 8px;
+  box-shadow:
+    0 2px 8px rgba(0, 0, 0, 0.08),
+    0 1px 2px rgba(0, 0, 0, 0.04);
+  user-select: none;
+  pointer-events: auto;
+  overflow-x: auto;
+  overflow-y: hidden;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+.canvas-toolbar::-webkit-scrollbar {
+  display: none;
+}
+
+.canvas-toolbar :deep(.toolbar-btn) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 26px;
+  padding: 0 10px;
+  border: none;
+  border-radius: 4px;
+  background: transparent;
+  color: var(--klc-color-axis-text);
+  font-size: 12px;
+  cursor: pointer;
+  white-space: nowrap;
+  transition:
+    background 0.15s ease,
+    color 0.15s ease;
+}
+
+.canvas-toolbar :deep(.toolbar-btn:hover) {
+  background: var(--klc-color-grid-minor);
+  color: var(--klc-color-foreground);
+}
+
+.canvas-toolbar :deep(.toolbar-btn--delete) {
+  width: 26px;
+  padding: 0;
+}
+
+.canvas-toolbar :deep(.toolbar-btn--delete:hover) {
+  color: #dc2626;
+  background: color-mix(in srgb, #dc2626 10%, transparent);
+}
+
+.canvas-toolbar :deep(.delete-icon) {
+  width: 14px;
+  height: 14px;
+}
+</style>

package/src/components/common/CanvasToolbarStack.vue

@@ -0,0 +1,32 @@
+<template>
+  <div
+    class="canvas-toolbar-stack"
+    @pointerdown.stop
+    @pointermove.stop
+    @pointerup.stop
+  >
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+.canvas-toolbar-stack {
+  position: absolute;
+  left: 50%;
+  top: 10px;
+  transform: translateX(-50%);
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 8px;
+  z-index: 100;
+  pointer-events: none;
+  max-width: calc(100% - 20px);
+}
+
+@media (max-width: 768px) {
+  .canvas-toolbar-stack {
+    max-width: 90%;
+  }
+}
+</style>

package/src/composables/chart/useChartTheme.ts

@@ -0,0 +1,86 @@
+/**
+ * Manages chart theme state (light/dark), computed CSS vars for theming,
+ * tooltip up/down colors, and auto theme detection via prefers-color-scheme.
+ * Handles settings persistence through ChartController.updateSettingsFacade.
+ */
+import { ref, computed, onUnmounted } from 'vue'
+import type { Ref } from 'vue'
+import {
+  resolveThemeColors,
+  themeToCssVars,
+  lightTheme,
+  darkTheme,
+  type ColorPresetSettings,
+} from '@363045841yyt/klinechart-core'
+import type { ChartSettings } from '@363045841yyt/klinechart-core/config'
+import type { ChartController } from '@363045841yyt/klinechart-core/controllers'
+
+export function useChartTheme(ctrl: Ref<ChartController | null>) {
+  const chartTheme = ref<'light' | 'dark'>('light')
+  const chartSettings = ref<ChartSettings>({})
+
+  const tooltipColors = computed(() => {
+    const isAsiaMarket = chartSettings.value.isAsiaMarket ?? false
+    const colors = resolveThemeColors(chartTheme.value, isAsiaMarket as boolean | undefined)
+    return {
+      upColor: colors.candleUpBody,
+      downColor: colors.candleDownBody,
+    }
+  })
+
+  const themeCssVars = computed(() => {
+    const theme = chartTheme.value === 'dark' ? darkTheme : lightTheme
+    const overrides = (chartSettings.value.colorPresetSettings as ColorPresetSettings | undefined)?.[
+      chartTheme.value
+    ]
+    if (overrides && Object.keys(overrides).length > 0) {
+      return themeToCssVars({ ...theme, colors: { ...theme.colors, ...overrides } })
+    }
+    return themeToCssVars(theme)
+  })
+
+  let autoThemeMediaQuery: MediaQueryList | null = null
+
+  function onSystemThemeChange(e: MediaQueryListEvent) {
+    ctrl.value?.setTheme(e.matches ? 'dark' : 'light')
+  }
+
+  function applyThemeFromSettings(themeSetting: string | undefined) {
+    const chartCtrl = ctrl.value
+    if (!chartCtrl || !themeSetting) return
+
+    if (themeSetting === 'auto') {
+      const mq = window.matchMedia('(prefers-color-scheme: dark)')
+      chartCtrl.setTheme(mq.matches ? 'dark' : 'light')
+      if (autoThemeMediaQuery !== mq) {
+        autoThemeMediaQuery?.removeEventListener('change', onSystemThemeChange)
+        autoThemeMediaQuery = mq
+        mq.addEventListener('change', onSystemThemeChange)
+      }
+    } else {
+      autoThemeMediaQuery?.removeEventListener('change', onSystemThemeChange)
+      autoThemeMediaQuery = null
+      chartCtrl.setTheme(themeSetting as 'light' | 'dark')
+    }
+  }
+
+  function handleSettingsChange(settings: ChartSettings) {
+    chartSettings.value = settings
+    applyThemeFromSettings(settings.theme as string)
+    ctrl.value?.updateSettingsFacade(settings)
+  }
+
+  onUnmounted(() => {
+    autoThemeMediaQuery?.removeEventListener('change', onSystemThemeChange)
+    autoThemeMediaQuery = null
+  })
+
+  return {
+    chartTheme,
+    chartSettings,
+    tooltipColors,
+    themeCssVars,
+    handleSettingsChange,
+    applyThemeFromSettings,
+  }
+}

package/src/composables/chart/useDrawingManager.ts

@@ -0,0 +1,67 @@
+/**
+ * Manages drawing interaction state (selected drawing, drawings list),
+ * tool activation, style updates, and deletion.
+ * Provides setupDrawing() to initialize DrawingInteractionController
+ * with lifecycle callbacks that sync back to Vue refs.
+ */
+import { ref, computed, shallowRef, type Ref } from 'vue'
+import {
+  DrawingInteractionController,
+  type ChartController,
+  type DrawingToolId,
+} from '@363045841yyt/klinechart-core/controllers'
+import type { DrawingObject, DrawingStyle } from '@363045841yyt/klinechart-core/plugin'
+
+export function useDrawingManager(ctrl: Ref<ChartController | null>) {
+  const drawingController = shallowRef<DrawingInteractionController | null>(null)
+  const selectedDrawingId = ref<string | null>(null)
+  const drawings = ref<DrawingObject[]>([])
+  const selectedDrawing = computed(() => {
+    const id = selectedDrawingId.value
+    if (!id) return null
+    return drawings.value.find((d) => d.id === id) ?? null
+  })
+
+  function handleSelectTool(toolId: string) {
+    drawingController.value?.setTool(toolId as DrawingToolId)
+  }
+
+  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() {
+    const d = selectedDrawing.value
+    if (!d || !drawingController.value) return
+    drawingController.value.removeDrawing(d.id)
+    drawings.value = drawingController.value.getDrawings()
+  }
+
+  function setupDrawing(chartCtrl: ChartController): void {
+    drawingController.value = new DrawingInteractionController(chartCtrl)
+    drawingController.value.setCallbacks({
+      onDrawingCreated: (drawing) => {
+        drawings.value = [...drawings.value, drawing]
+        selectedDrawingId.value = drawing.id
+      },
+      onToolChange: () => {},
+      onDrawingSelected: (drawing) => {
+        selectedDrawingId.value = drawing?.id ?? null
+      },
+    })
+  }
+
+  return {
+    drawingController,
+    selectedDrawingId,
+    selectedDrawing,
+    drawings,
+    handleSelectTool,
+    onUpdateDrawingStyle,
+    onDeleteDrawing,
+    setupDrawing,
+  }
+}