@quantlife/qlchart 0.0.1

package/src/components/indicator/IndicatorPropertyPanel.tsx

@@ -0,0 +1,130 @@
+import { useCallback } from 'react';
+import { COMMON_FIELDS, type PropertyField } from '../../types/drawing.js';
+
+export interface IndicatorPropertyPanelProps {
+  /** 指标key */
+  indicatorKey: string;
+  /** 当前样式值 */
+  values: Record<string, string | number | boolean>;
+  /** 样式变更回调 */
+  onStyleChange: (key: string, value: string | number | boolean) => void;
+  /** 关闭面板 */
+  onClose: () => void;
+}
+
+/** 指标属性模板 */
+const INDICATOR_PROPERTY_TEMPLATES: Record<string, PropertyField[]> = {
+  'MA': [
+    COMMON_FIELDS.lineColor('#FF6D00'),
+    COMMON_FIELDS.lineWidth(1),
+  ],
+  'EMA': [
+    COMMON_FIELDS.lineColor('#2962FF'),
+    COMMON_FIELDS.lineWidth(1),
+  ],
+  'BOLL': [
+    COMMON_FIELDS.lineColor('#FF6D00'),
+    COMMON_FIELDS.lineWidth(1),
+    COMMON_FIELDS.fillColor('#2962FF'),
+    COMMON_FIELDS.fillOpacity(0.1),
+  ],
+  'MACD': [
+    { key: 'difColor', label: 'DIF颜色', type: 'color', default: '#2962FF' },
+    { key: 'deaColor', label: 'DEA颜色', type: 'color', default: '#FF6D00' },
+    { key: 'histUpColor', label: '柱状涨色', type: 'color', default: '#26a69a' },
+    { key: 'histDownColor', label: '柱状跌色', type: 'color', default: '#ef5350' },
+  ],
+  'RSI': [
+    COMMON_FIELDS.lineColor('#AB47BC'),
+    COMMON_FIELDS.lineWidth(1),
+  ],
+  'KDJ': [
+    { key: 'kColor', label: 'K线颜色', type: 'color', default: '#FFFFFF' },
+    { key: 'dColor', label: 'D线颜色', type: 'color', default: '#FFFF00' },
+    { key: 'jColor', label: 'J线颜色', type: 'color', default: '#FF00FF' },
+  ],
+  'VOL': [
+    { key: 'upColor', label: '涨色', type: 'color', default: 'rgba(38, 166, 154, 0.35)' },
+    { key: 'downColor', label: '跌色', type: 'color', default: 'rgba(239, 83, 80, 0.35)' },
+  ],
+};
+
+/**
+ * IndicatorPropertyPanel - 指标属性编辑面板
+ * 根据指标类型动态渲染属性控件
+ */
+export function IndicatorPropertyPanel({
+  indicatorKey,
+  values,
+  onStyleChange,
+  onClose,
+}: IndicatorPropertyPanelProps) {
+  const fields = INDICATOR_PROPERTY_TEMPLATES[indicatorKey] ?? [];
+
+  const renderField = useCallback((field: PropertyField) => {
+    const value = values[field.key] ?? field.default;
+
+    switch (field.type) {
+      case 'color':
+        return (
+          <div key={field.key} className="qlchart-indicator-pp-row">
+            <label>{field.label}</label>
+            <input
+              type="color"
+              value={value as string}
+              onChange={(e) => onStyleChange(field.key, e.target.value)}
+            />
+          </div>
+        );
+      case 'range':
+        return (
+          <div key={field.key} className="qlchart-indicator-pp-row">
+            <label>{field.label}</label>
+            <input
+              type="range"
+              min={field.min}
+              max={field.max}
+              step={field.step}
+              value={value as number}
+              onChange={(e) => onStyleChange(field.key, Number(e.target.value))}
+            />
+            <span>{value as number}</span>
+          </div>
+        );
+      case 'toggle':
+        return (
+          <div key={field.key} className="qlchart-indicator-pp-row">
+            <label>{field.label}</label>
+            <input
+              type="checkbox"
+              checked={value as boolean}
+              onChange={(e) => onStyleChange(field.key, e.target.checked)}
+            />
+          </div>
+        );
+      case 'select':
+        return (
+          <div key={field.key} className="qlchart-indicator-pp-row">
+            <label>{field.label}</label>
+            <select value={value as string} onChange={(e) => onStyleChange(field.key, e.target.value)}>
+              {field.options?.map(opt => (
+                <option key={opt.value} value={opt.value}>{opt.label}</option>
+              ))}
+            </select>
+          </div>
+        );
+    }
+  }, [values, onStyleChange]);
+
+  if (fields.length === 0) return null;
+
+  return (
+    <div className="qlchart-indicator-property-panel">
+      <div className="qlchart-indicator-pp-header">
+        <span>{indicatorKey} 属性</span>
+        <button onClick={onClose}>✕</button>
+      </div>
+      {fields.map(renderField)}
+    </div>
+  );
+}

package/src/components/indicator/IndicatorTag.tsx

@@ -0,0 +1,173 @@
+import { useState, useCallback } from 'react';
+import { createPortal } from 'react-dom';
+import { useIndicatorStore } from '../../store/useIndicatorStore.js';
+import type { IndicatorConfig } from '../../types/index.js';
+import '../../styles/indicator-tag.css';
+
+export interface IndicatorTagProps {
+  config: IndicatorConfig;
+}
+
+interface ParamDef {
+  name: string;
+  label: string;
+  defaultValue: number;
+  min: number;
+  max: number;
+  step: number;
+}
+
+function getParamDefs(name: string): ParamDef[] {
+  const defs: Record<string, ParamDef[]> = {
+    MA: [{ name: 'period', label: '周期', defaultValue: 20, min: 2, max: 500, step: 1 }],
+    EMA: [{ name: 'period', label: '周期', defaultValue: 20, min: 2, max: 500, step: 1 }],
+    BOLL: [
+      { name: 'period', label: '周期', defaultValue: 20, min: 2, max: 200, step: 1 },
+      { name: 'stdDev', label: '标准差', defaultValue: 2, min: 0.5, max: 5, step: 0.1 },
+    ],
+    MACD: [
+      { name: 'fast', label: '快线', defaultValue: 12, min: 2, max: 100, step: 1 },
+      { name: 'slow', label: '慢线', defaultValue: 26, min: 2, max: 200, step: 1 },
+      { name: 'signal', label: '信号线', defaultValue: 9, min: 2, max: 100, step: 1 },
+    ],
+    RSI: [{ name: 'period', label: '周期', defaultValue: 14, min: 2, max: 100, step: 1 }],
+    KDJ: [
+      { name: 'kPeriod', label: 'K周期', defaultValue: 9, min: 2, max: 100, step: 1 },
+      { name: 'dPeriod', label: 'D周期', defaultValue: 3, min: 1, max: 50, step: 1 },
+      { name: 'jSmooth', label: 'J平滑', defaultValue: 3, min: 1, max: 50, step: 1 },
+    ],
+    CCI: [{ name: 'period', label: '周期', defaultValue: 20, min: 2, max: 200, step: 1 }],
+  };
+  return defs[name] ?? [];
+}
+
+/** 指标标签 - 显示指标名+当前值+配置按钮 */
+export function IndicatorTag({ config }: IndicatorTagProps) {
+  const removeIndicator = useIndicatorStore((s) => s.removeIndicator);
+  const toggleIndicator = useIndicatorStore((s) => s.toggleIndicator);
+  const updateIndicatorParams = useIndicatorStore((s) => s.updateIndicatorParams);
+  const indicatorDataCache = useIndicatorStore((s) => s.indicatorDataCache);
+
+  // ★ V3 需求3：Modal 状态 + 草稿参数
+  const [configModalOpen, setConfigModalOpen] = useState(false);
+  const [draftParams, setDraftParams] = useState<Record<string, number>>({});
+
+  const handleRemove = useCallback(() => {
+    removeIndicator(config.id);
+  }, [config.id, removeIndicator]);
+
+  const handleToggleVisible = useCallback(() => {
+    toggleIndicator(config.id);
+  }, [config.id, toggleIndicator]);
+
+  // ★ 打开 Modal：初始化草稿
+  const handleOpenConfig = useCallback(() => {
+    setDraftParams({ ...(config.params ?? {}) });
+    setConfigModalOpen(true);
+  }, [config.params]);
+
+  // ★ 保存：应用草稿到 store
+  const handleSaveConfig = useCallback(() => {
+    updateIndicatorParams(config.id, draftParams);
+    setConfigModalOpen(false);
+    setDraftParams({});
+  }, [config.id, draftParams, updateIndicatorParams]);
+
+  // ★ 取消：丢弃草稿
+  const handleCancelConfig = useCallback(() => {
+    setConfigModalOpen(false);
+    setDraftParams({});
+  }, []);
+
+  // ★ 草稿参数变化
+  const handleParamChange = useCallback((name: string, value: number) => {
+    setDraftParams(prev => ({ ...prev, [name]: value }));
+  }, []);
+
+  // 获取最新值
+  const data = indicatorDataCache[config.name];
+  const latestPoint = data?.data[data.data.length - 1];
+  const latestValue = latestPoint
+    ? Object.values(latestPoint.values)[0]?.toFixed(2)
+    : '-';
+
+  const paramDefs = getParamDefs(config.name);
+
+  return (
+    <>
+      <span
+        className={`qlchart-indicator-tag ${config.visible ? 'visible' : 'hidden'}`}
+      >
+        <span className="qlchart-indicator-tag-label">{config.label}</span>
+        <span className="qlchart-indicator-tag-value">{latestValue}</span>
+        {paramDefs.length > 0 && (
+          <button
+            className="qlchart-indicator-tag-config"
+            onClick={handleOpenConfig}
+            title="配置"
+          >
+            ⚙️
+          </button>
+        )}
+        <button
+          className="qlchart-indicator-tag-toggle"
+          onClick={handleToggleVisible}
+          title={config.visible ? '隐藏' : '显示'}
+        >
+          {config.visible ? '👁' : '👁‍🗨'}
+        </button>
+        <button
+          className="qlchart-indicator-tag-close"
+          onClick={handleRemove}
+          title="移除"
+        >
+          ✕
+        </button>
+      </span>
+
+      {/* ★ V3 需求3：标准 Portal Modal + 草稿模式 */}
+      {configModalOpen && createPortal(
+        <div className="qlchart-modal-overlay" onClick={handleCancelConfig}>
+          <div
+            className="qlchart-indicator-config-modal"
+            onClick={(e) => e.stopPropagation()}
+            role="dialog"
+            aria-modal="true"
+            aria-label={`${config.label} 参数配置`}
+          >
+            <div className="qlchart-indicator-config-header">
+              <span>{config.label} 参数配置</span>
+              <button className="qlchart-indicator-config-close" onClick={handleCancelConfig}>✕</button>
+            </div>
+
+            <div className="qlchart-indicator-config-body">
+              {paramDefs.map((pd) => (
+                <div key={pd.name} className="qlchart-indicator-config-row">
+                  <label>{pd.label}</label>
+                  <input
+                    type="number"
+                    value={draftParams[pd.name] ?? pd.defaultValue}
+                    onChange={(e) => handleParamChange(pd.name, Number(e.target.value))}
+                    min={pd.min}
+                    max={pd.max}
+                    step={pd.step}
+                  />
+                </div>
+              ))}
+            </div>
+
+            <div className="qlchart-indicator-config-footer">
+              <button className="qlchart-indicator-config-cancel" onClick={handleCancelConfig}>
+                取消
+              </button>
+              <button className="qlchart-indicator-config-save" onClick={handleSaveConfig}>
+                保存
+              </button>
+            </div>
+          </div>
+        </div>,
+        document.body,
+      )}
+    </>
+  );
+}

package/src/components/indicator/index.ts

@@ -0,0 +1,4 @@
+export { IndicatorPanel } from './IndicatorPanel.js';
+export type { IndicatorPanelProps } from './IndicatorPanel.js';
+export { IndicatorTag } from './IndicatorTag.js';
+export type { IndicatorTagProps } from './IndicatorTag.js';

package/src/components/replay/ReplayController.css

@@ -0,0 +1,97 @@
+.qlchart-replay-controller {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  height: 48px;
+  padding: 0 12px;
+  background: rgba(30, 30, 40, 0.9);
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(8px);
+  flex-shrink: 0;
+}
+
+.qlchart-replay-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border: none;
+  border-radius: 4px;
+  background: rgba(255, 255, 255, 0.1);
+  color: #e0e0e0;
+  cursor: pointer;
+  font-size: 14px;
+  transition: background 0.15s;
+}
+
+.qlchart-replay-btn:hover {
+  background: rgba(255, 255, 255, 0.2);
+}
+
+.qlchart-replay-btn-primary.playing {
+  background: rgba(38, 166, 154, 0.3);
+}
+
+.qlchart-replay-progress {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex: 1;
+  min-width: 120px;
+}
+
+.qlchart-replay-progress-text {
+  font-size: 12px;
+  color: #aaa;
+  white-space: nowrap;
+  min-width: 60px;
+  text-align: right;
+}
+
+.qlchart-replay-speed {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.qlchart-replay-speed-label {
+  font-size: 12px;
+  color: #aaa;
+}
+
+.qlchart-replay-speed-value {
+  font-size: 12px;
+  color: #e0e0e0;
+  min-width: 32px;
+  text-align: center;
+}
+
+.qlchart-replay-slider {
+  -webkit-appearance: none;
+  appearance: none;
+  height: 4px;
+  border-radius: 2px;
+  background: rgba(255, 255, 255, 0.2);
+  outline: none;
+  cursor: pointer;
+}
+
+.qlchart-replay-slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background: #26a69a;
+  cursor: pointer;
+}
+
+.qlchart-replay-slider::-moz-range-thumb {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background: #26a69a;
+  cursor: pointer;
+  border: none;
+}

package/src/components/replay/ReplayController.tsx

@@ -0,0 +1,138 @@
+import { useCallback, useEffect, useRef } from 'react';
+import { useReplayStore } from '../../store/useReplayStore.js';
+import { KlineReplay } from '../../plugins/replay/KlineReplay.js';
+import type { ISeriesApi, SeriesType as LWCSeriesType } from 'lightweight-charts';
+
+import './ReplayController.css';
+
+export interface ReplayControllerProps {
+  replay: KlineReplay | null;
+}
+
+export function ReplayController({ replay }: ReplayControllerProps) {
+  const isReplayMode = useReplayStore((s) => s.isReplayMode);
+  const isPlaying = useReplayStore((s) => s.isPlaying);
+  const speed = useReplayStore((s) => s.speed);
+  const progress = useReplayStore((s) => s.progress);
+  const setPlaying = useReplayStore((s) => s.setPlaying);
+  const setSpeed = useReplayStore((s) => s.setSpeed);
+  const setProgress = useReplayStore((s) => s.setProgress);
+  const exitReplay = useReplayStore((s) => s.exitReplay);
+
+  // 同步回放进度
+  useEffect(() => {
+    if (!replay) return;
+    replay.setOnProgress((current, total) => {
+      setProgress(current, total);
+    });
+    return () => {
+      replay.setOnProgress(() => {});
+    };
+  }, [replay, setProgress]);
+
+  const handlePlayPause = useCallback(() => {
+    if (!replay) return;
+    if (isPlaying) {
+      replay.pause();
+      setPlaying(false);
+    } else {
+      if (progress.current === 0) {
+        replay.play();
+      } else {
+        replay.resume();
+      }
+      setPlaying(true);
+    }
+  }, [replay, isPlaying, progress.current, setPlaying]);
+
+  const handleStop = useCallback(() => {
+    if (!replay) return;
+    replay.stop();
+    setPlaying(false);
+    exitReplay();
+  }, [replay, setPlaying, exitReplay]);
+
+  const handlePrev = useCallback(() => {
+    if (!replay) return;
+    replay.prev();
+  }, [replay]);
+
+  const handleNext = useCallback(() => {
+    if (!replay) return;
+    replay.next();
+  }, [replay]);
+
+  const handleSpeedChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      // 滑块 0.5x~5x → 2000ms~200ms
+      const multiplier = parseFloat(e.target.value);
+      const ms = Math.round(1000 / multiplier);
+      setSpeed(ms);
+      replay?.setSpeed(ms);
+    },
+    [replay, setSpeed],
+  );
+
+  const handleProgressChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      if (!replay) return;
+      const index = parseInt(e.target.value, 10);
+      replay.goto(index);
+    },
+    [replay],
+  );
+
+  if (!isReplayMode) return null;
+
+  const speedMultiplier = Math.round((1000 / speed) * 10) / 10;
+  const progressPercent = progress.total > 0 ? (progress.current / progress.total) * 100 : 0;
+
+  return (
+    <div className="qlchart-replay-controller">
+      <button className="qlchart-replay-btn" onClick={handleStop} title="停止">
+        ⏹
+      </button>
+      <button className="qlchart-replay-btn" onClick={handlePrev} title="上一根">
+        ⏮
+      </button>
+      <button
+        className={`qlchart-replay-btn qlchart-replay-btn-primary ${isPlaying ? 'playing' : ''}`}
+        onClick={handlePlayPause}
+        title={isPlaying ? '暂停' : '播放'}
+      >
+        {isPlaying ? '⏸' : '▶'}
+      </button>
+      <button className="qlchart-replay-btn" onClick={handleNext} title="下一根">
+        ⏭
+      </button>
+
+      <div className="qlchart-replay-progress">
+        <input
+          type="range"
+          min={0}
+          max={Math.max(progress.total - 1, 0)}
+          value={Math.max(progress.current - 1, 0)}
+          onChange={handleProgressChange}
+          className="qlchart-replay-slider"
+        />
+        <span className="qlchart-replay-progress-text">
+          {progress.current}/{progress.total}
+        </span>
+      </div>
+
+      <div className="qlchart-replay-speed">
+        <span className="qlchart-replay-speed-label">速度</span>
+        <input
+          type="range"
+          min={0.5}
+          max={5}
+          step={0.5}
+          value={speedMultiplier}
+          onChange={handleSpeedChange}
+          className="qlchart-replay-slider"
+        />
+        <span className="qlchart-replay-speed-value">{speedMultiplier}x</span>
+      </div>
+    </div>
+  );
+}

package/src/components/timebar/TimeBarModule.tsx

@@ -0,0 +1,30 @@
+import { useChartStore } from '../../store/useChartStore.js';
+import { usePanelRegistry } from '../../store/usePanelRegistry.js';
+import { TimeRangeSelector } from './TimeRangeSelector.js';
+
+export interface TimeBarModuleProps {
+  /** 样式变体 */
+  variant?: 'toolbar' | 'standalone';
+  /** 自定义 className */
+  className?: string;
+}
+
+/**
+ * 时间栏模块容器组件
+ *
+ * 通过 PanelRegistry 获取活跃面板的 chartManager，
+ * 不再依赖 props 传递。
+ */
+export function TimeBarModule({
+  variant = 'toolbar',
+  className,
+}: TimeBarModuleProps) {
+  const activePanelId = useChartStore((s) => s.activePanelId);
+  const getHandle = usePanelRegistry((s) => s.getHandle);
+  const handle = activePanelId ? getHandle(activePanelId) : undefined;
+  const chartManager = handle?.chartManager ?? null;
+
+  return (
+    <TimeRangeSelector chartManager={chartManager} />
+  );
+}

package/src/components/timebar/TimeRangeSelector.tsx

@@ -0,0 +1,96 @@
+import { useTimeBarStore } from '../../store/useTimeBarStore.js';
+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) {
+  // 从Store获取状态
+  const showDatePicker = useTimeBarStore((s) => s.showDatePicker);
+  const customStartDate = useTimeBarStore((s) => s.customStartDate);
+  const customEndDate = useTimeBarStore((s) => s.customEndDate);
+  const activeRangeLabel = useTimeBarStore((s) => s.activeRangeLabel);
+  const setShowDatePicker = useTimeBarStore((s) => s.setShowDatePicker);
+  const setActiveRangeLabel = useTimeBarStore((s) => s.setActiveRangeLabel);
+  const setCustomDateRange = useTimeBarStore((s) => s.setCustomDateRange);
+
+  const handleClick = (days: number, label: string) => {
+    const chart = chartManager?.getChart();
+    if (!chart) return;
+
+    setActiveRangeLabel(label);
+
+    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 || !customStartDate || !customEndDate) return;
+
+    chart.timeScale().setVisibleRange({
+      from: (new Date(customStartDate).getTime() / 1000) as UTCTimestamp,
+      to: (new Date(customEndDate).getTime() / 1000) as UTCTimestamp,
+    });
+    setShowDatePicker(false);
+  };
+
+  return (
+    <div className="qlchart-toolbar-group">
+      {TIME_RANGES.map((range) => (
+        <button
+          key={range.label}
+          className={`qlchart-toolbar-btn ${activeRangeLabel === range.label ? 'active' : ''}`}
+          onClick={() => handleClick(range.days, range.label)}
+        >
+          {range.label}
+        </button>
+      ))}
+      <button
+        className="qlchart-toolbar-btn"
+        onClick={() => setShowDatePicker(!showDatePicker)}
+        title="日期范围"
+      >
+        📅
+      </button>
+      {showDatePicker && (
+        <div className="qlchart-daterange-picker">
+          <input type="date" value={customStartDate} onChange={(e) => setCustomDateRange(e.target.value, customEndDate)} />
+          <span>~</span>
+          <input type="date" value={customEndDate} onChange={(e) => setCustomDateRange(customStartDate, e.target.value)} />
+          <button onClick={applyDateRange}>应用</button>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/timebar/index.ts

@@ -0,0 +1,3 @@
+export { TimeBarModule } from './TimeBarModule.js';
+export type { TimeBarModuleProps } from './TimeBarModule.js';
+export { TimeRangeSelector } from './TimeRangeSelector.js';