ZengQingming/JoyD
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修复Panel图标状态同步：当Area最大化或还原时，正确处理TabPage层级结构，同步更新Panel的maximized状态

Browse Source
This commit is contained in:
zqm
2025-11-06 13:32:18 +08:00
parent 9c8b1ce410
commit bedbea7e76
1 changed files with 56 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
AutoRobot/Windows/Robot/Web/src/DockLayout/DockLayout.vue
View File

@@ -159,7 +159,10 @@ const onToggleCollapse = (id) => {
const onMaximize = (panelId) => {
// 查找包含该面板的区域
for (const area of floatingAreas.value) {
if (area.panels && area.panels.length === 1 && area.panels[0].id === panelId) {
// 正确处理层级结构：Area -> TabPage -> Panel
if (area.tabPages) {
for (const tabPage of area.tabPages) {
if (tabPage.panels && tabPage.panels.length === 1 && tabPage.panels[0].id === panelId) {
// 当区域只包含一个Panel时，切换Area和Panel的最大化状态
const isCurrentlyMaximized = area.WindowState === '最大化' || area.WindowState === 'maximized'
@@ -168,19 +171,21 @@ const onMaximize = (panelId) => {
// 切换为正常状态
area.WindowState = '正常'
// 确保Panel也恢复正常状态 - 使用展开运算符创建新对象确保响应式
area.panels[0] = { ...area.panels[0], maximized: false }
tabPage.panels[0] = { ...tabPage.panels[0], maximized: false }
} else {
// 切换为最大化状态
area.WindowState = '最大化'
// 同时最大化Panel - 使用展开运算符创建新对象确保响应式
area.panels[0] = { ...area.panels[0], maximized: true }
tabPage.panels[0] = { ...tabPage.panels[0], maximized: true }
}
console.log('Panel最大化按钮触发，切换Area状态:', area.WindowState)
console.log('Panel最大化状态:', area.panels[0].maximized)
console.log('Panel最大化状态:', tabPage.panels[0].maximized)
break
}
}
}
}
}
// 关闭浮动区域 - 同时移除内容区的Panel
@@ -207,15 +212,21 @@ const onCloseFloatingArea = (id) => {
// 关闭面板
const onClosePanel = (areaId, panelId) => {
const area = floatingAreas.value.find(a => a.id === areaId)
if (area && area.panels) {
const panelIndex = area.panels.findIndex(p => p.id === panelId)
// 正确处理层级结构：Area -> TabPage -> Panel
if (area && area.tabPages) {
for (const tabPage of area.tabPages) {
if (tabPage.panels) {
const panelIndex = tabPage.panels.findIndex(p => p.id === panelId)
if (panelIndex !== -1) {
area.panels.splice(panelIndex, 1)
tabPage.panels.splice(panelIndex, 1)
// 如果区域内没有面板了，可以考虑关闭整个区域
if (area.panels.length === 0) {
if (tabPage.panels.length === 0) {
onCloseFloatingArea(areaId)
}
break
}
}
}
}
}
@@ -289,17 +300,22 @@ const onPanelDragEnd = () => {
// 监听floatingAreas变化，确保当Area最大化时，Panel也会自动最大化
watch(floatingAreas, (newAreas) => {
newAreas.forEach(area => {
// 正确处理层级结构：Area -> TabPage -> Panel
if (area.tabPages) {
for (const tabPage of area.tabPages) {
// 当区域只包含一个Panel且Area状态变为最大化时，Panel也应该最大化
if (area.panels && area.panels.length === 1) {
if (tabPage.panels && tabPage.panels.length === 1) {
const isAreaMaximized = area.WindowState === '最大化' || area.WindowState === 'maximized';
const isPanelMaximized = area.panels[0].maximized;
const isPanelMaximized = tabPage.panels[0].maximized;
// 如果状态不一致，更新Panel的maximized属性
if (isAreaMaximized !== isPanelMaximized) {
area.panels[0] = { ...area.panels[0], maximized: isAreaMaximized };
tabPage.panels[0] = { ...tabPage.panels[0], maximized: isAreaMaximized };
console.log(`Area ${area.id} 状态变化，同步Panel最大化状态为:`, isAreaMaximized);
}
}
}
}
});
}, { deep: true });
@@ -307,9 +323,10 @@ watch(floatingAreas, (newAreas) => {
const onPanelMaximizeSync = ({ areaId, maximized }) => {
// 查找对应的Area
const area = floatingAreas.value.find(a => a.id === areaId);
if (area && area.panels && area.panels.length === 1) {
// 更新Panel的maximized状态
area.panels[0] = { ...area.panels[0], maximized };
// 正确处理层级结构：Area -> TabPage -> Panel
if (area && area.tabPages && area.tabPages.length === 1 && area.tabPages[0].panels && area.tabPages[0].panels.length === 1) {
// 更新TabPage中Panel的maximized状态
area.tabPages[0].panels[0] = { ...area.tabPages[0].panels[0], maximized };
console.log(`同步Area ${areaId} 的Panel最大化状态为:`, maximized);
}
}