点击修改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的值，实时响应拖拽变化
+    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;
+  }
 }
 
 // 组件挂载后获取父容器引用并初始化位置