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

简化LayoutPersistence构造函数参数，移除冗余的layoutState参数

Browse Source
This commit is contained in:
曾庆明
2025-10-20 09:50:00 +08:00
parent d663118a73
commit feaa0ed3a9
2 changed files with 117 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
AutoRobot/Windows/Robot/Web/src/components/LayoutManager.js
View File

@@ -26,19 +26,12 @@ export class LayoutManager {
*/ */
initialize() { initialize() {
// 创建布局持久化实例 // 创建布局持久化实例
// 直接传入store对象，让LayoutPersistence能够访问最新的面板数据
// 创建布局持久化实例
// 优化：LayoutPersistence构造函数已简化，只需要store对象和storageKey
this.layoutPersistence = new LayoutPersistence( this.layoutPersistence = new LayoutPersistence(
{ this.store,
leftPanelArea: this.store.leftPanelArea, 'dockPanelLayout'
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
}
); );
// 创建调整大小处理器 // 创建调整大小处理器

177
AutoRobot/Windows/Robot/Web/src/components/LayoutPersistence.js
View File

@@ -4,15 +4,13 @@
export class LayoutPersistence { export class LayoutPersistence {
/** /**
* 构造函数 * 构造函数
* @param {Object} panelCollections - 面板集合对象 * @param {Object} store - Pinia store实例，包含面板集合和布局状态信息
* @param {Object} panelDimensions - 面板尺寸对象
* @param {Object} layoutState - 布局状态对象
* @param {Object} panelRatios - 面板比例对象
* @param {string} storageKey - localStorage存储键名 * @param {string} storageKey - localStorage存储键名
*/ */
constructor(panelCollections, layoutState, storageKey = 'dockPanelLayout') { constructor(store, storageKey = 'dockPanelLayout') {
this.panelCollections = panelCollections; // 完全简化参数，只需要store对象和可选的storageKey
this.layoutState = layoutState; this.panelCollections = store;
this.layoutState = store; // 统一使用store对象
this.storageKey = storageKey; this.storageKey = storageKey;
} }
@@ -22,8 +20,42 @@ export class LayoutPersistence {
saveLayout() { saveLayout() {
try { try {
const layout = this._getCurrentLayout(); 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)); 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) { } catch (error) {
console.error('LayoutPersistence - 保存布局失败:', error);
} }
} }
@@ -32,15 +64,38 @@ export class LayoutPersistence {
*/ */
loadLayout() { loadLayout() {
try { try {
const savedLayout = localStorage.getItem(this.storageKey); console.log('LayoutPersistence - 开始加载布局数据');
if (!savedLayout) {
// 获取并记录localStorage中的原始数据
const savedLayoutStr = localStorage.getItem(this.storageKey);
console.log('LayoutPersistence - localStorage中的原始数据存在:', !!savedLayoutStr);
if (!savedLayoutStr) {
console.log('LayoutPersistence - 未找到保存的布局数据');
return false; 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); this._applyLayout(layout);
// 记录应用后的左侧面板宽度
const updatedLeftPanelValue = this.panelCollections.leftPanelArea || {};
console.log('LayoutPersistence - 应用布局后左侧面板宽度:', updatedLeftPanelValue.width || 0);
return true; return true;
} catch (error) { } catch (error) {
console.error('LayoutPersistence - 加载布局失败:', error);
throw error; throw error;
} }
} }
@@ -119,13 +174,12 @@ export class LayoutPersistence {
* @returns {Object} 布局数据对象 * @returns {Object} 布局数据对象
*/ */
_getCurrentLayout() { _getCurrentLayout() {
// 获取ref对象的实际值 // 现在panelCollections是直接的store对象，可以直接访问其中的面板数据
// 系统中面板区域始终是ref响应式对象，直接通过.value访问 const leftPanelValue = this.panelCollections.leftPanelArea || {};
const leftPanelValue = this.panelCollections.leftPanelArea?.value || {}; const rightPanelValue = this.panelCollections.rightPanelArea || {};
const rightPanelValue = this.panelCollections.rightPanelArea?.value || {}; const topPanelValue = this.panelCollections.topPanelArea || {};
const topPanelValue = this.panelCollections.topPanelArea?.value || {}; const bottomPanelValue = this.panelCollections.bottomPanelArea || {};
const bottomPanelValue = this.panelCollections.bottomPanelArea?.value || {}; const centerPanelValue = this.panelCollections.centerPanelArea || {};
const centerPanelValue = this.panelCollections.centerPanelArea?.value || {};
// 打印当前读取的面板宽度值 // 打印当前读取的面板宽度值
console.log('LayoutPersistence - 读取左侧面板宽度:', leftPanelValue.width || 0); 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() timestamp: new Date().toISOString()
}; };
return layoutData; return layoutData;
@@ -177,113 +231,106 @@ export class LayoutPersistence {
* @param {Object} layout - 布局数据对象 * @param {Object} layout - 布局数据对象
*/ */
_applyLayout(layout) { _applyLayout(layout) {
// 优先应用面板区数据（新结构） // 应用面板区数据
// 系统中面板区域始终是ref响应式对象 // 现在panelCollections是store对象，可以直接访问和更新其中的面板数据
if (layout.leftPanelArea && this.panelCollections.leftPanelArea) { if (layout.leftPanelArea && this.panelCollections.leftPanelArea) {
const panelArea = this.panelCollections.leftPanelArea.value || {}; // 直接使用store中的leftPanelArea对象
const newPanelArea = { ...panelArea }; const panelArea = this.panelCollections.leftPanelArea || {};
// 直接更新对象的属性
if (Array.isArray(layout.leftPanelArea.panels)) { if (Array.isArray(layout.leftPanelArea.panels)) {
newPanelArea.panels = layout.leftPanelArea.panels; panelArea.panels = layout.leftPanelArea.panels;
} }
if (layout.leftPanelArea.width !== undefined) { if (layout.leftPanelArea.width !== undefined) {
newPanelArea.width = layout.leftPanelArea.width; panelArea.width = layout.leftPanelArea.width;
} }
if (Array.isArray(layout.leftPanelArea.heightRatios)) { if (Array.isArray(layout.leftPanelArea.heightRatios)) {
newPanelArea.heightRatios = layout.leftPanelArea.heightRatios; panelArea.heightRatios = layout.leftPanelArea.heightRatios;
} }
// 更新整个对象以触发响应式更新 // 在Pinia store中，直接修改对象属性会触发响应式更新
this.panelCollections.leftPanelArea.value = newPanelArea;
} }
if (layout.rightPanelArea && this.panelCollections.rightPanelArea) { if (layout.rightPanelArea && this.panelCollections.rightPanelArea) {
const panelArea = this.panelCollections.rightPanelArea.value || {}; // 直接使用store中的rightPanelArea对象
const newPanelArea = { ...panelArea }; const panelArea = this.panelCollections.rightPanelArea || {};
// 直接更新对象的属性
if (Array.isArray(layout.rightPanelArea.panels)) { if (Array.isArray(layout.rightPanelArea.panels)) {
newPanelArea.panels = layout.rightPanelArea.panels; panelArea.panels = layout.rightPanelArea.panels;
} }
if (layout.rightPanelArea.width !== undefined) { if (layout.rightPanelArea.width !== undefined) {
newPanelArea.width = layout.rightPanelArea.width; panelArea.width = layout.rightPanelArea.width;
} }
if (Array.isArray(layout.rightPanelArea.heightRatios)) { 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) { if (layout.topPanelArea && this.panelCollections.topPanelArea) {
const panelArea = this.panelCollections.topPanelArea.value || {}; // 直接使用store中的topPanelArea对象
const newPanelArea = { ...panelArea }; const panelArea = this.panelCollections.topPanelArea || {};
// 直接更新对象的属性
if (Array.isArray(layout.topPanelArea.panels)) { if (Array.isArray(layout.topPanelArea.panels)) {
newPanelArea.panels = layout.topPanelArea.panels; panelArea.panels = layout.topPanelArea.panels;
} }
if (layout.topPanelArea.height !== undefined) { if (layout.topPanelArea.height !== undefined) {
newPanelArea.height = layout.topPanelArea.height; panelArea.height = layout.topPanelArea.height;
} }
if (Array.isArray(layout.topPanelArea.widthRatios)) { 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) { if (layout.bottomPanelArea && this.panelCollections.bottomPanelArea) {
const panelArea = this.panelCollections.bottomPanelArea.value || {}; // 直接使用store中的bottomPanelArea对象
const newPanelArea = { ...panelArea }; const panelArea = this.panelCollections.bottomPanelArea || {};
// 直接更新对象的属性
if (Array.isArray(layout.bottomPanelArea.panels)) { if (Array.isArray(layout.bottomPanelArea.panels)) {
newPanelArea.panels = layout.bottomPanelArea.panels; panelArea.panels = layout.bottomPanelArea.panels;
} }
if (layout.bottomPanelArea.height !== undefined) { if (layout.bottomPanelArea.height !== undefined) {
newPanelArea.height = layout.bottomPanelArea.height; panelArea.height = layout.bottomPanelArea.height;
} }
if (Array.isArray(layout.bottomPanelArea.widthRatios)) { 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) { if (layout.centerPanelArea && this.panelCollections.centerPanelArea) {
const panelArea = this.panelCollections.centerPanelArea.value || {}; // 直接使用store中的centerPanelArea对象
const newPanelArea = { ...panelArea }; const panelArea = this.panelCollections.centerPanelArea || {};
// 直接更新对象的属性
if (Array.isArray(layout.centerPanelArea.panels)) { if (Array.isArray(layout.centerPanelArea.panels)) {
newPanelArea.panels = layout.centerPanelArea.panels; panelArea.panels = layout.centerPanelArea.panels;
} }
if (typeof layout.centerPanelArea.width === 'number') { if (typeof layout.centerPanelArea.width === 'number') {
newPanelArea.width = layout.centerPanelArea.width; panelArea.width = layout.centerPanelArea.width;
} }
if (typeof layout.centerPanelArea.height === 'number') { if (typeof layout.centerPanelArea.height === 'number') {
newPanelArea.height = layout.centerPanelArea.height; panelArea.height = layout.centerPanelArea.height;
} }
if (Array.isArray(layout.centerPanelArea.widthRatios)) { if (Array.isArray(layout.centerPanelArea.widthRatios)) {
newPanelArea.widthRatios = layout.centerPanelArea.widthRatios; panelArea.widthRatios = layout.centerPanelArea.widthRatios;
} }
if (Array.isArray(layout.centerPanelArea.heightRatios)) { 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) { if (Array.isArray(layout.floatingWindows) && this.panelCollections.floatingWindows) {
// 直接赋值新的浮动窗口数组 // 直接更新store中的浮动窗口数组
this.panelCollections.floatingWindows.value = layout.floatingWindows; this.panelCollections.floatingWindows = layout.floatingWindows;
} }
// 应用激活标签 // 应用激活标签
if (layout.activeCenterTab !== undefined) { if (layout.activeCenterTab !== undefined) {
this.layoutState.activeCenterTab = layout.activeCenterTab; // 现在layoutState是store对象，直接更新其中的activeCenterTab
this.panelCollections.activeCenterTab = layout.activeCenterTab;
} }
// 面板比例已通过面板区域对象直接应用，无需额外处理 // 面板比例已通过面板区域对象直接应用，无需额外处理