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() {
// 创建布局持久化实例
// 直接传入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'
);
// 创建调整大小处理器

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

@@ -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;
}
// 面板比例已通过面板区域对象直接应用，无需额外处理