@quantlife/qlchart 0.0.1

package/src/plugins/drawing/TextLabelOverlay.ts

@@ -0,0 +1,101 @@
+/**
+ * 绘图文字标签覆盖层（Bug4修复）
+ * 在图表 Canvas 上方叠加 DOM 层，显示用户自定义文字标注
+ */
+export class TextLabelOverlay {
+  private container: HTMLElement | null = null;
+  private layer: HTMLDivElement | null = null;
+  private labels: Map<string, { text: string; x: number; y: number }> = new Map();
+
+  attach(container: HTMLElement): void {
+    this.container = container;
+
+    // 创建 overlay 层
+    const layer = document.createElement('div');
+    layer.className = 'qlchart-text-label-overlay';
+    layer.style.cssText = `
+      position: absolute;
+      top: 0; left: 0;
+      width: 100%; height: 100%;
+      pointer-events: none;
+      z-index: 10;
+    `;
+    container.appendChild(layer);
+    this.layer = layer;
+  }
+
+  detach(): void {
+    this.layer?.remove();
+    this.layer = null;
+    this.container = null;
+    this.labels.clear();
+  }
+
+  /**
+   * 设置某个绘图的文字标签
+   */
+  setLabel(drawingId: string, text: string, x: number, y: number): void {
+    if (!this.layer) return;
+
+    if (!text) {
+      this.removeLabel(drawingId);
+      return;
+    }
+
+    let el = this.layer.querySelector<HTMLDivElement>(
+      `[data-drawing-id="${drawingId}"]`,
+    );
+
+    if (!el) {
+      el = document.createElement('div');
+      el.className = 'qlchart-text-label';
+      el.dataset.drawingId = drawingId;
+      el.style.cssText = `
+        position: absolute;
+        padding: 2px 6px;
+        background: rgba(41, 98, 255, 0.9);
+        color: #fff;
+        font-size: 11px;
+        border-radius: 3px;
+        pointer-events: auto;
+        cursor: pointer;
+        white-space: nowrap;
+      `;
+      this.layer.appendChild(el);
+    }
+
+    el.textContent = text;
+    el.style.left = `${x + 8}px`;
+    el.style.top = `${y - 10}px`;
+    this.labels.set(drawingId, { text, x, y });
+  }
+
+  removeLabel(drawingId: string): void {
+    this.layer?.querySelector(`[data-drawing-id="${drawingId}"]`)?.remove();
+    this.labels.delete(drawingId);
+  }
+
+  getLabel(drawingId: string): string | undefined {
+    return this.labels.get(drawingId)?.text;
+  }
+
+  /** 更新所有标签位置（图表滚动/缩放后调用） */
+  updatePositions(
+    getDrawingPixel: (id: string) => { x: number; y: number } | null,
+  ): void {
+    for (const [id, label] of this.labels) {
+      const pixel = getDrawingPixel(id);
+      if (pixel) {
+        const el = this.layer?.querySelector<HTMLDivElement>(
+          `[data-drawing-id="${id}"]`,
+        );
+        if (el) {
+          el.style.left = `${pixel.x + 8}px`;
+          el.style.top = `${pixel.y - 10}px`;
+        }
+        // Update stored position
+        this.labels.set(id, { ...label, x: pixel.x, y: pixel.y });
+      }
+    }
+  }
+}

package/src/plugins/drawing/colorUtils.ts

@@ -0,0 +1,53 @@
+/**
+ * 颜色工具函数
+ * 用于 hex/rgba 之间的转换（Bug5修复）
+ */
+
+/**
+ * 将 hex 颜色和透明度合成为 rgba 字符串
+ * 支持: hex (#rrggbb)、rgba (r,g,b,a)、rgb (r,g,b)
+ */
+export function composeRgbaColor(
+  fillColor: string,
+  fillOpacity: number,
+): string {
+  // 已是 rgba/rgb 格式 → 替换 alpha
+  const rgbaMatch = fillColor.match(
+    /rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(?:,\s*([\d.]+)\s*)?\)/,
+  );
+  if (rgbaMatch) {
+    const [, r, g, b] = rgbaMatch;
+    return `rgba(${r}, ${g}, ${b}, ${fillOpacity})`;
+  }
+
+  // hex 格式 → 转 rgba
+  const hexMatch = fillColor.match(/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i);
+  if (hexMatch) {
+    const r = parseInt(hexMatch[1], 16);
+    const g = parseInt(hexMatch[2], 16);
+    const b = parseInt(hexMatch[3], 16);
+    return `rgba(${r}, ${g}, ${b}, ${fillOpacity})`;
+  }
+
+  // 无法解析 → 原样返回
+  return fillColor;
+}
+
+/**
+ * 从 rgba 字符串中提取 alpha 值
+ */
+export function extractAlpha(color: string): number | null {
+  const match = color.match(/rgba?\([^,]+,[^,]+,[^,]+,\s*([\d.]+)\s*\)/);
+  return match ? parseFloat(match[1]) : null;
+}
+
+/**
+ * 从 rgba 字符串中提取 hex 颜色（用于 input[type=color] 回显）
+ */
+export function rgbaToHex(color: string): string {
+  const match = color.match(/rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/);
+  if (!match) return '#2962ff';
+  const [, r, g, b] = match;
+  const toHex = (n: string) => parseInt(n).toString(16).padStart(2, '0');
+  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+}

package/src/plugins/drawing/index.ts

@@ -0,0 +1,10 @@
+export { DrawingAdapter } from './DrawingAdapter.js';
+export {
+  DRAWING_TOOLS,
+  getToolsByCategory,
+  getToolsByPriority,
+  getToolConfig,
+  CATEGORY_LABELS,
+  mapToolTypeToLib,
+  mapLibTypeToOurs,
+} from './DrawingToolRegistry.js';

package/src/plugins/drawing/lineStyleMap.ts

@@ -0,0 +1,46 @@
+/**
+ * 线条样式 → dash 数组映射
+ * 用于将属性面板的 lineStyle 字符串转换为 LWC 的 lineDash 数组
+ */
+
+const LINE_STYLE_MAP: Record<string, number[]> = {
+  'solid': [],
+  'dashed': [6, 4],
+  'dotted': [2, 3],
+  'dash-dot': [6, 3, 2, 3],
+  'long-dash': [10, 4],
+};
+
+/** 将线条样式名称转换为 dash 数组 */
+export function lineStyleToDash(style: string): number[] {
+  return LINE_STYLE_MAP[style] ?? [];
+}
+
+/** dash → style 反向映射表 */
+const DASH_TO_STYLE: Array<{ dash: number[]; style: string }> = [
+  { dash: [], style: 'solid' },
+  { dash: [6, 4], style: 'dashed' },
+  { dash: [2, 3], style: 'dotted' },
+  { dash: [6, 3, 2, 3], style: 'dash-dot' },
+  { dash: [10, 4], style: 'long-dash' },
+];
+
+/** 从 dash 数组反推线条样式名称 */
+export function dashToLineStyle(dash?: number[]): string {
+  if (!dash || dash.length === 0) return 'solid';
+  const found = DASH_TO_STYLE.find(
+    (m) => m.dash.length === dash.length && m.dash.every((n, i) => n === dash[i]),
+  );
+  return found?.style ?? 'solid';
+}
+
+/** 获取所有可选线型 */
+export function getLineStyleOptions() {
+  return [
+    { label: '实线', value: 'solid' },
+    { label: '虚线', value: 'dashed' },
+    { label: '点线', value: 'dotted' },
+    { label: '点划线', value: 'dash-dot' },
+    { label: '长虚线', value: 'long-dash' },
+  ];
+}

package/src/plugins/drawing/migration.ts

@@ -0,0 +1,105 @@
+import type { DrawingPersistData } from '../../types/drawing.js';
+import { STORAGE_PREFIX, STORAGE_VERSION } from './DrawingPersistence.js';
+import type { StorageEnvelope } from './DrawingPersistence.js';
+
+/** 简单hash函数（与DrawingPersistence中一致） */
+function simpleHash(str: string): string {
+  let hash = 0;
+  for (let i = 0; i < str.length; i++) {
+    const char = str.charCodeAt(i);
+    hash = ((hash << 5) - hash) + char;
+    hash |= 0;
+  }
+  return Math.abs(hash).toString(36);
+}
+
+/** 从旧数据内容中推断product */
+function inferProductFromDrawings(drawings: DrawingPersistData[]): string | null {
+  // 旧版DrawingPersistData没有product字段
+  // 但chartId字段在旧版等于 pairId，可以用于分组
+  // product信息无法从数据中可靠获取，使用默认值
+  // 如果所有绘图的chartId一致，说明是同一交易对的数据
+  if (drawings.length === 0) return null;
+  // 默认使用 'digital' 作为product（量化系统主要场景）
+  // 用户可以后续手动调整
+  return 'digital';
+}
+
+/**
+ * 迁移旧版LocalStorage数据（含chartId+period的key → 新key）
+ *
+ * 迁移策略：
+ * 1. 扫描所有以 STORAGE_PREFIX 开头的 key
+ * 2. 从数据内容中提取 pairId 和 product 信息
+ * 3. 按 pairId+product 重新聚合，去重
+ * 4. 写入新格式 key
+ * 5. 删除旧 key
+ *
+ * 幂等设计：多次调用不会产生数据丢失
+ * 失败的旧数据保留不删
+ */
+export function migrateLegacyDrawings(): void {
+  const legacyKeys: string[] = [];
+  for (let i = 0; i < localStorage.length; i++) {
+    const key = localStorage.key(i);
+    if (key?.startsWith(STORAGE_PREFIX)) {
+      legacyKeys.push(key);
+    }
+  }
+
+  // 按交易对分组（解析旧数据，按 pairId+product 重新聚合）
+  const mergedByPair = new Map<string, DrawingPersistData[]>();
+
+  for (const oldKey of legacyKeys) {
+    const json = localStorage.getItem(oldKey);
+    if (!json) continue;
+    try {
+      const envelope: StorageEnvelope = JSON.parse(json);
+      if (!envelope.drawings?.length) continue;
+
+      // 从绘图数据中提取 pairId（drawing.chartId 在旧版等于 pairId）
+      const pairId = envelope.drawings[0]?.chartId;
+      if (!pairId) {
+        // 无法识别的旧数据，保留不动
+        continue;
+      }
+
+      // 尝试从数据内容中推断product
+      const product = inferProductFromDrawings(envelope.drawings);
+      if (!product) {
+        // 无法识别的旧数据，保留不删
+        continue;
+      }
+
+      const pairKey = `${pairId}_${product}`;
+      const existing = mergedByPair.get(pairKey) ?? [];
+      // 合并去重（按id）
+      const allIds = new Set(existing.map(d => d.id));
+      for (const d of envelope.drawings) {
+        if (!allIds.has(d.id)) {
+          existing.push(d);
+          allIds.add(d.id);
+        }
+      }
+      mergedByPair.set(pairKey, existing);
+
+      // 删除旧key
+      localStorage.removeItem(oldKey);
+    } catch {
+      // 解析失败，跳过
+    }
+  }
+
+  // 写入新格式
+  for (const [pairKey, drawings] of mergedByPair) {
+    const [pairId, product] = pairKey.split('_');
+    const hash = simpleHash(pairKey);
+    const newStorageKey = `${STORAGE_PREFIX}${hash}`;
+    const envelope: StorageEnvelope = {
+      version: STORAGE_VERSION,
+      drawings,
+      updatedAt: Date.now(),
+    };
+    localStorage.setItem(newStorageKey, JSON.stringify(envelope));
+  }
+}

package/src/plugins/drawing/patterns/PatternDefinitions.ts

@@ -0,0 +1,57 @@
+/**
+ * 图表形态工具 — 锚点定义与标签生成
+ *
+ * 形态工具底层使用 path 渲染，但带有预定义的锚点结构：
+ * - ABCD: A→B→C→D 四个点
+ * - XABCD: X→A→B→C→D 五个点
+ * - HeadShoulders: 左肩→头→右肩→颈线左→颈线右
+ * - Triangle: 三角形四个顶点
+ * - Cypher: X→A→B→C→D 带斐波那契比例
+ */
+
+export interface PatternDefinition {
+  /** 锚点标签 */
+  anchorLabels: string[];
+  /** 描述 */
+  description: string;
+  /** 形态类型 */
+  patternType: string;
+}
+
+export const PATTERN_DEFINITIONS: Record<string, PatternDefinition> = {
+  'pattern-abcd': {
+    patternType: 'ABCD',
+    anchorLabels: ['A', 'B', 'C', 'D'],
+    description: 'ABCD 谐波形态：AB驱动浪，BC回调（0.382-0.886），CD完成浪',
+  },
+  'pattern-xabcd': {
+    patternType: 'XABCD',
+    anchorLabels: ['X', 'A', 'B', 'C', 'D'],
+    description: 'XABCD 蝴蝶/蝙蝠/螃蟹形态：5点谐波结构',
+  },
+  'pattern-head-shoulders': {
+    patternType: 'HeadShoulders',
+    anchorLabels: ['左肩', '头', '右肩', '颈线左', '颈线右'],
+    description: '头肩顶/底反转形态：左右肩对称，头部为极值',
+  },
+  'pattern-triangle': {
+    patternType: 'Triangle',
+    anchorLabels: ['顶点1', '顶点2', '顶点3', '顶点4'],
+    description: '三角形整理形态：对称/上升/下降三角形',
+  },
+  'pattern-cypher': {
+    patternType: 'Cypher',
+    anchorLabels: ['X', 'A', 'B', 'C', 'D'],
+    description: '赛福形态：XA=XC，AB回调0.382-0.618，BC投影1.272-1.414',
+  },
+};
+
+/** 获取形态定义 */
+export function getPatternDefinition(type: string): PatternDefinition | undefined {
+  return PATTERN_DEFINITIONS[type];
+}
+
+/** 获取所有形态工具类型 */
+export function getAllPatternTypes(): string[] {
+  return Object.keys(PATTERN_DEFINITIONS);
+}

package/src/plugins/drawing/patterns/index.ts

@@ -0,0 +1,2 @@
+export { PATTERN_DEFINITIONS, getPatternDefinition, getAllPatternTypes } from './PatternDefinitions.js';
+export type { PatternDefinition } from './PatternDefinitions.js';

package/src/plugins/drawing/periodUtils.ts

@@ -0,0 +1,51 @@
+/**
+ * 周期换算工具函数（Bug1修复）
+ * 用于测量工具按 K 线周期换算 bars/时间
+ */
+
+/**
+ * 将周期字符串转换为秒数
+ * @param period 如 '1m', '5m', '15m', '1h', '4h', '1d', '1w'
+ */
+export function periodToSeconds(period: string): number {
+  const match = period.match(/^(\d+)([mhdwM])$/);
+  if (!match) return 3600; // 默认1小时
+  const [, num, unit] = match;
+  const n = parseInt(num, 10);
+  switch (unit) {
+    case 'm': return n * 60;
+    case 'h': return n * 3600;
+    case 'd': return n * 86400;
+    case 'w': return n * 604800;
+    case 'M': return n * 2592000; // 近似月
+    default: return 3600;
+  }
+}
+
+/**
+ * 根据周期和总秒数，计算 K 线根数和显示标签
+ */
+export function formatPeriodBars(
+  totalSeconds: number,
+  period: string,
+): { bars: number; label: string } {
+  const periodSec = periodToSeconds(period);
+  if (periodSec <= 0) return { bars: 0, label: '0' };
+
+  const bars = Math.round(totalSeconds / periodSec);
+  const periodNum = parseInt(period.match(/^(\d+)/)?.[1] ?? '1', 10);
+  const unit = period.match(/([mhdwM])$/)?.[1];
+
+  switch (unit) {
+    case 'm':
+      return { bars, label: `${bars * periodNum}分钟 (${bars}根)` };
+    case 'h':
+      return { bars, label: `${bars * periodNum}小时 (${bars}根)` };
+    case 'd':
+      return { bars, label: `${bars * periodNum}天 (${bars}根)` };
+    case 'w':
+      return { bars, label: `${bars * periodNum}周 (${bars}根)` };
+    default:
+      return { bars, label: `${bars}根K线` };
+  }
+}

package/src/plugins/indicators/AutoIndicatorRenderer.ts

@@ -0,0 +1,204 @@
+import type { IChartApi, ISeriesApi, UTCTimestamp } from 'lightweight-charts';
+import { LineSeries, HistogramSeries, AreaSeries } from 'lightweight-charts';
+import type { IndicatorRenderSpec } from '../../types/index.js';
+
+/**
+ * AutoIndicatorRenderer — 数据驱动的指标自动渲染引擎
+ *
+ * 根据 IndicatorRenderSpec 自动创建 / 更新 / 移除 series，
+ * 替代 IndicatorRenderer 中的 switch-case 硬编码。
+ *
+ * 支持的渲染类型：line / histogram / area
+ * 支持的位置：    overlay（主图叠加）/ pane（独立副图）
+ *
+ * 核心优势：后端新增指标只需在响应中附带 spec + data，
+ * 前端零改动即可自动渲染。
+ */
+export class AutoIndicatorRenderer {
+  private chart: IChartApi;
+  /** spec.key → 创建的 series 列表 */
+  private renderedSpecs = new Map<string, ISeriesApi<any>[]>();
+  /** spec.key → pane index（仅 placement='pane' 的指标有值） */
+  private paneIndices = new Map<string, number>();
+
+  constructor(chart: IChartApi) {
+    this.chart = chart;
+  }
+
+  /**
+   * 渲染一个指标
+   *
+   * @param spec   — 指标渲染描述（线条定义、位置等）
+   * @param data   — 指标数据数组
+   */
+  render(
+    spec: IndicatorRenderSpec,
+    data: Array<{ time: number; values: Record<string, number> }>,
+  ): void {
+    // 先移除旧的渲染（如果存在）
+    this.remove(spec.key);
+
+    const seriesList: ISeriesApi<any>[] = [];
+
+    // 分配 pane index：overlay 用主图(0)，pane 用递增 index
+    const paneIndex = spec.placement === 'pane' ? this.allocPane(spec.key) : 0;
+
+    for (const line of spec.lines) {
+      // 过滤出有对应字段的数据点
+      const lineData = data
+        .filter((d) => d.values[line.field] !== undefined)
+        .map((d) => ({
+          time: (d.time / 1000) as UTCTimestamp,
+          value: d.values[line.field],
+        }));
+
+      let series: ISeriesApi<any>;
+
+      switch (line.type) {
+        case 'line':
+          series = this.chart.addSeries(
+            LineSeries,
+            {
+              color: line.color,
+              lineWidth: (line.lineWidth ?? 1) as any,
+              priceLineVisible: false,
+              lastValueVisible: false,
+            },
+            paneIndex,
+          );
+          series.setData(lineData);
+          break;
+
+        case 'histogram': {
+          const positiveColor = line.positiveColor ?? line.color;
+          const negativeColor = line.negativeColor ?? '#ef5350';
+          series = this.chart.addSeries(
+            HistogramSeries,
+            {
+              color: line.color,
+              priceLineVisible: false,
+              lastValueVisible: false,
+            },
+            paneIndex,
+          );
+          // 柱状图：按正负值着色
+          const histData = lineData.map((d) => ({
+            ...d,
+            color: d.value >= 0 ? positiveColor : negativeColor,
+          }));
+          series.setData(histData);
+          break;
+        }
+
+        case 'area':
+          series = this.chart.addSeries(
+            AreaSeries,
+            {
+              lineColor: line.color,
+              topColor: line.color + '40',
+              bottomColor: line.color + '00',
+              lineWidth: (line.lineWidth ?? 1) as any,
+              priceLineVisible: false,
+              lastValueVisible: false,
+            },
+            paneIndex,
+          );
+          series.setData(lineData);
+          break;
+
+        default:
+          console.warn(`[AutoIndicatorRenderer] Unknown line type: ${line.type}, skipping`);
+          continue;
+      }
+
+      seriesList.push(series);
+    }
+
+    // 设置副图高度比例
+    if (spec.placement === 'pane' && spec.paneHeightRatio && paneIndex > 0) {
+      this.setPaneHeight(paneIndex, spec.paneHeightRatio);
+    }
+
+    this.renderedSpecs.set(spec.key, seriesList);
+  }
+
+  /**
+   * 移除一个指标的渲染
+   */
+  remove(key: string): void {
+    const seriesList = this.renderedSpecs.get(key);
+    if (!seriesList) return;
+
+    for (const series of seriesList) {
+      try {
+        this.chart.removeSeries(series);
+      } catch {
+        // series 可能已被 chart 销毁
+      }
+    }
+
+    this.renderedSpecs.delete(key);
+
+    // 清理 pane index
+    const paneIdx = this.paneIndices.get(key);
+    if (paneIdx !== undefined) {
+      this.paneIndices.delete(key);
+    }
+  }
+
+  /**
+   * 移除所有已渲染的指标
+   */
+  removeAll(): void {
+    for (const key of Array.from(this.renderedSpecs.keys())) {
+      this.remove(key);
+    }
+  }
+
+  /**
+   * 获取已渲染的指标 key 列表
+   */
+  getRenderedKeys(): string[] {
+    return Array.from(this.renderedSpecs.keys());
+  }
+
+  /**
+   * 检查指定 key 的指标是否已渲染
+   */
+  isRendered(key: string): boolean {
+    return this.renderedSpecs.has(key);
+  }
+
+  // ════════════════════════════════════════
+  //  内部方法
+  // ════════════════════════════════════════
+
+  /**
+   * 分配副图 pane index（递增策略）
+   */
+  private allocPane(key: string): number {
+    let maxPane = 0;
+    for (const idx of this.paneIndices.values()) {
+      if (idx > maxPane) maxPane = idx;
+    }
+    const newIdx = maxPane + 1;
+    this.paneIndices.set(key, newIdx);
+    return newIdx;
+  }
+
+  /**
+   * 设置 pane 高度比例
+   */
+  private setPaneHeight(paneIndex: number, ratio: number): void {
+    try {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const panes = (this.chart as any).panes?.();
+      if (panes && panes[paneIndex]) {
+        const mainHeight = panes[0]?.getHeight?.() ?? 300;
+        panes[paneIndex].setHeight?.(mainHeight * ratio);
+      }
+    } catch {
+      // LWC v5 pane API 可能不存在，静默失败
+    }
+  }
+}