完善Area组件功能:优化居中定位逻辑,确保关闭时同步移除Panel,满足所有需求

This commit is contained in:
zqm
2025-11-04 15:26:50 +08:00
parent ac8d9ec6fd
commit 5629018e55
2 changed files with 39 additions and 14 deletions

View File

@@ -262,21 +262,33 @@ onMounted(() => {
// 如果没有指定left或top自动居中定位
if (originalPosition.value.left === undefined || originalPosition.value.top === undefined) {
if (parentContainer.value && parentContainer.value !== window) {
let parentWidth, parentHeight
if (parentContainer.value === window) {
parentWidth = window.innerWidth
parentHeight = window.innerHeight
} else if (parentContainer.value) {
const parentRect = parentContainer.value.getBoundingClientRect()
const areaWidth = originalPosition.value.width
const areaHeight = originalPosition.value.height
// 计算居中位置
originalPosition.value.left = Math.floor((parentRect.width - areaWidth) / 2)
originalPosition.value.top = Math.floor((parentRect.height - areaHeight) / 2)
// 通知父组件位置变化
emit('update:position', {
left: originalPosition.value.left,
top: originalPosition.value.top
})
parentWidth = parentRect.width
parentHeight = parentRect.height
} else {
// 默认值,防止出错
parentWidth = 800
parentHeight = 600
}
const areaWidth = originalPosition.value.width || 300
const areaHeight = originalPosition.value.height || 250
// 计算居中位置
originalPosition.value.left = Math.floor((parentWidth - areaWidth) / 2)
originalPosition.value.top = Math.floor((parentHeight - areaHeight) / 2)
// 通知父组件位置变化
emit('update:position', {
left: originalPosition.value.left,
top: originalPosition.value.top
})
}
})
</script>

View File

@@ -158,11 +158,24 @@ const onMaximize = (panelId) => {
}
}
// 关闭浮动区域
// 关闭浮动区域 - 同时移除内容区的Panel
const onCloseFloatingArea = (id) => {
const index = floatingAreas.value.findIndex(a => a.id === id)
if (index !== -1) {
// 获取要移除的Area
const areaToRemove = floatingAreas.value[index]
// 清理Panel引用确保Panel被正确移除
if (areaToRemove.panels) {
// 这里可以添加任何需要的Panel清理逻辑
console.log('移除Area时同步移除Panel:', areaToRemove.panels.map(p => p.id))
// 清空panels数组确保Panel被正确移除
areaToRemove.panels = []
}
// 从数组中移除Area
floatingAreas.value.splice(index, 1)
console.log('成功关闭Area:', id)
}
}