点击修改z-index

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

@@ -7,6 +7,7 @@
       :data-area-id="id"
       @dragover="handleDragOver"
       @dragleave="handleDragLeave"
+      @click.capture="onAreaClick"
     >
       <!-- 调整大小的边框 -->
       <div 
@@ -280,7 +281,7 @@ const areaStyle = computed(() => {
     height: `${originalPosition.value.height}px`,
     left: `${originalPosition.value.left}px`,
     top: `${originalPosition.value.top}px`,
-    zIndex: Z_INDEX_LAYERS.CONTENT // 使用统一的z-index层级
+    zIndex: zIndexManager.getFloatingAreaZIndex(props.id) // 使用动态的z-index值
   }
   
   return style
@@ -436,11 +437,9 @@ const onDragEnd = (eventData) => {
 
 // 处理事件总线的area.resize.move事件
 const onAreaResizeMove = (eventData) => {
-  console.log(`[Area:${props.id}] 收到AREA_RESIZE_MOVE事件:`, eventData) // 添加调试日志
   const { areaId, size, position, direction, timestamp } = eventData
   
   if (areaId !== props.id) {
-    console.log(`[Area:${props.id}] areaId不匹配，期望: ${props.id}, 实际: ${areaId}`) // 添加调试日志
     return
   }
   
@@ -450,8 +449,6 @@ const onAreaResizeMove = (eventData) => {
     return
   }
   
-  console.log(`[Area:${props.id}] 更新前originalPosition:`, originalPosition.value) // 添加调试日志
-  
   // 应用最小尺寸限制，与CSS保持一致
   const minWidth = 200
   const minHeight = 30
@@ -474,46 +471,12 @@ const onAreaResizeMove = (eventData) => {
   let newLeft = inputLeft
   let newTop = inputTop
   
-  // 计算边界位置，用于调试
+  // 计算边界位置
   const oldBottom = originalPosition.value.top + originalPosition.value.height
   const newBottom = newTop + newHeight
   const oldRight = originalPosition.value.left + originalPosition.value.width
   const newRight = newLeft + newWidth
   
-  // 对对角线方向进行特殊处理和日志记录
-  switch (direction) {
-    case 'top-right':
-      console.log(`[Area:${props.id}] top-right方向处理: 原下边框: ${oldBottom}, 新下边框: ${newBottom}, 差值: ${newBottom - oldBottom}`)
-      // 验证top-right方向下边框位置是否保持不变
-      if (Math.abs(newBottom - oldBottom) > 1) {
-        console.warn(`[Area:${props.id}] top-right方向下边框位置变化较大，可能存在计算误差`)
-      }
-      break
-      
-    case 'top-left':
-      console.log(`[Area:${props.id}] top-left方向处理: 原下边框: ${oldBottom}, 新下边框: ${newBottom}, 差值: ${newBottom - oldBottom}`)
-      console.log(`[Area:${props.id}] top-left方向处理: 原右边框: ${oldRight}, 新右边框: ${newRight}, 差值: ${newRight - oldRight}`)
-      break
-      
-    case 'bottom-left':
-      console.log(`[Area:${props.id}] bottom-left方向处理: 原上边框: ${originalPosition.value.top}, 新上边框: ${newTop}, 差值: ${newTop - originalPosition.value.top}`)
-      console.log(`[Area:${props.id}] bottom-left方向处理: 原右边框: ${oldRight}, 新右边框: ${newRight}, 差值: ${newRight - oldRight}`)
-      break
-      
-    case 'top':
-      console.log(`[Area:${props.id}] top方向处理: 原下边框: ${oldBottom}, 新下边框: ${newBottom}, 差值: ${newBottom - oldBottom}`)
-      break
-      
-    case 'left':
-      console.log(`[Area:${props.id}] left方向处理: 原右边框: ${oldRight}, 新右边框: ${newRight}, 差值: ${newRight - oldRight}`)
-      break
-  }
-  
-  // 使用已有的边界位置计算结果，无需重新声明
-  // 确保新的位置和尺寸在合理范围内
-  // 注意：不直接限制newTop和newLeft，而是通过调整尺寸来保持在可视区域内
-  // 这样可以避免拖拽时的突然跳动
-  
   // 获取父容器尺寸，用于边界检查
   let parentWidth = window.innerWidth
   let parentHeight = window.innerHeight
@@ -547,8 +510,6 @@ const onAreaResizeMove = (eventData) => {
     top: newTop
   }
   
-  console.log(`[Area:${props.id}] 更新后originalPosition:`, originalPosition.value) // 添加调试日志
-  
   // 发送区域位置和尺寸更新事件
   emitEvent(EVENT_TYPES.AREA_POSITION_UPDATE, {
     areaId: props.id,
@@ -737,6 +698,20 @@ const onClose = () => emitEvent(EVENT_TYPES.PANEL_CLOSE_REQUEST, {
   source: { component: 'Area', areaId: props.id }
 })
 
+// 区域点击事件 - 将当前区域置于最顶层
+const onAreaClick = () => {
+  console.log(`[Area:${props.id}] onAreaClick called`);
+  zIndexManager.activateFloatingArea(props.id)
+  const newZIndex = zIndexManager.getFloatingAreaZIndex(props.id);
+  console.log(`[Area:${props.id}] New z-index: ${newZIndex}`);
+  emitEvent(EVENT_TYPES.Z_INDEX_UPDATE, {
+    areaId: props.id,
+    zIndex: newZIndex
+  }, {
+    source: { component: 'Area', areaId: props.id }
+  })
+}
+
 // 组件挂载后获取父容器引用并初始化位置
 onMounted(() => {
   parentContainer.value = document.querySelector('.dock-layout') || window