diff --git a/frontend/src/business/components/common/components/MsDialogFooter.vue b/frontend/src/business/components/common/components/MsDialogFooter.vue
index db7413f088..bcd271add2 100644
--- a/frontend/src/business/components/common/components/MsDialogFooter.vue
+++ b/frontend/src/business/components/common/components/MsDialogFooter.vue
@@ -2,7 +2,7 @@
 
     <div class="dialog-footer">
       <el-button @click="cancel">取 消</el-button>
-      <el-button type="primary" @click="confirm">确 定</el-button>
+      <el-button type="primary" @click="confirm" @keydown.enter.native.prevent>确 定</el-button>
     </div>
 
 </template>
diff --git a/frontend/src/business/components/project/MsProject.vue b/frontend/src/business/components/project/MsProject.vue
index 540944a9fa..5877d731f5 100644
--- a/frontend/src/business/components/project/MsProject.vue
+++ b/frontend/src/business/components/project/MsProject.vue
@@ -31,9 +31,9 @@
         </el-form>
         <template v-slot:footer>
           <div class="dialog-footer">
-            <el-button type="primary" @keydown.enter.native.prevent @click="submit('form')" size="medium">
-              {{$t('commons.save')}}
-            </el-button>
+            <ms-dialog-footer
+              @cancel="createVisible = false"
+              @confirm="submit('form')"/>
           </div>
         </template>
       </el-dialog>
@@ -48,10 +48,11 @@
   import MsTablePagination from "../common/pagination/TablePagination";
   import MsTableHeader from "../common/components/MsTableHeader";
   import MsTableOperator from "../common/components/MsTableOperator";
+  import MsDialogFooter from "../common/components/MsDialogFooter";
 
   export default {
     name: "MsProject",
-    components: {MsTableOperator, MsCreateBox, MsTablePagination, MsTableHeader},
+    components: {MsTableOperator, MsCreateBox, MsTablePagination, MsTableHeader, MsDialogFooter},
     data() {
       return {
         createVisible: false,
diff --git a/frontend/src/business/components/settings/organization/OrganizationMember.vue b/frontend/src/business/components/settings/organization/OrganizationMember.vue
index 17443d1d5b..cc2b830134 100644
--- a/frontend/src/business/components/settings/organization/OrganizationMember.vue
+++ b/frontend/src/business/components/settings/organization/OrganizationMember.vue
@@ -52,11 +52,9 @@
         </el-form-item>
       </el-form>
       <template v-slot:footer>
-        <span class="dialog-footer">
-          <el-button @click="submitForm('form')" @keydown.enter.native.prevent type="primary"
-                     size="medium">{{$t('commons.save')}}
-          </el-button>
-        </span>
+        <ms-dialog-footer
+          @cancel="createVisible = false"
+          @confirm="submitForm('form')"/>
       </template>
     </el-dialog>
 
@@ -87,11 +85,9 @@
         </el-form-item>
       </el-form>
       <template v-slot:footer>
-        <span class="dialog-footer">
-          <el-button @click="updateOrgMember('updateUserForm')" @keydown.enter.native.prevent type="primary"
-                     size="medium">{{$t('commons.save')}}
-          </el-button>
-        </span>
+        <ms-dialog-footer
+          @cancel="updateVisible = false"
+          @confirm="updateOrgMember('updateUserForm')"/>
       </template>
     </el-dialog>
   </div>
@@ -104,10 +100,11 @@
   import MsTableHeader from "../../common/components/MsTableHeader";
   import MsRolesTag from "../../common/components/MsRolesTag";
   import MsTableOperator from "../../common/components/MsTableOperator";
+  import MsDialogFooter from "../../common/components/MsDialogFooter";
 
   export default {
     name: "MsOrganizationMember",
-    components: {MsCreateBox, MsTablePagination, MsTableHeader, MsRolesTag, MsTableOperator},
+    components: {MsCreateBox, MsTablePagination, MsTableHeader, MsRolesTag, MsTableOperator, MsDialogFooter},
     created() {
       this.initTableData();
     },
diff --git a/frontend/src/business/components/settings/organization/OrganizationWorkspace.vue b/frontend/src/business/components/settings/organization/OrganizationWorkspace.vue
index 612d331dbd..24f9d4ca51 100644
--- a/frontend/src/business/components/settings/organization/OrganizationWorkspace.vue
+++ b/frontend/src/business/components/settings/organization/OrganizationWorkspace.vue
@@ -34,11 +34,9 @@
         </el-form-item>
       </el-form>
       <template v-slot:footer>
-        <span class="dialog-footer">
-          <el-button @click="submit('form')" @keydown.enter.native.prevent type="primary"
-                     size="medium">{{$t('commons.save')}}
-          </el-button>
-        </span>
+        <ms-dialog-footer
+          @cancel="dialogWsAddVisible = false"
+          @confirm="submit('form')"/>
       </template>
     </el-dialog>
 
@@ -99,11 +97,9 @@
         </el-form-item>
       </el-form>
       <template v-slot:footer>
-        <span class="dialog-footer">
-          <el-button @click="submitForm('form')" @keydown.enter.native.prevent type="primary"
-                     size="medium">{{$t('commons.save')}}
-          </el-button>
-        </span>
+        <ms-dialog-footer
+          @cancel="dialogWsMemberAddVisible = false"
+          @confirm="submitForm('form')"/>
       </template>
     </el-dialog>
 
@@ -137,11 +133,9 @@
         </el-form-item>
       </el-form>
       <template v-slot:footer>
-        <span class="dialog-footer">
-          <el-button @click="updateOrgMember('updateUserForm')" @keydown.enter.native.prevent type="primary"
-                     size="medium">{{$t('commons.save')}}
-          </el-button>
-        </span>
+        <ms-dialog-footer
+          @cancel="dialogWsMemberUpdateVisible = false"
+          @confirm="updateOrgMember('updateUserForm')"/>
       </template>
     </el-dialog>
 
@@ -156,10 +150,11 @@
   import MsTableHeader from "../../common/components/MsTableHeader";
   import MsRolesTag from "../../common/components/MsRolesTag";
   import MsTableOperator from "../../common/components/MsTableOperator";
+  import MsDialogFooter from "../../common/components/MsDialogFooter";
 
   export default {
     name: "MsOrganizationWorkspace",
-    components: {MsCreateBox, MsTablePagination, MsTableHeader, MsRolesTag, MsTableOperator},
+    components: {MsCreateBox, MsTablePagination, MsTableHeader, MsRolesTag, MsTableOperator, MsDialogFooter},
     mounted() {
       this.list();
     },
diff --git a/frontend/src/business/components/settings/personal/PersonSetting.vue b/frontend/src/business/components/settings/personal/PersonSetting.vue
index bf35935bc4..62df4fb731 100644
--- a/frontend/src/business/components/settings/personal/PersonSetting.vue
+++ b/frontend/src/business/components/settings/personal/PersonSetting.vue
@@ -45,11 +45,9 @@
           </el-form-item>
         </el-form>
         <template v-slot:footer>
-          <span class="dialog-footer">
-            <el-button @click="updateUser('updateUserForm')" @keydown.enter.native.prevent type="primary"
-                       size="medium">{{$t('commons.save')}}
-            </el-button>
-          </span>
+          <ms-dialog-footer
+            @cancel="updateVisible = false"
+            @confirm="updateUser('updateUserForm')"/>
         </template>
       </el-dialog>
 
@@ -59,6 +57,7 @@
 
 <script>
   import {TokenKey} from "../../../../common/js/constants";
+  import MsDialogFooter from "../../common/components/MsDialogFooter";
 
   export default {
     data() {
@@ -100,6 +99,7 @@
       }
     },
     name: "MsPersonSetting",
+    components: {MsDialogFooter},
     created() {
       this.initTableData();
     },
diff --git a/frontend/src/business/components/settings/system/Organization.vue b/frontend/src/business/components/settings/system/Organization.vue
index ef7944015a..6d280cbd4b 100644
--- a/frontend/src/business/components/settings/system/Organization.vue
+++ b/frontend/src/business/components/settings/system/Organization.vue
@@ -65,11 +65,9 @@
         </el-form-item>
       </el-form>
       <template v-slot:footer>
-        <span class="dialog-footer">
-          <el-button @click="createOrganization('createOrganization')" @keydown.enter.native.prevent type="primary"
-                     size="medium">{{$t('commons.save')}}
-          </el-button>
-        </span>
+        <ms-dialog-footer
+          @cancel="dialogOrgAddVisible = false"
+          @confirm="createOrganization('createOrganization')"/>
       </template>
     </el-dialog>
 
@@ -87,11 +85,9 @@
         </el-form-item>
       </el-form>
       <template v-slot:footer>
-        <span class="dialog-footer">
-          <el-button @click="updateOrganization('updateOrganizationForm')" @keydown.enter.native.prevent type="primary"
-                     size="medium">{{$t('organization.modify')}}
-          </el-button>
-        </span>
+        <ms-dialog-footer
+          @cancel="dialogOrgUpdateVisible = false"
+          @confirm="updateOrganization('updateOrganizationForm')"/>
       </template>
     </el-dialog>
 
@@ -127,11 +123,9 @@
         </el-form-item>
       </el-form>
       <template v-slot:footer>
-        <span class="dialog-footer">
-          <el-button @click="submitForm('form')" @keydown.enter.native.prevent type="primary"
-                     size="medium">{{$t('commons.save')}}
-          </el-button>
-        </span>
+        <ms-dialog-footer
+          @cancel="dialogOrgMemberAddVisible = false"
+          @confirm="submitForm('form')"/>
       </template>
     </el-dialog>
 
@@ -165,11 +159,9 @@
         </el-form-item>
       </el-form>
       <template v-slot:footer>
-        <span class="dialog-footer">
-          <el-button @click="updateOrgMember('updateUserForm')" @keydown.enter.native.prevent type="primary"
-                     size="medium">{{$t('commons.save')}}
-          </el-button>
-        </span>
+        <ms-dialog-footer
+          @cancel="dialogOrgMemberUpdateVisible = false"
+          @confirm="updateOrgMember('updateUserForm')"/>
       </template>
     </el-dialog>
 
@@ -182,10 +174,11 @@
   import MsTableHeader from "../../common/components/MsTableHeader";
   import MsRolesTag from "../../common/components/MsRolesTag";
   import MsTableOperator from "../../common/components/MsTableOperator";
+  import MsDialogFooter from "../../common/components/MsDialogFooter";
 
   export default {
     name: "MsOrganization",
-    components: {MsCreateBox, MsTablePagination, MsTableHeader, MsRolesTag, MsTableOperator},
+    components: {MsCreateBox, MsTablePagination, MsTableHeader, MsRolesTag, MsTableOperator, MsDialogFooter},
     data() {
       return {
         queryPath: '/organization/list',
diff --git a/frontend/src/business/components/settings/system/SystemWorkspace.vue b/frontend/src/business/components/settings/system/SystemWorkspace.vue
index b6da351f7f..ba25e3dac7 100644
--- a/frontend/src/business/components/settings/system/SystemWorkspace.vue
+++ b/frontend/src/business/components/settings/system/SystemWorkspace.vue
@@ -49,9 +49,9 @@
         </el-form-item>
       </el-form>
       <template v-slot:footer>
-        <span class="dialog-footer">
-          <el-button type="primary" @keydown.enter.native.prevent @click="submit('form')" size="medium">{{$t('commons.save')}}</el-button>
-        </span>
+        <ms-dialog-footer
+          @cancel="dialogWsAddVisible = false"
+          @confirm="submit('form')"/>
       </template>
     </el-dialog>
 
@@ -77,10 +77,9 @@
         </el-form-item>
       </el-form>
       <template v-slot:footer>
-        <span class="dialog-footer">
-          <el-button type="primary" @click="updateWorkspace('updateForm')" @keydown.enter.native.prevent
-                     size="medium">{{$t('commons.save')}}</el-button>
-        </span>
+        <ms-dialog-footer
+          @cancel="dialogWsUpdateVisible = false"
+          @confirm="updateWorkspace('updateForm')"/>
       </template>
 
     </el-dialog>
@@ -142,11 +141,9 @@
         </el-form-item>
       </el-form>
       <template v-slot:footer>
-        <span class="dialog-footer">
-          <el-button type="primary" @keydown.enter.native.prevent @click="submitForm('form')" size="medium">
-            {{$t('commons.save')}}
-          </el-button>
-        </span>
+        <ms-dialog-footer
+          @cancel="dialogWsMemberAddVisible = false"
+          @confirm="submitForm('form')"/>
       </template>
     </el-dialog>
 
@@ -180,11 +177,9 @@
         </el-form-item>
       </el-form>
       <template v-slot:footer>
-        <span class="dialog-footer">
-          <el-button type="primary" @click="updateWorkspaceMember('updateUserForm')" @keydown.enter.native.prevent
-                     size="medium">{{$t('commons.save')}}
-          </el-button>
-        </span>
+        <ms-dialog-footer
+          @cancel="dialogWsMemberUpdateVisible = false"
+          @confirm="updateWorkspaceMember('updateUserForm')"/>
       </template>
 
     </el-dialog>
@@ -199,10 +194,11 @@
   import MsTableHeader from "../../common/components/MsTableHeader";
   import MsRolesTag from "../../common/components/MsRolesTag";
   import MsTableOperator from "../../common/components/MsTableOperator";
+  import MsDialogFooter from "../../common/components/MsDialogFooter";
 
   export default {
     name: "MsSystemWorkspace",
-    components: {MsCreateBox, MsTablePagination, MsTableHeader, MsRolesTag, MsTableOperator},
+    components: {MsCreateBox, MsTablePagination, MsTableHeader, MsRolesTag, MsTableOperator, MsDialogFooter},
     mounted() {
       this.list();
     },
diff --git a/frontend/src/business/components/settings/system/TestResourcePool.vue b/frontend/src/business/components/settings/system/TestResourcePool.vue
index 05a8cd4630..dc6fcef847 100644
--- a/frontend/src/business/components/settings/system/TestResourcePool.vue
+++ b/frontend/src/business/components/settings/system/TestResourcePool.vue
@@ -68,64 +68,64 @@
         </el-form-item>
         <div v-for="(item,index) in infoList " :key="index">
           <div class="node-line" v-if="form.type === 'K8S'">
-            <div class="k8s-master">
-              <el-col :span="11">
-
+            <el-row>
+              <el-col :span="9">
+                <el-form-item prop="masterUrl" label="Master URL">
+                  <el-input v-model="item.masterUrl" autocomplete="off"/>
+                </el-form-item>
               </el-col>
-              <el-form-item prop="masterUrl" label="Master URL">
-                <el-input v-model="item.masterUrl" autocomplete="off"/>
-              </el-form-item>
-            </div>
-            <div class="k8s-token">
-              <el-form-item prop="token" label="Token">
-                <el-input v-model="item.token" show-password autocomplete="off"/>
-              </el-form-item>
-            </div>
-            <div style="width: 30%;float: left">
-              <el-form-item prop="maxConcurrency" :label="$t('test_resource_pool.max_threads')">
-                <el-input-number v-model="item.maxConcurrency" :min="1" :max="9999"></el-input-number>
-              </el-form-item>
-            </div>
+              <el-col :span="9">
+                <el-form-item prop="password" label="Token" style="padding-left: 20px">
+                  <el-input v-model="item.token" show-password autocomplete="off"/>
+                </el-form-item>
+              </el-col>
+              <el-col :span="6">
+                <el-form-item prop="maxConcurrency" :label="$t('test_resource_pool.max_threads')"
+                              style="padding-left: 20px">
+                  <el-input-number v-model="item.maxConcurrency" :min="1" :max="9999"></el-input-number>
+                </el-form-item>
+              </el-col>
+            </el-row>
           </div>
           <div class="node-line" v-if="form.type === 'NODE'">
-            <div style="width: 30%;float: left">
-              <el-form-item prop="ip" label="IP">
-                <el-input v-model="item.ip" autocomplete="off"/>
-              </el-form-item>
-            </div>
-            <div style="width: 30%;float: left">
-              <el-form-item prop="port" label="Port">
-                <el-input-number v-model="item.port" :min="1" :max="9999"></el-input-number>
-              </el-form-item>
-            </div>
-            <div style="width: 30%;float: left">
-              <el-form-item prop="maxConcurrency" :label="$t('test_resource_pool.max_threads')">
-                <el-input-number v-model="item.maxConcurrency" :min="1" :max="9999"></el-input-number>
-              </el-form-item>
-            </div>
-            <div class="op">
+            <el-row>
+              <el-col :span="8">
+                <el-form-item prop="ip" label="IP">
+                  <el-input v-model="item.ip" autocomplete="off"/>
+                </el-form-item>
+              </el-col>
+              <el-col :span="6">
+                <el-form-item prop="port" label="Port" style="padding-left: 20px">
+                  <el-input-number v-model="item.port" :min="1" :max="9999"></el-input-number>
+                </el-form-item>
+              </el-col>
+              <el-col :span="6">
+                <el-form-item prop="maxConcurrency" :label="$t('test_resource_pool.max_threads')"
+                              style="padding-left: 20px">
+                  <el-input-number v-model="item.maxConcurrency" :min="1" :max="9999"></el-input-number>
+                </el-form-item>
+              </el-col>
+              <el-col :span="4">
                 <span class="box">
                     <el-button @click="addResourceInfo()" type="primary" size="mini" circle>
                         <font-awesome-icon :icon="['fas', 'plus']"/>
                     </el-button>
                 </span>
-              <span class="box">
+                <span class="box">
                     <el-button @click="removeResourceInfo(index)" type="primary" size="mini" circle>
                         <font-awesome-icon :icon="['fas', 'minus']"/>
                     </el-button>
                 </span>
-            </div>
+              </el-col>
+            </el-row>
           </div>
         </div>
 
       </el-form>
       <template v-slot:footer>
-        <span class="dialog-footer">
-          <el-button @click="createTestResourcePool('createTestResourcePoolForm')" @keydown.enter.native.prevent
-                     type="primary"
-                     size="medium">{{$t('commons.create')}}
-          </el-button>
-        </span>
+        <ms-dialog-footer
+          @cancel="createVisible = false"
+          @confirm="createTestResourcePool('createTestResourcePoolForm')"/>
       </template>
     </el-dialog>
 
@@ -151,62 +151,63 @@
         </el-form-item>
         <div v-for="(item,index) in infoList " :key="index">
           <div class="node-line" v-if="form.type === 'K8S'">
-            <div class="k8s-master">
-              <el-form-item prop="masterUrl" label="Master URL">
-                <el-input v-model="item.masterUrl" autocomplete="off"/>
-              </el-form-item>
-            </div>
-            <div class="k8s-token">
-              <el-form-item prop="password" label="Token" style="padding-left: 20px">
-                <el-input v-model="item.token" show-password autocomplete="off"/>
-              </el-form-item>
-            </div>
-            <div style="width: 30%;float: left">
-              <el-form-item prop="maxConcurrency" :label="$t('test_resource_pool.max_threads')"
-                            style="padding-left: 20px">
-                <el-input-number v-model="item.maxConcurrency" :min="1" :max="9999"></el-input-number>
-              </el-form-item>
-            </div>
+            <el-row>
+              <el-col :span="9">
+                <el-form-item prop="masterUrl" label="Master URL">
+                  <el-input v-model="item.masterUrl" autocomplete="off"/>
+                </el-form-item>
+              </el-col>
+              <el-col :span="9">
+                <el-form-item prop="password" label="Token" style="padding-left: 20px">
+                  <el-input v-model="item.token" show-password autocomplete="off"/>
+                </el-form-item>
+              </el-col>
+              <el-col :span="6">
+                <el-form-item prop="maxConcurrency" :label="$t('test_resource_pool.max_threads')"
+                              style="padding-left: 20px">
+                  <el-input-number v-model="item.maxConcurrency" :min="1" :max="9999"></el-input-number>
+                </el-form-item>
+              </el-col>
+            </el-row>
           </div>
           <div class="node-line" v-if="form.type === 'NODE'">
-            <div style="width: 30%;float: left">
-              <el-form-item prop="ip" label="IP">
-                <el-input v-model="item.ip" autocomplete="off"/>
-              </el-form-item>
-            </div>
-            <div style="width: 30%;float: left">
-              <el-form-item prop="port" label="Port" style="padding-left: 20px">
-                <el-input-number v-model="item.port" :min="1" :max="9999"></el-input-number>
-              </el-form-item>
-            </div>
-            <div style="width: 30%;float: left">
-              <el-form-item prop="maxConcurrency" :label="$t('test_resource_pool.max_threads')"
-                            style="padding-left: 20px">
-                <el-input-number v-model="item.maxConcurrency" :min="1" :max="9999"></el-input-number>
-              </el-form-item>
-            </div>
-            <div class="op">
+            <el-row>
+              <el-col :span="8">
+                <el-form-item prop="ip" label="IP">
+                  <el-input v-model="item.ip" autocomplete="off"/>
+                </el-form-item>
+              </el-col>
+              <el-col :span="6">
+                <el-form-item prop="port" label="Port" style="padding-left: 20px">
+                  <el-input-number v-model="item.port" :min="1" :max="9999"></el-input-number>
+                </el-form-item>
+              </el-col>
+              <el-col :span="6">
+                <el-form-item prop="maxConcurrency" :label="$t('test_resource_pool.max_threads')"
+                              style="padding-left: 20px">
+                  <el-input-number v-model="item.maxConcurrency" :min="1" :max="9999"></el-input-number>
+                </el-form-item>
+              </el-col>
+              <el-col :span="4">
                 <span class="box">
                     <el-button @click="addResourceInfo()" type="primary" size="mini" circle>
                         <font-awesome-icon :icon="['fas', 'plus']"/>
                     </el-button>
                 </span>
-              <span class="box">
+                <span class="box">
                     <el-button @click="removeResourceInfo(index)" type="primary" size="mini" circle>
                         <font-awesome-icon :icon="['fas', 'minus']"/>
                     </el-button>
                 </span>
-            </div>
+              </el-col>
+            </el-row>
           </div>
         </div>
       </el-form>
       <template v-slot:footer>
-        <span class="dialog-footer">
-          <el-button @click="updateTestResourcePool('updateTestResourcePoolForm')" @keydown.enter.native.prevent
-                     type="primary"
-                     size="medium">{{$t('commons.save')}}
-          </el-button>
-        </span>
+        <ms-dialog-footer
+          @cancel="updateVisible = false"
+          @confirm="updateTestResourcePool('updateTestResourcePoolForm')"/>
       </template>
     </el-dialog>
 
@@ -218,10 +219,11 @@
   import MsTablePagination from "../../common/pagination/TablePagination";
   import MsTableHeader from "../../common/components/MsTableHeader";
   import MsTableOperator from "../../common/components/MsTableOperator";
+  import MsDialogFooter from "../../common/components/MsDialogFooter";
 
   export default {
     name: "MsTestResourcePool",
-    components: {MsCreateBox, MsTablePagination, MsTableHeader, MsTableOperator},
+    components: {MsCreateBox, MsTablePagination, MsTableHeader, MsTableOperator, MsDialogFooter},
     data() {
       return {
         result: {},
@@ -429,30 +431,8 @@
 
 <style scoped>
 
-  .op {
-    float: left;
-    width: 10%;
-  }
-
   .box {
     padding-left: 5px;
   }
 
-  .k8s-master {
-    width: 34%;
-    float: left
-  }
-
-  .k8s-token {
-    width: 36%;
-    float: left
-  }
-
-  .k8s-token .el-form-item__label {
-    padding-left: 20px;
-  }
-
-  .node-line {
-    clear: both;
-  }
 </style>
diff --git a/frontend/src/business/components/settings/system/User.vue b/frontend/src/business/components/settings/system/User.vue
index dbdfb58de8..f4149dfab1 100644
--- a/frontend/src/business/components/settings/system/User.vue
+++ b/frontend/src/business/components/settings/system/User.vue
@@ -57,10 +57,9 @@
         </el-form-item>
       </el-form>
       <template v-slot:footer>
-        <span class="dialog-footer">
-          <el-button @click="createUser('createUserForm')" @keydown.enter.native.prevent type="primary"
-                     size="medium">{{$t('commons.save')}}</el-button>
-        </span>
+        <ms-dialog-footer
+          @cancel="createVisible = false"
+          @confirm="createUser('createUserForm')"/>
       </template>
     </el-dialog>
 
@@ -81,11 +80,9 @@
         </el-form-item>
       </el-form>
       <template v-slot:footer>
-        <span class="dialog-footer">
-          <el-button @click="updateUser('updateUserForm')" @keydown.enter.native.prevent type="primary"
-                     size="medium">{{$t('commons.save')}}
-          </el-button>
-        </span>
+        <ms-dialog-footer
+          @cancel="updateVisible = false"
+          @confirm="updateUser('updateUserForm')"/>
       </template>
     </el-dialog>
 
@@ -97,10 +94,11 @@
   import MsTablePagination from "../../common/pagination/TablePagination";
   import MsTableHeader from "../../common/components/MsTableHeader";
   import MsTableOperator from "../../common/components/MsTableOperator";
+  import MsDialogFooter from "../../common/components/MsDialogFooter";
 
   export default {
     name: "MsUser",
-    components: {MsCreateBox, MsTablePagination, MsTableHeader, MsTableOperator},
+    components: {MsCreateBox, MsTablePagination, MsTableHeader, MsTableOperator, MsDialogFooter},
     data() {
       return {
         queryPath: '/user/special/list',
diff --git a/frontend/src/business/components/settings/workspace/WorkspaceMember.vue b/frontend/src/business/components/settings/workspace/WorkspaceMember.vue
index 621f2fd1a3..302e0272a1 100644
--- a/frontend/src/business/components/settings/workspace/WorkspaceMember.vue
+++ b/frontend/src/business/components/settings/workspace/WorkspaceMember.vue
@@ -53,11 +53,9 @@
         </el-form-item>
       </el-form>
       <template v-slot:footer>
-        <span class="dialog-footer">
-          <el-button @click="submitForm('form')" @keydown.enter.native.prevent type="primary"
-                     size="medium">{{$t('commons.save')}}
-          </el-button>
-        </span>
+        <ms-dialog-footer
+          @cancel="createVisible = false"
+          @confirm="submitForm('form')"/>
       </template>
     </el-dialog>
 
@@ -88,11 +86,9 @@
         </el-form-item>
       </el-form>
       <template v-slot:footer>
-        <span class="dialog-footer">
-          <el-button @click="updateWorkspaceMember('updateUserForm')" @keydown.enter.native.prevent type="primary"
-                     size="medium">{{$t('commons.save')}}
-          </el-button>
-        </span>
+        <ms-dialog-footer
+          @cancel="updateVisible = false"
+          @confirm="updateWorkspaceMember('updateUserForm')"/>
       </template>
     </el-dialog>
 
@@ -106,10 +102,11 @@
   import MsTableHeader from "../../common/components/MsTableHeader";
   import MsRolesTag from "../../common/components/MsRolesTag";
   import MsTableOperator from "../../common/components/MsTableOperator";
+  import MsDialogFooter from "../../common/components/MsDialogFooter";
 
   export default {
     name: "MsMember",
-    components: {MsCreateBox, MsTablePagination, MsTableHeader, MsRolesTag, MsTableOperator},
+    components: {MsCreateBox, MsTablePagination, MsTableHeader, MsRolesTag, MsTableOperator, MsDialogFooter},
     data() {
       return {
         result: {},