@363045841yyt/klinechart 0.7.5 → 0.7.7

package/src/components/ColorPresetPanel.vue

@@ -0,0 +1,289 @@
+<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">
+        重置颜色
+      </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>
+          <input
+            type="color"
+            class="color-input"
+            :value="getColorValue(item.key)"
+            @input="setColorValue(item.key, ($event.target as HTMLInputElement).value)"
+          />
+        </label>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import {
+  COLOR_PRESET_ITEMS,
+  darkTheme,
+  lightTheme,
+  normalizeColorPresetSettings,
+  type ColorPresetKey,
+  type ColorPresetThemeName,
+  type ColorPresetSettings,
+} from '@363045841yyt/klinechart-core'
+
+const props = defineProps<{
+  colorPresetSettings: ColorPresetSettings | undefined
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:colorPresetSettings', value: ColorPresetSettings): void
+}>()
+
+const themeOptions: readonly { value: ColorPresetThemeName; label: string }[] = [
+  { value: 'light', label: '浅色' },
+  { value: 'dark', label: '深色' },
+]
+
+const colorGroupLabels = {
+  canvas: '画布',
+  candle: 'K线 / 成交量',
+  axis: '坐标轴',
+  interaction: '交互 / 标记',
+} as const
+
+const colorPresetGroups = computed(() => {
+  return (Object.keys(colorGroupLabels) as Array<keyof typeof colorGroupLabels>)
+    .map((group) => ({
+      group,
+      label: colorGroupLabels[group],
+      items: COLOR_PRESET_ITEMS.filter((item) => item.group === group),
+    }))
+    .filter((group) => group.items.length > 0)
+})
+
+const editingTheme = ref<ColorPresetThemeName>('light')
+
+function getThemeDefaultColor(themeName: ColorPresetThemeName, key: ColorPresetKey): string {
+  const theme = themeName === 'dark' ? darkTheme : lightTheme
+  return theme.colors[key]
+}
+
+function getColorValue(key: ColorPresetKey): string {
+  const colorSettings = normalizeColorPresetSettings(props.colorPresetSettings)
+  return colorSettings[editingTheme.value]?.[key] ?? getThemeDefaultColor(editingTheme.value, key)
+}
+
+function setColorValue(key: ColorPresetKey, value: string): void {
+  const colorSettings = normalizeColorPresetSettings(props.colorPresetSettings)
+  emit('update:colorPresetSettings', {
+    ...colorSettings,
+    [editingTheme.value]: {
+      ...colorSettings[editingTheme.value],
+      [key]: value,
+    },
+  })
+}
+
+function resetCurrentThemeColors(): void {
+  const colorSettings = normalizeColorPresetSettings(props.colorPresetSettings)
+  const nextColorSettings = { ...colorSettings }
+  delete nextColorSettings[editingTheme.value]
+  emit('update:colorPresetSettings', nextColorSettings)
+}
+</script>
+
+<style scoped>
+/* ── 工具栏 ── */
+.color-preset-tools {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 4px;
+}
+
+/* ── 主题切换 ── */
+.theme-tabs {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 3px;
+  padding: 3px;
+  border: 1px solid var(--klc-color-border-button);
+  border-radius: 8px;
+  background: var(--klc-color-grid-minor);
+}
+
+.theme-tab {
+  height: 28px;
+  border: none;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--klc-color-axis-text);
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+  transition:
+    background 0.18s ease,
+    color 0.18s ease,
+    box-shadow 0.18s ease;
+}
+
+.theme-tab:not(.active):hover {
+  color: var(--klc-color-foreground);
+  background: color-mix(in srgb, var(--klc-color-tag-bg-white) 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: 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;
+}
+
+/* ── 分组标签 ── */
+.color-group-label {
+  margin: 6px 0 6px;
+  color: var(--klc-color-axis-text);
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 1.3;
+}
+
+/* ── 颜色网格 ── */
+.color-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 6px;
+}
+
+/* ── 颜色条目 ── */
+.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);
+  color: var(--klc-color-foreground);
+  font-size: 12px;
+  line-height: 1.3;
+  cursor: pointer;
+  transition:
+    border-color 0.18s ease,
+    background 0.18s ease,
+    box-shadow 0.18s 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);
+}
+
+.color-item span {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  user-select: none;
+}
+
+/* ── 颜色输入 ── */
+.color-input {
+  flex: 0 0 auto;
+  width: 26px;
+  height: 26px;
+  padding: 0;
+  border: 1px solid var(--klc-color-axis-line);
+  border-radius: 6px;
+  background: transparent;
+  cursor: pointer;
+  transition:
+    border-color 0.18s ease,
+    box-shadow 0.18s ease;
+}
+
+.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);
+}
+
+.color-input::-webkit-color-swatch-wrapper {
+  padding: 2px;
+}
+
+.color-input::-webkit-color-swatch {
+  border: none;
+  border-radius: 4px;
+}
+
+/* ── 响应式 ── */
+@media (max-width: 480px) {
+  .color-preset-tools {
+    grid-template-columns: 1fr;
+  }
+
+  .color-reset-btn {
+    width: 100%;
+  }
+
+  .color-grid {
+    grid-template-columns: 1fr;
+  }
+}
+</style>

package/src/components/DrawingStyleToolbar.vue

@@ -50,20 +50,7 @@
 
 <script setup lang="ts">
 import { onMounted, onUnmounted } from 'vue'
-
-export interface DrawingStyle {
-  stroke?: string
-  strokeWidth?: number
-  strokeStyle?: 'solid' | 'dashed' | 'dotted'
-  fill?: string
-}
-
-export interface DrawingObject {
-  id: string
-  type: string
-  points: { x: number; y: number }[]
-  style: DrawingStyle
-}
+import type { DrawingObject, DrawingStyle } from '@363045841yyt/klinechart-core/plugin'
 
 const props = defineProps<{
   drawing: DrawingObject
@@ -108,10 +95,10 @@ function onLineStyleChange(style: 'solid' | 'dashed' | 'dotted') {
   gap: 6px;
   padding: 4px 8px;
   height: 32px;
-  background: rgba(250, 251, 252, 0.88);
+  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 #e5e7eb;
+  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;
@@ -135,7 +122,7 @@ function onLineStyleChange(style: 'solid' | 'dashed' | 'dotted') {
   display: block;
   width: 100%;
   height: 100%;
-  border: 1px solid #d1d5db;
+  border: 1px solid var(--klc-color-axis-line);
   border-radius: 4px;
   cursor: pointer;
 }
@@ -152,17 +139,17 @@ function onLineStyleChange(style: 'solid' | 'dashed' | 'dotted') {
 .toolbar-select {
   height: 24px;
   padding: 0 4px;
-  border: 1px solid #d1d5db;
+  border: 1px solid var(--klc-color-axis-line);
   border-radius: 4px;
-  background: #fff;
-  color: #374151;
+  background: var(--klc-color-tag-bg-white);
+  color: var(--klc-color-foreground);
   font-size: 12px;
   cursor: pointer;
   outline: none;
 }
 
 .toolbar-select:hover {
-  border-color: #9ca3af;
+  border-color: var(--klc-color-axis-text);
 }
 
 .toolbar-btn {
@@ -175,15 +162,15 @@ function onLineStyleChange(style: 'solid' | 'dashed' | 'dotted') {
   border: 1px solid transparent;
   border-radius: 4px;
   background: transparent;
-  color: #6b7280;
+  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: #d1d5db;
-  background: #f3f4f6;
-  color: #374151;
+  border-color: var(--klc-color-axis-line);
+  background: var(--klc-color-grid-minor);
+  color: var(--klc-color-foreground);
 }
 
 .delete-btn:hover {

package/src/components/IndicatorParams.vue

@@ -117,6 +117,7 @@
 
 <script setup lang="ts">
 import { ref, watch, computed } from 'vue'
+import { useFullscreenTeleportTarget } from '../composables/useFullscreenTeleportTarget'
 
 export interface ParamConfig {
   key: string
@@ -146,7 +147,7 @@ const emit = defineEmits<{
 const localValues = ref<Record<string, number>>({ ...props.values })
 const showDescription = ref(true)
 
-const teleportTarget = computed(() => 'body')
+const teleportTarget = useFullscreenTeleportTarget()
 
 watch(
   () => props.values,
@@ -205,8 +206,8 @@ function onConfirm() {
 
 /* ── 弹窗 ── */
 .indicator-params {
-  background: #ffffff;
-  border: 1px solid #e0e0e0;
+  background: var(--klc-color-tag-bg-white);
+  border: 1px solid var(--klc-color-border-button);
   border-radius: 12px;
   box-shadow: 0 8px 40px rgba(0, 0, 0, 0.15);
   min-width: 340px;
@@ -221,8 +222,8 @@ function onConfirm() {
   justify-content: space-between;
   align-items: center;
   padding: 16px 20px;
-  background: #f8f8f8;
-  border-bottom: 1px solid #e8e8e8;
+  background: var(--klc-color-background);
+  border-bottom: 1px solid var(--klc-color-grid-major);
 }
 
 .header-left {
@@ -240,18 +241,18 @@ function onConfirm() {
 .params-title {
   font-size: 14px;
   font-weight: 600;
-  color: #1a1a1a;
+  color: var(--klc-color-foreground);
   letter-spacing: 0.2px;
 }
 
 .params-subtitle {
   font-size: 11px;
-  color: #999;
+  color: var(--klc-color-axis-text);
 }
 
 .toggle-desc-btn {
-  background: #fff;
-  border: 1px solid #e0e0e0;
+  background: var(--klc-color-tag-bg-white);
+  border: 1px solid var(--klc-color-border-button);
   border-radius: 6px;
   width: 28px;
   height: 28px;
@@ -259,21 +260,21 @@ function onConfirm() {
   align-items: center;
   justify-content: center;
   cursor: pointer;
-  color: #888;
+  color: var(--klc-color-axis-text);
   transition: all 0.2s;
   padding: 0;
 }
 
 .toggle-desc-btn:hover {
-  background: #f0f0f0;
-  color: #555;
-  border-color: #ccc;
+  background: var(--klc-color-tag-bg-hover);
+  color: var(--klc-color-foreground);
+  border-color: var(--klc-color-axis-line);
 }
 
 .toggle-desc-btn.active {
-  background: #1a1a1a;
-  border-color: #1a1a1a;
-  color: #fff;
+  background: var(--klc-color-foreground);
+  border-color: var(--klc-color-foreground);
+  color: var(--klc-color-background);
 }
 
 .toggle-desc-btn svg {
@@ -282,8 +283,8 @@ function onConfirm() {
 }
 
 .params-close {
-  background: #fff;
-  border: 1px solid #e0e0e0;
+  background: var(--klc-color-tag-bg-white);
+  border: 1px solid var(--klc-color-border-button);
   border-radius: 6px;
   width: 28px;
   height: 28px;
@@ -291,15 +292,15 @@ function onConfirm() {
   align-items: center;
   justify-content: center;
   cursor: pointer;
-  color: #888;
+  color: var(--klc-color-axis-text);
   transition: background 0.15s, color 0.15s, border-color 0.15s;
   padding: 0;
 }
 
 .params-close:hover {
-  background: #f0f0f0;
-  color: #333;
-  border-color: #ccc;
+  background: var(--klc-color-tag-bg-hover);
+  color: var(--klc-color-foreground);
+  border-color: var(--klc-color-axis-line);
 }
 
 .params-close svg {
@@ -310,15 +311,15 @@ function onConfirm() {
 /* ── 指标描述 ── */
 .indicator-description {
   padding: 12px 20px;
-  background: #f0f7ff;
-  border-bottom: 1px solid #d6e8f5;
+  background: color-mix(in srgb, var(--klc-color-alert-active) 10%, var(--klc-color-background));
+  border-bottom: 1px solid color-mix(in srgb, var(--klc-color-alert-active) 20%, transparent);
 }
 
 .indicator-description p {
   margin: 0;
   font-size: 12px;
   line-height: 1.6;
-  color: #2c5282;
+  color: var(--klc-color-alert-active);
 }
 
 /* ── 体部 ── */
@@ -332,13 +333,13 @@ function onConfirm() {
 .param-item {
   padding: 10px 14px;
   border-radius: 8px;
-  background: #f8f8f8;
-  border: 1px solid #e8e8e8;
+  background: var(--klc-color-background);
+  border: 1px solid var(--klc-color-grid-major);
   transition: border-color 0.2s;
 }
 
 .param-item:has(.param-input:focus) {
-  border-color: #bbb;
+  border-color: var(--klc-color-axis-text);
 }
 
 .param-item.has-desc {
@@ -361,22 +362,22 @@ function onConfirm() {
 .param-label-text {
   font-size: 13px;
   font-weight: 500;
-  color: #333;
+  color: var(--klc-color-foreground);
 }
 
 .param-range {
   font-size: 11px;
-  color: #999;
+  color: var(--klc-color-axis-text);
 }
 
 /* ── 参数描述 ── */
 .param-description {
   margin-top: 8px;
   padding-top: 8px;
-  border-top: 1px dashed #e0e0e0;
+  border-top: 1px dashed var(--klc-color-border-button);
   font-size: 11px;
   line-height: 1.5;
-  color: #666;
+  color: var(--klc-color-axis-text);
 }
 
 /* ── 步进输入框 ── */
@@ -384,25 +385,25 @@ function onConfirm() {
   display: flex;
   align-items: stretch;
   height: 32px;
-  border: 1px solid #d0d0d0;
+  border: 1px solid var(--klc-color-axis-line);
   border-radius: 7px;
   overflow: hidden;
-  background: #fff;
+  background: var(--klc-color-tag-bg-white);
   transition: border-color 0.2s;
 }
 
 .input-wrapper:focus-within {
-  border-color: #999;
+  border-color: var(--klc-color-axis-text);
 }
 
 .stepper-btn {
   width: 28px;
-  background: #f0f0f0;
+  background: var(--klc-color-grid-minor);
   border: none;
   cursor: pointer;
   font-size: 15px;
   font-weight: 400;
-  color: #666;
+  color: var(--klc-color-axis-text);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -412,24 +413,24 @@ function onConfirm() {
 }
 
 .stepper-btn:hover:not(:disabled) {
-  background: #e0e0e0;
-  color: #333;
+  background: var(--klc-color-border-button);
+  color: var(--klc-color-foreground);
 }
 
 .stepper-btn:disabled {
-  color: #ccc;
+  color: var(--klc-color-axis-line);
   cursor: not-allowed;
 }
 
 .param-input {
   width: 60px;
   border: none;
-  border-left: 1px solid #e8e8e8;
-  border-right: 1px solid #e8e8e8;
+  border-left: 1px solid var(--klc-color-grid-major);
+  border-right: 1px solid var(--klc-color-grid-major);
   font-size: 13px;
   font-weight: 600;
   text-align: center;
-  color: #1a1a1a;
+  color: var(--klc-color-foreground);
   background: transparent;
   -moz-appearance: textfield;
   appearance: textfield;
@@ -450,8 +451,8 @@ function onConfirm() {
   align-items: center;
   justify-content: space-between;
   padding: 12px 20px;
-  background: #f8f8f8;
-  border-top: 1px solid #e8e8e8;
+  background: var(--klc-color-background);
+  border-top: 1px solid var(--klc-color-grid-major);
 }
 
 .footer-right {
@@ -482,8 +483,8 @@ function onConfirm() {
 /* 重置 */
 .params-btn.reset {
   background: transparent;
-  border-color: #d0d0d0;
-  color: #666;
+  border-color: var(--klc-color-axis-line);
+  color: var(--klc-color-axis-text);
 }
 
 .params-btn.reset:hover {
@@ -495,26 +496,26 @@ function onConfirm() {
 /* 取消 */
 .params-btn.cancel {
   background: transparent;
-  border-color: #d0d0d0;
-  color: #666;
+  border-color: var(--klc-color-axis-line);
+  color: var(--klc-color-axis-text);
 }
 
 .params-btn.cancel:hover {
-  background: #f0f0f0;
-  color: #333;
-  border-color: #bbb;
+  background: var(--klc-color-tag-bg-hover);
+  color: var(--klc-color-foreground);
+  border-color: var(--klc-color-axis-text);
 }
 
 /* 确定 */
 .params-btn.confirm {
-  background: #1a1a1a;
-  border-color: #1a1a1a;
-  color: #fff;
+  background: var(--klc-color-foreground);
+  border-color: var(--klc-color-foreground);
+  color: var(--klc-color-background);
 }
 
 .params-btn.confirm:hover {
-  background: #333;
-  border-color: #333;
+  background: var(--klc-color-foreground);
+  border-color: var(--klc-color-foreground);
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
   transform: translateY(-1px);
 }