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

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

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