@363045841yyt/klinechart 0.7.5 → 0.7.7

package/src/components/KLineTooltip.vue

@@ -67,15 +67,22 @@ export interface KLineData {
   stockCode?: string
 }
 
-const props = defineProps<{
+const props = withDefaults(defineProps<{
   k: KLineData | null
   index: number | null
-  data: KLineData[]
+  data: ReadonlyArray<KLineData>
   pos: { x: number; y: number }
   useAnchor?: boolean
   anchorPlacement?: 'right-bottom' | 'left-bottom'
   setEl?: (el: HTMLDivElement | null) => void
-}>()
+  /** 涨的颜色（默认红涨） */
+  upColor?: string
+  /** 跌的颜色（默认绿跌） */
+  downColor?: string
+}>(), {
+  upColor: '#ef4444',
+  downColor: '#22c55e',
+})
 
 const useAnchor = computed(() => props.useAnchor === true)
 const anchorPlacementClass = computed(() =>
@@ -105,11 +112,9 @@ function formatSigned(val: number, unit: string): string {
   return `${sign}${val.toFixed(2)}${unit}`
 }
 
-const UP_COLOR = '#ef4444'
-const DOWN_COLOR = '#22c55e'
 const NEUTRAL_COLOR = '#6b7280'
 
-function calcDirection(k: KLineData, data: KLineData[], idx: number | null): number {
+function calcDirection(k: KLineData, data: ReadonlyArray<KLineData>, idx: number | null): number {
   if (k.close >= k.open) return 1
   const prev = typeof idx === 'number' && idx > 0 ? data[idx - 1] : undefined
   if (prev && k.close > prev.close) return 1
@@ -121,21 +126,21 @@ const openColor = computed(() => {
   const k = props.k
   if (!k) return NEUTRAL_COLOR
   const dir = calcDirection(k, props.data, props.index)
-  return dir > 0 ? UP_COLOR : dir < 0 ? DOWN_COLOR : NEUTRAL_COLOR
+  return dir > 0 ? props.upColor : dir < 0 ? props.downColor : NEUTRAL_COLOR
 })
 
 const closeColor = computed(() => {
   const k = props.k
   if (!k) return NEUTRAL_COLOR
   const diff = k.close - k.open
-  return diff > 0 ? UP_COLOR : diff < 0 ? DOWN_COLOR : NEUTRAL_COLOR
+  return diff > 0 ? props.upColor : diff < 0 ? props.downColor : NEUTRAL_COLOR
 })
 
 const changeColor = computed(() => {
   const k = props.k
   if (!k) return NEUTRAL_COLOR
   const pct = k.changePercent ?? (k.close - k.open) / k.open * 100
-  return pct > 0 ? UP_COLOR : pct < 0 ? DOWN_COLOR : NEUTRAL_COLOR
+  return pct > 0 ? props.upColor : pct < 0 ? props.downColor : NEUTRAL_COLOR
 })
 </script>
 
@@ -147,10 +152,10 @@ const changeColor = computed(() => {
   max-width: 260px;
   padding: 10px 12px;
   border-radius: 8px;
-  background: rgba(255, 255, 255, 0.92);
-  border: 1px solid rgba(0, 0, 0, 0.12);
+  background: var(--klc-color-tooltip-bg);
+  border: 1px solid var(--klc-color-tooltip-border);
   box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
-  color: rgba(0, 0, 0, 0.78);
+  color: var(--klc-color-tooltip-text);
   font-size: 12px;
   line-height: 1.4;
   pointer-events: none;
@@ -178,7 +183,8 @@ const changeColor = computed(() => {
 }
 
 .kline-tooltip__grid .row span:first-child {
-  color: rgba(0, 0, 0, 0.56);
+  color: var(--klc-color-tooltip-text);
+  opacity: 0.56;
 }
 
 @supports (anchor-name: --kmap-anchor) and (position-anchor: --kmap-anchor) {

package/src/components/LeftToolbar.vue

@@ -113,114 +113,15 @@
     </div>
   </nav>
 
-  <!-- 设置弹窗 -->
-  <Teleport :to="teleportTarget">
-    <Transition name="overlay">
-      <div v-if="showSettings" class="settings-overlay" @click="closeSettings">
-        <Transition name="modal">
-          <div class="settings-modal" @click.stop>
-            <!-- 头部 -->
-            <div class="settings-header">
-              <div class="header-left">
-                <span class="settings-title">图表设置</span>
-                <span class="settings-subtitle">个性化配置</span>
-              </div>
-              <div class="header-right">
-                <button class="settings-close" @click="closeSettings">
-                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                    <path d="M18 6L6 18M6 6l12 12" />
-                  </svg>
-                </button>
-              </div>
-            </div>
-
-            <!-- 体部 -->
-            <div class="settings-body">
-              <!-- 主图设置 -->
-              <template v-if="mainSettings.length > 0">
-                <div class="settings-section-divider">
-                  <span class="settings-section-label">主图设置</span>
-                </div>
-                <template v-for="item in mainSettings" :key="item.key">
-                  <div class="settings-item">
-                    <label class="settings-label">
-                      <span>{{ item.label }}</span>
-                      <template v-if="item.type === 'boolean'">
-                        <input
-                          type="checkbox"
-                          class="settings-checkbox"
-                          v-model="settings[item.key]"
-                        />
-                      </template>
-                      <template v-else-if="item.type === 'select' && item.options">
-                        <select class="settings-select" v-model="settings[item.key]">
-                          <option v-for="opt in item.options" :key="opt.value" :value="opt.value">
-                            {{ opt.label }}
-                          </option>
-                        </select>
-                      </template>
-                    </label>
-                  </div>
-                </template>
-              </template>
-
-              <!-- 实验性设置 -->
-              <template v-if="experimentalSettings.length > 0">
-                <div class="settings-section-divider">
-                  <span class="settings-section-label">实验性 / 调试设置</span>
-                </div>
-                <template v-for="item in experimentalSettings" :key="item.key">
-                  <div class="settings-item experimental">
-                    <label class="settings-label">
-                      <span>{{ item.label }}</span>
-                      <template v-if="item.type === 'boolean'">
-                        <input
-                          type="checkbox"
-                          class="settings-checkbox"
-                          v-model="settings[item.key]"
-                        />
-                      </template>
-                      <template v-else-if="item.type === 'select' && item.options">
-                        <select class="settings-select" v-model="settings[item.key]">
-                          <option v-for="opt in item.options" :key="opt.value" :value="opt.value">
-                            {{ opt.label }}
-                          </option>
-                        </select>
-                      </template>
-                    </label>
-                  </div>
-                </template>
-              </template>
-            </div>
-
-            <!-- 底部 -->
-            <div class="settings-footer">
-              <button class="settings-btn reset" @click="resetSettings">
-                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                  <path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" />
-                  <path d="M3 3v5h5" />
-                </svg>
-                重置
-              </button>
-              <div class="footer-right">
-                <button class="settings-btn cancel" @click="closeSettings">取消</button>
-                <button class="settings-btn confirm" @click="confirmSettings">
-                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
-                    <path d="M20 6L9 17l-5-5" />
-                  </svg>
-                  确定
-                </button>
-              </div>
-            </div>
-          </div>
-        </Transition>
-      </div>
-    </Transition>
-  </Teleport>
+  <ChartSettingsDialog
+    :show="showSettings"
+    @close="showSettings = false"
+    @confirm="handleConfirmSettings"
+  />
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted, onUnmounted } from 'vue'
+import { ref, onMounted, onUnmounted } from 'vue'
 import IconTablerPointer from '~icons/tabler/pointer'
 import IconTablerChartLine from '~icons/tabler/chart-line'
 import IconTablerArrowUpRight from '~icons/tabler/arrow-up-right'
@@ -241,10 +142,10 @@ import IconTablerBrackets from '~icons/tabler/brackets'
 import {
   DEFAULT_SETTINGS,
   SETTINGS_STORAGE_KEY,
-  type SettingItem,
+  type ChartSettings,
 } from '@363045841yyt/klinechart-core/config'
-import { useFullscreenTeleportTarget } from '../composables/useFullscreenTeleportTarget'
 import { setCanvasProfilerEnabled } from '../debug/canvasProfiler'
+import ChartSettingsDialog from './ChartSettingsDialog.vue'
 
 export interface ToolDef {
   id: string
@@ -291,49 +192,39 @@ const emit = defineEmits<{
   (e: 'toggleFullscreen'): void
   (e: 'zoomIn'): void
   (e: 'zoomOut'): void
-  (e: 'settingsChange', settings: Record<string, boolean | string>): void
+  (e: 'settingsChange', settings: ChartSettings): void
 }>()
 
 const selectedToolId = ref('cursor')
 const openGroupId = ref<string | null>(null)
 const showSettings = ref(false)
 
-const teleportTarget = useFullscreenTeleportTarget()
-
-const mainSettings = computed(
-  () => DEFAULT_SETTINGS.filter((s) => s.group === 'main') as unknown as SettingItem[],
-)
-const experimentalSettings = computed(
-  () => DEFAULT_SETTINGS.filter((s) => s.group === 'experimental') as unknown as SettingItem[],
-)
-
-function loadSettings(): Record<string, boolean | string> {
+function loadSettings(): ChartSettings {
   try {
     const saved = localStorage.getItem(SETTINGS_STORAGE_KEY)
     if (saved) {
       const parsed = JSON.parse(saved)
-      const result: Record<string, boolean | string> = {}
+      const result: ChartSettings = { ...parsed }
       DEFAULT_SETTINGS.forEach((item) => {
         result[item.key] = parsed[item.key] ?? item.default
       })
       return result
     }
   } catch {}
-  const defaults: Record<string, boolean | string> = {}
+  const defaults: ChartSettings = {}
   DEFAULT_SETTINGS.forEach((item) => {
     defaults[item.key] = item.default
   })
   return defaults
 }
 
-function saveSettings(settings: Record<string, boolean | string>) {
+function saveSettings(settings: ChartSettings) {
   try {
     localStorage.setItem(SETTINGS_STORAGE_KEY, JSON.stringify(settings))
   } catch {}
 }
 
-const appliedSettings = ref<Record<string, boolean | string>>(loadSettings())
-const settings = ref<Record<string, boolean | string>>({ ...appliedSettings.value })
+const appliedSettings = ref<ChartSettings>(loadSettings())
 
 function isActive(tool: ToolDef): boolean {
   if (selectedToolId.value === tool.id) return true
@@ -370,38 +261,25 @@ function toggleExpand(groupId: string) {
 }
 
 function openSettings() {
-  settings.value = { ...appliedSettings.value }
   showSettings.value = true
 }
 
-function closeSettings() {
-  showSettings.value = false
+function getCurrentSettings(): ChartSettings {
+  return { ...appliedSettings.value }
 }
 
-function resetSettings() {
-  const defaults: Record<string, boolean | string> = {}
-  DEFAULT_SETTINGS.forEach((item) => {
-    defaults[item.key] = item.default
-  })
-  settings.value = defaults
-}
+defineExpose({
+  getSettings: getCurrentSettings,
+})
 
-function confirmSettings() {
-  appliedSettings.value = { ...settings.value }
+function handleConfirmSettings(draft: ChartSettings) {
+  appliedSettings.value = { ...draft }
   saveSettings(appliedSettings.value)
   setCanvasProfilerEnabled(!!appliedSettings.value['enableCanvasProfiler'])
   emit('settingsChange', { ...appliedSettings.value })
-  closeSettings()
-}
-
-function getCurrentSettings(): Record<string, boolean | string> {
-  return { ...appliedSettings.value }
+  showSettings.value = false
 }
 
-defineExpose({
-  getSettings: getCurrentSettings,
-})
-
 function handleClickOutside(e: MouseEvent) {
   const target = e.target as HTMLElement
   if (!target.closest('.tool-item')) {
@@ -428,9 +306,9 @@ onUnmounted(() => {
   align-items: center;
   gap: 6px;
   padding: 8px 5px;
-  border: 1px solid #e5e7eb;
+  border: 1px solid var(--klc-color-border-chart);
   border-radius: 6px;
-  background: #fafbfc;
+  background: var(--klc-color-background);
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
   box-sizing: border-box;
   user-select: none;
@@ -445,7 +323,7 @@ onUnmounted(() => {
 .left-toolbar__divider {
   width: 18px;
   height: 1px;
-  background: #e5e7eb;
+  background: var(--klc-color-border-chart);
 }
 
 /* --- 工具按钮 --- */
@@ -457,7 +335,7 @@ onUnmounted(() => {
   border: 1px solid transparent;
   border-radius: 4px;
   background: transparent;
-  color: #6b7280;
+  color: var(--klc-color-axis-text);
   cursor: pointer;
   display: inline-flex;
   align-items: center;
@@ -469,20 +347,20 @@ onUnmounted(() => {
 }
 
 .left-toolbar__button:hover {
-  border-color: #d1d5db;
-  background: #f3f4f6;
-  color: #374151;
+  border-color: var(--klc-color-axis-line);
+  background: var(--klc-color-tag-bg-hover);
+  color: var(--klc-color-foreground);
 }
 
 .left-toolbar__button.active {
-  border-color: #9ca3af;
-  background: #e5e7eb;
-  color: #1f2937;
+  border-color: var(--klc-color-border-chart);
+  background: var(--klc-color-grid-major);
+  color: var(--klc-color-foreground);
 }
 
 .left-toolbar__button:focus-visible {
   outline: none;
-  border-color: #6b7280;
+  border-color: var(--klc-color-axis-text);
 }
 
 .tool-icon {
@@ -538,10 +416,10 @@ onUnmounted(() => {
   gap: 4px;
   padding: 0 5px;
   height: 40px;
-  background: rgba(250, 251, 252, 0.82);
+  background: var(--klc-color-tag-bg-white);
   backdrop-filter: blur(8px);
   -webkit-backdrop-filter: blur(8px);
-  border: 1px solid #e5e7eb;
+  border: 1px solid var(--klc-color-border-chart);
   border-radius: 6px;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
   box-sizing: border-box;
@@ -605,240 +483,4 @@ onUnmounted(() => {
   }
 }
 
-/* ═══ 设置弹窗样式（参考 IndicatorParams.vue）═══ */
-.settings-overlay {
-  position: fixed;
-  inset: 0;
-  background: rgba(0, 0, 0, 0.3);
-  backdrop-filter: blur(4px);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 1000;
-}
-
-.settings-modal {
-  background: #ffffff;
-  border: 1px solid #e0e0e0;
-  border-radius: 12px;
-  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.15);
-  min-width: 340px;
-  max-width: 420px;
-  width: 90vw;
-  overflow: hidden;
-}
-
-.settings-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 16px 20px;
-  background: #f8f8f8;
-  border-bottom: 1px solid #e8e8e8;
-}
-
-.header-left {
-  display: flex;
-  align-items: baseline;
-  gap: 8px;
-}
-
-.header-right {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.settings-title {
-  font-size: 14px;
-  font-weight: 600;
-  color: #1a1a1a;
-  letter-spacing: 0.2px;
-}
-
-.settings-subtitle {
-  font-size: 11px;
-  color: #999;
-}
-
-.settings-close {
-  background: #fff;
-  border: 1px solid #e0e0e0;
-  border-radius: 6px;
-  width: 28px;
-  height: 28px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  color: #888;
-  transition:
-    background 0.15s,
-    color 0.15s,
-    border-color 0.15s;
-  padding: 0;
-}
-
-.settings-close:hover {
-  background: #f0f0f0;
-  color: #333;
-  border-color: #ccc;
-}
-
-.settings-close svg {
-  width: 14px;
-  height: 14px;
-}
-
-.settings-body {
-  padding: 16px 20px;
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-}
-
-.settings-item {
-  padding: 8px 12px;
-  border-radius: 8px;
-  background: #f8f8f8;
-  border: 1px solid #e8e8e8;
-}
-
-.settings-label {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  font-size: 13px;
-  color: #333;
-  cursor: pointer;
-}
-
-.settings-checkbox {
-  width: 16px;
-  height: 16px;
-  cursor: pointer;
-  accent-color: #1a1a1a;
-}
-
-.settings-select {
-  padding: 4px 8px;
-  border: 1px solid #d0d0d0;
-  border-radius: 6px;
-  background: #fff;
-  color: #333;
-  font-size: 12px;
-  cursor: pointer;
-  outline: none;
-  min-width: 140px;
-}
-
-.settings-select:hover {
-  border-color: #9ca3af;
-}
-
-.settings-select:focus {
-  border-color: #6b7280;
-  box-shadow: 0 0 0 2px rgba(107, 114, 128, 0.15);
-}
-
-.settings-section-divider {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin-top: 4px;
-}
-
-.settings-section-divider::before,
-.settings-section-divider::after {
-  content: '';
-  flex: 1;
-  border-top: 1px solid #e0e0e0;
-}
-
-.settings-section-label {
-  font-size: 11px;
-  color: #999;
-  white-space: nowrap;
-}
-
-.settings-item.experimental {
-  border-color: #f0e0d0;
-  background: #fdf8f3;
-}
-
-.settings-footer {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 12px 20px;
-  background: #f8f8f8;
-  border-top: 1px solid #e8e8e8;
-}
-
-.footer-right {
-  display: flex;
-  gap: 8px;
-}
-
-.settings-btn {
-  display: flex;
-  align-items: center;
-  gap: 5px;
-  padding: 6px 14px;
-  border-radius: 7px;
-  font-size: 13px;
-  font-weight: 500;
-  cursor: pointer;
-  border: 1px solid transparent;
-  transition: all 0.15s;
-  line-height: 1.4;
-}
-
-.settings-btn svg {
-  width: 12px;
-  height: 12px;
-  flex-shrink: 0;
-}
-
-.settings-btn.reset {
-  background: transparent;
-  border-color: #d0d0d0;
-  color: #666;
-}
-
-.settings-btn.reset:hover {
-  border-color: #c0392b;
-  color: #e74c3c;
-  background: rgba(231, 76, 60, 0.08);
-}
-
-.settings-btn.cancel {
-  background: transparent;
-  border-color: #d0d0d0;
-  color: #666;
-}
-
-.settings-btn.cancel:hover {
-  background: #f0f0f0;
-  color: #333;
-  border-color: #bbb;
-}
-
-.settings-btn.confirm {
-  background: #1a1a1a;
-  border-color: #1a1a1a;
-  color: #fff;
-}
-
-.settings-btn.confirm:hover {
-  background: #333;
-  border-color: #333;
-  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
-  transform: translateY(-1px);
-}
-
-.settings-btn.confirm:active {
-  transform: translateY(0);
-  box-shadow: none;
-}
 </style>

package/src/components/MarkerTooltip.vue

@@ -19,18 +19,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import type { ComponentPublicInstance } from 'vue'
-
-interface MarkerEntity {
-  markerType: string
-  metadata: Record<string, unknown>
-}
-
-interface CustomMarkerEntity {
-  date: string
-  shape: string
-  label?: { text: string }
-  metadata: Record<string, unknown>
-}
+import type { MarkerEntity, CustomMarkerEntity } from '@363045841yyt/klinechart-core/engine/marker/registry'
 
 const MARKER_TYPE_LABELS: Record<string, string> = {
   support: '支撑位',
@@ -102,10 +91,10 @@ function formatValue(value: unknown): string {
   max-width: 260px;
   padding: 10px 12px;
   border-radius: 8px;
-  background: rgba(255, 255, 255, 0.92);
-  border: 1px solid rgba(0, 0, 0, 0.12);
+  background: var(--klc-color-tooltip-bg);
+  border: 1px solid var(--klc-color-tooltip-border);
   box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
-  color: rgba(0, 0, 0, 0.78);
+  color: var(--klc-color-tooltip-text);
   font-size: 12px;
   line-height: 1.4;
   pointer-events: none;
@@ -133,7 +122,7 @@ function formatValue(value: unknown): string {
 }
 
 .marker-tooltip__content .row span:first-child {
-  color: rgba(0, 0, 0, 0.56);
+  color: color-mix(in srgb, var(--klc-color-tooltip-text) 70%, transparent);
 }
 
 @supports (anchor-name: --kmap-anchor) and (position-anchor: --kmap-anchor) {

package/src/components/index.ts

@@ -1,3 +1,4 @@
+export { default as ColorPresetPanel } from './ColorPresetPanel.vue'
 export { default as DrawingStyleToolbar } from './DrawingStyleToolbar.vue'
 export { default as IndicatorParams } from './IndicatorParams.vue'
 export { default as IndicatorSelector } from './IndicatorSelector.vue'

package/src/composables/useFullscreenTeleportTarget.ts

@@ -8,11 +8,9 @@ export function provideFullscreenTeleportTarget(targetRef: Ref<HTMLElement | nul
 }
 
 export function useFullscreenTeleportTarget() {
-  // null = no provider in ancestor tree (degraded scenario)
   const targetRef = inject(FULLSCREEN_TARGET_KEY, null)
 
   return computed<HTMLElement | string>(() => {
-    // targetRef null → no provider; targetRef.value null → container not mounted yet
     return targetRef?.value ?? 'body'
   })
 }