修复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:
@@ -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;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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">
|
||||||
|
|||||||
@@ -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) : []
|
||||||
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user