ZengQingming/JoyD
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

点击修改z-index

Browse Source
This commit is contained in:
zqm
2026-01-05 13:29:28 +08:00
parent 10e40b0eee
commit 652b53ff3e
4 changed files with 62 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
AutoRobot/Windows/Robot/Web/src/DockLayout/Area.vue
View File

@@ -7,6 +7,7 @@
:data-area-id="id"
@dragover="handleDragOver"
@dragleave="handleDragLeave"
@click.capture="onAreaClick"
>
<!-- 调整大小的边框 -->
<div
@@ -280,7 +281,7 @@ const areaStyle = computed(() => {
height: `${originalPosition.value.height}px`,
left: `${originalPosition.value.left}px`,
top: `${originalPosition.value.top}px`,
zIndex: Z_INDEX_LAYERS.CONTENT // 使用统一的z-index层级
zIndex: zIndexManager.getFloatingAreaZIndex(props.id) // 使用动态的z-index值
}
return style
@@ -436,11 +437,9 @@ const onDragEnd = (eventData) => {
// 处理事件总线的area.resize.move事件
const onAreaResizeMove = (eventData) => {
console.log(`[Area:${props.id}] 收到AREA_RESIZE_MOVE事件:`, eventData) // 添加调试日志
const { areaId, size, position, direction, timestamp } = eventData
if (areaId !== props.id) {
console.log(`[Area:${props.id}] areaId不匹配，期望: ${props.id}, 实际: ${areaId}`) // 添加调试日志
return
}
@@ -450,8 +449,6 @@ const onAreaResizeMove = (eventData) => {
return
}
console.log(`[Area:${props.id}] 更新前originalPosition:`, originalPosition.value) // 添加调试日志
// 应用最小尺寸限制，与CSS保持一致
const minWidth = 200
const minHeight = 30
@@ -474,46 +471,12 @@ const onAreaResizeMove = (eventData) => {
let newLeft = inputLeft
let newTop = inputTop
// 计算边界位置，用于调试
// 计算边界位置
const oldBottom = originalPosition.value.top + originalPosition.value.height
const newBottom = newTop + newHeight
const oldRight = originalPosition.value.left + originalPosition.value.width
const newRight = newLeft + newWidth
// 对对角线方向进行特殊处理和日志记录
switch (direction) {
case 'top-right':
console.log(`[Area:${props.id}] top-right方向处理: 原下边框: ${oldBottom}, 新下边框: ${newBottom}, 差值: ${newBottom - oldBottom}`)
// 验证top-right方向下边框位置是否保持不变
if (Math.abs(newBottom - oldBottom) > 1) {
console.warn(`[Area:${props.id}] top-right方向下边框位置变化较大，可能存在计算误差`)
}
break
case 'top-left':
console.log(`[Area:${props.id}] top-left方向处理: 原下边框: ${oldBottom}, 新下边框: ${newBottom}, 差值: ${newBottom - oldBottom}`)
console.log(`[Area:${props.id}] top-left方向处理: 原右边框: ${oldRight}, 新右边框: ${newRight}, 差值: ${newRight - oldRight}`)
break
case 'bottom-left':
console.log(`[Area:${props.id}] bottom-left方向处理: 原上边框: ${originalPosition.value.top}, 新上边框: ${newTop}, 差值: ${newTop - originalPosition.value.top}`)
console.log(`[Area:${props.id}] bottom-left方向处理: 原右边框: ${oldRight}, 新右边框: ${newRight}, 差值: ${newRight - oldRight}`)
break
case 'top':
console.log(`[Area:${props.id}] top方向处理: 原下边框: ${oldBottom}, 新下边框: ${newBottom}, 差值: ${newBottom - oldBottom}`)
break
case 'left':
console.log(`[Area:${props.id}] left方向处理: 原右边框: ${oldRight}, 新右边框: ${newRight}, 差值: ${newRight - oldRight}`)
break
}
// 使用已有的边界位置计算结果，无需重新声明
// 确保新的位置和尺寸在合理范围内
// 注意：不直接限制newTop和newLeft，而是通过调整尺寸来保持在可视区域内
// 这样可以避免拖拽时的突然跳动
// 获取父容器尺寸，用于边界检查
let parentWidth = window.innerWidth
let parentHeight = window.innerHeight
@@ -547,8 +510,6 @@ const onAreaResizeMove = (eventData) => {
top: newTop
}
console.log(`[Area:${props.id}] 更新后originalPosition:`, originalPosition.value) // 添加调试日志
// 发送区域位置和尺寸更新事件
emitEvent(EVENT_TYPES.AREA_POSITION_UPDATE, {
areaId: props.id,
@@ -737,6 +698,20 @@ const onClose = () => emitEvent(EVENT_TYPES.PANEL_CLOSE_REQUEST, {
source: { component: 'Area', areaId: props.id }
})
// 区域点击事件 - 将当前区域置于最顶层
const onAreaClick = () => {
console.log(`[Area:${props.id}] onAreaClick called`);
zIndexManager.activateFloatingArea(props.id)
const newZIndex = zIndexManager.getFloatingAreaZIndex(props.id);
console.log(`[Area:${props.id}] New z-index: ${newZIndex}`);
emitEvent(EVENT_TYPES.Z_INDEX_UPDATE, {
areaId: props.id,
zIndex: newZIndex
}, {
source: { component: 'Area', areaId: props.id }
})
}
// 组件挂载后获取父容器引用并初始化位置
onMounted(() => {
parentContainer.value = document.querySelector('.dock-layout') || window

44
AutoRobot/Windows/Robot/Web/src/DockLayout/DockLayout.vue
View File

@@ -40,7 +40,7 @@
:key="area.id"
:type="'Area'"
:config="area"
:style="{ zIndex: area.zIndex || zIndexManager.getFloatingAreaZIndex(area.id) }"
:style="{ zIndex: zIndexManager.getFloatingAreaZIndex(area.id) }"
/>
</div>
</template>
@@ -126,49 +126,27 @@ const dragOperationCache = new Map();
* @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}`);
return false;
}
try {
// 简化逻辑：直接检查区域的面板数量
// 遍历所有子元素，统计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}`);
}
}
}
}
// 如果区域中只有一个面板，返回true
const result = panelCount === 1;
console.log(`[DockLayout] Area ${areaId} 单Panel检查结果:`, result, `(面板数量: ${panelCount})`);
if (result) {
console.log(`[DockLayout] Area ${areaId} 是单Panel模式，应该操作Area而不是Panel`);
}
return result;
return panelCount === 1;
} catch (error) {
console.error(`[DockLayout] 检查单Panel模式时出错:`, error);
return false;
}
};
@@ -182,8 +160,6 @@ const shouldOperateAreaInsteadOfPanel = (areaId) => {
const shouldOperateAreaInsteadOfPanelFromData = (data) => {
const { panelId, areaId } = data;
console.log(`🔍 检查单面板模式: areaId=${areaId}, panelId=${panelId}`);
// 从AreaHandler获取区域状态
const areaState = areaHandler.getAreaState(areaId);
@@ -195,9 +171,7 @@ const shouldOperateAreaInsteadOfPanelFromData = (data) => {
}
// 如果区域中只有一个面板，返回true
const result = panelCount === 1;
console.log(`✅ 单面板检测结果: ${result} (面板数量: ${panelCount})`);
return result;
return panelCount === 1;
};
const onCloseFloatingArea = (event) => {
@@ -586,6 +560,8 @@ const setupEventListeners = () => {
unsubscribeFunctions.push(eventBus.on(EVENT_TYPES.PANEL_CHECK_SINGLE_PANEL, onCheckSinglePanel, { componentId: 'dock-layout' }));
// Area位置更新事件
unsubscribeFunctions.push(eventBus.on(EVENT_TYPES.AREA_POSITION_UPDATE, onAreaPositionUpdate, { componentId: 'dock-layout' }));
// Area z-index更新事件
unsubscribeFunctions.push(eventBus.on(EVENT_TYPES.Z_INDEX_UPDATE, onZIndexUpdate, { componentId: 'dock-layout' }));
// Resize相关事件
unsubscribeFunctions.push(eventBus.on(EVENT_TYPES.RESIZE_START, () => emit('dragStart'), { componentId: 'dock-layout' }));
@@ -1191,6 +1167,16 @@ const onAreaPositionUpdate = (event) => {
}
};
// 处理Area z-index更新事件
const onZIndexUpdate = (event) => {
const { areaId, zIndex } = event;
const area = floatingAreas.value.find(a => a.id === areaId);
if (area) {
area.zIndex = zIndex;
}
};
const onAreaResizeEnd = (event) => {
const { areaId, direction, finalPosition } = event;

11
AutoRobot/Windows/Robot/Web/src/DockLayout/Panel.vue
View File

@@ -703,15 +703,11 @@ const onResizeStart = (e, direction) => {
*/
const setupEventListeners = () => {
try {
if (import.meta.env.DEV) {
console.log(`[Panel:${props.id}] 开始注册事件监听器...`)
}
// 监听面板最大化同步事件
const unsubscribeMaximizeSync = onEvent(EVENT_TYPES.PANEL_MAXIMIZE_SYNC, (data) => {
// 同时检查panelId和areaId，确保正确匹配
if (data.panelId === props.id || data.areaId === getCurrentAreaId()) {
console.log(`[Panel:${props.id}] 收到最大化同步事件:`, data);
isMaximized.value = data.maximized;
}
}, { componentId: `panel-${props.id}` })
@@ -720,7 +716,6 @@ const setupEventListeners = () => {
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}` })
@@ -811,7 +806,7 @@ const cleanupEventListeners = () => {
// 重置状态
try {
isDragging = false
isDragging.value = false
if (import.meta.env.DEV) {
console.log(`[Panel:${props.id}] 拖拽状态已重置`)
}
@@ -867,7 +862,7 @@ onUnmounted(() => {
try {
// 1. 立即设置标志位，防止新的异步操作
isDragging = false
isDragging.value = false
// 2. 同步清理所有可以直接清理的资源
const cleanupResult = cleanupEventListeners()
@@ -882,7 +877,7 @@ onUnmounted(() => {
// 即使出现异常，也要尝试强制清理
try {
isDragging = false
isDragging.value = false
} catch (forceError) {
console.error(`[Panel:${props.id}] 强制清理也失败:`, forceError)
}

40
AutoRobot/Windows/Robot/Web/src/DockLayout/dockLayers.js
View File

@@ -49,19 +49,25 @@ class ZIndexManager {
* @returns {number} z-index值
*/
getFloatingAreaZIndex(areaId, isActive = false) {
console.log(`[zIndexManager] getFloatingAreaZIndex called for areaId: ${areaId}, isActive: ${isActive}`);
if (isActive) {
return this.floatingAreas.get(areaId) || Z_INDEX_LAYERS.FLOATING_AREA_ACTIVE
const zIndex = this.floatingAreas.get(areaId) || Z_INDEX_LAYERS.FLOATING_AREA_ACTIVE;
console.log(`[zIndexManager] getFloatingAreaZIndex returning for ${areaId}: ${zIndex}`);
return zIndex;
}
// 为新区域分配z-index
if (!this.floatingAreas.has(areaId)) {
const maxZIndex = Math.max(...Array.from(this.floatingAreas.values()), Z_INDEX_LAYERS.FLOATING_AREA)
const newZIndex = maxZIndex + 1
this.floatingAreas.set(areaId, newZIndex)
return newZIndex
const maxZIndex = Math.max(...Array.from(this.floatingAreas.values()), Z_INDEX_LAYERS.FLOATING_AREA);
const newZIndex = maxZIndex + 1;
this.floatingAreas.set(areaId, newZIndex);
console.log(`[zIndexManager] Assigned new z-index for ${areaId}: ${newZIndex}`);
return newZIndex;
}
return this.floatingAreas.get(areaId)
const existingZIndex = this.floatingAreas.get(areaId);
console.log(`[zIndexManager] Returning existing z-index for ${areaId}: ${existingZIndex}`);
return existingZIndex;
}
/**
@@ -69,24 +75,32 @@ class ZIndexManager {
* @param {string} areaId - 区域ID
*/
activateFloatingArea(areaId) {
console.log(`[zIndexManager] activateFloatingArea called for areaId: ${areaId}`);
// 获取当前最大z-index
const maxZIndex = Math.max(...Array.from(this.floatingAreas.values()), Z_INDEX_LAYERS.FLOATING_AREA)
this.floatingAreas.set(areaId, maxZIndex + 1)
const maxZIndex = Math.max(...Array.from(this.floatingAreas.values()), Z_INDEX_LAYERS.FLOATING_AREA);
const newZIndex = maxZIndex + 1;
this.floatingAreas.set(areaId, newZIndex);
console.log(`[zIndexManager] Set z-index for ${areaId} to ${newZIndex}`);
// 触发重排以确保层级生效
this.reorderFloatingAreas()
this.reorderFloatingAreas();
console.log(`[zIndexManager] Floating areas after activation:`, this.getStatus());
}
/**
* 重新排序浮动区域层级
*/
reorderFloatingAreas() {
const areas = Array.from(this.floatingAreas.entries())
areas.sort((a, b) => a[1] - b[1]) // 按z-index排序
console.log(`[zIndexManager] reorderFloatingAreas called`);
const areas = Array.from(this.floatingAreas.entries());
areas.sort((a, b) => a[1] - b[1]); // 按z-index排序
areas.forEach(([areaId], index) => {
this.floatingAreas.set(areaId, Z_INDEX_LAYERS.FLOATING_AREA + index + 1)
})
const newZIndex = Z_INDEX_LAYERS.FLOATING_AREA + index + 1;
this.floatingAreas.set(areaId, newZIndex);
console.log(`[zIndexManager] Reordered ${areaId} to z-index: ${newZIndex}`);
});
console.log(`[zIndexManager] reorderFloatingAreas completed, current state:`, this.getStatus());
}
/**