enhance ui of running overlay

packages/ui/src/renderer/src/features/RunningOverlay/index.vue

@@ -5,7 +5,20 @@
     :close-on-click-modal="false"
     :close-on-press-escape="false"
     :show-close="false"
+    width="400px"
+    @closed="fillEmptySteps"
   >
+    <div flex flex-col flex-items-center>
+      <div class="dialog-header" w-full>
+        <div
+          h160px
+          w-full
+          :style="{
+            backgroundImage: 'linear-gradient(#666, #666)'
+          }"
+        ></div>
+      </div>
+      <div class="dialog-main" w-full mt--20px>
         <!-- v-if="stepsForRender.some(it => ['todo', 'pending', 'rejected'].includes(it.status))" -->
         <div>
           <ul m0 pl0>
@@ -36,6 +49,8 @@
             <slot name="op-buttons" :current-running-status="currentRunningStatus" />
           </div>
         </div>
+      </div>
+    </div>
   </el-dialog>
 </template>
 
@@ -159,7 +174,26 @@ ipcRenderer.on('worker-exited', (ev, payload) => {
       display: none;
     }
     .el-dialog__body {
-      overflow: hidden;
+      // overflow: hidden;
+    }
+    .dialog-header {
+      display: none;
+      // display: flex;
+      // justify-content: center;
+      // border-radius: 20px 20px 0 0;
+      // overflow: hidden;
+    }
+    background-color: transparent;
+    box-shadow: none;
+    padding: 0;
+    border-radius: 0;
+    .dialog-main {
+      box-sizing: border-box;
+      background: var(--el-dialog-bg-color);
+      box-shadow: var(--el-dialog-box-shadow);
+      padding: var(--el-dialog-padding-primary);
+      //border-radius: 0 0 20px 20px;
+      border-radius: 20px;
     }
   }
 }