@quantlife/qlchart 0.0.1

package/demo/pages/ReplayDemo.tsx

@@ -0,0 +1,195 @@
+import { useMemo, useRef, useCallback, useState } from 'react';
+import { QLChartProvider, QLChartPanel } from '@qlchart';
+import { MockDataService, KlineReplay, transformCandlestickData } from '@qlchart';
+import type { CandlestickRawData } from '@qlchart';
+import type { IChartApi, ISeriesApi, SeriesType as LWCSeriesType } from 'lightweight-charts';
+
+const REPLAY_SPEEDS = [
+  { label: '0.5x', value: 2000 },
+  { label: '1x', value: 1000 },
+  { label: '2x', value: 500 },
+  { label: '5x', value: 200 },
+];
+
+export default function ReplayDemo() {
+  const fetchFn = useMemo(
+    () => MockDataService.createMockFetchFn({ trend: 'up', count: 500 }),
+    []
+  );
+
+  const replayRef = useRef<KlineReplay | null>(null);
+  const allDataRef = useRef<unknown[]>([]);
+
+  // Local state
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [speed, setSpeed] = useState(1000); // ms per bar
+  const [progress, setProgress] = useState({ current: 0, total: 0 });
+  const [replayActive, setReplayActive] = useState(false);
+
+  // ===== 数据预加载 =====
+  const preloadData = useCallback(async () => {
+    const result = await fetchFn({
+      pairId: 'BTCUSDT',
+      product: 'digital_currency',
+      period: '1h',
+    }) as { data?: CandlestickRawData[] };
+
+    if (result?.data) {
+      // 转换为 LWC 格式（秒级时间戳）
+      allDataRef.current = transformCandlestickData(result.data);
+    }
+  }, [fetchFn]);
+
+  // ===== Chart 就绪回调 =====
+  const handleChartReady = useCallback((chart: IChartApi | null, mainSeries: ISeriesApi<LWCSeriesType> | null) => {
+    if (!chart || !mainSeries) return;
+
+    // 预加载数据
+    preloadData().then(() => {
+      // 创建 KlineReplay 实例
+      const replay = new KlineReplay();
+      replay.attach(mainSeries);
+      replay.load(allDataRef.current);
+      replay.setOnProgress((current, total) => {
+        setProgress({ current, total });
+      });
+      replayRef.current = replay;
+    });
+  }, [preloadData]);
+
+  // ===== 回放控制按钮 =====
+
+  // 播放/暂停
+  const handlePlay = useCallback(() => {
+    const replay = replayRef.current;
+    if (!replay) return;
+
+    if (!replayActive) {
+      // 首次进入回放模式
+      setReplayActive(true);
+      replay.play();
+      setIsPlaying(true);
+    } else if (isPlaying) {
+      replay.pause();
+      setIsPlaying(false);
+    } else {
+      replay.resume();
+      setIsPlaying(true);
+    }
+  }, [replayActive, isPlaying]);
+
+  // 手动步进 - 下一根
+  const handleNext = useCallback(() => {
+    if (!replayRef.current) return;
+    if (!replayActive) {
+      setReplayActive(true);
+      replayRef.current.play();
+      replayRef.current.pause();
+    }
+    replayRef.current.next();
+    setProgress(replayRef.current.getProgress());
+  }, [replayActive]);
+
+  // 手动步进 - 上一根
+  const handlePrev = useCallback(() => {
+    if (!replayRef.current) return;
+    if (!replayActive) {
+      setReplayActive(true);
+      replayRef.current.play();
+      replayRef.current.pause();
+    }
+    replayRef.current.prev();
+    setProgress(replayRef.current.getProgress());
+  }, [replayActive]);
+
+  // 停止回放
+  const handleStop = useCallback(() => {
+    replayRef.current?.stop();
+    setReplayActive(false);
+    setIsPlaying(false);
+  }, []);
+
+  // 倍数切换
+  const handleSpeedChange = useCallback((ms: number) => {
+    setSpeed(ms);
+    replayRef.current?.setSpeed(ms);
+  }, []);
+
+  const progressPercent = progress.total > 0
+    ? Math.round((progress.current / progress.total) * 100)
+    : 0;
+
+  return (
+    <div className="demo-page">
+      <div className="demo-page-title">▶️ K线回放测试</div>
+      <div className="demo-page-desc">验证K线回放的播放、暂停、步进、速度调节功能</div>
+
+      {/* 回放控制栏 */}
+      <div className="demo-replay-controls">
+        <button
+          className="demo-btn"
+          onClick={handlePrev}
+          disabled={!replayActive}
+          title="上一根"
+        >
+          ⏮
+        </button>
+        <button
+          className={`demo-btn ${isPlaying ? 'active' : ''}`}
+          onClick={handlePlay}
+          title={isPlaying ? '暂停' : '播放'}
+        >
+          {isPlaying ? '⏸ 暂停' : '▶ 播放'}
+        </button>
+        <button
+          className="demo-btn"
+          onClick={handleNext}
+          title="下一根"
+        >
+          ⏭
+        </button>
+        <button
+          className="demo-btn"
+          onClick={handleStop}
+          disabled={!replayActive}
+          title="停止"
+        >
+          ⏹ 停止
+        </button>
+
+        {/* 倍数选择 */}
+        <div className="demo-control-group">
+          <span>倍数：</span>
+          {REPLAY_SPEEDS.map((s) => (
+            <button
+              key={s.value}
+              className={`demo-btn ${speed === s.value ? 'active' : ''}`}
+              onClick={() => handleSpeedChange(s.value)}
+            >
+              {s.label}
+            </button>
+          ))}
+        </div>
+
+        {/* 进度显示 */}
+        <div className="demo-replay-progress">
+          <span>{progress.current} / {progress.total}</span>
+          <div className="demo-progress-bar">
+            <div className="demo-progress-fill" style={{ width: `${progressPercent}%` }} />
+          </div>
+        </div>
+      </div>
+
+      <div className="demo-chart">
+        <QLChartProvider config={{ fetchFn, defaultTheme: 'dark' }}>
+          <QLChartPanel
+            pairId="BTCUSDT"
+            product="digital_currency"
+            showToolbar
+            onChartReady={handleChartReady}
+          />
+        </QLChartProvider>
+      </div>
+    </div>
+  );
+}

package/demo/pages/SaveDemo.tsx

@@ -0,0 +1,27 @@
+import { useMemo } from 'react';
+import { QLChartProvider, QLChartPanel } from '@qlchart';
+import { MockDataService } from '@qlchart';
+
+export default function SaveDemo() {
+  const fetchFn = useMemo(
+    () => MockDataService.createMockFetchFn({ trend: 'random', count: 500 }),
+    []
+  );
+
+  return (
+    <div className="demo-page">
+      <div className="demo-page-title">💾 画图保存测试</div>
+      <div className="demo-page-desc">验证画图本地保存/恢复/清空。画图后刷新页面，画图应自动恢复。</div>
+      <div className="demo-controls">
+        <span style={{ fontSize: '13px', color: '#a0a0b0' }}>
+          画图后刷新页面验证自动恢复。DrawingPersistence集成在QLChartPanel内部。
+        </span>
+      </div>
+      <div className="demo-chart">
+        <QLChartProvider config={{ fetchFn, defaultTheme: 'dark' }}>
+          <QLChartPanel pairId="BTCUSDT" product="digital_currency" showToolbar />
+        </QLChartProvider>
+      </div>
+    </div>
+  );
+}

package/demo/pages/ThemeDemo.tsx

@@ -0,0 +1,29 @@
+import { useState, useMemo } from 'react';
+import { QLChartProvider, QLChartPanel } from '@qlchart';
+import { MockDataService } from '@qlchart';
+import type { ThemePreset } from '@qlchart';
+
+export default function ThemeDemo() {
+  const [theme, setTheme] = useState<ThemePreset>('dark');
+  const fetchFn = useMemo(
+    () => MockDataService.createMockFetchFn({ trend: 'random', count: 500 }),
+    []
+  );
+
+  return (
+    <div className="demo-page">
+      <div className="demo-page-title">🎨 主题切换测试</div>
+      <div className="demo-page-desc">验证深色/浅色主题切换</div>
+      <div className="demo-controls">
+        <button onClick={() => setTheme(t => t === 'dark' ? 'light' : 'dark')}>
+          当前主题：{theme === 'dark' ? '深色 🌙' : '浅色 ☀️'} — 点击切换
+        </button>
+      </div>
+      <div className="demo-chart">
+        <QLChartProvider config={{ fetchFn, defaultTheme: theme }}>
+          <QLChartPanel pairId="BTCUSDT" product="digital_currency" showToolbar />
+        </QLChartProvider>
+      </div>
+    </div>
+  );
+}