@quantlife/qlchart 0.0.1

package/src/components/toolbar/GlobalToolbar.tsx

@@ -0,0 +1,58 @@
+import { useChartStore, selectActivePanelPeriod } from '../../store/useChartStore.js';
+import { usePanelRegistry } from '../../store/usePanelRegistry.js';
+import { PeriodSelector } from './PeriodSelector.js';
+import { TimeBarModule } from '../timebar/TimeBarModule.js';
+import { KlineTypeSelector } from './KlineTypeSelector.js';
+import { IndicatorPanel } from '../indicator/index.js';
+import { useDrawingStore } from '../../store/useDrawingStore.js';
+import { ScreenshotUtil } from '../../plugins/screenshot/ScreenshotUtil.js';
+import { useState, useCallback } from 'react';
+
+export function GlobalToolbar() {
+  // 活跃面板的周期（用于 PeriodSelector 高亮）— 使用独立 selector 避免内联函数
+  const activePeriod = useChartStore(selectActivePanelPeriod);
+  const activePanelId = useChartStore((s) => s.activePanelId);
+  const activeSeriesType = useChartStore((s) => s.activeSeriesType);
+  const drawingToolbarOpen = useDrawingStore((s) => s.drawingToolbarOpen);
+  const setDrawingToolbarOpen = useDrawingStore((s) => s.setDrawingToolbarOpen);
+  const drawingCount = useDrawingStore((s) => s.drawingCount);
+
+  const getHandle = usePanelRegistry((s) => s.getHandle);
+
+  // 获取活跃面板句柄
+  const handle = activePanelId ? getHandle(activePanelId) : undefined;
+
+  const [indicatorPanelOpen, setIndicatorPanelOpen] = useState(false);
+
+  const handleScreenshot = useCallback(() => {
+    if (handle?.chart && handle?.container) {
+      ScreenshotUtil.download(handle.chart, handle.container);
+    }
+  }, [handle]);
+
+  return (
+    <div className="qlchart-toolbar qlchart-global-toolbar" style={{ position: 'relative' }}>
+      <PeriodSelector activePeriod={activePeriod} />
+      <div className="qlchart-toolbar-separator" />
+      <TimeBarModule />
+      <div className="qlchart-toolbar-separator" />
+      <KlineTypeSelector activeType={activeSeriesType} />
+      <div className="qlchart-toolbar-separator" />
+      <button className="qlchart-toolbar-btn" onClick={() => setIndicatorPanelOpen(true)}>
+        📊 指标
+      </button>
+      <IndicatorPanel open={indicatorPanelOpen} onClose={() => setIndicatorPanelOpen(false)} />
+      <div className="qlchart-toolbar-separator" />
+      <button
+        className={`qlchart-toolbar-btn ${drawingToolbarOpen ? 'active' : ''}`}
+        onClick={() => setDrawingToolbarOpen(!drawingToolbarOpen)}
+      >
+        🔧 绘图{drawingCount > 0 ? `(${drawingCount})` : ''}
+      </button>
+      <div className="qlchart-toolbar-separator" />
+      <button className="qlchart-toolbar-btn" onClick={handleScreenshot} title="截图下载">
+        📸 截图
+      </button>
+    </div>
+  );
+}

package/src/components/toolbar/KlineTypeSelector.tsx

@@ -0,0 +1,123 @@
+import { useState, useRef, useEffect, useCallback } from 'react';
+import { createPortal } from 'react-dom';
+import { useChartStore } from '../../store/useChartStore.js';
+import { SeriesType } from '../../types/index.js';
+
+const KLINE_TYPES = [
+  { label: '蜡烛图', value: SeriesType.Candlestick, group: '标准', icon: '🕯️' },
+  { label: '空心蜡烛图', value: SeriesType.HollowCandlestick, group: '标准', icon: '🔥' },
+  { label: '美国线', value: SeriesType.Bar, group: '标准', icon: '📊' },
+  { label: '折线图', value: SeriesType.Line, group: '标准', icon: '📈' },
+  { label: '面积图', value: SeriesType.Area, group: '标准', icon: '🏔️' },
+  { label: '基准线图', value: SeriesType.Baseline, group: '标准', icon: '➖' },
+  { label: '平均K线', value: SeriesType.HeikinAshi, group: '高级', icon: '⚡' },
+  { label: '成交量蜡烛图', value: SeriesType.VolumeCandlestick, group: '高级', icon: '📦' },
+  { label: '砖形图', value: SeriesType.Renko, group: '高级', icon: '🧱' },
+  { label: '线形反转', value: SeriesType.LineBreak, group: '高级', icon: '🔄' },
+];
+
+const GROUPS = ['标准', '高级'];
+
+/** 下拉框最小宽度 */
+const DROPDOWN_MIN_WIDTH = 160;
+
+export interface KlineTypeSelectorProps {
+  activeType: SeriesType;
+}
+
+export function KlineTypeSelector({ activeType }: KlineTypeSelectorProps) {
+  const setSeriesType = useChartStore((s) => s.setSeriesType);
+  const [open, setOpen] = useState(false);
+  const buttonRef = useRef<HTMLButtonElement>(null);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+  const [dropdownStyle, setDropdownStyle] = useState<React.CSSProperties>({});
+
+  const activeItem = KLINE_TYPES.find(t => t.value === activeType);
+
+  /** 计算下拉框定位 */
+  const updatePosition = useCallback(() => {
+    if (!buttonRef.current) return;
+    const rect = buttonRef.current.getBoundingClientRect();
+    let left = rect.left;
+    // 右边界检测：如果超出视口则向左偏移
+    if (left + DROPDOWN_MIN_WIDTH > window.innerWidth) {
+      left = window.innerWidth - DROPDOWN_MIN_WIDTH - 8;
+    }
+    setDropdownStyle({
+      position: 'fixed',
+      top: rect.bottom,
+      left,
+      zIndex: 9999,
+    });
+  }, []);
+
+  // 打开时计算位置
+  useEffect(() => {
+    if (!open) return;
+    updatePosition();
+  }, [open, updatePosition]);
+
+  // 监听 resize/scroll 更新位置
+  useEffect(() => {
+    if (!open) return;
+    window.addEventListener('resize', updatePosition);
+    window.addEventListener('scroll', updatePosition, true);
+    return () => {
+      window.removeEventListener('resize', updatePosition);
+      window.removeEventListener('scroll', updatePosition, true);
+    };
+  }, [open, updatePosition]);
+
+  // 点击外部关闭（适配 Portal 模式：同时检查按钮和下拉框）
+  useEffect(() => {
+    if (!open) return;
+    const handleClick = (e: MouseEvent) => {
+      const target = e.target as Node;
+      if (
+        buttonRef.current?.contains(target) ||
+        dropdownRef.current?.contains(target)
+      ) {
+        return;
+      }
+      setOpen(false);
+    };
+    document.addEventListener('mousedown', handleClick);
+    return () => document.removeEventListener('mousedown', handleClick);
+  }, [open]);
+
+  return (
+    <div className="qlchart-kline-type-selector">
+      <button
+        ref={buttonRef}
+        className={`qlchart-toolbar-btn ${open ? 'active' : ''}`}
+        onClick={() => setOpen(!open)}
+        title={activeItem?.label ?? '选择K线类型'}
+      >
+        {activeItem?.icon ?? '📊'} {activeItem?.label ?? 'K线类型'} ▾
+      </button>
+      {open && createPortal(
+        <div className="qlchart-kline-type-dropdown" style={dropdownStyle} ref={dropdownRef}>
+          {GROUPS.map(group => (
+            <div key={group} className="qlchart-kline-type-group">
+              <div className="qlchart-kline-type-group-label">{group}</div>
+              {KLINE_TYPES.filter(t => t.group === group).map(item => (
+                <button
+                  key={item.value}
+                  className={`qlchart-kline-type-option ${activeType === item.value ? 'active' : ''}`}
+                  onClick={() => {
+                    setSeriesType(item.value);
+                    setOpen(false);
+                  }}
+                >
+                  <span className="qlchart-kline-type-icon">{item.icon}</span>
+                  <span>{item.label}</span>
+                </button>
+              ))}
+            </div>
+          ))}
+        </div>,
+        document.body
+      )}
+    </div>
+  );
+}

package/src/components/toolbar/LayoutSwitcher.tsx

@@ -0,0 +1,45 @@
+import { useCallback } from 'react';
+import type { LayoutMode } from '../../types/chart.js';
+import { useChartStore } from '../../store/useChartStore.js';
+
+export interface LayoutSwitcherProps {
+  currentMode?: LayoutMode;
+  onModeChange?: (mode: LayoutMode) => void;
+}
+
+const LAYOUT_OPTIONS: { mode: LayoutMode; icon: string; label: string }[] = [
+  { mode: '1', icon: '◻', label: '单图' },
+  { mode: '2h', icon: '◻◻', label: '左右分屏' },
+  { mode: '2v', icon: '◻/◻', label: '上下分屏' },
+  { mode: '4', icon: '◻◻/◻◻', label: '四分屏' },
+];
+
+export function LayoutSwitcher({ currentMode, onModeChange }: LayoutSwitcherProps) {
+  const storeMode = useChartStore((s) => s.layoutMode);
+  const setLayoutMode = useChartStore((s) => s.setLayoutMode);
+
+  const activeMode = currentMode ?? storeMode;
+
+  const handleModeChange = useCallback(
+    (mode: LayoutMode) => {
+      setLayoutMode(mode);
+      onModeChange?.(mode);
+    },
+    [setLayoutMode, onModeChange],
+  );
+
+  return (
+    <div className="qlchart-layout-switcher">
+      {LAYOUT_OPTIONS.map(({ mode, icon, label }) => (
+        <button
+          key={mode}
+          className={`qlchart-layout-btn ${activeMode === mode ? 'active' : ''}`}
+          onClick={() => handleModeChange(mode)}
+          title={label}
+        >
+          <span className="qlchart-layout-icon">{icon}</span>
+        </button>
+      ))}
+    </div>
+  );
+}

package/src/components/toolbar/PeriodSelector.tsx

@@ -0,0 +1,35 @@
+import { useChartStore } from '../../store/useChartStore.js';
+
+const PERIODS = [
+  { label: '1m', value: '1m' },
+  { label: '5m', value: '5m' },
+  { label: '15m', value: '15m' },
+  { label: '30m', value: '30m' },
+  { label: '1h', value: '1h' },
+  { label: '4h', value: '4h' },
+  { label: '1d', value: '1d' },
+  { label: '1w', value: '1w' },
+  { label: '1M', value: '1M' },
+];
+
+export interface PeriodSelectorProps {
+  activePeriod: string;
+}
+
+export function PeriodSelector({ activePeriod }: PeriodSelectorProps) {
+  const setActivePanelPeriod = useChartStore((s) => s.setActivePanelPeriod);
+
+  return (
+    <div className="qlchart-toolbar-group">
+      {PERIODS.map((p) => (
+        <button
+          key={p.value}
+          className={`qlchart-toolbar-btn ${activePeriod === p.value ? 'active' : ''}`}
+          onClick={() => setActivePanelPeriod(p.value)}
+        >
+          {p.label}
+        </button>
+      ))}
+    </div>
+  );
+}

package/src/components/toolbar/QLToolbar.tsx

@@ -0,0 +1,71 @@
+import type { ThemePreset, SeriesType } from '../../types/index.js';
+import { PeriodSelector } from './PeriodSelector.js';
+import { TimeBarModule } from '../timebar/TimeBarModule.js';
+import { KlineTypeSelector } from './KlineTypeSelector.js';
+import { useState, useCallback } from 'react';
+import { IndicatorPanel } from '../indicator/index.js';
+import { useDrawingStore } from '../../store/useDrawingStore.js';
+import { ScreenshotUtil } from '../../plugins/screenshot/ScreenshotUtil.js';
+
+export interface QLToolbarProps {
+  period: string;
+  seriesType: SeriesType;
+  theme: ThemePreset;
+  chartManager?: { getChart: () => any } | null;
+  chartRef?: React.RefObject<any>;
+  containerRef?: React.RefObject<HTMLElement>;
+}
+
+export function QLToolbar({ period, seriesType, theme, chartManager, chartRef, containerRef }: QLToolbarProps) {
+  const [indicatorPanelOpen, setIndicatorPanelOpen] = useState(false);
+  const drawingToolbarOpen = useDrawingStore((s) => s.drawingToolbarOpen);
+  const setDrawingToolbarOpen = useDrawingStore((s) => s.setDrawingToolbarOpen);
+  const drawingCount = useDrawingStore((s) => s.drawingCount);
+
+  const handleOpenIndicator = useCallback(() => {
+    setIndicatorPanelOpen(true);
+  }, []);
+
+  const handleCloseIndicator = useCallback(() => {
+    setIndicatorPanelOpen(false);
+  }, []);
+
+  const handleScreenshot = useCallback(() => {
+    if (chartRef?.current && containerRef?.current) {
+      ScreenshotUtil.download(chartRef.current, containerRef.current);
+    }
+  }, [chartRef, containerRef]);
+
+  return (
+    <div className="qlchart-toolbar">
+      <PeriodSelector activePeriod={period} />
+      <div className="qlchart-toolbar-separator" />
+      <TimeBarModule />
+      <div className="qlchart-toolbar-separator" />
+      <KlineTypeSelector activeType={seriesType} />
+      <div className="qlchart-toolbar-separator" />
+      <button
+        className="qlchart-toolbar-btn"
+        onClick={handleOpenIndicator}
+      >
+        📊 指标
+      </button>
+      <IndicatorPanel open={indicatorPanelOpen} onClose={handleCloseIndicator} />
+      <div className="qlchart-toolbar-separator" />
+      <button
+        className={`qlchart-toolbar-btn ${drawingToolbarOpen ? 'active' : ''}`}
+        onClick={() => setDrawingToolbarOpen(!drawingToolbarOpen)}
+      >
+        🔧 绘图{drawingCount > 0 ? `(${drawingCount})` : ''}
+      </button>
+      <div className="qlchart-toolbar-separator" />
+      <button
+        className="qlchart-toolbar-btn"
+        onClick={handleScreenshot}
+        title="截图下载"
+      >
+        📸 截图
+      </button>
+    </div>
+  );
+}

package/src/components/toolbar/TimeRangeSelector.tsx

@@ -0,0 +1,89 @@
+import { useState } from 'react';
+import type { UTCTimestamp } from 'lightweight-charts';
+
+interface TimeRangeSelectorProps {
+  chartManager?: { getChart: () => any } | null;
+}
+
+const TIME_RANGES = [
+  { label: '5D', days: 5 },
+  { label: '1M', days: 30 },
+  { label: '3M', days: 90 },
+  { label: '6M', days: 180 },
+  { label: 'YTD', days: -1 },
+  { label: '1Y', days: 365 },
+  { label: '2Y', days: 730 },
+  { label: '5Y', days: 1825 },
+  { label: 'Max', days: 0 },
+];
+
+export function TimeRangeSelector({ chartManager }: TimeRangeSelectorProps) {
+  const [showDatePicker, setShowDatePicker] = useState(false);
+  const [startDate, setStartDate] = useState('');
+  const [endDate, setEndDate] = useState('');
+
+  const handleClick = (days: number) => {
+    const chart = chartManager?.getChart();
+    if (!chart) return;
+
+    if (days === 0) {
+      chart.timeScale().fitContent();
+      return;
+    }
+
+    const endTime = Date.now();
+    let startTime: number;
+
+    if (days === -1) {
+      // YTD
+      startTime = new Date(new Date().getFullYear(), 0, 1).getTime();
+    } else {
+      startTime = endTime - days * 24 * 60 * 60 * 1000;
+    }
+
+    chart.timeScale().setVisibleRange({
+      from: (startTime / 1000) as UTCTimestamp,
+      to: (endTime / 1000) as UTCTimestamp,
+    });
+  };
+
+  const applyDateRange = () => {
+    const chart = chartManager?.getChart();
+    if (!chart || !startDate || !endDate) return;
+
+    chart.timeScale().setVisibleRange({
+      from: (new Date(startDate).getTime() / 1000) as UTCTimestamp,
+      to: (new Date(endDate).getTime() / 1000) as UTCTimestamp,
+    });
+    setShowDatePicker(false);
+  };
+
+  return (
+    <div className="qlchart-toolbar-group">
+      {TIME_RANGES.map((range) => (
+        <button
+          key={range.label}
+          className="qlchart-toolbar-btn"
+          onClick={() => handleClick(range.days)}
+        >
+          {range.label}
+        </button>
+      ))}
+      <button
+        className="qlchart-toolbar-btn"
+        onClick={() => setShowDatePicker(!showDatePicker)}
+        title="日期范围"
+      >
+        📅
+      </button>
+      {showDatePicker && (
+        <div className="qlchart-daterange-picker">
+          <input type="date" value={startDate} onChange={(e) => setStartDate(e.target.value)} />
+          <span>~</span>
+          <input type="date" value={endDate} onChange={(e) => setEndDate(e.target.value)} />
+          <button onClick={applyDateRange}>应用</button>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/ui/Modal.tsx

@@ -0,0 +1,67 @@
+import { Dialog, Transition } from '@headlessui/react';
+import { Fragment, type ReactNode } from 'react';
+import { createPortal } from 'react-dom';
+
+export interface ModalProps {
+  open: boolean;
+  onClose: () => void;
+  title?: string;
+  children: ReactNode;
+  width?: number;
+}
+
+/**
+ * QLChart 统一 Modal 组件
+ * 基于 @headlessui/react Dialog + 现有 CSS 变量系统
+ *
+ * 特性：
+ * - 自动 Portal 到 document.body
+ * - 焦点陷阱（Focus Trap）
+ * - 过渡动画
+ * - ARIA 无障碍
+ * - 点击遮罩关闭
+ */
+export function Modal({ open, onClose, title, children, width = 320 }: ModalProps) {
+  return createPortal(
+    <Transition show={open} as={Fragment}>
+      <Dialog onClose={onClose} className="qlchart-modal-root">
+        {/* 遮罩层 */}
+        <Transition.Child
+          as={Fragment}
+          enter="qlchart-modal-enter"
+          enterFrom="qlchart-modal-overlay-enter-from"
+          enterTo="qlchart-modal-overlay-enter-to"
+          leave="qlchart-modal-leave"
+          leaveFrom="qlchart-modal-overlay-leave-from"
+          leaveTo="qlchart-modal-overlay-leave-to"
+        >
+          <div className="qlchart-modal-overlay" aria-hidden="true" />
+        </Transition.Child>
+
+        {/* Modal 内容 */}
+        <Transition.Child
+          as={Fragment}
+          enter="qlchart-modal-enter"
+          enterFrom="qlchart-modal-content-enter-from"
+          enterTo="qlchart-modal-content-enter-to"
+          leave="qlchart-modal-leave"
+          leaveFrom="qlchart-modal-content-leave-from"
+          leaveTo="qlchart-modal-content-leave-to"
+        >
+          <Dialog.Panel
+            className="qlchart-modal-panel"
+            style={{ width: `${width}px`, maxWidth: '90vw' }}
+          >
+            {title && (
+              <Dialog.Title className="qlchart-modal-title">
+                {title}
+              </Dialog.Title>
+            )}
+            {children}
+          </Dialog.Panel>
+        </Transition.Child>
+      </Dialog>
+    </Transition>,
+    document.body,
+  );
+}

package/src/core/ChartManager.ts

@@ -0,0 +1,95 @@
+import {
+  createChart,
+  ColorType,
+  type IChartApi,
+  type ChartOptions as LWCChartOptions,
+  type DeepPartial,
+} from 'lightweight-charts';
+import { EventManager, ChartEvent } from './EventManager.js';
+import { formatFullTime, formatTickTime } from '../utils/timeFormatter.js';
+
+export interface ChartManagerCreateOptions {
+  width?: number;
+  height?: number;
+  theme?: DeepPartial<LWCChartOptions>;
+}
+
+/**
+ * 图表管理器
+ * 封装 LWC IChartApi 的生命周期
+ */
+export class ChartManager {
+  private chart: IChartApi | null = null;
+  private eventManager: EventManager;
+  private container: HTMLElement | null = null;
+
+  constructor(eventManager: EventManager) {
+    this.eventManager = eventManager;
+  }
+
+  /** 创建图表实例 */
+  create(container: HTMLElement, options?: ChartManagerCreateOptions): IChartApi {
+    // 如果已有实例先销毁
+    if (this.chart) {
+      this.dispose();
+    }
+
+    this.container = container;
+    this.chart = createChart(container, {
+      width: options?.width ?? container.clientWidth,
+      height: options?.height ?? container.clientHeight,
+      layout: {
+        background: { type: ColorType.Solid, color: '#131722' },
+        textColor: '#d1d4dc',
+      },
+      grid: {
+        vertLines: { color: '#1e222d' },
+        horzLines: { color: '#1e222d' },
+      },
+      timeScale: {
+        timeVisible: true,
+        secondsVisible: true,
+        tickMarkFormatter: formatTickTime,
+      },
+      localization: {
+        timeFormatter: formatFullTime,
+        dateFormat: 'yyyy-MM-dd HH:mm:ss',
+      },
+      ...options?.theme,
+    });
+
+    this.eventManager.emit(ChartEvent.ChartCreated, { chart: this.chart });
+    return this.chart;
+  }
+
+  /** 销毁图表实例 */
+  dispose(): void {
+    if (this.chart) {
+      this.chart.remove();
+      this.chart = null;
+      this.container = null;
+      this.eventManager.emit(ChartEvent.ChartDisposed);
+    }
+  }
+
+  /** 更新图表选项 */
+  updateOptions(options: DeepPartial<LWCChartOptions>): void {
+    this.chart?.applyOptions(options);
+  }
+
+  /** 获取图表实例 */
+  getChart(): IChartApi | null {
+    return this.chart;
+  }
+
+  /** 调整图表大小 */
+  resize(width: number, height: number): void {
+    this.chart?.applyOptions({ width, height });
+  }
+
+  /** 截图 */
+  screenshot(): string | null {
+    if (!this.chart) return null;
+    return this.chart.takeScreenshot()?.toDataURL() ?? null;
+  }
+}