实现Area最大化时自动同步Panel最大化状态,完成第10点需求

This commit is contained in:
zqm
2025-11-04 17:24:08 +08:00
parent cab535004c
commit fef21a9d19

View File

@@ -51,7 +51,7 @@
</template> </template>
<script setup> <script setup>
import { ref, defineExpose, nextTick } from 'vue' import { ref, defineExpose, nextTick, watch } from 'vue'
import Area from './Area.vue'; import Area from './Area.vue';
import Panel from './Panel.vue'; import Panel from './Panel.vue';
@@ -265,6 +265,23 @@ const onPanelDragEnd = () => {
panelDragState.value.currentAreaId = null panelDragState.value.currentAreaId = null
} }
// 监听floatingAreas变化确保当Area最大化时Panel也会自动最大化
watch(floatingAreas, (newAreas) => {
newAreas.forEach(area => {
// 当区域只包含一个Panel且Area状态变为最大化时Panel也应该最大化
if (area.panels && area.panels.length === 1) {
const isAreaMaximized = area.WindowState === '最大化' || area.WindowState === 'maximized';
const isPanelMaximized = area.panels[0].maximized;
// 如果状态不一致更新Panel的maximized属性
if (isAreaMaximized !== isPanelMaximized) {
area.panels[0] = { ...area.panels[0], maximized: isAreaMaximized };
console.log(`Area ${area.id} 状态变化同步Panel最大化状态为:`, isAreaMaximized);
}
}
});
}, { deep: true });
// 暴露方法给父组件 // 暴露方法给父组件
defineExpose({ defineExpose({
addFloatingPanel addFloatingPanel