修复DockLayout浮动窗口按钮点击无效问题

- 修复浮动窗口和面板按钮点击时触发拖拽而非按钮功能的问题
- 在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
This commit is contained in:
zqm
2025-11-14 16:43:00 +08:00
parent 894fb8b87c
commit fd4c694b46
3 changed files with 50 additions and 6 deletions

View File

@@ -66,7 +66,10 @@
<span class="vs-title-text">{{ title || '面板区' }}</span> <span class="vs-title-text">{{ title || '面板区' }}</span>
</div> </div>
<div class="vs-title-right title-bar-buttons flex items-center gap-0.5"> <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"> <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="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" /> <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" /> M2 6 L12.6 5 L7 6 L7 10 L2 10 Z" />
</svg> </svg>
</button> </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"> <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="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> <line x1="2" y1="9" x2="9" y2="2" stroke="#e6efff" stroke-width="1"></line>
@@ -586,6 +592,8 @@ onMounted(() => {
color: #ffffff; color: #ffffff;
background: linear-gradient(to bottom, var(--vs-blue-top), var(--vs-blue-bottom)); background: linear-gradient(to bottom, var(--vs-blue-top), var(--vs-blue-bottom));
border-bottom: 1px solid var(--vs-blue-deep); 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-title-left { display: flex; align-items: center; gap: 6px; }
.vs-app-icon { font-size: 12px; opacity: 0.9; } .vs-app-icon { font-size: 12px; opacity: 0.9; }
@@ -594,6 +602,8 @@ onMounted(() => {
.vs-btn { .vs-btn {
width: 22px; height: 18px; line-height: 18px; width: 22px; height: 18px; line-height: 18px;
color: #ffffff; background: transparent; border: none; padding: 0; cursor: default; 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-btn:hover { background: rgba(255,255,255,0.12); }
.vs-close:hover { background: #e81123; } .vs-close:hover { background: #e81123; }
@@ -635,7 +645,7 @@ onMounted(() => {
/* 调整大小的手柄样式 */ /* 调整大小的手柄样式 */
.resize-handle { .resize-handle {
position: absolute; position: absolute;
z-index: 20; z-index: 14; /* 调整手柄应该在标题栏之下,但在正常区域内 */
background: transparent; background: transparent;
pointer-events: auto; pointer-events: auto;
} }

View File

@@ -10,7 +10,8 @@
</div> </div>
<div class="title-bar-buttons flex items-center gap-0.5"> <div class="title-bar-buttons flex items-center gap-0.5">
<button class="button-icon p-[2px] rounded hover:opacity-100 opacity-80" <button class="button-icon p-[2px] rounded hover:opacity-100 opacity-80"
@click="onToggleCollapse" @click.stop="onToggleCollapse"
@mousedown.stop
aria-label="折叠/展开"> aria-label="折叠/展开">
<!-- 向下小三角使用内联SVG避免样式作用域问题 --> <!-- 向下小三角使用内联SVG避免样式作用域问题 -->
<svg width="11" height="11" viewBox="0 0 11 11" aria-hidden="true"> <svg width="11" height="11" viewBox="0 0 11 11" aria-hidden="true">
@@ -18,7 +19,8 @@
</svg> </svg>
</button> </button>
<button class="button-icon p-[2px] rounded hover:opacity-100 opacity-80" <button class="button-icon p-[2px] rounded hover:opacity-100 opacity-80"
@click="onMaximize" @click.stop="onMaximize"
@mousedown.stop
:aria-label="maximized ? '还原' : '最大化'"> :aria-label="maximized ? '还原' : '最大化'">
<!-- 最大化图标 --> <!-- 最大化图标 -->
<template v-if="!maximized"> <template v-if="!maximized">
@@ -43,7 +45,8 @@
</template> </template>
</button> </button>
<button class="button-icon p-[2px] rounded hover:opacity-100 opacity-80" <button class="button-icon p-[2px] rounded hover:opacity-100 opacity-80"
@click="onClose" @click.stop="onClose"
@mousedown.stop
aria-label="关闭"> aria-label="关闭">
<!-- 关闭图标X内联SVG确保1px线条 --> <!-- 关闭图标X内联SVG确保1px线条 -->
<svg width="11" height="11" viewBox="0 0 11 11" aria-hidden="true"> <svg width="11" height="11" viewBox="0 0 11 11" aria-hidden="true">

View File

@@ -69,12 +69,43 @@ function addPanel(position) {
function addFloatingPanel() { function addFloatingPanel() {
console.log('[DockLayoutTest] addFloatingPanel called'); console.log('[DockLayoutTest] addFloatingPanel called');
console.log('[DockLayoutTest] dockLayoutRef.value:', dockLayoutRef.value);
console.log('[DockLayoutTest] dockLayoutRef.value.addFloatingPanel:', dockLayoutRef.value?.addFloatingPanel);
// 向DockLayout组件发送添加浮动面板命令 // 向DockLayout组件发送添加浮动面板命令
if (dockLayoutRef.value && dockLayoutRef.value.addFloatingPanel) { if (dockLayoutRef.value && dockLayoutRef.value.addFloatingPanel) {
console.log('[DockLayoutTest] 调用DockLayout的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(); dockLayoutRef.value.addFloatingPanel();
// 添加调用后的调试信息
setTimeout(() => {
if (dockLayoutRef.value) {
const floatingAreas = dockLayoutRef.value.floatingAreas || [];
console.log('[DockLayoutTest] 调用后的浮动区域数量:', floatingAreas.length);
console.log('[DockLayoutTest] 浮动区域数据:', floatingAreas);
}
}, 100);
} else { } else {
console.warn('[DockLayoutTest] DockLayout引用未初始化或addFloatingPanel方法不可用'); console.warn('[DockLayoutTest] DockLayout引用未初始化或addFloatingPanel方法不可用');
// 显示详细的调试信息
console.log('[DockLayoutTest] 调试信息:', {
'dockLayoutRef存在': !!dockLayoutRef.value,
'addFloatingPanel方法存在': !!(dockLayoutRef.value && dockLayoutRef.value.addFloatingPanel),
'所有可用方法': dockLayoutRef.value ? Object.keys(dockLayoutRef.value) : []
});
} }
} }