From 9d6bfbf4134af8f491d6ad118dcca718cfee6e0e Mon Sep 17 00:00:00 2001
From: bighuixiang <472705331@qq.com>
Date: Wed, 23 Jul 2025 21:31:12 +0800
Subject: [PATCH 1/2] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E5=9B=BE?=
 =?UTF-8?q?=E5=B1=82=E7=BC=A9=E7=95=A5=E5=9B=BE=E6=9B=B4=E6=96=B0=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD=EF=BC=8C=E4=BC=98=E5=8C=96=E5=8F=98=E6=8D=A2=E5=91=BD?=
 =?UTF-8?q?=E4=BB=A4=E6=89=A7=E8=A1=8C=E5=90=8E=E7=9A=84=E5=9B=BE=E5=B1=82?=
 =?UTF-8?q?=E7=8A=B6=E6=80=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../CanvasEditor/commands/StateCommands.js    | 25 +++++++++++++++++++
 1 file changed, 25 insertions(+)

diff --git a/src/component/Canvas/CanvasEditor/commands/StateCommands.js b/src/component/Canvas/CanvasEditor/commands/StateCommands.js
index 70faec77..f1dece88 100644
--- a/src/component/Canvas/CanvasEditor/commands/StateCommands.js
+++ b/src/component/Canvas/CanvasEditor/commands/StateCommands.js
@@ -60,6 +60,19 @@ export class TransformCommand extends Command {
     // 应用最终变换状态
     await this._applyTransform(targetObject, this.finalState);
 
+    setTimeout(() => {
+      // 现在图层就是元素本身，直接更新元素的缩略图
+      this?.layerManager?.canvasManager?.thumbnailManager?.generateLayerThumbnail?.(
+        this.layer.id
+      );
+      if (this.parent) {
+        // 如果有父图层，更新父图层的缩略图
+        this?.layerManager?.canvasManager?.thumbnailManager?.generateLayerThumbnail?.(
+          this.parent.id
+        );
+      }
+    }, 300);
+
     // 触发画布更新
     this.canvas.renderAll();
 
@@ -86,6 +99,18 @@ export class TransformCommand extends Command {
     // 应用初始变换状态
     await this._applyTransform(targetObject, this.initialState);
 
+    setTimeout(() => {
+      // 现在图层就是元素本身，直接更新元素的缩略图
+      this?.layerManager?.canvasManager?.thumbnailManager?.generateLayerThumbnail?.(
+        this.layer.id
+      );
+      if (this.parent) {
+        // 如果有父图层，更新父图层的缩略图
+        this?.layerManager?.canvasManager?.thumbnailManager?.generateLayerThumbnail?.(
+          this.parent.id
+        );
+      }
+    }, 300);
     // 触发画布更新
     this.canvas.renderAll();
 

From 3febe3794ccaf7319d22fb6d75ca665d6c194f6c Mon Sep 17 00:00:00 2001
From: bighuixiang <472705331@qq.com>
Date: Wed, 23 Jul 2025 21:50:19 +0800
Subject: [PATCH 2/2] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E5=B7=A6?=
 =?UTF-8?q?=E4=BE=A7=E5=AF=BC=E8=88=AA=E6=A0=8F=EF=BC=8C=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E5=BA=94=E7=94=A8=E5=B8=83=E5=B1=80=E5=92=8C=E4=BA=A4=E4=BA=92?=
 =?UTF-8?q?=E4=BD=93=E9=AA=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/component/Canvas/canvasExample.vue | 35 +++++++++++++++++++++++++-
 1 file changed, 34 insertions(+), 1 deletion(-)

diff --git a/src/component/Canvas/canvasExample.vue b/src/component/Canvas/canvasExample.vue
index 5f5aa084..fe886e4d 100644
--- a/src/component/Canvas/canvasExample.vue
+++ b/src/component/Canvas/canvasExample.vue
@@ -172,10 +172,20 @@ const canvasInit = () => {
     imageMode: "contains", // 设置底图包含在画布内
   });
 };
+
+const isShowLeft = ref(true);
 </script>
 
 <template>
-  <div class="app-container">
+  <div class="app-container-example">
+    <!-- 模拟左侧导航栏 -->
+    <div
+      class="app-wrapper-btns"
+      :class="{ hide: !isShowLeft }"
+      @click="isShowLeft = !isShowLeft"
+    >
+      <div class="app-btn">收起/展开</div>
+    </div>
     <!-- 内容区域 -->
     <div class="app-content">
       <!-- 红绿图模式示例 -->
@@ -248,6 +258,7 @@ const canvasInit = () => {
   padding: 0;
   box-sizing: border-box;
 }
+
 .canvas-wrapper-btns {
   position: fixed;
   top: 10px;
@@ -269,6 +280,27 @@ body {
   flex-direction: column;
 }
 
+.app-container-example {
+  height: 100vh;
+  display: flex;
+  flex-direction: row;
+}
+
+.app-wrapper-btns {
+  position: relative;
+  width: 200px;
+  height: 100vh;
+  background: #f8f9fa;
+  z-index: 1000;
+  transition: all 0.3s ease;
+  &.app-btn {
+    cursor: pointer;
+  }
+  &.hide {
+    width: 20px;
+  }
+}
+
 .view-switcher {
   display: flex;
   gap: 8px;
@@ -308,6 +340,7 @@ body {
 }
 
 .app-content {
+  position: relative;
   flex: 1;
   height: 100vh;
 }