@quantlife/qlchart 0.0.1

package/src/plugins/drawing/DrawingPersistence.ts

@@ -0,0 +1,273 @@
+import type { DrawingPersistData } from '../../types/drawing.js';
+
+/** 存储Key前缀 */
+const STORAGE_PREFIX = 'qlchart_dw_';
+/** 存储数据版本（兼容未来格式变更） */
+const STORAGE_VERSION = 1;
+/** 自动保存debounce时间(ms) */
+const AUTO_SAVE_DELAY = 300;
+/** localStorage容量警告阈值(4MB) */
+const STORAGE_WARN_SIZE = 4 * 1024 * 1024;
+
+/** 存储数据包装 */
+interface StorageEnvelope {
+  version: number;
+  drawings: DrawingPersistData[];
+  updatedAt: number;
+}
+
+/** 持久化配置 */
+export interface PersistenceConfig {
+  /** 交易对ID（核心标识） */
+  pairId: string;
+  /** 产品类型 */
+  product: string;
+  /** 周期（保留用于UI层，不参与持久化key） */
+  period?: string;
+  /** 图表实例ID（保留用于内部标识，不参与持久化key） */
+  chartId?: string;
+  /** API基础URL，有值则使用远程模式 */
+  apiBaseUrl?: string;
+}
+
+/** 持久化管理器 */
+export class DrawingPersistence {
+  private storageKey: string;
+  private pairId: string;
+  private product: string;
+  private mode: 'local' | 'remote';
+  private apiBaseUrl?: string;
+  private debounceTimer: ReturnType<typeof setTimeout> | null = null;
+
+  constructor(config: PersistenceConfig) {
+    this.pairId = config.pairId;
+    this.product = config.product;
+    this.mode = config.apiBaseUrl ? 'remote' : 'local';
+    this.apiBaseUrl = config.apiBaseUrl;
+    this.storageKey = this.buildKey(config);
+  }
+
+  /** 保存画图数据 */
+  async save(drawings: DrawingPersistData[]): Promise<void> {
+    if (this.mode === 'local') {
+      await this.localSave(drawings);
+    } else {
+      await this.remoteSave(drawings);
+    }
+  }
+
+  /** 加载画图数据 */
+  async load(): Promise<DrawingPersistData[]> {
+    if (this.mode === 'local') {
+      return this.localLoad();
+    } else {
+      return this.remoteLoad();
+    }
+  }
+
+  /** 删除指定画图 */
+  async remove(id: string): Promise<void> {
+    if (this.mode === 'local') {
+      await this.localRemove(id);
+    } else {
+      await this.remoteRemove(id);
+    }
+  }
+
+  /** 更新单条绘图（增量更新） */
+  async update(drawing: DrawingPersistData): Promise<void> {
+    if (this.mode === 'local') {
+      // local模式下通过load→修改→save实现
+      const drawings = await this.localLoad();
+      const idx = drawings.findIndex(d => d.id === drawing.id);
+      if (idx >= 0) {
+        drawings[idx] = drawing;
+        await this.localSave(drawings);
+      }
+    } else {
+      await this.remoteUpdate(drawing);
+    }
+  }
+
+  /** 清空所有画图 */
+  async clear(): Promise<void> {
+    if (this.mode === 'local') {
+      await this.localClear();
+    } else {
+      await this.remoteClear();
+    }
+  }
+
+  /** 导出为JSON字符串（备份用） */
+  exportJSON(drawings: DrawingPersistData[]): string {
+    const envelope: StorageEnvelope = {
+      version: STORAGE_VERSION,
+      drawings,
+      updatedAt: Date.now(),
+    };
+    return JSON.stringify(envelope, null, 2);
+  }
+
+  /** 从JSON字符串导入 */
+  async importJSON(json: string): Promise<void> {
+    try {
+      const envelope: StorageEnvelope = JSON.parse(json);
+      if (envelope.version !== STORAGE_VERSION) {
+        throw new Error(`Unsupported storage version: ${envelope.version}`);
+      }
+      await this.save(envelope.drawings ?? []);
+    } catch (err) {
+      console.error('[QLChart] Failed to import drawings:', err);
+      throw err;
+    }
+  }
+
+  /** 自动保存（debounce） */
+  autoSave(drawings: DrawingPersistData[]): void {
+    if (this.debounceTimer) clearTimeout(this.debounceTimer);
+    this.debounceTimer = setTimeout(() => {
+      this.save(drawings);
+    }, AUTO_SAVE_DELAY);
+  }
+
+  /** 销毁 */
+  dispose(): void {
+    if (this.debounceTimer) {
+      clearTimeout(this.debounceTimer);
+      this.debounceTimer = null;
+    }
+  }
+
+  // ── Private ──
+
+  /** 构建存储Key（仅使用 pairId + product，移除 chartId 和 period） */
+  private buildKey(config: PersistenceConfig): string {
+    const raw = `${config.pairId}_${config.product}`;
+    const hash = this.simpleHash(raw);
+    return `${STORAGE_PREFIX}${hash}`;
+  }
+
+  /** 简单hash函数 */
+  private 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);
+  }
+
+  // ── Local Storage ──
+
+  private async localSave(drawings: DrawingPersistData[]): Promise<void> {
+    const envelope: StorageEnvelope = {
+      version: STORAGE_VERSION,
+      drawings,
+      updatedAt: Date.now(),
+    };
+    const json = JSON.stringify(envelope);
+    localStorage.setItem(this.storageKey, json);
+    this.checkStorageSize();
+  }
+
+  private async localLoad(): Promise<DrawingPersistData[]> {
+    const json = localStorage.getItem(this.storageKey);
+    if (!json) return [];
+    try {
+      const envelope: StorageEnvelope = JSON.parse(json);
+      if (envelope.version !== STORAGE_VERSION) {
+        return [];
+      }
+      return envelope.drawings ?? [];
+    } catch {
+      return [];
+    }
+  }
+
+  private async localRemove(id: string): Promise<void> {
+    const drawings = await this.localLoad();
+    const filtered = drawings.filter(d => d.id !== id);
+    await this.localSave(filtered);
+  }
+
+  private async localClear(): Promise<void> {
+    localStorage.removeItem(this.storageKey);
+  }
+
+  /** 检查localStorage容量 */
+  private checkStorageSize(): void {
+    let totalSize = 0;
+    for (let i = 0; i < localStorage.length; i++) {
+      const key = localStorage.key(i);
+      if (key?.startsWith(STORAGE_PREFIX)) {
+        totalSize += (localStorage.getItem(key) ?? '').length;
+      }
+    }
+    if (totalSize > STORAGE_WARN_SIZE) {
+      console.warn(
+        `[QLChart] Drawing storage size: ${(totalSize / 1024 / 1024).toFixed(1)}MB, ` +
+        `approaching localStorage limit. Consider exporting old drawings.`
+      );
+    }
+  }
+
+  // ── Remote Storage (RESTful API) ──
+
+  /** 批量保存（全量覆盖） */
+  private async remoteSave(drawings: DrawingPersistData[]): Promise<void> {
+    await fetch(`${this.apiBaseUrl}/api/chart/drawing/save`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        pair_id: this.pairId,
+        product: this.product,
+        drawings: drawings,
+      }),
+    });
+  }
+
+  /** 按交易对加载全部绘图 */
+  private async remoteLoad(): Promise<DrawingPersistData[]> {
+    const res = await fetch(
+      `${this.apiBaseUrl}/api/chart/drawing/list?pair_id=${this.pairId}&product=${this.product}`,
+      { method: 'GET' },
+    );
+    const json = await res.json();
+    return json.data ?? [];
+  }
+
+  /** 删除单条绘图 */
+  private async remoteRemove(id: string): Promise<void> {
+    await fetch(`${this.apiBaseUrl}/api/chart/drawing/delete`, {
+      method: 'DELETE',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ id }),
+    });
+  }
+
+  /** 更新单条绘图（增量更新） */
+  private async remoteUpdate(drawing: DrawingPersistData): Promise<void> {
+    await fetch(`${this.apiBaseUrl}/api/chart/drawing/update`, {
+      method: 'PUT',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(drawing),
+    });
+  }
+
+  /** 清空指定交易对的所有绘图 */
+  private async remoteClear(): Promise<void> {
+    await fetch(`${this.apiBaseUrl}/api/chart/drawing/clear`, {
+      method: 'DELETE',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        pair_id: this.pairId,
+        product: this.product,
+      }),
+    });
+  }
+}
+
+// 导出常量供 migration.ts 使用
+export { STORAGE_PREFIX, STORAGE_VERSION };
+export type { StorageEnvelope };

package/src/plugins/drawing/DrawingPropertyTemplates.ts

@@ -0,0 +1,327 @@
+import { COMMON_FIELDS, type DrawingToolProperties, type DrawingToolType } from '../../types/drawing.js';
+
+/**
+ * 按工具类型定义属性模板
+ * 每种绘图工具有不同的可修改属性
+ */
+export const DRAWING_PROPERTY_TEMPLATES: Record<string, DrawingToolProperties> = {
+  // ── 线条类 ──
+  'trend-line': {
+    toolType: 'trend-line' as DrawingToolType,
+    fields: [
+      COMMON_FIELDS.lineColor(),
+      COMMON_FIELDS.lineWidth(),
+      COMMON_FIELDS.lineStyle(),
+      COMMON_FIELDS.extendLeft(),
+      COMMON_FIELDS.extendRight(),
+      COMMON_FIELDS.showLabels(),
+      COMMON_FIELDS.text(),
+    ],
+  },
+  'horizontal-line': {
+    toolType: 'horizontal-line' as DrawingToolType,
+    fields: [
+      COMMON_FIELDS.lineColor(),
+      COMMON_FIELDS.lineWidth(),
+      COMMON_FIELDS.lineStyle(),
+      COMMON_FIELDS.showLabels(),
+    ],
+  },
+  'vertical-line': {
+    toolType: 'vertical-line' as DrawingToolType,
+    fields: [
+      COMMON_FIELDS.lineColor(),
+      COMMON_FIELDS.lineWidth(),
+      COMMON_FIELDS.lineStyle(),
+    ],
+  },
+  'ray': {
+    toolType: 'ray' as DrawingToolType,
+    fields: [
+      COMMON_FIELDS.lineColor(),
+      COMMON_FIELDS.lineWidth(),
+      COMMON_FIELDS.lineStyle(),
+      COMMON_FIELDS.showLabels(),
+    ],
+  },
+  'cross-line': {
+    toolType: 'cross-line' as DrawingToolType,
+    fields: [
+      COMMON_FIELDS.lineColor(),
+      COMMON_FIELDS.lineWidth(),
+    ],
+  },
+
+  // ── 形状类（有填充） ──
+  'rectangle': {
+    toolType: 'rectangle' as DrawingToolType,
+    fields: [
+      COMMON_FIELDS.lineColor(),
+      COMMON_FIELDS.lineWidth(),
+      COMMON_FIELDS.fillColor(),
+      COMMON_FIELDS.fillOpacity(),
+      COMMON_FIELDS.showLabels(),
+    ],
+  },
+  'circle': {
+    toolType: 'circle' as DrawingToolType,
+    fields: [
+      COMMON_FIELDS.lineColor(),
+      COMMON_FIELDS.lineWidth(),
+      COMMON_FIELDS.fillColor(),
+      COMMON_FIELDS.fillOpacity(),
+    ],
+  },
+  'ellipse': {
+    toolType: 'ellipse' as DrawingToolType,
+    fields: [
+      COMMON_FIELDS.lineColor(),
+      COMMON_FIELDS.lineWidth(),
+      COMMON_FIELDS.fillColor(),
+      COMMON_FIELDS.fillOpacity(),
+    ],
+  },
+  'triangle': {
+    toolType: 'triangle' as DrawingToolType,
+    fields: [
+      COMMON_FIELDS.lineColor(),
+      COMMON_FIELDS.lineWidth(),
+      COMMON_FIELDS.fillColor(),
+      COMMON_FIELDS.fillOpacity(),
+    ],
+  },
+
+  // ── 通道类 ──
+  'parallel-channel': {
+    toolType: 'parallel-channel' as DrawingToolType,
+    fields: [
+      COMMON_FIELDS.lineColor(),
+      COMMON_FIELDS.lineWidth(),
+      COMMON_FIELDS.fillColor(),
+      COMMON_FIELDS.fillOpacity(),
+      COMMON_FIELDS.showLabels(),
+    ],
+  },
+
+  // ── 斐波那契类 ──
+  'fib-retracement': {
+    toolType: 'fib-retracement' as DrawingToolType,
+    fields: [
+      COMMON_FIELDS.lineColor(),
+      COMMON_FIELDS.lineWidth(),
+      COMMON_FIELDS.fillColor(),
+      COMMON_FIELDS.fillOpacity(0.1),
+      COMMON_FIELDS.showLabels(),
+      COMMON_FIELDS.labelColor(),
+      COMMON_FIELDS.fibLevels(),  // ★ Req3
+    ],
+  },
+  'fib-extension': {
+    toolType: 'fib-extension' as DrawingToolType,
+    fields: [
+      COMMON_FIELDS.lineColor(),
+      COMMON_FIELDS.lineWidth(),
+      COMMON_FIELDS.fillOpacity(0.1),
+      COMMON_FIELDS.showLabels(),
+      COMMON_FIELDS.labelColor(),
+      COMMON_FIELDS.fibLevels(),  // ★ Req3
+    ],
+  },
+  'fib-fan': {
+    toolType: 'fib-fan' as DrawingToolType,
+    fields: [
+      COMMON_FIELDS.lineColor(),
+      COMMON_FIELDS.lineWidth(),
+      COMMON_FIELDS.showLabels(),
+      COMMON_FIELDS.fibLevels([   // ★ Req3，扇形使用速度比率
+        { value: 0.382, label: '38.2%', visible: true },
+        { value: 0.5,   label: '50%',   visible: true },
+        { value: 0.618, label: '61.8%', visible: true },
+        { value: 1,     label: '100%',  visible: true },
+        { value: 1.618, label: '161.8%', visible: true },
+      ]),
+    ],
+  },
+
+  // ── 标注类 ──
+  'path': {
+    toolType: 'path' as DrawingToolType,
+    fields: [
+      COMMON_FIELDS.lineColor(),
+      COMMON_FIELDS.lineWidth(),
+      COMMON_FIELDS.lineStyle(),
+    ],
+  },
+  'brush': {
+    toolType: 'brush' as DrawingToolType,
+    fields: [
+      COMMON_FIELDS.lineColor(),
+      COMMON_FIELDS.lineWidth(),
+    ],
+  },
+  'arrow': {
+    toolType: 'arrow' as DrawingToolType,
+    fields: [
+      COMMON_FIELDS.lineColor(),
+      COMMON_FIELDS.lineWidth(),
+      COMMON_FIELDS.showLabels(),
+    ],
+  },
+  'callout': {
+    toolType: 'callout' as DrawingToolType,
+    fields: [
+      COMMON_FIELDS.lineColor(),
+      COMMON_FIELDS.lineWidth(),
+      COMMON_FIELDS.fillColor(),
+      COMMON_FIELDS.fillOpacity(),
+      COMMON_FIELDS.text(),
+      COMMON_FIELDS.labelColor(),
+    ],
+  },
+
+  // ── 仓位类 ──
+  'long-position': {
+    toolType: 'long-position' as DrawingToolType,
+    fields: [
+      COMMON_FIELDS.lineColor('#26a69a'),
+      COMMON_FIELDS.lineWidth(),
+      COMMON_FIELDS.fillColor('#26a69a'),
+      COMMON_FIELDS.fillOpacity(0.15),
+      COMMON_FIELDS.showLabels(),
+    ],
+  },
+  'short-position': {
+    toolType: 'short-position' as DrawingToolType,
+    fields: [
+      COMMON_FIELDS.lineColor('#ef5350'),
+      COMMON_FIELDS.lineWidth(),
+      COMMON_FIELDS.fillColor('#ef5350'),
+      COMMON_FIELDS.fillOpacity(0.15),
+      COMMON_FIELDS.showLabels(),
+    ],
+  },
+  // ── 新增工具属性模板 ──
+  'date-price-range': {
+    toolType: 'date-price-range' as DrawingToolType,
+    fields: [
+      COMMON_FIELDS.lineColor(),
+      COMMON_FIELDS.lineWidth(),
+      COMMON_FIELDS.fillColor(),
+      COMMON_FIELDS.fillOpacity(0.1),
+      COMMON_FIELDS.showLabels(),
+      COMMON_FIELDS.labelColor(),
+    ],
+  },
+  'fib-circles': {
+    toolType: 'fib-circles' as DrawingToolType,
+    fields: [
+      COMMON_FIELDS.lineColor(),
+      COMMON_FIELDS.lineWidth(),
+      COMMON_FIELDS.fillOpacity(0.1),
+      COMMON_FIELDS.showLabels(),
+      COMMON_FIELDS.labelColor(),
+      COMMON_FIELDS.fibLevels(),  // ★ Req3：替换原有的 fibRatios()
+    ],
+  },
+  'fib-time-zone': {
+    toolType: 'fib-time-zone' as DrawingToolType,
+    fields: [
+      COMMON_FIELDS.lineColor(),
+      COMMON_FIELDS.lineWidth(),
+      COMMON_FIELDS.fillOpacity(0.1),
+      COMMON_FIELDS.showLabels(),
+      COMMON_FIELDS.labelColor(),
+      COMMON_FIELDS.fibLevels([   // ★ Req3，时区使用斐波那契数列
+        { value: 1, label: '1',  visible: true },
+        { value: 2, label: '2',  visible: true },
+        { value: 3, label: '3',  visible: true },
+        { value: 5, label: '5',  visible: true },
+        { value: 8, label: '8',  visible: true },
+        { value: 13, label: '13', visible: true },
+        { value: 21, label: '21', visible: true },
+        { value: 34, label: '34', visible: false },
+        { value: 55, label: '55', visible: false },
+        { value: 89, label: '89', visible: false },
+      ]),
+    ],
+  },
+  'rotated-rectangle': {
+    toolType: 'rotated-rectangle' as DrawingToolType,
+    fields: [
+      COMMON_FIELDS.lineColor(),
+      COMMON_FIELDS.lineWidth(),
+      COMMON_FIELDS.fillColor(),
+      COMMON_FIELDS.fillOpacity(),
+    ],
+  },
+  // ── 形态工具属性模板 ──
+  'pattern-abcd': {
+    toolType: 'pattern-abcd' as DrawingToolType,
+    fields: [
+      COMMON_FIELDS.lineColor(),
+      COMMON_FIELDS.lineWidth(),
+      COMMON_FIELDS.showLabels(),
+      COMMON_FIELDS.labelColor(),
+    ],
+  },
+  'pattern-xabcd': {
+    toolType: 'pattern-xabcd' as DrawingToolType,
+    fields: [
+      COMMON_FIELDS.lineColor(),
+      COMMON_FIELDS.lineWidth(),
+      COMMON_FIELDS.fillOpacity(0.1),
+      COMMON_FIELDS.showLabels(),
+      COMMON_FIELDS.labelColor(),
+    ],
+  },
+  'pattern-head-shoulders': {
+    toolType: 'pattern-head-shoulders' as DrawingToolType,
+    fields: [
+      COMMON_FIELDS.lineColor(),
+      COMMON_FIELDS.lineWidth(),
+      COMMON_FIELDS.fillColor(),
+      COMMON_FIELDS.fillOpacity(0.1),
+      COMMON_FIELDS.showLabels(),
+    ],
+  },
+  'pattern-triangle': {
+    toolType: 'pattern-triangle' as DrawingToolType,
+    fields: [
+      COMMON_FIELDS.lineColor(),
+      COMMON_FIELDS.lineWidth(),
+      COMMON_FIELDS.fillColor(),
+      COMMON_FIELDS.fillOpacity(),
+      COMMON_FIELDS.showLabels(),
+    ],
+  },
+  'pattern-cypher': {
+    toolType: 'pattern-cypher' as DrawingToolType,
+    fields: [
+      COMMON_FIELDS.lineColor(),
+      COMMON_FIELDS.lineWidth(),
+      COMMON_FIELDS.fillOpacity(0.1),
+      COMMON_FIELDS.showLabels(),
+      COMMON_FIELDS.labelColor(),
+    ],
+  },
+};
+
+/**
+ * 获取工具的属性模板
+ * 如果没有预定义模板，返回通用模板
+ */
+export function getPropertyTemplate(toolType: string): DrawingToolProperties {
+  const template = DRAWING_PROPERTY_TEMPLATES[toolType];
+  if (template) return template;
+
+  // 通用fallback
+  return {
+    toolType: toolType as DrawingToolType,
+    fields: [
+      COMMON_FIELDS.lineColor(),
+      COMMON_FIELDS.lineWidth(),
+      COMMON_FIELDS.fillColor(),
+      COMMON_FIELDS.fillOpacity(),
+    ],
+  };
+}