fix: 修改页面 changeSize 逻辑

src/store/modules/chartEditStore/chartEditStore.ts

@@ -483,9 +483,9 @@ export const useChartEditStore = defineStore({
       }
     },
     // * 设置页面大小
-    setPageSize(): void {
+    setPageSize(scale: number): void {
-      this.setPageStyle('height', `${this.editCanvasConfig.height}px`)
+      this.setPageStyle('height', `${this.editCanvasConfig.height * scale}px`)
-      this.setPageStyle('width', `${this.editCanvasConfig.width}px`)
+      this.setPageStyle('width', `${this.editCanvasConfig.width * scale}px`)
     },
     // * 计算缩放
     computedScale() {
@@ -540,6 +540,7 @@ export const useChartEditStore = defineStore({
     setScale(scale: number, sys = true): void {
       if (!this.getEditCanvas.lockScale) {
         this.setPageSizeClass()
+        this.setPageSize(scale)
         this.setPageStyle('transform', `scale(${scale})`)
         this.getEditCanvas.userScale = scale
         if (sys) {

src/views/chart/ContentConfigurations/components/CanvasPage/index.vue

@@ -7,7 +7,7 @@
           size="small"
           v-model:value="canvasConfig.width"
           :validator="validator"
-          @update:value="chartEditStore.computedScale"
+          @update:value="changeSizeHandle"
         />
       </n-form-item>
       <n-form-item label="高度">
@@ -15,7 +15,7 @@
           size="small"
           v-model:value="canvasConfig.height"
           :validator="validator"
-          @update:value="chartEditStore.computedScale"
+          @update:value="changeSizeHandle"
         />
       </n-form-item>
     </n-form>
@@ -182,6 +182,12 @@ const beforeUploadHandle = async ({ file }) => {
   return true
 }
 
+// 修改尺寸
+const changeSizeHandle = () => {
+  chartEditStore.computedScale
+  chartEditStore.setPageSize
+}
+
 // 清除背景
 const clearImage = () => {
   chartEditStore.setEditCanvasConfig(

src/views/chart/ContentConfigurations/components/ChartSetting/index.vue

@@ -38,6 +38,7 @@ const targetData: Ref<CreateComponentType> = computed(() => {
   const targetIndex = chartEditStore.fetchTargetIndex()
   return list[targetIndex]
 })
+
 </script>
 
 <style lang="scss" scoped>

src/views/chart/ContentEdit/hooks/useLayout.hook.ts

@@ -17,9 +17,6 @@ export const useLayout = () => {
       document.getElementById('go-chart-edit-content')
     )
 
-    // 大小初始化
-    chartEditStore.setPageSize()
-
     // 监听初始化
     const removeScale = chartEditStore.listenerScale()
 

src/views/chart/ContentEdit/index.vue

@@ -1,7 +1,6 @@
 <template>
   <ContentBox
     id="go-chart-edit-layout"
-    ref="editDomRef"
     :flex="true"
     :showTop="false"
     :showBottom="true"