@363045841yyt/klinechart 0.8.5 → 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

@@ -332,12 +332,12 @@ onBeforeUnmount(() => document.removeEventListener('mousedown', onDocumentClick)
 }
 
 .compare-popover {
-  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/ExportProgressDialog.vue

@@ -1,42 +1,34 @@
 <template>
-  <Teleport :to="teleportTarget">
-    <Transition name="overlay">
-      <div v-if="progress" class="export-overlay">
-        <Transition name="modal">
-          <div class="export-modal" @click.stop>
-            <div class="export-header">
-              <span class="export-title">导出数据</span>
-              <button class="export-close-btn" @click="emit('close')">
-                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                  <path d="M18 6L6 18M6 6l12 12" />
-                </svg>
-              </button>
-            </div>
-            <div class="export-body">
-              <div class="export-label">{{ progress.label }}</div>
-              <div class="export-bar-track">
-                <div
-                  class="export-bar-fill"
-                  :style="{ width: pct + '%' }"
-                />
-              </div>
-              <div class="export-counter">{{ progress.current }} / {{ progress.total }}</div>
-              <button
-                v-if="progress.current === progress.total"
-                class="export-done-btn"
-                @click="emit('close')"
-              >完成</button>
-            </div>
-          </div>
-        </Transition>
+  <BaseModal
+    title="导出数据"
+    :show="!!progress"
+    :z-index="1100"
+    :close-on-overlay="false"
+    footer-align="center"
+    @close="emit('close')"
+  >
+    <div class="export-body">
+      <div class="export-label">{{ progress?.label }}</div>
+      <div class="export-bar-track">
+        <div class="export-bar-fill" :style="{ width: pct + '%' }" />
       </div>
-    </Transition>
-  </Teleport>
+      <div class="export-counter">{{ progress?.current ?? 0 }} / {{ progress?.total ?? 0 }}</div>
+    </div>
+    <template #footer>
+      <button
+        v-if="progress && progress.current === progress.total"
+        class="export-done-btn"
+        @click="emit('close')"
+      >
+        完成
+      </button>
+    </template>
+  </BaseModal>
 </template>
 
 <script setup lang="ts">
 import { computed } from 'vue'
-import { useFullscreenTeleportTarget } from '../composables/useFullscreenTeleportTarget'
+import BaseModal from './BaseModal.vue'
 
 const props = defineProps<{
   progress: { current: number; total: number; label: string } | null
@@ -46,8 +38,6 @@ const emit = defineEmits<{
   close: []
 }>()
 
-const teleportTarget = useFullscreenTeleportTarget()
-
 const pct = computed(() => {
   if (!props.progress || props.progress.total <= 0) return 0
   return Math.min(100, Math.round((props.progress.current / props.progress.total) * 100))
@@ -55,76 +45,7 @@ const pct = computed(() => {
 </script>
 
 <style scoped>
-.export-overlay {
-  position: fixed;
-  inset: 0;
-  background: rgba(0, 0, 0, 0.3);
-  backdrop-filter: blur(4px);
-  padding: 24px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 1100;
-}
-
-.export-modal {
-  background: var(--klc-color-tag-bg-white);
-  border: 1px solid var(--klc-color-border-button);
-  border-radius: 10px;
-  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.15);
-  min-width: 320px;
-  max-width: 380px;
-  width: min(88vw, 380px);
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-}
-
-.export-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 14px 18px 0 20px;
-}
-
-.export-title {
-  font-size: 15px;
-  font-weight: 600;
-  color: var(--klc-color-foreground);
-  line-height: 1.35;
-}
-
-.export-close-btn {
-  background: var(--klc-color-tag-bg-white);
-  border: 1px solid var(--klc-color-border-button);
-  border-radius: 7px;
-  width: 30px;
-  height: 30px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  color: var(--klc-color-axis-text);
-  transition:
-    background 0.15s,
-    color 0.15s,
-    border-color 0.15s;
-  padding: 0;
-}
-
-.export-close-btn:hover {
-  background: var(--klc-color-tag-bg-hover);
-  color: var(--klc-color-foreground);
-  border-color: var(--klc-color-axis-line);
-}
-
-.export-close-btn svg {
-  width: 14px;
-  height: 14px;
-}
-
 .export-body {
-  padding: 16px 20px 24px;
   display: flex;
   flex-direction: column;
   gap: 10px;
@@ -175,7 +96,6 @@ const pct = computed(() => {
   background: var(--klc-color-foreground);
   border-color: var(--klc-color-foreground);
   color: var(--klc-color-background);
-  align-self: center;
   transition:
     background 0.15s,
     box-shadow 0.15s,
@@ -195,32 +115,4 @@ const pct = computed(() => {
   transform: translateY(0);
   box-shadow: none;
 }
-
-.overlay-enter-active,
-.overlay-leave-active {
-  transition: opacity 0.2s ease;
-}
-
-.overlay-enter-from,
-.overlay-leave-to {
-  opacity: 0;
-}
-
-.modal-enter-active {
-  transition: all 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
-}
-
-.modal-leave-active {
-  transition: all 0.16s ease-in;
-}
-
-.modal-enter-from {
-  opacity: 0;
-  transform: scale(0.96) translateY(-10px);
-}
-
-.modal-leave-to {
-  opacity: 0;
-  transform: scale(0.98) translateY(8px);
-}
 </style>