@quantlife/qlchart 0.0.1

package/src/store/useIndicatorStore.ts

@@ -0,0 +1,100 @@
+import { create } from 'zustand';
+import {
+  type IndicatorConfig,
+  type IndicatorDefinition,
+  type IndicatorDataResponse,
+  IndicatorType,
+  BUILTIN_INDICATORS,
+} from '../types/index.js';
+
+export interface IndicatorState {
+  /** 当前活跃的指标 */
+  activeIndicators: IndicatorConfig[];
+  /** 可用指标列表 */
+  availableIndicators: IndicatorDefinition[];
+  /** 指标数据缓存 name → data */
+  indicatorDataCache: Record<string, IndicatorDataResponse>;
+
+  /** 添加指标 */
+  addIndicator: (config: IndicatorConfig) => void;
+  /** 移除指标 */
+  removeIndicator: (id: string) => void;
+  /** 切换指标可见性 */
+  toggleIndicator: (id: string) => void;
+  /** 更新指标参数 */
+  updateIndicatorParams: (id: string, params: Record<string, number>) => void;
+  /** 设置指标数据 */
+  setIndicatorData: (name: string, data: IndicatorDataResponse) => void;
+  /** 清理所有 */
+  clearAll: () => void;
+}
+
+let indicatorIdCounter = 0;
+
+/** 创建一个指标配置 */
+export function createIndicatorConfig(
+  definition: IndicatorDefinition,
+  overrides?: Partial<IndicatorConfig>,
+): IndicatorConfig {
+  return {
+    id: `ind_${definition.name}_${++indicatorIdCounter}_${Date.now()}`,
+    name: definition.name,
+    label: definition.label,
+    type: definition.type,
+    params: { ...definition.defaultParams },
+    visible: true,
+    color: definition.colors[0],
+    seriesIds: [],
+    ...overrides,
+  };
+}
+
+export const useIndicatorStore = create<IndicatorState>((set) => ({
+  activeIndicators: [],
+  availableIndicators: BUILTIN_INDICATORS,
+  indicatorDataCache: {},
+
+  addIndicator: (config) =>
+    set((state) => ({
+      activeIndicators: [...state.activeIndicators, config],
+    })),
+
+  removeIndicator: (id) =>
+    set((state) => {
+      const indicator = state.activeIndicators.find((i) => i.id === id);
+      if (!indicator) return state;
+
+      const newCache = { ...state.indicatorDataCache };
+      delete newCache[indicator.name];
+
+      return {
+        activeIndicators: state.activeIndicators.filter((i) => i.id !== id),
+        indicatorDataCache: newCache,
+      };
+    }),
+
+  toggleIndicator: (id) =>
+    set((state) => ({
+      activeIndicators: state.activeIndicators.map((i) =>
+        i.id === id ? { ...i, visible: !i.visible } : i,
+      ),
+    })),
+
+  updateIndicatorParams: (id, params) =>
+    set((state) => ({
+      activeIndicators: state.activeIndicators.map((i) =>
+        i.id === id ? { ...i, params: { ...i.params, ...params } } : i,
+      ),
+    })),
+
+  setIndicatorData: (name, data) =>
+    set((state) => ({
+      indicatorDataCache: { ...state.indicatorDataCache, [name]: data },
+    })),
+
+  clearAll: () =>
+    set({
+      activeIndicators: [],
+      indicatorDataCache: {},
+    }),
+}));

package/src/store/usePanelRegistry.ts

@@ -0,0 +1,50 @@
+import { create } from 'zustand';
+import { useChartStore } from './useChartStore.js';
+import type { IChartApi, ISeriesApi, SeriesType as LWCSeriesType } from 'lightweight-charts';
+import type { ChartManager } from '../core/ChartManager.js';
+import type { SeriesManager } from '../core/SeriesManager.js';
+import type { DrawingAdapter } from '../plugins/drawing/DrawingAdapter.js';
+
+export interface PanelHandle {
+  panelId: string;
+  chartManager: ChartManager;
+  seriesManager: SeriesManager;
+  drawingAdapter: DrawingAdapter;
+  chart: IChartApi;
+  container: HTMLElement;
+}
+
+export interface PanelRegistryState {
+  panels: Map<string, PanelHandle>;
+
+  register: (panelId: string, handle: PanelHandle) => void;
+  unregister: (panelId: string) => void;
+  getHandle: (panelId: string) => PanelHandle | undefined;
+  getActiveHandle: () => PanelHandle | undefined;
+}
+
+export const usePanelRegistry = create<PanelRegistryState>((set, get) => ({
+  panels: new Map(),
+
+  register: (panelId, handle) =>
+    set((state) => {
+      const panels = new Map(state.panels);
+      panels.set(panelId, handle);
+      return { panels };
+    }),
+
+  unregister: (panelId) =>
+    set((state) => {
+      const panels = new Map(state.panels);
+      panels.delete(panelId);
+      return { panels };
+    }),
+
+  getHandle: (panelId) => get().panels.get(panelId),
+
+  getActiveHandle: () => {
+    const activePanelId = useChartStore.getState().activePanelId;
+    if (!activePanelId) return undefined;
+    return get().panels.get(activePanelId);
+  },
+}));

package/src/store/useReplayStore.ts

@@ -0,0 +1,42 @@
+import { create } from 'zustand';
+
+export interface ReplayState {
+  /** 是否处于回放模式 */
+  isReplayMode: boolean;
+  /** 是否正在播放 */
+  isPlaying: boolean;
+  /** 播放速度 ms/根 */
+  speed: number;
+  /** 进度 */
+  progress: { current: number; total: number };
+
+  /** 进入回放模式 */
+  enterReplay: () => void;
+  /** 退出回放模式 */
+  exitReplay: () => void;
+  /** 设置播放状态 */
+  setPlaying: (playing: boolean) => void;
+  /** 设置速度 */
+  setSpeed: (ms: number) => void;
+  /** 设置进度 */
+  setProgress: (current: number, total: number) => void;
+}
+
+export const useReplayStore = create<ReplayState>((set) => ({
+  isReplayMode: false,
+  isPlaying: false,
+  speed: 1000,
+  progress: { current: 0, total: 0 },
+
+  enterReplay: () =>
+    set({ isReplayMode: true, isPlaying: false, progress: { current: 0, total: 0 } }),
+
+  exitReplay: () =>
+    set({ isReplayMode: false, isPlaying: false, progress: { current: 0, total: 0 } }),
+
+  setPlaying: (playing) => set({ isPlaying: playing }),
+
+  setSpeed: (ms) => set({ speed: Math.max(50, Math.min(ms, 5000)) }),
+
+  setProgress: (current, total) => set({ progress: { current, total } }),
+}));

package/src/store/useTimeBarStore.ts

@@ -0,0 +1,34 @@
+import { create } from 'zustand';
+
+export interface TimeBarState {
+  /** 当前选中的快捷范围标签 */
+  activeRangeLabel: string | null;
+  /** 自定义起始日期 */
+  customStartDate: string;
+  /** 自定义结束日期 */
+  customEndDate: string;
+  /** 是否显示日期选择器 */
+  showDatePicker: boolean;
+
+  // Actions
+  setActiveRangeLabel: (label: string | null) => void;
+  setCustomDateRange: (start: string, end: string) => void;
+  setShowDatePicker: (show: boolean) => void;
+  reset: () => void;
+}
+
+const initialState = {
+  activeRangeLabel: null,
+  customStartDate: '',
+  customEndDate: '',
+  showDatePicker: false,
+};
+
+export const useTimeBarStore = create<TimeBarState>((set) => ({
+  ...initialState,
+
+  setActiveRangeLabel: (label) => set({ activeRangeLabel: label }),
+  setCustomDateRange: (start, end) => set({ customStartDate: start, customEndDate: end }),
+  setShowDatePicker: (show) => set({ showDatePicker: show }),
+  reset: () => set(initialState),
+}));

package/src/styles/chart.css

@@ -0,0 +1,312 @@
+.qlchart-container {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  border: 2px solid transparent;
+  transition: border-color 0.15s;
+}
+
+.qlchart-container.active-panel {
+  border-color: var(--qlchart-accent, #2962ff);
+}
+
+.qlchart-panel {
+  position: relative;
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.qlchart-chart-wrapper {
+  width: 100%;
+  height: 100%;
+}
+
+.qlchart-loading {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--qlchart-bg, #131722);
+  color: var(--qlchart-text, #d1d4dc);
+  font-size: 14px;
+  z-index: 10;
+}
+
+.qlchart-error {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--qlchart-bg, #131722);
+  color: #ef5350;
+  font-size: 14px;
+  z-index: 10;
+}
+
+/* Indicator tags */
+.qlchart-indicator-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  padding: 4px 8px;
+  background: var(--qlchart-bg, #131722);
+  border-bottom: 1px solid var(--qlchart-border, #1e222d);
+}
+
+.qlchart-indicator-tag {
+  font-size: 11px;
+}
+
+.qlchart-indicator-tag-label {
+  font-weight: 500;
+}
+
+.qlchart-indicator-tag-value {
+  opacity: 0.8;
+  font-family: monospace;
+}
+
+/* Indicator tag buttons */
+.qlchart-indicator-tag button {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0 2px;
+  font-size: 10px;
+  opacity: 0.6;
+  color: var(--qlchart-text, #d1d4dc);
+}
+
+.qlchart-indicator-tag button:hover {
+  opacity: 1;
+}
+
+.qlchart-indicator-tag.hidden {
+  opacity: 0.5;
+}
+
+/* Indicator drawer overlay */
+.qlchart-indicator-drawer-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.4);
+  z-index: 1000;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.qlchart-indicator-drawer {
+  width: 320px;
+  max-width: 80vw;
+  height: 100%;
+  background: var(--qlchart-bg, #1a1e2e);
+  color: var(--qlchart-text, #d1d4dc);
+  display: flex;
+  flex-direction: column;
+  box-shadow: -4px 0 16px rgba(0, 0, 0, 0.3);
+}
+
+.qlchart-indicator-drawer-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--qlchart-border, #2a2e3e);
+}
+
+.qlchart-indicator-drawer-title {
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.qlchart-indicator-drawer-close {
+  background: none;
+  border: none;
+  color: var(--qlchart-text, #d1d4dc);
+  cursor: pointer;
+  font-size: 16px;
+  padding: 4px;
+}
+
+.qlchart-indicator-drawer-body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 12px;
+}
+
+.qlchart-indicator-section {
+  margin-bottom: 16px;
+}
+
+.qlchart-indicator-section-title {
+  font-size: 13px;
+  font-weight: 600;
+  margin-bottom: 8px;
+  color: var(--qlchart-text-secondary, #9ca3af);
+}
+
+.qlchart-indicator-item {
+  padding: 8px 0;
+  border-bottom: 1px solid var(--qlchart-border, #1e222d);
+}
+
+.qlchart-indicator-item-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.qlchart-indicator-item-label {
+  font-weight: 500;
+  font-size: 13px;
+  min-width: 80px;
+}
+
+.qlchart-indicator-item-desc {
+  flex: 1;
+  font-size: 11px;
+  color: var(--qlchart-text-secondary, #9ca3af);
+}
+
+.qlchart-indicator-item-btn {
+  background: none;
+  border: 1px solid var(--qlchart-border, #2a2e3e);
+  color: var(--qlchart-text, #d1d4dc);
+  cursor: pointer;
+  padding: 2px 10px;
+  border-radius: 4px;
+  font-size: 12px;
+}
+
+.qlchart-indicator-item-btn:hover {
+  border-color: #26a69a;
+  color: #26a69a;
+}
+
+.qlchart-indicator-item-btn.active {
+  border-color: #ef5350;
+  color: #ef5350;
+}
+
+.qlchart-indicator-item-params {
+  display: flex;
+  gap: 12px;
+  margin-top: 6px;
+  flex-wrap: wrap;
+}
+
+.qlchart-indicator-param {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 11px;
+}
+
+.qlchart-indicator-param-label {
+  color: var(--qlchart-text-secondary, #9ca3af);
+}
+
+.qlchart-indicator-param-input {
+  width: 60px;
+  padding: 2px 4px;
+  background: var(--qlchart-bg, #131722);
+  border: 1px solid var(--qlchart-border, #2a2e3e);
+  border-radius: 3px;
+  color: var(--qlchart-text, #d1d4dc);
+  font-size: 11px;
+}
+
+/* Toolbar indicator button */
+.qlchart-toolbar-btn {
+  background: none;
+  border: 1px solid var(--qlchart-border, #2a2e3e);
+  color: var(--qlchart-text, #d1d4dc);
+  cursor: pointer;
+  padding: 4px 10px;
+  border-radius: 4px;
+  font-size: 12px;
+}
+
+.qlchart-toolbar-btn:hover {
+  border-color: #26a69a;
+  color: #26a69a;
+}
+
+/* ChartFunctionMenu */
+.qlchart-function-menu-wrapper {
+  position: absolute;
+  bottom: 28px;
+  right: 60px;
+  z-index: 10;
+}
+
+.qlchart-function-menu-trigger {
+  width: 24px;
+  height: 24px;
+  border: none;
+  background: rgba(30, 34, 45, 0.8);
+  color: #d1d4dc;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 14px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.qlchart-function-menu-trigger:hover {
+  background: rgba(42, 46, 57, 0.9);
+}
+
+.qlchart-function-menu-popup {
+  position: absolute;
+  bottom: 28px;
+  right: 0;
+  background: #1e222d;
+  border: 1px solid #2a2e39;
+  border-radius: 4px;
+  padding: 4px 0;
+  min-width: 140px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+}
+
+.qlchart-fm-item {
+  display: block;
+  width: 100%;
+  padding: 8px 12px;
+  border: none;
+  background: transparent;
+  color: #d1d4dc;
+  text-align: left;
+  cursor: pointer;
+  font-size: 13px;
+}
+
+.qlchart-fm-item:hover {
+  background: #2a2e39;
+}
+
+/* 全局绘图Sidebar容器 */
+.qlchart-global-drawing-sidebar {
+  position: relative;
+  width: 40px;
+  flex-shrink: 0;
+  border-right: 1px solid #2a2e39;
+  overflow: visible;
+}

package/src/styles/components.css

@@ -0,0 +1,184 @@
+/* ════════════════════════════════════════════
+   QLChart 组件样式系统 — 基于 CSS 变量
+   ════════════════════════════════════════════ */
+
+/* ── 统一按钮 ── */
+.qlchart-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--qlchart-space-sm);
+  padding: var(--qlchart-space-md) var(--qlchart-space-lg);
+  border: 1px solid var(--qlchart-border);
+  border-radius: var(--qlchart-radius-md);
+  background: var(--qlchart-toolbar-active-bg);
+  color: var(--qlchart-text);
+  font-size: var(--qlchart-text-base);
+  cursor: pointer;
+  transition: all var(--qlchart-transition);
+  user-select: none;
+}
+
+.qlchart-btn:hover {
+  background: var(--qlchart-hover);
+  border-color: var(--qlchart-accent);
+}
+
+.qlchart-btn:active {
+  transform: scale(0.97);
+}
+
+.qlchart-btn-primary {
+  background: var(--qlchart-accent);
+  color: #fff;
+  border-color: var(--qlchart-accent);
+}
+
+.qlchart-btn-primary:hover {
+  filter: brightness(1.1);
+}
+
+.qlchart-btn-danger {
+  background: rgba(239, 83, 80, 0.15);
+  color: #ef5350;
+  border-color: transparent;
+}
+
+.qlchart-btn-danger:hover {
+  background: rgba(239, 83, 80, 0.25);
+}
+
+.qlchart-btn-ghost {
+  background: transparent;
+  border-color: transparent;
+}
+
+.qlchart-btn-ghost:hover {
+  background: var(--qlchart-hover);
+}
+
+/* ── 统一 Modal ── */
+.qlchart-modal-root {
+  position: fixed;
+  inset: 0;
+  z-index: 2100;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.qlchart-modal-overlay {
+  position: fixed;
+  inset: 0;
+  background: var(--qlchart-modal-overlay, rgba(0, 0, 0, 0.6));
+}
+
+.qlchart-modal-overlay-enter-from { opacity: 0; }
+.qlchart-modal-overlay-enter-to { opacity: 1; }
+.qlchart-modal-overlay-leave-from { opacity: 1; }
+.qlchart-modal-overlay-leave-to { opacity: 0; }
+
+.qlchart-modal-panel {
+  position: relative;
+  z-index: 1;
+  background: var(--qlchart-toolbar-bg);
+  border: 1px solid var(--qlchart-border);
+  border-radius: var(--qlchart-radius-lg);
+  box-shadow: var(--qlchart-shadow-lg);
+  max-height: 80vh;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.qlchart-modal-content-enter-from {
+  opacity: 0;
+  transform: scale(0.95) translateY(-10px);
+}
+.qlchart-modal-content-enter-to {
+  opacity: 1;
+  transform: scale(1) translateY(0);
+}
+.qlchart-modal-content-leave-from {
+  opacity: 1;
+  transform: scale(1) translateY(0);
+}
+.qlchart-modal-content-leave-to {
+  opacity: 0;
+  transform: scale(0.95) translateY(-10px);
+}
+
+.qlchart-modal-enter {
+  transition: all var(--qlchart-transition);
+}
+.qlchart-modal-leave {
+  transition: all var(--qlchart-transition);
+}
+
+.qlchart-modal-title {
+  padding: var(--qlchart-space-lg) var(--qlchart-space-lg) 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-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-sm);
+  color: var(--qlchart-text);
+  font-size: var(--qlchart-text-base);
+  outline: none;
+  transition: border-color var(--qlchart-transition);
+}
+
+.qlchart-input:focus {
+  border-color: var(--qlchart-accent);
+  box-shadow: 0 0 0 2px var(--qlchart-focus);
+}
+
+.qlchart-input::placeholder {
+  color: var(--qlchart-text-secondary);
+}
+
+/* ── 微交互增强 ── */
+.qlchart-btn,
+.qlchart-dvt-btn,
+.qlchart-dvt-sub-btn {
+  transition: background var(--qlchart-transition),
+              color var(--qlchart-transition),
+              transform 0.1s ease,
+              box-shadow var(--qlchart-transition);
+}
+
+/* hover 时微妙上浮 */
+.qlchart-dvt-btn:hover:not(.active),
+.qlchart-dvt-sub-btn:hover:not(.active) {
+  transform: translateY(-1px);
+}
+
+/* ── 滚动条美化 ── */
+.qlchart-drawing-property-panel::-webkit-scrollbar,
+.qlchart-fib-levels-editor::-webkit-scrollbar {
+  width: 4px;
+}
+
+.qlchart-drawing-property-panel::-webkit-scrollbar-track,
+.qlchart-fib-levels-editor::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.qlchart-drawing-property-panel::-webkit-scrollbar-thumb,
+.qlchart-fib-levels-editor::-webkit-scrollbar-thumb {
+  background: var(--qlchart-border);
+  border-radius: 2px;
+}
+
+.qlchart-drawing-property-panel::-webkit-scrollbar-thumb:hover,
+.qlchart-fib-levels-editor::-webkit-scrollbar-thumb:hover {
+  background: var(--qlchart-text-secondary);
+}