From 3a3fe141536bb38f2157ac14a3ed0dac2d650e27 Mon Sep 17 00:00:00 2001 From: zqm Date: Mon, 5 Jan 2026 15:40:40 +0800 Subject: [PATCH] =?UTF-8?q?=E7=82=B9=E5=87=BB=E4=BF=AE=E6=94=B9z-index?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Windows/Robot/Web/src/DockLayout/Area.vue | 57 +++++++++++++++---- .../Robot/Web/src/DockLayout/DockLayout.vue | 8 ++- .../Robot/Web/src/DockLayout/Render.vue | 15 +++++ .../Robot/Web/src/DockLayout/dockLayers.js | 51 +++++++++++++---- 4 files changed, 107 insertions(+), 24 deletions(-) diff --git a/AutoRobot/Windows/Robot/Web/src/DockLayout/Area.vue b/AutoRobot/Windows/Robot/Web/src/DockLayout/Area.vue index 35f82ef..339d086 100644 --- a/AutoRobot/Windows/Robot/Web/src/DockLayout/Area.vue +++ b/AutoRobot/Windows/Robot/Web/src/DockLayout/Area.vue @@ -139,6 +139,11 @@ const props = defineProps({ children: { type: [Array, Object], default: () => [] + }, + // 外部样式 + style: { + type: Object, + default: () => ({}) } }) @@ -259,11 +264,32 @@ watch(() => props.windowState, (newState) => { } }, { immediate: true }) +// 用于跟踪当前z-index的响应式ref，确保点击时能触发style更新 +const currentZIndex = ref(zIndexManager.getFloatingAreaZIndex(props.id)); + +// 监听props.id变化，重新初始化z-index +watch(() => props.id, (newId) => { + currentZIndex.value = zIndexManager.getFloatingAreaZIndex(newId); +}, { immediate: true }); + +// 监听Z_INDEX_UPDATE事件，当其他Area的z-index变化时，更新当前Area的z-index +// 因为zIndexManager重新排序了所有Area的z-index，所以当前Area的z-index也可能变化 +const unsubscribeZIndexUpdate = onEvent(EVENT_TYPES.Z_INDEX_UPDATE, () => { + currentZIndex.value = zIndexManager.getFloatingAreaZIndex(props.id); +}); + +// 组件卸载时取消订阅 +onUnmounted(() => { + unsubscribeZIndexUpdate(); +}); + // 根据状态计算尺寸和位置样式 const areaStyle = computed(() => { + let internalStyle; + if (isMaximized.value) { // 最大化时填充满父容器，使用更高的z-index确保在最顶层 - return { + internalStyle = { width: '100%', height: '100%', position: 'absolute', @@ -273,18 +299,18 @@ const areaStyle = computed(() => { margin: 0, padding: 0 } + } else { + // 非最大化状态：优先使用originalPosition的值，实时响应拖拽变化 + internalStyle = { + width: `${originalPosition.value.width}px`, + height: `${originalPosition.value.height}px`, + left: `${originalPosition.value.left}px`, + top: `${originalPosition.value.top}px`, + zIndex: currentZIndex.value // 使用响应式的z-index + } } - // 非最大化状态：优先使用originalPosition的值，实时响应拖拽变化 - const style = { - width: `${originalPosition.value.width}px`, - height: `${originalPosition.value.height}px`, - left: `${originalPosition.value.left}px`, - top: `${originalPosition.value.top}px`, - zIndex: zIndexManager.getFloatingAreaZIndex(props.id) // 使用动态的z-index值 - } - - return style + return internalStyle; }) // 使用事件总线替代直接emit @@ -704,12 +730,21 @@ const onAreaClick = () => { zIndexManager.activateFloatingArea(props.id) const newZIndex = zIndexManager.getFloatingAreaZIndex(props.id); console.log(`[Area:${props.id}] New z-index: ${newZIndex}`); + + // 更新响应式z-index，触发areaStyle重新计算 + currentZIndex.value = newZIndex; + emitEvent(EVENT_TYPES.Z_INDEX_UPDATE, { areaId: props.id, zIndex: newZIndex }, { source: { component: 'Area', areaId: props.id } }) + + // 直接更新DOM元素的z-index，确保界面上能看到变化 + if (areaRef.value) { + areaRef.value.style.zIndex = newZIndex; + } } // 组件挂载后获取父容器引用并初始化位置 diff --git a/AutoRobot/Windows/Robot/Web/src/DockLayout/DockLayout.vue b/AutoRobot/Windows/Robot/Web/src/DockLayout/DockLayout.vue index 38e7506..5503299 100644 --- a/AutoRobot/Windows/Robot/Web/src/DockLayout/DockLayout.vue +++ b/AutoRobot/Windows/Robot/Web/src/DockLayout/DockLayout.vue @@ -40,7 +40,6 @@ :key="area.id" :type="'Area'" :config="area" - :style="{ zIndex: zIndexManager.getFloatingAreaZIndex(area.id) }" /> @@ -700,14 +699,17 @@ const addFloatingPanel = (panel) => { } }; + // 生成唯一的areaId + const areaId = `area-${Date.now()}`; + const newArea = { - id: `area-${Date.now()}`, + id: areaId, type: 'floating', // 添加浮动类型标识 left: 100 + Math.random() * 200, top: 100 + Math.random() * 200, width: 300, height: 200, - zIndex: zIndexManager.getFloatingAreaZIndex(`area-${Date.now()}`), + zIndex: zIndexManager.getFloatingAreaZIndex(areaId), // 使用children结构以兼容Render组件的渲染逻辑 children: { type: 'TabPage', diff --git a/AutoRobot/Windows/Robot/Web/src/DockLayout/Render.vue b/AutoRobot/Windows/Robot/Web/src/DockLayout/Render.vue index 77b6c79..04899ce 100644 --- a/AutoRobot/Windows/Robot/Web/src/DockLayout/Render.vue +++ b/AutoRobot/Windows/Robot/Web/src/DockLayout/Render.vue @@ -3,6 +3,7 @@ @@ -42,6 +44,11 @@ const props = defineProps({ debug: { type: Boolean, default: false + }, + // 外部样式 + style: { + type: Object, + default: () => ({}) } }) @@ -105,6 +112,14 @@ const componentProps = computed(() => { } }) +// 合并内部样式和外部样式 +const combinedStyle = computed(() => { + return { + ...componentProps.value.style, + ...props.style + } +}) + // 暴露组件实例方法 diff --git a/AutoRobot/Windows/Robot/Web/src/DockLayout/dockLayers.js b/AutoRobot/Windows/Robot/Web/src/DockLayout/dockLayers.js index 56fef00..8ce3e70 100644 --- a/AutoRobot/Windows/Robot/Web/src/DockLayout/dockLayers.js +++ b/AutoRobot/Windows/Robot/Web/src/DockLayout/dockLayers.js @@ -76,15 +76,26 @@ class ZIndexManager { */ 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); - const newZIndex = maxZIndex + 1; - this.floatingAreas.set(areaId, newZIndex); - console.log(`[zIndexManager] Set z-index for ${areaId} to ${newZIndex}`); + // 获取当前所有浮动区域 + const areas = Array.from(this.floatingAreas.entries()); - // 触发重排以确保层级生效 - this.reorderFloatingAreas(); - console.log(`[zIndexManager] Floating areas after activation:`, this.getStatus()); + // 将当前激活的区域移到最后 + const activeArea = areas.find(a => a[0] === areaId); + if (activeArea) { + // 从数组中移除激活区域 + const updatedAreas = areas.filter(a => a[0] !== areaId); + // 将激活区域添加到数组末尾 + updatedAreas.push(activeArea); + + // 重新分配z-index，确保激活区域在最顶层 + updatedAreas.forEach(([id], index) => { + const zIndex = Z_INDEX_LAYERS.FLOATING_AREA + index + 1; + this.floatingAreas.set(id, zIndex); + console.log(`[zIndexManager] Reordered ${id} to z-index: ${zIndex}`); + }); + } + + console.log(`[zIndexManager] activateFloatingArea completed, current state:`, this.getStatus()); } /** @@ -92,14 +103,34 @@ class ZIndexManager { */ reorderFloatingAreas() { console.log(`[zIndexManager] reorderFloatingAreas called`); - const areas = Array.from(this.floatingAreas.entries()); - areas.sort((a, b) => a[1] - b[1]); // 按z-index排序 + // 获取当前所有浮动区域 + const areas = Array.from(this.floatingAreas.entries()); + + // 检查是否需要重排（z-index是否连续） + let needsReorder = false; + areas.sort((a, b) => a[1] - b[1]); + + for (let i = 0; i < areas.length; i++) { + const expectedZIndex = Z_INDEX_LAYERS.FLOATING_AREA + i + 1; + if (areas[i][1] !== expectedZIndex) { + needsReorder = true; + break; + } + } + + if (!needsReorder) { + console.log(`[zIndexManager] z-index already continuous, skipping reorder`); + return; + } + + // 只有在需要时才重排 areas.forEach(([areaId], index) => { 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()); }