@quantlife/qlchart 0.0.1

package/src/styles/indicator-modal.css

@@ -0,0 +1,216 @@
+/* ═══ Indicator Modal ═══ */
+
+/* Overlay */
+.qlchart-modal-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.6);
+  z-index: 2000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  animation: qlchart-overlay-in var(--qlchart-transition);
+}
+
+@keyframes qlchart-overlay-in {
+  from { opacity: 0; }
+  to   { opacity: 1; }
+}
+
+/* Modal 容器 */
+.qlchart-indicator-modal {
+  width: 860px;
+  max-width: 92vw;
+  max-height: 85vh;
+  background: var(--qlchart-toolbar-bg);
+  border: 1px solid var(--qlchart-border);
+  border-radius: var(--qlchart-radius-lg);
+  box-shadow: var(--qlchart-shadow-lg);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  animation: qlchart-modal-in var(--qlchart-transition);
+}
+
+@keyframes qlchart-modal-in {
+  from { opacity: 0; transform: scale(0.95); }
+  to   { opacity: 1; transform: scale(1); }
+}
+
+/* Header */
+.qlchart-modal-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: var(--qlchart-space-xl);
+  border-bottom: 1px solid var(--qlchart-border);
+  font-size: var(--qlchart-text-lg);
+  font-weight: 600;
+  color: var(--qlchart-text);
+}
+
+.qlchart-modal-close {
+  border: none;
+  background: transparent;
+  color: var(--qlchart-text);
+  font-size: var(--qlchart-text-lg);
+  cursor: pointer;
+  padding: var(--qlchart-space-sm) var(--qlchart-space-md);
+  border-radius: var(--qlchart-radius-sm);
+  transition: background var(--qlchart-transition);
+}
+
+.qlchart-modal-close:hover {
+  background: var(--qlchart-hover);
+}
+
+/* Search */
+.qlchart-modal-search {
+  padding: var(--qlchart-space-lg) var(--qlchart-space-xl);
+  border-bottom: 1px solid var(--qlchart-border);
+}
+
+.qlchart-modal-search input {
+  width: 100%;
+  padding: var(--qlchart-space-md) var(--qlchart-space-lg);
+  background: var(--qlchart-bg);
+  border: 1px solid var(--qlchart-border);
+  border-radius: var(--qlchart-radius-md);
+  color: var(--qlchart-text);
+  font-size: var(--qlchart-text-md);
+  transition: border-color var(--qlchart-transition);
+}
+
+.qlchart-modal-search input:focus {
+  border-color: var(--qlchart-accent);
+  outline: none;
+}
+
+.qlchart-modal-search input::placeholder {
+  color: var(--qlchart-text-secondary);
+}
+
+/* Body */
+.qlchart-modal-body {
+  display: flex;
+  flex: 1;
+  overflow: hidden;
+}
+
+/* Sidebar */
+.qlchart-modal-sidebar {
+  width: 120px;
+  min-width: 120px;
+  border-right: 1px solid var(--qlchart-border);
+  padding: var(--qlchart-space-sm) 0;
+  overflow-y: auto;
+}
+
+.qlchart-modal-tab {
+  display: block;
+  width: 100%;
+  padding: var(--qlchart-space-md) var(--qlchart-space-xl);
+  border: none;
+  background: transparent;
+  color: var(--qlchart-text);
+  text-align: left;
+  cursor: pointer;
+  font-size: var(--qlchart-text-md);
+  border-left: 3px solid transparent;
+  transition: background var(--qlchart-transition), color var(--qlchart-transition);
+}
+
+.qlchart-modal-tab:hover {
+  background: var(--qlchart-hover);
+}
+
+.qlchart-modal-tab.active {
+  background: var(--qlchart-active);
+  border-left-color: var(--qlchart-accent);
+  color: var(--qlchart-accent);
+}
+
+/* Content grid */
+.qlchart-modal-content {
+  flex: 1;
+  padding: var(--qlchart-space-md);
+  overflow-y: auto;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+  gap: var(--qlchart-space-md);
+  align-content: start;
+}
+
+/* Indicator card */
+.qlchart-indicator-card {
+  padding: var(--qlchart-space-lg);
+  border: 1px solid var(--qlchart-border);
+  border-radius: var(--qlchart-radius-md);
+  cursor: pointer;
+  transition: border-color var(--qlchart-transition), background var(--qlchart-transition);
+  background: var(--qlchart-bg);
+}
+
+.qlchart-indicator-card:hover {
+  border-color: var(--qlchart-accent);
+}
+
+.qlchart-indicator-card.selected {
+  border-color: var(--qlchart-accent);
+  background: var(--qlchart-active);
+}
+
+.qlchart-indicator-name {
+  font-size: var(--qlchart-text-md);
+  font-weight: 500;
+  color: var(--qlchart-text);
+  margin-bottom: var(--qlchart-space-xs);
+}
+
+.qlchart-indicator-type {
+  font-size: var(--qlchart-text-xs);
+  color: var(--qlchart-text-secondary);
+}
+
+/* Footer */
+.qlchart-modal-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: var(--qlchart-space-lg) var(--qlchart-space-xl);
+  border-top: 1px solid var(--qlchart-border);
+}
+
+.qlchart-modal-selected {
+  font-size: var(--qlchart-text-sm);
+  color: var(--qlchart-text-secondary);
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.qlchart-modal-confirm {
+  padding: var(--qlchart-space-md) var(--qlchart-space-xl);
+  background: var(--qlchart-accent);
+  color: #ffffff;
+  border: none;
+  border-radius: var(--qlchart-radius-sm);
+  cursor: pointer;
+  font-size: var(--qlchart-text-md);
+  transition: opacity var(--qlchart-transition);
+  white-space: nowrap;
+}
+
+.qlchart-modal-confirm:hover {
+  opacity: 0.9;
+}
+
+/* Empty state */
+.qlchart-modal-empty {
+  grid-column: 1 / -1;
+  text-align: center;
+  padding: 32px;
+  color: var(--qlchart-text-secondary);
+  font-size: var(--qlchart-text-md);
+}

package/src/styles/indicator-tag.css

@@ -0,0 +1,210 @@
+.qlchart-indicator-tag {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 2px 8px;
+  border-radius: 4px;
+  font-size: 12px;
+  background: var(--qlchart-toolbar-bg, #1e222d);
+  color: var(--qlchart-toolbar-text, #d1d4dc);
+  border: 1px solid var(--qlchart-border, #2a2e39);
+}
+
+.qlchart-indicator-tag.hidden {
+  opacity: 0.5;
+}
+
+.qlchart-indicator-tag-config {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0 2px;
+  font-size: 12px;
+  color: var(--qlchart-toolbar-text, #d1d4dc);
+  opacity: 0.6;
+}
+.qlchart-indicator-tag-config:hover {
+  opacity: 1;
+}
+
+.qlchart-indicator-tag-toggle,
+.qlchart-indicator-tag-close {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0 2px;
+  font-size: 12px;
+  color: var(--qlchart-toolbar-text, #d1d4dc);
+  opacity: 0.6;
+}
+.qlchart-indicator-tag-toggle:hover,
+.qlchart-indicator-tag-close:hover {
+  opacity: 1;
+}
+
+/* @deprecated V3: 已迁移到 .qlchart-indicator-config-modal */
+.qlchart-indicator-config-panel {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  z-index: 100;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 8px;
+  margin-top: 4px;
+  background: var(--qlchart-toolbar-bg, #1e222d);
+  border: 1px solid var(--qlchart-border, #2a2e39);
+  border-radius: 6px;
+  min-width: 160px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+}
+
+/* @deprecated V3: 已迁移到 .qlchart-indicator-config-modal */
+.qlchart-indicator-config-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  font-size: 12px;
+  color: var(--qlchart-toolbar-text, #d1d4dc);
+}
+
+.qlchart-indicator-config-item input[type="number"] {
+  width: 60px;
+  padding: 2px 4px;
+  border: 1px solid var(--qlchart-border, #2a2e39);
+  border-radius: 3px;
+  background: var(--qlchart-bg, #131722);
+  color: var(--qlchart-text, #d1d4dc);
+  font-size: 12px;
+  text-align: right;
+}
+
+.qlchart-indicator-config-item input[type="number"]:focus {
+  outline: none;
+  border-color: var(--qlchart-accent, #2962ff);
+}
+
+/* ═══ V3 需求3：配置 Modal 样式 ═══ */
+
+.qlchart-indicator-config-modal {
+  width: 360px;
+  max-width: 90vw;
+  background: var(--qlchart-toolbar-bg);
+  border: 1px solid var(--qlchart-border);
+  border-radius: var(--qlchart-radius-lg);
+  box-shadow: var(--qlchart-shadow-lg);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  animation: qlchart-config-modal-in var(--qlchart-transition);
+}
+
+@keyframes qlchart-config-modal-in {
+  from { opacity: 0; transform: scale(0.95) translateY(-10px); }
+  to   { opacity: 1; transform: scale(1) translateY(0); }
+}
+
+.qlchart-indicator-config-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--qlchart-space-lg) var(--qlchart-space-xl);
+  padding-bottom: var(--qlchart-space-md);
+  font-size: var(--qlchart-text-md);
+  font-weight: 600;
+  color: var(--qlchart-text);
+  border-bottom: 1px solid var(--qlchart-border);
+}
+
+.qlchart-indicator-config-close {
+  background: none;
+  border: none;
+  color: var(--qlchart-text-secondary);
+  cursor: pointer;
+  font-size: 14px;
+  padding: 0;
+  transition: color var(--qlchart-transition);
+}
+
+.qlchart-indicator-config-close:hover {
+  color: var(--qlchart-text);
+}
+
+.qlchart-indicator-config-body {
+  padding: var(--qlchart-space-lg) var(--qlchart-space-xl);
+  display: flex;
+  flex-direction: column;
+  gap: var(--qlchart-space-md);
+}
+
+.qlchart-indicator-config-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--qlchart-space-lg);
+}
+
+.qlchart-indicator-config-row label {
+  font-size: var(--qlchart-text-md);
+  color: var(--qlchart-text);
+  min-width: 60px;
+}
+
+.qlchart-indicator-config-row input[type="number"] {
+  flex: 1;
+  max-width: 120px;
+  padding: var(--qlchart-space-sm) var(--qlchart-space-md);
+  background: var(--qlchart-bg);
+  border: 1px solid var(--qlchart-border);
+  border-radius: var(--qlchart-radius-sm);
+  color: var(--qlchart-text);
+  font-size: var(--qlchart-text-md);
+  text-align: right;
+  outline: none;
+  transition: border-color var(--qlchart-transition);
+}
+
+.qlchart-indicator-config-row input[type="number"]:focus {
+  border-color: var(--qlchart-accent);
+}
+
+.qlchart-indicator-config-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--qlchart-space-md);
+  padding: var(--qlchart-space-lg) var(--qlchart-space-xl);
+  border-top: 1px solid var(--qlchart-border);
+}
+
+.qlchart-indicator-config-cancel {
+  padding: var(--qlchart-space-md) var(--qlchart-space-xl);
+  background: transparent;
+  border: 1px solid var(--qlchart-border);
+  border-radius: var(--qlchart-radius-sm);
+  color: var(--qlchart-text);
+  cursor: pointer;
+  font-size: var(--qlchart-text-md);
+  transition: background var(--qlchart-transition);
+}
+
+.qlchart-indicator-config-cancel:hover {
+  background: var(--qlchart-hover);
+}
+
+.qlchart-indicator-config-save {
+  padding: var(--qlchart-space-md) var(--qlchart-space-xl);
+  background: var(--qlchart-accent);
+  border: none;
+  border-radius: var(--qlchart-radius-sm);
+  color: #ffffff;
+  cursor: pointer;
+  font-size: var(--qlchart-text-md);
+  transition: opacity var(--qlchart-transition);
+}
+
+.qlchart-indicator-config-save:hover {
+  opacity: 0.9;
+}

package/src/styles/pane-chart.css

@@ -0,0 +1,9 @@
+.qlchart-pane-separator {
+  height: 1px;
+  background: rgba(255, 255, 255, 0.1);
+  flex-shrink: 0;
+}
+.qlchart-pane-chart {
+  width: 100%;
+  height: 100%;
+}

package/src/styles/responsive.css

@@ -0,0 +1,71 @@
+/* Tablet 768-1023px */
+@media (max-width: 1023px) {
+  .qlchart-toolbar {
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+  .qlchart-toolbar::-webkit-scrollbar {
+    display: none;
+  }
+  .qlchart-drawing-toolbar {
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+}
+
+/* Mobile <768px */
+@media (max-width: 767px) {
+  .qlchart-toolbar {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 48px;
+    z-index: 1000;
+    flex-direction: row;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+    padding: 0 8px;
+  }
+  .qlchart-toolbar::-webkit-scrollbar {
+    display: none;
+  }
+  .qlchart-panel {
+    padding-bottom: 48px;
+  }
+  .qlchart-drawing-toolbar {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    max-height: 200px;
+    transform: translateY(100%);
+    transition: transform 0.3s ease;
+    flex-direction: row;
+    flex-wrap: wrap;
+    z-index: 1001;
+    padding: 8px;
+  }
+  .qlchart-drawing-toolbar.open {
+    transform: translateY(0);
+  }
+  .qlchart-replay-controller {
+    position: fixed;
+    bottom: 48px;
+    left: 0;
+    right: 0;
+    z-index: 999;
+  }
+  .qlchart-property-panel {
+    position: fixed;
+    bottom: 48px;
+    right: 0;
+    width: 280px;
+    max-height: 60vh;
+    overflow-y: auto;
+    z-index: 1002;
+  }
+  .qlchart-context-menu {
+    min-width: 160px;
+  }
+}

package/src/styles/themes/dark.css

@@ -0,0 +1,63 @@
+[data-theme="dark"], [data-theme="dark"] * {
+  /* ═══ Layer 1: 颜色（基础） ═══ */
+  --qlchart-bg: #131722;
+  --qlchart-text: #d1d4dc;
+  --qlchart-text-secondary: #787b86;
+  --qlchart-border: #2a2e39;
+  --qlchart-toolbar-bg: #1e222d;
+  --qlchart-toolbar-text: #d1d4dc;
+  --qlchart-toolbar-active-bg: #2a2e39;
+  --qlchart-accent: #2962ff;
+  --qlchart-up-color: #26a69a;
+  --qlchart-down-color: #ef5350;
+
+  /* ═══ Layer 2: 交互状态 ═══ */
+  --qlchart-hover: rgba(255, 255, 255, 0.05);
+  --qlchart-active: rgba(41, 98, 255, 0.15);
+  --qlchart-focus: rgba(41, 98, 255, 0.3);
+  --qlchart-disabled: rgba(255, 255, 255, 0.2);
+
+  /* ═══ Layer 3: 阴影 ═══ */
+  --qlchart-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
+  --qlchart-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
+  --qlchart-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
+
+  /* ═══ Layer 4: 圆角 ═══ */
+  --qlchart-radius-sm: 4px;
+  --qlchart-radius-md: 6px;
+  --qlchart-radius-lg: 8px;
+
+  /* ═══ Layer 5: 间距 ═══ */
+  --qlchart-space-xs: 2px;
+  --qlchart-space-sm: 4px;
+  --qlchart-space-md: 8px;
+  --qlchart-space-lg: 12px;
+  --qlchart-space-xl: 16px;
+
+  /* ═══ Layer 6: 字号 + 动画 ═══ */
+  --qlchart-text-xs: 10px;
+  --qlchart-text-sm: 11px;
+  --qlchart-text-base: 12px;
+  --qlchart-text-md: 13px;
+  --qlchart-text-lg: 16px;
+  --qlchart-transition: 0.15s ease;
+  --qlchart-transition-fast: 0.1s ease;
+
+  /* ★ V2 新增：更精致的视觉变量 */
+  --qlchart-modal-overlay: rgba(0, 0, 0, 0.6);
+  --qlchart-glass-bg: rgba(30, 34, 45, 0.85);
+  --qlchart-glass-border: rgba(255, 255, 255, 0.08);
+  --qlchart-success: #26a69a;
+  --qlchart-danger: #ef5350;
+  --qlchart-warning: #ff9800;
+
+  /* 阴影升级 — 更自然的层次感 */
+  --qlchart-shadow-sm: 0 2px 4px rgba(0,0,0,0.2), 0 1px 2px rgba(0,0,0,0.15);
+  --qlchart-shadow-md: 0 6px 16px rgba(0,0,0,0.3), 0 2px 6px rgba(0,0,0,0.2);
+  --qlchart-shadow-lg: 0 12px 32px rgba(0,0,0,0.4), 0 4px 12px rgba(0,0,0,0.3);
+
+  /* 圆角升级 */
+  --qlchart-radius-sm: 4px;
+  --qlchart-radius-md: 8px;
+  --qlchart-radius-lg: 12px;
+}

package/src/styles/themes/light.css

@@ -0,0 +1,61 @@
+[data-theme="light"], [data-theme="light"] * {
+  /* ═══ Layer 1: 颜色（基础） ═══ */
+  --qlchart-bg: #ffffff;
+  --qlchart-text: #131722;
+  --qlchart-text-secondary: #787b86;
+  --qlchart-border: #e0e3eb;
+  --qlchart-toolbar-bg: #f0f3fa;
+  --qlchart-toolbar-text: #131722;
+  --qlchart-toolbar-active-bg: #e0e3eb;
+  --qlchart-accent: #2962ff;
+  --qlchart-up-color: #26a69a;
+  --qlchart-down-color: #ef5350;
+
+  /* ═══ Layer 2: 交互状态 ═══ */
+  --qlchart-hover: rgba(0, 0, 0, 0.04);
+  --qlchart-active: rgba(41, 98, 255, 0.12);
+  --qlchart-focus: rgba(41, 98, 255, 0.25);
+  --qlchart-disabled: rgba(0, 0, 0, 0.15);
+
+  /* ═══ Layer 3: 阴影 ═══ */
+  --qlchart-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
+  --qlchart-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.12);
+  --qlchart-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.16);
+
+  /* ═══ Layer 4: 圆角 ═══ */
+  --qlchart-radius-sm: 4px;
+  --qlchart-radius-md: 6px;
+  --qlchart-radius-lg: 8px;
+
+  /* ═══ Layer 5: 间距 ═══ */
+  --qlchart-space-xs: 2px;
+  --qlchart-space-sm: 4px;
+  --qlchart-space-md: 8px;
+  --qlchart-space-lg: 12px;
+  --qlchart-space-xl: 16px;
+
+  /* ═══ Layer 6: 字号 + 动画 ═══ */
+  --qlchart-text-xs: 10px;
+  --qlchart-text-sm: 11px;
+  --qlchart-text-base: 12px;
+  --qlchart-text-md: 13px;
+  --qlchart-text-lg: 16px;
+  --qlchart-transition: 0.15s ease;
+  --qlchart-transition-fast: 0.1s ease;
+
+  /* ★ V2 新增 */
+  --qlchart-modal-overlay: rgba(0, 0, 0, 0.4);
+  --qlchart-glass-bg: rgba(255, 255, 255, 0.9);
+  --qlchart-glass-border: rgba(0, 0, 0, 0.06);
+  --qlchart-success: #26a69a;
+  --qlchart-danger: #ef5350;
+  --qlchart-warning: #ff9800;
+
+  --qlchart-shadow-sm: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
+  --qlchart-shadow-md: 0 4px 12px rgba(0,0,0,0.1), 0 2px 4px rgba(0,0,0,0.06);
+  --qlchart-shadow-lg: 0 10px 28px rgba(0,0,0,0.15), 0 4px 10px rgba(0,0,0,0.08);
+
+  --qlchart-radius-sm: 4px;
+  --qlchart-radius-md: 8px;
+  --qlchart-radius-lg: 12px;
+}