Merge branch 'dev_vite' of https://e.coding.net/aidlabfashion/aida/aida_front into dev_vite

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();
 

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;
@@ -270,6 +281,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;
@@ -309,6 +341,7 @@ body {
 }
 
 .app-content {
+  position: relative;
   flex: 1;
   height: 100vh;
 }