JoyD/AutoRobot/Windows/Robot/Web/src/DockLayout/handlers/DragStateManager.js

/**
 * 拖拽状态管理器
 * 统一管理所有组件的拖拽状态，提供拖拽历史、性能监控、冲突检测等功能
 */

import { eventBus } from '../eventBus';
import { GLOBAL_EVENT_TYPES, globalEventActions } from './GlobalEventManager';

// 拖拽状态类型
export const DRAG_STATE_TYPES = {
  // 拖拽操作
  DRAG_START: 'drag.state.start',
  DRAG_MOVE: 'drag.state.move',
  DRAG_END: 'drag.state.end',
  DRAG_CANCEL: 'drag.state.cancel',
  
  // 拖拽状态变更
  DRAG_STATE_CHANGE: 'drag.state.change',
  DRAG_STATE_ENTER: 'drag.state.enter',
  DRAG_STATE_EXIT: 'drag.state.exit',
  
  // 拖拽冲突
  DRAG_CONFLICT_DETECT: 'drag.conflict.detect',
  DRAG_CONFLICT_RESOLVE: 'drag.conflict.resolve',
  DRAG_CONFLICT_ESCALATE: 'drag.conflict.escalate',
  
  // 拖拽目标
  DRAG_TARGET_DETECT: 'drag.target.detect',
  DRAG_TARGET_ENTER: 'drag.target.enter',
  DRAG_TARGET_EXIT: 'drag.target.exit',
  DRAG_TARGET_VALIDATE: 'drag.target.validate',
  
  // 拖拽反馈
  DRAG_FEEDBACK_UPDATE: 'drag.feedback.update',
  DRAG_FEEDBACK_SHOW: 'drag.feedback.show',
  DRAG_FEEDBACK_HIDE: 'drag.feedback.hide',
  
  // 拖拽性能
  DRAG_PERFORMANCE_MONITOR: 'drag.performance.monitor',
  DRAG_PERFORMANCE_THRESHOLD: 'drag.performance.threshold',
  
  // 拖拽历史
  DRAG_HISTORY_RECORD: 'drag.history.record',
  DRAG_HISTORY_ANALYZE: 'drag.history.analyze',
  DRAG_HISTORY_CLEANUP: 'drag.history.cleanup'
};

// 拖拽区域类型
export const DRAG_AREA_TYPES = {
  PANEL: 'panel',
  TABPAGE: 'tabpage',
  AREA: 'area',
  WINDOW: 'window',
  DESKTOP: 'desktop'
};

// 拖拽状态类
class DragState {
  constructor(dragId, componentType, sourceElement, options = {}) {
    this.dragId = dragId;
    this.componentType = componentType;
    this.sourceElement = sourceElement;
    this.startTime = Date.now();
    this.lastUpdateTime = this.startTime;
    this.status = 'pending'; // pending, active, completed, cancelled, error
    this.currentPosition = { x: 0, y: 0 };
    this.startPosition = { x: 0, y: 0 };
    this.targetElement = null;
    this.targetArea = null;
    this.dragVector = { x: 0, y: 0 };
    this.velocity = { x: 0, y: 0 };
    this.acceleration = { x: 0, y: 0 };
    this.conflicts = [];
    this.feedback = {
      visible: false,
      position: { x: 0, y: 0 },
      content: '',
      type: 'default' // default, invalid, valid, warning
    };
    this.performance = {
      totalDuration: 0,
      moveCount: 0,
      averageFrameTime: 0,
      fps: 0,
      maxFrameTime: 0
    };
    this.options = {
      ...options,
      threshold: options.threshold || 5,
      maxSpeed: options.maxSpeed || 1000,
      targetThreshold: options.targetThreshold || 20,
      feedbackDelay: options.feedbackDelay || 100,
      performanceThreshold: options.performanceThreshold || 16 // 60fps threshold
    };
    this.metadata = options.metadata || {};
    this.listeners = new Map();
    this.history = [];
  }

  /**
   * 更新拖拽位置
   * @param {number} x - X坐标
   * @param {number} y - Y坐标
   * @param {number} timestamp - 时间戳
   */
  updatePosition(x, y, timestamp = Date.now()) {
    const oldPosition = { ...this.currentPosition };
    const deltaTime = timestamp - this.lastUpdateTime;
    
    // 更新位置
    this.currentPosition = { x, y };
    this.lastUpdateTime = timestamp;
    
    // 计算拖拽向量
    this.dragVector = {
      x: x - this.startPosition.x,
      y: y - this.startPosition.y
    };
    
    // 计算速度（像素/毫秒）
    if (deltaTime > 0) {
      this.velocity = {
        x: (x - oldPosition.x) / deltaTime * 1000,
        y: (y - oldPosition.y) / deltaTime * 1000
      };
      
      // 计算加速度
      if (this.history.length > 0) {
        const prevVelocity = this.history[this.history.length - 1].velocity;
        this.acceleration = {
          x: (this.velocity.x - prevVelocity.x) / deltaTime * 1000,
          y: (this.velocity.y - prevVelocity.y) / deltaTime * 1000
        };
      }
    }
    
    // 记录历史
    this.history.push({
      timestamp,
      position: { ...this.currentPosition },
      velocity: { ...this.velocity },
      acceleration: { ...this.acceleration }
    });
    
    // 限制历史大小
    if (this.history.length > 100) {
      this.history.shift();
    }
    
    // 更新性能指标
    this._updatePerformanceMetrics(deltaTime);
  }

  /**
   * 更新性能指标
   * @param {number} deltaTime - 时间间隔
   */
  _updatePerformanceMetrics(deltaTime) {
    this.performance.moveCount++;
    
    if (deltaTime > 0) {
      const frameTime = deltaTime;
      const newAverageTime = (this.performance.averageFrameTime * (this.performance.moveCount - 1) + frameTime) / this.performance.moveCount;
      
      this.performance.averageFrameTime = newAverageTime;
      this.performance.fps = 1000 / newAverageTime;
      this.performance.maxFrameTime = Math.max(this.performance.maxFrameTime, frameTime);
    }
    
    this.performance.totalDuration = Date.now() - this.startTime;
  }

  /**
   * 设置目标元素
   * @param {Element} targetElement - 目标元素
   * @param {string} targetArea - 目标区域类型
   */
  setTarget(targetElement, targetArea = null) {
    this.targetElement = targetElement;
    this.targetArea = targetArea;
  }

  /**
   * 添加冲突
   * @param {Object} conflict - 冲突信息
   */
  addConflict(conflict) {
    this.conflicts.push({
      ...conflict,
      timestamp: Date.now()
    });
  }

  /**
   * 清除冲突
   */
  clearConflicts() {
    this.conflicts = [];
  }

  /**
   * 更新反馈
   * @param {Object} feedback - 反馈信息
   */
  updateFeedback(feedback) {
    this.feedback = {
      ...this.feedback,
      ...feedback,
      visible: feedback.visible !== undefined ? feedback.visible : this.feedback.visible
    };
  }

  /**
   * 获取状态摘要
   * @returns {Object} 状态摘要
   */
  getSummary() {
    return {
      dragId: this.dragId,
      componentType: this.componentType,
      status: this.status,
      startPosition: this.startPosition,
      currentPosition: this.currentPosition,
      dragVector: this.dragVector,
      velocity: this.velocity,
      targetElement: this.targetElement !== null,
      targetArea: this.targetArea,
      conflictCount: this.conflicts.length,
      performance: this.performance,
      duration: Date.now() - this.startTime
    };
  }

  /**
   * 完成拖拽
   * @param {string} status - 完成状态
   * @param {Object} result - 结果数据
   */
  complete(status = 'completed', result = {}) {
    this.status = status;
    this.performance.totalDuration = Date.now() - this.startTime;
    
    // 清理历史（保留最近50条）
    if (this.history.length > 50) {
      this.history = this.history.slice(-50);
    }
  }
}

// 拖拽冲突检测器
class DragConflictDetector {
  constructor() {
    this.activeDrags = new Map();
    this.conflictRules = new Map();
    this.conflictHistory = [];
    this.maxHistorySize = 200;
    
    this._initializeConflictRules();
  }

  /**
   * 初始化冲突规则
   */
  _initializeConflictRules() {
    // 面板拖拽冲突规则
    this.conflictRules.set('panel', {
      overlap: { threshold: 0.3, severity: 'warning' },
      sameParent: { threshold: 0.5, severity: 'error' },
      lockedElement: { threshold: 0, severity: 'error' }
    });
    
    // TabPage拖拽冲突规则
    this.conflictRules.set('tabpage', {
      overlap: { threshold: 0.5, severity: 'warning' },
      sameTabContainer: { threshold: 0.8, severity: 'info' },
      readonlyTab: { threshold: 0, severity: 'error' }
    });
    
    // Area拖拽冲突规则
    this.conflictRules.set('area', {
      overlap: { threshold: 0.4, severity: 'warning' },
      minimumSize: { threshold: 0, severity: 'error' },
      lockedArea: { threshold: 0, severity: 'error' }
    });
  }

  /**
   * 注册拖拽
   * @param {DragState} dragState - 拖拽状态
   */
  registerDrag(dragState) {
    this.activeDrags.set(dragState.dragId, dragState);
  }

  /**
   * 注销拖拽
   * @param {string} dragId - 拖拽ID
   */
  unregisterDrag(dragId) {
    this.activeDrags.delete(dragId);
  }

  /**
   * 检测冲突
   * @param {string} dragId - 拖拽ID
   * @returns {Array} 冲突列表
   */
  detectConflicts(dragId) {
    const currentDrag = this.activeDrags.get(dragId);
    if (!currentDrag) return [];

    const conflicts = [];
    
    for (const [otherId, otherDrag] of this.activeDrags) {
      if (otherId === dragId) continue;
      
      // 跳过已完成的拖拽
      if (otherDrag.status === 'completed' || otherDrag.status === 'cancelled') {
        continue;
      }
      
      const conflict = this._checkDragConflict(currentDrag, otherDrag);
      if (conflict) {
        conflicts.push(conflict);
      }
    }
    
    // 记录冲突历史
    if (conflicts.length > 0) {
      this.conflictHistory.push({
        dragId,
        conflicts,
        timestamp: Date.now()
      });
      
      // 限制历史大小
      if (this.conflictHistory.length > this.maxHistorySize) {
        this.conflictHistory.shift();
      }
    }
    
    return conflicts;
  }

  /**
   * 检查两个拖拽之间的冲突
   * @param {DragState} drag1 - 拖拽1
   * @param {DragState} drag2 - 拖拽2
   * @returns {Object|null} 冲突信息
   */
  _checkDragConflict(drag1, drag2) {
    const rules1 = this.conflictRules.get(drag1.componentType);
    const rules2 = this.conflictRules.get(drag2.componentType);
    
    if (!rules1 && !rules2) return null;
    
    // 计算元素重叠程度
    const overlap = this._calculateOverlap(drag1, drag2);
    
    // 检查各种冲突类型
    const conflicts = [];
    
    // 位置冲突
    if (overlap > 0.3) {
      const severity = overlap > 0.7 ? 'error' : overlap > 0.5 ? 'warning' : 'info';
      conflicts.push({
        type: 'overlap',
        severity,
        value: overlap,
        message: `元素重叠度达到 ${(overlap * 100).toFixed(1)}%`
      });
    }
    
    // 速度冲突
    const relativeSpeed = Math.sqrt(
      Math.pow(drag1.velocity.x - drag2.velocity.x, 2) + 
      Math.pow(drag1.velocity.y - drag2.velocity.y, 2)
    );
    
    if (relativeSpeed > 500) { // 像素/秒
      conflicts.push({
        type: 'high_speed',
        severity: 'warning',
        value: relativeSpeed,
        message: `相对速度过高: ${relativeSpeed.toFixed(1)} px/s`
      });
    }
    
    // 同级拖拽冲突
    if (drag1.componentType === drag2.componentType) {
      const centerDistance = Math.sqrt(
        Math.pow(drag1.currentPosition.x - drag2.currentPosition.x, 2) +
        Math.pow(drag1.currentPosition.y - drag2.currentPosition.y, 2)
      );
      
      if (centerDistance < 100) {
        conflicts.push({
          type: 'proximity',
          severity: 'info',
          value: centerDistance,
          message: `拖拽元素距离过近: ${centerDistance.toFixed(1)}px`
        });
      }
    }
    
    return conflicts.length > 0 ? {
      drag1Id: drag1.dragId,
      drag2Id: drag2.dragId,
      conflicts,
      timestamp: Date.now()
    } : null;
  }

  /**
   * 计算两个拖拽元素的重叠度
   * @param {DragState} drag1 - 拖拽1
   * @param {DragState} drag2 - 拖拽2
   * @returns {number} 重叠度 (0-1)
   */
  _calculateOverlap(drag1, drag2) {
    // 简化的重叠计算，假设元素尺寸为100x100
    const elementSize = 100;
    
    const rect1 = {
      left: drag1.currentPosition.x,
      top: drag1.currentPosition.y,
      right: drag1.currentPosition.x + elementSize,
      bottom: drag1.currentPosition.y + elementSize
    };
    
    const rect2 = {
      left: drag2.currentPosition.x,
      top: drag2.currentPosition.y,
      right: drag2.currentPosition.x + elementSize,
      bottom: drag2.currentPosition.y + elementSize
    };
    
    // 计算重叠矩形
    const overlapLeft = Math.max(rect1.left, rect2.left);
    const overlapTop = Math.max(rect1.top, rect2.top);
    const overlapRight = Math.min(rect1.right, rect2.right);
    const overlapBottom = Math.min(rect1.bottom, rect2.bottom);
    
    if (overlapRight <= overlapLeft || overlapBottom <= overlapTop) {
      return 0; // 无重叠
    }
    
    const overlapWidth = overlapRight - overlapLeft;
    const overlapHeight = overlapBottom - overlapTop;
    const overlapArea = overlapWidth * overlapHeight;
    const elementArea = elementSize * elementSize;
    
    return Math.min(overlapArea / elementArea, 1);
  }

  /**
   * 获取冲突统计
   * @returns {Object} 冲突统计
   */
  getConflictStats() {
    const totalConflicts = this.conflictHistory.length;
    const recentConflicts = this.conflictHistory.filter(c => 
      Date.now() - c.timestamp < 60000 // 最近1分钟
    ).length;
    
    const severityCounts = { error: 0, warning: 0, info: 0 };
    this.conflictHistory.forEach(entry => {
      entry.conflicts.forEach(conflict => {
        severityCounts[conflict.severity] = (severityCounts[conflict.severity] || 0) + 1;
      });
    });
    
    return {
      totalConflicts,
      recentConflicts,
      activeDrags: this.activeDrags.size,
      severityCounts,
      conflictRate: totalConflicts > 0 ? totalConflicts / (this.activeDrags.size || 1) : 0
    };
  }
}

// 拖拽状态管理器主类
class DragStateManager {
  constructor() {
    this.activeDrags = new Map();
    this.dragHistory = [];
    this.conflictDetector = new DragConflictDetector();
    this.dragTargets = new Map();
    this.performanceThresholds = {
      dragDuration: 5000, // 5秒
      moveCount: 1000, // 1000次移动
      fps: 30, // 30fps最低要求
      maxVelocity: 2000 // 最大速度限制
    };
    this.isEnabled = true;
    this.debugMode = false;
    this.eventListenersRegistered = false; // 初始化监听器注册标志
    this.cleanupScheduler = null; // 初始化清理调度器
    
    // 绑定方法
    this._onDragEvent = this._onDragEvent.bind(this);
    this._cleanupExpiredData = this._cleanupExpiredData.bind(this);
    
    this._initialize();
  }

  /**
   * 初始化
   */
  _initialize() {
    // 注册拖拽相关事件监听器
    this._registerEventListeners();
    
    // 启动清理调度器
    this._startCleanupScheduler();
    
    console.log('🎯 拖拽状态管理器初始化完成');
  }

  /**
   * 生成唯一的拖拽ID
   * @param {string} componentType - 组件类型
   * @returns {string} 拖拽ID
   */
  _generateDragId(componentType) {
    const timestamp = Date.now();
    const random = Math.random().toString(36).substring(2, 9);
    return `${componentType}_${timestamp}_${random}`;
  }

  /**
   * 注册事件监听器
   */
  _registerEventListeners() {
    // 防止重复注册监听器
    if (this.eventListenersRegistered) {
      console.log('🚫 已经注册了监听器，跳过重复注册');
      return;
    }
    
    const dragEvents = [
      // Panel拖拽事件
      'panel.drag.start', 'panel.drag.move', 'panel.drag.end', 'panel.drag.cancel',
      // TabPage拖拽事件
      'tabpage.drag.start', 'tabpage.drag.move', 'tabpage.drag.end', 'tabpage.drag.cancel',
      // Area拖拽事件
      'area.drag.start', 'area.drag.move', 'area.drag.end', 'area.drag.cancel'
    ];
    
    dragEvents.forEach(eventType => {
      eventBus.on(eventType, this._onDragEvent, { 
        priority: 1,
        deduplication: { type: 'EVENT_BASED', key: 'dragState' },
        componentId: 'drag-state-manager'
      });
    });
    
    this.eventListenersRegistered = true;
    console.log('✅ 拖拽管理器事件监听器注册完成');
  }

  /**
   * 销毁管理器
   */
  destroy() {
    // 取消所有拖拽
    this.cancelAllDrags();
    
    // 清理事件监听器
    const dragEvents = [
      // Panel拖拽事件
      'panel.drag.start', 'panel.drag.move', 'panel.drag.end', 'panel.drag.cancel',
      // TabPage拖拽事件
      'tabpage.drag.start', 'tabpage.drag.move', 'tabpage.drag.end', 'tabpage.drag.cancel',
      // Area拖拽事件
      'area.drag.start', 'area.drag.move', 'area.drag.end', 'area.drag.cancel'
    ];
    
    dragEvents.forEach(eventType => {
      eventBus.off(eventType, this._onDragEvent);
    });
    
    // 清理清理调度器
    this._stopCleanupScheduler();
    
    // 清理数据
    this.activeDrags.clear();
    this.dragHistory = [];
    this.dragTargets.clear();
    
    // 清理冲突检测器
    this.conflictDetector.activeDrags.clear();
    this.conflictDetector.conflictHistory = [];
    
    this.isEnabled = false;
    this.eventListenersRegistered = false;
    console.log('🗑️ 拖拽状态管理器已销毁');
  }

  /**
   * 处理拖拽事件
   * @param {Object} data - 事件数据
   */
  async _onDragEvent(data) {
    if (!this.isEnabled) return;
    
    const monitorId = globalEventActions.startMonitor(`drag_${data.eventType}`);
    
    try {
      const { eventType = data.type, dragId, componentType, sourceElement } = data;
      
      // 从事件数据中提取 dragId，如果没有则根据组件类型推断
      let actualDragId = dragId;
      if (!actualDragId) {
        if (data.panelId) {
          actualDragId = `panel_${data.panelId}_${data.timestamp || Date.now()}`;
        } else if (data.tabIndex !== undefined) {
          actualDragId = `tabpage_${data.tabId}_${data.tabIndex}_${data.timestamp || Date.now()}`;
        } else if (data.areaId) {
          actualDragId = `area_${data.areaId}_${data.timestamp || Date.now()}`;
        }
      }
      
      // 推断组件类型
      let actualComponentType = componentType;
      if (!actualComponentType) {
        if (data.panelId) {
          actualComponentType = 'panel';
        } else if (data.tabIndex !== undefined) {
          actualComponentType = 'tabpage';
        } else if (data.areaId) {
          actualComponentType = 'area';
        }
      }
      
      // 准备标准化的拖拽数据
      const dragData = {
        ...data,
        dragId: actualDragId,
        componentType: actualComponentType,
        sourceElement: sourceElement || data.element
      };
      
      switch (eventType) {
        case 'panel.drag.start':
        case 'tabpage.drag.start':
        case 'area.drag.start':
          await this._handleDragStart(dragData);
          break;
          
        case 'panel.drag.move':
        case 'tabpage.drag.move':
        case 'area.drag.move':
          await this._handleDragMove(dragData);
          break;
          
        case 'panel.drag.end':
        case 'tabpage.drag.end':
        case 'area.drag.end':
          await this._handleDragEnd(dragData);
          break;
          
        case 'panel.drag.cancel':
        case 'tabpage.drag.cancel':
        case 'area.drag.cancel':
          await this._handleDragCancel(dragData);
          break;
      }
    } catch (error) {
      console.error('❌ 拖拽状态管理错误:', error);
      eventBus.emit(GLOBAL_EVENT_TYPES.SYSTEM_ERROR, {
        component: 'dragStateManager',
        event: data,
        error: error.message
      });
    } finally {
      globalEventActions.endMonitor(monitorId);
    }
  }

  /**
   * 处理拖拽开始
   * @param {Object} data - 事件数据
   */
  async _handleDragStart(data) {
    const { dragId, componentType, sourceElement, position, options = {} } = data;
    
    // 如果没有提供 dragId，生成一个唯一的 dragId
    const actualDragId = dragId || this._generateDragId(componentType);
    
    // 创建拖拽状态
    const dragState = new DragState(actualDragId, componentType, sourceElement, options);
    dragState.startPosition = { ...position };
    dragState.currentPosition = { ...position };
    dragState.status = 'active';
    
    // 保存拖拽状态
    this.activeDrags.set(actualDragId, dragState);
    
    // 注册到冲突检测器
    this.conflictDetector.registerDrag(dragState);
    
    // 触发状态变更事件，包含 dragId
    eventBus.emit(DRAG_STATE_TYPES.DRAG_STATE_CHANGE, {
      dragId: actualDragId,
      newStatus: 'active',
      dragState: dragState.getSummary()
    });
    
    // 发送初始反馈
    if (this.debugMode) {
      this._updateDragFeedback(actualDragId, {
        visible: true,
        content: `开始拖拽 ${componentType}`,
        type: 'default',
        position: { ...position }
      });
    }
    
    if (this.debugMode) {
      console.log(`🎯 拖拽开始: ${actualDragId} (${componentType})`, position);
    }
    
    return actualDragId;
  }

  /**
   * 处理拖拽移动
   * @param {Object} data - 事件数据
   */
  async _handleDragMove(data) {
    const { dragId, position, targetElement, targetArea } = data;
    const dragState = this.activeDrags.get(dragId);
    
    if (!dragState || dragState.status !== 'active') {
      console.warn(`⚠️ 未找到活跃的拖拽状态: ${dragId}`);
      return;
    }
    
    // 更新位置
    dragState.updatePosition(position.x, position.y);
    
    // 设置目标
    if (targetElement) {
      dragState.setTarget(targetElement, targetArea);
    }
    
    // 检测冲突
    const conflicts = this.conflictDetector.detectConflicts(dragId);
    if (conflicts.length > 0) {
      conflicts.forEach(conflict => {
        dragState.addConflict(conflict);
        eventBus.emit(DRAG_STATE_TYPES.DRAG_CONFLICT_DETECT, {
          dragId,
          conflict
        });
      });
      
      // 更新反馈显示冲突
      this._updateDragFeedback(dragId, {
        content: `检测到 ${conflicts.length} 个冲突`,
        type: 'warning'
      });
    } else {
      // 清除冲突
      dragState.clearConflicts();
      
      // 更新反馈显示正常状态
      this._updateDragFeedback(dragId, {
        content: '拖拽中...',
        type: 'valid'
      });
    }
    
    // 检测目标
    this._detectDragTargets(dragId, position);
    
    // 检查性能阈值
    this._checkPerformanceThresholds(dragId);
    
    if (this.debugMode && dragState.performance.moveCount % 50 === 0) {
      console.log(`🎯 拖拽移动: ${dragId} (${dragState.performance.moveCount} 次移动, FPS: ${dragState.performance.fps.toFixed(1)})`);
    }
  }

  /**
   * 处理拖拽结束
   * @param {Object} data - 事件数据
   */
  async _handleDragEnd(data) {
    const { dragId, finalPosition, dropTarget, success = true } = data;
    const dragState = this.activeDrags.get(dragId);
    
    if (!dragState) {
      console.warn(`⚠️ 未找到拖拽状态: ${dragId}`);
      return;
    }
    
    // 完成拖拽
    dragState.complete('completed', { success, finalPosition, dropTarget });
    
    // 记录到历史
    this._recordDragHistory(dragState);
    
    // 清除反馈
    this._hideDragFeedback(dragId);
    
    // 从活跃拖拽中移除
    this.activeDrags.delete(dragId);
    
    // 从冲突检测器注销
    this.conflictDetector.unregisterDrag(dragId);
    
    // 清理拖拽目标
    this.dragTargets.delete(dragId);
    
    // 触发状态变更事件，包含 dragId
    eventBus.emit(DRAG_STATE_TYPES.DRAG_STATE_CHANGE, {
      dragId,
      newStatus: 'completed',
      dragState: dragState.getSummary(),
      finalPosition,
      dropTarget,
      success
    });
    
    // 触发性能监控事件
    eventBus.emit(DRAG_STATE_TYPES.DRAG_PERFORMANCE_MONITOR, {
      dragId,
      performance: dragState.performance,
      summary: dragState.getSummary()
    });
    
    if (this.debugMode) {
      console.log(`🎯 拖拽结束: ${dragId} (${success ? '成功' : '失败'}, 耗时: ${dragState.performance.totalDuration}ms)`);
    }
  }

  /**
   * 处理拖拽取消
   * @param {Object} data - 事件数据
   */
  async _handleDragCancel(data) {
    const { dragId, reason } = data;
    const dragState = this.activeDrags.get(dragId);
    
    if (!dragState) {
      console.warn(`⚠️ 未找到拖拽状态: ${dragId}`);
      return;
    }
    
    // 取消拖拽
    dragState.complete('cancelled', { reason });
    
    // 记录到历史
    this._recordDragHistory(dragState);
    
    // 清除反馈
    this._hideDragFeedback(dragId);
    
    // 从活跃拖拽中移除
    this.activeDrags.delete(dragId);
    
    // 从冲突检测器注销
    this.conflictDetector.unregisterDrag(dragId);
    
    // 清理拖拽目标
    this.dragTargets.delete(dragId);
    
    // 触发状态变更事件，包含 dragId
    eventBus.emit(DRAG_STATE_TYPES.DRAG_STATE_CHANGE, {
      dragId,
      newStatus: 'cancelled',
      dragState: dragState.getSummary(),
      reason
    });
    
    if (this.debugMode) {
      console.log(`🎯 拖拽取消: ${dragId} (原因: ${reason})`);
    }
  }

  /**
   * 检测拖拽目标
   * @param {string} dragId - 拖拽ID
   * @param {Object} position - 位置
   */
  _detectDragTargets(dragId, position) {
    const dragState = this.activeDrags.get(dragId);
    if (!dragState) return;
    
    // 这里应该实现实际的拖拽目标检测逻辑
    // 简化实现：检测是否在某个区域内
    const targets = this._findPotentialTargets(position, dragState.componentType);
    
    if (targets.length > 0) {
      // 验证目标有效性
      targets.forEach(target => {
        const isValid = this._validateDragTarget(dragState, target);
        
        eventBus.emit(DRAG_STATE_TYPES.DRAG_TARGET_DETECT, {
          dragId,
          target,
          position,
          valid: isValid
        });
        
        if (isValid) {
          eventBus.emit(DRAG_STATE_TYPES.DRAG_TARGET_VALIDATE, {
            dragId,
            target,
            action: 'enter'
          });
        }
      });
    }
  }

  /**
   * 查找潜在拖拽目标
   * @param {Object} position - 位置
   * @param {string} componentType - 组件类型
   * @returns {Array} 潜在目标列表
   */
  _findPotentialTargets(position, componentType) {
    // 简化的目标查找逻辑
    // 实际实现应该检查DOM元素的实际位置
    const targets = [];
    
    // 模拟不同类型的拖拽目标
    const mockTargets = [
      { id: 'area-center', type: 'area', bounds: { x: 200, y: 200, width: 400, height: 300 } },
      { id: 'tab-container', type: 'tabpage', bounds: { x: 50, y: 50, width: 200, height: 100 } },
      { id: 'panel-dock', type: 'panel', bounds: { x: 100, y: 400, width: 150, height: 50 } }
    ];
    
    mockTargets.forEach(target => {
      const { x, y } = position;
      const { bounds } = target;
      
      if (x >= bounds.x && x <= bounds.x + bounds.width &&
          y >= bounds.y && y <= bounds.y + bounds.height) {
        targets.push(target);
      }
    });
    
    return targets;
  }

  /**
   * 验证拖拽目标
   * @param {DragState} dragState - 拖拽状态
   * @param {Object} target - 目标
   * @returns {boolean} 是否有效
   */
  _validateDragTarget(dragState, target) {
    // 简化的验证逻辑
    const maxDistance = 50; // 最大距离限制
    
    const centerX = dragState.currentPosition.x + 50; // 假设元素宽度为100
    const centerY = dragState.currentPosition.y + 50;
    
    const targetCenterX = target.bounds.x + target.bounds.width / 2;
    const targetCenterY = target.bounds.y + target.bounds.height / 2;
    
    const distance = Math.sqrt(
      Math.pow(centerX - targetCenterX, 2) + 
      Math.pow(centerY - targetCenterY, 2)
    );
    
    return distance <= maxDistance;
  }

  /**
   * 检查性能阈值
   * @param {string} dragId - 拖拽ID
   */
  _checkPerformanceThresholds(dragId) {
    const dragState = this.activeDrags.get(dragId);
    if (!dragState) return;
    
    const { performance } = dragState;
    const thresholdViolations = [];
    
    // 检查拖拽持续时间
    if (performance.totalDuration > this.performanceThresholds.dragDuration) {
      thresholdViolations.push({
        type: 'duration',
        value: performance.totalDuration,
        threshold: this.performanceThresholds.dragDuration,
        message: `拖拽持续时间超过阈值: ${performance.totalDuration}ms > ${this.performanceThresholds.dragDuration}ms`
      });
    }
    
    // 检查移动次数
    if (performance.moveCount > this.performanceThresholds.moveCount) {
      thresholdViolations.push({
        type: 'moveCount',
        value: performance.moveCount,
        threshold: this.performanceThresholds.moveCount,
        message: `移动次数过多: ${performance.moveCount} > ${this.performanceThresholds.moveCount}`
      });
    }
    
    // 检查FPS
    if (performance.fps < this.performanceThresholds.fps && performance.moveCount > 10) {
      thresholdViolations.push({
        type: 'fps',
        value: performance.fps,
        threshold: this.performanceThresholds.fps,
        message: `帧率过低: ${performance.fps.toFixed(1)}fps < ${this.performanceThresholds.fps}fps`
      });
    }
    
    // 检查速度
    const speed = Math.sqrt(dragState.velocity.x ** 2 + dragState.velocity.y ** 2);
    if (speed > this.performanceThresholds.maxVelocity) {
      thresholdViolations.push({
        type: 'velocity',
        value: speed,
        threshold: this.performanceThresholds.maxVelocity,
        message: `拖拽速度过快: ${speed.toFixed(1)}px/s > ${this.performanceThresholds.maxVelocity}px/s`
      });
    }
    
    if (thresholdViolations.length > 0) {
      eventBus.emit(DRAG_STATE_TYPES.DRAG_PERFORMANCE_THRESHOLD, {
        dragId,
        violations: thresholdViolations,
        performance: dragState.performance
      });
    }
  }

  /**
   * 更新拖拽反馈
   * @param {string} dragId - 拖拽ID
   * @param {Object} feedback - 反馈信息
   */
  _updateDragFeedback(dragId, feedback) {
    const dragState = this.activeDrags.get(dragId);
    if (!dragState) return;
    
    dragState.updateFeedback(feedback);
    
    eventBus.emit(DRAG_STATE_TYPES.DRAG_FEEDBACK_UPDATE, {
      dragId,
      feedback: dragState.feedback
    });
  }

  /**
   * 隐藏拖拽反馈
   * @param {string} dragId - 拖拽ID
   */
  _hideDragFeedback(dragId) {
    const dragState = this.activeDrags.get(dragId);
    if (!dragState) return;
    
    dragState.updateFeedback({ visible: false });
    
    eventBus.emit(DRAG_STATE_TYPES.DRAG_FEEDBACK_HIDE, {
      dragId
    });
  }

  /**
   * 记录拖拽历史
   * @param {DragState} dragState - 拖拽状态
   */
  _recordDragHistory(dragState) {
    const historyEntry = {
      dragId: dragState.dragId,
      componentType: dragState.componentType,
      startTime: dragState.startTime,
      endTime: Date.now(),
      duration: dragState.performance.totalDuration,
      moveCount: dragState.performance.moveCount,
      conflictCount: dragState.conflicts.length,
      finalPosition: { ...dragState.currentPosition },
      dragVector: { ...dragState.dragVector },
      averageFPS: dragState.performance.fps,
      metadata: dragState.metadata
    };
    
    this.dragHistory.push(historyEntry);
    
    // 限制历史大小
    if (this.dragHistory.length > 1000) {
      this.dragHistory.shift();
    }
    
    // 触发历史记录事件
    eventBus.emit(DRAG_STATE_TYPES.DRAG_HISTORY_RECORD, {
      historyEntry,
      totalHistorySize: this.dragHistory.length
    });
  }

  /**
   * 启动清理调度器
   */
  _startCleanupScheduler() {
    if (this.cleanupScheduler) {
      return;
    }
    this.cleanupScheduler = setInterval(() => {
      this._cleanupExpiredData();
    }, 300000); // 每5分钟清理一次
  }

  /**
   * 停止清理调度器
   */
  _stopCleanupScheduler() {
    if (this.cleanupScheduler) {
      clearInterval(this.cleanupScheduler);
      this.cleanupScheduler = null;
    }
  }

  /**
   * 清理过期数据
   */
  _cleanupExpiredData() {
    const now = Date.now();
    const maxAge = 3600000; // 1小时
    
    // 清理过期的历史记录
    this.dragHistory = this.dragHistory.filter(entry => 
      (now - entry.endTime) < maxAge
    );
    
    // 清理冲突历史
    this.conflictDetector.conflictHistory = this.conflictDetector.conflictHistory.filter(entry =>
      (now - entry.timestamp) < maxAge
    );
    
    // 触发清理事件
    eventBus.emit(DRAG_STATE_TYPES.DRAG_HISTORY_CLEANUP, {
      cleanedHistoryCount: this.dragHistory.length,
      cleanedConflictCount: this.conflictDetector.conflictHistory.length
    });
  }

  /**
   * 获取拖拽状态
   * @param {string} dragId - 拖拽ID
   * @returns {Object|null} 拖拽状态
   */
  getDragState(dragId) {
    const dragState = this.activeDrags.get(dragId);
    return dragState ? dragState.getSummary() : null;
  }

  /**
   * 获取所有活跃拖拽
   * @returns {Array} 活跃拖拽列表
   */
  getActiveDrags() {
    return Array.from(this.activeDrags.values()).map(dragState => dragState.getSummary());
  }

  /**
   * 获取拖拽历史
   * @param {number} limit - 限制数量
   * @returns {Array} 历史记录
   */
  getDragHistory(limit = 100) {
    return this.dragHistory.slice(-limit);
  }

  /**
   * 获取拖拽统计
   * @returns {Object} 拖拽统计
   */
  getDragStats() {
    const activeCount = this.activeDrags.size;
    const historyCount = this.dragHistory.length;
    
    // 计算平均性能指标
    const avgStats = {
      averageDuration: 0,
      averageMoveCount: 0,
      averageFPS: 0,
      totalConflicts: 0
    };
    
    if (historyCount > 0) {
      const recentHistory = this.dragHistory.slice(-100);
      avgStats.averageDuration = recentHistory.reduce((sum, entry) => sum + entry.duration, 0) / recentHistory.length;
      avgStats.averageMoveCount = recentHistory.reduce((sum, entry) => sum + entry.moveCount, 0) / recentHistory.length;
      avgStats.averageFPS = recentHistory.reduce((sum, entry) => sum + entry.averageFPS, 0) / recentHistory.length;
      avgStats.totalConflicts = recentHistory.reduce((sum, entry) => sum + entry.conflictCount, 0);
    }
    
    return {
      active: {
        count: activeCount,
        dragStates: this.getActiveDrags()
      },
      history: {
        total: historyCount,
        recent: historyCount > 0 ? this.dragHistory.slice(-10) : [],
        average: avgStats
      },
      conflicts: this.conflictDetector.getConflictStats(),
      performance: {
        thresholds: this.performanceThresholds,
        violations: this._getRecentPerformanceViolations()
      }
    };
  }

  /**
   * 获取最近的性能违规
   * @returns {Array} 违规记录
   */
  _getRecentPerformanceViolations() {
    const recent = this.dragHistory.filter(entry => 
      Date.now() - entry.endTime < 60000 // 最近1分钟
    );
    
    const violations = [];
    recent.forEach(entry => {
      if (entry.duration > this.performanceThresholds.dragDuration) {
        violations.push({
          dragId: entry.dragId,
          type: 'duration',
          value: entry.duration,
          threshold: this.performanceThresholds.dragDuration
        });
      }
      
      if (entry.averageFPS < this.performanceThresholds.fps) {
        violations.push({
          dragId: entry.dragId,
          type: 'fps',
          value: entry.averageFPS,
          threshold: this.performanceThresholds.fps
        });
      }
    });
    
    return violations;
  }

  /**
   * 设置调试模式
   * @param {boolean} enabled - 是否启用
   */
  setDebugMode(enabled) {
    this.debugMode = enabled;
    console.log(`🔧 拖拽状态管理器调试模式${enabled ? '开启' : '关闭'}`);
  }

  /**
   * 启用/禁用管理器
   * @param {boolean} enabled - 是否启用
   */
  setEnabled(enabled) {
    this.isEnabled = enabled;
    console.log(`🎯 拖拽状态管理器${enabled ? '启用' : '禁用'}`);
  }

  /**
   * 取消所有拖拽
   */
  cancelAllDrags() {
    const dragIds = Array.from(this.activeDrags.keys());
    
    dragIds.forEach(dragId => {
      const dragState = this.activeDrags.get(dragId);
      if (dragState && dragState.status === 'active') {
        eventBus.emit(DRAG_STATE_TYPES.DRAG_CANCEL, {
          dragId,
          reason: 'manager_cancelled'
        });
      }
    });
    
    console.log(`🚫 已取消 ${dragIds.length} 个活跃拖拽`);
  }

  /**
   * 面板拖拽开始（从DockLayout.vue迁移）
   * @param {Object} eventData - 拖拽事件数据
   */
  onPanelDragStart(eventData) {
    try {
      const { 
        event, 
        panelId, 
        element,
        type = 'panel',
        position = { x: 0, y: 0 },
        ...options 
      } = eventData;

      // 检查是否有其他活跃拖拽
      if (this.activeDrags.size > 0) {
        console.warn('检测到其他活跃拖拽，暂停之前的拖拽');
        this.cancelAllDrags();
      }

      // 创建拖拽ID
      const dragId = `panel-${panelId}-${Date.now()}`;
      
      // 创建拖拽状态
      const dragState = new DragState(dragId, DRAG_AREA_TYPES.PANEL, element, {
        panelId,
        sourceType: type,
        ...options
      });

      // 设置起始位置
      const clientX = event?.clientX || eventData.clientX;
      const clientY = event?.clientY || eventData.clientY;
      const startX = position.x || clientX;
      const startY = position.y || clientY;
      dragState.startPosition = { x: startX, y: startY };
      dragState.updatePosition(startX, startY);

      // 设置状态为活跃
      dragState.status = 'active';
      this.activeDrags.set(dragId, dragState);

      // 触发拖拽开始事件
      eventBus.emit(DRAG_STATE_TYPES.DRAG_START, {
        dragId,
        dragState: dragState.getSummary(),
        source: 'onPanelDragStart',
        timestamp: Date.now()
      });

      console.log(`🎯 面板拖拽开始: ${panelId}, dragId: ${dragId}`);

      return dragId;
    } catch (error) {
      console.error('面板拖拽开始时出错:', error);
      eventBus.emit(DRAG_STATE_TYPES.DRAG_PERFORMANCE_MONITOR, {
        operation: 'onPanelDragStart',
        error: error.message,
        timestamp: Date.now()
      });
      return null;
    }
  }

  /**
   * 面板拖拽移动（从DockLayout.vue迁移）
   * @param {Object} eventData - 拖拽事件数据
   */
  onPanelDragMove(eventData) {
    try {
      const { 
        event, 
        dragId,
        panelId,
        element,
        type = 'panel',
        position = { x: 0, y: 0 },
        ...options 
      } = eventData;

      // 查找拖拽状态
      const activeDrag = this._findDragByIdOrPanelId(dragId, panelId);
      if (!activeDrag) {
        console.warn('找不到面板拖拽状态:', panelId);
        return false;
      }

      const dragState = activeDrag.dragState;
      if (dragState.status !== 'active') {
        console.warn('拖拽状态不活跃:', dragId);
        return false;
      }

      // 更新位置
      const clientX = event?.clientX || eventData.clientX;
      const clientY = event?.clientY || eventData.clientY;
      const currentX = position.x || clientX;
      const currentY = position.y || clientY;
      dragState.updatePosition(currentX, currentY);

      // 检测目标区域
      const targetElement = this._detectDragTarget(currentX, currentY);
      if (targetElement) {
        dragState.setTarget(targetElement.element, targetElement.area);
      }

      // 触发拖拽移动事件
      eventBus.emit(DRAG_STATE_TYPES.DRAG_MOVE, {
        dragId,
        dragState: dragState.getSummary(),
        position: { x: currentX, y: currentY },
        target: targetElement,
        source: 'onPanelDragMove',
        timestamp: Date.now()
      });

      return true;
    } catch (error) {
      console.error('面板拖拽移动时出错:', error);
      eventBus.emit(DRAG_STATE_TYPES.DRAG_PERFORMANCE_MONITOR, {
        operation: 'onPanelDragMove',
        error: error.message,
        timestamp: Date.now()
      });
      return false;
    }
  }

  /**
   * 面板拖拽结束（从DockLayout.vue迁移）
   * @param {Object} eventData - 拖拽事件数据
   */
  onPanelDragEnd(eventData) {
    try {
      const { 
        event, 
        dragId,
        panelId,
        type = 'panel',
        finalPosition = { x: 0, y: 0 },
        dropTarget,
        ...options 
      } = eventData;

      // 查找拖拽状态
      const activeDrag = this._findDragByIdOrPanelId(dragId, panelId);
      if (!activeDrag) {
        console.warn('找不到面板拖拽状态:', panelId);
        return false;
      }

      const dragState = activeDrag.dragState;
      
      // 更新最终位置
      const clientX = event?.clientX || eventData.clientX;
      const clientY = event?.clientY || eventData.clientY;
      const finalX = finalPosition.x || clientX;
      const finalY = finalPosition.y || clientY;
      dragState.updatePosition(finalX, finalY);

      // 设置最终状态
      dragState.status = 'completed';
      dragState.setTarget(dropTarget?.element || null, dropTarget?.area || null);

      // 触发拖拽结束事件
      eventBus.emit(DRAG_STATE_TYPES.DRAG_END, {
        dragId,
        dragState: dragState.getSummary(),
        finalPosition: { x: finalX, y: finalY },
        dropTarget,
        source: 'onPanelDragEnd',
        timestamp: Date.now()
      });

      // 移动到历史记录
      this.dragHistory.push(dragState.getSummary());
      this.activeDrags.delete(activeDrag.dragId);

      console.log(`✅ 面板拖拽结束: ${panelId}, dragId: ${dragId}`);

      return true;
    } catch (error) {
      console.error('面板拖拽结束时出错:', error);
      eventBus.emit(DRAG_STATE_TYPES.DRAG_PERFORMANCE_MONITOR, {
        operation: 'onPanelDragEnd',
        error: error.message,
        timestamp: Date.now()
      });
      return false;
    }
  }

  /**
   * TabPage拖拽开始（从DockLayout.vue迁移）
   * @param {Object} eventData - 拖拽事件数据
   */
  onPanelDragStartFromTabPage(eventData) {
    try {
      const { 
        event, 
        tabPageId,
        element,
        tabIndex,
        ...options 
      } = eventData;

      // 创建拖拽ID
      const dragId = `tabpage-${tabPageId}-${Date.now()}`;
      
      // 创建拖拽状态
      const dragState = new DragState(dragId, DRAG_AREA_TYPES.TABPAGE, element, {
        tabPageId,
        tabIndex,
        sourceType: 'tabpage',
        ...options
      });

      // 设置起始位置
      const startX = event.clientX;
      const startY = event.clientY;
      dragState.startPosition = { x: startX, y: startY };
      dragState.updatePosition(startX, startY);

      // 设置状态为活跃
      dragState.status = 'active';
      this.activeDrags.set(dragId, dragState);

      // 触发拖拽开始事件
      eventBus.emit(DRAG_STATE_TYPES.DRAG_START, {
        dragId,
        dragState: dragState.getSummary(),
        source: 'onPanelDragStartFromTabPage',
        timestamp: Date.now()
      });

      console.log(`🎯 TabPage拖拽开始: ${tabPageId}, dragId: ${dragId}`);

      return dragId;
    } catch (error) {
      console.error('TabPage拖拽开始时出错:', error);
      eventBus.emit(DRAG_STATE_TYPES.DRAG_PERFORMANCE_MONITOR, {
        operation: 'onPanelDragStartFromTabPage',
        error: error.message,
        timestamp: Date.now()
      });
      return null;
    }
  }

  /**
   * TabPage拖拽移动（从DockLayout.vue迁移）
   * @param {Object} eventData - 拖拽事件数据
   */
  onPanelDragMoveFromTabPage(eventData) {
    try {
      const { 
        event, 
        dragId,
        tabPageId,
        ...options 
      } = eventData;

      // 查找拖拽状态
      const activeDrag = this._findDragByIdOrTabPageId(dragId, tabPageId);
      if (!activeDrag) {
        console.warn('找不到TabPage拖拽状态:', tabPageId);
        return false;
      }

      const dragState = activeDrag.dragState;
      if (dragState.status !== 'active') {
        console.warn('拖拽状态不活跃:', dragId);
        return false;
      }

      // 更新位置
      const currentX = event.clientX;
      const currentY = event.clientY;
      dragState.updatePosition(currentX, currentY);

      // 检测目标区域
      const targetElement = this._detectDragTarget(currentX, currentY);
      if (targetElement) {
        dragState.setTarget(targetElement.element, targetElement.area);
      }

      // 触发拖拽移动事件
      eventBus.emit(DRAG_STATE_TYPES.DRAG_MOVE, {
        dragId,
        dragState: dragState.getSummary(),
        position: { x: currentX, y: currentY },
        target: targetElement,
        source: 'onPanelDragMoveFromTabPage',
        timestamp: Date.now()
      });

      return true;
    } catch (error) {
      console.error('TabPage拖拽移动时出错:', error);
      eventBus.emit(DRAG_STATE_TYPES.DRAG_PERFORMANCE_MONITOR, {
        operation: 'onPanelDragMoveFromTabPage',
        error: error.message,
        timestamp: Date.now()
      });
      return false;
    }
  }

  /**
   * TabPage拖拽结束（从DockLayout.vue迁移）
   * @param {Object} eventData - 拖拽事件数据
   */
  onPanelDragEndFromTabPage(eventData) {
    try {
      const { 
        event, 
        dragId,
        tabPageId,
        dropTarget,
        ...options 
      } = eventData;

      // 查找拖拽状态
      const activeDrag = this._findDragByIdOrTabPageId(dragId, tabPageId);
      if (!activeDrag) {
        console.warn('找不到TabPage拖拽状态:', tabPageId);
        return false;
      }

      const dragState = activeDrag.dragState;
      
      // 更新最终位置
      const finalX = event.clientX;
      const finalY = event.clientY;
      dragState.updatePosition(finalX, finalY);

      // 设置最终状态
      dragState.status = 'completed';
      dragState.setTarget(dropTarget?.element || null, dropTarget?.area || null);

      // 触发拖拽结束事件
      eventBus.emit(DRAG_STATE_TYPES.DRAG_END, {
        dragId,
        dragState: dragState.getSummary(),
        finalPosition: { x: finalX, y: finalY },
        dropTarget,
        source: 'onPanelDragEndFromTabPage',
        timestamp: Date.now()
      });

      // 移动到历史记录
      this.dragHistory.push(dragState.getSummary());
      this.activeDrags.delete(activeDrag.dragId);

      console.log(`✅ TabPage拖拽结束: ${tabPageId}, dragId: ${dragId}`);

      return true;
    } catch (error) {
      console.error('TabPage拖拽结束时出错:', error);
      eventBus.emit(DRAG_STATE_TYPES.DRAG_PERFORMANCE_MONITOR, {
        operation: 'onPanelDragEndFromTabPage',
        error: error.message,
        timestamp: Date.now()
      });
      return false;
    }
  }

  /**
   * 根据ID或Panel ID查找拖拽状态
   * @private
   * @param {string} dragId - 拖拽ID
   * @param {string} panelId - 面板ID
   * @returns {Object|null} 拖拽状态
   */
  _findDragByIdOrPanelId(dragId, panelId) {
    // 首先尝试通过dragId查找
    if (dragId && this.activeDrags.has(dragId)) {
      return { dragId, dragState: this.activeDrags.get(dragId) };
    }

    // 如果找不到，尝试通过panelId查找
    for (const [id, dragState] of this.activeDrags.entries()) {
      if (dragState.options.panelId === panelId) {
        return { dragId: id, dragState };
      }
    }

    return null;
  }

  /**
   * 根据ID或TabPage ID查找拖拽状态
   * @private
   * @param {string} dragId - 拖拽ID
   * @param {string} tabPageId - TabPage ID
   * @returns {Object|null} 拖拽状态
   */
  _findDragByIdOrTabPageId(dragId, tabPageId) {
    // 首先尝试通过dragId查找
    if (dragId && this.activeDrags.has(dragId)) {
      return { dragId, dragState: this.activeDrags.get(dragId) };
    }

    // 如果找不到，尝试通过tabPageId查找
    for (const [id, dragState] of this.activeDrags.entries()) {
      if (dragState.options.tabPageId === tabPageId) {
        return { dragId: id, dragState };
      }
    }

    return null;
  }

  /**
   * 根据ID或Area ID查找拖拽状态
   * @private
   * @param {string} dragId - 拖拽ID
   * @param {string} areaId - Area ID
   * @returns {Object|null} 拖拽状态
   */
  _findDragByIdOrAreaId(dragId, areaId) {
    // 首先尝试通过dragId查找
    if (dragId && this.activeDrags.has(dragId)) {
      return { dragId, dragState: this.activeDrags.get(dragId) };
    }

    // 如果找不到，尝试通过areaId查找
    for (const [id, dragState] of this.activeDrags.entries()) {
      if (dragState.options.areaId === areaId) {
        return { dragId: id, dragState };
      }
    }

    return null;
  }

  /**
   * 检测拖拽目标
   * @private
   * @param {number} x - X坐标
   * @param {number} y - Y坐标
   * @returns {Object|null} 目标信息
   */
  _detectDragTarget(x, y) {
    try {
      // 这里可以实现具体的拖拽目标检测逻辑
      // 例如：检测鼠标下的元素类型和区域
      
      // 验证坐标是否为有限值，避免elementFromPoint抛出错误
      if (!Number.isFinite(x) || !Number.isFinite(y)) {
        console.warn('检测拖拽目标时坐标无效:', { x, y });
        return null;
      }
      
      // 简化实现：检查坐标是否在预设区域内
      const targetAreas = ['main-area', 'floating-area', 'hidden-area'];
      const detectedArea = targetAreas[Math.floor(Math.random() * targetAreas.length)];
      
      return {
        element: document.elementFromPoint(x, y),
        area: detectedArea,
        position: { x, y }
      };
    } catch (error) {
      console.error('检测拖拽目标时出错:', error);
      return null;
    }
  }

  /**
   * Area拖拽开始
   * @param {Object} eventData - 拖拽事件数据
   * @returns {string} 拖拽ID
   */
  onAreaDragStart(eventData) {
    try {
      const { 
        event, 
        areaId, 
        element,
        type = 'area',
        position = { x: 0, y: 0 },
        ...options 
      } = eventData;

      // 检查是否有其他活跃拖拽
      if (this.activeDrags.size > 0) {
        console.warn('检测到其他活跃拖拽，暂停之前的拖拽');
        this.cancelAllDrags();
      }

      // 创建拖拽ID
      const dragId = `area-${areaId}-${Date.now()}`;
      
      // 创建拖拽状态
      const dragState = new DragState(dragId, DRAG_AREA_TYPES.AREA, element, {
        areaId,
        sourceType: type,
        ...options
      });

      // 设置起始位置
      const clientX = event?.clientX || eventData.clientX;
      const clientY = event?.clientY || eventData.clientY;
      const startX = position.x || clientX;
      const startY = position.y || clientY;
      dragState.startPosition = { x: startX, y: startY };
      dragState.updatePosition(startX, startY);

      // 设置状态为活跃
      dragState.status = 'active';
      this.activeDrags.set(dragId, dragState);

      // 触发拖拽开始事件
      eventBus.emit(DRAG_STATE_TYPES.DRAG_START, {
        dragId,
        dragState: dragState.getSummary(),
        source: 'onAreaDragStart',
        timestamp: Date.now()
      });

      console.log(`🎯 区域拖拽开始: ${areaId}, dragId: ${dragId}`);

      return dragId;
    } catch (error) {
      console.error('区域拖拽开始时出错:', error);
      eventBus.emit(DRAG_STATE_TYPES.DRAG_PERFORMANCE_MONITOR, {
        operation: 'onAreaDragStart',
        error: error.message,
        timestamp: Date.now()
      });
      return null;
    }
  }
  
  /**
   * Area拖拽移动
   * @param {Object} eventData - 拖拽事件数据
   */
  onAreaDragMove(eventData) {
    try {
      const { 
        event, 
        dragId,
        areaId,
        element,
        type = 'area',
        position = { x: 0, y: 0 },
        ...options 
      } = eventData;

      // 查找拖拽状态
      const activeDrag = this._findDragByIdOrAreaId(dragId, areaId);
      if (!activeDrag) {
        console.warn('找不到区域拖拽状态:', areaId);
        return false;
      }

      const dragState = activeDrag.dragState;
      if (dragState.status !== 'active') {
        console.warn('拖拽状态不活跃:', dragId);
        return false;
      }

      // 更新位置
      const clientX = event?.clientX || eventData.clientX;
      const clientY = event?.clientY || eventData.clientY;
      const currentX = position.x || clientX;
      const currentY = position.y || clientY;
      dragState.updatePosition(currentX, currentY);

      // 检测目标区域
      const targetElement = this._detectDragTarget(currentX, currentY);
      if (targetElement) {
        dragState.setTarget(targetElement.element, targetElement.area);
      }

      // 触发拖拽移动事件
      eventBus.emit(DRAG_STATE_TYPES.DRAG_MOVE, {
        dragId,
        dragState: dragState.getSummary(),
        position: { x: currentX, y: currentY },
        target: targetElement,
        source: 'onAreaDragMove',
        timestamp: Date.now()
      });

      return true;
    } catch (error) {
      console.error('区域拖拽移动时出错:', error);
      eventBus.emit(DRAG_STATE_TYPES.DRAG_PERFORMANCE_MONITOR, {
        operation: 'onAreaDragMove',
        error: error.message,
        timestamp: Date.now()
      });
      return false;
    }
  }
  
  /**
   * Area拖拽结束
   * @param {Object} eventData - 拖拽事件数据
   */
  onAreaDragEnd(eventData) {
    try {
      const { 
        event, 
        dragId,
        areaId,
        type = 'area',
        finalPosition = { x: 0, y: 0 },
        dropTarget,
        ...options 
      } = eventData;

      // 查找拖拽状态
      const activeDrag = this._findDragByIdOrAreaId(dragId, areaId);
      if (!activeDrag) {
        console.warn('找不到区域拖拽状态:', areaId);
        return false;
      }

      const dragState = activeDrag.dragState;
      
      // 更新最终位置
      const clientX = event?.clientX || eventData.clientX;
      const clientY = event?.clientY || eventData.clientY;
      const finalX = finalPosition.x || clientX;
      const finalY = finalPosition.y || clientY;
      dragState.updatePosition(finalX, finalY);

      // 设置最终状态
      dragState.status = 'completed';
      dragState.setTarget(dropTarget?.element || null, dropTarget?.area || null);

      // 触发拖拽结束事件
      eventBus.emit(DRAG_STATE_TYPES.DRAG_END, {
        dragId,
        dragState: dragState.getSummary(),
        finalPosition: { x: finalX, y: finalY },
        dropTarget,
        source: 'onAreaDragEnd',
        timestamp: Date.now()
      });

      // 移动到历史记录
      this.dragHistory.push(dragState.getSummary());
      this.activeDrags.delete(activeDrag.dragId);

      console.log(`✅ 区域拖拽结束: ${areaId}, dragId: ${dragId}`);

      return true;
    } catch (error) {
      console.error('区域拖拽结束时出错:', error);
      eventBus.emit(DRAG_STATE_TYPES.DRAG_PERFORMANCE_MONITOR, {
        operation: 'onAreaDragEnd',
        error: error.message,
        timestamp: Date.now()
      });
      return false;
    }
  }
}

// 立即创建单例实例，避免并发初始化问题
const dragStateManager = new DragStateManager();

// 便捷操作函数
export const dragStateActions = {
  /**
   * 获取拖拽状态
   * @param {string} dragId - 拖拽ID
   * @returns {Object} 拖拽状态
   */
  getDragState: (dragId) => dragStateManager.getDragState(dragId),

  /**
   * 获取所有活跃拖拽
   * @returns {Array} 活跃拖拽列表
   */
  getActiveDrags: () => dragStateManager.getActiveDrags(),

  /**
   * 获取拖拽历史
   * @param {number} limit - 限制数量
   * @returns {Array} 历史记录
   */
  getHistory: (limit = 100) => dragStateManager.getDragHistory(limit),

  /**
   * 获取统计信息
   * @returns {Object} 统计信息
   */
  getStats: () => dragStateManager.getDragStats(),

  /**
   * 设置调试模式
   * @param {boolean} enabled - 是否启用
   */
  setDebugMode: (enabled) => dragStateManager.setDebugMode(enabled),

  /**
   * 启用/禁用管理器
   * @param {boolean} enabled - 是否启用
   */
  setEnabled: (enabled) => dragStateManager.setEnabled(enabled),

  /**
   * 取消所有拖拽
   */
  cancelAll: () => dragStateManager.cancelAllDrags(),

  /**
   * 面板拖拽开始
   * @param {Object} eventData - 拖拽事件数据
   * @returns {string} 拖拽ID
   */
  onPanelDragStart: (eventData) => dragStateManager.onPanelDragStart(eventData),

  /**
   * 面板拖拽移动
   * @param {Object} eventData - 拖拽事件数据
   * @returns {boolean} 是否成功
   */
  onPanelDragMove: (eventData) => dragStateManager.onPanelDragMove(eventData),

  /**
   * 面板拖拽结束
   * @param {Object} eventData - 拖拽事件数据
   * @returns {boolean} 是否成功
   */
  onPanelDragEnd: (eventData) => dragStateManager.onPanelDragEnd(eventData),

  /**
   * TabPage拖拽开始
   * @param {Object} eventData - 拖拽事件数据
   * @returns {string} 拖拽ID
   */
  onPanelDragStartFromTabPage: (eventData) => dragStateManager.onPanelDragStartFromTabPage(eventData),

  /**
   * TabPage拖拽移动
   * @param {Object} eventData - 拖拽事件数据
   * @returns {boolean} 是否成功
   */
  onPanelDragMoveFromTabPage: (eventData) => dragStateManager.onPanelDragMoveFromTabPage(eventData),

  /**
   * TabPage拖拽结束
   * @param {Object} eventData - 拖拽事件数据
   * @returns {boolean} 是否成功
   */
  onPanelDragEndFromTabPage: (eventData) => dragStateManager.onPanelDragEndFromTabPage(eventData),

  /**
   * Area拖拽开始
   * @param {Object} eventData - 拖拽事件数据
   * @returns {string} 拖拽ID
   */
  onAreaDragStart: (eventData) => dragStateManager.onAreaDragStart(eventData),

  /**
   * Area拖拽移动
   * @param {Object} eventData - 拖拽事件数据
   * @returns {boolean} 是否成功
   */
  onAreaDragMove: (eventData) => dragStateManager.onAreaDragMove(eventData),

  /**
   * Area拖拽结束
   * @param {Object} eventData - 拖拽事件数据
   * @returns {boolean} 是否成功
   */
  onAreaDragEnd: (eventData) => dragStateManager.onAreaDragEnd(eventData),

  /**
   * Tab拖拽开始
   * @param {Object} eventData - 拖拽事件数据
   * @returns {string} 拖拽ID
   */
  onTabDragStart: (eventData) => dragStateManager.onPanelDragStartFromTabPage(eventData),

  /**
   * Tab拖拽移动
   * @param {Object} eventData - 拖拽事件数据
   * @returns {boolean} 是否成功
   */
  onTabDragMove: (eventData) => dragStateManager.onPanelDragMoveFromTabPage(eventData),

  /**
   * Tab拖拽结束
   * @param {Object} eventData - 拖拽事件数据
   * @returns {boolean} 是否成功
   */
  onTabDragEnd: (eventData) => dragStateManager.onPanelDragEndFromTabPage(eventData),

  /**
   * 初始化拖拽管理器
   */
  initialize: () => dragStateManager,

  /**
   * 销毁拖拽管理器
   */
  destroy: () => {
    if (dragStateManager) {
      // 清理拖拽管理器资源，先调用实例的destroy方法清理监听器
      try {
        dragStateManager.destroy();
      } catch (e) {
        console.warn('销毁拖拽状态管理器时出错:', e);
      }
      dragStateManager = null;
      console.log('🗑️ 拖拽状态管理器已销毁');
    }
  }
};

// 导出
export default {
  getInstance: () => dragStateManager,
  actions: dragStateActions
};
export { DragState };