点击修改z-index

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的值，实时响应拖拽变化
-  const style = {
+    internalStyle = {
       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值
+      zIndex: currentZIndex.value // 使用响应式的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;
+  }
 }
 
 // 组件挂载后获取父容器引用并初始化位置

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) }"
     />
   </div>
 </template>
@@ -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',

AutoRobot/Windows/Robot/Web/src/DockLayout/Render.vue

@@ -3,6 +3,7 @@
   <component 
     :is="componentType" 
     v-bind="componentProps"
+    :style="combinedStyle"
   >
     <!-- 统一处理children属性，不区分组件类型，只要有children就渲染 -->
     <template v-if="config.children">
@@ -12,6 +13,7 @@
           :type="child.type" 
           :config="child" 
           :debug="debug"
+          :style="child.style"
         />
       </div>
     </template>
@@ -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
+  }
+})
+
 
 
 // 暴露组件实例方法

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 areas = Array.from(this.floatingAreas.entries());
-    const newZIndex = maxZIndex + 1;
-    this.floatingAreas.set(areaId, newZIndex);
-    console.log(`[zIndexManager] Set z-index for ${areaId} to ${newZIndex}`);
     
-    // 触发重排以确保层级生效
+    // 将当前激活的区域移到最后
-    this.reorderFloatingAreas();
+    const activeArea = areas.find(a => a[0] === areaId);
-    console.log(`[zIndexManager] Floating areas after activation:`, this.getStatus());
+    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());
   }