@363045841yyt/klinechart 0.8.5 → 0.8.6

package/dist/web-component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"web-component.d.ts","sourceRoot":"","sources":["../src/web-component.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,mBAAmB,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAA;AAE9F,QAAA,MAAM,iBAAiB;;;;;;;;;;;;;;aAU2qsC,CAAC;kBAAyB,CAAC;;;;;iBAAsH,CAAC;gBAAc,CAAC;;;iBAAuD,CAAC;gBAAc,CAAC;;qBAAgC,CAAC;;EARz8sC,CAAA;AAIF,OAAO,EAAE,iBAAiB,EAAE,CAAA;AAC5B,eAAe,iBAAiB,CAAA;AAEhC,YAAY,EAAE,mBAAmB,EAAE,WAAW,EAAE,CAAA"}
+{"version":3,"file":"web-component.d.ts","sourceRoot":"","sources":["../src/web-component.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,mBAAmB,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAA;AAE9F,QAAA,MAAM,iBAAiB;;;;;;;;;;;;;;aAUojnC,CAAC;kBAAyB,CAAC;;;;;iBAAsH,CAAC;gBAAc,CAAC;;;iBAAuD,CAAC;gBAAc,CAAC;;qBAAgC,CAAC;;EARl1nC,CAAA;AAIF,OAAO,EAAE,iBAAiB,EAAE,CAAA;AAC5B,eAAe,iBAAiB,CAAA;AAEhC,YAAY,EAAE,mBAAmB,EAAE,WAAW,EAAE,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@363045841yyt/klinechart",
-  "version": "0.8.5",
+  "version": "0.8.6",
   "description": "Vue 3 bindings for @363045841yyt/klinechart-core. Idiomatic composables, SFC components.",
   "license": "MIT",
   "repository": {

package/src/components/BaseModal.vue

@@ -0,0 +1,292 @@
+<template>
+  <Teleport :to="teleportTarget">
+    <Transition name="overlay">
+      <div
+        v-if="show"
+        class="base-overlay"
+        :style="{ zIndex, padding: overlayPadding }"
+        @click="closeOnOverlay ? emit('close') : undefined"
+      >
+        <Transition :name="modalTransitionName">
+          <div
+            class="base-modal"
+            :style="modalStyle"
+            @click.stop
+          >
+            <div v-if="$slots.header || title" class="base-header">
+              <slot name="header">
+                <div class="base-header-left">
+                  <span class="base-title">{{ title }}</span>
+                  <span v-if="subtitle" class="base-subtitle">{{ subtitle }}</span>
+                </div>
+              </slot>
+              <div v-if="showClose" class="base-header-right">
+                <slot name="header-extra" />
+                <button class="base-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>
+
+            <div v-if="$slots.subheader" class="base-subheader">
+              <slot name="subheader" />
+            </div>
+
+            <div class="base-body" :style="{ padding: bodyPadding }">
+              <slot />
+            </div>
+
+            <div v-if="$slots.footer" class="base-footer" :style="{ justifyContent: footerAlign }">
+              <slot name="footer" />
+            </div>
+          </div>
+        </Transition>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useFullscreenTeleportTarget } from '../composables/useFullscreenTeleportTarget'
+
+const props = withDefaults(
+  defineProps<{
+    show: boolean
+    title?: string
+    subtitle?: string
+    zIndex?: number
+    width?: string
+    maxWidth?: string
+    maxHeight?: string
+    overlayPadding?: string
+    bodyPadding?: string
+    footerAlign?: 'flex-end' | 'center' | 'flex-start' | 'space-between'
+    closeOnOverlay?: boolean
+    showClose?: boolean
+    transitionVariant?: 'default' | 'compact'
+  }>(),
+  {
+    title: '',
+    subtitle: '',
+    zIndex: 1000,
+    width: 'min(92vw, 400px)',
+    maxWidth: '',
+    maxHeight: 'min(600px, calc(100vh - 48px))',
+    overlayPadding: '24px',
+    bodyPadding: '16px 20px',
+    footerAlign: 'flex-end',
+    closeOnOverlay: true,
+    showClose: true,
+    transitionVariant: 'default',
+  },
+)
+
+const emit = defineEmits<{
+  close: []
+}>()
+
+const teleportTarget = useFullscreenTeleportTarget()
+
+const modalTransitionName = computed(() =>
+  props.transitionVariant === 'compact' ? 'modal-compact' : 'modal',
+)
+
+const modalStyle = computed(() => ({
+  width: props.width,
+  maxWidth: props.maxWidth || undefined,
+  maxHeight: props.maxHeight,
+}))
+</script>
+
+<style scoped>
+.base-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.3);
+  backdrop-filter: blur(4px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.base-modal {
+  background: var(--klc-color-background);
+  border: 1px solid var(--klc-color-border-button);
+  border-radius: 10px;
+  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.15);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.base-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 14px 18px 14px 20px;
+  background: var(--klc-color-background);
+  border-bottom: 1px solid var(--klc-color-grid-major);
+  flex-shrink: 0;
+  gap: 12px;
+}
+
+.base-header-left {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  min-width: 0;
+}
+
+.base-title {
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--klc-color-foreground);
+  line-height: 1.35;
+}
+
+.base-subtitle {
+  font-size: 11px;
+  color: var(--klc-color-axis-text);
+  line-height: 1.3;
+  white-space: nowrap;
+}
+
+.base-header-right {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-shrink: 0;
+}
+
+.base-close-btn {
+  background: var(--klc-color-background);
+  border: 1px solid var(--klc-color-border-button);
+  border-radius: 8px;
+  width: 32px;
+  height: 32px;
+  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;
+}
+
+.base-close-btn:hover {
+  background: var(--klc-color-tag-bg-hover);
+  color: var(--klc-color-foreground);
+  border-color: var(--klc-color-axis-line);
+}
+
+.base-close-btn svg {
+  width: 14px;
+  height: 14px;
+}
+
+.base-subheader {
+  flex-shrink: 0;
+  padding: 16px 20px;
+  background: var(--klc-color-background);
+  border-bottom: 1px solid var(--klc-color-grid-major);
+}
+
+.base-body {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  background: var(--klc-color-background);
+}
+
+.base-body::-webkit-scrollbar {
+  width: 8px;
+}
+
+.base-body::-webkit-scrollbar-track {
+  background: var(--klc-color-background);
+}
+
+.base-body::-webkit-scrollbar-thumb {
+  background: var(--klc-color-axis-line);
+  border: 2px solid var(--klc-color-background);
+  border-radius: 999px;
+}
+
+.base-footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 8px;
+  padding: 12px 20px;
+  background: var(--klc-color-background);
+  border-top: 1px solid var(--klc-color-grid-major);
+  flex-shrink: 0;
+}
+
+/* ── Overlay transition ── */
+.overlay-enter-active,
+.overlay-leave-active {
+  transition: opacity 0.2s ease;
+}
+
+.overlay-enter-from,
+.overlay-leave-to {
+  opacity: 0;
+}
+
+/* ── Modal transition (default variant) ── */
+.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);
+}
+
+/* ── Modal transition (compact variant) ── */
+.modal-compact-enter-active {
+  transition: all 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+.modal-compact-leave-active {
+  transition: all 0.16s ease-in;
+}
+
+.modal-compact-enter-from {
+  opacity: 0;
+  transform: scale(0.88) translateY(-16px);
+}
+
+.modal-compact-leave-to {
+  opacity: 0;
+  transform: scale(0.94) translateY(8px);
+}
+
+/* ── Responsive ── */
+@media (max-width: 480px) {
+  .base-overlay {
+    padding: 12px;
+    align-items: flex-end;
+  }
+
+  .base-modal {
+    min-width: 0;
+    width: 100% !important;
+    max-height: calc(100vh - 24px);
+    border-radius: 10px;
+  }
+}
+</style>

package/src/components/BatchStockDialog.vue

@@ -1,42 +1,22 @@
 <template>
-  <Teleport :to="teleportTarget">
-    <Transition name="overlay">
-      <div v-if="show" class="batch-overlay" @click="emit('close')">
-        <Transition name="modal">
-          <div class="batch-modal" @click.stop>
-            <div class="batch-header">
-              <span class="batch-title">批量设置股票代码</span>
-              <button class="batch-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="batch-body">
-              <textarea
-                v-model="codesText"
-                class="batch-textarea"
-                placeholder="每行一个股票代码&#10;例如:&#10;000001&#10;600036&#10;002415"
-                rows="8"
-                spellcheck="false"
-              />
-            </div>
-
-            <div class="batch-footer">
-              <button class="batch-btn batch-btn--cancel" @click="emit('close')">取消</button>
-              <button class="batch-btn batch-btn--confirm" @click="onApply">应用</button>
-            </div>
-          </div>
-        </Transition>
-      </div>
-    </Transition>
-  </Teleport>
+  <BaseModal title="批量设置股票代码" :show="show" @close="emit('close')">
+    <textarea
+      v-model="codesText"
+      class="batch-textarea"
+      placeholder="每行一个股票代码，导出时会将所选区间内这些品种的数据一并导出&#10;例如:&#10;000001&#10;600036&#10;002415"
+      rows="8"
+      spellcheck="false"
+    />
+    <template #footer>
+      <button class="batch-btn batch-btn--cancel" @click="emit('close')">取消</button>
+      <button class="batch-btn batch-btn--confirm" @click="onApply">应用</button>
+    </template>
+  </BaseModal>
 </template>
 
 <script setup lang="ts">
 import { ref, computed } from 'vue'
-import { useFullscreenTeleportTarget } from '../composables/useFullscreenTeleportTarget'
+import BaseModal from './BaseModal.vue'
 
 const props = defineProps<{
   show: boolean
@@ -47,8 +27,6 @@ const emit = defineEmits<{
   apply: [codes: string[]]
 }>()
 
-const teleportTarget = useFullscreenTeleportTarget()
-
 const codes = ref<string[]>([])
 
 const codesText = computed({
@@ -69,88 +47,10 @@ function onApply() {
 </script>
 
 <style scoped>
-.batch-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: 1000;
-}
-
-.batch-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: 360px;
-  max-width: 400px;
-  width: min(92vw, 400px);
-  max-height: min(600px, calc(100vh - 48px));
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-}
-
-.batch-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 14px 18px 14px 20px;
-  background: var(--klc-color-background);
-  border-bottom: 1px solid var(--klc-color-grid-major);
-  flex-shrink: 0;
-}
-
-.batch-title {
-  font-size: 15px;
-  font-weight: 600;
-  color: var(--klc-color-foreground);
-  line-height: 1.35;
-}
-
-.batch-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;
-}
-
-.batch-close-btn:hover {
-  background: var(--klc-color-tag-bg-hover);
-  color: var(--klc-color-foreground);
-  border-color: var(--klc-color-axis-line);
-}
-
-.batch-close-btn svg {
-  width: 14px;
-  height: 14px;
-}
-
-.batch-body {
-  padding: 16px 20px;
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
 .batch-textarea {
   width: 100%;
   min-height: 160px;
+  max-height: 100%;
   padding: 10px 12px;
   border: 1px solid var(--klc-color-border-button);
   border-radius: 6px;
@@ -174,17 +74,6 @@ function onApply() {
   opacity: 0.5;
 }
 
-.batch-footer {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  gap: 8px;
-  padding: 12px 20px;
-  background: var(--klc-color-background);
-  border-top: 1px solid var(--klc-color-grid-major);
-  flex-shrink: 0;
-}
-
 .batch-btn {
   display: flex;
   align-items: center;
@@ -236,58 +125,4 @@ function onApply() {
   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);
-}
-
-@media (max-width: 480px) {
-  .batch-overlay {
-    padding: 12px;
-    align-items: flex-end;
-  }
-
-  .batch-modal {
-    min-width: 0;
-    width: 100%;
-    max-height: calc(100vh - 24px);
-    border-radius: 10px;
-  }
-
-  .batch-header,
-  .batch-body,
-  .batch-footer {
-    padding-left: 16px;
-    padding-right: 16px;
-  }
-
-  .batch-footer {
-    flex-direction: column-reverse;
-    align-items: stretch;
-  }
-}
 </style>