From 6dd803e8ab3787703b255ef2a98fb7a2671deefd Mon Sep 17 00:00:00 2001
From: Shiwen Cheng <chengshiwen0103@gmail.com>
Date: Tue, 29 Dec 2020 10:55:16 +0800
Subject: [PATCH] [Fix][UI] Fix ui style problem and refactor form style
 (#4329)

* rename from-model to form-model

* [UI] remove duplicated css style code

* [UI] refactor css style of form model

* fix form model overflow problem in ie

* Align each item one by one in locale

* fix el-dialog width is too wide

* fix locale
---
 .../js/conf/home/pages/dag/_source/dag.vue    |  21 ++-
 .../dag/_source/formModel/formLineModel.vue   |   4 +-
 .../dag/_source/formModel/formModel.scss      |  58 +++++--
 .../pages/dag/_source/formModel/formModel.vue |   6 +-
 .../formModel/tasks/_source/httpParams.vue    |  22 ++-
 .../formModel/tasks/_source/list4Box.vue      |  68 ++++++++
 .../formModel/tasks/_source/listBox.vue       |   2 -
 .../formModel/tasks/_source/localParams.vue   |  20 +--
 .../dag/_source/formModel/tasks/datax.vue     |   7 -
 .../dag/_source/formModel/tasks/flink.vue     | 147 ++++++-----------
 .../pages/dag/_source/formModel/tasks/mr.vue  |  32 ----
 .../dag/_source/formModel/tasks/procedure.vue |   3 -
 .../dag/_source/formModel/tasks/python.vue    |  15 --
 .../dag/_source/formModel/tasks/shell.vue     |  28 ----
 .../dag/_source/formModel/tasks/spark.vue     | 153 +++++++-----------
 .../pages/dag/_source/formModel/tasks/sql.vue |  11 --
 .../dag/_source/formModel/tasks/sqoop.vue     |  13 +-
 .../dag/_source/formModel/tasks/waterdrop.vue | 151 ++++++-----------
 .../pages/datasource/pages/list/index.vue     |   2 +-
 .../definition/pages/list/_source/list.vue    |   8 +-
 .../definition/pages/list/_source/timing.vue  |   4 +-
 .../pages/definition/timing/_source/list.vue  |   2 +-
 .../home/pages/projects/pages/list/index.vue  |   2 +-
 .../pages/taskInstance/_source/list.vue       |   2 +-
 .../pages/file/pages/list/_source/list.vue    |   2 +-
 .../file/pages/subdirectory/_source/list.vue  |   2 +-
 .../pages/udf/pages/function/_source/list.vue |   2 +-
 .../pages/udf/pages/function/index.vue        |   2 +-
 .../pages/subUdfDirectory/_source/list.vue    |   2 +-
 .../home/pages/security/pages/queue/index.vue |   2 +-
 .../pages/security/pages/tenement/index.vue   |   2 +-
 .../security/pages/users/_source/list.vue     |   8 +-
 .../home/pages/security/pages/users/index.vue |   2 +-
 .../pages/warningGroups/_source/list.vue      |   2 +-
 .../security/pages/warningGroups/index.vue    |   2 +-
 .../pages/user/pages/account/_source/info.vue |   2 +-
 .../home/pages/user/pages/token/index.vue     |   2 +-
 dolphinscheduler-ui/src/js/conf/login/App.vue |   4 +-
 .../components/crontab/source/_times/day.vue  |   2 +-
 .../components/crontab/source/_times/hour.vue |   2 +-
 .../crontab/source/_times/minute.vue          |   2 +-
 .../crontab/source/_times/month.vue           |   2 +-
 .../crontab/source/_times/second.vue          |   2 +-
 .../components/crontab/source/_times/year.vue |   2 +-
 .../components/crontab/source/index.scss      |   2 +-
 .../src/js/module/components/nav/nav.vue      |   8 +-
 .../src/js/module/i18n/locale/en_US.js        |  69 ++++----
 .../src/js/module/i18n/locale/zh_CN.js        |  59 ++++---
 .../src/sass/common/index.scss                |   5 +-
 .../src/sass/conf/login/index.scss            |   2 +-
 50 files changed, 417 insertions(+), 557 deletions(-)
 create mode 100644 dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/list4Box.vue

diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/dag.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/dag.vue
index 8e021e4e1e..28311bee50 100755
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/dag.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/dag.vue
@@ -148,26 +148,26 @@
       </div>
       <el-drawer
         :visible.sync="drawer"
-        size="35%"
+        size=""
         :with-header="false">
         <m-versions :versionData = versionData @mVersionSwitchProcessDefinitionVersion="mVersionSwitchProcessDefinitionVersion" @mVersionGetProcessDefinitionVersionsPage="mVersionGetProcessDefinitionVersionsPage" @mVersionDeleteProcessDefinitionVersion="mVersionDeleteProcessDefinitionVersion" @closeVersion="closeVersion"></m-versions>
       </el-drawer>
       <el-drawer
         :visible.sync="nodeDrawer"
-        size="50%"
+        size=""
         :with-header="false">
         <m-form-model v-if="nodeDrawer" :nodeData=nodeData @seeHistory="seeHistory" @addTaskInfo="addTaskInfo" @cacheTaskInfo="cacheTaskInfo" @close="close" @onSubProcess="onSubProcess"></m-form-model>
       </el-drawer>
       <el-drawer
         :visible.sync="lineDrawer"
-        size="50%"
+        size=""
         :wrapperClosable="false"
         :with-header="false">
         <m-form-line-model :lineData = lineData @addLineInfo="addLineInfo" @cancel="cancel"></m-form-line-model>
       </el-drawer>
       <el-drawer
         :visible.sync="udpDrawer"
-        size="50%"
+        size=""
         :wrapperClosable="false"
         :with-header="false">
         <m-udp></m-udp>
@@ -175,16 +175,15 @@
       <el-dialog
         :title="$t('Set the DAG diagram name')"
         :visible.sync="dialogVisible"
-        width="45%">
+        width="auto">
         <m-udp @onUdp="onUdpDialog" @close="closeDialog"></m-udp>
       </el-dialog>
-
       <el-dialog
-      :title="$t('Please set the parameters before starting')"
-      :visible.sync="startDialog"
-      width="65%">
-      <m-start :startData= "startData" :startNodeList="startNodeList" :sourceType="sourceType" @onUpdateStart="onUpdateStart" @closeStart="closeStart"></m-start>
-    </el-dialog>
+        :title="$t('Please set the parameters before starting')"
+        :visible.sync="startDialog"
+        width="auto">
+        <m-start :startData= "startData" :startNodeList="startNodeList" :sourceType="sourceType" @onUpdateStart="onUpdateStart" @closeStart="closeStart"></m-start>
+      </el-dialog>
     </div>
   </div>
 </template>
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/formLineModel.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/formLineModel.vue
index 81c361d3dc..0e6ee77ab3 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/formLineModel.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/formLineModel.vue
@@ -15,12 +15,12 @@
  * limitations under the License.
  */
 <template>
-  <div class="form-model-model" v-clickoutside="_handleClose">
+  <div class="form-model-wrapper" v-clickoutside="_handleClose">
     <div class="title-box">
       <span class="name">{{$t('Current connection settings')}}</span>
     </div>
     <div class="content-box">
-      <div class="from-model">
+      <div class="form-model">
         <!-- Node name -->
         <div class="clearfix list">
           <div class="text-box"><span>{{$t('Connection name')}}</span></div>
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/formModel.scss b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/formModel.scss
index 9d9667f723..d79f7cf1e3 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/formModel.scss
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/formModel.scss
@@ -14,8 +14,9 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.form-model-model {
+.form-model-wrapper {
   width: 720px;
+  height: 100vh;
   position: relative;
   .title-box {
     height: 61px;
@@ -72,21 +73,21 @@
   }
   .content-box {
     overflow-y: scroll;
-    height: calc(100vh - 61px);
-    padding-bottom: 60px;
+    height: calc(100vh - 121px);
   }
 }
-.from-model {
+.form-model {
   padding-top: 26px;
+  padding-bottom: 10px;
   >div {
     clear: both;
   }
   .list {
-    position: relative;
+    display: flex;
+    margin-right: 25px;
     margin-bottom: 10px;
     .text-box {
-      width: 112px;
-      float: left;
+      width: 130px;
       text-align: right;
       margin-right: 8px;
       >span {
@@ -97,8 +98,7 @@
       }
     }
     .cont-box {
-      width: 580px;
-      float: left;
+      flex: 1;
       .label-box {
         width: 100%;
       }
@@ -108,6 +108,27 @@
         display: inline-block;
         padding:0 6px 0 20px;
       }
+      .cont-extra {
+        margin-left: 15px;
+        flex: 1;
+      }
+      .el-radio-group {
+        vertical-align: sub;
+        padding-top: 6px;
+        margin-top: 3px;
+      }
+      .user-def-params-model {
+        padding-top: 3px;
+      }
+    }
+    .cont-box + .text-box {
+      margin-left: 30px;
+    }
+    .display-flex {
+      display: flex;
+    }
+    .flex-1 {
+      flex: 1;
     }
     .add {
       line-height: 32px;
@@ -120,4 +141,21 @@
       float: left;
     }
   }
-}
\ No newline at end of file
+  .requiredIcon {
+    color: #ff0000;
+    padding-right: 4px;
+  }
+  .ans-modal-box-max {
+    position: absolute;
+    right: -12px;
+    top: -16px;
+  }
+  .vue-treeselect--disabled {
+    .vue-treeselect__control {
+      background-color: #ecf3f8;
+      .vue-treeselect__single-value {
+        color: #6d859e;
+      }
+    }
+  }
+}
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/formModel.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/formModel.vue
index 46cdbff8fd..4dd5fcb8e5 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/formModel.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/formModel.vue
@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 <template>
-  <div class="form-model-model" v-clickoutside="_handleClose">
+  <div class="form-model-wrapper" v-clickoutside="_handleClose">
     <div class="title-box">
       <span class="name">{{$t('Current node settings')}}</span>
       <span class="go-subtask">
@@ -28,7 +28,7 @@
       </span>
     </div>
     <div class="content-box" v-if="isContentBox">
-      <div class="from-model">
+      <div class="form-model">
         <!-- Node name -->
         <div class="clearfix list">
           <div class="text-box"><span>{{$t('Node name')}}</span></div>
@@ -52,7 +52,7 @@
           <div class="text-box"><span>{{$t('Run flag')}}</span></div>
           <div class="cont-box">
             <label class="label-box">
-              <el-radio-group v-model="runFlag" size="small" style="vertical-align: sub;">
+              <el-radio-group v-model="runFlag" size="small">
                 <el-radio :label="'NORMAL'" :disabled="isDetails">{{$t('Normal')}}</el-radio>
                 <el-radio :label="'FORBIDDEN'" :disabled="isDetails">{{$t('Prohibition execution')}}</el-radio>
               </el-radio-group>
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/httpParams.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/httpParams.vue
index 82d3d1944d..6b95d23827 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/httpParams.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/httpParams.vue
@@ -202,35 +202,41 @@
 
 <style lang="scss" rel="stylesheet/scss">
   .user-def-params-model {
+    .el-input__inner {
+      height: 32px;
+      line-height: 32px;
+    }
     .select-listpp {
       margin-bottom: 6px;
       .lt-add {
         padding-left: 4px;
+        line-height: 32px;
         a {
-          .iconfont {
-            font-size: 18px;
+          .iconfont, [class^="el-icon"] {
+            font-size: 17px;
             vertical-align: middle;
-            margin-bottom: -2px;
             display: inline-block;
+            margin-top: 0;
           }
         }
       }
     }
     .add {
+      line-height: 32px;
       a {
         color: #000;
-        .iconfont {
-          font-size: 16px;
+        .iconfont, [class^="el-icon"] {
+          font-size: 18px;
           vertical-align: middle;
           display: inline-block;
-          margin-top: -5px;
+          margin-top: 0px;
         }
       }
     }
-    .add-dp{
+    .add-dp {
       a {
         color: #0097e0;
-        .iconfont {
+        .iconfont, [class^="el-icon"] {
           font-size: 18px;
           vertical-align: middle;
           display: inline-block;
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/list4Box.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/list4Box.vue
new file mode 100644
index 0000000000..f4d3f767a4
--- /dev/null
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/list4Box.vue
@@ -0,0 +1,68 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+<template>
+  <div class="clearfix list">
+    <div class="text-box">
+      <span><slot name="text"></slot></span>
+    </div>
+    <div class="cont-box">
+      <div class="label-box">
+        <slot name="content"></slot>
+      </div>
+    </div>
+    <div class="text-box">
+      <span><slot name="text-2"></slot></span>
+    </div>
+    <div class="cont-box">
+      <div class="label-box">
+        <slot name="content-2"></slot>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+  export default {
+    name: 'list-4-box'
+  }
+</script>
+
+<style lang="scss" rel="stylesheet/scss">
+  .cont-box {
+    .label-box {
+      .ans-radio-group {
+        margin-top: 7px;
+      }
+    }
+  }
+  .v-checkbox-wrapper {
+    &.v-checkbox-wrapper-disabled {
+      color: #999 ;
+      .v-checkbox {
+        .v-checkbox-inner{
+          border-color:#dddee1;
+          background: #f7f7f7;
+          color: #bbbec4 ;
+          &:after{
+            border: 2px solid #ddd;
+            border-top: 0;
+            border-left: 0;
+          }
+        }
+      }
+    }
+  }
+</style>
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/listBox.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/listBox.vue
index 237d66f667..351e55d100 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/listBox.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/listBox.vue
@@ -40,7 +40,6 @@
       }
     }
   }
-
   .v-checkbox-wrapper {
     &.v-checkbox-wrapper-disabled {
       color: #999 ;
@@ -58,5 +57,4 @@
       }
     }
   }
-
 </style>
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/localParams.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/localParams.vue
index ea5f299aa8..c001a20176 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/localParams.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/localParams.vue
@@ -197,7 +197,7 @@
     },
     computed: {
       inputStyle () {
-        return `width:${this.hide ? 160 : 262}px`
+        return `width:${this.hide ? 160 : 252}px`
       }
     },
     mounted () {
@@ -212,31 +212,33 @@
       margin-bottom: 6px;
       .lt-add {
         padding-left: 4px;
+        line-height: 32px;
         a {
-          .iconfont {
-            font-size: 18px;
+          .iconfont, [class^="el-icon"] {
+            font-size: 17px;
             vertical-align: middle;
-            margin-bottom: -2px;
             display: inline-block;
+            margin-top: 0;
           }
         }
       }
     }
     .add {
+      line-height: 32px;
       a {
         color: #000;
-        .iconfont {
-          font-size: 16px;
+        .iconfont, [class^="el-icon"] {
+          font-size: 18px;
           vertical-align: middle;
           display: inline-block;
-          margin-top: -5px;
+          margin-top: 0;
         }
       }
     }
-    .add-dp{
+    .add-dp {
       a {
         color: #0097e0;
-        .iconfont {
+        .iconfont, [class^="el-icon"] {
           font-size: 18px;
           vertical-align: middle;
           display: inline-block;
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/datax.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/datax.vue
index 0414744a66..867c9f89ed 100755
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/datax.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/datax.vue
@@ -522,10 +522,3 @@
     components: { mListBox, mDatasource, mLocalParams, mStatementList, mSelectInput, mScriptBox }
   }
 </script>
-<style lang="scss" rel="stylesheet/scss" scope>
-  .ans-modal-box-max {
-    position: absolute;
-    right: -12px;
-    top: -16px;
-  }
-</style>
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/flink.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/flink.vue
index 0f422e59a4..1fe8ca9137 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/flink.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/flink.vue
@@ -80,71 +80,62 @@
         </el-select>
       </div>
     </m-list-box>
-    <div class="list-box-4p" v-if="deployMode === 'cluster'">
-      <div class="clearfix list">
-        <span class="sp1" style="word-break:break-all">{{$t('appName')}}</span>
-        <span class="sp2">
-          <el-input
-            :disabled="isDetails"
-            type="input"
-            size="small"
-            v-model="appName"
-            :placeholder="$t('Please enter the job name of Flink(optional)')"
-            style="width: 200px;">
+    <m-list-4-box v-if="deployMode === 'cluster'">
+      <div slot="text">{{$t('App Name')}}</div>
+      <div slot="content">
+        <el-input
+          :disabled="isDetails"
+          type="input"
+          size="small"
+          v-model="appName"
+          :placeholder="$t('Please enter app name(optional)')">
         </el-input>
-        </span>
       </div>
-      <div class="clearfix list">
-        <span class="sp1" style="word-break:break-all">{{$t('jobManagerMemory')}}</span>
-        <span class="sp2">
-          <el-input
-            :disabled="isDetails"
-            type="input"
-            size="small"
-            v-model="jobManagerMemory"
-            :placeholder="$t('Please enter jobManager memory')"
-            style="width: 200px;">
+    </m-list-4-box>
+    <m-list-4-box v-if="deployMode === 'cluster'">
+      <div slot="text">{{$t('JobManager Memory')}}</div>
+      <div slot="content">
+        <el-input
+          :disabled="isDetails"
+          type="input"
+          size="small"
+          v-model="jobManagerMemory"
+          :placeholder="$t('Please enter JobManager memory')">
         </el-input>
-        </span>
-        <span class="sp1 sp3">{{$t('taskManagerMemory')}}</span>
-        <span class="sp2">
-          <el-input
-            :disabled="isDetails"
-            type="input"
-            size="small"
-            v-model="taskManagerMemory"
-            :placeholder="$t('Please enter the taskManager memory')"
-            style="width: 186px;">
+      </div>
+      <div slot="text-2">{{$t('TaskManager Memory')}}</div>
+      <div slot="content-2">
+        <el-input
+          :disabled="isDetails"
+          type="input"
+          size="small"
+          v-model="taskManagerMemory"
+          :placeholder="$t('Please enter TaskManager memory')">
         </el-input>
-        </span>
       </div>
-      <div class="clearfix list">
-        <span class="sp1">{{$t('slot')}}</span>
-        <span class="sp2">
-          <el-input
-                  :disabled="isDetails"
-                  type="input"
-                  size="small"
-                  v-model="slot"
-                  :placeholder="$t('Please enter solt number')"
-                  style="width: 200px;">
+    </m-list-4-box>
+    <m-list-4-box v-if="deployMode === 'cluster'">
+      <div slot="text">{{$t('Slot Number')}}</div>
+      <div slot="content">
+        <el-input
+          :disabled="isDetails"
+          type="input"
+          size="small"
+          v-model="slot"
+          :placeholder="$t('Please enter Slot number')">
         </el-input>
-        </span>
-        <div v-if="flinkVersion !== '>=1.10'">
-        <span class="sp1 sp3">{{$t('taskManager')}}</span>
-        <span class="sp2">
-          <el-input
-                  :disabled="isDetails"
-                  type="input"
-                  size="small"
-                  v-model="taskManager"
-                  :placeholder="$t('Please enter taskManager number')"
-                  style="width: 186px;">
+      </div>
+      <div slot="text-2" v-if="flinkVersion === '<1.10'">{{$t('TaskManager Number')}}</div>
+      <div slot="content-2" v-if="flinkVersion === '<1.10'">
+        <el-input
+          :disabled="isDetails"
+          type="input"
+          size="small"
+          v-model="taskManager"
+          :placeholder="$t('Please enter TaskManager number')">
         </el-input>
-        </span>
-        </div>
       </div>
-    </div>
+    </m-list-4-box>
     <m-list-box>
       <div slot="text">{{$t('Command-line parameters')}}</div>
       <div slot="content">
@@ -197,6 +188,7 @@
   import i18n from '@/module/i18n'
   import mLocalParams from './_source/localParams'
   import mListBox from './_source/listBox'
+  import mList4Box from './_source/list4Box'
   import Treeselect from '@riophae/vue-treeselect'
   import '@riophae/vue-treeselect/dist/vue-treeselect.css'
   import disabledState from '@/module/mixin/disabledState'
@@ -304,7 +296,7 @@
         }
 
         if (!this.jobManagerMemory) {
-          this.$message.warning(`${i18n.$t('Please enter jobManager memory')}`)
+          this.$message.warning(`${i18n.$t('Please enter JobManager memory')}`)
           return false
         }
 
@@ -314,7 +306,7 @@
         }
 
         if (!this.taskManagerMemory) {
-          this.$message.warning(`${i18n.$t('Please enter the taskManager memory')}`)
+          this.$message.warning(`${i18n.$t('Please enter TaskManager memory')}`)
           return false
         }
 
@@ -556,41 +548,6 @@
     mounted () {
 
     },
-    components: { mLocalParams, mListBox, Treeselect }
+    components: { mLocalParams, mListBox, mList4Box, Treeselect }
   }
 </script>
-
-<style lang="scss" rel="stylesheet/scss">
-  .flink-model {
-    .list-box-4p {
-      .list {
-        margin-bottom: 14px;
-        .sp1 {
-          float: left;
-          width: 112px;
-          text-align: right;
-          margin-right: 10px;
-          font-size: 14px;
-          color: #777;
-          display: inline-block;
-          padding-top: 6px;
-        }
-        .sp2 {
-          float: left;
-          margin-right: 4px;
-        }
-        .sp3 {
-          width: 176px;
-        }
-      }
-    }
-  }
-  .vue-treeselect--disabled {
-    .vue-treeselect__control {
-      background-color: #ecf3f8;
-      .vue-treeselect__single-value {
-        color: #6d859e;
-      }
-    }
-  }
-</style>
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/mr.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/mr.vue
index a88f33b071..356eefd65a 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/mr.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/mr.vue
@@ -408,35 +408,3 @@
     components: { mLocalParams, mListBox, Treeselect }
   }
 </script>
-
-<style lang="scss" rel="stylesheet/scss">
-  .spark-model {
-    .list-box-4p {
-      .list {
-        margin-bottom: 14px;
-        .sp1 {
-          float: left;
-          width: 112px;
-          text-align: right;
-          margin-right: 10px;
-          font-size: 14px;
-          color: #777;
-          display: inline-block;
-          padding-top: 6px;
-        }
-        .sp2 {
-          float: left;
-          margin-right: 4px;
-        }
-      }
-    }
-  }
-  .vue-treeselect--disabled {
-    .vue-treeselect__control {
-      background-color: #ecf3f8;
-      .vue-treeselect__single-value {
-        color: #6d859e;
-      }
-    }
-  }
-</style>
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/procedure.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/procedure.vue
index 857e7a7571..790977dd5b 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/procedure.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/procedure.vue
@@ -162,6 +162,3 @@
     components: { mListBox, mDatasource, mLocalParams }
   }
 </script>
-
-<style lang="scss" rel="stylesheet/scss">
-</style>
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/python.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/python.vue
index c633ef2375..fd0cf2bca7 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/python.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/python.vue
@@ -350,18 +350,3 @@
     components: { mLocalParams, mListBox, Treeselect, mScriptBox }
   }
 </script>
-<style lang="scss" rel="stylesheet/scss" scope>
-  .vue-treeselect--disabled {
-    .vue-treeselect__control {
-      background-color: #ecf3f8;
-      .vue-treeselect__single-value {
-        color: #6d859e;
-      }
-    }
-  }
-  .ans-modal-box-max {
-    position: absolute;
-    right: -12px;
-    top: -16px;
-  }
-</style>
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/shell.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/shell.vue
index 71b33e3064..0a421d520e 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/shell.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/shell.vue
@@ -361,31 +361,3 @@
     components: { mLocalParams, mListBox, mScriptBox, Treeselect }
   }
 </script>
-<style lang="scss" rel="stylesheet/scss" scope>
-  .scriptModal {
-    .ans-modal-box-content-wrapper {
-      width: 90%;
-      .ans-modal-box-close {
-        right: -12px;
-        top: -16px;
-        color: #fff;
-      }
-    }
-  }
-  .ans-modal-box-close {
-    z-index: 100;
-  }
-  .ans-modal-box-max {
-    position: absolute;
-    right: -12px;
-    top: -16px;
-  }
-  .vue-treeselect--disabled {
-    .vue-treeselect__control {
-      background-color: #ecf3f8;
-      .vue-treeselect__single-value {
-        color: #6d859e;
-      }
-    }
-  }
-</style>
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/spark.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/spark.vue
index 88ef02ec63..efeb7e9e36 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/spark.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/spark.vue
@@ -80,69 +80,62 @@
         </el-radio-group>
       </div>
     </m-list-box>
-    <div class="list-box-4p">
-      <div class="clearfix list">
-        <span class="sp1">{{$t('Driver core number')}}</span>
-        <span class="sp2">
-          <el-input
-                  :disabled="isDetails"
-                  type="input"
-                  size="small"
-                  v-model="driverCores"
-                  :placeholder="$t('Please enter driver core number')"
-                  style="width: 200px;">
+    <m-list-4-box>
+      <div slot="text">{{$t('Driver cores')}}</div>
+      <div slot="content">
+        <el-input
+          :disabled="isDetails"
+          type="input"
+          size="small"
+          v-model="driverCores"
+          :placeholder="$t('Please enter Driver cores')">
         </el-input>
-        </span>
-        <span class="sp1 sp3">{{$t('Driver memory use')}}</span>
-        <span class="sp2">
-          <el-input
-                  :disabled="isDetails"
-                  type="input"
-                  size="small"
-                  v-model="driverMemory"
-                  :placeholder="$t('Please enter driver memory use')"
-                  style="width: 186px;">
+      </div>
+      <div slot="text-2">{{$t('Driver memory')}}</div>
+      <div slot="content-2">
+        <el-input
+          :disabled="isDetails"
+          type="input"
+          size="small"
+          v-model="driverMemory"
+          :placeholder="$t('Please enter Driver memory')">
         </el-input>
-        </span>
       </div>
-      <div class="clearfix list">
-        <span class="sp1">{{$t('Number of Executors')}}</span>
-        <span class="sp2">
-          <el-input
-              :disabled="isDetails"
-              type="input"
-              size="small"
-              v-model="numExecutors"
-              :placeholder="$t('Please enter the number of Executor')"
-              style="width: 200px;">
+    </m-list-4-box>
+    <m-list-4-box>
+      <div slot="text">{{$t('Executor Number')}}</div>
+      <div slot="content">
+        <el-input
+          :disabled="isDetails"
+          type="input"
+          size="small"
+          v-model="numExecutors"
+          :placeholder="$t('Please enter Executor number')">
         </el-input>
-        </span>
-        <span class="sp1 sp3">{{$t('Executor memory')}}</span>
-        <span class="sp2">
-          <el-input
-              :disabled="isDetails"
-              type="input"
-              size="small"
-              v-model="executorMemory"
-              :placeholder="$t('Please enter the Executor memory')"
-              style="width: 186px;">
+      </div>
+      <div slot="text-2">{{$t('Executor memory')}}</div>
+      <div slot="content-2">
+        <el-input
+          :disabled="isDetails"
+          type="input"
+          size="small"
+          v-model="executorMemory"
+          :placeholder="$t('Please enter Executor memory')">
         </el-input>
-        </span>
       </div>
-      <div class="clearfix list">
-        <span class="sp1">{{$t('Executor core number')}}</span>
-        <span class="sp2">
-          <el-input
-              :disabled="isDetails"
-              type="input"
-              size="small"
-              v-model="executorCores"
-              :placeholder="$t('Please enter Executor core number')"
-              style="width: 200px;">
-          </el-input>
-        </span>
+    </m-list-4-box>
+    <m-list-4-box>
+      <div slot="text">{{$t('Executor cores')}}</div>
+      <div slot="content">
+        <el-input
+          :disabled="isDetails"
+          type="input"
+          size="small"
+          v-model="executorCores"
+          :placeholder="$t('Please enter Executor cores')">
+        </el-input>
       </div>
-    </div>
+    </m-list-4-box>
     <m-list-box>
       <div slot="text">{{$t('Command-line parameters')}}</div>
       <div slot="content">
@@ -195,6 +188,7 @@
   import i18n from '@/module/i18n'
   import mLocalParams from './_source/localParams'
   import mListBox from './_source/listBox'
+  import mList4Box from './_source/list4Box'
   import Treeselect from '@riophae/vue-treeselect'
   import '@riophae/vue-treeselect/dist/vue-treeselect.css'
   import disabledState from '@/module/mixin/disabledState'
@@ -374,7 +368,7 @@
         }
 
         if (!this.numExecutors) {
-          this.$message.warning(`${i18n.$t('Please enter the number of Executor')}`)
+          this.$message.warning(`${i18n.$t('Please enter Executor number')}`)
           return false
         }
 
@@ -385,17 +379,17 @@
         }
 
         if (!Number.isInteger(parseInt(this.numExecutors))) {
-          this.$message.warning(`${i18n.$t('The number of Executors should be a positive integer')}`)
+          this.$message.warning(`${i18n.$t('The Executor Number should be a positive integer')}`)
           return false
         }
 
         if (!this.executorMemory) {
-          this.$message.warning(`${i18n.$t('Please enter the Executor memory')}`)
+          this.$message.warning(`${i18n.$t('Please enter Executor memory')}`)
           return false
         }
 
         if (!this.executorMemory) {
-          this.$message.warning(`${i18n.$t('Please enter the Executor memory')}`)
+          this.$message.warning(`${i18n.$t('Please enter Executor memory')}`)
           return false
         }
 
@@ -405,7 +399,7 @@
         }
 
         if (!this.executorCores) {
-          this.$message.warning(`${i18n.$t('Please enter ExecutorPlease enter Executor core number')}`)
+          this.$message.warning(`${i18n.$t('Please enter Executor cores')}`)
           return false
         }
 
@@ -573,41 +567,6 @@
     mounted () {
 
     },
-    components: { mLocalParams, mListBox, Treeselect }
+    components: { mLocalParams, mListBox, mList4Box, Treeselect }
   }
 </script>
-
-<style lang="scss" rel="stylesheet/scss">
-  .spark-model {
-    .list-box-4p {
-      .list {
-        margin-bottom: 14px;
-        .sp1 {
-          float: left;
-          width: 112px;
-          text-align: right;
-          margin-right: 10px;
-          font-size: 14px;
-          color: #777;
-          display: inline-block;
-          padding-top: 6px;
-        }
-        .sp2 {
-          float: left;
-          margin-right: 4px;
-        }
-        .sp3 {
-          width: 176px;
-        }
-      }
-    }
-  }
-  .vue-treeselect--disabled {
-    .vue-treeselect__control {
-      background-color: #ecf3f8;
-      .vue-treeselect__single-value {
-        color: #6d859e;
-      }
-    }
-  }
-</style>
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/sql.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/sql.vue
index 0424ae6f0f..7bdbb59c59 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/sql.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/sql.vue
@@ -507,14 +507,3 @@
     components: { mListBox, mDatasource, mLocalParams, mUdfs, mSqlType, mStatementList, mEmail, mScriptBox }
   }
 </script>
-<style lang="scss" rel="stylesheet/scss">
-  .requiredIcon {
-    color: #ff0000;
-    padding-right: 4px;
-  }
-  .ans-modal-box-max {
-    position: absolute;
-    right: -12px;
-    top: -16px;
-  }
-</style>
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/sqoop.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/sqoop.vue
index dc3af78ec5..3e48e3dfdd 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/sqoop.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/sqoop.vue
@@ -122,7 +122,7 @@
           <m-list-box>
             <div slot="text">{{$t('ModelType')}}</div>
             <div slot="content">
-              <el-radio-group v-model="srcQueryType" size="small" @change="_handleQueryType" style="vertical-align: sub;">
+              <el-radio-group v-model="srcQueryType" size="small" @change="_handleQueryType">
                 <el-radio label="0">{{$t('Form')}}</el-radio>
                 <el-radio label="1">SQL</el-radio>
               </el-radio-group>
@@ -1264,14 +1264,3 @@
     components: { mListBox, mDatasource, mLocalParams, mScriptBox }
   }
 </script>
-<style lang="scss" rel="stylesheet/scss">
-  .requiredIcon {
-    color: #ff0000;
-    padding-right: 4px;
-  }
-  .ans-modal-box-max {
-    position: absolute;
-    right: -12px;
-    top: -16px;
-  }
-</style>
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/waterdrop.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/waterdrop.vue
index f730d59bc4..bdf2e337e7 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/waterdrop.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/waterdrop.vue
@@ -17,59 +17,56 @@
 <template>
   <div class="shell-model">
     <!--deploy mode-->
-    <div class="list-box-4p">
-      <div class="clearfix list">
-        <span class="sp1">{{$t('Deploy Mode')}}</span>
-        <span class="sp2">
-          <el-radio-group size="small" v-model="deployMode">
-            <el-radio :label="'client'" :disabled="isDetails"></el-radio>
-            <el-radio :label="'cluster'" :disabled="isDetails"></el-radio>
-            <el-radio :label="'local'" :disabled="isDetails"></el-radio>
-          </el-radio-group>
-        </span>
-        <span class="sp1 sp3">{{$t('Queue')}}</span>
-        <span class="sp4">
-          <el-input
-            :disabled="isDetails"
-            type="input"
-            size="small"
-            v-model="queue"
-            :placeholder="$t('Please enter queue value')"
-            style="width: 60%;">
-        </el-input>
-        </span>
+    <m-list-box>
+      <div slot="text">{{$t('Deploy Mode')}}</div>
+      <div slot="content">
+        <el-radio-group size="small" v-model="deployMode">
+          <el-radio :label="'client'" :disabled="isDetails"></el-radio>
+          <el-radio :label="'cluster'" :disabled="isDetails"></el-radio>
+          <el-radio :label="'local'" :disabled="isDetails"></el-radio>
+        </el-radio-group>
       </div>
-    </div>
+    </m-list-box>
     <!--master-->
-    <div class="list-box-4p" v-if="deployMode !== 'local'">
-      <div class="clearfix list">
-        <span class="sp1">{{$t('Master')}}</span>
-        <span class="sp4">
-          <el-select
-            style="width: 130px;"
-            size="small"
-            v-model="master"
-            :disabled="isDetails">
-            <el-option
-              v-for="city in masterType"
-              :key="city.code"
-              :value="city.code"
-              :label="city.code">
-            </el-option>
-          </el-select>
-        </span>
-        <span v-if="masterUrlState">
-          <el-input
-            :disabled="isDetails"
-            type="input"
-            size="small"
-            v-model="masterUrl"
-            :placeholder="$t('Please Enter Url')"
-            style="width: 60%;">
+    <m-list-box v-if="deployMode !== 'local'">
+      <div slot="text">{{$t('Master')}}</div>
+      <div slot="content" class="display-flex">
+        <el-select
+          size="small"
+          v-model="master"
+          :disabled="isDetails">
+          <el-option
+            v-for="city in masterType"
+            :key="city.code"
+            :value="city.code"
+            :label="city.code">
+          </el-option>
+        </el-select>
+        <el-input
+          :disabled="isDetails"
+          type="input"
+          size="small"
+          v-model="masterUrl"
+          :placeholder="$t('Please Enter Url')"
+          class="cont-extra"
+          v-if="masterUrlState">
         </el-input>
-        </span>
       </div>
-    </div>
+    </m-list-box>
+    <!--queue-->
+    <m-list-box v-if="deployMode !== 'local' && master === 'yarn'">
+      <div slot="text">{{$t('Queue')}}</div>
+      <div slot="content">
+        <el-input
+          :disabled="isDetails"
+          type="input"
+          size="small"
+          v-model="queue"
+          :placeholder="$t('Please enter queue value')"
+          style="width: 192px;">
+        </el-input>
+      </div>
+    </m-list-box>
     <!--config file-->
     <m-list-box>
       <div slot="text">{{$t('Resources')}}</div>
@@ -93,6 +90,7 @@
     </m-list-box>
   </div>
 </template>
+
 <script>
   import _ from 'lodash'
   import i18n from '@/module/i18n'
@@ -414,58 +412,3 @@
     components: { mLocalParams, mListBox, Treeselect }
   }
 </script>
-<style lang="scss" rel="stylesheet/scss" scope>
-  .scriptModal {
-    .ans-modal-box-content-wrapper {
-      width: 90%;
-      .ans-modal-box-close {
-        right: -12px;
-        top: -16px;
-        color: #fff;
-      }
-    }
-  }
-  .ans-modal-box-close {
-    z-index: 100;
-  }
-  .ans-modal-box-max {
-    position: absolute;
-    right: -12px;
-    top: -16px;
-  }
-  .vue-treeselect--disabled {
-    .vue-treeselect__control {
-      background-color: #ecf3f8;
-      .vue-treeselect__single-value {
-        color: #6d859e;
-      }
-    }
-  }
-  .list-box-4p {
-    .list {
-      margin-bottom: 14px;
-      .sp1 {
-        float: left;
-        width: 112px;
-        text-align: right;
-        margin-right: 10px;
-        font-size: 14px;
-        color: #777;
-        display: inline-block;
-        padding-top: 6px;
-      }
-      .sp2 {
-        float: left;
-        margin-right: 4px;
-        padding-top: 6px;
-      }
-      .sp3 {
-        width: 90px;
-      }
-      .sp4 {
-        float: left;
-        margin-right: 4px;
-      }
-    }
-  }
-</style>
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/datasource/pages/list/index.vue b/dolphinscheduler-ui/src/js/conf/home/pages/datasource/pages/list/index.vue
index 5b290b422a..04683ebe4e 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/datasource/pages/list/index.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/datasource/pages/list/index.vue
@@ -23,7 +23,7 @@
           <el-dialog
             :title="item ?($t('Edit')+$t('Datasource')) : ($t('Create')+$t('Datasource'))"
             :visible.sync="dialogVisible"
-            width="65%"
+            width="auto"
             :append-to-body="true">
             <m-create-data-source :item="item" @onUpdate="onUpdate" @close="close"></m-create-data-source>
           </el-dialog>
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/list/_source/list.vue b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/list/_source/list.vue
index ac06748450..ce9058ea87 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/list/_source/list.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/list/_source/list.vue
@@ -124,26 +124,26 @@
     <el-button type="primary" size="mini" :disabled="!strSelectIds" style="position: absolute; bottom: -48px; left: 225px;" @click="_batchMove(item)" >{{$t('Batch move')}}</el-button>
     <el-drawer
       :visible.sync="drawer"
-      size="35%"
+      size=""
       :with-header="false">
       <m-versions :versionData = versionData @mVersionSwitchProcessDefinitionVersion="mVersionSwitchProcessDefinitionVersion" @mVersionGetProcessDefinitionVersionsPage="mVersionGetProcessDefinitionVersionsPage" @mVersionDeleteProcessDefinitionVersion="mVersionDeleteProcessDefinitionVersion" @closeVersion="closeVersion"></m-versions>
     </el-drawer>
     <el-dialog
       :title="$t('Please set the parameters before starting')"
       :visible.sync="startDialog"
-      width="65%">
+      width="auto">
       <m-start :startData= "startData" @onUpdateStart="onUpdateStart" @closeStart="closeStart"></m-start>
     </el-dialog>
     <el-dialog
       :title="$t('Set parameters before timing')"
       :visible.sync="timingDialog"
-      width="65%">
+      width="auto">
       <m-timing :timingData="timingData" @onUpdateTiming="onUpdateTiming" @closeTiming="closeTiming"></m-timing>
     </el-dialog>
     <el-dialog
       title="提示"
       :visible.sync="relatedItemsDialog"
-      width="30%">
+      width="auto">
       <m-related-items :tmp="tmp" @onBatchCopy="onBatchCopy" @onBatchMove="onBatchMove" @closeRelatedItems="closeRelatedItems"></m-related-items>
     </el-dialog>
   </div>
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/list/_source/timing.vue b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/list/_source/timing.vue
index 08ac6249f1..51c2787704 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/list/_source/timing.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/list/_source/timing.vue
@@ -379,7 +379,7 @@
       .v-crontab {
       }
     }
-    .from-model {
+    .form-model {
       padding-top: 0;
     }
     .title-box {
@@ -412,7 +412,7 @@
       padding-bottom: 30px;
     }
   }
-  .v-crontab-from-model {
+  .v-crontab-form-model {
     .list-box {
       padding: 0;
     }
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/timing/_source/list.vue b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/timing/_source/list.vue
index cf308f7238..f773edfae1 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/timing/_source/list.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/timing/_source/list.vue
@@ -100,7 +100,7 @@
     <el-dialog
       :title="$t('Set parameters before timing')"
       :visible.sync="timingDialog"
-      width="65%">
+      width="auto">
       <m-timing :timingData="timingData" @onUpdateTiming="onUpdateTiming" @closeTiming="closeTiming"></m-timing>
     </el-dialog>
   </div>
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/list/index.vue b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/list/index.vue
index 1a0b67d330..0fa6893c3a 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/list/index.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/list/index.vue
@@ -22,7 +22,7 @@
           <el-button size="mini" @click="_create('')">{{ $t('Create Project') }}</el-button>
           <el-dialog
             :visible.sync="createProjectDialog"
-            width="40%">
+            width="auto">
             <m-create-project :item="item" @_onUpdate="_onUpdate" @close="_close"></m-create-project>
           </el-dialog>
         </template>
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/taskInstance/_source/list.vue b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/taskInstance/_source/list.vue
index 7727ef14fa..2b67048215 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/taskInstance/_source/list.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/taskInstance/_source/list.vue
@@ -74,7 +74,7 @@
     </div>
     <el-dialog
       :visible.sync="logDialog"
-      width="30%">
+      width="auto">
       <m-log :item="item" :source="source" :logId="logId" @ok="ok" @close="close"></m-log>
     </el-dialog>
   </div>
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/resource/pages/file/pages/list/_source/list.vue b/dolphinscheduler-ui/src/js/conf/home/pages/resource/pages/file/pages/list/_source/list.vue
index 7d38e93d0d..f85c576614 100755
--- a/dolphinscheduler-ui/src/js/conf/home/pages/resource/pages/file/pages/list/_source/list.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/resource/pages/file/pages/list/_source/list.vue
@@ -79,7 +79,7 @@
     </div>
     <el-dialog
       :visible.sync="renameDialog"
-      width="45%">
+      width="auto">
       <m-rename :item="item" @onUpDate="onUpDate" @close="close"></m-rename>
     </el-dialog>
   </div>
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/resource/pages/file/pages/subdirectory/_source/list.vue b/dolphinscheduler-ui/src/js/conf/home/pages/resource/pages/file/pages/subdirectory/_source/list.vue
index 8e4950308e..b51545ef3b 100755
--- a/dolphinscheduler-ui/src/js/conf/home/pages/resource/pages/file/pages/subdirectory/_source/list.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/resource/pages/file/pages/subdirectory/_source/list.vue
@@ -79,7 +79,7 @@
     </div>
     <el-dialog
       :visible.sync="renameDialog"
-      width="45%">
+      width="auto">
       <m-rename :item="item" @onUpDate="onUpDate" @close="close"></m-rename>
     </el-dialog>
   </div>
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/resource/pages/udf/pages/function/_source/list.vue b/dolphinscheduler-ui/src/js/conf/home/pages/resource/pages/udf/pages/function/_source/list.vue
index 32bd6911e7..63080f5580 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/resource/pages/udf/pages/function/_source/list.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/resource/pages/udf/pages/function/_source/list.vue
@@ -65,7 +65,7 @@
     </div>
     <el-dialog
       :visible.sync="createUdfDialog"
-      width="60%">
+      width="auto">
       <m-create-udf :item="item" @onUpdate="onUpdate" @close="close"></m-create-udf>
     </el-dialog>
   </div>
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/resource/pages/udf/pages/function/index.vue b/dolphinscheduler-ui/src/js/conf/home/pages/resource/pages/udf/pages/function/index.vue
index 5015d8d351..250e9d94a2 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/resource/pages/udf/pages/function/index.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/resource/pages/udf/pages/function/index.vue
@@ -24,7 +24,7 @@
           </el-button-group>
           <el-dialog
             :visible.sync="createUdfDialog"
-            width="60%">
+            width="auto">
             <m-create-udf @onUpdate="onUpdate" @close="close"></m-create-udf>
           </el-dialog>
         </template>
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/resource/pages/udf/pages/subUdfDirectory/_source/list.vue b/dolphinscheduler-ui/src/js/conf/home/pages/resource/pages/udf/pages/subUdfDirectory/_source/list.vue
index cfca456b15..e610a4282a 100755
--- a/dolphinscheduler-ui/src/js/conf/home/pages/resource/pages/udf/pages/subUdfDirectory/_source/list.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/resource/pages/udf/pages/subUdfDirectory/_source/list.vue
@@ -77,7 +77,7 @@
     </div>
     <el-dialog
       :visible.sync="renameDialog"
-      width="45%">
+      width="auto">
       <m-rename :item="item" @onUpDate="onUpDate" @close="close"></m-rename>
     </el-dialog>
   </div>
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/security/pages/queue/index.vue b/dolphinscheduler-ui/src/js/conf/home/pages/security/pages/queue/index.vue
index ec61cfab77..9e622eec44 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/security/pages/queue/index.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/security/pages/queue/index.vue
@@ -22,7 +22,7 @@
           <el-button size="mini" @click="_create('')">{{$t('Create queue')}}</el-button>
           <el-dialog
             :visible.sync="createQueueDialog"
-            width="60%">
+            width="auto">
             <m-create-queue :item="item" @onUpdate="onUpdate" @close="close"></m-create-queue>
           </el-dialog>
         </template>
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/security/pages/tenement/index.vue b/dolphinscheduler-ui/src/js/conf/home/pages/security/pages/tenement/index.vue
index 75cfd047b2..03ac67684e 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/security/pages/tenement/index.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/security/pages/tenement/index.vue
@@ -22,7 +22,7 @@
           <el-button size="mini" @click="_create('')">{{$t('Create Tenant')}}</el-button>
           <el-dialog
             :visible.sync="createTenementDialog"
-            width="60%">
+            width="auto">
             <m-create-tenement :item="item" @onUpdate="onUpdate" @close="close"></m-create-tenement>
           </el-dialog>
         </template>
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/security/pages/users/_source/list.vue b/dolphinscheduler-ui/src/js/conf/home/pages/security/pages/users/_source/list.vue
index 0c211dca22..1a119d1028 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/security/pages/users/_source/list.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/security/pages/users/_source/list.vue
@@ -82,25 +82,25 @@
     </div>
     <el-dialog
       :visible.sync="authProjectDialog"
-      width="50%">
+      width="auto">
       <m-transfer :transferData="transferData" @onUpdateAuthProject="onUpdateAuthProject" @closeAuthProject="closeAuthProject"></m-transfer>
     </el-dialog>
 
     <el-dialog
       :visible.sync="authDataSourceDialog"
-      width="50%">
+      width="auto">
       <m-transfer :transferData="transferData" @onUpdateAuthDataSource="onUpdateAuthDataSource" @closeAuthDataSource="closeAuthDataSource"></m-transfer>
     </el-dialog>
 
     <el-dialog
       :visible.sync="authUdfFuncDialog"
-      width="50%">
+      width="auto">
       <m-transfer :transferData="transferData" @onUpdateAuthUdfFunc="onUpdateAuthUdfFunc" @closeAuthUdfFunc="closeAuthUdfFunc"></m-transfer>
     </el-dialog>
 
     <el-dialog
       :visible.sync="resourceDialog"
-      width="50%">
+      width="auto">
       <m-resource :resourceData="resourceData" @onUpdateAuthResource="onUpdateAuthResource" @closeAuthResource="closeAuthResource"></m-resource>
     </el-dialog>
   </div>
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/security/pages/users/index.vue b/dolphinscheduler-ui/src/js/conf/home/pages/security/pages/users/index.vue
index 560fdc0044..ca0117e96f 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/security/pages/users/index.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/security/pages/users/index.vue
@@ -22,7 +22,7 @@
           <el-button size="mini" @click="_create('')">{{$t('Create User')}}</el-button>
           <el-dialog
             :visible.sync="createUserDialog"
-            width="60%">
+            width="auto">
             <m-create-user :item="item" @onUpdate="onUpdate" @close="close"></m-create-user>
           </el-dialog>
         </template>
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/security/pages/warningGroups/_source/list.vue b/dolphinscheduler-ui/src/js/conf/home/pages/security/pages/warningGroups/_source/list.vue
index 29414f4ea0..a4fd982a26 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/security/pages/warningGroups/_source/list.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/security/pages/warningGroups/_source/list.vue
@@ -62,7 +62,7 @@
     </div>
     <el-dialog
       :visible.sync="transferDialog"
-      width="40%">
+      width="auto">
       <m-transfer :transferData="transferData" @onUpdate="onUpdate" @close="close"></m-transfer>
     </el-dialog>
   </div>
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/security/pages/warningGroups/index.vue b/dolphinscheduler-ui/src/js/conf/home/pages/security/pages/warningGroups/index.vue
index 0b5a2d3a21..8368a04773 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/security/pages/warningGroups/index.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/security/pages/warningGroups/index.vue
@@ -22,7 +22,7 @@
           <el-button size="mini" @click="_create('')">{{$t('Create alarm group')}}</el-button>
           <el-dialog
             :visible.sync="createWarningDialog"
-            width="60%">
+            width="auto">
             <m-create-warning :item="item" @onUpdate="onUpdate" @close="close"></m-create-warning>
           </el-dialog>
         </template>
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/user/pages/account/_source/info.vue b/dolphinscheduler-ui/src/js/conf/home/pages/user/pages/account/_source/info.vue
index c02c88095a..0c7467b294 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/user/pages/account/_source/info.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/user/pages/account/_source/info.vue
@@ -70,7 +70,7 @@
         <el-button type="primary" size="small" round @click="_edit()" >{{$t('Edit')}}</el-button>
         <el-dialog
           :visible.sync="createUserDialog"
-          width="50%">
+          width="auto">
           <m-create-user :item="item" @onUpdate="onUpdate" @close="close"></m-create-user>
         </el-dialog>
       </template>
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/user/pages/token/index.vue b/dolphinscheduler-ui/src/js/conf/home/pages/user/pages/token/index.vue
index bceb89be28..807a9a76eb 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/user/pages/token/index.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/user/pages/token/index.vue
@@ -22,7 +22,7 @@
           <el-button size="mini" @click="_create('')">{{$t('Create token')}}</el-button>
           <el-dialog
             :visible.sync="createTokenDialog"
-            width="50%">
+            width="auto">
             <m-create-token :item="item" @onUpdate="onUpdate" @close="close"></m-create-token>
           </el-dialog>
         </template>
diff --git a/dolphinscheduler-ui/src/js/conf/login/App.vue b/dolphinscheduler-ui/src/js/conf/login/App.vue
index 0ca593d9e4..3eaf4d14b4 100644
--- a/dolphinscheduler-ui/src/js/conf/login/App.vue
+++ b/dolphinscheduler-ui/src/js/conf/login/App.vue
@@ -19,7 +19,7 @@
     <div class="text-1">
       <a href="javascript:"></a>
     </div>
-    <div class="from-model">
+    <div class="form-model">
       <div class="list">
         <label>{{$t('User Name')}}</label>
         <div>
@@ -168,7 +168,7 @@
         margin: 0 auto;
       }
     }
-    .from-model {
+    .form-model {
       padding: 30px 20px;
       .list {
         margin-bottom: 24px;
diff --git a/dolphinscheduler-ui/src/js/module/components/crontab/source/_times/day.vue b/dolphinscheduler-ui/src/js/module/components/crontab/source/_times/day.vue
index 4555feab20..7698a788db 100755
--- a/dolphinscheduler-ui/src/js/module/components/crontab/source/_times/day.vue
+++ b/dolphinscheduler-ui/src/js/module/components/crontab/source/_times/day.vue
@@ -16,7 +16,7 @@
  */
 <template>
   <div class="day-model">
-    <div class="v-crontab-from-model">
+    <div class="v-crontab-form-model">
       <el-radio-group v-model="radioDay" vertical size="mini">
         <div class="list-box">
           <el-radio label="everyDay">
diff --git a/dolphinscheduler-ui/src/js/module/components/crontab/source/_times/hour.vue b/dolphinscheduler-ui/src/js/module/components/crontab/source/_times/hour.vue
index 457210d1ad..6a2e2560d1 100755
--- a/dolphinscheduler-ui/src/js/module/components/crontab/source/_times/hour.vue
+++ b/dolphinscheduler-ui/src/js/module/components/crontab/source/_times/hour.vue
@@ -16,7 +16,7 @@
  */
 <template>
   <div class="hour-model">
-    <div class="v-crontab-from-model">
+    <div class="v-crontab-form-model">
       <el-radio-group v-model="radioHour" vertical size="mini">
         <div class="list-box">
           <el-radio label="everyHour">
diff --git a/dolphinscheduler-ui/src/js/module/components/crontab/source/_times/minute.vue b/dolphinscheduler-ui/src/js/module/components/crontab/source/_times/minute.vue
index 878c273d38..e91a1864f2 100755
--- a/dolphinscheduler-ui/src/js/module/components/crontab/source/_times/minute.vue
+++ b/dolphinscheduler-ui/src/js/module/components/crontab/source/_times/minute.vue
@@ -16,7 +16,7 @@
  */
 <template>
   <div class="minute-model">
-    <div class="v-crontab-from-model">
+    <div class="v-crontab-form-model">
       <el-radio-group v-model="radioMinute" vertical size="mini">
         <div class="list-box">
           <el-radio label="everyMinute">
diff --git a/dolphinscheduler-ui/src/js/module/components/crontab/source/_times/month.vue b/dolphinscheduler-ui/src/js/module/components/crontab/source/_times/month.vue
index 5879019fcb..f2799ca699 100755
--- a/dolphinscheduler-ui/src/js/module/components/crontab/source/_times/month.vue
+++ b/dolphinscheduler-ui/src/js/module/components/crontab/source/_times/month.vue
@@ -16,7 +16,7 @@
  */
 <template>
   <div class="month-model">
-    <div class="v-crontab-from-model">
+    <div class="v-crontab-form-model">
       <el-radio-group v-model="radioMonth" vertical size="mini">
         <div class="list-box">
           <el-radio label="everyMonth" size="mini">
diff --git a/dolphinscheduler-ui/src/js/module/components/crontab/source/_times/second.vue b/dolphinscheduler-ui/src/js/module/components/crontab/source/_times/second.vue
index cef02d572c..2f4f21ebe4 100755
--- a/dolphinscheduler-ui/src/js/module/components/crontab/source/_times/second.vue
+++ b/dolphinscheduler-ui/src/js/module/components/crontab/source/_times/second.vue
@@ -16,7 +16,7 @@
  */
 <template>
   <div class="second-model">
-    <div class="v-crontab-from-model">
+    <div class="v-crontab-form-model">
       <el-radio-group v-model="radioSecond" vertical size="mini">
         <div class="list-box">
           <el-radio label="everySecond">
diff --git a/dolphinscheduler-ui/src/js/module/components/crontab/source/_times/year.vue b/dolphinscheduler-ui/src/js/module/components/crontab/source/_times/year.vue
index 08ab12f291..6a1f7dd9f1 100755
--- a/dolphinscheduler-ui/src/js/module/components/crontab/source/_times/year.vue
+++ b/dolphinscheduler-ui/src/js/module/components/crontab/source/_times/year.vue
@@ -16,7 +16,7 @@
  */
 <template>
   <div class="year-model">
-    <div class="v-crontab-from-model">
+    <div class="v-crontab-form-model">
       <el-radio-group v-model="radioYear" vertical size="mini">
         <div class="list-box">
           <el-radio label="everyYear">
diff --git a/dolphinscheduler-ui/src/js/module/components/crontab/source/index.scss b/dolphinscheduler-ui/src/js/module/components/crontab/source/index.scss
index 6b215a1cf3..bd8346ba17 100755
--- a/dolphinscheduler-ui/src/js/module/components/crontab/source/index.scss
+++ b/dolphinscheduler-ui/src/js/module/components/crontab/source/index.scss
@@ -14,7 +14,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.v-crontab-from-model {
+.v-crontab-form-model {
   .list-box {
     //padding: 6px 0;
 
diff --git a/dolphinscheduler-ui/src/js/module/components/nav/nav.vue b/dolphinscheduler-ui/src/js/module/components/nav/nav.vue
index aff6b1b9ef..b72d259f05 100644
--- a/dolphinscheduler-ui/src/js/module/components/nav/nav.vue
+++ b/dolphinscheduler-ui/src/js/module/components/nav/nav.vue
@@ -139,28 +139,28 @@
     <el-dialog
       :visible.sync="definitionUpdateDialog"
       append-to-body="true"
-      width="40%">
+      width="auto">
       <m-definition-update :type="type" @onProgressDefinition="onProgressDefinition" @onUpdateDefinition="onUpdateDefinition" @onArchiveDefinition="onArchiveDefinition" @closeDefinition="closeDefinition"></m-definition-update>
     </el-dialog>
 
     <el-dialog
       :visible.sync="fileUpdateDialog"
       append-to-body="true"
-      width="40%">
+      width="auto">
       <m-file-update :type="type" @onProgressFileUpdate="onProgressFileUpdate" @onUpdateFileUpdate="onUpdateFileUpdate" @onArchiveDefinition="onArchiveFileUpdate" @closeFileUpdate="closeFileUpdate"></m-file-update>
     </el-dialog>
 
     <el-dialog
       :visible.sync="fileChildUpdateDialog"
       append-to-body="true"
-      width="40%">
+      width="auto">
       <m-file-child-update :type="type" :id="id" @onProgressFileChildUpdate="onProgressFileChildUpdate" @onUpdateFileChildUpdate="onUpdateFileChildUpdate" @onArchiveFileChildUpdate="onArchiveFileChildUpdate" @closeFileChildUpdate="closeFileChildUpdate"></m-file-child-update>
     </el-dialog>
 
     <el-dialog
       :visible.sync="resourceChildUpdateDialog"
       append-to-body="true"
-      width="40%">
+      width="auto">
       <m-resource-child-update :type="type" :id="id" @onProgressResourceChildUpdate="onProgressResourceChildUpdate" @onUpdateResourceChildUpdate="onUpdateResourceChildUpdate" @onArchiveFileChildUpdate="onArchiveResourceChildUpdate" @closeResourceChildUpdate="closeResourceChildUpdate"></m-resource-child-update>
     </el-dialog>
   </div>
diff --git a/dolphinscheduler-ui/src/js/module/i18n/locale/en_US.js b/dolphinscheduler-ui/src/js/module/i18n/locale/en_US.js
index 13dbc7e068..46c51e8f33 100755
--- a/dolphinscheduler-ui/src/js/module/i18n/locale/en_US.js
+++ b/dolphinscheduler-ui/src/js/module/i18n/locale/en_US.js
@@ -35,6 +35,7 @@ export default {
   'Force success': 'Force success',
   'Enter this child node': 'Enter this child node',
   'Node name': 'Node name',
+  'Please enter name (required)': 'Please enter name (required)',
   'Run flag': 'Run flag',
   Normal: 'Normal',
   'Prohibition execution': 'Prohibition execution',
@@ -45,11 +46,11 @@ export default {
   Minute: 'Minute',
   'Delay execution time': 'Delay execution time',
   'Delay execution': 'Delay execution',
+  'Forced success': 'Forced success',
   Cancel: 'Cancel',
   'Confirm add': 'Confirm add',
   'The newly created sub-Process has not yet been executed and cannot enter the sub-Process': 'The newly created sub-Process has not yet been executed and cannot enter the sub-Process',
   'The task has not been executed and cannot enter the sub-Process': 'The task has not been executed and cannot enter the sub-Process',
-  'Please enter name (required)': 'Please enter name (required)',
   'Name already exists': 'Name already exists',
   'Download Log': 'Download Log',
   'Refresh Log': 'Refresh Log',
@@ -87,8 +88,7 @@ export default {
   'Main class': 'Main class',
   'Main jar package': 'Main jar package',
   'Please enter main jar package': 'Please enter main jar package',
-  'Main package': 'Main package',
-  'Please enter main package': 'Please enter main package',
+  'Please enter main class': 'Please enter main class',
   'Command-line parameters': 'Command-line parameters',
   'Please enter Command-line parameters': 'Please enter Command-line parameters',
   'Other parameters': 'Other parameters',
@@ -102,26 +102,24 @@ export default {
   Script: 'Script',
   'Please enter script(required)': 'Please enter script(required)',
   'Deploy Mode': 'Deploy Mode',
-  'Flink Version': 'Flink Version',
-  'Driver core number': 'Driver core number',
-  'Please enter driver core number': 'Please enter driver core number',
-  'Driver memory use': 'Driver memory use',
-  'Please enter driver memory use': 'Please enter driver memory use',
-  'Number of Executors': 'Number of Executors',
-  'Please enter the job name of Flink(optional)': 'Please enter the job name of Flink(optional)',
-  'Please enter the number of Executor': 'Please enter the number of Executor',
+  'Driver cores': 'Driver cores',
+  'Please enter Driver cores': 'Please enter Driver cores',
+  'Driver memory': 'Driver memory',
+  'Please enter Driver memory': 'Please enter Driver memory',
+  'Executor Number': 'Executor Number',
+  'Please enter Executor number': 'Please enter Executor number',
   'Executor memory': 'Executor memory',
-  'Please enter the Executor memory': 'Please enter the Executor memory',
-  'Executor core number': 'Executor core number',
-  'Please enter Executor core number': 'Please enter Executor core number',
-  'The number of Executors should be a positive integer': 'The number of Executors should be a positive integer',
+  'Please enter Executor memory': 'Please enter Executor memory',
+  'Executor cores': 'Executor cores',
+  'Please enter Executor cores': 'Please enter Executor cores',
+  'The Executor Number should be a positive integer': 'The Executor Number should be a positive integer',
   'Memory should be a positive integer': 'Memory should be a positive integer',
-  'Please enter ExecutorPlease enter Executor core number': 'Please enter ExecutorPlease enter Executor core number',
   'Core number should be positive integer': 'Core number should be positive integer',
-  'Please enter jobManager memory': 'Please enter jobManager memory',
-  'Please enter the taskManager memory': 'Please enter the taskManager memory',
-  'Please enter solt number': 'Please enter solt number',
-  'Please enter taskManager number': 'Please enter taskManager number',
+  'Please enter JobManager memory': 'Please enter JobManager memory',
+  'Please enter TaskManager memory': 'Please enter TaskManager memory',
+  'Please enter Slot number': 'Please enter Slot number',
+  'Please enter TaskManager number': 'Please enter TaskManager number',
+  'Please enter app name(optional)': 'Please enter app name(optional)',
   'SQL Type': 'SQL Type',
   Title: 'Title',
   'Please enter the title of email': 'Please enter the title of email',
@@ -193,14 +191,12 @@ export default {
   'Please enter tenant code': 'Please enter tenant code',
   'Please enter tenant Name': 'Please enter tenant Name',
   'The tenant code. Only letters or a combination of letters and numbers are allowed': 'The tenant code. Only letters or a combination of letters and numbers are allowed',
-  'The tenant code cannot be all numbers': 'The tenant code cannot be all numbers',
   'Edit User': 'Edit User',
   Tenant: 'Tenant',
   Email: 'Email',
   Phone: 'Phone',
   'User Type': 'User Type',
   'Please enter phone number': 'Please enter phone number',
-  'Please enter main class': 'Please enter main class',
   'Please enter email': 'Please enter email',
   'Please enter the correct email format': 'Please enter the correct email format',
   'Please enter the correct mobile phone format': 'Please enter the correct mobile phone format',
@@ -208,9 +204,8 @@ export default {
   Authorize: 'Authorize',
   'File resources': 'File resources',
   'UDF resources': 'UDF resources',
-  'Please select UDF resources directory': 'Please select UDF resources directory',
   'UDF resources directory': 'UDF resources directory',
-  'Upload File Size': 'Upload File size cannot exceed 1g',
+  'Please select UDF resources directory': 'Please select UDF resources directory',
   'Edit alarm group': 'Edit alarm group',
   'Create alarm group': 'Create alarm group',
   'Group Name': 'Group Name',
@@ -261,6 +256,7 @@ export default {
   'File Format': 'File Format',
   'Folder Format': 'Folder Format',
   'File Content': 'File Content',
+  'Upload File Size': 'Upload File size cannot exceed 1g',
   Create: 'Create',
   'Please enter the resource content': 'Please enter the resource content',
   'Resource content cannot exceed 3000 lines': 'Resource content cannot exceed 3000 lines',
@@ -338,11 +334,6 @@ export default {
   'Resume the suspension process': 'Resume the suspension process',
   'Execute from the failed nodes': 'Execute from the failed nodes',
   'Complement Data': 'Complement Data',
-  slot: 'slot',
-  taskManager: 'taskManager',
-  appName: 'Flink job name',
-  jobManagerMemory: 'jobManagerMemory',
-  taskManagerMemory: 'taskManagerMemory',
   'Scheduling execution': 'Scheduling execution',
   'Recovery waiting thread': 'Recovery waiting thread',
   'Submitted successfully': 'Submitted successfully',
@@ -359,7 +350,6 @@ export default {
   Delete: 'Delete',
   'Please enter keyword': 'Please enter keyword',
   'File Upload': 'File Upload',
-  'File ReUpload': 'File ReUpload',
   'Drag the file into the current upload window': 'Drag the file into the current upload window',
   'Drag area upload': 'Drag area upload',
   Upload: 'Upload',
@@ -445,7 +435,6 @@ export default {
   'Timeout must be longer than check interval': 'Timeout must be longer than check interval',
   'Timeout strategy must be selected': 'Timeout strategy must be selected',
   'Timeout must be a positive integer': 'Timeout must be a positive integer',
-  'Forced success': 'Forced success',
   'Add dependency': 'Add dependency',
   and: 'and',
   or: 'or',
@@ -546,6 +535,12 @@ export default {
   'Next five execution times': 'Next five execution times',
   'Execute time': 'Execute time',
   'Complement range': 'Complement range',
+  'Flink Version': 'Flink Version',
+  'Slot Number': 'Slot Number',
+  'TaskManager Number': 'TaskManager Number',
+  'JobManager Memory': 'JobManager Memory',
+  'TaskManager Memory': 'TaskManager Memory',
+  'App Name': 'App Name',
   'Http Url': 'Http Url',
   'Http Method': 'Http Method',
   'Http Parameters': 'Http Parameters',
@@ -629,6 +624,8 @@ export default {
   'Custom Script': 'Custom Script',
   'Cannot select the same node for successful branch flow and failed branch flow': 'Cannot select the same node for successful branch flow and failed branch flow',
   'Successful branch flow and failed branch flow are required': 'conditions node Successful and failed branch flow are required',
+  'No resources exist': 'No resources exist',
+  'Please delete all non-existing resources': 'Please delete all non-existing resources',
   'Unauthorized or deleted resources': 'Unauthorized or deleted resources',
   'Please delete all non-existent resources': 'Please delete all non-existent resources',
   Kinship: 'Workflow relationship',
@@ -639,18 +636,16 @@ export default {
   KinshipState10: 'Scheduling is not online',
   'Dag label display control': 'Dag label display control',
   Enable: 'Enable',
+  Disable: 'Disable',
+  'The Worker group no longer exists, please select the correct Worker group!': 'The Worker group no longer exists, please select the correct Worker group!',
+  'Please confirm whether the workflow has been saved before downloading': 'Please confirm whether the workflow has been saved before downloading',
+  'User name length is between 3 and 39': 'User name length is between 3 and 39',
   'Timeout Settings': 'Timeout Settings',
   'Connect Timeout': 'Connect Timeout',
   'Socket Timeout': 'Socket Timeout',
   'Connect timeout be a positive integer': 'Connect timeout be a positive integer',
   'Socket Timeout be a positive integer': 'Socket Timeout be a positive integer',
   ms: 'ms',
-  Disable: 'Disable',
-  'No resources exist': 'No resources exist',
-  'Please delete all non-existing resources': 'Please delete all non-existing resources',
-  'The Worker group no longer exists, please select the correct Worker group!': 'The Worker group no longer exists, please select the correct Worker group!',
-  'Please confirm whether the workflow has been saved before downloading': 'Please confirm whether the workflow has been saved before downloading',
-  'User name length is between 3 and 39': 'User name length is between 3 and 39',
   'Please Enter Url': 'Please Enter Url eg. 127.0.0.1:7077',
   Master: 'Master',
   'Please select the waterdrop resources': 'Please select the waterdrop resources',
diff --git a/dolphinscheduler-ui/src/js/module/i18n/locale/zh_CN.js b/dolphinscheduler-ui/src/js/module/i18n/locale/zh_CN.js
index c45afda8a5..b4f146d35b 100755
--- a/dolphinscheduler-ui/src/js/module/i18n/locale/zh_CN.js
+++ b/dolphinscheduler-ui/src/js/module/i18n/locale/zh_CN.js
@@ -45,6 +45,8 @@ export default {
   'Failed retry interval': '失败重试间隔',
   Minute: '分',
   'Delay execution time': '延时执行时间',
+  'Delay execution': '延时执行',
+  'Forced success': '强制成功过',
   Cancel: '取消',
   'Confirm add': '确认添加',
   'The newly created sub-Process has not yet been executed and cannot enter the sub-Process': '新创建子工作流还未执行，不能进入子工作流',
@@ -86,6 +88,7 @@ export default {
   'Main class': '主函数的class',
   'Main jar package': '主jar包',
   'Please enter main jar package': '请选择主jar包',
+  'Please enter main class': '请填写主函数的class',
   'Command-line parameters': '命令行参数',
   'Please enter Command-line parameters': '请输入命令行参数',
   'Other parameters': '其他参数',
@@ -93,33 +96,30 @@ export default {
   Resources: '资源',
   'Custom Parameters': '自定义参数',
   'Custom template': '自定义模版',
-  'Please enter main class': '请填写主函数的class',
   Datasource: '数据源',
   methods: '方法',
   'Please enter method(optional)': '请输入方法(选填)',
   Script: '脚本',
   'Please enter script(required)': '请输入脚本(必填)',
   'Deploy Mode': '部署方式',
-  'Flink Version': 'Flink版本',
-  'Driver core number': 'Driver内核数',
-  'Please enter driver core number': '请输入Driver内核数',
-  'Driver memory use': 'Driver内存数',
-  'Please enter driver memory use': '请输入Driver内存数',
-  'Number of Executors': 'Executor数量',
-  'Please enter the job name of Flink(optional)': '请输入Flink任务名称(选填)',
-  'Please enter the number of Executor': '请输入Executor数量',
+  'Driver cores': 'Driver内核数',
+  'Please enter Driver cores': '请输入Driver内核数',
+  'Driver memory': 'Driver内存数',
+  'Please enter Driver memory': '请输入Driver内存数',
+  'Executor Number': 'Executor数量',
+  'Please enter Executor number': '请输入Executor数量',
   'Executor memory': 'Executor内存数',
-  'Please enter the Executor memory': '请输入Executor内存数',
-  'Executor core number': 'Executor内核数',
-  'Please enter Executor core number': '请输入Executor内核数',
-  'The number of Executors should be a positive integer': 'Executor数量为正整数',
+  'Please enter Executor memory': '请输入Executor内存数',
+  'Executor cores': 'Executor内核数',
+  'Please enter Executor cores': '请输入Executor内核数',
+  'The Executor Number should be a positive integer': 'Executor数量为正整数',
   'Memory should be a positive integer': '内存数为数字',
-  'Please enter ExecutorPlease enter Executor core number': '请填写Executor内核数',
   'Core number should be positive integer': '内核数为正整数',
-  'Please enter jobManager memory': '请输入JobManager内存数',
-  'Please enter the taskManager memory': '请输入TaskManager内存数',
-  'Please enter solt number': '请输入solt数量',
-  'Please enter taskManager number': '请输入taskManager数量',
+  'Please enter JobManager memory': '请输入JobManager内存数',
+  'Please enter TaskManager memory': '请输入TaskManager内存数',
+  'Please enter Slot number': '请输入Slot数量',
+  'Please enter TaskManager number': '请输入TaskManager数量',
+  'Please enter app name(optional)': '请输入任务名称(选填)',
   'SQL Type': 'sql类型',
   Title: '主题',
   'Please enter the title of email': '请输入邮件主题',
@@ -129,9 +129,6 @@ export default {
   'SQL Parameter': 'sql参数',
   'SQL Statement': 'sql语句',
   'UDF Function': 'UDF函数',
-  FILE: '文件',
-  UDF: 'UDF',
-  'File Subdirectory': '文件子目录',
   'Please enter a SQL Statement(required)': '请输入sql语句(必填)',
   'Please enter a JSON Statement(required)': '请输入json语句(必填)',
   'One form or attachment must be selected': '表格、附件必须勾选一个',
@@ -188,6 +185,7 @@ export default {
   'Tenant Code': '租户编码',
   'Tenant Name': '租户名称',
   Queue: '队列',
+  'Please select a queue': '默认为租户关联队列',
   'Please enter the tenant code in English': '请输入租户编码只允许英文',
   'Please enter tenant code in English': '请输入英文租户编码',
   'Please enter tenant code': '请输入租户编码',
@@ -305,6 +303,9 @@ export default {
   'Edit UDF Function': '编辑UDF函数',
   type: '类型',
   'UDF Function Name': 'UDF函数名称',
+  FILE: '文件',
+  UDF: 'UDF',
+  'File Subdirectory': '文件子目录',
   'Please enter a function name': '请输入函数名',
   'Package Name': '包名类名',
   'Please enter a Package name': '请输入包名类名',
@@ -431,9 +432,9 @@ export default {
   'Waiting Dependent complete': '等待依赖完成',
   'Waiting Dependent start': '等待依赖启动',
   'Check interval': '检查间隔',
+  'Timeout must be longer than check interval': '超时时间必须比检查间隔长',
   'Timeout strategy must be selected': '超时策略必须选一个',
   'Timeout must be a positive integer': '超时时长必须为正整数',
-  'Timeout must be longer than check interval': '超时时间必须比检查间隔长',
   'Add dependency': '添加依赖',
   and: '且',
   or: '或',
@@ -443,8 +444,6 @@ export default {
   hour: '时',
   Running: '正在运行',
   'Waiting for dependency to complete': '等待依赖完成',
-  'Delay execution': '延时执行',
-  'Forced success': '强制成功过',
   Selected: '已选',
   CurrentHour: '当前小时',
   Last1Hour: '前1小时',
@@ -521,7 +520,6 @@ export default {
   'Statement cannot be empty': '语句不能为空',
   'Process Define Count': '工作流定义数',
   'Process Instance Running Count': '正在运行的流程数',
-  'Please select a queue': '默认为租户关联队列',
   'command number of waiting for running': '待执行的命令数',
   'failure command number': '执行失败的命令数',
   'tasks number of waiting running': '待运行任务数',
@@ -537,11 +535,12 @@ export default {
   'Next five execution times': '接下来五次执行时间',
   'Execute time': '执行时间',
   'Complement range': '补数范围',
-  slot: 'slot数量',
-  taskManager: 'taskManager数量',
-  appName: 'Flink任务名称',
-  jobManagerMemory: 'jobManager内存数',
-  taskManagerMemory: 'taskManager内存数',
+  'Flink Version': 'Flink版本',
+  'Slot Number': 'Slot数量',
+  'TaskManager Number': 'TaskManager数量',
+  'JobManager Memory': 'JobManager内存数',
+  'TaskManager Memory': 'TaskManager内存数',
+  'App Name': '任务名称',
   'Http Url': '请求地址',
   'Http Method': '请求类型',
   'Http Parameters': '请求参数',
diff --git a/dolphinscheduler-ui/src/sass/common/index.scss b/dolphinscheduler-ui/src/sass/common/index.scss
index 02f8d6bcb1..28c146c662 100644
--- a/dolphinscheduler-ui/src/sass/common/index.scss
+++ b/dolphinscheduler-ui/src/sass/common/index.scss
@@ -206,7 +206,10 @@ button[disabled='disabled'] {
   border-radius: 3px;
 }
 
-
+.el-dialog__wrapper .el-dialog {
+  display: table;
+  width: auto;
+}
 
 
 article,aside,blockquote,body,button,code,dd,details,div,dl,dt,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,hr,input,legend,li,menu,nav,ol,p,pre,section,td,textarea,th,ul {
diff --git a/dolphinscheduler-ui/src/sass/conf/login/index.scss b/dolphinscheduler-ui/src/sass/conf/login/index.scss
index aef779ac30..9081c247e4 100644
--- a/dolphinscheduler-ui/src/sass/conf/login/index.scss
+++ b/dolphinscheduler-ui/src/sass/conf/login/index.scss
@@ -57,7 +57,7 @@ body {
         font-size: 50px;
       }
     }
-    .from-model {
+    .form-model {
       padding: 30px 40px 0 40px;
       .list {
         margin-bottom: 32px;