@363045841yyt/klinechart 0.8.4 → 0.8.6

package/src/components/ColorPresetPanel.vue

@@ -1,27 +1,24 @@
 <template>
-  <div>
-    <div class="color-preset-tools">
-      <div class="theme-tabs" role="tablist" aria-label="颜色主题">
-        <button
-          v-for="option in themeOptions"
-          :key="option.value"
-          type="button"
-          class="theme-tab"
-          :class="{ active: editingTheme === option.value }"
-          @click="editingTheme = option.value"
-        >
-          {{ option.label }}
-        </button>
-      </div>
-      <button type="button" class="color-reset-btn" @click="resetCurrentThemeColors">
-        重置颜色
+  <div class="color-preset-container">
+    <div class="theme-tabs" role="tablist" aria-label="颜色主题">
+      <button
+        v-for="option in themeOptions"
+        :key="option.value"
+        type="button"
+        class="theme-tab"
+        :class="{ active: editingTheme === option.value }"
+        @click="editingTheme = option.value"
+      >
+        {{ option.label }}
       </button>
     </div>
+
+    <!-- 颜色分组列表 -->
     <template v-for="group in colorPresetGroups" :key="group.group">
       <div class="color-group-label">{{ group.label }}</div>
       <div class="color-grid">
         <label v-for="item in group.items" :key="item.key" class="color-item">
-          <span>{{ item.label }}</span>
+          <span class="color-item-text">{{ item.label }}</span>
           <input
             type="color"
             class="color-input"
@@ -105,30 +102,27 @@ function resetCurrentThemeColors(): void {
   delete nextColorSettings[editingTheme.value]
   emit('update:colorPresetSettings', nextColorSettings)
 }
+
+defineExpose({ resetCurrentThemeColors })
 </script>
 
 <style scoped>
-/* ── 工具栏 ── */
-.color-preset-tools {
-  display: grid;
-  grid-template-columns: 1fr auto;
-  align-items: center;
-  gap: 8px;
-  margin-bottom: 4px;
+.color-preset-container {
+  padding: 4px 0;
 }
 
-/* ── 主题切换 ── */
 .theme-tabs {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 3px;
-  padding: 3px;
+  display: flex;
+  gap: 4px;
+  padding: 4px;
+  margin-bottom: 12px;
   border: 1px solid var(--klc-color-border-button);
   border-radius: 8px;
   background: var(--klc-color-grid-minor);
 }
 
 .theme-tab {
+  flex: 1;
   height: 28px;
   border: none;
   border-radius: 6px;
@@ -137,149 +131,107 @@ function resetCurrentThemeColors(): void {
   font-size: 12px;
   font-weight: 500;
   cursor: pointer;
-  transition:
-    background 0.18s ease,
-    color 0.18s ease,
-    box-shadow 0.18s ease;
+  transition: all 0.18s ease;
+  white-space: nowrap;
 }
 
 .theme-tab:not(.active):hover {
   color: var(--klc-color-foreground);
-  background: color-mix(in srgb, var(--klc-color-tag-bg-white) 60%, transparent);
+  background: color-mix(in srgb, var(--klc-color-background) 60%, transparent);
 }
 
 .theme-tab.active {
-  background: var(--klc-color-tag-bg-white);
   color: var(--klc-color-foreground);
   font-weight: 600;
-  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
 }
 
-/* ── 重置按钮 ── */
-.color-reset-btn {
-  height: 36px;
-  padding: 0 14px;
-  border: 1px solid var(--klc-color-axis-line);
-  border-radius: 8px;
-  background: var(--klc-color-tag-bg-white);
+/* ── 分组标签 ── */
+.color-group-label {
+  margin: 18px 0 6px;
   color: var(--klc-color-axis-text);
   font-size: 12px;
   font-weight: 500;
-  white-space: nowrap;
-  cursor: pointer;
-  transition:
-    background 0.18s ease,
-    border-color 0.18s ease,
-    color 0.18s ease,
-    box-shadow 0.18s ease;
-}
-
-.color-reset-btn:hover {
-  border-color: var(--klc-color-axis-text);
-  background: var(--klc-color-background);
-  color: var(--klc-color-foreground);
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
-}
-
-.color-reset-btn:active {
-  background: var(--klc-color-tag-bg-hover);
-  box-shadow: none;
+  letter-spacing: 0.3px;
+  line-height: 1;
 }
 
-/* ── 分组标签 ── */
-.color-group-label {
-  margin: 6px 0 6px;
-  color: var(--klc-color-axis-text);
-  font-size: 12px;
-  font-weight: 600;
-  line-height: 1.3;
+.color-group-label:first-of-type {
+  margin-top: 0;
 }
 
 /* ── 颜色网格 ── */
 .color-grid {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 6px;
+  gap: 4px;
 }
 
-/* ── 颜色条目 ── */
+/* ── 颜色条目 (扁平化样式) ── */
 .color-item {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 8px;
-  min-height: 36px;
-  padding: 6px 10px;
-  border: 1px solid var(--klc-color-grid-major);
-  border-radius: 8px;
-  background: var(--klc-color-background);
+  min-height: 40px;
+  padding: 8px 12px;
+  border-radius: 6px;
+  background: transparent;
   color: var(--klc-color-foreground);
-  font-size: 12px;
-  line-height: 1.3;
+  font-size: 13px;
   cursor: pointer;
-  transition:
-    border-color 0.18s ease,
-    background 0.18s ease,
-    box-shadow 0.18s ease;
+  transition: background 0.15s ease;
 }
 
 .color-item:hover {
-  border-color: var(--klc-color-axis-line);
-  background: var(--klc-color-tag-bg-hover);
-  box-shadow: 0 1px 4px color-mix(in srgb, var(--klc-color-foreground) 6%, transparent);
+  background: var(--klc-color-grid-minor);
 }
 
-.color-item span {
+.color-item-text {
   min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   user-select: none;
+  line-height: 1.4;
 }
 
-/* ── 颜色输入 ── */
+/* ── 颜色输入 (无边框圆角矩形) ── */
 .color-input {
   flex: 0 0 auto;
   width: 26px;
   height: 26px;
   padding: 0;
-  border: 1px solid var(--klc-color-axis-line);
+  border: 1px solid var(--klc-color-border-button);
   border-radius: 6px;
   background: transparent;
   cursor: pointer;
-  transition:
-    border-color 0.18s ease,
-    box-shadow 0.18s ease;
+  transition: transform 0.15s ease;
+  overflow: hidden;
 }
 
 .color-input:hover {
-  border-color: var(--klc-color-axis-text);
-  box-shadow: 0 0 0 2px color-mix(in srgb, var(--klc-color-foreground) 6%, transparent);
-}
-
-.color-input:focus-visible {
-  outline: none;
-  border-color: var(--klc-color-axis-text);
-  box-shadow: 0 0 0 2px color-mix(in srgb, var(--klc-color-foreground) 10%, transparent);
+  transform: scale(1.1);
 }
 
 .color-input::-webkit-color-swatch-wrapper {
-  padding: 2px;
+  padding: 0;
 }
 
 .color-input::-webkit-color-swatch {
   border: none;
-  border-radius: 4px;
+  border-radius: 6px;
+}
+
+.color-input::-moz-color-swatch {
+  border: none;
+  border-radius: 6px;
 }
 
 /* ── 响应式 ── */
 @media (max-width: 480px) {
   .color-preset-tools {
-    grid-template-columns: 1fr;
-  }
-
-  .color-reset-btn {
-    width: 100%;
+    flex-direction: column;
+    align-items: stretch;
   }
 
   .color-grid {

package/src/components/CompareSymbolSelector.vue

@@ -14,8 +14,16 @@
       <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">
-      <div v-if="showPopup" class="compare-popover" role="dialog" aria-label="比较商品">
+    <Teleport :to="teleportTarget">
+      <Transition name="symbol-popover">
+        <div
+          v-if="showPopup"
+          ref="popupRef"
+          class="compare-popover"
+          :style="popupStyle"
+          role="dialog"
+          aria-label="比较商品"
+        >
         <div class="compare-search">
           <span class="compare-search__icon" aria-hidden="true">
             <svg width="14" height="14" viewBox="0 0 16 16" fill="none">
@@ -134,13 +142,16 @@
           </button>
         </div>
       </div>
-    </Transition>
+      </Transition>
+    </Teleport>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, computed, nextTick, onMounted, onBeforeUnmount } from 'vue'
+import { ref, computed, watch, nextTick, onMounted, onBeforeUnmount } from 'vue'
 import type { SymbolItem } from './SymbolSelector.vue'
+import { useTeleportedPopup } from '../composables/useTeleportedPopup'
+import { useFullscreenTeleportTarget } from '../composables/useFullscreenTeleportTarget'
 
 const props = withDefaults(defineProps<{
   symbols: SymbolItem[]
@@ -160,6 +171,15 @@ const showPopup = ref(false)
 const searchQuery = ref('')
 const searchInputRef = ref<HTMLInputElement | null>(null)
 const rootRef = ref<HTMLElement | null>(null)
+const popupRef = ref<HTMLElement | null>(null)
+
+const teleportTarget = useFullscreenTeleportTarget()
+
+const { popupStyle, startPositionSync, stopPositionSync } = useTeleportedPopup(
+  rootRef,
+  popupRef,
+  8,
+)
 
 const selectedSet = computed(() => new Set(props.selected ?? []))
 
@@ -202,13 +222,23 @@ function togglePopup() {
   }
 }
 
+watch(showPopup, (val) => {
+  if (val) {
+    startPositionSync()
+  } else {
+    stopPositionSync()
+  }
+})
+
 function clearSearch() {
   searchQuery.value = ''
   searchInputRef.value?.focus()
 }
 
 function onDocumentClick(e: MouseEvent) {
-  if (rootRef.value && !rootRef.value.contains(e.target as Node)) {
+  const root = rootRef.value
+  const popup = popupRef.value
+  if (root && !root.contains(e.target as Node) && !popup?.contains(e.target as Node)) {
     showPopup.value = false
     searchQuery.value = ''
   }
@@ -302,15 +332,12 @@ onBeforeUnmount(() => document.removeEventListener('mousedown', onDocumentClick)
 }
 
 .compare-popover {
-  position: absolute;
-  top: calc(100% + 8px);
-  left: 0;
-  z-index: 20;
+  z-index: 110;
   width: min(360px, 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/DrawingStyleToolbar.vue

@@ -1,11 +1,6 @@
 <template>
-  <div
-    class="drawing-style-toolbar"
-    @pointerdown.stop
-    @pointermove.stop
-    @pointerup.stop
-  >
-    <div class="toolbar-item color-item" title="颜色">
+  <CanvasToolbar>
+    <div class="color-item" title="颜色">
       <span class="color-swatch" :style="{ background: drawing.style.stroke ?? '#2962ff' }"></span>
       <input
         type="color"
@@ -31,20 +26,35 @@
       @update:model-value="onLineStyleChange($event as 'solid' | 'dashed' | 'dotted')"
     />
 
-    <button type="button" class="toolbar-btn delete-btn" title="删除" @click="$emit('delete')">
-      <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">
+    <button
+      type="button"
+      class="toolbar-btn toolbar-btn--delete"
+      title="删除"
+      @click="$emit('delete')"
+    >
+      <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>
+  </CanvasToolbar>
 </template>
 
 <script setup lang="ts">
 import { onMounted, onUnmounted } from 'vue'
 import type { DrawingObject, DrawingStyle } from '@363045841yyt/klinechart-core/plugin'
 import Dropdown from './Dropdown.vue'
+import CanvasToolbar from './common/CanvasToolbar.vue'
 
 const widthOptions = [
   { label: '1px', value: '1' },
@@ -92,46 +102,29 @@ function onLineStyleChange(style: 'solid' | 'dashed' | 'dotted') {
 </script>
 
 <style scoped>
-.drawing-style-toolbar {
-  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;
-}
-
-.toolbar-item {
+.color-item {
+  position: relative;
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  width: 26px;
+  height: 26px;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: background 0.15s ease;
 }
 
-.color-item {
-  position: relative;
-  width: 24px;
-  height: 24px;
+.color-item:hover {
+  background: var(--klc-color-grid-minor);
 }
 
 .color-swatch {
   display: block;
-  width: 100%;
-  height: 100%;
-  border: 1px solid var(--klc-color-axis-line);
+  width: 16px;
+  height: 16px;
+  border: 1px solid rgba(0, 0, 0, 0.15);
   border-radius: 4px;
-  cursor: pointer;
+  pointer-events: none;
 }
 
 .color-input {
@@ -142,36 +135,4 @@ function onLineStyleChange(style: 'solid' | 'dashed' | 'dotted') {
   width: 100%;
   height: 100%;
 }
-
-.toolbar-btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 24px;
-  height: 24px;
-  padding: 0;
-  border: 1px solid transparent;
-  border-radius: 4px;
-  background: transparent;
-  color: var(--klc-color-axis-text);
-  cursor: pointer;
-  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
-}
-
-.toolbar-btn:hover {
-  border-color: var(--klc-color-axis-line);
-  background: var(--klc-color-grid-minor);
-  color: var(--klc-color-foreground);
-}
-
-.delete-btn:hover {
-  color: #dc2626;
-  border-color: #fca5a5;
-  background: #fef2f2;
-}
-
-.delete-icon {
-  width: 14px;
-  height: 14px;
-}
 </style>

package/src/components/Dropdown.vue

@@ -19,20 +19,29 @@
       <span class="dropdown__chevron" aria-hidden="true"></span>
     </button>
 
-    <div v-if="isOpen" class="dropdown__menu" :style="menuStyle" role="listbox" tabindex="-1">
-      <button
-        v-for="option in options"
-        :key="option.value"
-        type="button"
-        class="dropdown__option"
-        :class="{ 'is-selected': option.value === selectedValue }"
-        role="option"
-        :aria-selected="option.value === selectedValue"
-        @click="selectOption(option.value)"
+    <Teleport :to="teleportTarget">
+      <div
+        v-if="isOpen"
+        ref="menuRef"
+        class="dropdown__menu"
+        :style="menuStyle"
+        role="listbox"
+        tabindex="-1"
       >
-        {{ option.label }}
-      </button>
-    </div>
+        <button
+          v-for="option in options"
+          :key="option.value"
+          type="button"
+          class="dropdown__option"
+          :class="{ 'is-selected': option.value === selectedValue }"
+          role="option"
+          :aria-selected="option.value === selectedValue"
+          @click="selectOption(option.value)"
+        >
+          {{ option.label }}
+        </button>
+      </div>
+    </Teleport>
   </div>
 </template>
 
@@ -44,6 +53,8 @@ let dropdownIdSeed = 0
 
 <script setup lang="ts">
 import { computed, onBeforeUnmount, ref } from 'vue'
+import { useTeleportedPopup } from '../composables/useTeleportedPopup'
+import { useFullscreenTeleportTarget } from '../composables/useFullscreenTeleportTarget'
 
 export interface DropdownOption<T extends string = string> {
   label: string
@@ -71,10 +82,19 @@ const emit = defineEmits<{
 
 const rootRef = ref<HTMLElement | null>(null)
 const triggerRef = ref<HTMLElement | null>(null)
+const menuRef = ref<HTMLElement | null>(null)
 const isOpen = ref(false)
 const menuWidth = ref(0)
 const dropdownId = ++dropdownIdSeed
 
+const teleportTarget = useFullscreenTeleportTarget()
+
+const { popupStyle, startPositionSync, stopPositionSync } = useTeleportedPopup(
+  triggerRef,
+  menuRef,
+  4,
+)
+
 const triggerStyle = computed(() => {
   if (props.minWidth) return { minWidth: props.minWidth }
   return {}
@@ -83,7 +103,11 @@ const triggerStyle = computed(() => {
 const menuStyle = computed(() => {
   if (!isOpen.value) return undefined
   const w = menuWidth.value || (props.minWidth ? parseInt(props.minWidth) : 0)
-  return { width: w ? `${w}px` : undefined }
+  return {
+    width: w ? `${w}px` : undefined,
+    zIndex: 1010,
+    ...popupStyle.value,
+  }
 })
 
 const selectedValue = computed(() => {
@@ -107,6 +131,7 @@ function open() {
   activeDropdownClose = close
   menuWidth.value = triggerRef.value?.offsetWidth ?? 0
   isOpen.value = true
+  startPositionSync()
   document.addEventListener('pointerdown', handleDocumentPointerDown)
 }
 
@@ -117,6 +142,7 @@ function close() {
     activeDropdownId = 0
     activeDropdownClose = null
   }
+  stopPositionSync()
   document.removeEventListener('pointerdown', handleDocumentPointerDown)
 }
 
@@ -135,7 +161,8 @@ function selectOption(value: string) {
 
 function handleDocumentPointerDown(event: PointerEvent) {
   const root = rootRef.value
-  if (root && !root.contains(event.target as Node | null)) {
+  const menu = menuRef.value
+  if (root && !root.contains(event.target as Node | null) && !menu?.contains(event.target as Node | null)) {
     close()
   }
 }
@@ -219,10 +246,6 @@ onBeforeUnmount(close)
 }
 
 .dropdown__menu {
-  position: absolute;
-  z-index: 30;
-  top: calc(100% + 4px);
-  left: 0;
   padding: 4px;
   border: 1px solid var(--klc-color-border-button);
   border-radius: 4px;