diff --git a/AutoRobot/Windows/Robot/Web/src/DockLayout/Panel.js b/AutoRobot/Windows/Robot/Web/src/DockLayout/Panel.js index ff608dd..f9caa9d 100644 --- a/AutoRobot/Windows/Robot/Web/src/DockLayout/Panel.js +++ b/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(); diff --git a/AutoRobot/Windows/Robot/Web/src/views/DockLayoutTest.vue b/AutoRobot/Windows/Robot/Web/src/views/DockLayoutTest.vue index 0d20190..5ddd960 100644 --- a/AutoRobot/Windows/Robot/Web/src/views/DockLayoutTest.vue +++ b/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) {