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] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E5=B7=A6=E4=BE=A7?=
 =?UTF-8?q?=E5=AF=BC=E8=88=AA=E6=A0=8F=EF=BC=8C=E4=BC=98=E5=8C=96=E5=BA=94?=
 =?UTF-8?q?=E7=94=A8=E5=B8=83=E5=B1=80=E5=92=8C=E4=BA=A4=E4=BA=92=E4=BD=93?=
 =?UTF-8?q?=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;
 }