@363045841yyt/klinechart 0.8.5 → 0.8.6

package/src/components/KLineChart.vue

@@ -60,59 +60,25 @@
             <div class="canvas-layer" ref="canvasLayerRef">
               <canvas class="x-axis-canvas" ref="xAxisCanvasRef"></canvas>
 
-              <DrawingStyleToolbar
-                v-if="selectedDrawing"
-                :drawing="selectedDrawing"
-                @update-style="onUpdateDrawingStyle"
-                @delete="onDeleteDrawing"
-              />
-              <div
-                v-if="rangeSelectionReady"
-                class="range-selection-export"
-                @pointerdown.stop
-                @pointermove.stop
-                @pointerup.stop
-              >
-                <input
-                  class="range-selection-export__label"
-                  v-model="customStartDate"
-                  :placeholder="rangeSelectionStartLabel"
+              <CanvasToolbarStack>
+                <RangeSelectionExport
+                  v-if="rangeSelectionReady"
+                  v-model:start-date="customStartDate"
+                  v-model:end-date="customEndDate"
+                  :start-label="rangeSelectionStartLabel"
+                  :end-label="rangeSelectionEndLabel"
+                  :count="rangeSelectionCount"
+                  @export="exportRangeToCsv"
+                  @clear="clearRangeSelection"
+                  @batch-setting="showBatchStockDialog = true"
                 />
-                <span class="range-selection-export__sep">~</span>
-                <input
-                  class="range-selection-export__label"
-                  v-model="customEndDate"
-                  :placeholder="rangeSelectionEndLabel"
+                <DrawingStyleToolbar
+                  v-if="selectedDrawing"
+                  :drawing="selectedDrawing"
+                  @update-style="onUpdateDrawingStyle"
+                  @delete="onDeleteDrawing"
                 />
-                <button
-                  type="button"
-                  class="toolbar-btn"
-                  title="批量设置"
-                  @click.stop="showBatchStockDialog = true"
-                >
-                  批量设置
-                </button>
-                <button
-                  type="button"
-                  class="toolbar-btn"
-                  title="导出"
-                  @click.stop="exportRangeToCsv"
-                >
-                  导出
-                </button>
-                <button
-                  type="button"
-                  class="toolbar-btn delete-btn"
-                  title="删除选区"
-                  @click.stop="clearRangeSelection"
-                >
-                  <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>
-              </div>
+              </CanvasToolbarStack>
             </div>
             <div
               v-if="rangeSelectionOverlayStyle"
@@ -140,7 +106,7 @@
         </div>
         <Teleport v-if="tooltipLayerRef" :to="tooltipLayerRef">
           <div
-            v-if="hovered"
+            v-if="hovered && !isMobile"
             class="tooltip-anchor kline-tooltip-anchor"
             :class="{ 'use-anchor': useAnchorPositioning }"
             :style="klineTooltipAnchorStyle"
@@ -152,7 +118,7 @@
             :style="markerTooltipAnchorStyle"
           ></div>
           <KLineTooltip
-            v-if="hovered"
+            v-if="hovered && !isMobile"
             :k="hovered"
             :index="hoveredIndex"
             :data="chartData"
@@ -213,6 +179,8 @@ import KLineTooltip from './KLineTooltip.vue'
 import MarkerTooltip from './MarkerTooltip.vue'
 import IndicatorSelector from './IndicatorSelector.vue'
 import DrawingStyleToolbar from './DrawingStyleToolbar.vue'
+import RangeSelectionExport from './RangeSelectionExport.vue'
+import CanvasToolbarStack from './common/CanvasToolbarStack.vue'
 import { provideFullscreenTeleportTarget } from '../composables/useFullscreenTeleportTarget'
 import {
   createChartController,
@@ -449,6 +417,7 @@ const {
   isRangeSelectActive,
   rangeSelectionReady,
   rangeSelectionBounds,
+  rangeSelectionCount,
   rangeSelectionStartLabel,
   rangeSelectionEndLabel,
   rangeSelectionOverlayStyle,
@@ -567,6 +536,7 @@ const isResizingPane = computed(() => interactionState.value.isResizingPaneBound
 const isHoveringPaneSeparator = computed(() => interactionState.value.isHoveringPaneBoundary)
 const hoveredPaneBoundaryId = computed(() => interactionState.value.hoveredPaneBoundaryId)
 const isHoveringRightAxis = computed(() => interactionState.value.isHoveringRightAxis)
+const isMobile = window.matchMedia('(pointer: coarse)').matches
 const hoveredIdx = computed(() => interactionState.value.hoveredIndex)
 const crosshairIdx = computed(() => interactionState.value.crosshairIndex)
 
@@ -1146,93 +1116,12 @@ watch(
   z-index: 101;
 }
 
-.range-selection-handle--left { left: -4px; }
-
-.range-selection-handle--right { right: -4px; }
-
-.range-selection-export {
-  position: absolute;
-  left: 50%;
-  top: 8px;
-  transform: translateX(-50%);
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  padding: 4px 8px;
-  height: 32px;
-  background: color-mix(in srgb, var(--klc-color-tag-bg-white) 88%, transparent);
-  backdrop-filter: blur(8px);
-  -webkit-backdrop-filter: blur(8px);
-  border: 1px solid var(--klc-color-border-button);
-  border-radius: 6px;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
-  z-index: 100;
-  user-select: none;
-  pointer-events: auto;
-}
-
-.range-selection-export .toolbar-btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  height: 24px;
-  padding: 0 8px;
-  border: 1px solid var(--klc-color-border-button);
-  border-radius: 4px;
-  background: transparent;
-  color: var(--klc-color-axis-text);
-  font-size: 12px;
-  cursor: pointer;
-  transition:
-    border-color 0.15s ease,
-    background 0.15s ease,
-    color 0.15s ease;
-  white-space: nowrap;
+.range-selection-handle--left {
+  left: -4px;
 }
 
-.range-selection-export .toolbar-btn:hover {
-  border-color: var(--klc-color-axis-line);
-  background: var(--klc-color-grid-minor);
-  color: var(--klc-color-foreground);
-}
-
-.range-selection-export .toolbar-btn.delete-btn {
-  padding: 0;
-  width: 24px;
-  border-color: transparent;
-}
-
-.range-selection-export .toolbar-btn.delete-btn:hover {
-  color: #dc2626;
-  border-color: #fca5a5;
-  background: #fef2f2;
-}
-
-.range-selection-export .delete-icon {
-  width: 14px;
-  height: 14px;
-}
-
-.range-selection-export__label {
-  color: var(--klc-color-axis-text);
-  font-size: 11px;
-  white-space: nowrap;
-  border: 1px solid var(--klc-color-border-button);
-  background: none;
-  outline: none;
-  padding: 1px 4px;
-  width: 80px;
-  height: 24px;
-  box-sizing: border-box;
-  font-family: inherit;
-  border-radius: 3px;
-  text-align: center;
-}
-
-.range-selection-export__sep {
-  color: var(--klc-color-axis-text);
-  font-size: 11px;
-  user-select: none;
+.range-selection-handle--right {
+  right: -4px;
 }
 
 .canvas-layer {
@@ -1274,6 +1163,7 @@ watch(
     gap: 4px;
   }
 }
+
 </style>
 
 <style>
@@ -1302,3 +1192,9 @@ watch(
   z-index: 15;
 }
 </style>
+
+<style>
+* {
+  -webkit-tap-highlight-color: transparent;
+}
+</style>

package/src/components/LeftToolbar.vue

@@ -418,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);

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

@@ -268,12 +268,12 @@ watch(() => props.symbol, () => {
 }
 
 .symbol-popover {
-  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/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/useRangeSelection.ts

@@ -108,6 +108,12 @@ export function useRangeSelection(options: {
     return fmtDate(data[bounds.end])
   })
 
+  const rangeSelectionCount = computed(() => {
+    const bounds = rangeSelectionBounds.value
+    if (!bounds) return 0
+    return bounds.end - bounds.start + 1
+  })
+
   const rangeSelectionOverlayStyle = computed(() => {
     const bounds = rangeSelectionBounds.value
     if (!bounds) return null
@@ -399,6 +405,7 @@ export function useRangeSelection(options: {
     isRangeSelectActive,
     rangeSelectionReady,
     rangeSelectionBounds,
+    rangeSelectionCount,
     rangeSelectionStartLabel,
     rangeSelectionEndLabel,
     rangeSelectionOverlayStyle,

package/src/composables/useTeleportedPopup.ts

@@ -1,4 +1,4 @@
-import { ref, type Ref } from 'vue'
+import { ref, nextTick, type Ref } from 'vue'
 
 export function useTeleportedPopup(
   triggerRef: Ref<HTMLElement | null>,
@@ -11,15 +11,28 @@ export function useTeleportedPopup(
     const trigger = triggerRef.value
     if (!trigger) return
     const rect = trigger.getBoundingClientRect()
+    const popup = popupRef.value
+
+    let left = rect.left
+    if (popup) {
+      const popupWidth = popup.offsetWidth
+      const viewportWidth = window.innerWidth
+      const margin = 8
+      if (left + popupWidth > viewportWidth - margin) {
+        left = Math.max(margin, viewportWidth - popupWidth - margin)
+      }
+    }
+
     popupStyle.value = {
       position: 'fixed',
       top: `${rect.bottom + gap}px`,
-      left: `${rect.left}px`,
+      left: `${left}px`,
     }
   }
 
   function startPositionSync() {
     updatePosition()
+    nextTick(() => updatePosition())
     document.addEventListener('scroll', updatePosition, { capture: true, passive: true })
     window.addEventListener('resize', updatePosition, { passive: true })
   }