feat: 新增滚动条控制

src/store/modules/chartEditStore/chartEditStore.d.ts

@@ -6,6 +6,7 @@ export enum EditCanvasTypeEnum {
   HEIGHT = 'height',
   OFFSET = 'offset',
   SCALE = 'scale',
+  USERSCALE = 'userScale',
   LOCKSCALE = 'lockScale',
   BACKGROUND = 'background'
 }
@@ -21,6 +22,8 @@ export type EditCanvasType = {
   [EditCanvasTypeEnum.OFFSET]: number
   // 缩放
   [EditCanvasTypeEnum.SCALE]: number
+  // 缩放
+  [EditCanvasTypeEnum.USERSCALE]: number
   // 锁定缩放
   [EditCanvasTypeEnum.LOCKSCALE]: boolean
   // 背景色

src/store/modules/chartEditStore/chartEditStore.ts

@@ -20,8 +20,10 @@ export const useChartEditStoreStore = defineStore({
       height: 1080,
       // 偏移量
       offset: 20,
-      // 默认缩放
+      // 系统控制缩放
       scale: 1,
+      // 用户控制的缩放
+      userScale: 1,
       // 锁定缩放
       lockScale: false,
       // 默认背景色
@@ -50,7 +52,8 @@ export const useChartEditStoreStore = defineStore({
       key: T,
       value: any
     ): void {
-      const dom = this.editCanvas.editContentDom
+      const dom = this.getEditCanvas.editContentDom
+      console.log(dom);
       if (dom) {
         // @ts-ignore
         dom.style[key] = value
@@ -58,8 +61,8 @@ export const useChartEditStoreStore = defineStore({
     },
     // * 设置页面大小
     setPageSize(): void {
-      this.setPageAttribute('height', `${this.editCanvas.height}px`)
-      this.setPageAttribute('width', `${this.editCanvas.width}px`)
+      this.setPageAttribute('height', `${this.getEditCanvas.height}px`)
+      this.setPageAttribute('width', `${this.getEditCanvas.width}px`)
     },
     // * 设置鼠标位置
     setMousePosition(x: number, y: number): void {
@@ -68,28 +71,35 @@ export const useChartEditStoreStore = defineStore({
     },
     // * 计算缩放
     computedScale() {
-      if (this.editCanvas.editLayoutDom) {
-
+      if (this.getEditCanvas.editLayoutDom) {
         // 现有展示区域
-        const width = this.editCanvas.editLayoutDom.clientWidth - this.editCanvas.offset * 2
-        const height = this.editCanvas.editLayoutDom.clientHeight - this.editCanvas.offset * 4
+        const width =
+          this.getEditCanvas.editLayoutDom.clientWidth - this.getEditCanvas.offset * 2 - 5
+        const height =
+          this.getEditCanvas.editLayoutDom.clientHeight - this.getEditCanvas.offset * 4
 
         // 用户设定大小
-        const editCanvasWidth = this.editCanvas.width
-        const editCanvasHeight = this.editCanvas.height
+        const editCanvasWidth = this.getEditCanvas.width
+        const editCanvasHeight = this.getEditCanvas.height
 
-         // 需保持的比例
-         const baseProportion = parseFloat((editCanvasWidth / editCanvasHeight).toFixed(5))
-         const currentRate = parseFloat((width / height).toFixed(5))
+        // 需保持的比例
+        const baseProportion = parseFloat(
+          (editCanvasWidth / editCanvasHeight).toFixed(5)
+        )
+        const currentRate = parseFloat((width / height).toFixed(5))
 
         if (currentRate > baseProportion) {
           // 表示更宽
-          const scaleWidth = parseFloat(((height * baseProportion) / editCanvasWidth).toFixed(5))
-          this.setScale(parseFloat((scaleWidth).toFixed(5)))
+          const scaleWidth = parseFloat(
+            ((height * baseProportion) / editCanvasWidth).toFixed(5)
+          )
+          this.setScale(parseFloat(scaleWidth.toFixed(5)))
         } else {
           // 表示更高
-          const scaleHeight = parseFloat(((width / baseProportion) / editCanvasHeight).toFixed(5))
-          this.setScale(parseFloat((scaleHeight).toFixed(5)))
+          const scaleHeight = parseFloat(
+            (width / baseProportion / editCanvasHeight).toFixed(5)
+          )
+          this.setScale(parseFloat(scaleHeight.toFixed(5)))
         }
       } else {
         window['$message'].warning('找不到元素')
@@ -109,10 +119,13 @@ export const useChartEditStoreStore = defineStore({
       return remove
     },
     // * 设置缩放
-    setScale(scale: number): void {
-      this.getEditCanvas.scale = scale
-      // 设置页面元素
+    setScale(scale: number, sys = true): void {
+      console.log(scale);
       this.setPageAttribute('transform', `scale(${scale})`)
+      this.getEditCanvas.userScale = scale
+      if (sys) {
+        this.getEditCanvas.scale = scale
+      }
     }
   }
 })

src/styles/common/style.scss

@@ -50,7 +50,7 @@
 
 // 背景斑点需配合 @mixin background-image 使用
 .go-point-bg {
-  @include fetch-theme('background-color');
+  @include fetch-theme-custom('background-color', 'background-color1');
   background-size: 15px 15px, 15px 15px;
 }
 

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>