From 0aecb2dec471af328046218969225fd7abf1de76 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9B=BE=E5=BA=86=E6=98=8E?= <xyzqm114@126.com>
Date: Mon, 20 Oct 2025 10:59:56 +0800
Subject: [PATCH] =?UTF-8?q?=E7=A7=BB=E9=99=A4=E6=8E=A7=E5=88=B6=E5=8F=B0?=
 =?UTF-8?q?=E6=97=A5=E5=BF=97=E8=AF=AD=E5=8F=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .trae/rules/project_rules.md                  | 13 +++++++++
 .../Web/src/components/DockPanelContainer.vue | 14 ++++++++--
 .../Robot/Web/src/components/LayoutManager.js | 12 +++++---
 .../Web/src/components/LayoutPersistence.js   | 16 +++++++----
 .../Web/src/components/ResizeHandlers.js      |  4 +--
 .../Robot/Web/src/store/dockPanelStore.js     | 28 +++++++++++++++++--
 6 files changed, 70 insertions(+), 17 deletions(-)
 create mode 100644 .trae/rules/project_rules.md

diff --git a/.trae/rules/project_rules.md b/.trae/rules/project_rules.md
new file mode 100644
index 0000000..a4b309b
--- /dev/null
+++ b/.trae/rules/project_rules.md
@@ -0,0 +1,13 @@
+1. Android:这是安卓的库目录，包含了安卓库的代码和资源文件
+2. VUE:这是Vue的库目录，包含了Vue库的代码和资源文件
+3. AutoRobot:这是AutoRobot的项目目录
+4. AutoRobot\Android\Robot:这是AutoRobot项目的安卓端的子项目目录
+6. AutoRobot\Windows\Robot:这是AutoRobot项目的服务端的子项目目录，编译并运行：go run .\main.go
+7. AutoRobot\Windows\Robot\Web:这是AutoRobot项目的客户端的子项目目录，编译：npm run build
+8. 在执行git或svn操作时，需要切换代码页到 chcp 936， 执行其它命令时，请先切换回默认的代码页 chcp 65001
+9. Maven 仓库地址是 http://geek.cdjkt.com:30003/repository/maven-public，isAllowInsecureProtocol = true
+10. go 仓库的地址是 http://geek.cdjkt.com:30003/repository/go-public
+11. Nexus 仓库地址是：http://geek.cdjkt.com:30003，用户名：admin，密码：Access2cRte
+12. 当前终端是powershell，请注意命令的格式
+13. 当文件被修改时，需要暂停执行，待我接受或者拒绝修改后，再继续执行
+14. 不要自行提交git或svn，我让提交就只提交一次
diff --git a/AutoRobot/Windows/Robot/Web/src/components/DockPanelContainer.vue b/AutoRobot/Windows/Robot/Web/src/components/DockPanelContainer.vue
index c9c2a79..e366cd4 100644
--- a/AutoRobot/Windows/Robot/Web/src/components/DockPanelContainer.vue
+++ b/AutoRobot/Windows/Robot/Web/src/components/DockPanelContainer.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="dock-panel-container w-full h-full relative overflow-hidden bg-gray-100">
+  <div ref="container" class="dock-panel-container w-full h-full relative overflow-hidden bg-gray-100">
     <!-- 主内容区域 -->
     <div class="flex flex-col h-full">
       <!-- 顶部面板区域 -->
@@ -322,8 +322,16 @@ const container = ref(null);
 // 初始化Pinia store
 const store = useDockPanelStore();
 
-// 初始化布局管理器
-const layoutManager = useLayoutManager(store);
+// 定义布局应用完成后的回调函数，用于刷新面板大小
+function handleLayoutApplied() {
+  // 确保容器存在后调用refreshPanelSizes并传递容器元素
+  if (container.value) {
+    store.refreshPanelSizes(container.value);
+  }
+}
+
+// 初始化布局管理器，传递布局应用完成后的回调函数
+const layoutManager = useLayoutManager(store, handleLayoutApplied);
 
 // 拖拽状态
 const dragState = computed({
diff --git a/AutoRobot/Windows/Robot/Web/src/components/LayoutManager.js b/AutoRobot/Windows/Robot/Web/src/components/LayoutManager.js
index 78b85f5..695d5b6 100644
--- a/AutoRobot/Windows/Robot/Web/src/components/LayoutManager.js
+++ b/AutoRobot/Windows/Robot/Web/src/components/LayoutManager.js
@@ -14,11 +14,12 @@ export class LayoutManager {
    * 构造函数
    * @param {Object} store - Pinia store实例
    */
-  constructor(store) {
+  constructor(store, onLayoutApplied = null) {
     this.store = store;
     this.container = ref(null);
     this.layoutPersistence = null;
     this.resizeHandlers = null;
+    this.onLayoutApplied = onLayoutApplied;
   }
 
   /**
@@ -29,9 +30,11 @@ export class LayoutManager {
     // 直接传入store对象，让LayoutPersistence能够访问最新的面板数据
     // 创建布局持久化实例
     // 优化：LayoutPersistence构造函数已简化，只需要store对象和storageKey
+    // 传递onLayoutApplied回调，以便在布局应用完成后通知调用方
     this.layoutPersistence = new LayoutPersistence(
       this.store,
-      'dockPanelLayout'
+      'dockPanelLayout',
+      this.onLayoutApplied
     );
 
     // 创建调整大小处理器
@@ -226,10 +229,11 @@ export class LayoutManager {
 /**
  * 创建LayoutManager的Vue组合式函数
  * @param {Object} store - Pinia store实例
+ * @param {Function} onLayoutApplied - 布局应用完成后的回调函数
  * @returns {Object} LayoutManager实例及相关方法
  */
-export function useLayoutManager(store) {
-  const layoutManager = new LayoutManager(store);
+export function useLayoutManager(store, onLayoutApplied = null) {
+  const layoutManager = new LayoutManager(store, onLayoutApplied);
   
   onMounted(() => {
     layoutManager.initialize();
diff --git a/AutoRobot/Windows/Robot/Web/src/components/LayoutPersistence.js b/AutoRobot/Windows/Robot/Web/src/components/LayoutPersistence.js
index 9cd6057..3ecaadd 100644
--- a/AutoRobot/Windows/Robot/Web/src/components/LayoutPersistence.js
+++ b/AutoRobot/Windows/Robot/Web/src/components/LayoutPersistence.js
@@ -7,11 +7,12 @@ export class LayoutPersistence {
  * @param {Object} store - Pinia store实例，包含面板集合和布局状态信息
  * @param {string} storageKey - localStorage存储键名
  */
-  constructor(store, storageKey = 'dockPanelLayout') {
+  constructor(store, storageKey = 'dockPanelLayout', onLayoutApplied = null) {
     // 完全简化参数，只需要store对象和可选的storageKey
     this.panelCollections = store;
     this.layoutState = store; // 统一使用store对象
     this.storageKey = storageKey;
+    this.onLayoutApplied = onLayoutApplied;
   }
 
   /**
@@ -130,9 +131,7 @@ export class LayoutPersistence {
     const bottomPanelValue = this.panelCollections.bottomPanelArea || {};
     const centerPanelValue = this.panelCollections.centerPanelArea || {};
     
-    // 打印当前读取的面板宽度值
-    console.log('LayoutPersistence - 读取左侧面板宽度:', leftPanelValue.width || 0);
-    console.log('LayoutPersistence - 读取右侧面板宽度:', rightPanelValue.width || 0);
+    // 获取当前面板宽度值
     
     const layoutData = {
       // 面板区数据
@@ -282,7 +281,14 @@ export class LayoutPersistence {
       this.panelCollections.activeCenterTab = layout.activeCenterTab;
     }
     
-    // 面板比例已通过面板区域对象直接应用，无需额外处理
+    // 面板比例已通过面板区域对象直接应用
+    
+    // 布局应用完成，触发布局应用完成事件
+    // 注意：实际的刷新操作应该由调用方（如DockPanelContainer.vue）来执行，
+    // 因为它可以直接访问容器DOM元素并传递给refreshPanelSizes方法
+    if (this.onLayoutApplied) {
+      this.onLayoutApplied();
+    }
   }
 
   /**
diff --git a/AutoRobot/Windows/Robot/Web/src/components/ResizeHandlers.js b/AutoRobot/Windows/Robot/Web/src/components/ResizeHandlers.js
index 9be99cc..09f60b4 100644
--- a/AutoRobot/Windows/Robot/Web/src/components/ResizeHandlers.js
+++ b/AutoRobot/Windows/Robot/Web/src/components/ResizeHandlers.js
@@ -295,9 +295,9 @@ export class ResizeHandlers {
       this.store.resizeStartPos = { x: 0, y: 0 };
       
       // 打印保存前的面板宽度值
-      console.log('ResizeHandlers - 保存前左侧面板宽度:', this.store.leftPanelArea.width);
+  
       this.layoutPersistence.saveLayout();
-      console.log('ResizeHandlers - 保存后左侧面板宽度:', this.store.leftPanelArea.width);
+  
     } else if (this.store.dragState.active && checkDockZoneCallback) {
       // 计算拖拽距离
       const dragDistance = Math.sqrt(
diff --git a/AutoRobot/Windows/Robot/Web/src/store/dockPanelStore.js b/AutoRobot/Windows/Robot/Web/src/store/dockPanelStore.js
index 9ca1c49..a1e0e51 100644
--- a/AutoRobot/Windows/Robot/Web/src/store/dockPanelStore.js
+++ b/AutoRobot/Windows/Robot/Web/src/store/dockPanelStore.js
@@ -345,13 +345,13 @@ export const useDockPanelStore = defineStore('dockPanel', () => {
     // 处理所有位置面板的通用逻辑
     if (panels.length > 0) {
       resetPanelsSizeRatios(position)
-      // 使用传入的容器参数更新面板尺寸
+      // 无论是否提供container参数，都应该更新面板区内的子面板尺寸
       if (container) {
         updatePanelsSize(position, panelArea, container, { panelWidth: 150, panelHeight: 100 });
       }
     }
     // 如果面板区域变为空，触发尺寸影响处理以更新其他区域
-    if (panels.length === 0 && container) {
+    if (panels.length === 0) {
       handlePanelSizeInfluence(position, container);
     }
     
@@ -651,6 +651,27 @@ export const useDockPanelStore = defineStore('dockPanel', () => {
     minimizedWindows.value = []
   }
 
+  // 刷新所有面板区域的大小信息
+  function refreshPanelSizes(container = null) {
+    // 对于每个面板区域，调用updatePanelsSize来刷新大小信息
+    // 只有当容器存在时才调用updatePanelsSize
+    if (container) {
+      updatePanelsSize('left', leftPanelArea.value, container);
+      updatePanelsSize('right', rightPanelArea.value, container);
+      updatePanelsSize('top', topPanelArea.value, container);
+      updatePanelsSize('bottom', bottomPanelArea.value, container);
+      updatePanelsSize('center', centerPanelArea.value, container);
+    }
+    
+    // 触发响应式更新
+    // 重新赋值整个对象来确保Vue能够检测到变化
+    leftPanelArea.value = { ...leftPanelArea.value };
+    rightPanelArea.value = { ...rightPanelArea.value };
+    topPanelArea.value = { ...topPanelArea.value };
+    bottomPanelArea.value = { ...bottomPanelArea.value };
+    centerPanelArea.value = { ...centerPanelArea.value };
+  }
+
   // 初始化面板大小影响关系和受影响关系
   function initializePanelSizeInfluence() {
     // 初始化影响关系数据
@@ -948,7 +969,7 @@ export const useDockPanelStore = defineStore('dockPanel', () => {
       case 'top':
         newSize = layoutCoordinator.adjustRegionSize('top', panelAreas.top.height, delta, panelAreas, containerHeight)
         panelAreas.top.height = newSize
-        console.log('dockPanelStore - 顶部面板高度更新为:', panelAreas.top.height)
+    
         break
       case 'bottom':
         newSize = layoutCoordinator.adjustRegionSize('bottom', panelAreas.bottom.height, -delta, panelAreas, containerHeight)
@@ -1007,6 +1028,7 @@ export const useDockPanelStore = defineStore('dockPanel', () => {
     resetLayout,
     resetPanelsSizeRatios,
     initializePanelSizeInfluence,
+    refreshPanelSizes,
     updatePanelsSize,
     handlePanelSizeInfluence,
     adjustAdjacentPanels,