From feaa0ed3a977c1affa13503f77354bcc7079438c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9B=BE=E5=BA=86=E6=98=8E?= Date: Mon, 20 Oct 2025 09:50:00 +0800 Subject: [PATCH] =?UTF-8?q?=E7=AE=80=E5=8C=96LayoutPersistence=E6=9E=84?= =?UTF-8?q?=E9=80=A0=E5=87=BD=E6=95=B0=E5=8F=82=E6=95=B0=EF=BC=8C=E7=A7=BB?= =?UTF-8?q?=E9=99=A4=E5=86=97=E4=BD=99=E7=9A=84layoutState=E5=8F=82?= =?UTF-8?q?=E6=95=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Robot/Web/src/components/LayoutManager.js | 17 +- .../Web/src/components/LayoutPersistence.js | 177 +++++++++++------- 2 files changed, 117 insertions(+), 77 deletions(-) diff --git a/AutoRobot/Windows/Robot/Web/src/components/LayoutManager.js b/AutoRobot/Windows/Robot/Web/src/components/LayoutManager.js index 83da805..78b85f5 100644 --- a/AutoRobot/Windows/Robot/Web/src/components/LayoutManager.js +++ b/AutoRobot/Windows/Robot/Web/src/components/LayoutManager.js @@ -26,19 +26,12 @@ export class LayoutManager { */ initialize() { // 创建布局持久化实例 + // 直接传入store对象，让LayoutPersistence能够访问最新的面板数据 + // 创建布局持久化实例 + // 优化：LayoutPersistence构造函数已简化，只需要store对象和storageKey this.layoutPersistence = new LayoutPersistence( - { - leftPanelArea: this.store.leftPanelArea, - rightPanelArea: this.store.rightPanelArea, - topPanelArea: this.store.topPanelArea, - bottomPanelArea: this.store.bottomPanelArea, - centerPanelArea: this.store.centerPanelArea, - floatingWindows: this.store.floatingWindows, - }, - { - activeCenterTab: this.store.activeCenterTab, - minimizedWindows: this.store.minimizedWindows - } + this.store, + 'dockPanelLayout' ); // 创建调整大小处理器 diff --git a/AutoRobot/Windows/Robot/Web/src/components/LayoutPersistence.js b/AutoRobot/Windows/Robot/Web/src/components/LayoutPersistence.js index 88e146d..8bddf8e 100644 --- a/AutoRobot/Windows/Robot/Web/src/components/LayoutPersistence.js +++ b/AutoRobot/Windows/Robot/Web/src/components/LayoutPersistence.js @@ -4,15 +4,13 @@ export class LayoutPersistence { /** * 构造函数 - * @param {Object} panelCollections - 面板集合对象 - * @param {Object} panelDimensions - 面板尺寸对象 - * @param {Object} layoutState - 布局状态对象 - * @param {Object} panelRatios - 面板比例对象 + * @param {Object} store - Pinia store实例，包含面板集合和布局状态信息 * @param {string} storageKey - localStorage存储键名 */ - constructor(panelCollections, layoutState, storageKey = 'dockPanelLayout') { - this.panelCollections = panelCollections; - this.layoutState = layoutState; + constructor(store, storageKey = 'dockPanelLayout') { + // 完全简化参数，只需要store对象和可选的storageKey + this.panelCollections = store; + this.layoutState = store; // 统一使用store对象 this.storageKey = storageKey; } @@ -22,8 +20,42 @@ export class LayoutPersistence { saveLayout() { try { const layout = this._getCurrentLayout(); + // 添加详细的保存日志 + console.log('LayoutPersistence - 即将保存的布局数据:', { + leftPanelWidth: layout.leftPanelArea.width, + timestamp: new Date().toISOString() + }); + + // 直接检查localStorage当前值 + const currentValue = localStorage.getItem(this.storageKey); + let currentWidth = '未知'; + if (currentValue) { + try { + const currentLayout = JSON.parse(currentValue); + currentWidth = currentLayout.leftPanelArea?.width || '未知'; + } catch (e) { + currentWidth = '解析失败'; + } + } + console.log('LayoutPersistence - 保存前localStorage中的左侧面板宽度:', currentWidth); + + // 执行保存操作 localStorage.setItem(this.storageKey, JSON.stringify(layout)); + + // 验证保存是否成功 + const savedValue = localStorage.getItem(this.storageKey); + let savedWidth = '未知'; + if (savedValue) { + try { + const savedLayout = JSON.parse(savedValue); + savedWidth = savedLayout.leftPanelArea?.width || '未知'; + } catch (e) { + savedWidth = '解析失败'; + } + } + console.log('LayoutPersistence - 保存后localStorage中的左侧面板宽度:', savedWidth); } catch (error) { + console.error('LayoutPersistence - 保存布局失败:', error); } } @@ -32,15 +64,38 @@ export class LayoutPersistence { */ loadLayout() { try { - const savedLayout = localStorage.getItem(this.storageKey); - if (!savedLayout) { + console.log('LayoutPersistence - 开始加载布局数据'); + + // 获取并记录localStorage中的原始数据 + const savedLayoutStr = localStorage.getItem(this.storageKey); + console.log('LayoutPersistence - localStorage中的原始数据存在:', !!savedLayoutStr); + + if (!savedLayoutStr) { + console.log('LayoutPersistence - 未找到保存的布局数据'); return false; } - const layout = JSON.parse(savedLayout); + // 解析并记录布局数据 + const layout = JSON.parse(savedLayoutStr); + console.log('LayoutPersistence - 解析后的布局数据:', { + leftPanelWidth: layout.leftPanelArea?.width || '未定义', + timestamp: layout.timestamp || '无时间戳' + }); + + // 记录应用前的左侧面板宽度 + const leftPanelValue = this.panelCollections.leftPanelArea || {}; + console.log('LayoutPersistence - 应用布局前左侧面板宽度:', leftPanelValue.width || 0); + + // 应用布局 this._applyLayout(layout); + + // 记录应用后的左侧面板宽度 + const updatedLeftPanelValue = this.panelCollections.leftPanelArea || {}; + console.log('LayoutPersistence - 应用布局后左侧面板宽度:', updatedLeftPanelValue.width || 0); + return true; } catch (error) { + console.error('LayoutPersistence - 加载布局失败:', error); throw error; } } @@ -119,13 +174,12 @@ export class LayoutPersistence { * @returns {Object} 布局数据对象 */ _getCurrentLayout() { - // 获取ref对象的实际值 - // 系统中面板区域始终是ref响应式对象，直接通过.value访问 - const leftPanelValue = this.panelCollections.leftPanelArea?.value || {}; - const rightPanelValue = this.panelCollections.rightPanelArea?.value || {}; - const topPanelValue = this.panelCollections.topPanelArea?.value || {}; - const bottomPanelValue = this.panelCollections.bottomPanelArea?.value || {}; - const centerPanelValue = this.panelCollections.centerPanelArea?.value || {}; + // 现在panelCollections是直接的store对象，可以直接访问其中的面板数据 + const leftPanelValue = this.panelCollections.leftPanelArea || {}; + const rightPanelValue = this.panelCollections.rightPanelArea || {}; + const topPanelValue = this.panelCollections.topPanelArea || {}; + const bottomPanelValue = this.panelCollections.bottomPanelArea || {}; + const centerPanelValue = this.panelCollections.centerPanelArea || {}; // 打印当前读取的面板宽度值 console.log('LayoutPersistence - 读取左侧面板宽度:', leftPanelValue.width || 0); @@ -163,9 +217,9 @@ export class LayoutPersistence { }, // 浮动窗口数据 - floatingWindows: this.panelCollections.floatingWindows?.value || this.panelCollections.floatingWindows || [], + floatingWindows: this.panelCollections.floatingWindows || [], - activeCenterTab: this.layoutState.activeCenterTab.value, + activeCenterTab: this.layoutState.activeCenterTab, timestamp: new Date().toISOString() }; return layoutData; @@ -177,113 +231,106 @@ export class LayoutPersistence { * @param {Object} layout - 布局数据对象 */ _applyLayout(layout) { - // 优先应用面板区数据（新结构） - // 系统中面板区域始终是ref响应式对象 + // 应用面板区数据 + // 现在panelCollections是store对象，可以直接访问和更新其中的面板数据 if (layout.leftPanelArea && this.panelCollections.leftPanelArea) { - const panelArea = this.panelCollections.leftPanelArea.value || {}; - const newPanelArea = { ...panelArea }; + // 直接使用store中的leftPanelArea对象 + const panelArea = this.panelCollections.leftPanelArea || {}; + // 直接更新对象的属性 if (Array.isArray(layout.leftPanelArea.panels)) { - newPanelArea.panels = layout.leftPanelArea.panels; + panelArea.panels = layout.leftPanelArea.panels; } if (layout.leftPanelArea.width !== undefined) { - newPanelArea.width = layout.leftPanelArea.width; + panelArea.width = layout.leftPanelArea.width; } if (Array.isArray(layout.leftPanelArea.heightRatios)) { - newPanelArea.heightRatios = layout.leftPanelArea.heightRatios; + panelArea.heightRatios = layout.leftPanelArea.heightRatios; } - // 更新整个对象以触发响应式更新 - this.panelCollections.leftPanelArea.value = newPanelArea; + // 在Pinia store中，直接修改对象属性会触发响应式更新 } if (layout.rightPanelArea && this.panelCollections.rightPanelArea) { - const panelArea = this.panelCollections.rightPanelArea.value || {}; - const newPanelArea = { ...panelArea }; + // 直接使用store中的rightPanelArea对象 + const panelArea = this.panelCollections.rightPanelArea || {}; + // 直接更新对象的属性 if (Array.isArray(layout.rightPanelArea.panels)) { - newPanelArea.panels = layout.rightPanelArea.panels; + panelArea.panels = layout.rightPanelArea.panels; } if (layout.rightPanelArea.width !== undefined) { - newPanelArea.width = layout.rightPanelArea.width; + panelArea.width = layout.rightPanelArea.width; } if (Array.isArray(layout.rightPanelArea.heightRatios)) { - newPanelArea.heightRatios = layout.rightPanelArea.heightRatios; + panelArea.heightRatios = layout.rightPanelArea.heightRatios; } - - // 更新整个对象以触发响应式更新 - this.panelCollections.rightPanelArea.value = newPanelArea; } if (layout.topPanelArea && this.panelCollections.topPanelArea) { - const panelArea = this.panelCollections.topPanelArea.value || {}; - const newPanelArea = { ...panelArea }; + // 直接使用store中的topPanelArea对象 + const panelArea = this.panelCollections.topPanelArea || {}; + // 直接更新对象的属性 if (Array.isArray(layout.topPanelArea.panels)) { - newPanelArea.panels = layout.topPanelArea.panels; + panelArea.panels = layout.topPanelArea.panels; } if (layout.topPanelArea.height !== undefined) { - newPanelArea.height = layout.topPanelArea.height; + panelArea.height = layout.topPanelArea.height; } if (Array.isArray(layout.topPanelArea.widthRatios)) { - newPanelArea.widthRatios = layout.topPanelArea.widthRatios; + panelArea.widthRatios = layout.topPanelArea.widthRatios; } - - // 更新整个对象以触发响应式更新 - this.panelCollections.topPanelArea.value = newPanelArea; } if (layout.bottomPanelArea && this.panelCollections.bottomPanelArea) { - const panelArea = this.panelCollections.bottomPanelArea.value || {}; - const newPanelArea = { ...panelArea }; + // 直接使用store中的bottomPanelArea对象 + const panelArea = this.panelCollections.bottomPanelArea || {}; + // 直接更新对象的属性 if (Array.isArray(layout.bottomPanelArea.panels)) { - newPanelArea.panels = layout.bottomPanelArea.panels; + panelArea.panels = layout.bottomPanelArea.panels; } if (layout.bottomPanelArea.height !== undefined) { - newPanelArea.height = layout.bottomPanelArea.height; + panelArea.height = layout.bottomPanelArea.height; } if (Array.isArray(layout.bottomPanelArea.widthRatios)) { - newPanelArea.widthRatios = layout.bottomPanelArea.widthRatios; + panelArea.widthRatios = layout.bottomPanelArea.widthRatios; } - - // 更新整个对象以触发响应式更新 - this.panelCollections.bottomPanelArea.value = newPanelArea; } // 应用中心面板区数据 if (layout.centerPanelArea && this.panelCollections.centerPanelArea) { - const panelArea = this.panelCollections.centerPanelArea.value || {}; - const newPanelArea = { ...panelArea }; + // 直接使用store中的centerPanelArea对象 + const panelArea = this.panelCollections.centerPanelArea || {}; + // 直接更新对象的属性 if (Array.isArray(layout.centerPanelArea.panels)) { - newPanelArea.panels = layout.centerPanelArea.panels; + panelArea.panels = layout.centerPanelArea.panels; } if (typeof layout.centerPanelArea.width === 'number') { - newPanelArea.width = layout.centerPanelArea.width; + panelArea.width = layout.centerPanelArea.width; } if (typeof layout.centerPanelArea.height === 'number') { - newPanelArea.height = layout.centerPanelArea.height; + panelArea.height = layout.centerPanelArea.height; } if (Array.isArray(layout.centerPanelArea.widthRatios)) { - newPanelArea.widthRatios = layout.centerPanelArea.widthRatios; + panelArea.widthRatios = layout.centerPanelArea.widthRatios; } if (Array.isArray(layout.centerPanelArea.heightRatios)) { - newPanelArea.heightRatios = layout.centerPanelArea.heightRatios; + panelArea.heightRatios = layout.centerPanelArea.heightRatios; } - - // 更新整个对象以触发响应式更新 - this.panelCollections.centerPanelArea.value = newPanelArea; } if (Array.isArray(layout.floatingWindows) && this.panelCollections.floatingWindows) { - // 直接赋值新的浮动窗口数组 - this.panelCollections.floatingWindows.value = layout.floatingWindows; + // 直接更新store中的浮动窗口数组 + this.panelCollections.floatingWindows = layout.floatingWindows; } // 应用激活标签 if (layout.activeCenterTab !== undefined) { - this.layoutState.activeCenterTab = layout.activeCenterTab; + // 现在layoutState是store对象，直接更新其中的activeCenterTab + this.panelCollections.activeCenterTab = layout.activeCenterTab; } // 面板比例已通过面板区域对象直接应用，无需额外处理