@quantlife/qlchart 0.0.1

package/.idea/QLChart.iml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$">
+      <excludeFolder url="file://$MODULE_DIR$/.tmp" />
+      <excludeFolder url="file://$MODULE_DIR$/temp" />
+      <excludeFolder url="file://$MODULE_DIR$/tmp" />
+    </content>
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>

package/.idea/modules.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/QLChart.iml" filepath="$PROJECT_DIR$/.idea/QLChart.iml" />
+    </modules>
+  </component>
+</project>

package/.idea/vcs.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="" vcs="Git" />
+  </component>
+</project>

package/README.md

@@ -0,0 +1,75 @@
+# QLChart
+
+QuantLife 多功能图表库 — 基于 lightweight-charts + lightweight-charts-drawing 的 React 图表组件库。
+
+## 特性
+
+- 📊 **10种K线类型** — 蜡烛图、空心蜡烛图、美国线、折线图、面积图、基准线、平均K线、成交量蜡烛图、砖形图、线形反转
+- 🎨 **23种绘图工具** — 趋势线、矩形、斐波那契回撤/扩展/圆形/时区、平行通道、画笔、测量器、旋转矩形等
+- 📐 **图表形态工具** — ABCD、XABCD、头肩顶、三角形、赛福形态
+- 🔗 **多面板布局** — 支持 1/2/4 分屏，面板间光标联动
+- 📏 **时间轴延伸** — 未来区域可绘制、可拖拽
+- 🎯 **磁铁吸附** — 绘图锚点自动对齐K线
+- 💾 **绘图持久化** — 绘图数据自动保存/恢复
+- 📱 **响应式设计** — 适配各种屏幕
+
+## 安装
+
+```bash
+pnpm add @quantlife/qlchart
+```
+
+## 快速开始
+
+```tsx
+import { QLChartProvider, QLChartPanel } from '@quantlife/qlchart';
+import '@quantlife/qlchart/dist/style.css';
+
+function App() {
+  return (
+    <QLChartProvider fetchFn={async (params) => {
+      const res = await fetch(`/api/kline?pair=${params.pairId}&period=${params.period}`);
+      return res.json();
+    }}>
+      <QLChartPanel pairId="BTCUSDT" product="BTC" period="1h" />
+    </QLChartProvider>
+  );
+}
+```
+
+## 多面板布局
+
+```tsx
+import { QLChartLayout } from '@quantlife/qlchart';
+
+<QLChartLayout mode="4" crosshairSync />
+```
+
+## Standalone 引入
+
+```html
+<script src="https://cdn.example.com/qlchart.standalone.js"></script>
+<link rel="stylesheet" href="https://cdn.example.com/style.css">
+<div id="chart"></div>
+<script>
+  const { QLChartProvider, QLChartPanel } = QLChart;
+  // ...
+</script>
+```
+
+## API 文档
+
+详细 API 文档请参阅 [docs/api.md](docs/api.md)。
+
+## 技术栈
+
+- React 18+
+- TypeScript 5+
+- lightweight-charts 5+
+- lightweight-charts-drawing
+- Zustand（状态管理）
+- Vite（构建工具）
+
+## License
+
+Private © QuantLife

package/demo/App.css

@@ -0,0 +1,213 @@
+.demo-app {
+  display: flex;
+  width: 100%;
+  height: 100vh;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  background: var(--qlchart-bg, #131722);
+  color: var(--qlchart-text, #d1d4dc);
+}
+
+.demo-nav {
+  width: 200px;
+  min-width: 200px;
+  background: var(--qlchart-toolbar-bg, #1e222d);
+  border-right: 1px solid var(--qlchart-border, #2a2e39);
+  display: flex;
+  flex-direction: column;
+  padding: 12px 0;
+  overflow-y: auto;
+}
+
+.demo-nav-title {
+  padding: 12px 16px 20px;
+  font-size: 18px;
+  font-weight: 700;
+  color: var(--qlchart-accent, #2962ff);
+  letter-spacing: 1px;
+}
+
+.demo-nav-item {
+  padding: 10px 20px;
+  cursor: pointer;
+  font-size: 14px;
+  transition: all 0.15s;
+  border-left: 3px solid transparent;
+  color: #787b86;
+}
+
+.demo-nav-item:hover {
+  background: rgba(41, 98, 255, 0.1);
+  color: var(--qlchart-text, #d1d4dc);
+}
+
+.demo-nav-item.active {
+  background: rgba(41, 98, 255, 0.15);
+  border-left-color: var(--qlchart-accent, #2962ff);
+  color: var(--qlchart-text, #d1d4dc);
+}
+
+.demo-content {
+  flex: 1;
+  overflow: auto;
+  padding: 16px;
+}
+
+.demo-page {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  gap: 12px;
+}
+
+.demo-controls {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  align-items: center;
+  padding: 12px;
+  background: var(--qlchart-toolbar-bg, #1e222d);
+  border-radius: 8px;
+}
+
+.demo-controls label {
+  font-size: 13px;
+  color: #787b86;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.demo-controls select,
+.demo-controls input[type="range"],
+.demo-controls input[type="number"] {
+  background: var(--qlchart-bg, #131722);
+  border: 1px solid var(--qlchart-border, #2a2e39);
+  color: var(--qlchart-text, #d1d4dc);
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-size: 13px;
+}
+
+.demo-controls button {
+  background: var(--qlchart-accent, #2962ff);
+  color: #fff;
+  border: none;
+  padding: 6px 14px;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 13px;
+  transition: background 0.15s;
+}
+
+.demo-controls button:hover {
+  background: #1e5eff;
+}
+
+.demo-chart {
+  flex: 1;
+  min-height: 400px;
+  background: var(--qlchart-bg, #131722);
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.demo-page-title {
+  font-size: 20px;
+  font-weight: 600;
+  color: var(--qlchart-text, #d1d4dc);
+  margin-bottom: 4px;
+}
+
+.demo-page-desc {
+  font-size: 13px;
+  color: #787b86;
+  margin-bottom: 8px;
+}
+
+/* ===== 通用按钮样式（Demo页面使用） ===== */
+
+.demo-btn {
+  background: var(--qlchart-bg, #131722);
+  color: #787b86;
+  border: 1px solid var(--qlchart-border, #2a2e39);
+  padding: 6px 14px;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 13px;
+  transition: all 0.15s;
+}
+
+.demo-btn:hover:not(:disabled) {
+  background: var(--qlchart-toolbar-bg, #1e222d);
+  color: var(--qlchart-text, #d1d4dc);
+  border-color: var(--qlchart-accent, #2962ff);
+}
+
+.demo-btn.active {
+  background: var(--qlchart-accent, #2962ff);
+  color: #fff;
+  border-color: var(--qlchart-accent, #2962ff);
+}
+
+.demo-btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+/* ===== 控件组容器 ===== */
+
+.demo-control-group {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 13px;
+  color: #787b86;
+}
+
+/* ===== 回放控制栏 ===== */
+
+.demo-replay-controls {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  align-items: center;
+  padding: 12px;
+  background: var(--qlchart-toolbar-bg, #1e222d);
+  border-radius: 8px;
+}
+
+.demo-replay-controls .demo-btn {
+  min-width: 40px;
+  text-align: center;
+}
+
+/* ===== 回放进度条 ===== */
+
+.demo-replay-progress {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex: 1;
+  min-width: 200px;
+}
+
+.demo-replay-progress span {
+  font-size: 12px;
+  color: #787b86;
+  white-space: nowrap;
+}
+
+.demo-progress-bar {
+  flex: 1;
+  height: 6px;
+  background: var(--qlchart-border, #2a2e39);
+  border-radius: 3px;
+  overflow: hidden;
+}
+
+.demo-progress-fill {
+  height: 100%;
+  background: var(--qlchart-accent, #2962ff);
+  border-radius: 3px;
+  transition: width 0.2s ease;
+}

package/demo/App.tsx

@@ -0,0 +1,46 @@
+import { useState } from 'react';
+import BasicChartDemo from './pages/BasicChartDemo';
+import DrawingDemo from './pages/DrawingDemo';
+import IndicatorDemo from './pages/IndicatorDemo';
+import LayoutDemo from './pages/LayoutDemo';
+import ReplayDemo from './pages/ReplayDemo';
+import ThemeDemo from './pages/ThemeDemo';
+import SaveDemo from './pages/SaveDemo';
+import MultiPeriodDemo from './pages/MultiPeriodDemo';
+import DemoNav from './components/DemoNav';
+
+type DemoPage = 'basic' | 'drawing' | 'indicator' | 'layout' | 'replay' | 'theme' | 'save' | 'multi-period';
+
+interface PageInfo {
+  label: string;
+  component: React.FC;
+}
+
+const PAGES: Record<DemoPage, PageInfo> = {
+  basic:          { label: '📈 基础K线', component: BasicChartDemo },
+  drawing:        { label: '✏️ 画图工具', component: DrawingDemo },
+  indicator:      { label: '📊 指标系统', component: IndicatorDemo },
+  layout:         { label: '📐 多面板布局', component: LayoutDemo },
+  replay:         { label: '▶️ K线回放', component: ReplayDemo },
+  theme:          { label: '🎨 主题切换', component: ThemeDemo },
+  save:           { label: '💾 画图保存', component: SaveDemo },
+  'multi-period': { label: '📅 多周期共享', component: MultiPeriodDemo },
+};
+
+export default function App() {
+  const [currentPage, setCurrentPage] = useState<DemoPage>('basic');
+  const PageComponent = PAGES[currentPage].component;
+
+  return (
+    <div className="demo-app">
+      <DemoNav
+        pages={PAGES}
+        current={currentPage}
+        onChange={setCurrentPage}
+      />
+      <div className="demo-content">
+        <PageComponent />
+      </div>
+    </div>
+  );
+}

package/demo/components/ControlPanel.tsx

@@ -0,0 +1,13 @@
+import type { ReactNode } from 'react';
+
+interface ControlPanelProps {
+  children: ReactNode;
+}
+
+export default function ControlPanel({ children }: ControlPanelProps) {
+  return (
+    <div className="demo-controls">
+      {children}
+    </div>
+  );
+}

package/demo/components/DemoNav.tsx

@@ -0,0 +1,27 @@
+interface PageInfo {
+  label: string;
+  component: React.FC;
+}
+
+interface DemoNavProps {
+  pages: Record<string, PageInfo>;
+  current: string;
+  onChange: (page: string) => void;
+}
+
+export default function DemoNav({ pages, current, onChange }: DemoNavProps) {
+  return (
+    <nav className="demo-nav">
+      <div className="demo-nav-title">QLChart Demo</div>
+      {Object.entries(pages).map(([key, { label }]) => (
+        <div
+          key={key}
+          className={`demo-nav-item${current === key ? ' active' : ''}`}
+          onClick={() => onChange(key)}
+        >
+          {label}
+        </div>
+      ))}
+    </nav>
+  );
+}

package/demo/index.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="zh-CN" data-theme="dark">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>QLChart Demo</title>
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    html, body, #root { width: 100%; height: 100%; }
+  </style>
+</head>
+<body>
+  <div id="root"></div>
+  <script type="module" src="./main.tsx"></script>
+</body>
+</html>

package/demo/main.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+import './App.css';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);

package/demo/pages/BasicChartDemo.tsx

@@ -0,0 +1,61 @@
+import { useState, useMemo } from 'react';
+import { QLChartProvider, QLChartPanel } from '@qlchart';
+import { MockDataService } from '@qlchart';
+import type { MarketTrend } from '@qlchart';
+
+const DEMO_PERIODS = [
+  { label: '15m', value: '15m' },
+  { label: '1h', value: '1h' },
+  { label: '4h', value: '4h' },
+];
+
+export default function BasicChartDemo() {
+  const [trend, setTrend] = useState<MarketTrend>('random');
+  const [count, setCount] = useState(500);
+  const [period, setPeriod] = useState('1h');
+
+  const fetchFn = useMemo(
+    () => MockDataService.createMockFetchFn({ trend, count }),
+    [trend, count]
+  );
+
+  return (
+    <div className="demo-page">
+      <div className="demo-page-title">📈 基础K线测试</div>
+      <div className="demo-page-desc">验证K线渲染、行情类型切换、数据量调节、周期切换</div>
+      <div className="demo-controls">
+        <div className="demo-control-group">
+          <span>周期：</span>
+          {DEMO_PERIODS.map((p) => (
+            <button
+              key={p.value}
+              className={`demo-btn ${period === p.value ? 'active' : ''}`}
+              onClick={() => setPeriod(p.value)}
+            >
+              {p.label}
+            </button>
+          ))}
+        </div>
+        <label>
+          行情类型：
+          <select value={trend} onChange={e => setTrend(e.target.value as MarketTrend)}>
+            <option value="random">随机</option>
+            <option value="up">牛市</option>
+            <option value="down">熊市</option>
+            <option value="side">横盘</option>
+            <option value="v-reverse">V反</option>
+          </select>
+        </label>
+        <label>
+          数据量：{count}
+          <input type="range" min={100} max={5000} step={100} value={count} onChange={e => setCount(Number(e.target.value))} />
+        </label>
+      </div>
+      <div className="demo-chart">
+        <QLChartProvider config={{ fetchFn, defaultTheme: 'dark' }}>
+          <QLChartPanel pairId="BTCUSDT" product="digital_currency" period={period} showToolbar />
+        </QLChartProvider>
+      </div>
+    </div>
+  );
+}

package/demo/pages/DrawingDemo.tsx

@@ -0,0 +1,22 @@
+import { useMemo } from 'react';
+import { QLChartProvider, QLChartPanel } from '@qlchart';
+import { MockDataService } from '@qlchart';
+
+export default function DrawingDemo() {
+  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">验证21种画图工具的创建、选中、编辑、删除功能</div>
+      <div className="demo-chart">
+        <QLChartProvider config={{ fetchFn, defaultTheme: 'dark' }}>
+          <QLChartPanel pairId="BTCUSDT" product="digital_currency" showToolbar />
+        </QLChartProvider>
+      </div>
+    </div>
+  );
+}

package/demo/pages/IndicatorDemo.tsx

@@ -0,0 +1,22 @@
+import { useMemo } from 'react';
+import { QLChartProvider, QLChartPanel } from '@qlchart';
+import { MockDataService } from '@qlchart';
+
+export default function IndicatorDemo() {
+  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">验证MA/EMA/BOLL/MACD/RSI/KDJ/CCI指标的叠加和子面板渲染</div>
+      <div className="demo-chart">
+        <QLChartProvider config={{ fetchFn, defaultTheme: 'dark' }}>
+          <QLChartPanel pairId="BTCUSDT" product="digital_currency" showToolbar />
+        </QLChartProvider>
+      </div>
+    </div>
+  );
+}

package/demo/pages/LayoutDemo.tsx

@@ -0,0 +1,35 @@
+import { useState, useMemo } from 'react';
+import { QLChartProvider, QLChartLayout } from '@qlchart';
+import { MockDataService } from '@qlchart';
+import type { LayoutMode } from '@qlchart';
+
+export default function LayoutDemo() {
+  const [mode, setMode] = useState<LayoutMode>('4');
+  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">验证1/2h/2v/4种布局切换和光标联动</div>
+      <div className="demo-controls">
+        <label>
+          布局模式：
+          <select value={mode} onChange={e => setMode(e.target.value as LayoutMode)}>
+            <option value="1">单图</option>
+            <option value="2h">2列</option>
+            <option value="2v">2行</option>
+            <option value="4">四宫格</option>
+          </select>
+        </label>
+      </div>
+      <div className="demo-chart">
+        <QLChartProvider config={{ fetchFn, defaultTheme: 'dark' }}>
+          <QLChartLayout mode={mode} crosshairSync />
+        </QLChartProvider>
+      </div>
+    </div>
+  );
+}

package/demo/pages/MultiPeriodDemo.tsx

@@ -0,0 +1,31 @@
+import { useMemo } from 'react';
+import { QLChartProvider, QLChartLayout } from '@qlchart';
+import { MockDataService } from '@qlchart';
+import type { PanelConfig } from '@qlchart';
+
+export default function MultiPeriodDemo() {
+  const fetchFn = useMemo(
+    () => MockDataService.createMockFetchFn({ trend: 'random', count: 3000 }),
+    [],
+  );
+
+  const panels: PanelConfig[] = useMemo(() => [
+    { id: 'panel_1h', pairId: 'BTCUSDT', product: 'digital_currency', period: '1h', seriesType: 'candlestick' as any, showToolbar: true },
+    { id: 'panel_4h', pairId: 'BTCUSDT', product: 'digital_currency', period: '4h', seriesType: 'candlestick' as any, showToolbar: true },
+  ], []);
+
+  return (
+    <div className="demo-page">
+      <div className="demo-page-title">📅 多周期K线共享显示</div>
+      <div className="demo-page-desc">
+        同一品种（BTCUSDT）的不同周期K线并排显示，绘图在周期间自动共享。
+        在任意面板上画趋势线/矩形/标注，其他周期面板也可见。
+      </div>
+      <div className="demo-chart">
+        <QLChartProvider config={{ fetchFn, defaultTheme: 'dark' }}>
+          <QLChartLayout mode="2h" panels={panels} crosshairSync={false} />
+        </QLChartProvider>
+      </div>
+    </div>
+  );
+}