@quantlife/qlchart 0.0.1

package/src/components/drawing/DrawingToolbar.tsx

@@ -0,0 +1,305 @@
+import { useState, useCallback, useMemo, useEffect, useRef } from 'react';
+import { createPortal } from 'react-dom';
+import {
+  DRAWING_TOOLS,
+  getToolsByCategory,
+  CATEGORY_LABELS,
+} from '../../plugins/drawing/DrawingToolRegistry.js';
+import { DrawingToolCategory } from '../../types/index.js';
+import type { DrawingToolType, DrawingToolConfig } from '../../types/index.js';
+import { useDrawingStore } from '../../store/useDrawingStore.js';
+import { useChartStore } from '../../store/useChartStore.js';
+import { usePanelRegistry } from '../../store/usePanelRegistry.js';
+
+/** 分类排序 */
+const CATEGORY_ORDER: DrawingToolCategory[] = [
+  DrawingToolCategory.Lines,
+  DrawingToolCategory.Channels,
+  DrawingToolCategory.Fibonacci,
+  DrawingToolCategory.Shapes,
+  DrawingToolCategory.Annotations,
+  DrawingToolCategory.Positions,
+  DrawingToolCategory.Measure,
+  DrawingToolCategory.Patterns,
+];
+
+export function DrawingToolbar() {
+  const activeTool = useDrawingStore((s) => s.activeTool);
+  const magnetEnabled = useDrawingStore((s) => s.magnetEnabled);
+  const expandedCategory = useDrawingStore((s) => s.expandedCategory);
+  const categoryActiveTools = useDrawingStore((s) => s.categoryActiveTools);
+  const drawingCount = useDrawingStore((s) => s.drawingCount);
+  const setActiveTool = useDrawingStore((s) => s.setActiveTool);
+  const setMagnetEnabled = useDrawingStore((s) => s.setMagnetEnabled);
+  const setExpandedCategory = useDrawingStore((s) => s.setExpandedCategory);
+  const setCategoryActiveTool = useDrawingStore((s) => s.setCategoryActiveTool);
+
+  // Bug2/功能1：从 store 获取工具栏拖拽状态
+  const toolbarOrientation = useDrawingStore((s) => s.toolbarOrientation);
+  const toolbarPosition = useDrawingStore((s) => s.toolbarPosition);
+  const isToolbarDragging = useDrawingStore((s) => s.isToolbarDragging);
+  const setToolbarOrientation = useDrawingStore((s) => s.setToolbarOrientation);
+  const setToolbarPosition = useDrawingStore((s) => s.setToolbarPosition);
+  const setIsToolbarDragging = useDrawingStore((s) => s.setIsToolbarDragging);
+  // ★ V2: 副图绘图 pane 指示器
+  const currentPaneIndex = useDrawingStore((s) => s.currentPaneIndex);
+
+  const activePanelId = useChartStore((s) => s.activePanelId);
+  const getHandle = usePanelRegistry((s) => s.getHandle);
+
+  const [allVisible, setAllVisible] = useState(true);
+
+  // 功能1：拖拽逻辑
+  const toolbarRef = useRef<HTMLDivElement>(null);
+  const dragStartRef = useRef<{ mouseX: number; mouseY: number; toolbarX: number; toolbarY: number } | null>(null);
+
+  const handleDragStart = useCallback((e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    const toolbar = toolbarRef.current;
+    const parent = toolbar?.parentElement;
+    if (!toolbar || !parent) return;
+
+    const toolbarRect = toolbar.getBoundingClientRect();
+    const parentRect = parent.getBoundingClientRect();
+    const currentPos = toolbarPosition ?? {
+      x: toolbarRect.left - parentRect.left,
+      y: toolbarRect.top - parentRect.top,
+    };
+
+    dragStartRef.current = {
+      mouseX: e.clientX, mouseY: e.clientY,
+      toolbarX: currentPos.x, toolbarY: currentPos.y,
+    };
+    setIsToolbarDragging(true);
+  }, [toolbarPosition, setIsToolbarDragging]);
+
+  useEffect(() => {
+    if (!isToolbarDragging) return;
+
+    const handleMouseMove = (e: MouseEvent) => {
+      const start = dragStartRef.current;
+      if (!start) return;
+      const parent = toolbarRef.current?.parentElement;
+      if (!parent) return;
+      const parentRect = parent.getBoundingClientRect();
+      const toolbarW = toolbarRef.current?.offsetWidth ?? 40;
+      const toolbarH = toolbarRef.current?.offsetHeight ?? 200;
+
+      const newX = Math.max(0, Math.min(parentRect.width - toolbarW, start.toolbarX + (e.clientX - start.mouseX)));
+      const newY = Math.max(0, Math.min(parentRect.height - toolbarH, start.toolbarY + (e.clientY - start.mouseY)));
+      setToolbarPosition({ x: newX, y: newY });
+    };
+
+    const handleMouseUp = () => {
+      setIsToolbarDragging(false);
+      dragStartRef.current = null;
+    };
+
+    document.addEventListener('mousemove', handleMouseMove);
+    document.addEventListener('mouseup', handleMouseUp);
+    return () => {
+      document.removeEventListener('mousemove', handleMouseMove);
+      document.removeEventListener('mouseup', handleMouseUp);
+    };
+  }, [isToolbarDragging, setToolbarPosition, setIsToolbarDragging]);
+
+  const handleToggleOrientation = useCallback(() => {
+    setToolbarPosition(null);
+    setToolbarOrientation(toolbarOrientation === 'vertical' ? 'horizontal' : 'vertical');
+  }, [toolbarOrientation, setToolbarOrientation, setToolbarPosition]);
+
+  // 绘图数量归零时重置 allVisible
+  useEffect(() => {
+    if (drawingCount === 0) setAllVisible(true);
+  }, [drawingCount]);
+
+  const grouped = useMemo(() => {
+    const byCategory = getToolsByCategory();
+    const result: Array<{ category: DrawingToolCategory; label: string; tools: DrawingToolConfig[] }> = [];
+    for (const cat of CATEGORY_ORDER) {
+      const tools = byCategory.get(cat);
+      if (tools && tools.length > 0) {
+        result.push({
+          category: cat,
+          label: CATEGORY_LABELS[cat],
+          tools: tools.sort((a, b) => a.priority - b.priority),
+        });
+      }
+    }
+    return result;
+  }, []);
+
+  const handleCategoryClick = useCallback((category: DrawingToolCategory) => {
+    if (expandedCategory === category) {
+      setExpandedCategory(null);  // 再次点击折叠
+    } else {
+      setExpandedCategory(category);
+    }
+  }, [expandedCategory, setExpandedCategory]);
+
+  const handleToolSelect = useCallback((tool: DrawingToolConfig) => {
+    setActiveTool(tool.type);
+    setCategoryActiveTool(tool.category, tool.type);
+    setExpandedCategory(null);  // 选中后折叠
+  }, [setActiveTool, setCategoryActiveTool, setExpandedCategory]);
+
+  // 获取分类行显示的 icon（当前选中工具 or 分类第一个工具）
+  const getCategoryIcon = useCallback((category: DrawingToolCategory) => {
+    const activeInCategory = categoryActiveTools[category];
+    if (activeInCategory) {
+      const tool = DRAWING_TOOLS.find(t => t.type === activeInCategory);
+      if (tool) return tool.icon;
+    }
+    const tools = grouped.find(g => g.category === category)?.tools;
+    return tools?.[0]?.icon ?? '📌';
+  }, [categoryActiveTools, grouped]);
+
+  // 判断分类是否有工具被选中
+  const isCategoryActive = useCallback((category: DrawingToolCategory) => {
+    const tools = grouped.find(g => g.category === category)?.tools ?? [];
+    return tools.some(t => t.type === activeTool);
+  }, [activeTool, grouped]);
+
+  // 批量操作：删除所有（带确认）
+  const [deleteAllConfirmOpen, setDeleteAllConfirmOpen] = useState(false);
+
+  const handleDeleteAll = useCallback(() => {
+    setDeleteAllConfirmOpen(true);
+  }, []);
+
+  const handleDeleteAllConfirm = useCallback(() => {
+    const handle = getHandle(activePanelId ?? 'panel_0');
+    handle?.drawingAdapter?.clearAll();
+    setDeleteAllConfirmOpen(false);
+  }, [activePanelId, getHandle]);
+
+  // 批量操作：隐藏/显示切换
+  const handleToggleVisible = useCallback(() => {
+    const handle = getHandle(activePanelId ?? 'panel_0');
+    const adapter = handle?.drawingAdapter;
+    if (!adapter) return;
+    const newVisible = !allVisible;
+    adapter.setAllVisible(newVisible);
+    setAllVisible(newVisible);
+  }, [activePanelId, getHandle, allVisible]);
+
+  return (
+    <div
+      ref={toolbarRef}
+      className={`qlchart-drawing-toolbar-${toolbarOrientation === 'vertical' ? 'vertical' : 'horizontal'}${isToolbarDragging ? ' dragging' : ''}`}
+      style={toolbarPosition ? { position: 'absolute' as const, left: toolbarPosition.x, top: toolbarPosition.y, zIndex: 100 } : {}}
+    >
+      {/* 功能1：拖拽把手 */}
+      <div
+        className="qlchart-dvt-drag-handle"
+        onMouseDown={handleDragStart}
+        title="拖拽移动工具栏"
+      >
+        ⠿
+      </div>
+
+      {/* 光标按钮 */}
+      <button
+        className={`qlchart-dvt-btn ${activeTool === 'cursor' ? 'active' : ''}`}
+        onClick={() => setActiveTool('cursor')}
+        title="光标"
+      >
+        👆
+      </button>
+
+      {/* 分类按钮 */}
+      {grouped.map(({ category }) => (
+        <div key={category} className="qlchart-dvt-category">
+          <button
+            className={`qlchart-dvt-btn ${expandedCategory === category ? 'expanded' : ''} ${isCategoryActive(category) ? 'has-active' : ''}`}
+            onClick={() => handleCategoryClick(category)}
+            title={CATEGORY_LABELS[category]}
+          >
+            {getCategoryIcon(category)}
+          </button>
+
+          {/* 展开的子面板 */}
+          {expandedCategory === category && (
+            <div className="qlchart-dvt-subpanel">
+              {grouped.find(g => g.category === category)?.tools.map(tool => (
+                <button
+                  key={tool.type}
+                  className={`qlchart-dvt-sub-btn ${activeTool === tool.type ? 'active' : ''}`}
+                  onClick={() => handleToolSelect(tool)}
+                  title={tool.label}
+                >
+                  {tool.icon}
+                  <span className="qlchart-dvt-sub-label">{tool.label}</span>
+                </button>
+              ))}
+            </div>
+          )}
+        </div>
+      ))}
+
+      {/* 磁铁吸附 */}
+      <div className="qlchart-dvt-separator" />
+      <button
+        className={`qlchart-dvt-btn ${magnetEnabled ? 'active' : ''}`}
+        onClick={() => setMagnetEnabled(!magnetEnabled)}
+        title="磁铁吸附"
+      >
+        🧲
+      </button>
+
+      {/* 批量操作（drawingCount > 0 时显示） */}
+      {drawingCount > 0 && (
+        <>
+          <div className="qlchart-dvt-separator" />
+          <button
+            className="qlchart-dvt-btn"
+            onClick={handleToggleVisible}
+            title={allVisible ? '隐藏所有' : '显示所有'}
+          >
+            {allVisible ? '🙈' : '👁️'}
+          </button>
+          <button
+            className="qlchart-dvt-btn"
+            onClick={handleDeleteAll}
+            title="删除所有"
+          >
+            🗑️
+          </button>
+        </>
+      )}
+
+      {/* ★ V2: 副图 pane 指示器 */}
+      {currentPaneIndex > 0 && (
+        <div className="qlchart-dvt-pane-indicator">
+          <span className="qlchart-dvt-pane-badge">P{currentPaneIndex}</span>
+        </div>
+      )}
+
+      {/* 功能1：底部横竖转换按钮 */}
+      <button
+        className="qlchart-dvt-btn qlchart-dvt-orientation-toggle"
+        onClick={handleToggleOrientation}
+        title={toolbarOrientation === 'vertical' ? '切换为横向' : '切换为纵向'}
+      >
+        {toolbarOrientation === 'vertical' ? '⤵' : '⤴'}
+      </button>
+
+      {/* ★ 需求2：删除所有确认 Modal */}
+      {deleteAllConfirmOpen && createPortal(
+        <div className="qlchart-confirm-overlay" onClick={() => setDeleteAllConfirmOpen(false)}>
+          <div className="qlchart-confirm-modal" onClick={(e) => e.stopPropagation()}>
+            <div className="qlchart-confirm-icon">⚠️</div>
+            <div className="qlchart-confirm-title">确认删除所有绘图</div>
+            <div className="qlchart-confirm-desc">确定要删除所有绘图吗？此操作不可撤销。</div>
+            <div className="qlchart-confirm-actions">
+              <button className="qlchart-confirm-cancel" onClick={() => setDeleteAllConfirmOpen(false)}>取消</button>
+              <button className="qlchart-confirm-ok" onClick={handleDeleteAllConfirm}>🗑️ 全部删除</button>
+            </div>
+          </div>
+        </div>,
+        document.body,
+      )}
+    </div>
+  );
+}

package/src/components/drawing/index.ts

@@ -0,0 +1,5 @@
+export { DrawingToolbar } from './DrawingToolbar.js';
+export { DrawingPropertyPanel } from './DrawingPropertyPanel.js';
+export type { DrawingPropertyPanelProps } from './DrawingPropertyPanel.js';
+export { DrawingModule } from './DrawingModule.js';
+export type { DrawingModuleProps } from './DrawingModule.js';

package/src/components/index.ts

@@ -0,0 +1,43 @@
+export { QLChartProvider, useQLChartConfig, QLChartContext } from './QLChartProvider.js';
+export type { QLChartConfig, RealtimeSubscribeFn, RealtimeCandle as ProviderRealtimeCandle } from './QLChartProvider.js';
+export { QLChartPanel } from './QLChartPanel.js';
+export type { QLChartPanelProps, QLChartPanelRef } from './QLChartPanel.js';
+export { QLToolbar } from './toolbar/QLToolbar.js';
+export type { QLToolbarProps } from './toolbar/QLToolbar.js';
+export { PeriodSelector } from './toolbar/PeriodSelector.js';
+export { TimeRangeSelector } from './timebar/TimeRangeSelector.js';
+export { KlineTypeSelector } from './toolbar/KlineTypeSelector.js';
+
+// Indicator components
+export { IndicatorPanel } from './indicator/index.js';
+export type { IndicatorPanelProps } from './indicator/index.js';
+export { IndicatorTag } from './indicator/index.js';
+export type { IndicatorTagProps } from './indicator/index.js';
+
+// Drawing components
+export { DrawingToolbar, DrawingPropertyPanel } from './drawing/index.js';
+export type { DrawingPropertyPanelProps } from './drawing/index.js';
+export { DrawingModule } from './drawing/index.js';
+export type { DrawingModuleProps } from './drawing/index.js';
+
+// Context Menu
+export { ChartContextMenu } from './context-menu/index.js';
+export type { ChartContextMenuProps } from './context-menu/index.js';
+
+// ChartFunctionMenu
+export { ChartFunctionMenu } from './ChartFunctionMenu.js';
+export type { ChartFunctionMenuProps } from './ChartFunctionMenu.js';
+
+// TimeBar components
+export { TimeBarModule } from './timebar/index.js';
+export type { TimeBarModuleProps } from './timebar/index.js';
+
+// Layout
+export { QLChartLayout } from './QLChartLayout.js';
+export type { QLChartLayoutProps } from './QLChartLayout.js';
+export { LayoutSwitcher } from './toolbar/LayoutSwitcher.js';
+export type { LayoutSwitcherProps } from './toolbar/LayoutSwitcher.js';
+
+// Replay
+export { ReplayController } from './replay/ReplayController.js';
+export type { ReplayControllerProps } from './replay/ReplayController.js';

package/src/components/indicator/IndicatorListPanel.tsx

@@ -0,0 +1,94 @@
+import { useMemo, useState } from 'react';
+import type { IndicatorTemplate } from '../../types/indicator.js';
+
+export interface IndicatorListPanelProps {
+  /** 可用指标列表 */
+  indicators: IndicatorTemplate[];
+  /** 当前激活的指标key列表 */
+  activeKeys: string[];
+  /** 选择指标回调 */
+  onSelect: (template: IndicatorTemplate) => void;
+  /** 取消选择回调 */
+  onDeselect: (key: string) => void;
+  /** 关闭面板 */
+  onClose: () => void;
+}
+
+/**
+ * IndicatorListPanel - 指标列表选择面板
+ * 按category分组展示所有可用指标
+ */
+export function IndicatorListPanel({
+  indicators,
+  activeKeys,
+  onSelect,
+  onDeselect,
+  onClose,
+}: IndicatorListPanelProps) {
+  const [search, setSearch] = useState('');
+
+  // 按category分组
+  const grouped = useMemo(() => {
+    const filtered = search
+      ? indicators.filter(i =>
+          i.label.toLowerCase().includes(search.toLowerCase()) ||
+          i.key.toLowerCase().includes(search.toLowerCase())
+        )
+      : indicators;
+
+    const map = new Map<string, IndicatorTemplate[]>();
+    for (const ind of filtered) {
+      const cat = ind.category || '其他';
+      if (!map.has(cat)) map.set(cat, []);
+      map.get(cat)!.push(ind);
+    }
+    // 按sortOrder排序
+    for (const [, list] of map) {
+      list.sort((a, b) => (a.sortOrder ?? 99) - (b.sortOrder ?? 99));
+    }
+    return Array.from(map.entries());
+  }, [indicators, search]);
+
+  return (
+    <div className="qlchart-indicator-list-panel">
+      <div className="qlchart-indicator-list-header">
+        <span>指标管理</span>
+        <button onClick={onClose}>✕</button>
+      </div>
+
+      <div className="qlchart-indicator-list-search">
+        <input
+          type="text"
+          placeholder="搜索指标..."
+          value={search}
+          onChange={e => setSearch(e.target.value)}
+        />
+      </div>
+
+      <div className="qlchart-indicator-list-body">
+        {grouped.map(([category, list]) => (
+          <div key={category} className="qlchart-indicator-list-group">
+            <div className="qlchart-indicator-list-group-title">{category}</div>
+            {list.map(ind => {
+              const isActive = activeKeys.includes(ind.key);
+              return (
+                <div
+                  key={ind.key}
+                  className={`qlchart-indicator-list-item ${isActive ? 'active' : ''}`}
+                  onClick={() => isActive ? onDeselect(ind.key) : onSelect(ind)}
+                >
+                  <span className="qlchart-indicator-list-icon">{ind.icon ?? '📊'}</span>
+                  <div className="qlchart-indicator-list-info">
+                    <div className="qlchart-indicator-list-label">{ind.label}</div>
+                    <div className="qlchart-indicator-list-desc">{ind.description}</div>
+                  </div>
+                  <span className="qlchart-indicator-list-check">{isActive ? '✓' : '+'}</span>
+                </div>
+              );
+            })}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

package/src/components/indicator/IndicatorModal.tsx

@@ -0,0 +1,171 @@
+import { useState, useMemo, useCallback } from 'react';
+import { createPortal } from 'react-dom';
+import {
+  useIndicatorStore,
+  createIndicatorConfig,
+} from '../../store/useIndicatorStore.js';
+import {
+  type IndicatorDefinition,
+  type IndicatorConfig,
+  IndicatorType,
+} from '../../types/index.js';
+
+export interface IndicatorModalProps {
+  open: boolean;
+  onClose: () => void;
+}
+
+/** 向后兼容别名 */
+export type IndicatorPanelProps = IndicatorModalProps;
+
+/** 分类标签映射 */
+const CATEGORY_LABELS: Record<string, string> = {
+  all: '全部',
+  trend: '趋势',
+  oscillator: '震荡',
+  volume: '成交量',
+};
+
+/** 根据指标名称推断分类 */
+function inferCategory(def: IndicatorDefinition): string {
+  if (def.type === IndicatorType.Overlay) return 'trend';
+  const name = def.name.toUpperCase();
+  if (name === 'OBV') return 'volume';
+  return 'oscillator';
+}
+
+export function IndicatorModal({ open, onClose }: IndicatorModalProps) {
+  const availableIndicators = useIndicatorStore((s) => s.availableIndicators);
+  const activeIndicators = useIndicatorStore((s) => s.activeIndicators);
+  const addIndicator = useIndicatorStore((s) => s.addIndicator);
+  const removeIndicator = useIndicatorStore((s) => s.removeIndicator);
+
+  const [searchKeyword, setSearchKeyword] = useState('');
+  const [activeCategory, setActiveCategory] = useState('all');
+
+  const allIndicators = useMemo(() => availableIndicators, [availableIndicators]);
+
+  // 动态提取分类
+  const categories = useMemo(() => {
+    const cats = new Set(allIndicators.map((i) => inferCategory(i)));
+    return ['all', ...Array.from(cats)];
+  }, [allIndicators]);
+
+  // 过滤
+  const filtered = useMemo(() => {
+    let result = allIndicators;
+    if (activeCategory !== 'all') {
+      result = result.filter((i) => inferCategory(i) === activeCategory);
+    }
+    if (searchKeyword) {
+      const kw = searchKeyword.toLowerCase();
+      result = result.filter(
+        (i) =>
+          i.name.toLowerCase().includes(kw) ||
+          (i.label ?? '').toLowerCase().includes(kw),
+      );
+    }
+    return result;
+  }, [allIndicators, activeCategory, searchKeyword]);
+
+  const isActive = useCallback(
+    (name: string) => activeIndicators.some((i) => i.name === name),
+    [activeIndicators],
+  );
+
+  const getActiveConfig = useCallback(
+    (name: string): IndicatorConfig | undefined =>
+      activeIndicators.find((i) => i.name === name),
+    [activeIndicators],
+  );
+
+  const handleToggle = useCallback(
+    (def: IndicatorDefinition) => {
+      if (isActive(def.name)) {
+        const config = getActiveConfig(def.name);
+        if (config) removeIndicator(config.id);
+      } else {
+        addIndicator(createIndicatorConfig(def));
+      }
+    },
+    [isActive, getActiveConfig, addIndicator, removeIndicator],
+  );
+
+  if (!open) return null;
+
+  // ★ Bug3修复：使用 Portal 渲染到 document.body，避免被容器 overflow:hidden 裁剪
+  return createPortal(
+    <div className="qlchart-modal-overlay" onClick={onClose}>
+      <div
+        className="qlchart-indicator-modal"
+        onClick={(e) => e.stopPropagation()}
+      >
+        {/* Header */}
+        <div className="qlchart-modal-header">
+          <span>📊 指标管理</span>
+          <button className="qlchart-modal-close" onClick={onClose}>
+            ✕
+          </button>
+        </div>
+
+        {/* Search */}
+        <div className="qlchart-modal-search">
+          <input
+            placeholder="搜索指标名称..."
+            value={searchKeyword}
+            onChange={(e) => setSearchKeyword(e.target.value)}
+          />
+        </div>
+
+        {/* Body: Sidebar + Content */}
+        <div className="qlchart-modal-body">
+          <div className="qlchart-modal-sidebar">
+            {categories.map((cat) => (
+              <button
+                key={cat}
+                className={`qlchart-modal-tab ${
+                  activeCategory === cat ? 'active' : ''
+                }`}
+                onClick={() => setActiveCategory(cat)}
+              >
+                {CATEGORY_LABELS[cat] ?? cat}
+              </button>
+            ))}
+          </div>
+          <div className="qlchart-modal-content">
+            {filtered.map((def) => (
+              <div
+                key={def.name}
+                className={`qlchart-indicator-card ${
+                  isActive(def.name) ? 'selected' : ''
+                }`}
+                onClick={() => handleToggle(def)}
+              >
+                <div className="qlchart-indicator-name">
+                  {def.label ?? def.name}
+                </div>
+                <div className="qlchart-indicator-type">
+                  {def.type === IndicatorType.Overlay ? '主图' : '副图'}
+                </div>
+              </div>
+            ))}
+            {filtered.length === 0 && (
+              <div className="qlchart-modal-empty">无匹配指标</div>
+            )}
+          </div>
+        </div>
+
+        {/* Footer */}
+        <div className="qlchart-modal-footer">
+          <span className="qlchart-modal-selected">
+            已选: {activeIndicators.map((i) => i.name).join(', ') || '无'}
+          </span>
+          <button className="qlchart-modal-confirm" onClick={onClose}>
+            确定
+          </button>
+        </div>
+      </div>
+    </div>,
+    document.body,
+  );
+}

package/src/components/indicator/IndicatorPanel.tsx

@@ -0,0 +1,9 @@
+import { IndicatorModal } from './IndicatorModal.js';
+import type { IndicatorPanelProps } from './IndicatorModal.js';
+
+export type { IndicatorPanelProps };
+
+/** 指标面板 — 现在渲染 IndicatorModal */
+export function IndicatorPanel(props: IndicatorPanelProps) {
+  return <IndicatorModal {...props} />;
+}