边框调节

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

@@ -10,42 +10,42 @@
     >
       <!-- 调整大小的边框 -->
       <div 
-        v-if="resizable && !isMaximized" 
+        v-if="resizable && !isMaximized && !isSinglePanel" 
         class="resize-handle resize-handle-nw" 
         @mousedown="onResizeStart('nw', $event)"
       ></div>
       <div 
-        v-if="resizable && !isMaximized" 
+        v-if="resizable && !isMaximized && !isSinglePanel" 
         class="resize-handle resize-handle-ne" 
         @mousedown="onResizeStart('ne', $event)"
       ></div>
       <div 
-        v-if="resizable && !isMaximized" 
+        v-if="resizable && !isMaximized && !isSinglePanel" 
         class="resize-handle resize-handle-sw" 
         @mousedown="onResizeStart('sw', $event)"
       ></div>
       <div 
-        v-if="resizable && !isMaximized" 
+        v-if="resizable && !isMaximized && !isSinglePanel" 
         class="resize-handle resize-handle-se" 
         @mousedown="onResizeStart('se', $event)"
       ></div>
       <div 
-        v-if="resizable && !isMaximized" 
+        v-if="resizable && !isMaximized && !isSinglePanel" 
         class="resize-handle resize-handle-n" 
         @mousedown="onResizeStart('n', $event)"
       ></div>
       <div 
-        v-if="resizable && !isMaximized" 
+        v-if="resizable && !isMaximized && !isSinglePanel" 
         class="resize-handle resize-handle-e" 
         @mousedown="onResizeStart('e', $event)"
       ></div>
       <div 
-        v-if="resizable && !isMaximized" 
+        v-if="resizable && !isMaximized && !isSinglePanel" 
         class="resize-handle resize-handle-s" 
         @mousedown="onResizeStart('s', $event)"
       ></div>
       <div 
-        v-if="resizable && !isMaximized" 
+        v-if="resizable && !isMaximized && !isSinglePanel" 
         class="resize-handle resize-handle-w" 
         @mousedown="onResizeStart('w', $event)"
       ></div>
@@ -113,7 +113,7 @@
 
 <script setup>
 import { defineProps, computed, ref, onMounted, onUnmounted, watch, defineExpose } from 'vue'
-import { emitEvent, EVENT_TYPES } from './eventBus'
+import { emitEvent, onEvent, EVENT_TYPES } from './eventBus'
 import TabPage from './TabPage.vue'
 import Panel from './Panel.vue'
 import Render from './Render.vue'
@@ -145,28 +145,62 @@ const props = defineProps({
 
 // 本地状态
 const localState = ref(props.windowState)
-// 保存原始位置和大小信息
-const originalPosition = ref({
-  width: props.width,
-  height: props.height,
-  left: props.left,
-  top: props.top
-})
 // 保存最大化前的位置和大小，用于还原
 const maximizedFromPosition = ref(null)
 
-// 不再需要存储接收到的外部Area内容，改为通过children配置管理
-
 // 组件引用
 const areaRef = ref(null)
 
-// 不再需要获取插槽，改为使用props.children
+// 原始位置和大小（用于拖拽和调整大小）
+const originalPosition = ref({
+  width: props.width,
+  height: props.height,
+  left: props.left || 0,
+  top: props.top || 0
+})
+
+// 调整大小相关状态
+const isResizing = ref(false)
+const resizeDirection = ref(null)
+const resizeStartPos = ref({ x: 0, y: 0 })
+const resizeStartSize = ref({ width: 0, height: 0 })
+const resizeStartAreaPos = ref({ left: 0, top: 0 })
+
+// 计算属性：是否是单面板场景
+const isSinglePanel = computed(() => {
+  // 检查children配置
+  if (props.children) {
+    const childrenArray = Array.isArray(props.children) ? props.children : [props.children];
+    
+    // 如果没有children，不是单面板
+    if (childrenArray.length === 0) return false;
+    
+    // 如果children不是TabPage，不是单面板
+    const firstChild = childrenArray[0];
+    if (firstChild.type !== 'TabPage') return false;
+    
+    // 检查TabPage的children
+    const tabPageChildren = firstChild.children;
+    if (!tabPageChildren) return false;
+    
+    const tabPageChildrenArray = Array.isArray(tabPageChildren) ? tabPageChildren : [tabPageChildren];
+    
+    // 如果TabPage只包含一个Panel，是单面板
+    return tabPageChildrenArray.length === 1;
+  }
+  
+  // 默认不是单面板
+  return false;
+});
 
 // 计算属性：是否显示标题栏
 const shouldShowTitleBar = computed(() => {
   // 基础条件：props.showTitleBar为true
   if (!props.showTitleBar) return false;
   
+  // 单面板场景不显示标题栏
+  if (isSinglePanel.value) return false;
+  
   // 检查children配置
   if (props.children) {
     const childrenArray = Array.isArray(props.children) ? props.children : [props.children];
@@ -201,32 +235,12 @@ const dragStartPos = ref({ x: 0, y: 0 })
 const areaStartPos = ref({ x: 0, y: 0 })
 const currentDragId = ref(null)
 
-// 调整大小相关状态
-const isResizing = ref(false)
-const resizeStartPos = ref({ x: 0, y: 0 })
-const resizeDirection = ref(null)
-const resizeStartSize = ref({ width: 0, height: 0 })
-const resizeStartAreaPos = ref({ left: 0, top: 0 })
-
 // 父容器引用
 const parentContainer = ref(null)
 
 // 根据本地状态计算是否最大化
 const isMaximized = computed(() => localState.value === '最大化' || localState.value === 'maximized')
 
-// 监听props位置变化，更新原始位置
-watch(() => props.left, (newLeft) => {
-  if (newLeft !== undefined && newLeft !== originalPosition.value.left) {
-    originalPosition.value.left = newLeft
-  }
-}, { immediate: true })
-
-watch(() => props.top, (newTop) => {
-  if (newTop !== undefined && newTop !== originalPosition.value.top) {
-    originalPosition.value.top = newTop
-  }
-}, { immediate: true })
-
 // 监听windowState变化，同步更新localState
 watch(() => props.windowState, (newState) => {
   if (newState !== localState.value) {
@@ -235,14 +249,11 @@ watch(() => props.windowState, (newState) => {
     // 如果是从外部设置为最大化，保存当前位置以便还原
     if (newState === '最大化' || newState === 'maximized') {
       maximizedFromPosition.value = {
-        width: originalPosition.value.width,
+        width: props.width,
-        height: originalPosition.value.height,
+        height: props.height,
-        left: originalPosition.value.left,
+        left: props.left,
-        top: originalPosition.value.top
+        top: props.top
       }
-    } else if (maximizedFromPosition.value) {
-      // 如果是从外部设置为正常状态，恢复保存的位置
-      originalPosition.value = { ...maximizedFromPosition.value }
     }
   }
 }, { immediate: true })
@@ -263,21 +274,15 @@ const areaStyle = computed(() => {
     }
   }
   
-  // 非最大化状态：使用原始位置或默认居中
+  // 非最大化状态：优先使用originalPosition的值，实时响应拖拽变化
   const style = {
     width: `${originalPosition.value.width}px`,
     height: `${originalPosition.value.height}px`,
+    left: `${originalPosition.value.left}px`,
+    top: `${originalPosition.value.top}px`,
     zIndex: Z_INDEX_LAYERS.CONTENT // 使用统一的z-index层级
   }
   
-  // 如果有明确的位置，则使用指定位置
-  if (originalPosition.value.left !== undefined) {
-    style.left = `${originalPosition.value.left}px`
-  }
-  if (originalPosition.value.top !== undefined) {
-    style.top = `${originalPosition.value.top}px`
-  }
-  
   return style
 })
 
@@ -370,77 +375,81 @@ const onDragStart = (e) => {
   e.preventDefault()
 }
 
-// 拖拽移动
+// 拖拽移动 - 处理事件总线的area.drag.move事件
-const onDragMove = (e) => {
+const onDragMove = (eventData) => {
-  if (!isDragging.value || !currentDragId.value) return
+  // 从事件数据中获取位置信息
+  const { left, top, dragId } = eventData
   
-  // 计算移动距离
+  // 只使用明确提供的left和top值，不直接使用position.x和position.y
-  const deltaX = e.clientX - dragStartPos.value.x
+  if (left !== undefined) {
-  const deltaY = e.clientY - dragStartPos.value.y
+    originalPosition.value.left = left
-  
+  }
-  // 计算新位置
+  if (top !== undefined) {
-  let newLeft = areaStartPos.value.x + deltaX
+    originalPosition.value.top = top
-  let newTop = areaStartPos.value.y + deltaY
-  
-  // 确保不超出父容器边界
-  if (parentContainer.value) {
-    const parentRect = parentContainer.value.getBoundingClientRect()
-    const areaWidth = originalPosition.value.width
-    const areaHeight = originalPosition.value.height
-    
-    // 严格边界检查，确保元素完全在父容器内
-    newLeft = Math.max(0, Math.min(newLeft, parentRect.width - areaWidth))
-    newTop = Math.max(0, Math.min(newTop, parentRect.height - areaHeight))
   }
   
-  // 更新位置
+  // 发送位置更新事件
-  originalPosition.value.left = newLeft
-  originalPosition.value.top = newTop
-  
-  // 使用事件总线通知拖拽移动，包含 dragId
-  emitEvent(EVENT_TYPES.AREA_DRAG_MOVE, {
-    dragId: currentDragId.value,
-    areaId: props.id,
-    position: { x: e.clientX, y: e.clientY },
-    left: newLeft,
-    top: newTop,
-    timestamp: Date.now()
-  }, {
-    source: { component: 'Area', areaId: props.id, dragId: currentDragId.value }
-  })
-  
-  // 使用事件总线通知位置变化，包含 dragId
   emitEvent(EVENT_TYPES.AREA_POSITION_UPDATE, { 
-    dragId: currentDragId.value,
+    dragId: dragId || currentDragId.value,
     areaId: props.id, 
-    left: newLeft, 
+    left: originalPosition.value.left, 
-    top: newTop 
+    top: originalPosition.value.top 
   }, {
-    source: { component: 'Area', areaId: props.id, dragId: currentDragId.value }
+    source: { component: 'Area', areaId: props.id, dragId: dragId || currentDragId.value }
   })
 }
 
-// 拖拽结束
+// 拖拽结束 - 处理事件总线的area.drag.end事件
-const onDragEnd = () => {
+const onDragEnd = (eventData) => {
-  if (!currentDragId.value) return
+  const { dragId, finalPosition } = eventData
   
-  // 使用事件总线通知拖拽结束，包含 dragId 和标准化数据格式
+  // 如果提供了finalPosition，更新位置
-  emitEvent(EVENT_TYPES.AREA_DRAG_END, {
+  if (finalPosition) {
-    dragId: currentDragId.value,
+    originalPosition.value.left = finalPosition.x
-    areaId: props.id,
+    originalPosition.value.top = finalPosition.y
-    finalPosition: {
+  }
-      x: originalPosition.value.left,
-      y: originalPosition.value.top
-    },
-    left: originalPosition.value.left,
-    top: originalPosition.value.top,
-    timestamp: Date.now()
-  }, {
-    source: { component: 'Area', areaId: props.id, dragId: currentDragId.value }
-  })
   
+  // 清理拖拽状态
   isDragging.value = false
   currentDragId.value = null
+  
+  // 发送位置更新事件
+  emitEvent(EVENT_TYPES.AREA_POSITION_UPDATE, { 
+    dragId: dragId || currentDragId.value,
+    areaId: props.id, 
+    left: originalPosition.value.left, 
+    top: originalPosition.value.top 
+  }, {
+    source: { component: 'Area', areaId: props.id, dragId: dragId || currentDragId.value }
+  })
+}
+
+// 处理事件总线的area.resize.move事件
+const onAreaResizeMove = (eventData) => {
+  const { areaId, size, position, direction } = eventData
+  
+  if (areaId !== props.id) return
+  
+  if (direction.includes('right') || direction.includes('left')) {
+    originalPosition.value.width = size.width
+    if (direction.includes('left')) {
+      originalPosition.value.left = position.left
+    }
+  }
+  if (direction.includes('bottom') || direction.includes('top')) {
+    originalPosition.value.height = size.height
+    if (direction.includes('top')) {
+      originalPosition.value.top = position.top
+    }
+  }
+  
+  emitEvent(EVENT_TYPES.AREA_POSITION_UPDATE, {
+    areaId: props.id,
+    left: originalPosition.value.left,
+    top: originalPosition.value.top
+  }, {
+    source: { component: 'Area', areaId: props.id }
+  })
 }
 
 // 调整大小开始
@@ -576,28 +585,19 @@ const onToggleMaximize = () => {
   if (!isMaximized.value) {
     // 切换到最大化状态前，保存当前位置和大小
     maximizedFromPosition.value = {
-      width: originalPosition.value.width,
+      width: props.width,
-      height: originalPosition.value.height,
+      height: props.height,
-      left: originalPosition.value.left,
+      left: props.left,
-      top: originalPosition.value.top
+      top: props.top
     }
-  } else if (maximizedFromPosition.value) {
-    // 从最大化状态还原时，恢复到保存的位置和大小
-    originalPosition.value = { ...maximizedFromPosition.value }
-    // 通知父组件位置变化
-    emitEvent(EVENT_TYPES.AREA_POSITION_UPDATE, {
-      areaId: props.id,
-      left: originalPosition.value.left,
-      top: originalPosition.value.top
-    }, {
-      source: { component: 'Area', areaId: props.id }
-    })
   }
   
   localState.value = next
   emitEvent(EVENT_TYPES.WINDOW_STATE_CHANGE, {
     areaId: props.id,
-    state: next
+    state: next,
+    // 从最大化状态还原时，传递原始位置信息
+    position: isMaximized.value && maximizedFromPosition.value ? maximizedFromPosition.value : undefined
   }, {
     source: { component: 'Area', areaId: props.id }
   })
@@ -614,7 +614,7 @@ onMounted(() => {
   parentContainer.value = document.querySelector('.dock-layout') || window
   
   // 如果没有指定left或top，自动居中定位
-  if (originalPosition.value.left === undefined || originalPosition.value.top === undefined) {
+  if (props.left === undefined || props.top === undefined) {
     let parentWidth, parentHeight
     
     if (parentContainer.value === window) {
@@ -630,22 +630,40 @@ onMounted(() => {
       parentHeight = 600
     }
     
-    const areaWidth = originalPosition.value.width || 300
+    const areaWidth = props.width || 300
-    const areaHeight = originalPosition.value.height || 250
+    const areaHeight = props.height || 250
     
     // 计算居中位置
-    originalPosition.value.left = Math.floor((parentWidth - areaWidth) / 2)
+    const centerLeft = Math.floor((parentWidth - areaWidth) / 2)
-    originalPosition.value.top = Math.floor((parentHeight - areaHeight) / 2)
+    const centerTop = Math.floor((parentHeight - areaHeight) / 2)
+    
+    // 更新originalPosition
+    originalPosition.value.left = centerLeft
+    originalPosition.value.top = centerTop
     
     // 通知父组件位置变化
     emitEvent(EVENT_TYPES.AREA_POSITION_UPDATE, {
       areaId: props.id,
-      left: originalPosition.value.left,
+      left: centerLeft,
-      top: originalPosition.value.top
+      top: centerTop
     }, {
       source: { component: 'Area', areaId: props.id }
     })
+  } else {
+    // 使用props初始化originalPosition
+    originalPosition.value.left = props.left
+    originalPosition.value.top = props.top
+    originalPosition.value.width = props.width
+    originalPosition.value.height = props.height
   }
+  
+  // 监听区域拖拽事件
+  onEvent(EVENT_TYPES.AREA_DRAG_MOVE, onDragMove, { componentId: `area-${props.id}` })
+  onEvent(EVENT_TYPES.AREA_DRAG_END, onDragEnd, { componentId: `area-${props.id}` })
+  
+  // 监听区域resize事件 - 同时监听两种事件类型，确保兼容性
+  onEvent(EVENT_TYPES.AREA_RESIZE_MOVE, onAreaResizeMove, { componentId: `area-${props.id}` })
+  onEvent(EVENT_TYPES.AREA_RESIZE, onAreaResizeMove, { componentId: `area-${props.id}` })
 })
 
 // 组件卸载时清理状态
@@ -869,24 +887,24 @@ defineExpose({
 }
 
 .resize-handle-e {
-  width: 12px;
+  width: 3px;
-  right: -6px;
+  right: -1.5px;
   top: 12px;
   bottom: 12px;
   cursor: ew-resize;
 }
 
 .resize-handle-s {
-  height: 12px;
+  height: 3px;
-  bottom: -6px;
+  bottom: -1.5px;
   left: 12px;
   right: 12px;
   cursor: ns-resize;
 }
 
 .resize-handle-w {
-  width: 12px;
+  width: 3px;
-  left: -6px;
+  left: -1.5px;
   top: 12px;
   bottom: 12px;
   cursor: ew-resize;

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

@@ -118,6 +118,9 @@ const hasAreasInMainContent = ref(false)
  * @returns {boolean} 是否应该操作区域
  */
 const shouldOperateAreaInsteadOfPanel = (areaId) => {
+  console.log(`[DockLayout] 检查单Panel模式，areaId: ${areaId}`);
+  console.log(`[DockLayout] 当前floatingAreas:`, floatingAreas.value);
+  
   const area = floatingAreas.value.find(a => a.id === areaId);
   if (!area) {
     console.log(`[DockLayout] 未找到Area: ${areaId}`);
@@ -129,14 +132,20 @@ const shouldOperateAreaInsteadOfPanel = (areaId) => {
     // 遍历所有子元素，统计Panel数量
     let panelCount = 0;
     
+    console.log(`[DockLayout] Area ${areaId} 的children:`, area.children);
+    
     const childrenArray = Array.isArray(area.children) ? area.children : [area.children];
     
     for (const child of childrenArray) {
+      console.log(`[DockLayout] 检查子元素:`, child);
       if (child.type === 'TabPage' && child.children) {
+        console.log(`[DockLayout] 找到TabPage，children:`, child.children);
         const tabChildrenArray = Array.isArray(child.children) ? child.children : [child.children];
         for (const tabChild of tabChildrenArray) {
+          console.log(`[DockLayout] 检查TabPage子元素:`, tabChild);
           if (tabChild.type === 'Panel') {
             panelCount++;
+            console.log(`[DockLayout] 找到Panel，当前计数: ${panelCount}`);
           }
         }
       }
@@ -144,6 +153,7 @@ const shouldOperateAreaInsteadOfPanel = (areaId) => {
     
     // 如果区域中只有一个面板，返回true
     const result = panelCount === 1;
+    console.log(`[DockLayout] Area ${areaId} 单Panel检查结果:`, result, `(面板数量: ${panelCount})`);
     if (result) {
       console.log(`[DockLayout] Area ${areaId} 是单Panel模式，应该操作Area而不是Panel`);
     }
@@ -494,6 +504,12 @@ const setupEventListeners = () => {
   unsubscribeFunctions.push(eventBus.on(EVENT_TYPES.PANEL_DRAG_START, onPanelDragStart, { componentId: 'dock-layout' }));
   unsubscribeFunctions.push(eventBus.on(EVENT_TYPES.PANEL_DRAG_MOVE, onPanelDragMove, { componentId: 'dock-layout' }));
   unsubscribeFunctions.push(eventBus.on(EVENT_TYPES.PANEL_DRAG_END, onPanelDragEnd, { componentId: 'dock-layout' }));
+  // 单面板检测事件
+  unsubscribeFunctions.push(eventBus.on(EVENT_TYPES.PANEL_CHECK_SINGLE_PANEL, onCheckSinglePanel, { componentId: 'dock-layout' }));
+  // Area resize事件
+  unsubscribeFunctions.push(eventBus.on(EVENT_TYPES.AREA_RESIZE_START, onAreaResizeStart, { componentId: 'dock-layout' }));
+  unsubscribeFunctions.push(eventBus.on(EVENT_TYPES.AREA_RESIZE_MOVE, onAreaResizeMove, { componentId: 'dock-layout' }));
+  unsubscribeFunctions.push(eventBus.on(EVENT_TYPES.AREA_RESIZE_END, onAreaResizeEnd, { componentId: 'dock-layout' }));
   
   // Resize相关事件
   unsubscribeFunctions.push(eventBus.on(EVENT_TYPES.RESIZE_START, () => emit('dragStart'), { componentId: 'dock-layout' }));
@@ -502,7 +518,20 @@ const setupEventListeners = () => {
   
   // 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' }));
   
   // 自定义事件
@@ -658,6 +687,57 @@ const findOrCreateMainAreaTabPage = () => {
   };
 }
 
+// 单面板检测处理函数
+const onCheckSinglePanel = (event) => {
+  const areaId = event.areaId;
+  const panelId = event.panelId;
+  
+  // 使用现有的shouldOperateAreaInsteadOfPanel函数检查是否为单面板
+  const isSinglePanel = shouldOperateAreaInsteadOfPanel(areaId);
+  
+  // 发送检测结果
+  eventBus.emit(EVENT_TYPES.PANEL_SINGLE_PANEL_RESULT, {
+    areaId,
+    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;
+      }
+    }
+  }
+};
+
+const onAreaResizeEnd = (event) => {
+  const { areaId, direction, finalPosition } = event;
+  
+  // AreaHandler已经监听了AREA_RESIZE_END事件，会自动处理
+  // 只需要更新本地floatingAreas中的状态
+};
+
 // 轻量级生命周期处理
 onMounted(() => {
   // 初始化轻量级状态

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

@@ -2,9 +2,46 @@
   <div class="panel bg-white overflow-hidden" 
        :style="{ width: '100%', height: '100%' }"
        :data-panel-id="id">
+    <!-- Resize handles - 只在单面板且非最大化模式下显示 -->
+    <div v-if="isSinglePanel && !isMaximized" class="resize-handles">
+      <!-- 右侧调整手柄 -->
+      <div class="resize-handle resize-handle-right" 
+           @mousedown="onResizeStart($event, 'right')" 
+           data-direction="right"></div>
+      <!-- 底部调整手柄 -->
+      <div class="resize-handle resize-handle-bottom" 
+           @mousedown="onResizeStart($event, 'bottom')" 
+           data-direction="bottom"></div>
+      <!-- 左侧调整手柄 -->
+      <div class="resize-handle resize-handle-left" 
+           @mousedown="onResizeStart($event, 'left')" 
+           data-direction="left"></div>
+      <!-- 顶部调整手柄 -->
+      <div class="resize-handle resize-handle-top" 
+           @mousedown="onResizeStart($event, 'top')" 
+           data-direction="top"></div>
+      <!-- 右下角调整手柄 -->
+      <div class="resize-handle resize-handle-bottom-right" 
+           @mousedown="onResizeStart($event, 'bottom-right')" 
+           data-direction="bottom-right"></div>
+      <!-- 左下角调整手柄 -->
+      <div class="resize-handle resize-handle-bottom-left" 
+           @mousedown="onResizeStart($event, 'bottom-left')" 
+           data-direction="bottom-left"></div>
+      <!-- 右上角调整手柄 -->
+      <div class="resize-handle resize-handle-top-right" 
+           @mousedown="onResizeStart($event, 'top-right')" 
+           data-direction="top-right"></div>
+      <!-- 左上角调整手柄 -->
+      <div class="resize-handle resize-handle-top-left" 
+           @mousedown="onResizeStart($event, 'top-left')" 
+           data-direction="top-left"></div>
+    </div>
+    
     <div class="flex flex-col h-full">
       <!-- 标题栏 -->
       <div class="title-bar h-6 bg-[#435d9c] text-white px-2 flex items-center justify-between select-none cursor-move"
+           :style="{ cursor: isSinglePanel && isMaximized ? 'default' : 'move' }"
            @mousedown="onDragStart">
         <div class="flex items-center">
           <span class="text-xs">{{ title }}</span>
@@ -177,6 +214,9 @@ const subscriptionRegistry = new Map();
 // 响应式的最大化状态，初始化为props.maximized
 const isMaximized = ref(props.maximized);
 
+// 响应式的单面板状态，用于控制resize handle的显示
+const isSinglePanel = ref(false);
+
 const getCurrentAreaId = () => {
   const panelElement = document.querySelector(`[data-panel-id="${props.id}"]`);
   if (panelElement) {
@@ -250,8 +290,17 @@ let isDragging = false
 let currentDragId = null
 let currentAreaId = null
 
+// Resize相关状态
+let isResizing = false
+let currentResizeDirection = null
+
 // 拖拽开始
 const onDragStart = (e) => {
+  // 单面板且最大化时，不允许拖拽标题栏
+  if (isSinglePanel.value && isMaximized.value) {
+    return;
+  }
+  
   // 只有当点击的是标题栏区域（不是按钮）时才触发拖拽
   if (!e.target.closest('.title-bar-buttons') && !e.target.closest('button')) {
     // 1. 立即重置之前的拖拽状态
@@ -269,6 +318,19 @@ const onDragStart = (e) => {
     // 保存当前Area的ID，避免在拖拽移动过程中重复调用getCurrentAreaId()
     currentAreaId = getCurrentAreaId();
     
+    // 获取当前区域的起始位置
+    const areaState = areaHandler.getAreaState(currentAreaId);
+    const areaStartPosition = {
+      left: areaState.left || 0,
+      top: areaState.top || 0
+    };
+    
+    // 保存拖拽起始位置
+    const dragStartPosition = {
+      x: e.clientX,
+      y: e.clientY
+    };
+    
     // 获取所有浮动区域信息，用于单面板检测
     const floatingAreas = areaHandler.areaStateManager.getFloatingAreas();
     
@@ -277,6 +339,8 @@ const onDragStart = (e) => {
       panelId: props.id,
       areaId: currentAreaId,
       position: { x: e.clientX, y: e.clientY },
+      left: areaStartPosition.left,
+      top: areaStartPosition.top,
       timestamp: Date.now(),
       layout: {
         areas: floatingAreas
@@ -288,6 +352,14 @@ const onDragStart = (e) => {
     // 添加全局的拖拽移动和结束事件监听
     const onDragMove = (e) => {
       if (isDragging) {
+        // 计算偏移量
+        const deltaX = e.clientX - dragStartPosition.x;
+        const deltaY = e.clientY - dragStartPosition.y;
+        
+        // 计算新位置
+        const newLeft = areaStartPosition.left + deltaX;
+        const newTop = areaStartPosition.top + deltaY;
+        
         // 获取所有浮动区域信息，用于单面板检测
         const floatingAreas = areaHandler.areaStateManager.getFloatingAreas();
         
@@ -296,6 +368,8 @@ const onDragStart = (e) => {
           panelId: props.id,
           areaId: currentAreaId,
           position: { x: e.clientX, y: e.clientY },
+          left: newLeft,
+          top: newTop,
           timestamp: Date.now(),
           layout: {
             areas: floatingAreas
@@ -342,6 +416,129 @@ const onDragStart = (e) => {
   }
 };
 
+// Resize开始
+const onResizeStart = (e, direction) => {
+  console.log(`[Panel:${props.id}] 检测到resize mousedown事件，方向: ${direction}，单面板状态: ${isSinglePanel.value}，最大化状态: ${isMaximized.value}`);
+  e.preventDefault();
+  e.stopPropagation();
+  
+  console.log(`[Panel:${props.id}] 开始resize，方向: ${direction}，位置: {x: ${e.clientX}, y: ${e.clientY}}`);
+  
+  // 只有在单面板模式下才允许resize
+  if (!isSinglePanel.value) {
+    console.log(`[Panel:${props.id}] 非单面板模式，跳过resize`);
+    return;
+  }
+  
+  isResizing = true;
+  currentResizeDirection = direction;
+  currentAreaId = getCurrentAreaId();
+  
+  console.log(`[Panel:${props.id}] 当前AreaID: ${currentAreaId}`);
+  
+  const startPosition = { x: e.clientX, y: e.clientY };
+  
+  const areaHandler = getAreaHandler();
+  const areaState = areaHandler.getAreaState(currentAreaId);
+  const areaStartState = {
+    width: areaState.width || 0,
+    height: areaState.height || 0,
+    left: areaState.left || 0,
+    top: areaState.top || 0
+  };
+  
+  // 发送resize开始事件
+  emitEvent(EVENT_TYPES.PANEL_RESIZE_START, {
+    panelId: props.id,
+    areaId: currentAreaId,
+    direction,
+    position: startPosition,
+    timestamp: Date.now()
+  }, {
+    source: { component: 'Panel', panelId: props.id }
+  });
+  
+  console.log(`[Panel:${props.id}] 已发送PANEL_RESIZE_START事件`);
+  
+  // 添加全局的resize移动和结束事件监听
+  const onResizeMove = (e) => {
+    if (isResizing && currentAreaId) {
+      const currentPosition = { x: e.clientX, y: e.clientY };
+      
+      const totalDelta = {
+        width: currentPosition.x - startPosition.x,
+        height: currentPosition.y - startPosition.y
+      };
+      
+      const newSize = {
+        width: areaStartState.width + totalDelta.width,
+        height: areaStartState.height + totalDelta.height
+      };
+      
+      const newPosition = {
+        left: areaStartState.left,
+        top: areaStartState.top
+      };
+      
+      if (currentResizeDirection.includes('left')) {
+        newPosition.left = areaStartState.left + totalDelta.width;
+      }
+      if (currentResizeDirection.includes('top')) {
+        newPosition.top = areaStartState.top + totalDelta.height;
+      }
+      
+      console.log(`[Panel:${props.id}] resize移动，方向: ${currentResizeDirection}，总量: ${JSON.stringify(newSize)}，位置: ${JSON.stringify(newPosition)}`);
+      
+      emitEvent(EVENT_TYPES.PANEL_RESIZE_MOVE, {
+        panelId: props.id,
+        areaId: currentAreaId,
+        direction: currentResizeDirection,
+        size: newSize,
+        position: newPosition,
+        timestamp: Date.now()
+      }, {
+        source: { component: 'Panel', panelId: props.id }
+      });
+      
+      console.log(`[Panel:${props.id}] 已发送PANEL_RESIZE_MOVE事件`);
+    }
+  };
+  
+  const onResizeEnd = (e) => {
+    if (isResizing && currentAreaId) {
+      isResizing = false;
+      
+      console.log(`[Panel:${props.id}] resize结束，方向: ${currentResizeDirection}，最终位置: {x: ${e.clientX}, y: ${e.clientY}}`);
+      
+      // 发送resize结束事件
+      emitEvent(EVENT_TYPES.PANEL_RESIZE_END, {
+        panelId: props.id,
+        areaId: currentAreaId,
+        direction: currentResizeDirection,
+        finalPosition: { x: e.clientX, y: e.clientY },
+        timestamp: Date.now()
+      }, {
+        source: { component: 'Panel', panelId: props.id }
+      });
+      
+      console.log(`[Panel:${props.id}] 已发送PANEL_RESIZE_END事件`);
+      
+      // 清理全局事件监听器
+      document.removeEventListener('mousemove', onResizeMove);
+      document.removeEventListener('mouseup', onResizeEnd);
+      document.removeEventListener('mouseleave', onResizeEnd);
+      
+      // 重置resize状态
+      currentResizeDirection = null;
+    }
+  };
+  
+  // 添加全局事件监听器
+  document.addEventListener('mousemove', onResizeMove);
+  document.addEventListener('mouseup', onResizeEnd);
+  document.addEventListener('mouseleave', onResizeEnd);
+};
+
 /**
  * 注册面板相关事件监听器，确保唯一性
  */
@@ -360,25 +557,47 @@ const setupEventListeners = () => {
       }
     }, { componentId: `panel-${props.id}` })
     
+    // 监听单面板检测结果事件
+    const unsubscribeSinglePanelResult = onEvent(EVENT_TYPES.PANEL_SINGLE_PANEL_RESULT, (data) => {
+      // 检查panelId或areaId匹配
+      if (data.panelId === props.id || data.areaId === getCurrentAreaId()) {
+        console.log(`[Panel:${props.id}] 收到单面板检测结果:`, data.isSinglePanel);
+        isSinglePanel.value = data.isSinglePanel;
+      }
+    }, { componentId: `panel-${props.id}` })
+    
     // 生成唯一的订阅ID
     const subscriptionId = `maximizeSync_${props.id}_${Date.now()}`
+    const singlePanelSubscriptionId = `singlePanelResult_${props.id}_${Date.now()}`
     
     // 检查是否已经注册过相同的监听器
     if (subscriptionRegistry.has(subscriptionId)) {
       // 监听器已存在，打日志并返回
       console.warn(`[Panel:${props.id}] 监听器已存在，跳过重复注册: ${subscriptionId}`)
-      return
+    } else {
+      // 将订阅函数添加到集合和注册表中
+      subscriptions.add(unsubscribeMaximizeSync)
+      subscriptionRegistry.set(subscriptionId, {
+        unsubscribe: unsubscribeMaximizeSync,
+        name: 'maximizeSync',
+        createdAt: Date.now()
+      })
     }
     
-    // 将订阅函数添加到集合和注册表中
+    // 检查单面板监听器是否已存在
-    subscriptions.add(unsubscribeMaximizeSync)
+    if (subscriptionRegistry.has(singlePanelSubscriptionId)) {
-    subscriptionRegistry.set(subscriptionId, {
+      console.warn(`[Panel:${props.id}] 单面板监听器已存在，跳过重复注册: ${singlePanelSubscriptionId}`)
-      unsubscribe: unsubscribeMaximizeSync,
+    } else {
-      name: 'maximizeSync',
+      // 将单面板订阅函数添加到集合和注册表中
-      createdAt: Date.now()
+      subscriptions.add(unsubscribeSinglePanelResult)
-    })
+      subscriptionRegistry.set(singlePanelSubscriptionId, {
+        unsubscribe: unsubscribeSinglePanelResult,
+        name: 'singlePanelResult',
+        createdAt: Date.now()
+      })
+    }
     
-    console.log(`[Panel:${props.id}] 事件监听器注册完成，ID: ${subscriptionId}`)
+    console.log(`[Panel:${props.id}] 事件监听器注册完成`)
     
   } catch (error) {
     console.error(`[Panel:${props.id}] 注册事件监听器失败:`, error)
@@ -466,6 +685,19 @@ onMounted(() => {
   // 设置事件监听器
   setupEventListeners()
   
+  // 发送单面板检测请求
+  const areaId = getCurrentAreaId();
+  if (areaId) {
+    console.log(`[Panel:${props.id}] 发送单面板检测请求，areaId: ${areaId}`);
+    emitEvent(EVENT_TYPES.PANEL_CHECK_SINGLE_PANEL, {
+      panelId: props.id,
+      areaId: areaId,
+      timestamp: Date.now()
+    }, {
+      source: { component: 'Panel', panelId: props.id }
+    });
+  }
+  
   if (import.meta.env.DEV) {
     console.log(`[Panel:${props.id}] 所有监听器设置完成`)
   }
@@ -506,16 +738,32 @@ onUnmounted(() => {
   flex-direction: column;
   width: 100%;
   height: 100%;
+  z-index: 10;
+  position: relative;
 }
 
-/* 图标样式优化 */
+/* 标题栏样式 */
-.icon-square-svg {
+.title-bar {
-  /* 优化SVG渲染，避免1px边框显示过粗的问题 */
+  z-index: 15;
-  shape-rendering: crispEdges;
+  position: relative;
 }
 
-/* 内容区域滚动条样式 */
+/* 标题栏按钮组样式 */
+.title-bar-buttons {
+  z-index: 16;
+  position: relative;
+}
+
+/* 工具栏样式 */
+.toolbar {
+  z-index: 15;
+  position: relative;
+}
+
+/* 内容区域样式 */
 .content-area {
+  z-index: 10;
+  position: relative;
   /* 确保滚动条正确显示 */
   scrollbar-width: thin;
   scrollbar-color: #c7d2ea #f5f7fb;
@@ -553,4 +801,115 @@ onUnmounted(() => {
   display: none !important;
   border: 0 !important;
 }
+
+/* Resize handles样式 */
+.resize-handles {
+  position: absolute;
+  top: 12px; /* 从标题栏和工具栏下方开始，避免覆盖标题栏按钮 */
+  left: 0;
+  right: 0;
+  bottom: 0;
+  pointer-events: none;
+  /* 不设置z-index，或设为auto，不创建新的层叠上下文 */
+  z-index: auto;
+  /* 确保resize-handles容器只覆盖内容区域，不包括标题栏 */
+}
+
+.resize-handle {
+  position: absolute;
+  pointer-events: auto;
+  background-color: transparent;
+  cursor: pointer;
+  z-index: 20; /* 直接相对于面板的层叠上下文，大于标题栏的15 */
+}
+
+/* 右侧调整手柄 */
+.resize-handle-right {
+  top: 0;
+  right: 0;
+  width: 3px;
+  height: 100%;
+  cursor: e-resize;
+  z-index: 20;
+}
+
+/* 底部调整手柄 */
+.resize-handle-bottom {
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  height: 3px;
+  cursor: s-resize;
+  z-index: 20;
+}
+
+/* 左侧调整手柄 */
+.resize-handle-left {
+  top: 0;
+  left: 0;
+  width: 3px;
+  height: 100%;
+  cursor: w-resize;
+  z-index: 20;
+}
+
+/* 顶部调整手柄 */
+.resize-handle-top {
+  top: -12px; /* 调整top值，让它显示在面板的上边缘 */
+  left: 0;
+  width: 100%;
+  height: 3px;
+  cursor: n-resize;
+  z-index: 20; /* 确保顶部resize-handle能够接收鼠标事件 */
+}
+
+/* 右下角调整手柄 */
+.resize-handle-bottom-right {
+  bottom: 0;
+  right: 0;
+  width: 3px;
+  height: 3px;
+  cursor: se-resize;
+  z-index: 20;
+}
+
+/* 左下角调整手柄 */
+.resize-handle-bottom-left {
+  bottom: 0;
+  left: 0;
+  width: 3px;
+  height: 3px;
+  cursor: sw-resize;
+  z-index: 20;
+}
+
+/* 右上角调整手柄 */
+.resize-handle-top-right {
+  top: -12px; /* 调整top值，让它显示在面板的上边缘 */
+  right: 0;
+  width: 3px;
+  height: 3px;
+  cursor: ne-resize;
+  z-index: 20; /* 确保右上角resize-handle能够接收鼠标事件 */
+}
+
+/* 左上角调整手柄 */
+.resize-handle-top-left {
+  top: -12px; /* 调整top值，让它显示在面板的上边缘 */
+  left: 0;
+  width: 3px;
+  height: 3px;
+  cursor: nw-resize;
+  z-index: 20; /* 确保左上角resize-handle能够接收鼠标事件 */
+}
+
+/* 悬停效果 */
+.resize-handle:hover {
+  background-color: rgba(67, 93, 156, 0.4);
+}
+
+/* 激活效果 */
+.resize-handle:active {
+  background-color: rgba(67, 93, 156, 0.6);
+}
 </style>

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

@@ -3,7 +3,6 @@
   <component 
     :is="componentType" 
     v-bind="componentProps"
-    v-on="componentListeners"
   >
     <!-- 统一处理children属性，不区分组件类型，只要有children就渲染 -->
     <template v-if="config.children">
@@ -106,162 +105,6 @@ const componentProps = computed(() => {
   }
 })
 
-// 计算要监听的事件（用于事件转发）
-const componentListeners = computed(() => {
-  const allListeners = {}
-  
-  // 根据组件类型添加相应的事件监听器
-  if (props.type === 'Area') {
-    // Area组件的事件
-    allListeners['areaDragStart'] = (event) => {
-      // if (props.debug) console.log(`[Render-Area ${props.config.id}] areaDragStart:`, event)
-      eventBus.emit(EVENT_TYPES.AREA_DRAG_START, { ...event, areaId: props.config.id })
-    }
-    allListeners['areaDragMove'] = (event) => {
-      // if (props.debug) console.log(`[Render-Area ${props.config.id}] areaDragMove:`, event)
-      eventBus.emit(EVENT_TYPES.AREA_DRAG_MOVE, { ...event, areaId: props.config.id })
-    }
-    allListeners['areaDragEnd'] = (event) => {
-      // if (props.debug) console.log(`[Render-Area ${props.config.id}] areaDragEnd:`, event)
-      eventBus.emit(EVENT_TYPES.AREA_DRAG_END, { ...event, areaId: props.config.id })
-    }
-    allListeners['area-merged'] = (event) => {
-      // if (props.debug) console.log(`[Render-Area ${props.config.id}] area-merged:`, event)
-      eventBus.emit(EVENT_TYPES.AREA_MERGED, { ...event, areaId: props.config.id })
-    }
-    allListeners['toggleCollapse'] = (event) => {
-      // if (props.debug) console.log(`[Render-Area ${props.config.id}] toggleCollapse:`, event)
-      eventBus.emit(EVENT_TYPES.PANEL_TOGGLE_COLLAPSE, { ...event, areaId: props.config.id })
-    }
-    allListeners['maximize'] = (event) => {
-      // if (props.debug) console.log(`[Render-Area ${props.config.id}] maximize:`, event)
-      eventBus.emit(EVENT_TYPES.PANEL_MAXIMIZE, { ...event, areaId: props.config.id })
-    }
-    allListeners['close'] = (event) => {
-      // if (props.debug) console.log(`[Render-Area ${props.config.id}] close:`, event)
-      eventBus.emit(EVENT_TYPES.PANEL_CLOSE_REQUEST, { ...event, areaId: props.config.id })
-    }
-    allListeners['toggleToolbar'] = (event) => {
-      // if (props.debug) console.log(`[Render-Area ${props.config.id}] toggleToolbar:`, event)
-      eventBus.emit(EVENT_TYPES.PANEL_TOGGLE_TOOLBAR, { ...event, areaId: props.config.id })
-    }
-    allListeners['update:windowState'] = (event) => {
-      // if (props.debug) console.log(`[Render-Area ${props.config.id}] update:windowState:`, event)
-      eventBus.emit(EVENT_TYPES.WINDOW_STATE_CHANGE, event)
-    }
-    allListeners['update:position'] = (event) => {
-      // if (props.debug) console.log(`[Render-Area ${props.config.id}] update:position:`, event)
-      eventBus.emit(EVENT_TYPES.AREA_POSITION_UPDATE, event)
-    }
-    allListeners['dragover'] = (event) => {
-      // if (props.debug) console.log(`[Render-Area ${props.config.id}] dragover:`, event)
-      eventBus.emit(EVENT_TYPES.AREA_DRAG_OVER, { ...event, areaId: props.config.id })
-    }
-    allListeners['dragleave'] = (event) => {
-      // if (props.debug) console.log(`[Render-Area ${props.config.id}] dragleave:`, event)
-      eventBus.emit(EVENT_TYPES.AREA_DRAG_LEAVE, { ...event, areaId: props.config.id })
-    }
-    allListeners['panelMaximizeSync'] = (event) => {
-      // if (props.debug) console.log(`[Render-Area ${props.config.id}] panelMaximizeSync:`, event)
-      eventBus.emit(EVENT_TYPES.PANEL_MAXIMIZE_SYNC, { ...event, areaId: props.config.id })
-    }
-    allListeners['closePanel'] = (event) => {
-      // if (props.debug) console.log(`[Render-Area ${props.config.id}] closePanel:`, event)
-      eventBus.emit(EVENT_TYPES.PANEL_CLOSE, { ...event, areaId: props.config.id })
-    }
-  }
-  
-  if (props.type === 'TabPage') {
-    // TabPage组件的事件
-    allListeners['tabChange'] = (event) => {
-      // if (props.debug) console.log(`[Render-TabPage ${props.config.id}] tabChange:`, event)
-      eventBus.emit(EVENT_TYPES.TAB_CHANGE, { ...event, areaId: props.config.id })
-    }
-    allListeners['tabClose'] = (event) => {
-      // if (props.debug) console.log(`[Render-TabPage ${props.config.id}] tabClose:`, event)
-      eventBus.emit(EVENT_TYPES.TAB_CLOSE, { ...event, areaId: props.config.id })
-    }
-    allListeners['tabAdd'] = (event) => {
-      // if (props.debug) console.log(`[Render-TabPage ${props.config.id}] tabAdd:`, event)
-      eventBus.emit(EVENT_TYPES.TAB_ADD, { ...event, areaId: props.config.id })
-    }
-    allListeners['tabDragStart'] = (event) => {
-      // if (props.debug) console.log(`[Render-TabPage ${props.config.id}] tabDragStart:`, event)
-      eventBus.emit(EVENT_TYPES.TAB_DRAG_START, { ...event, areaId: props.config.id })
-    }
-    allListeners['tabDragMove'] = (event) => {
-      // if (props.debug) console.log(`[Render-TabPage ${props.config.id}] tabDragMove:`, event)
-      eventBus.emit(EVENT_TYPES.TAB_DRAG_MOVE, { ...event, areaId: props.config.id })
-    }
-    allListeners['tabDragEnd'] = (event) => {
-      // if (props.debug) console.log(`[Render-TabPage ${props.config.id}] tabDragEnd:`, event)
-      eventBus.emit(EVENT_TYPES.TAB_DRAG_END, { ...event, areaId: props.config.id })
-    }
-    allListeners['toggleCollapse'] = (event) => {
-      // if (props.debug) console.log(`[Render-TabPage ${props.config.id}] toggleCollapse:`, event)
-      eventBus.emit(EVENT_TYPES.PANEL_TOGGLE_COLLAPSE, { ...event, areaId: props.config.id })
-    }
-    allListeners['maximize'] = (event) => {
-      // if (props.debug) console.log(`[Render-TabPage ${props.config.id}] maximize:`, event)
-      eventBus.emit(EVENT_TYPES.PANEL_MAXIMIZE, { ...event, areaId: props.config.id })
-    }
-    allListeners['close'] = (event) => {
-      // if (props.debug) console.log(`[Render-TabPage ${props.config.id}] close:`, event)
-      eventBus.emit(EVENT_TYPES.PANEL_CLOSE_REQUEST, { ...event, areaId: props.config.id })
-    }
-    allListeners['toggleToolbar'] = (event) => {
-      // if (props.debug) console.log(`[Render-TabPage ${props.config.id}] toggleToolbar:`, event)
-      eventBus.emit(EVENT_TYPES.PANEL_TOGGLE_TOOLBAR, { ...event, areaId: props.config.id })
-    }
-    allListeners['dragStart'] = (event) => {
-      // if (props.debug) console.log(`[Render-TabPage ${props.config.id}] dragStart:`, event)
-      eventBus.emit(EVENT_TYPES.PANEL_DRAG_START_FROM_TABPAGE, { ...event, areaId: props.config.id })
-    }
-    allListeners['dragMove'] = (event) => {
-      // if (props.debug) console.log(`[Render-TabPage ${props.config.id}] dragMove:`, event)
-      eventBus.emit(EVENT_TYPES.PANEL_DRAG_MOVE_FROM_TABPAGE, { ...event, areaId: props.config.id })
-    }
-    allListeners['dragEnd'] = (event) => {
-      // if (props.debug) console.log(`[Render-TabPage ${props.config.id}] dragEnd:`, event)
-      eventBus.emit(EVENT_TYPES.PANEL_DRAG_END_FROM_TABPAGE, { ...event, areaId: props.config.id })
-    }
-  }
-  
-  if (props.type === 'Panel') {
-    // Panel组件的事件
-    allListeners['toggleCollapse'] = (event) => {
-      // if (props.debug) console.log(`[Render-Panel ${props.config.id}] toggleCollapse:`, event)
-      eventBus.emit(EVENT_TYPES.PANEL_TOGGLE_COLLAPSE, { ...event, areaId: props.config.id })
-    }
-    allListeners['maximize'] = (event) => {
-      // if (props.debug) console.log(`[Render-Panel ${props.config.id}] maximize:`, event)
-      eventBus.emit(EVENT_TYPES.PANEL_MAXIMIZE, { ...event, areaId: props.config.id })
-    }
-    allListeners['close'] = (event) => {
-      // if (props.debug) console.log(`[Render-Panel ${props.config.id}] close:`, event)
-      eventBus.emit(EVENT_TYPES.PANEL_CLOSE_REQUEST, { ...event, areaId: props.config.id })
-    }
-    allListeners['toggleToolbar'] = (event) => {
-      // if (props.debug) console.log(`[Render-Panel ${props.config.id}] toggleToolbar:`, event)
-      eventBus.emit(EVENT_TYPES.PANEL_TOGGLE_TOOLBAR, { ...event, areaId: props.config.id })
-    }
-    allListeners['dragStart'] = (event) => {
-      // if (props.debug) console.log(`[Render-Panel ${props.config.id}] dragStart:`, event)
-      eventBus.emit(EVENT_TYPES.PANEL_DRAG_START, { ...event, areaId: props.config.id })
-    }
-    allListeners['dragMove'] = (event) => {
-      // if (props.debug) console.log(`[Render-Panel ${props.config.id}] dragMove:`, event)
-      eventBus.emit(EVENT_TYPES.PANEL_DRAG_MOVE, { ...event, areaId: props.config.id })
-    }
-    allListeners['dragEnd'] = (event) => {
-      // if (props.debug) console.log(`[Render-Panel ${props.config.id}] dragEnd:`, event)
-      eventBus.emit(EVENT_TYPES.PANEL_DRAG_END, { ...event, areaId: props.config.id })
-    }
-  }
-  
-  return allListeners
-})
-
 
 
 // 暴露组件实例方法

AutoRobot/Windows/Robot/Web/src/DockLayout/eventBus.js

@@ -126,6 +126,7 @@ export const EVENT_TYPES = {
   // 调整大小
   AREA_RESIZE_START: 'area.resize.start',
   AREA_RESIZE: 'area.resize',
+  AREA_RESIZE_MOVE: 'area.resize.move',
   AREA_RESIZE_END: 'area.resize.end',
   AREA_RATIO_CHANGE: 'area.ratio.change',
   AREA_HIDE: 'area.hide',
@@ -154,6 +155,11 @@ export const EVENT_TYPES = {
   PANEL_DRAG_MOVE: 'panel.drag.move',
   PANEL_DRAG_END: 'panel.drag.end',
   PANEL_DRAG_CANCEL: 'panel.drag.cancel',
+  PANEL_CHECK_SINGLE_PANEL: 'panel.check.single.panel',
+  PANEL_SINGLE_PANEL_RESULT: 'panel.single.panel.result',
+  PANEL_RESIZE_START: 'panel.resize.start',
+  PANEL_RESIZE_MOVE: 'panel.resize.move',
+  PANEL_RESIZE_END: 'panel.resize.end',
   PANEL_DRAG_START_FROM_TABPAGE: 'panel.drag.start.fromTabPage',
   PANEL_DRAG_MOVE_FROM_TABPAGE: 'panel.drag.move.fromTabPage',
   PANEL_DRAG_END_FROM_TABPAGE: 'panel.drag.end.fromTabPage',

AutoRobot/Windows/Robot/Web/src/DockLayout/handlers/GlobalEventManager.js

@@ -4,6 +4,7 @@
  */
 
 import { eventBus, EVENT_TYPES } from '../eventBus';
+import { getAreaHandler } from './AreaHandler';
 
 // 全局事件类型常量
 export const GLOBAL_EVENT_TYPES = {
@@ -371,11 +372,19 @@ class GlobalEventManager {
       EVENT_TYPES.PANEL_DRAG_MOVE, 
       EVENT_TYPES.PANEL_DRAG_END,
       EVENT_TYPES.PANEL_DRAG_CANCEL,
+      // 面板resize上升事件
+      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,
+      // 区域resize上升事件
+      EVENT_TYPES.AREA_RESIZE_START,
+      EVENT_TYPES.AREA_RESIZE_MOVE,
+      EVENT_TYPES.AREA_RESIZE_END,
       // TabPage拖拽上升事件
       EVENT_TYPES.TABPAGE_DRAG_START,
       EVENT_TYPES.TABPAGE_DRAG_MOVE,
@@ -413,31 +422,51 @@ class GlobalEventManager {
       // 根据事件类型分发到不同的处理方法
       switch (eventType) {
         // 面板拖拽事件
-        case 'panel.drag.start':
+        case EVENT_TYPES.PANEL_DRAG_START:
           await this._handlePanelDragStart(data);
           break;
-        case 'panel.drag.move':
+        case EVENT_TYPES.PANEL_DRAG_MOVE:
           await this._handlePanelDragMove(data);
           break;
-        case 'panel.drag.end':
+        case EVENT_TYPES.PANEL_DRAG_END:
           await this._handlePanelDragEnd(data);
           break;
-        case 'panel.drag.cancel':
+        case EVENT_TYPES.PANEL_DRAG_CANCEL:
           await this._handlePanelDragCancel(data);
           break;
+        // 面板resize事件
+        case EVENT_TYPES.PANEL_RESIZE_START:
+          await this._handlePanelResizeStart(data);
+          break;
+        case EVENT_TYPES.PANEL_RESIZE_MOVE:
+          await this._handlePanelResizeMove(data);
+          break;
+        case EVENT_TYPES.PANEL_RESIZE_END:
+          await this._handlePanelResizeEnd(data);
+          break;
         // 区域拖拽事件
-        case 'area.drag.start':
+        case EVENT_TYPES.AREA_DRAG_START:
           await this._handleAreaDragStart(data);
           break;
-        case 'area.drag.move':
+        case EVENT_TYPES.AREA_DRAG_MOVE:
           await this._handleAreaDragMove(data);
           break;
-        case 'area.drag.end':
+        case EVENT_TYPES.AREA_DRAG_END:
           await this._handleAreaDragEnd(data);
           break;
-        case 'area.drag.cancel':
+        case EVENT_TYPES.AREA_DRAG_CANCEL:
           await this._handleAreaDragCancel(data);
           break;
+        // 区域resize事件
+        case EVENT_TYPES.AREA_RESIZE_START:
+          await this._handleAreaResizeStart(data);
+          break;
+        case EVENT_TYPES.AREA_RESIZE_MOVE:
+          await this._handleAreaResizeMove(data);
+          break;
+        case EVENT_TYPES.AREA_RESIZE_END:
+          await this._handleAreaResizeEnd(data);
+          break;
         // 默认处理
         default:
           console.log(`🌐 全局事件: ${eventType}`, data);
@@ -454,56 +483,26 @@ class GlobalEventManager {
    * @returns {boolean} 是否应该操作区域
    */
   _shouldOperateAreaInsteadOfPanel(data) {
-    const { panelId, areaId, layout } = data;
+    const { panelId, areaId } = data;
     
     console.log(`🔍 检查单面板模式: areaId=${areaId}, panelId=${panelId}`);
-    console.log(`   layout信息: ${layout ? '提供' : '未提供'}`);
     
-    // 如果没有提供layout信息，默认返回false
+    // 获取AreaHandler实例
-    if (!layout) {
+    const areaHandler = getAreaHandler();
-      console.log('❌ 没有提供layout信息，返回false');
-      return false;
-    }
     
-    console.log(`   所有区域数量: ${layout.areas?.length || 0}`);
+    // 从AreaHandler获取区域状态
+    const areaState = areaHandler.getAreaState(areaId);
     
-    // 获取当前区域
+    // 检查区域是否只有一个面板
-    const area = layout.areas?.find(a => a.id === areaId);
-    if (!area) {
-      console.log(`❌ 找不到区域: ${areaId}，返回false`);
-      return false;
-    }
-    
-    console.log(`   找到区域: ${areaId}, 类型: ${area.type}`);
-    
-    // 修复：检查area.children而非area.panels，统计Panel数量
     let panelCount = 0;
-    
+    if (areaState.children && areaState.children.type === 'TabPage') {
-    // 遍历所有children，统计Panel数量
+      const tabChildren = Array.isArray(areaState.children.children) ? areaState.children.children : [areaState.children.children];
-    const childrenArray = Array.isArray(area.children) ? area.children : [area.children];
+      panelCount = tabChildren.filter(child => child.type === 'Panel').length;
-    console.log(`   区域children数量: ${childrenArray.length}`);
-    
-    for (const child of childrenArray) {
-      console.log(`   检查child: 类型=${child.type}, 有children=${!!child.children}`);
-      if (child.type === 'TabPage' && child.children) {
-        const tabChildrenArray = Array.isArray(child.children) ? child.children : [child.children];
-        console.log(`   TabPage children数量: ${tabChildrenArray.length}`);
-        
-        for (const tabChild of tabChildrenArray) {
-          console.log(`   检查TabPage child: 类型=${tabChild.type}, id=${tabChild.id || 'unknown'}`);
-          if (tabChild.type === 'Panel') {
-            panelCount++;
-            console.log(`✅ 找到Panel: ${tabChild.id || 'unknown'}`);
-          }
-        }
-      }
     }
     
-    console.log(`📊 区域${areaId}的Panel数量: ${panelCount}`);
-    
     // 如果区域中只有一个面板，返回true
     const result = panelCount === 1;
-    console.log(`✅ 单面板检测结果: ${result}`);
+    console.log(`✅ 单面板检测结果: ${result} (面板数量: ${panelCount})`);
     return result;
   }
 
@@ -697,6 +696,131 @@ class GlobalEventManager {
       status: 'cancelled'
     });
   }
+  
+  /**
+   * 处理面板resize开始事件
+   * @param {Object} data - 事件数据
+   */
+  async _handlePanelResizeStart(data) {
+    if (this.debugMode) {
+      console.log('👋 处理面板resize开始:', data);
+    }
+    
+    // 只有在单面板模式下，才将面板resize事件转发为区域resize事件
+    if (this._shouldOperateAreaInsteadOfPanel(data)) {
+      eventBus.emit(EVENT_TYPES.AREA_RESIZE_START, {
+        ...data,
+        eventType: EVENT_TYPES.AREA_RESIZE_START
+      });
+    }
+  }
+  
+  /**
+   * 处理面板resize移动事件
+   * @param {Object} data - 事件数据
+   */
+  async _handlePanelResizeMove(data) {
+    if (this.debugMode) {
+      console.log('✋ 处理面板resize移动:', data);
+    }
+    
+    // 只有在单面板模式下，才将面板resize事件转发为区域resize事件
+    if (this._shouldOperateAreaInsteadOfPanel(data)) {
+      // 直接转发总量数据
+      eventBus.emit(EVENT_TYPES.AREA_RESIZE, {
+        ...data,
+        eventType: EVENT_TYPES.AREA_RESIZE,
+        size: data.size,
+        position: data.position
+      });
+      
+      eventBus.emit(EVENT_TYPES.AREA_RESIZE_MOVE, {
+        ...data,
+        eventType: EVENT_TYPES.AREA_RESIZE_MOVE,
+        size: data.size,
+        position: data.position
+      });
+    }
+  }
+  
+  /**
+   * 处理面板resize结束事件
+   * @param {Object} data - 事件数据
+   */
+  async _handlePanelResizeEnd(data) {
+    if (this.debugMode) {
+      console.log('✋ 处理面板resize结束:', data);
+    }
+    
+    // 只有在单面板模式下，才将面板resize事件转发为区域resize事件
+    if (this._shouldOperateAreaInsteadOfPanel(data)) {
+      eventBus.emit(EVENT_TYPES.AREA_RESIZE_END, {
+        ...data,
+        eventType: EVENT_TYPES.AREA_RESIZE_END
+      });
+    }
+  }
+  
+  /**
+   * 处理区域resize开始事件
+   * @param {Object} data - 事件数据
+   */
+  async _handleAreaResizeStart(data) {
+    if (this.debugMode) {
+      console.log('👋 处理区域resize开始:', data);
+    }
+    
+    // 发送区域resize开始事件（下降事件）
+    eventBus.emit(EVENT_TYPES.AREA_RESIZE_START, {
+      ...data,
+      eventType: EVENT_TYPES.AREA_RESIZE_START
+    });
+  }
+  
+  /**
+   * 处理区域resize移动事件
+   * @param {Object} data - 事件数据
+   */
+  async _handleAreaResizeMove(data) {
+    if (this.debugMode) {
+      console.log('✋ 处理区域resize移动:', data);
+    }
+    
+    // 获取AreaHandler实例
+    const areaHandler = getAreaHandler();
+    
+    // 获取当前区域状态，包含宽高信息
+    const areaState = areaHandler.getAreaState(data.areaId);
+    
+    // 发送AREA_RESIZE事件，与AreaHandler监听的事件类型匹配
+    eventBus.emit(EVENT_TYPES.AREA_RESIZE, {
+      ...data,
+      eventType: EVENT_TYPES.AREA_RESIZE,
+      currentWidth: areaState.width || 0,
+      currentHeight: areaState.height || 0,
+      size: {
+        width: (areaState.width || 0) + (data.delta?.width || 0),
+        height: (areaState.height || 0) + (data.delta?.height || 0)
+      },
+      delta: data.delta
+    });
+  }
+  
+  /**
+   * 处理区域resize结束事件
+   * @param {Object} data - 事件数据
+   */
+  async _handleAreaResizeEnd(data) {
+    if (this.debugMode) {
+      console.log('✋ 处理区域resize结束:', data);
+    }
+    
+    // 发送区域resize结束事件（下降事件）
+    eventBus.emit(EVENT_TYPES.AREA_RESIZE_END, {
+      ...data,
+      eventType: EVENT_TYPES.AREA_RESIZE_END
+    });
+  }
 
   async _onGlobalEvent(data) {
     const eventType = data.eventType;