JoyD/AutoRobot/Windows/Robot/Web/src/DockLayout/DockLayout.vue

<template>
  <div class="dock-layout" ref="dockLayoutRef" style="display: flex; flex-direction: column; position: relative; width: 100%; height: 100%;">
    <!-- 停靠指示器组件 - 设置高z-index确保显示在最顶层 -->
    <DockIndicator
      :visible="showDockIndicator"
      :target-rect="targetAreaRect"
      :mouse-position="currentMousePosition"
      :hide-edge-indicators="hideEdgeIndicators"
      @zone-active="onDockZoneActive"
      style="z-index: 9999;"
    />
    
    <!-- 主区域使用Render组件统一渲染 -->
    <div class="main-area-container" style="position: relative; width: 100%; height: 100%;">
      <Render
        :type="'Area'"
        :config="mainAreaConfig"
        ref="mainAreaRef"
      />
      
      <!-- ResizeBar直接渲染在主区域容器中 -->
      <ResizeBar
        v-for="resizeBar in mainAreaResizeBars"
        :key="resizeBar.id"
        :target-id="resizeBar.targetId"
        :direction="resizeBar.direction"
        :min-size="resizeBar.minSize"
        :max-size="resizeBar.maxSize"
        :initial-size="resizeBar.initialSize"
        @resize="(size) => handleMainAreaResizeBar(resizeBar.id, size)"
        @resize-start="() => handleMainAreaResizeBarStart(resizeBar.id)"
        @resize-end="() => handleMainAreaResizeBarEnd(resizeBar.id)"
        :style="getMainAreaResizeBarStyle(resizeBar)"
      />
    </div>
    
    <!-- 浮动区域使用Render组件统一渲染 -->
    <Render
      v-for="area in floatingAreas"
      :key="area.id"
      :type="'Area'"
      :config="area"
    />
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted, defineEmits } from 'vue'
import Area from './Area.vue';
import { getAreaHandler } from './handlers/AreaHandler';

// 获取AreaHandler实例
const areaHandler = getAreaHandler();

import Panel from './Panel.vue';
import TabPage from './TabPage.vue';
import DockIndicator from './DockIndicator.vue';
import ResizeBar from './ResizeBar.vue';
import Render from './Render.vue';
import { zIndexManager } from './dockLayers';
import { eventBus, EVENT_TYPES } from './eventBus';
import { areaActions } from './handlers/AreaHandler';
import { dragStateActions } from './handlers/DragStateManager';
import { panelActions } from './handlers/PanelHandler';
import { tabPageActions } from './handlers/TabPageHandler';
import { globalEventActions } from './handlers/GlobalEventManager';

// 定义组件可以发出的事件
const emit = defineEmits([
  'maximize',      // 面板最大化事件
  'toggleCollapse', // 折叠状态切换事件
  'toggleToolbar', // 工具栏切换事件
  'dragStart',     // 拖拽开始事件
  'dragMove',      // 拖拽移动事件
  'dragEnd'        // 拖拽结束事件
])

// 主区域状态
const windowState = ref('最大化')

// 主区域配置
const mainAreaConfig = ref({
  id: 'MainArea',
  title: '主区域',
  windowState: windowState.value,
  showTitleBar: false,
  children: {
    type: 'TabPage',
    children: []
  }
})

// 浮动区域列表 - 每个area包含panels数组
const floatingAreas = ref([])

// 容器引用
const dockLayoutRef = ref(null)
// 主区域引用
const mainAreaRef = ref(null)

// 调试模式开关
const debugMode = ref(false)

// 停靠指示器相关状态
const showDockIndicator = ref(false)
const currentMousePosition = ref({ x: 0, y: 0 })
const targetAreaRect = ref({ left: 0, top: 0, width: 0, height: 0 })
const activeDockZone = ref(null)

// 主区域ResizeBar列表
const mainAreaResizeBars = ref([])

// 检查主区域内是否有其他Area（简化版）
const hasAreasInMainContent = ref(false)

// 添加拖拽操作缓存，避免在每次移动事件中重复检测
const dragOperationCache = new Map();



/**
 * 检查是否应该操作区域而非面板
 * 当只有一个面板时，操作区域而不是面板
 * @param {string} areaId - Area ID
 * @returns {boolean} 是否应该操作区域
 */
const shouldOperateAreaInsteadOfPanel = (areaId) => {
  try {
    // 简化逻辑：直接检查区域的面板数量
    // 遍历所有子元素，统计Panel数量
    let panelCount = 0;
    
    const childrenArray = Array.isArray(area.children) ? area.children : [area.children];
    
    for (const child of childrenArray) {
      if (child.type === 'TabPage' && child.children) {
        const tabChildrenArray = Array.isArray(child.children) ? child.children : [child.children];
        for (const tabChild of tabChildrenArray) {
          if (tabChild.type === 'Panel') {
            panelCount++;
          }
        }
      }
    }
    
    // 如果区域中只有一个面板，返回true
    return panelCount === 1;
  } catch (error) {
    return false;
  }
};

/**
 * 检查是否应该操作区域而非面板（从GlobalEventManager.js迁移）
 * 当只有一个面板时，操作区域而不是面板
 * @param {Object} data - 事件数据
 * @returns {boolean} 是否应该操作区域
 */
const shouldOperateAreaInsteadOfPanelFromData = (data) => {
  const { panelId, areaId } = data;
  
  // 从AreaHandler获取区域状态
  const areaState = areaHandler.getAreaState(areaId);
  
  // 检查区域是否只有一个面板
  let panelCount = 0;
  if (areaState.children && areaState.children.type === 'TabPage') {
    const tabChildren = Array.isArray(areaState.children.children) ? areaState.children.children : [areaState.children.children];
    panelCount = tabChildren.filter(child => child.type === 'Panel').length;
  }
  
  // 如果区域中只有一个面板，返回true
  return panelCount === 1;
};

const onCloseFloatingArea = (event) => {
  const id = event.areaId;
  areaActions.closeFloating(id);
  const index = floatingAreas.value.findIndex(a => a.id === id);
  if (index !== -1) {
    floatingAreas.value.splice(index, 1);
  }
};

// 保持旧的onUpdatePosition函数以兼容现有事件
const onUpdatePosition = (event) => {
  const id = event.areaId;
  // 处理不同事件类型的数据结构
  const position = event.position || event;
  const area = floatingAreas.value.find(a => a.id === id);
  if (area) {
    area.left = position.left;
    area.top = position.top;
  }
};

// 处理Area更新事件
const onAreaUpdated = (event) => {
  const id = event.areaId;
  const updates = event.updates;
  const area = floatingAreas.value.find(a => a.id === id);
  if (area) {
    // 合并更新到Area对象
    Object.assign(area, updates);
    
    // 如果是最大化状态变化，发送panel.maximize.sync事件
    if ('maximized' in updates || 'windowState' in updates) {
      // 查找该区域下的所有Panel
      const areaState = areaHandler.areaStateManager.getState(id);
      if (areaState && areaState.children) {
        const childrenArray = Array.isArray(areaState.children) ? areaState.children : [areaState.children];
        
        // 查找TabPage
        childrenArray.forEach(child => {
          if (child.type === 'TabPage' && child.children) {
            const tabChildrenArray = Array.isArray(child.children) ? child.children : [child.children];
            
            // 发送panel.maximize.sync事件给每个Panel
            tabChildrenArray.forEach(tabChild => {
              if (tabChild.type === 'Panel') {
                eventBus.emit(EVENT_TYPES.PANEL_MAXIMIZE_SYNC, {
                  panelId: tabChild.id,
                  areaId: id,
                  maximized: updates.maximized !== undefined ? updates.maximized : (updates.windowState === '最大化' || updates.windowState === 'maximized')
                }, { componentId: 'dock-layout' });
              }
            });
          }
        });
      }
    }
  }
};

const onMaximize = (event) => {
  const panelId = event.panelId;
  const areaId = event.areaId;
  
  if (shouldOperateAreaInsteadOfPanel(areaId)) {
    areaActions.toggleMaximize(areaId);
  } else {
    panelActions.maximize(panelId);
  }
};

const onPanelClose = (event) => {
  const areaId = event.areaId;
  const panelId = event.panelId;
  
  if (shouldOperateAreaInsteadOfPanel(areaId)) {
    onCloseFloatingArea({ areaId });
  } else {
    areaActions.closePanel(areaId, panelId);
    const area = floatingAreas.value.find(a => a.id === areaId);
    if (area && area.children) {
      for (const child of area.children) {
        if (child.type === 'TabPage' && child.children) {
          // 处理TabPage的children，可能是单个Panel或Panel数组
          const isArray = Array.isArray(child.children);
          const childrenArray = isArray ? child.children : [child.children];
          
          // 检查每个子项是否为Panel组件
          for (let i = 0; i < childrenArray.length; i++) {
            const item = childrenArray[i];
            if (item.type === 'Panel' && item.id === panelId) {
              // 从数组中移除Panel
              if (isArray) {
                child.children.splice(i, 1);
              } else {
                // 如果是单个Panel，移除整个TabPage
                const tabPageIndex = area.children.indexOf(child);
                if (tabPageIndex !== -1) {
                  area.children.splice(tabPageIndex, 1);
                }
                break;
              }
              
              // 如果Panel数组为空，移除TabPage
              if (child.children.length === 0) {
                const tabPageIndex = area.children.indexOf(child);
                if (tabPageIndex !== -1) {
                  area.children.splice(tabPageIndex, 1);
                }
              }
              break;
            }
          }
          break;
        }
      }
    }
  }
};

// 简单的拖拽事件处理
const handleMainAreaDragOver = (event) => {
  event.preventDefault();
  globalEventActions.handleDragOver('main-area', event);
};

const handleMainAreaDragLeave = () => {
  globalEventActions.handleDragLeave('main-area');
};

const handleAreaDragOver = (event) => {
  event.preventDefault();
  globalEventActions.handleDragOver('floating-area', event);
};

const handleAreaDragLeave = (event) => {
  globalEventActions.handleDragLeave('floating-area');
};

// 处理面板拖拽开始事件
const onPanelDragStart = async (event) => {
  console.log(`📈 收到面板拖拽开始事件:`, { event });
  
  // 检查是否应该操作区域而非面板，并缓存结果
  const shouldOperateArea = shouldOperateAreaInsteadOfPanelFromData(event);
  
  // 缓存检测结果，用于后续的拖拽移动和结束事件
  dragOperationCache.set(event.dragId, {
    shouldOperateArea,
    timestamp: Date.now()
  });
  
  if (shouldOperateArea) {
    // 转换为区域拖拽事件
    const areaDragStartData = {
      ...event,
      eventType: 'area.drag.start',
      dragId: event.dragId || `area_${Date.now()}_${Math.random().toString(36).substring(2, 9)}`
    };
    
    // 发送区域拖拽开始事件
    eventBus.emit('area.drag.start', areaDragStartData, { componentId: 'dock-layout' });
  } else {
    // 发送面板拖拽状态更新事件（下降事件）
    eventBus.emit(EVENT_TYPES.PANEL_DRAG_STATE_UPDATE, {
      ...event,
      status: 'active'
    }, { componentId: 'dock-layout' });
  }
};

// 处理面板拖拽移动事件
const onPanelDragMove = async (event) => {
  console.log(`📈 收到面板拖拽移动事件:`, { event });
  
  // 从缓存中获取单面板检测结果，避免重复检测
  const cache = dragOperationCache.get(event.dragId);
  const shouldOperateArea = cache ? cache.shouldOperateArea : shouldOperateAreaInsteadOfPanelFromData(event);
  
  if (shouldOperateArea) {
    // 转换为区域拖拽移动事件
    const areaDragMoveData = {
      ...event,
      eventType: 'area.drag.move'
    };
    
    // 发送区域拖拽移动事件
    eventBus.emit('area.drag.move', areaDragMoveData, { componentId: 'dock-layout' });
  } else {
    // 发送面板拖拽状态更新事件（下降事件）
    eventBus.emit(EVENT_TYPES.PANEL_DRAG_STATE_UPDATE, {
      ...event,
      status: 'moving'
    }, { componentId: 'dock-layout' });
  }
};

// 处理面板拖拽结束事件
const onPanelDragEnd = async (event) => {
  console.log(`📈 收到面板拖拽结束事件:`, { event });
  
  // 从缓存中获取单面板检测结果
  const cache = dragOperationCache.get(event.dragId);
  const shouldOperateArea = cache ? cache.shouldOperateArea : shouldOperateAreaInsteadOfPanelFromData(event);
  
  if (shouldOperateArea) {
    // 转换为区域拖拽结束事件
    const areaDragEndData = {
      ...event,
      eventType: 'area.drag.end'
    };
    
    // 发送区域拖拽结束事件
    eventBus.emit('area.drag.end', areaDragEndData, { componentId: 'dock-layout' });
  } else {
    // 发送面板拖拽状态更新事件（下降事件）
    eventBus.emit(EVENT_TYPES.PANEL_DRAG_STATE_UPDATE, {
      ...event,
      status: 'ended'
    }, { componentId: 'dock-layout' });
  }
  
  // 清理缓存
  dragOperationCache.delete(event.dragId);
};



// 监听区域拖拽状态更新下降事件
const onAreaDragStateUpdate = (event) => {
  const id = event.areaId;
  const status = event.status;
  const area = floatingAreas.value.find(a => a.id === id);
  if (area) {
    area.isDragging = status === 'active' || status === 'moving';
  }
};

// 其他事件处理方法
const onDockZoneActive = (zone) => {
  activeDockZone.value = zone;
};

const onPanelMaximizeSync = ({ areaId, maximized }) => {
  // 使用areaActions.updateState来更新区域的最大化状态
  areaActions.updateState(areaId, { maximized });
};

const onAreaMerged = (event) => {
  areaActions.handleAreaMerged(event.areaId);
};

// 标签页切换事件处理
const onTabChange = async (data) => {
  try {
    await tabPageActions.switch(data.tabPageId, data.areaId, data.fromTabPageId);
  } catch (error) {
    console.error('Failed to handle tab change:', error);
  }
};

const onTabClose = async (data) => {
  try {
    await tabPageActions.requestClose(data.tabPageId, data.areaId);
  } catch (error) {
    console.error('Failed to handle tab close:', error);
  }
};

const onTabAdd = async (data) => {
  try {
    await tabPageActions.create(data.areaId, data.config);
  } catch (error) {
    console.error('Failed to handle tab add:', error);
  }
};

// ResizeBar相关处理方法
const handleMainAreaResizeBar = (id, size) => {
  areaActions.handleResize(id, size);
};

const handleMainAreaResizeBarStart = (id) => {
  areaActions.handleResizeStart(id);
};

const handleMainAreaResizeBarEnd = (id) => {
  areaActions.handleResizeEnd(id);
};

// 处理Area合并请求
const handleAreaMergeRequest = (data) => {
  const { sourceArea, targetAreaId } = data;
  
  // 查找目标Area
  const targetArea = floatingAreas.value.find(area => area.id === targetAreaId);
  if (!targetArea) return;
  
  // 直接修改目标Area的children配置
  if (!targetArea.children) {
    targetArea.children = [];
  }
  
  // 处理源Area的children
  if (sourceArea.children) {
    const childrenArray = Array.isArray(sourceArea.children) ? sourceArea.children : [sourceArea.children];
    childrenArray.forEach(child => {
      if (child.type === 'TabPage') {
        // 添加到目标Area的children中
        if (!Array.isArray(targetArea.children)) {
          targetArea.children = [targetArea.children];
        }
        targetArea.children.push(child);
      }
    });
  }
  
  // 从floatingAreas中移除源Area
  floatingAreas.value = floatingAreas.value.filter(area => area.id !== sourceArea.id);
};

const getMainAreaResizeBarStyle = (resizeBar) => {
  return areaActions.getResizeBarStyle(resizeBar);
};

// 计算属性
const hideEdgeIndicators = computed(() => {
  return !hasAreasInMainContent.value;
});

// 设置事件总线监听器
const setupEventListeners = () => {
  // 创建一个数组来保存所有的取消订阅函数
  const unsubscribeFunctions = [];
  
  // 上升事件处理 - 统一由handleRisingEvent处理所有上升事件
  const risingEvents = [
    // 面板拖拽事件
    EVENT_TYPES.PANEL_DRAG_START,
    EVENT_TYPES.PANEL_DRAG_MOVE,
    EVENT_TYPES.PANEL_DRAG_END,
    EVENT_TYPES.PANEL_DRAG_CANCEL,
    // 面板调整大小事件
    EVENT_TYPES.PANEL_RESIZE_START,
    EVENT_TYPES.PANEL_RESIZE_MOVE,
    EVENT_TYPES.PANEL_RESIZE_END,
    // 区域拖拽事件
    EVENT_TYPES.AREA_DRAG_START,
    EVENT_TYPES.AREA_DRAG_MOVE,
    EVENT_TYPES.AREA_DRAG_END,
    EVENT_TYPES.AREA_DRAG_CANCEL,
    // 区域调整大小事件
    EVENT_TYPES.AREA_RESIZE_START,
    EVENT_TYPES.AREA_RESIZE_MOVE,
    EVENT_TYPES.AREA_RESIZE_END
  ];
  
  // 订阅所有上升事件，统一由handleRisingEvent处理
  risingEvents.forEach(eventType => {
    unsubscribeFunctions.push(eventBus.on(eventType, handleRisingEvent, { componentId: 'dock-layout' }));
  });
  
  // Area相关事件

  unsubscribeFunctions.push(eventBus.on(EVENT_TYPES.AREA_DRAG_OVER, handleAreaDragOver, { componentId: 'dock-layout' }));
  unsubscribeFunctions.push(eventBus.on(EVENT_TYPES.AREA_DRAG_LEAVE, handleAreaDragLeave, { componentId: 'dock-layout' }));
  unsubscribeFunctions.push(eventBus.on(EVENT_TYPES.AREA_MERGE_REQUEST, handleAreaMergeRequest, { componentId: 'dock-layout' }));
  unsubscribeFunctions.push(eventBus.on(EVENT_TYPES.AREA_UPDATED, onAreaUpdated, { componentId: 'dock-layout' }));


  
  // Tab相关事件
  unsubscribeFunctions.push(eventBus.on(EVENT_TYPES.TAB_CHANGE, onTabChange, { componentId: 'dock-layout' }));
  unsubscribeFunctions.push(eventBus.on(EVENT_TYPES.TAB_CLOSE, onTabClose, { componentId: 'dock-layout' }));
  unsubscribeFunctions.push(eventBus.on(EVENT_TYPES.TAB_ADD, onTabAdd, { componentId: 'dock-layout' }));
  
  // Panel相关事件
  unsubscribeFunctions.push(eventBus.on(EVENT_TYPES.PANEL_TOGGLE_COLLAPSE, () => emit('toggleCollapse'), { componentId: 'dock-layout' }));
  unsubscribeFunctions.push(eventBus.on(EVENT_TYPES.PANEL_MAXIMIZE, onMaximize, { componentId: 'dock-layout' }));
  unsubscribeFunctions.push(eventBus.on(EVENT_TYPES.PANEL_CLOSE_REQUEST, onCloseFloatingArea, { componentId: 'dock-layout' }));
  unsubscribeFunctions.push(eventBus.on(EVENT_TYPES.PANEL_CLOSE, onPanelClose, { componentId: 'dock-layout' }));
  unsubscribeFunctions.push(eventBus.on(EVENT_TYPES.PANEL_TOGGLE_TOOLBAR, () => emit('toggleToolbar'), { componentId: 'dock-layout' }));
  unsubscribeFunctions.push(eventBus.on(EVENT_TYPES.PANEL_MAXIMIZE_SYNC, onPanelMaximizeSync, { componentId: 'dock-layout' }));
  // 单面板检测事件
  unsubscribeFunctions.push(eventBus.on(EVENT_TYPES.PANEL_CHECK_SINGLE_PANEL, onCheckSinglePanel, { componentId: 'dock-layout' }));
  // Area位置更新事件
  unsubscribeFunctions.push(eventBus.on(EVENT_TYPES.AREA_POSITION_UPDATE, onAreaPositionUpdate, { componentId: 'dock-layout' }));
  // Area z-index更新事件
  unsubscribeFunctions.push(eventBus.on(EVENT_TYPES.Z_INDEX_UPDATE, onZIndexUpdate, { componentId: 'dock-layout' }));
  
  // Resize相关事件
  unsubscribeFunctions.push(eventBus.on(EVENT_TYPES.RESIZE_START, () => emit('dragStart'), { componentId: 'dock-layout' }));
  unsubscribeFunctions.push(eventBus.on(EVENT_TYPES.RESIZE_MOVE, () => emit('dragMove'), { componentId: 'dock-layout' }));
  unsubscribeFunctions.push(eventBus.on(EVENT_TYPES.RESIZE_END, () => emit('dragEnd'), { componentId: 'dock-layout' }));
  
  // Window相关事件
  unsubscribeFunctions.push(eventBus.on(EVENT_TYPES.WINDOW_STATE_CHANGE, (event) => {
    const areaId = event.areaId;
    const state = event.state;
    const position = event.position;
    
    const area = floatingAreas.value.find(a => a.id === areaId);
    if (area) {
      area.windowState = state;
      if (position) {
        area.left = position.left;
        area.top = position.top;
        area.width = position.width;
        area.height = position.height;
      }
    }
  }, { componentId: 'dock-layout' }));
  
  // 自定义事件
  unsubscribeFunctions.push(eventBus.on(EVENT_TYPES.AREA_MERGED, onAreaMerged, { componentId: 'dock-layout' }));
  unsubscribeFunctions.push(eventBus.on(EVENT_TYPES.DOCK_ZONE_ACTIVE, (event) => onDockZoneActive(event.zoneId), { componentId: 'dock-layout' }));
  
  return unsubscribeFunctions;
};

// 保存取消订阅函数数组
const unsubscribeFunctions = ref([]);

// 清理函数
const cleanup = () => {
  // 清理事件监听器和其他资源
  console.log('🧹 开始清理DockLayout资源');
  
  // 清理事件监听器
  console.log('🔇 开始清理事件监听器');
  unsubscribeFunctions.value.forEach(unsubscribe => unsubscribe());
  unsubscribeFunctions.value = [];
  
  // 清理浮动区域
  floatingAreas.value = [];
  
  // 清理隐藏区域
  hiddenAreas.value = [];
  
  // 清理主区域ResizeBar
  mainAreaResizeBars.value = [];
  
  // 清理停靠指示器状态
  showDockIndicator.value = false;
  currentMousePosition.value = { x: 0, y: 0 };
  targetAreaRect.value = { left: 0, top: 0, width: 0, height: 0 };
  activeDockZone.value = null;
  
  console.log('✅ DockLayout资源清理完成');
};

// 轻量级隐藏区域管理
const hiddenAreas = ref([]);

// 隐藏Area管理方法
// 将Area添加到隐藏列表
const addAreaToHiddenList = (area) => {
  // 确保area有唯一标识符
  if (!area.id) {
    area.id = `hidden-area-${Date.now()}`
  }
  
  // 检查是否已经存在于隐藏列表中
  const existingIndex = hiddenAreas.value.findIndex(h => h.id === area.id)
  if (existingIndex === -1) {
    // 添加到隐藏列表
    hiddenAreas.value.push({
      ...area,
      hiddenAt: new Date().toISOString()
    })
  }
}

// 移除重复的详细实现函数 - 使用轻量级代理

/**
 * 处理并排停靠逻辑
 * 当主区域内已有Area时，压缩目标Area并创建并排布局
 * @param {Object} sourceArea - 源Area对象
 * @param {string} dockZone - 停靠方向
 * @returns {Object} 处理结果 {success: boolean, message: string}
 */
// 轻量级并排停靠代理
const handleSideBySideDocking = () => '轻量级并排停靠代理'

// 轻量级ResizeBar添加代理
const addResizeBarForSideBySideLayout = () => '轻量级ResizeBar代理'

// 轻量级ResizeBar事件代理
const handleResizeBarResize = () => '轻量级ResizeBar调整代理'

// 轻量级ResizeBar尺寸调整代理
const handleResizeBarResizeStart = () => '轻量级ResizeBar调整开始代理'
const handleResizeBarResizeEnd = () => '轻量级ResizeBar调整结束代理'

// 轻量级尺寸调整代理
const handleHorizontalResize = () => '轻量级水平调整代理'
const handleVerticalResize = () => '轻量级垂直调整代理'

// 轻量级Area查找代理
const findFirstMainArea = () => '轻量级主区域查找代理'
const getOrCreateTargetArea = () => '轻量级目标区域获取代理'

// 轻量级并排布局代理
const createSideBySideLayout = () => '轻量级并排布局代理'
const compressTargetArea = () => '轻量级压缩目标区域代理'
const adjustSourceAreaForLayout = () => '轻量级布局调整代理'

// 添加浮动面板
const addFloatingPanel = (panel) => {
  // 确保panel参数存在，否则使用默认面板对象
  const safePanel = panel || {
    id: `panel-${Date.now()}`,
    title: '新建面板',
    content: {
      color: '#435d9c',
      title: '默认面板内容',
      type: 'default',
      timestamp: new Date().toLocaleString(),
      data: [
        { id: 1, label: '示例数据1', value: '123' },
        { id: 2, label: '示例数据2', value: '456' },
        { id: 3, label: '示例数据3', value: '789' }
      ]
    }
  };
  
  // 生成唯一的areaId
  const areaId = `area-${Date.now()}`;
  
  const newArea = {
    id: areaId,
    type: 'floating', // 添加浮动类型标识
    left: 100 + Math.random() * 200,
    top: 100 + Math.random() * 200,
    width: 300,
    height: 200,
    zIndex: zIndexManager.getFloatingAreaZIndex(areaId),
    // 使用children结构以兼容Render组件的渲染逻辑
    children: {
      type: 'TabPage',
      tabPosition: 'bottom',
      children: [
        {
          ...safePanel,
          id: `panel-${Date.now()}-1`,
          title: panel?.title || '面板1',
          type: 'Panel',
          content: {
            ...safePanel.content,
            title: '面板1内容',
            data: [
              { id: 1, label: '面板1数据1', value: '数据1' },
              { id: 2, label: '面板1数据2', value: '数据2' }
            ]
          }
        },
        {
          ...safePanel,
          id: `panel-${Date.now()}-2`,
          title: '面板2',
          type: 'Panel',
          content: {
            ...safePanel.content,
            title: '面板2内容',
            color: '#68217A',
            data: [
              { id: 3, label: '面板2数据1', value: '数据3' },
              { id: 4, label: '面板2数据2', value: '数据4' }
            ]
          }
        }
      ]
    }
  }
  
  // 添加到DockLayout的floatingAreas数组中用于渲染
  floatingAreas.value.push(newArea)
  
  // 同时注册到AreaHandler的状态管理中，确保事件处理能正常进行
  areaActions.createFloating(newArea)
  
  return newArea.id
}

// 查找或创建主区域TabPage
const findOrCreateMainAreaTabPage = () => {
  // 返回主区域的tabPage信息
  return {
    id: 'main-area-tabpage',
    title: '主区域',
    items: []
  };
}

// 处理上升事件（用户触发的原始事件）- 从GlobalEventManager.js迁移
const handleRisingEvent = async (data, event) => {
  // 从事件对象中获取事件类型
  const eventType = event.type;
  
  try {
    // 总是输出日志，便于调试
    console.log(`📈 收到上升事件: ${eventType}`, { data });
    
    // 根据事件类型分发到不同的处理方法
    switch (eventType) {
      // 面板拖拽事件
      case EVENT_TYPES.PANEL_DRAG_START:
        await handlePanelDragStart(data);
        break;
      case EVENT_TYPES.PANEL_DRAG_MOVE:
        await handlePanelDragMove(data);
        break;
      case EVENT_TYPES.PANEL_DRAG_END:
        await handlePanelDragEnd(data);
        break;
      case EVENT_TYPES.PANEL_DRAG_CANCEL:
        await handlePanelDragCancel(data);
        break;
      // 面板resize事件
      case EVENT_TYPES.PANEL_RESIZE_START:
        await handlePanelResizeStart(data);
        break;
      case EVENT_TYPES.PANEL_RESIZE_MOVE:
        await handlePanelResizeMove(data);
        break;
      case EVENT_TYPES.PANEL_RESIZE_END:
        await handlePanelResizeEnd(data);
        break;
      // 区域拖拽事件
      case EVENT_TYPES.AREA_DRAG_START:
        await handleAreaDragStart(data);
        break;
      case EVENT_TYPES.AREA_DRAG_MOVE:
        await handleAreaDragMove(data);
        break;
      case EVENT_TYPES.AREA_DRAG_END:
        await handleAreaDragEnd(data);
        break;
      case EVENT_TYPES.AREA_DRAG_CANCEL:
        await handleAreaDragCancel(data);
        break;
      // 区域resize事件
      case EVENT_TYPES.AREA_RESIZE_START:
        await handleAreaResizeStart(data);
        break;
      case EVENT_TYPES.AREA_RESIZE_MOVE:
        await handleAreaResizeMove(data);
        break;
      case EVENT_TYPES.AREA_RESIZE_END:
        await handleAreaResizeEnd(data);
        break;
      // 标签页拖拽事件
      case EVENT_TYPES.TABPAGE_DRAG_START:
        await handleTabPageDragStart(data);
        break;
      case EVENT_TYPES.TABPAGE_DRAG_MOVE:
        await handleTabPageDragMove(data);
        break;
      case EVENT_TYPES.TABPAGE_DRAG_END:
        await handleTabPageDragEnd(data);
        break;
      case EVENT_TYPES.TABPAGE_DRAG_CANCEL:
        await handleTabPageDragCancel(data);
        break;
      // 默认处理
      default:
        console.log(`🌐 全局事件: ${eventType}`, data);
    }
  } catch (error) {
    console.error(`❌ 上升事件处理错误 (${eventType}):`, error);
  }
};

// 面板拖拽开始处理
const handlePanelDragStart = async (data) => {
  if (debugMode) {
    console.log('👋 处理面板拖拽开始:', data);
  }
  
  // 检查是否应该操作区域而非面板，并缓存结果
  const shouldOperateArea = shouldOperateAreaInsteadOfPanelFromData(data);
  
  // 缓存检测结果，用于后续的拖拽移动和结束事件
  dragOperationCache.set(data.dragId, {
    shouldOperateArea,
    timestamp: Date.now()
  });
  
  if (shouldOperateArea) {
    // 转换为区域拖拽事件
    const areaDragStartData = {
      ...data,
      eventType: 'area.drag.start',
      dragId: data.dragId || `area_${Date.now()}_${Math.random().toString(36).substring(2, 9)}`
    };
    
    // 发送区域拖拽开始事件
    eventBus.emit('area.drag.start', areaDragStartData);
  } else {
    // 发送面板拖拽状态更新事件（下降事件）
    eventBus.emit('panel.drag.state.update', {
      ...data,
      status: 'active'
    });
  }
};

// 面板拖拽移动处理
const handlePanelDragMove = async (data) => {
  if (debugMode) {
    console.log('✋ 处理面板拖拽移动:', data);
  }
  
  // 从缓存中获取单面板检测结果，避免重复检测
  const cache = dragOperationCache.get(data.dragId);
  const shouldOperateArea = cache ? cache.shouldOperateArea : shouldOperateAreaInsteadOfPanelFromData(data);
  
  if (shouldOperateArea) {
    // 转换为区域拖拽移动事件
    const areaDragMoveData = {
      ...data,
      eventType: 'area.drag.move'
    };
    
    // 发送区域拖拽移动事件
    eventBus.emit('area.drag.move', areaDragMoveData);
  } else {
    // 发送面板拖拽状态更新事件（下降事件）
    eventBus.emit('panel.drag.state.update', {
      ...data,
      status: 'moving'
    });
  }
};

// 面板拖拽结束处理
const handlePanelDragEnd = async (data) => {
  if (debugMode) {
    console.log('✋ 处理面板拖拽结束:', data);
  }
  
  // 从缓存中获取单面板检测结果
  const cache = dragOperationCache.get(data.dragId);
  const shouldOperateArea = cache ? cache.shouldOperateArea : shouldOperateAreaInsteadOfPanelFromData(data);
  
  if (shouldOperateArea) {
    // 转换为区域拖拽结束事件
    const areaDragEndData = {
      ...data,
      eventType: 'area.drag.end'
    };
    
    // 发送区域拖拽结束事件
    eventBus.emit('area.drag.end', areaDragEndData);
  } else {
    // 发送面板拖拽状态更新事件（下降事件）
    eventBus.emit('panel.drag.state.update', {
      ...data,
      status: 'ended'
    });
  }
  
  // 清理缓存
  dragOperationCache.delete(data.dragId);
};

// 面板拖拽取消处理
const handlePanelDragCancel = async (data) => {
  if (debugMode) {
    console.log('✋ 处理面板拖拽取消:', data);
  }
  
  // 发送面板拖拽状态更新事件（下降事件）
  eventBus.emit('panel.drag.state.update', {
    ...data,
    status: 'cancelled'
  });
  
  // 清理缓存
  dragOperationCache.delete(data.dragId);
};

// 区域拖拽开始处理
const handleAreaDragStart = async (data) => {
  if (debugMode) {
    console.log('👋 处理区域拖拽开始:', data);
  }
  
  // 发送区域拖拽状态更新事件（下降事件）
  eventBus.emit('area.drag.state.update', {
    ...data,
    status: 'active'
  });
};

// 区域拖拽移动处理
const handleAreaDragMove = async (data) => {
  if (debugMode) {
    console.log('✋ 处理区域拖拽移动:', data);
  }
  
  // 发送区域拖拽状态更新事件（下降事件）
  eventBus.emit('area.drag.state.update', {
    ...data,
    status: 'moving'
  });
  
  // 发送区域位置更新事件（下降事件）
  eventBus.emit('area.position.update', {
    ...data,
    position: data.position
  });
};

// 区域拖拽结束处理
const handleAreaDragEnd = async (data) => {
  if (debugMode) {
    console.log('✋ 处理区域拖拽结束:', data);
  }
  
  // 发送区域拖拽状态更新事件（下降事件）
  eventBus.emit('area.drag.state.update', {
    ...data,
    status: 'ended'
  });
};

// 区域拖拽取消处理
const handleAreaDragCancel = async (data) => {
  if (debugMode) {
    console.log('✋ 处理区域拖拽取消:', data);
  }
  
  // 发送区域拖拽状态更新事件（下降事件）
  eventBus.emit('area.drag.state.update', {
    ...data,
    status: 'cancelled'
  });
};

// 面板resize处理
const handlePanelResizeStart = async (data) => {
  if (debugMode) {
    console.log('👋 处理面板resize开始:', data);
  }
  
  eventBus.emit(EVENT_TYPES.AREA_RESIZE_START, {
    ...data,
    resizeType: 'panel'
  });
};

const handlePanelResizeMove = async (data) => {
  if (debugMode) {
    console.log('✋ 处理面板resize移动:', data);
  }
  
  eventBus.emit(EVENT_TYPES.AREA_RESIZE, {
    ...data,
    resizeType: 'panel'
  });
  
  eventBus.emit(EVENT_TYPES.AREA_RESIZE_MOVE, {
    ...data,
    resizeType: 'panel'
  });
};

const handlePanelResizeEnd = async (data) => {
  if (debugMode) {
    console.log('✋ 处理面板resize结束:', data);
  }
  
  eventBus.emit(EVENT_TYPES.AREA_RESIZE_END, {
    ...data,
    resizeType: 'panel'
  });
};

// 区域resize处理
const handleAreaResizeStart = async (data) => {
  if (debugMode) {
    console.log('👋 处理区域resize开始:', data);
  }
  
  eventBus.emit(EVENT_TYPES.AREA_RESIZE_START, {
    ...data,
    resizeType: 'area'
  });
};

const handleAreaResizeMove = async (data) => {
  if (debugMode) {
    console.log('✋ 处理区域resize移动:', data);
  }
  
  eventBus.emit(EVENT_TYPES.AREA_RESIZE, {
    ...data,
    resizeType: 'area'
  });
  
  eventBus.emit(EVENT_TYPES.AREA_RESIZE_MOVE, {
    ...data,
    resizeType: 'area'
  });
};

const handleAreaResizeEnd = async (data) => {
  if (debugMode) {
    console.log('✋ 处理区域resize结束:', data);
  }
  
  eventBus.emit(EVENT_TYPES.AREA_RESIZE_END, {
    ...data,
    resizeType: 'area'
  });
};

// 标签页拖拽处理
const handleTabPageDragStart = async (data) => {
  if (debugMode) {
    console.log('👋 处理标签页拖拽开始:', data);
  }
  
  // 标签页拖拽逻辑
  eventBus.emit('tabpage.drag.state.update', {
    ...data,
    status: 'active'
  });
};

const handleTabPageDragMove = async (data) => {
  if (debugMode) {
    console.log('✋ 处理标签页拖拽移动:', data);
  }
  
  eventBus.emit('tabpage.drag.state.update', {
    ...data,
    status: 'moving'
  });
};

const handleTabPageDragEnd = async (data) => {
  if (debugMode) {
    console.log('✋ 处理标签页拖拽结束:', data);
  }
  
  eventBus.emit('tabpage.drag.state.update', {
    ...data,
    status: 'ended'
  });
};

const handleTabPageDragCancel = async (data) => {
  if (debugMode) {
    console.log('✋ 处理标签页拖拽取消:', data);
  }
  
  eventBus.emit('tabpage.drag.state.update', {
    ...data,
    status: 'cancelled'
  });
};

// 单面板检测处理函数
const onCheckSinglePanel = (event) => {
  // 使用新的shouldOperateAreaInsteadOfPanelFromData函数检查是否为单面板
  const isSinglePanel = shouldOperateAreaInsteadOfPanelFromData(event);
  
  // 发送检测结果
  eventBus.emit(EVENT_TYPES.PANEL_SINGLE_PANEL_RESULT, {
    areaId: event.areaId,
    panelId: event.panelId,
    isSinglePanel
  }, { componentId: 'dock-layout' });
};

// Area resize事件处理函数
const onAreaResizeStart = (event) => {
  const { areaId, direction, position } = event;
  
  // AreaHandler已经监听了AREA_RESIZE_START事件，会自动处理
  // 只需要更新本地floatingAreas中的状态
};

const onAreaResizeMove = (event) => {
  const { areaId, direction, size, position } = event;
  
  const area = floatingAreas.value.find(a => a.id === areaId);
  if (area) {
    if (direction.includes('right') || direction.includes('left')) {
      area.width = size.width;
      if (direction.includes('left')) {
        area.left = position.left;
      }
    }
    if (direction.includes('bottom') || direction.includes('top')) {
      area.height = size.height;
      if (direction.includes('top')) {
        area.top = position.top;
      }
    }
  }
};

// 处理Area位置更新事件
const onAreaPositionUpdate = (event) => {
  const { areaId, left, top, width, height } = event;
  
  const area = floatingAreas.value.find(a => a.id === areaId);
  if (area) {
    area.left = left;
    area.top = top;
    if (width !== undefined) {
      area.width = width;
    }
    if (height !== undefined) {
      area.height = height;
    }
  }
};

// 处理Area z-index更新事件
const onZIndexUpdate = (event) => {
  const { areaId, zIndex } = event;
  
  const area = floatingAreas.value.find(a => a.id === areaId);
  if (area) {
    area.zIndex = zIndex;
  }
};

const onAreaResizeEnd = (event) => {
  const { areaId, direction, finalPosition } = event;
  
  // AreaHandler已经监听了AREA_RESIZE_END事件，会自动处理
  // 只需要更新本地floatingAreas中的状态
};

// 轻量级生命周期处理
onMounted(() => {
  // 初始化轻量级状态
  console.log('DockLayout component mounted');
  unsubscribeFunctions.value = setupEventListeners();
})

// 组件卸载时清理资源
onUnmounted(() => {
  // 清理事件监听器和其他资源
  console.log('DockLayout component unmounted');
  cleanup();
  // 逐个移除事件监听器
  unsubscribeFunctions.value.forEach(unsubscribe => unsubscribe());
  unsubscribeFunctions.value = [];
})

// 暴露轻量级接口给父组件
defineExpose({
  // 基础数据
  floatingAreas,
  hiddenAreas,
  
  // 核心方法
  addFloatingPanel,
  findOrCreateMainAreaTabPage,
  
  // 轻量级代理方法（功能保留但简化）
  handleDockingEnding: () => '轻量级停靠处理代理',
  handleEdgeDocking: () => '轻量级边缘停靠代理',
  handleSideBySideDocking: () => '轻量级并排停靠代理',
  
  // ResizeBar轻量级代理
  addResizeBarForSideBySideLayout: () => '轻量级ResizeBar代理',
  handleResizeBarResize: () => '轻量级ResizeBar调整代理',
  
  // 隐藏列表轻量级代理
  getHiddenAreas: () => '轻量级隐藏列表代理',
  restoreAreaFromHidden: () => '轻量级恢复代理',
  removeFromHiddenList: () => '轻量级移除代理',
  clearHiddenList: () => '轻量级清空代理',
})
</script>

<style scoped>
.dock-layout {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* 浮动区域样式已直接应用到Area组件 */

/* 添加浮动区域按钮样式 */
.add-floating-btn {
  font-size: 14px;
  cursor: pointer;
  user-select: none;
}

.add-floating-btn:active {
  transform: scale(0.98);
}
</style>