feat: 新增resize时的边框变色交互

src/store/modules/chartEditStore/chartEditStore.ts

@@ -40,15 +40,15 @@ export const useChartEditStoreStore = defineStore({
     },
     getEditCanvas(): EditCanvasType {
       return this.editCanvas
-    }
+    },
   },
   actions: {
     // * 设置数据项
     setEditCanvasItem<T extends keyof EditCanvasType>(key: T, value: any) {
       this.editCanvas[key] = value
     },
-    // * 设置页面属性
-    setPageAttribute<T extends keyof CSSStyleDeclaration>(
+    // * 设置页面样式属性
+    setPageStyle<T extends keyof CSSStyleDeclaration>(
       key: T,
       value: any
     ): void {
@@ -58,10 +58,20 @@ export const useChartEditStoreStore = defineStore({
         dom.style[key] = value
       }
     },
+    // * 设置页面变换时候的 Class
+    setPageSizeClass(): void {
+      const dom = this.getEditCanvas.editContentDom
+      if (dom) {
+        dom.classList.add('content-resize')
+        setTimeout(() => {
+          dom.classList.remove('content-resize')
+        }, 600);
+      }
+    },
     // * 设置页面大小
     setPageSize(): void {
-      this.setPageAttribute('height', `${this.getEditCanvas.height}px`)
-      this.setPageAttribute('width', `${this.getEditCanvas.width}px`)
+      this.setPageStyle('height', `${this.getEditCanvas.height}px`)
+      this.setPageStyle('width', `${this.getEditCanvas.width}px`)
     },
     // * 设置鼠标位置
     setMousePosition(x: number, y: number): void {
@@ -119,8 +129,9 @@ export const useChartEditStoreStore = defineStore({
     },
     // * 设置缩放
     setScale(scale: number, sys = true): void {
-      if(!this.getEditCanvas.lockScale) {
-        this.setPageAttribute('transform', `scale(${scale})`)
+      if (!this.getEditCanvas.lockScale) {
+        this.setPageSizeClass()
+        this.setPageStyle('transform', `scale(${scale})`)
         this.getEditCanvas.userScale = scale
         if (sys) {
           this.getEditCanvas.scale = scale

src/views/chart/components/ContentEdit/components/EditRange/index.vue

@@ -12,8 +12,8 @@
   height: 1080px;
   width: 1920px;
   border: 1px solid;
-  border-radius: 15px;
   background-color: #333;
+  border-radius: 15px;
   @include filter-bg-color('background-color2');
   @include fetch-theme('box-shadow');
   @include filter-border-color('hover-border-color');

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

@@ -9,7 +9,7 @@
   >
     <div id="go-chart-edit-content">
       <!-- 中间区域 -->
-      <EditRange> </EditRange>
+      <EditRange></EditRange>
     </div>
     <!-- 底部控制 -->
     <template #bottom>
@@ -50,7 +50,7 @@ onMounted(() => {
   })
 })
 
-computed(() => {})
+computed(() => { })
 </script>
 
 <style lang="scss" scoped>
@@ -58,14 +58,20 @@ computed(() => {})
   position: relative;
   width: 100%;
   overflow: hidden;
-  @include background-image('background-point');
+  @include background-image("background-point");
   @extend .go-point-bg;
   @include goId(chart-edit-content) {
     position: relative;
     top: 20px;
     left: 20px;
     transform-origin: left top;
+    border: 1px solid rgba(0, 0, 0, 0);
+    overflow: hidden;
     @extend .go-transition;
+    &.content-resize {
+      border-radius: 15px;
+      @include hover-border-color("hover-border-color");
+    }
   }
 }
 </style>