【代码修复】 Simple 设计器缩小留白问题

src/components/SimpleProcessDesignerV2/src/SimpleProcessDesigner.vue

 <template>
 <template>
-  <div v-loading="loading">
+  <div v-loading="loading" class="overflow-auto">
     <SimpleProcessModel
     <SimpleProcessModel
       v-if="processNodeTree"
       v-if="processNodeTree"
       :flow-node="processNodeTree"
       :flow-node="processNodeTree"

src/components/SimpleProcessDesignerV2/src/SimpleProcessModel.vue

 <template>
 <template>
-  <div
-    class="simple-process-model-container position-relative"
-    :style="`transform: scale(${scaleValue / 100});`"
-  >
+  <div class="simple-process-model-container position-relative">
     <div class="position-absolute top-0px right-0px bg-#fff">
     <div class="position-absolute top-0px right-0px bg-#fff">
       <el-row type="flex" justify="end">
       <el-row type="flex" justify="end">
         <el-button-group key="scale-control" size="default">
         <el-button-group key="scale-control" size="default">
@@ -22,8 +19,10 @@
         >
         >
       </el-row>
       </el-row>
     </div>
     </div>
+    <div class="simple-process-model" :style="`transform: scale(${scaleValue / 100});`">
       <ProcessNodeTree v-if="processNodeTree" v-model:flow-node="processNodeTree" />
       <ProcessNodeTree v-if="processNodeTree" v-model:flow-node="processNodeTree" />
     </div>
     </div>
+  </div>
   <Dialog v-model="errorDialogVisible" title="保存失败" width="400" :fullscreen="false">
   <Dialog v-model="errorDialogVisible" title="保存失败" width="400" :fullscreen="false">
     <div class="mb-2">以下节点内容不完善，请修改后保存</div>
     <div class="mb-2">以下节点内容不完善，请修改后保存</div>
     <div
     <div

src/components/SimpleProcessDesignerV2/theme/simple-process-designer.scss

-
 // 配置节点头部
 // 配置节点头部
 .config-header {
 .config-header {
   display: flex;
   display: flex;
@@ -172,14 +171,15 @@
 // Simple 流程模型样式
 // Simple 流程模型样式
 .simple-process-model-container {
 .simple-process-model-container {
   height: 100%;
   height: 100%;
-  overflow: auto;
+  padding-top: 32px;
+  background-color: #fafafa;
+  .simple-process-model {
     display: flex;
     display: flex;
     flex-direction: column;
     flex-direction: column;
     justify-content: center;
     justify-content: center;
     align-items: center;
     align-items: center;
-  padding-top: 16px;
-  background-color: #fafafa;
     transform-origin: 50% 0 0;
     transform-origin: 50% 0 0;
+    overflow: auto;
     transform: scale(1);
     transform: scale(1);
     transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
     transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
     background: url(@/assets/svgs/bpm/simple-process-bg.svg) 0 0 repeat;
     background: url(@/assets/svgs/bpm/simple-process-bg.svg) 0 0 repeat;
@@ -701,6 +701,7 @@
         box-shadow: 0 0 0 2px rgb(24 144 255 / 20%);
         box-shadow: 0 0 0 2px rgb(24 144 255 / 20%);
       }
       }
     }
     }
+  }
 }
 }
 
 
 // iconfont 样式
 // iconfont 样式