@quantlife/qlchart 0.0.1

package/src/styles/toolbar.css

@@ -0,0 +1,129 @@
+.qlchart-toolbar {
+  display: flex;
+  align-items: center;
+  gap: var(--qlchart-space-md);
+  padding: 6px var(--qlchart-space-lg);
+  background: var(--qlchart-toolbar-bg);
+  border-bottom: 1px solid var(--qlchart-border);
+  flex-shrink: 0;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+  position: relative;
+}
+
+.qlchart-toolbar-group {
+  display: flex;
+  align-items: center;
+  gap: var(--qlchart-space-xs);
+}
+
+.qlchart-toolbar-separator {
+  width: 1px;
+  height: 20px;
+  background: var(--qlchart-border);
+  margin: 0 var(--qlchart-space-sm);
+}
+
+/* ═══ 按钮：统一 token 引用 ═══ */
+.qlchart-toolbar-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--qlchart-space-sm) var(--qlchart-space-lg);
+  border: none;
+  border-radius: var(--qlchart-radius-sm);
+  background: transparent;
+  color: var(--qlchart-toolbar-text);
+  font-size: var(--qlchart-text-base);
+  cursor: pointer;
+  white-space: nowrap;
+  min-width: 32px;
+  height: 28px;
+  transition: background var(--qlchart-transition), color var(--qlchart-transition);
+  position: relative;
+}
+
+/* hover — 微浮起（仅 background 变化，不做 translateY） */
+.qlchart-toolbar-btn:hover {
+  background: var(--qlchart-hover);
+}
+
+/* active — accent 高亮 */
+.qlchart-toolbar-btn.active {
+  background: var(--qlchart-active);
+  color: var(--qlchart-accent);
+  font-weight: 600;
+}
+
+/* disabled */
+.qlchart-toolbar-btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+/* K线类型下拉选择器 */
+.qlchart-kline-type-selector {
+  position: relative;
+}
+
+/* 下拉框通过 Portal 渲染到 document.body，使用 fixed 定位 */
+/* top/left/z-index 由 JS inline style 控制 */
+.qlchart-kline-type-dropdown {
+  position: fixed;
+  min-width: 160px;
+  background: var(--qlchart-toolbar-bg);
+  border: 1px solid var(--qlchart-border);
+  border-radius: var(--qlchart-radius-md);
+  box-shadow: var(--qlchart-shadow-md);
+  padding: var(--qlchart-space-sm) 0;
+  max-height: 360px;
+  overflow-y: auto;
+  animation: qlchart-dropdown-in var(--qlchart-transition-fast);
+}
+
+@keyframes qlchart-dropdown-in {
+  from { opacity: 0; transform: translateY(-4px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
+.qlchart-kline-type-group {
+  padding: var(--qlchart-space-xs) 0;
+}
+
+.qlchart-kline-type-group-label {
+  padding: var(--qlchart-space-sm) var(--qlchart-space-lg);
+  font-size: var(--qlchart-text-sm);
+  color: var(--qlchart-text-secondary);
+  font-weight: 600;
+  text-transform: uppercase;
+}
+
+.qlchart-kline-type-option {
+  display: flex;
+  align-items: center;
+  gap: var(--qlchart-space-md);
+  width: 100%;
+  padding: 6px var(--qlchart-space-lg);
+  background: none;
+  border: none;
+  color: var(--qlchart-text);
+  font-size: var(--qlchart-text-md);
+  cursor: pointer;
+  text-align: left;
+  transition: background var(--qlchart-transition);
+}
+
+.qlchart-kline-type-option:hover {
+  background: var(--qlchart-hover);
+}
+
+.qlchart-kline-type-option.active {
+  background: var(--qlchart-active);
+  color: var(--qlchart-accent);
+}
+
+.qlchart-kline-type-icon {
+  font-size: 14px;
+  width: 20px;
+  text-align: center;
+}

package/src/types/api.ts

@@ -0,0 +1,36 @@
+import type { CandlestickRawData } from './series.js';
+
+/** 图表API响应 */
+export interface ChartResponse<T = unknown> {
+  code: number;
+  data: T;
+  msg?: string;
+}
+
+/** 增强的数据获取结果（向后兼容旧 fetchFn 返回 {data: []}） */
+export interface ChartFetchResult {
+  /** K线数据 */
+  data: CandlestickRawData[];
+  /** 服务端是否有更早的历史数据 */
+  hasMoreHistory?: boolean;
+  /** 本次数据的时间范围 */
+  range?: { startTime: number; endTime: number };
+}
+
+/** 图表数据请求参数 */
+export interface ChartRequestParams {
+  pairId: string;
+  product: string;
+  period: string;
+  startTime?: number;
+  endTime?: number;
+  limit?: number;
+}
+
+/** 交易对信息 */
+export interface PairInfo {
+  pairId: string;
+  product: string;
+  name: string;
+  decimals: number;
+}

package/src/types/chart.ts

@@ -0,0 +1,44 @@
+import type { DeepPartial, Time } from 'lightweight-charts';
+import type { SeriesType } from './series.js';
+
+/** 布局模式：单图、水平双屏、垂直双屏、四分屏 */
+export type LayoutMode = '1' | '2h' | '2v' | '4';
+
+/** 十字光标数据 */
+export interface CrosshairData {
+  time: Time;
+  price: number;
+  volume?: number;
+}
+
+/** 面板配置 */
+export interface PanelConfig {
+  id: string;
+  pairId: string;
+  product: string;
+  period: string;
+  seriesType: SeriesType;
+  showToolbar: boolean;
+  weight?: number; // 面板权重，用于分配高度
+}
+
+/** 图表选项 */
+export interface ChartOptions {
+  width?: number;
+  height?: number;
+  layout?: {
+    background?: string;
+    textColor?: string;
+  };
+  grid?: {
+    vertLines?: { color?: string };
+    horzLines?: { color?: string };
+  };
+  crosshair?: {
+    mode?: 'normal' | 'magnet';
+  };
+  timeScale?: {
+    timeVisible?: boolean;
+    secondsVisible?: boolean;
+  };
+}

package/src/types/drawing.ts

@@ -0,0 +1,265 @@
+/** 绘图工具类型 - 映射到 lightweight-charts-drawing 的 tool type strings */
+export type DrawingToolType =
+  | 'cursor'
+  // P0 必须工具
+  | 'trend-line'
+  | 'horizontal-line'
+  | 'vertical-line'
+  | 'ray'
+  | 'rectangle'
+  | 'fib-retracement'
+  | 'path'
+  // P1 重要工具
+  | 'parallel-channel'
+  | 'circle'
+  | 'ellipse'
+  | 'triangle'
+  | 'fib-extension'
+  | 'arrow'
+  | 'brush'
+  // P2 扩展工具
+  | 'cross-line'
+  | 'callout'
+  | 'long-position'
+  | 'short-position'
+  | 'fib-fan'
+  // 新增工具
+  | 'date-price-range'
+  | 'fib-circles'
+  | 'fib-time-zone'
+  | 'rotated-rectangle'
+  // 形态工具
+  | 'pattern-abcd'
+  | 'pattern-xabcd'
+  | 'pattern-head-shoulders'
+  | 'pattern-triangle'
+  | 'pattern-cypher'
+  // ★ 新增：线条扩展
+  | 'info-line'
+  | 'extended-line'
+  | 'trend-angle'
+  | 'horizontal-ray'
+  // ★ 新增：通道扩展
+  | 'regression-trend'
+  | 'flat-top-bottom'
+  | 'disjoint-channel'
+  // ★ 新增：螺叉
+  | 'andrews-pitchfork'
+  | 'schiff-pitchfork'
+  | 'modified-schiff-pitchfork'
+  | 'inside-pitchfork'
+  // ★ 新增：斐波那契扩展
+  | 'fib-channel'
+  | 'fib-time-extension'
+  | 'fib-spiral'
+  | 'fib-arcs'
+  | 'fib-wedge'
+  | 'pitchfan'
+  // ★ 新增：江恩
+  | 'gann-box'
+  | 'gann-fan'
+  | 'gann-square-fixed'
+  | 'gann-square'
+  // ★ 新增：预测扩展
+  | 'forecast'
+  | 'bars-pattern'
+  | 'projection'
+  | 'price-range'
+  | 'date-range'
+  // ★ 新增：形状扩展
+  | 'polyline'
+  | 'curve'
+  | 'double-curve'
+  | 'arc'
+  | 'polygon'
+  // ★ 新增：标注
+  | 'text'
+  | 'text-annotation'
+  | 'anchored-text'
+  | 'note'
+  | 'price-note'
+  | 'price-label'
+  | 'flag-mark'
+  | 'pin'
+  | 'comment'
+  | 'signpost'
+  | 'table'
+  | 'highlighter'
+  | 'arrow-marker'
+  | 'arrow-mark-up'
+  | 'arrow-mark-down'
+  // ★ 新增：VP
+  | 'volume-profile'
+
+/** 绘图工具分类 */
+export enum DrawingToolCategory {
+  Lines = 'line',
+  Channels = 'channel',
+  Fibonacci = 'fibonacci',
+  Shapes = 'shape',
+  Annotations = 'annotation',
+  Positions = 'trading',
+  Measure = 'measurement',
+  Patterns = 'pattern',
+  VolumeProfile = 'volume-profile',
+}
+
+/** 绘图工具配置 */
+export interface DrawingToolConfig {
+  type: DrawingToolType
+  label: string
+  icon: string
+  category: DrawingToolCategory
+  anchorCount: number
+  priority: number // 0=P0必须, 1=P1重要, 2=P2扩展
+}
+
+/** 绘图样式（与库的 DrawingStyle 对齐） */
+export interface DrawingStyleConfig {
+  lineColor: string
+  lineWidth: number
+  lineDash?: number[]
+  fillColor?: string
+  fillOpacity?: number
+  showLabels?: boolean
+  labelFont?: string
+  labelColor?: string
+  /** 附加文字标签 */
+  text?: string
+  /** 线条样式名称 */
+  lineStyle?: string
+  /** 斐波那契比例线 */
+  fibRatios?: string
+  /** ★ Req3：斐波那契级别（序列化为 JSON 字符串便于存储） */
+  fibLevels?: string
+}
+
+/** 绘图持久化数据 */
+export interface DrawingPersistData {
+  id: string
+  chartId: string
+  type: string
+  anchors: Array<{ time: number; price: number }>
+  style: DrawingStyleConfig
+  options: {
+    visible?: boolean
+    locked?: boolean
+    zIndex?: number
+    extendLeft?: boolean
+    extendRight?: boolean
+  }
+  createdAt: number
+  updatedAt: number
+  /** ★ V2 新增：所属 pane index（0=主图） */
+  paneIndex?: number
+}
+
+// ═════════════════════════════════════════════════════════
+// 绘图工具属性模板系统（v2新架构）
+// ═════════════════════════════════════════════════════════
+
+/** 属性字段类型 */
+export type PropertyFieldType = 'color' | 'range' | 'toggle' | 'select' | 'text' | 'multiselect' | 'fib-levels'
+
+/** 属性字段定义 */
+export interface PropertyField {
+  /** 字段key */
+  key: string
+  /** 显示标签 */
+  label: string
+  /** 字段类型 */
+  type: PropertyFieldType
+  /** 默认值 */
+  default: string | number | boolean
+  /** range类型的min */
+  min?: number
+  /** range类型的max */
+  max?: number
+  /** range类型的step */
+  step?: number
+  /** select类型的选项 */
+  options?: Array<{ label: string; value: string }>
+  /** ★ Req3：斐波那契默认级别（仅 type='fib-levels' 时有效） */
+  fibLevels?: FibLevelItem[]
+}
+
+/** ★ Req3：斐波那契级别项 */
+export interface FibLevelItem {
+  /** 比例值，如 0.618 */
+  value: number
+  /** 显示标签，如 "61.8%" */
+  label: string
+  /** 是否显示此级别 */
+  visible: boolean
+}
+
+/** 绘图工具属性模板 */
+export interface DrawingToolProperties {
+  /** 工具类型 */
+  toolType: DrawingToolType
+  /** 属性字段列表 */
+  fields: PropertyField[]
+}
+
+/** 预定义的通用属性字段工厂函数 */
+export const COMMON_FIELDS = {
+  lineColor: (color = '#2962FF'): PropertyField => ({
+    key: 'lineColor', label: '线条颜色', type: 'color', default: color,
+  }),
+  lineWidth: (width = 2): PropertyField => ({
+    key: 'lineWidth', label: '线宽', type: 'range', default: width, min: 1, max: 5, step: 1,
+  }),
+  lineStyle: (): PropertyField => ({
+    key: 'lineStyle', label: '线条样式', type: 'select', default: 'solid',
+    options: [
+      { label: '实线', value: 'solid' },
+      { label: '虚线', value: 'dashed' },
+      { label: '点线', value: 'dotted' },
+      { label: '点划线', value: 'dash-dot' },
+      { label: '长虚线', value: 'long-dash' },
+    ],
+  }),
+  fillColor: (color = '#2962FF'): PropertyField => ({
+    key: 'fillColor', label: '填充颜色', type: 'color', default: color,
+  }),
+  fillOpacity: (opacity = 0.2): PropertyField => ({
+    key: 'fillOpacity', label: '填充透明度', type: 'range', default: opacity, min: 0, max: 1, step: 0.1,
+  }),
+  showLabels: (): PropertyField => ({
+    key: 'showLabels', label: '显示标签', type: 'toggle', default: true,
+  }),
+  labelColor: (color = '#FFFFFF'): PropertyField => ({
+    key: 'labelColor', label: '标签颜色', type: 'color', default: color,
+  }),
+  extendLeft: (): PropertyField => ({
+    key: 'extendLeft', label: '向左延伸', type: 'toggle', default: false,
+  }),
+  extendRight: (): PropertyField => ({
+    key: 'extendRight', label: '向右延伸', type: 'toggle', default: false,
+  }),
+  text: (defaultText = ''): PropertyField => ({
+    key: 'text', label: '文字', type: 'text', default: defaultText,
+  }),
+  fibRatios: (): PropertyField => ({
+    key: 'fibRatios', label: '比例线', type: 'multiselect', default: '0,0.382,0.5,0.618,0.786,1,1.272,1.618,2.618',
+  }),
+  /** ★ Req3：斐波那契级别编辑器字段 */
+  fibLevels: (levels?: FibLevelItem[]): PropertyField => ({
+    key: 'fibLevels',
+    label: '斐波那契级别',
+    type: 'fib-levels' as PropertyFieldType,
+    default: '',
+    fibLevels: levels ?? [
+      { value: 0,       label: '0%',      visible: true },
+      { value: 0.236,   label: '23.6%',   visible: false },
+      { value: 0.382,   label: '38.2%',   visible: true },
+      { value: 0.5,     label: '50%',     visible: true },
+      { value: 0.618,   label: '61.8%',   visible: true },
+      { value: 0.786,   label: '78.6%',   visible: true },
+      { value: 1,       label: '100%',    visible: true },
+      { value: 1.272,   label: '127.2%',  visible: false },
+      { value: 1.618,   label: '161.8%',  visible: true },
+      { value: 2.618,   label: '261.8%',  visible: false },
+    ],
+  }),
+}

package/src/types/index.ts

@@ -0,0 +1,40 @@
+export type { ChartOptions, LayoutMode, CrosshairData, PanelConfig } from './chart.js';
+export { SeriesType } from './series.js';
+export type {
+  CandlestickRawData,
+  CandlestickData,
+  HistogramData,
+  LineData,
+  IndicatorRawData,
+} from './series.js';
+export type { ThemeConfig, ThemePreset, ChartThemeOptions } from './theme.js';
+export type { ChartResponse, ChartRequestParams, PairInfo, ChartFetchResult } from './api.js';
+
+// Drawing types
+export { DrawingToolCategory } from './drawing.js';
+export type {
+  DrawingToolType,
+  DrawingToolConfig,
+  DrawingStyleConfig,
+  DrawingPersistData,
+  PropertyField,
+  PropertyFieldType,
+  FibLevelItem,
+} from './drawing.js';
+
+// Indicator types
+export { IndicatorType, BUILTIN_INDICATORS } from './indicator.js';
+export type {
+  IndicatorParamDef,
+  IndicatorConfig,
+  IndicatorDataResponse,
+  IndicatorDataPoint,
+  IndicatorDefinition,
+  IndicatorSearchQuery,
+  IndicatorRenderSpec,
+  IndicatorLineSpec,
+  ChartDataWithIndicators,
+  IndicatorListResponse,
+  IndicatorTemplate,
+  ActiveIndicatorConfig,
+} from './indicator.js';