修复添加浮动窗口功能：优化Panel组件状态同步和添加调试日志

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

@@ -1,4 +1,4 @@
-import { ref, computed, defineComponent, onMounted, onUnmounted, watch } from 'vue';
+import { ref, computed, defineComponent, onMounted, onUnmounted, watch, nextTick } from 'vue';
 
 /**
  * 浮动面板组件
@@ -43,12 +43,18 @@ export default defineComponent({
 
     // 计算面板样式
     const panelStyle = computed(() => {
+      // 确保从props.panel获取最新值，而不仅仅依赖内部ref
+      const posX = props.panel.x !== undefined ? props.panel.x : panelPosition.value.x;
+      const posY = props.panel.y !== undefined ? props.panel.y : panelPosition.value.y;
+      const width = props.panel.width !== undefined ? props.panel.width : panelSize.value.width;
+      const height = props.panel.height !== undefined ? props.panel.height : panelSize.value.height;
+      
       const style = {
         position: 'absolute',
-        top: `${panelPosition.value.y}px`,
-        left: `${panelPosition.value.x}px`,
-        width: `${panelSize.value.width}px`,
-        height: `${panelSize.value.height}px`,
+        top: `${posY}px`,
+        left: `${posX}px`,
+        width: `${width}px`,
+        height: `${height}px`,
         backgroundColor: 'white',
         border: '1px solid #e5e7eb',
         borderRadius: '4px',
@@ -133,10 +139,12 @@ export default defineComponent({
       if (newPanel) {
         syncPanelProperties();
       }
-    }, { deep: true });
+    }, { deep: true, immediate: true });
 
     // 生命周期钩子
-    onMounted(() => {
+    onMounted(async () => {
+      // 确保DOM更新后再同步状态
+      await nextTick();
       // 同步外部面板状态
       syncPanelProperties();
       

AutoRobot/Windows/Robot/Web/src/views/DockLayoutTest.vue

@@ -76,17 +76,19 @@ const panelHost = ref(null);
 
 // 浮动面板列表
 const floatingPanels = ref([]);
-let nextPanelIdx = 1;
+// 使用响应式数据存储面板索引，确保正确更新
+const nextPanelIdx = ref(1);
 
 function addPanel(position) {
   console.log('[DockLayoutTest] addPanel clicked:', position);
 }
 
 function addFloatingPanel() {
+  console.log('[DockLayoutTest] addFloatingPanel called');
   // 复原截图样式的默认面板参数
   const defaultSize = { width: 300, height: 180 };
   const offset = 16;
-  const idx = nextPanelIdx++;
+  const idx = nextPanelIdx.value++;
   const panel = {
     id: 'float-' + idx,
     title: '输出',
@@ -98,7 +100,9 @@ function addFloatingPanel() {
     toolbarExpanded: false,
     maximized: false,
   };
+  console.log('[DockLayoutTest] Adding panel:', panel);
   floatingPanels.value.push(panel);
+  console.log('[DockLayoutTest] Panels after add:', floatingPanels.value.length);
 }
 
 function closePanel(id) {