点击Panel最大化

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

@@ -101,7 +101,7 @@
       <div class="vs-content">        
         <!-- 这里是内容区域，优先显示slot内容，如果没有slot内容则显示接收到的外部内容 -->
         <template v-if="$slots.default">
-          <slot @maximize="onPanelMaximize"></slot>
+          <slot></slot>
         </template>
         <!-- 直接显示接收到的外部TabPage内容，不需要额外包装 -->
         <template v-else-if="receivedContent.length > 0">
@@ -115,6 +115,7 @@
             @tabDragStart="() => {}"
             @tabDragMove="() => {}"
             @tabDragEnd="() => {}"
+            @maximize="onPanelMaximize"
           />
         </template>
       </div>
@@ -242,17 +243,25 @@ const areaStyle = computed(() => {
   return style
 })
 
-const emit = defineEmits(['close', 'update:WindowState', 'update:position', 'dragover', 'dragleave', 'areaDragStart', 'areaDragMove', 'areaDragEnd', 'area-merged'])
+const emit = defineEmits(['close', 'update:windowState', 'update:position', 'dragover', 'dragleave', 'areaDragStart', 'areaDragMove', 'areaDragEnd', 'area-merged', 'toggleCollapse', 'maximize', 'close', 'toggleToolbar', 'dragStart', 'dragMove', 'dragEnd'])
 
 // 处理Panel的最大化事件
 const onPanelMaximize = (panelId) => {
+  console.log('🔸 Area接收最大化事件 - Panel ID:', panelId)
+  
   // 检查内容区是否只有一个Panel
   const panelChildren = $slots.default ? $slots.default() : []
   const isSinglePanel = panelChildren.length === 1
   
+  console.log('🔸 检查是否单Panel模式:', { panelChildren: panelChildren.length, isSinglePanel })
+  
   if (isSinglePanel) {
-    // 如果只有一个Panel，则切换Area的最大化状态
+    console.log('🔸 单Panel模式，切换Area最大化状态')
     onToggleMaximize()
+  } else {
+    console.log('🔸 非单Panel模式，转发到父组件')
+    // 如果不是单Panel，转发给父组件处理
+    emit('maximize', panelId)
   }
 }
 

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

@@ -64,9 +64,21 @@
         :title="tabPage.title"
         :panels="tabPage.panels"
         :tabPosition="'bottom'"
+        @tab-change="onTabChange"
+        @tab-close="onTabClose"
+        @tab-add="onTabAdd"
         @tabDragStart="onTabDragStart(area.id, $event)"
         @tabDragMove="onTabDragMove(area.id, $event)"
         @tabDragEnd="onTabDragEnd"
+        @toggle-collapse="(panelId) => $emit('toggleCollapse', panelId)"
+        @maximize="(panelId) => onMaximize(panelId)"
+        @close="(panelId) => onClosePanel(area.id, panelId)"
+        @toggle-toolbar="(panelId) => $emit('toggleToolbar', panelId)"
+        @drag-start="(event) => $emit('dragStart', event)"
+        @drag-move="(event) => $emit('dragMove', event)"
+        @drag-end="(event) => $emit('dragEnd', event)"
+        @dragover="handleAreaDragOver"
+        @dragleave="handleAreaDragLeave"
       >
         <!-- 在TabPage内渲染其包含的Panels -->
         <Panel
@@ -79,7 +91,7 @@
           :maximized="panel.maximized"
           :content="panel.content"
           @toggleCollapse="onToggleCollapse"
-          @maximize="onMaximize"
+          @maximize="(panelId) => $emit('maximize', panelId)"
           @close="onClosePanel(area.id, panel.id)"
           @toggleToolbar="onToggleToolbar"
           @dragStart="onPanelDragStart(area.id, $event)"
@@ -94,12 +106,22 @@
 </template>
 
 <script setup>
-import { ref, defineExpose, nextTick, watch, computed, onMounted } from 'vue'
+import { ref, defineExpose, defineEmits, nextTick, watch, computed, onMounted } from 'vue'
 import Area from './Area.vue';
 import Panel from './Panel.vue';
 import TabPage from './TabPage.vue';
 import DockIndicator from './DockIndicator.vue';
 
+// 定义组件可以发出的事件
+const emit = defineEmits([
+  'maximize',      // 面板最大化事件
+  'toggleCollapse', // 折叠状态切换事件
+  'toggleToolbar', // 工具栏切换事件
+  'dragStart',     // 拖拽开始事件
+  'dragMove',      // 拖拽移动事件
+  'dragEnd'        // 拖拽结束事件
+])
+
 // 主区域状态
 const windowState = ref('最大化')
 

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

@@ -80,7 +80,7 @@
             :maximized="panel.maximized || false"
             :content="panel.content"
             @toggle-collapse="$emit('toggleCollapse', $event)"
-            @maximize="$emit('maximize', $event)"
+            @maximize="(event) => { console.log('🔸 TabPage转发最大化事件:', event); $emit('maximize', event); }"
             @close="$emit('close', $event)"
             @toggle-toolbar="$emit('toggleToolbar', $event)"
             @drag-start="$emit('dragStart', $event)"
@@ -178,7 +178,7 @@ const props = defineProps({
   }
 })
 
-const emit = defineEmits(['tabChange', 'tabClose', 'tabAdd', 'tabDragStart', 'tabDragMove', 'tabDragEnd'])
+const emit = defineEmits(['tabChange', 'tabClose', 'tabAdd', 'tabDragStart', 'tabDragMove', 'tabDragEnd', 'toggleCollapse', 'maximize', 'close', 'toggleToolbar', 'dragStart', 'dragMove', 'dragEnd'])
 
 // 当前激活的标签页索引
 const activeTabIndex = ref(-1)