feat: 新增滚动条控制

src/views/chart/components/ContentBox/index.vue

@@ -22,13 +22,15 @@
         </n-icon>
       </n-space>
     </div>
-    <aside class="content">
+
+    <aside class="content" :class="{ hideScroll: hideScrollbar }">
       <n-scrollbar x-scrollable>
         <n-scrollbar>
           <slot></slot>
         </n-scrollbar>
       </n-scrollbar>
     </aside>
+
     <div v-if="showBottom" class="bottom go-mt-0">
       <slot name="bottom"></slot>
     </div>
@@ -36,8 +38,12 @@
 </template>
 
 <script setup lang="ts">
+import { computed } from 'vue'
+import { useChartEditStoreStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { icon } from '@/plugins'
 const { ChevronBackOutlineIcon } = icon.ionicons5
+
+const chartEditStore = useChartEditStoreStore()
 const emit = defineEmits(['back'])
 
 defineProps({
@@ -66,6 +72,12 @@ defineProps({
   }
 })
 
+const hideScrollbar = computed(() => {
+  return (
+    chartEditStore.getEditCanvas.userScale <= chartEditStore.getEditCanvas.scale
+  )
+})
+
 const backHandle = () => {
   emit('back')
 }
@@ -128,5 +140,17 @@ $topHeight: 36px;
     height: calc(100vh - #{$--header-height} - #{$topHeight});
     overflow: hidden;
   }
+  @include deep() {
+    .content {
+      &.hideScroll {
+        .n-scrollbar-container {
+          overflow: hidden;
+        }
+        .n-scrollbar-rail {
+          display: none;
+        }
+      }
+    }
+  }
 }
 </style>