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;
 }