修复Panel组件以正确响应外部面板状态变化

AutoRobot/Windows/Robot/Web/src/DockLayout/Panel.js

@@ -1,4 +1,4 @@
-import { ref, computed, defineComponent, onMounted, onUnmounted } from 'vue';
+import { ref, computed, defineComponent, onMounted, onUnmounted, watch } from 'vue';
 
 /**
  * 浮动面板组件
@@ -33,6 +33,14 @@ export default defineComponent({
       height: props.panel.height || 180
     });
     
+    // 同步面板属性变化
+    const syncPanelProperties = () => {
+      if (props.panel.x !== undefined) panelPosition.value.x = props.panel.x;
+      if (props.panel.y !== undefined) panelPosition.value.y = props.panel.y;
+      if (props.panel.width !== undefined) panelSize.value.width = props.panel.width;
+      if (props.panel.height !== undefined) panelSize.value.height = props.panel.height;
+    };
+
     // 计算面板样式
     const panelStyle = computed(() => {
       const style = {
@@ -45,12 +53,16 @@ export default defineComponent({
         border: '1px solid #e5e7eb',
         borderRadius: '4px',
         boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1)',
-        overflow: 'hidden'
+        overflow: 'hidden',
+        zIndex: 10
       };
 
       // 最大化状态
       if (props.panel.maximized) {
-        const host = props.hostRef?.value;
+        // 获取host元素 - 直接使用hostRef或者hostRef.value（如果是ref）
+        const host = props.hostRef && typeof props.hostRef.getBoundingClientRect === 'function' 
+          ? props.hostRef 
+          : props.hostRef?.value;
         const rect = host?.getBoundingClientRect();
         if (rect) {
           style.top = '0px';
@@ -116,13 +128,17 @@ export default defineComponent({
       isDragging.value = false;
     };
 
+    // 监听面板属性变化
+    watch(() => props.panel, (newPanel) => {
+      if (newPanel) {
+        syncPanelProperties();
+      }
+    }, { deep: true });
+
     // 生命周期钩子
     onMounted(() => {
       // 同步外部面板状态
-      if (props.panel.x !== undefined) panelPosition.value.x = props.panel.x;
+      syncPanelProperties();
-      if (props.panel.y !== undefined) panelPosition.value.y = props.panel.y;
-      if (props.panel.width !== undefined) panelSize.value.width = props.panel.width;
-      if (props.panel.height !== undefined) panelSize.value.height = props.panel.height;
       
       // 添加全局事件监听
       document.addEventListener('mousemove', handleMouseMove);