From fd4c694b46a68943235725b7eaa16db9d68a1c5b Mon Sep 17 00:00:00 2001
From: zqm <zqm@example.com>
Date: Fri, 14 Nov 2025 16:43:00 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8DDockLayout=E6=B5=AE=E5=8A=A8?=
 =?UTF-8?q?=E7=AA=97=E5=8F=A3=E6=8C=89=E9=92=AE=E7=82=B9=E5=87=BB=E6=97=A0?=
 =?UTF-8?q?=E6=95=88=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 修复浮动窗口和面板按钮点击时触发拖拽而非按钮功能的问题
- 在Area.vue和Panel.vue中的所有按钮添加 @mousedown.stop 阻止事件冒泡
- 修复的事件类型包括：最大化、关闭、折叠等所有按钮
- 确保按钮点击时只触发相应的功能，不影响拖拽功能

修复文件：
- AutoRobot/Windows/Robot/Web/src/DockLayout/Area.vue
- AutoRobot/Windows/Robot/Web/src/DockLayout/Panel.vue
- AutoRobot/Windows/Robot/Web/src/views/DockLayoutTest.vue
---
 .../Windows/Robot/Web/src/DockLayout/Area.vue | 16 ++++++++--
 .../Robot/Web/src/DockLayout/Panel.vue        |  9 ++++--
 .../Robot/Web/src/views/DockLayoutTest.vue    | 31 +++++++++++++++++++
 3 files changed, 50 insertions(+), 6 deletions(-)

diff --git a/AutoRobot/Windows/Robot/Web/src/DockLayout/Area.vue b/AutoRobot/Windows/Robot/Web/src/DockLayout/Area.vue
index 1d93082..1f09129 100644
--- a/AutoRobot/Windows/Robot/Web/src/DockLayout/Area.vue
+++ b/AutoRobot/Windows/Robot/Web/src/DockLayout/Area.vue
@@ -66,7 +66,10 @@
           <span class="vs-title-text">{{ title || '面板区' }}</span>
         </div>
         <div class="vs-title-right title-bar-buttons flex items-center gap-0.5">
-          <button class="button-icon p-[2px] rounded hover:opacity-100 opacity-80" :aria-label="isMaximized ? '还原' : '最大化'" @click="onToggleMaximize">
+          <button class="button-icon p-[2px] rounded hover:opacity-100 opacity-80" 
+                  :aria-label="isMaximized ? '还原' : '最大化'" 
+                  @click.stop="onToggleMaximize"
+                  @mousedown.stop>
             <svg v-if="!isMaximized" class="icon-square-svg" width="11" height="11" viewBox="0 0 11 11" aria-hidden="true">
               <rect x="0.5" y="0.5" width="10" height="10" fill="#cbd6ff" stroke="#8ea3d8" stroke-width="1" />
               <rect x="3" y="3" width="5" height="1" fill="#b8c6ff" />
@@ -82,7 +85,10 @@
                    M2 6 L12.6 5 L7 6 L7 10 L2 10 Z" />
             </svg>
           </button>
-          <button class="button-icon p-[2px] rounded hover:opacity-100 opacity-80" aria-label="关闭" @click="onClose">
+          <button class="button-icon p-[2px] rounded hover:opacity-100 opacity-80" 
+                  aria-label="关闭" 
+                  @click.stop="onClose"
+                  @mousedown.stop>
             <svg width="11" height="11" viewBox="0 0 11 11" aria-hidden="true">
               <line x1="2" y1="2" x2="9" y2="9" stroke="#e6efff" stroke-width="1"></line>
               <line x1="2" y1="9" x2="9" y2="2" stroke="#e6efff" stroke-width="1"></line>
@@ -586,6 +592,8 @@ onMounted(() => {
   color: #ffffff;
   background: linear-gradient(to bottom, var(--vs-blue-top), var(--vs-blue-bottom));
   border-bottom: 1px solid var(--vs-blue-deep);
+  z-index: 15;  /* 确保标题栏在调整手柄之上 */
+  position: relative;  /* 为z-index生效 */
 }
 .vs-title-left { display: flex; align-items: center; gap: 6px; }
 .vs-app-icon { font-size: 12px; opacity: 0.9; }
@@ -594,6 +602,8 @@ onMounted(() => {
 .vs-btn {
   width: 22px; height: 18px; line-height: 18px;
   color: #ffffff; background: transparent; border: none; padding: 0; cursor: default;
+  position: relative;  /* 确保按钮层级生效 */
+  z-index: 16;  /* 确保按钮在最上层 */
 }
 .vs-btn:hover { background: rgba(255,255,255,0.12); }
 .vs-close:hover { background: #e81123; }
@@ -635,7 +645,7 @@ onMounted(() => {
 /* 调整大小的手柄样式 */
 .resize-handle {
   position: absolute;
-  z-index: 20;
+  z-index: 14;  /* 调整手柄应该在标题栏之下，但在正常区域内 */
   background: transparent;
   pointer-events: auto;
 }
diff --git a/AutoRobot/Windows/Robot/Web/src/DockLayout/Panel.vue b/AutoRobot/Windows/Robot/Web/src/DockLayout/Panel.vue
index 446983b..592a868 100644
--- a/AutoRobot/Windows/Robot/Web/src/DockLayout/Panel.vue
+++ b/AutoRobot/Windows/Robot/Web/src/DockLayout/Panel.vue
@@ -10,7 +10,8 @@
         </div>
         <div class="title-bar-buttons flex items-center gap-0.5">
           <button class="button-icon p-[2px] rounded hover:opacity-100 opacity-80" 
-                  @click="onToggleCollapse" 
+                  @click.stop="onToggleCollapse" 
+                  @mousedown.stop
                   aria-label="折叠/展开">
             <!-- 向下小三角，使用内联SVG避免样式作用域问题 -->
             <svg width="11" height="11" viewBox="0 0 11 11" aria-hidden="true">
@@ -18,7 +19,8 @@
             </svg>
           </button>
           <button class="button-icon p-[2px] rounded hover:opacity-100 opacity-80" 
-                  @click="onMaximize" 
+                  @click.stop="onMaximize" 
+                  @mousedown.stop
                   :aria-label="maximized ? '还原' : '最大化'">
             <!-- 最大化图标 -->
             <template v-if="!maximized">
@@ -43,7 +45,8 @@
             </template>
           </button>
           <button class="button-icon p-[2px] rounded hover:opacity-100 opacity-80" 
-                  @click="onClose" 
+                  @click.stop="onClose" 
+                  @mousedown.stop
                   aria-label="关闭">
             <!-- 关闭图标（X），内联SVG确保1px线条 -->
             <svg width="11" height="11" viewBox="0 0 11 11" aria-hidden="true">
diff --git a/AutoRobot/Windows/Robot/Web/src/views/DockLayoutTest.vue b/AutoRobot/Windows/Robot/Web/src/views/DockLayoutTest.vue
index 2413d0d..98d473b 100644
--- a/AutoRobot/Windows/Robot/Web/src/views/DockLayoutTest.vue
+++ b/AutoRobot/Windows/Robot/Web/src/views/DockLayoutTest.vue
@@ -69,12 +69,43 @@ function addPanel(position) {
 
 function addFloatingPanel() {
   console.log('[DockLayoutTest] addFloatingPanel called');
+  console.log('[DockLayoutTest] dockLayoutRef.value:', dockLayoutRef.value);
+  console.log('[DockLayoutTest] dockLayoutRef.value.addFloatingPanel:', dockLayoutRef.value?.addFloatingPanel);
+  
   // 向DockLayout组件发送添加浮动面板命令
   if (dockLayoutRef.value && dockLayoutRef.value.addFloatingPanel) {
     console.log('[DockLayoutTest] 调用DockLayout的addFloatingPanel方法');
+    
+    // 添加容器尺寸调试信息
+    if (dockLayoutRef.value.$el) {
+      const rect = dockLayoutRef.value.$el.getBoundingClientRect();
+      console.log('[DockLayoutTest] 容器尺寸:', {
+        width: rect.width,
+        height: rect.height,
+        left: rect.left,
+        top: rect.top
+      });
+    }
+    
     dockLayoutRef.value.addFloatingPanel();
+    
+    // 添加调用后的调试信息
+    setTimeout(() => {
+      if (dockLayoutRef.value) {
+        const floatingAreas = dockLayoutRef.value.floatingAreas || [];
+        console.log('[DockLayoutTest] 调用后的浮动区域数量:', floatingAreas.length);
+        console.log('[DockLayoutTest] 浮动区域数据:', floatingAreas);
+      }
+    }, 100);
+    
   } else {
     console.warn('[DockLayoutTest] DockLayout引用未初始化或addFloatingPanel方法不可用');
+    // 显示详细的调试信息
+    console.log('[DockLayoutTest] 调试信息:', {
+      'dockLayoutRef存在': !!dockLayoutRef.value,
+      'addFloatingPanel方法存在': !!(dockLayoutRef.value && dockLayoutRef.value.addFloatingPanel),
+      '所有可用方法': dockLayoutRef.value ? Object.keys(dockLayoutRef.value) : []
+    });
   }
 }