From 77c336b7a7d747f788f144c75c5f8655eb2f2417 Mon Sep 17 00:00:00 2001
From: zhangyu <zhangyu@geedgenetworks.com>
Date: Thu, 15 Oct 2020 14:27:46 +0800
Subject: [PATCH] =?UTF-8?q?featL=E4=BF=AE=E6=94=B9=E6=89=80=E6=9C=89?=
 =?UTF-8?q?=E4=BE=A7=E6=BB=91=E6=A1=86=E7=9A=84=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 nezha-fronted/src/assets/stylus/main.scss     | 30 +++++++-
 .../src/components/common/project/addLine.vue | 69 ++++++++++++-------
 .../src/components/common/project/addNode.vue | 52 ++++++++------
 .../components/common/rightBox/accountBox.vue |  6 +-
 .../common/rightBox/alertConfigBox.vue        | 20 +++---
 .../components/common/rightBox/assetBox.vue   | 30 ++++----
 .../components/common/rightBox/cabinetBox.vue |  4 +-
 .../src/components/common/rightBox/dcBox.vue  |  4 +-
 .../common/rightBox/editEndpointBox.vue       | 10 +--
 .../src/components/common/rightBox/mibBox.vue |  4 +-
 .../components/common/rightBox/modelBox.vue   |  4 +-
 .../components/common/rightBox/moduleBox.vue  | 49 ++++++-------
 .../components/common/rightBox/panelBox.vue   |  4 +-
 .../components/common/rightBox/projectBox.vue |  4 +-
 .../common/rightBox/promServerBox.vue         |  6 +-
 .../trafficSetting/trafficSettingBox.vue      |  2 +-
 .../trafficSetting/trafficSettingTab.vue      | 31 ++++++---
 .../components/page/asset/accountConfig.vue   |  2 +-
 .../components/page/dashboard/chartBox.vue    | 14 +++-
 19 files changed, 211 insertions(+), 134 deletions(-)

diff --git a/nezha-fronted/src/assets/stylus/main.scss b/nezha-fronted/src/assets/stylus/main.scss
index 94dc05e0c..1a38eb4d8 100644
--- a/nezha-fronted/src/assets/stylus/main.scss
+++ b/nezha-fronted/src/assets/stylus/main.scss
@@ -2192,9 +2192,35 @@ li{
   width: 390px;
   margin-left: 0;
 }
-.right-box-form .add{
+.right-box .right-box-form-add,.right-box  .right-box-form-minus-box{
   background: rgba(250,144,28,.1);
+  padding:4px 6px;
+  border-radius: 4px;
+  cursor: pointer;
 }
-.right-box-form .add .nz-icon-create-square{
+.right-box .right-box-form-add .nz-icon-create-square{
   color: #FA901C;
+  cursor: pointer;
 }
+.right-box .right-box-form-add .nz-icon-plus{
+  color: #FA901C;
+  cursor: pointer;
+}
+.right-box  .right-box-form-minus-box .nz-icon-minus{
+  color: #FA901C;
+  cursor: pointer;
+}
+.right-box .right-box-form-delete .nz-btn-size-alien{
+  border: none;
+  border-radius: 6px 0 6px 6px;
+  padding-bottom: 8px;
+  padding-top: 3px;
+  height: 45px;
+}
+.right-box .right-box-form-delete .nz-btn-size-alien:hover{
+  background: #D8D7D7;
+}
+.right-box .right-box-form-delete .nz-icon-delete{
+
+}
+
diff --git a/nezha-fronted/src/components/common/project/addLine.vue b/nezha-fronted/src/components/common/project/addLine.vue
index 9a0610a5f..f8d5b2bb2 100644
--- a/nezha-fronted/src/components/common/project/addLine.vue
+++ b/nezha-fronted/src/components/common/project/addLine.vue
@@ -2,8 +2,8 @@
   <div class="mc" @click.self="clickOutside">
     <div class="right-box right-box-edit-endpoint">
       <!-- begin--顶部按钮-->
-      <div class="right-box-top-btns" v-if="lineData.id">
-        <button id="edit-ep-del" type="button" @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-style-light ">
+      <div class="right-box-top-btns right-box-form-delete" v-if="lineData.id">
+        <button id="edit-ep-del" type="button" @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien">
         <span class="right-box-top-btn-icon"><i class="nz-icon nz-icon-delete"></i></span>
         <span class="right-box-top-btn-txt">{{$t('overall.delete')}}</span>
         </button>
@@ -15,12 +15,12 @@
       <!-- end--标题-->
 
       <!-- begin--表单-->
-      <el-scrollbar class="right-box-form-box">
+      <el-scrollbar class="right-box-form-box" ref="scrollbar">
         <el-form class="right-box-form  right-box-form-left" ref="form" :model="form" label-width="120px" :rules="rules">
           <el-form-item :label="$t('project.topology.lineName')" prop="lineName" class="line-name">
             <el-input v-model="form.lineName"  size="small"></el-input>
           </el-form-item>
-          <el-row class="form-title">{{$t('project.topology.option')}}</el-row>
+          <div class="right-box-sub-title" style="margin-bottom: 20px">{{$t('project.topology.option')}}</div>
           <div class="line-option">
             <!--<el-form-item :label="$t('project.topology.width')" prop="width" class="line-width">-->
               <!--<el-input v-model="form.width"  size="small"></el-input>-->
@@ -173,12 +173,13 @@
               </el-select>
             </el-form-item>
           </div>
-          <div  class="right-box-sub-title">
+          <div  class="right-box-sub-title" style="margin-bottom: 20px">
             <span>{{$t('alert.config.expr')}}</span>
             <span class="float-right" @click="addExpression"><i style="font-size: 16px; cursor: pointer;" class="nz-icon nz-icon-create-square"></i></span>
           </div>
-          <el-row class="element-item expr" style="" v-for="index of promqlKeys.length" :key="'ele' + index">
-            <el-form-item  :rules="{required: true, message:$t('project.topology.requiredName'), trigger: 'blur'}" :prop="'name.' + (index-1)">
+          <el-row class="element-item expr form-row-item" style="" v-for="index of promqlKeys.length" :key="'ele' + index">
+            <span class="nz-icon-minus-medium nz-icon-minus-position" style="padding: 0 8px"><i class="nz-icon nz-icon-minus" @click="removeExpression(index-1)"></i></span>
+            <el-form-item  :rules="{required: true,message: '名称不能为空', trigger: 'blur'}" :prop="'name.' + (index-1)">
               <el-row>
                 <template>
                   <el-col class="expr-title" style="">
@@ -191,7 +192,6 @@
                       size="small"
                     ></el-input>
                   </el-col>
-                  <el-col  style="width: 20px"> <i class="nz-icon nz-icon-minus" @click="removeExpression(index-1)"></i></el-col>
                 </template>
               </el-row>
             </el-form-item>
@@ -208,25 +208,27 @@
                 ></el-cascader>
               </el-col>
             </el-row>
-            <promql-input
-              :ref="'promql-'+(index-1)"
-              :id="promqlKeys[index-1]"
-              :key="promqlKeys[index-1]"
-              :expression-list="expressions"
-              :index="index-1"
-              :styleType="2"
-              :plugins="['metric-selector', 'metric-input', 'remove']"
-              @change="expressionChange"
-              @removeExpression="removeExpression"
-              :showRemove="false"
-              :projectRightBox="true"
-            ></promql-input>
+            <div>
+              <promql-input
+                :ref="'promql-'+(index-1)"
+                :id="promqlKeys[index-1]"
+                :key="promqlKeys[index-1]"
+                :expression-list="expressions"
+                :index="index-1"
+                :styleType="2"
+                :plugins="['metric-selector', 'metric-input', 'remove']"
+                @change="expressionChange"
+                @removeExpression="removeExpression"
+                :showRemove="false"
+                :projectRightBox="true"
+              ></promql-input>
+            </div>
             <el-row>
               <template>
                 <el-col class="expr-title">
                   {{$t('dashboard.panel.chartForm.legend')}}&nbsp;
                   <el-popover :content="$t('dashboard.panel.chartForm.legendTip')" placement="top" width="150" trigger="hover">
-                    <i slot="reference" class="nz-icon nz-icon-info-normal" style="font-size: 12px; -webkit-transform:scale(0.75);display:inline-block;" @mouseover="rz"></i>
+                    <i slot="reference" class="nz-icon nz-icon-info-normal" @mouseover="rz"></i>
                   </el-popover>
                 </el-col>
                 <el-col style="width: calc(100% - 120px);">
@@ -396,6 +398,9 @@
         this.promqlKeys.push(getUUID());
         this.elementIds.push("");
         this.promqlCount++;
+        this.$nextTick(() => {
+          this.$refs.scrollbar.update();
+        });
       },
       removeExpression(index) {
         if (this.promqlCount >= 1) {
@@ -414,6 +419,9 @@
             });
           });
         }
+        this.$nextTick(() => {
+          this.$refs.scrollbar.update();
+        });
       },
       /*关闭弹框*/
       esc(refresh) {
@@ -497,7 +505,7 @@
     margin: 0 5px;
   }
   .line-name{
-    width: calc(100% - 30px);
+    width: calc(100% - 70px);
   }
   .form-title{
     font-size: 14px;
@@ -527,7 +535,7 @@
     height: 100%;
   }
   .line-width /deep/ .el-input__prefix{
-    width: 100%;
+    width: calc(100% - 32px);
     display: flex;
     align-items: center;
   }
@@ -540,6 +548,7 @@
   .line-option{
     display: flex;
     flex-wrap: wrap;
+    margin-left: 70px;
   }
   .line-option > div{
     width: 50%;
@@ -585,6 +594,13 @@
     border-bottom: 1px dashed #dfe7f2;
     width: 100%;
   }
+  /deep/ .right-box-form  .element-item.form-row-item {
+    padding: 20px 20px 20px 0;
+    border: 1px dashed #dfe7f2;
+    width: calc(100% - 120px);
+    margin-left: 70px;
+    position: relative;
+  }
   .element-item.expr /deep/ .el-form-item__content{
     position: relative;
     margin-left: 0 !important;
@@ -604,8 +620,11 @@
     letter-spacing: 0;
     line-height: 22px;
   }
+  /deep/.promqlInput .expr-title{
+    padding-right: 0;
+  }
   .width-option{
-    width: 217px;
+    width: 190px;
     display: flex;
     align-items: center;
     justify-content: center;
diff --git a/nezha-fronted/src/components/common/project/addNode.vue b/nezha-fronted/src/components/common/project/addNode.vue
index 52c6cd167..119543da4 100644
--- a/nezha-fronted/src/components/common/project/addNode.vue
+++ b/nezha-fronted/src/components/common/project/addNode.vue
@@ -2,8 +2,8 @@
   <div class="mc" @click.self="clickOutside">
     <div class="right-box right-box-edit-endpoint">
     <!-- begin--顶部按钮-->
-    <div class="right-box-top-btns" v-if="nodeData.id">
-      <button id="edit-ep-del" type="button" @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-style-light ">
+    <div class="right-box-top-btns right-box-form-delete" v-if="nodeData.id">
+      <button id="edit-ep-del" type="button" @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien">
         <span class="right-box-top-btn-icon"><i class="nz-icon nz-icon-delete"></i></span>
         <span class="right-box-top-btn-txt">{{$t('overall.delete')}}</span>
       </button>
@@ -18,7 +18,7 @@
     <!-- end--标题-->
 
     <!-- begin--表单-->
-    <el-scrollbar class="right-box-form-box">
+    <el-scrollbar class="right-box-form-box" ref="scrollbar">
       <el-form class="right-box-form  right-box-form-left" ref="form" :model="form" label-width="160px" :rules="rules">
         <el-form-item label="Module Name" prop="moduleId">
           <el-select v-model="form.moduleId" placeholder=""  popper-class="asset-dropdown" size="small">
@@ -59,11 +59,12 @@
             {{$t('project.topology.upload')}}
           </el-upload>
         </el-form-item>
-        <div  class="right-box-sub-title">
+        <div  class="right-box-sub-title" style="padding-bottom: 8px;margin-bottom: 20px">
           <span>{{$t('alert.config.expr')}}</span>
           <span class="float-right" @click="addExpression"><i style="font-size: 16px; cursor: pointer;" class="nz-icon nz-icon-create-square"></i></span>
         </div>
-        <el-row class="element-item expr" style="" v-for="index of promqlKeys.length" :key="'ele' + index">
+        <el-row class="element-item expr form-row-item" style="" v-for="index of promqlKeys.length" :key="'ele' + index">
+          <span class="nz-icon-minus-medium nz-icon-minus-position" style="padding: 0 8px"><i class="nz-icon nz-icon-minus" @click="removeExpression(index-1)"></i></span>
           <el-form-item  :rules="{required: true,message: '名称不能为空', trigger: 'blur'}" :prop="'name.' + (index-1)">
             <el-row>
               <template>
@@ -77,7 +78,6 @@
                     size="small"
                   ></el-input>
                 </el-col>
-                <el-col  style="width: 20px"> <i class="nz-icon nz-icon-minus" @click="removeExpression(index-1)"></i></el-col>
               </template>
             </el-row>
           </el-form-item>
@@ -94,25 +94,27 @@
               ></el-cascader>
             </el-col>
           </el-row>
-          <promql-input
-            :ref="'promql-'+(index-1)"
-            :id="promqlKeys[index-1]"
-            :key="promqlKeys[index-1]"
-            :expression-list="expressions"
-            :index="index-1"
-            :styleType="2"
-            :plugins="['metric-selector', 'metric-input', 'remove']"
-            @change="expressionChange"
-            @removeExpression="removeExpression"
-            :showRemove="false"
-            :projectRightBox="true"
-          ></promql-input>
+          <div>
+            <promql-input
+              :ref="'promql-'+(index-1)"
+              :id="promqlKeys[index-1]"
+              :key="promqlKeys[index-1]"
+              :expression-list="expressions"
+              :index="index-1"
+              :styleType="2"
+              :plugins="['metric-selector', 'metric-input', 'remove']"
+              @change="expressionChange"
+              @removeExpression="removeExpression"
+              :showRemove="false"
+              :projectRightBox="true"
+            ></promql-input>
+          </div>
           <el-row>
             <template>
               <el-col class="expr-title">
                 {{$t('dashboard.panel.chartForm.legend')}}&nbsp;
                 <el-popover :content="$t('dashboard.panel.chartForm.legendTip')" placement="top" width="150" trigger="hover">
-                  <i slot="reference" class="nz-icon nz-icon-info-normal" style="font-size: 12px; -webkit-transform:scale(0.75);display:inline-block;" @mouseover="rz"></i>
+                  <i slot="reference" class="nz-icon nz-icon-info-normal" @mouseover="rz"></i>
                 </el-popover>
               </el-col>
               <el-col style="width: calc(100% - 120px);">
@@ -304,6 +306,9 @@
         this.promqlKeys.push(getUUID());
         this.elementIds.push("");
         this.promqlCount++;
+        this.$nextTick(() => {
+          this.$refs.scrollbar.update();
+        });
       },
       removeExpression(index) {
         if (this.promqlCount >= 1) {
@@ -322,6 +327,9 @@
             });
           });
         }
+        this.$nextTick(() => {
+          this.$refs.scrollbar.update();
+        });
       },
       /*关闭弹框*/
       esc(refresh) {
@@ -390,7 +398,6 @@
   }
   .nz-icon-minus{
     vertical-align: middle;
-    margin-left: 5px;
   }
   .sel-image{
     height: 28px;
@@ -446,6 +453,9 @@
     letter-spacing: 0;
     line-height: 22px;
   }
+  /deep/.promqlInput .expr-title{
+    padding-right: 0;
+  }
   /* begin--搜索框*/
   .endpoint-asset-search {
     display: inline-block;
diff --git a/nezha-fronted/src/components/common/rightBox/accountBox.vue b/nezha-fronted/src/components/common/rightBox/accountBox.vue
index 8900890f5..18ddb578f 100644
--- a/nezha-fronted/src/components/common/rightBox/accountBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/accountBox.vue
@@ -1,9 +1,9 @@
 <template>
   <div class="right-box right-box-account" v-clickoutside="clickOutside">
     <!-- begin--顶部按钮-->
-    <div class="right-box-top-btns">
+    <div class="right-box-top-btns right-box-form-delete">
       <button type="button" v-if="editUser.userId" @click="del"
-              class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-style-light"
+              class="nz-btn nz-btn-size-normal nz-btn-size-alien"
               id="account-edit-del">
         <span class="right-box-top-btn-icon"><i class="nz-icon nz-icon-delete"></i></span>
         <span class="right-box-top-btn-txt">{{$t('overall.delete')}}</span>
@@ -17,7 +17,7 @@
 
     <!-- begin--表单-->
     <el-scrollbar class="right-box-form-box">
-      <el-form class="right-box-form" :model="editUser" label-position="top" :rules="rules" ref="accountForm">
+      <el-form class="right-box-form right-box-form-left" :model="editUser" :rules="rules" ref="accountForm" label-position="right" label-width="120px">
         <!--username-->
         <el-form-item :label="$t('config.account.account')" prop="username">
           <el-input autocomplete="new-password" type="text" placeholder=""
diff --git a/nezha-fronted/src/components/common/rightBox/alertConfigBox.vue b/nezha-fronted/src/components/common/rightBox/alertConfigBox.vue
index 81bcc0f5c..25612539a 100644
--- a/nezha-fronted/src/components/common/rightBox/alertConfigBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/alertConfigBox.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="right-box right-box-alert-config" v-clickoutside="clickOutside">
     <!-- begin--顶部按钮-->
-    <div class="right-box-top-btns">
-      <button type="button" v-if="alertRule.id" id="alert-box-del" @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-style-light">
+    <div class="right-box-top-btns right-box-form-delete">
+      <button type="button" v-if="alertRule.id" id="alert-box-del" @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien">
         <span class="right-box-top-btn-icon"><i class="nz-icon nz-icon-delete"></i></span>
         <span class="right-box-top-btn-txt">{{$t('overall.delete')}}</span>
       </button>
@@ -20,13 +20,15 @@
         <el-form-item :label='$t("alert.config.name")' prop="alertName">
           <el-input placeholder="" maxlength="64" show-word-limit v-model="editAlertRule.alertName" size="small"></el-input>
         </el-form-item>
-        <promql-input
-          ref="promql"
-          :expression-list.sync="expressions"
-          :index="0"
-          :styleType="2"
-          :plugins="['metric-input']"
-        ></promql-input>
+        <div style="width: calc(100% - 70px);margin-left: 70px">
+          <promql-input
+            ref="promql"
+            :expression-list.sync="expressions"
+            :index="0"
+            :styleType="2"
+            :plugins="['metric-input']"
+          ></promql-input>
+        </div>
         <!--operator-->
         <el-form-item :label="$t('alert.config.operator')" prop="operator" style="width: 400px;display: inline-block;">
           <el-select popper-class="config-dropdown" v-model="editAlertRule.operator" placeholder=""  size="small">
diff --git a/nezha-fronted/src/components/common/rightBox/assetBox.vue b/nezha-fronted/src/components/common/rightBox/assetBox.vue
index e78a832f2..d09ca2d8a 100644
--- a/nezha-fronted/src/components/common/rightBox/assetBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/assetBox.vue
@@ -1,9 +1,9 @@
 <template>
   <div class="right-box right-box-asset" v-clickoutside="clickOutside">
     <!--顶部按钮-->
-    <div class="right-box-top-btns">
+    <div class="right-box-top-btns right-box-form-delete">
       <button v-if="editAsset.id" type="button" @click="del" id="asset-edit-del"
-              class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-style-light nz-btn-min-width-82">
+              class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-min-width-82">
         <span class="right-box-top-btn-icon"><i class="nz-icon nz-icon-delete"></i></span>
         <span class="right-box-top-btn-txt">{{$t('overall.delete')}}</span>
       </button>
@@ -33,7 +33,7 @@
           </div>
         </el-form-item>
         <div class="right-box-sub-title">{{$t('asset.assetInfo')}}</div>
-        <div class="line-100 right-box-line"></div>
+        <div class="right-box-line"></div>
         <!------------------------------------------资产类型---------------------------------------------->
         <el-form-item :label="$t('asset.assetType')" class="right-box-form-content" prop="model.type.code">
           <el-select popper-class="asset-dropdown" size="small" v-model="editAsset.model.type.code" @change="getVendorAndModelOptionData(editAsset.model.type.code,$event)">
@@ -61,7 +61,7 @@
             @change="modelChange"
           >
           </el-cascader>
-          <div class="right-box-row-btn" @click="addVendor(editAsset.model.type.code)"><i class="nz-icon nz-icon-plus"></i></div>
+          <span style="vertical-align: middle"  class="right-box-form-add" @click="addVendor(editAsset.model.type.code)"><i class="nz-icon nz-icon-plus"></i></span>
         </el-form-item>
         <el-form-item :label="$t('asset.purchaseDate')">
           <div class="select-style">
@@ -75,6 +75,9 @@
             </el-date-picker>
           </div>
         </el-form-item>
+        <el-form-item :label="$t('asset.location')" prop="locationInfo" :rules="[{validator:locationValidator, trigger:'blur'}]">
+          <location-cascader :disabled="editAsset.modelId ? false : true" :default-model-u-size="modelSize" @change="setLocationData" ref="locationCascader" :idc-option="dcData"></location-cascader>
+        </el-form-item>
         <!--tag-->
         <div class="right-box-sub-title">{{$t('overall.tag')}}
           <div class="right-box-form-btns">
@@ -85,7 +88,7 @@
             </span>
           </button>
         </div></div>
-        <div class="line-100 right-box-line"></div>
+        <div class="right-box-line"></div>
         <el-form-item>
           <template slot="label">
             <span></span>
@@ -104,31 +107,28 @@
                 <el-form-item class="tag-edit tag-edit-value" :rules="{required: true, message: $t('validate.required'), trigger: 'change'}" :prop="'tags.' + index + '.value'">
                   <el-autocomplete placeholder="value" size="mini" v-model="item.value" :fetch-suggestions="filterValue" popper-class="no-style-class"></el-autocomplete>
                 </el-form-item>
-                <div class="param-box-row-symbol" :id="'asset-tag-remove-'+index" @click.stop="removeTag(index)"><i class="nz-icon nz-icon-shanchu1"></i></div>
+                <div class="param-box-row-symbol" :id="'asset-tag-remove-'+index" @click.stop="removeTag(index)"><i class="nz-icon nz-icon-shanchu1" style="color: #666666"></i></div>
               </div>
             </el-scrollbar>
           </div>
         </el-form-item>
 
-        <div class="right-box-sub-title">{{$t('asset.location')}}</div>
-        <div class="line-100 right-box-line"></div>
+        <!--<div class="right-box-sub-title">{{$t('asset.location')}}</div>-->
+        <!--<div class="right-box-line"></div>-->
         <!------------------------------------------IDC---------------------------------------------->
-        <el-form-item :label="$t('asset.location')" prop="locationInfo" :rules="[{validator:locationValidator, trigger:'blur'}]">
-          <location-cascader :disabled="editAsset.modelId ? false : true" :default-model-u-size="modelSize" @change="setLocationData" ref="locationCascader" :idc-option="dcData"></location-cascader>
-        </el-form-item>
         <!--cli-->
         <div class="right-box-sub-title">{{$t('config.account.account')}}
           <el-popover placement="right" width="70" trigger="click" :disabled="editAsset.accounts.length == 3" v-model.sync="showAccountOp" popper-class="no-style-class">
             <button slot="reference" id="add-type" type="button" class="float-right" :class="{'nz-btn-disabled': editAsset.accounts.length == 3}">
-              <span><i style="font-size: 12px;" class="nz-icon nz-icon-create-square"></i></span>
+              <span><i class="nz-icon nz-icon-create-square"></i></span>
             </button>
             <ul class="el-select-dropdown__list">
               <li @click="addAccount(type)" v-for="(type, index) in selectableAccountTypes" :key="index" class="el-select-dropdown__item"><span>{{type}}</span></li>
             </ul>
           </el-popover>
         </div>
-        <div class="line-100 right-box-line"></div>
-        <div class="nz-tab" style="padding-left: 30px;">
+        <div class="right-box-line"></div>
+        <div class="nz-tab" style="padding-left: 70px;">
           <div class="nz-tab-item-box" v-for="(account, index) in editAsset.accounts" :key="index" @click="changeProtocolType(account.protocol)" :id="`account-login-type-${index}`">
             <div class="nz-tab-item" :class="{'nz-tab-item-active': accountType == account.protocol}" style="position: relative;">
               <span>{{account.protocol}}</span>
@@ -142,7 +142,7 @@
         <account-config-box v-for="(account,index) in editAsset.accounts" :account="account" v-show="account.protocol == accountType" :key="index" ref="accountConfigBox" @setValidateResult="setAccountValidResult" @protocol-type-change="protocolTypeChange"></account-config-box>
 
         <template v-if="accountType == 'SSH' && !editAsset.id">
-          <el-form-item :label="$t('asset.exporter')" class="exporter-label">
+          <el-form-item :label="$t('asset.exporter')" class="exporter-label" style="margin-left: 66px">
             <el-switch class="exporter-switch" v-model="editAsset.exporter" active-color="#ee9d3f" active-value="1" inactive-value="0" :show="!exporterDisableSwitch"></el-switch>
           </el-form-item>
         </template>
diff --git a/nezha-fronted/src/components/common/rightBox/cabinetBox.vue b/nezha-fronted/src/components/common/rightBox/cabinetBox.vue
index babdebc3c..f9d358937 100644
--- a/nezha-fronted/src/components/common/rightBox/cabinetBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/cabinetBox.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="right-box right-box-cabinet" v-clickoutside="clickOutside">
     <!-- begin--顶部按钮-->
-    <div class="right-box-top-btns">
-      <button id="cab-del" type="button" v-if="!editCabinet.id" @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-style-light ">
+    <div class="right-box-top-btns right-box-form-delete">
+      <button id="cab-del" type="button" v-if="!editCabinet.id" @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien">
         <span class="right-box-top-btn-icon"><i class="nz-icon nz-icon-delete"></i></span>
         <span class="right-box-top-btn-txt">{{$t('overall.delete')}}</span>
       </button>
diff --git a/nezha-fronted/src/components/common/rightBox/dcBox.vue b/nezha-fronted/src/components/common/rightBox/dcBox.vue
index eaf946cee..26384eb1f 100644
--- a/nezha-fronted/src/components/common/rightBox/dcBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/dcBox.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="right-box right-box-dc" v-clickoutside="clickOutside">
       <!-- begin--顶部按钮-->
-      <div class="right-box-top-btns">
-        <button id="dc-del" type="button" v-if="editDc.id" @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-style-light">
+    <div class="right-box-top-btns right-box-form-delete">
+        <button id="dc-del" type="button" v-if="editDc.id" @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien">
           <span class="right-box-top-btn-icon"><i class="nz-icon nz-icon-delete"></i></span>
           <span class="right-box-top-btn-txt">{{$t('overall.delete')}}</span>
         </button>
diff --git a/nezha-fronted/src/components/common/rightBox/editEndpointBox.vue b/nezha-fronted/src/components/common/rightBox/editEndpointBox.vue
index 1297fd482..f0f64eb21 100644
--- a/nezha-fronted/src/components/common/rightBox/editEndpointBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/editEndpointBox.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="right-box right-box-edit-endpoint" v-clickoutside="clickOutside">
     <!-- begin--顶部按钮-->
-    <div class="right-box-top-btns">
-      <button id="edit-ep-del" type="button" v-if="editEndpoint.id" @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-style-light ">
+    <div class="right-box-top-btns right-box-form-delete">
+      <button id="edit-ep-del" type="button" v-if="editEndpoint.id" @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien">
         <span class="right-box-top-btn-icon"><i class="nz-icon nz-icon-delete"></i></span>
         <span class="right-box-top-btn-txt">{{$t('overall.delete')}}</span>
       </button>
@@ -65,8 +65,8 @@
             <!--<button type="button" id="edit-clear-all" @click="clearAllParam" class="nz-btn nz-btn-size-normal nz-btn-style-light">-->
               <!--<span><i class="nz-icon nz-icon-delete"></i></span>-->
             <!--</button>-->
-            <span id="edit-add-param" @click="addParam" class="add">
-              <i style="font-size: 12px;" class="nz-icon nz-icon-create-square"></i>
+            <span id="edit-add-param" @click="addParam" class="right-box-form-add">
+              <i style="" class="nz-icon nz-icon-create-square"></i>
             </span>
           </div>
           <div class="param-box param-box-module">
@@ -79,7 +79,7 @@
                 <el-form-item class="param-box-row-value" :rules="{required: true, message: $t('validate.required'), trigger: 'blur'}" :prop="'paramObj.' + index + '.value'">
                   <el-input placeholder="value" size="mini" v-model="item.value"></el-input>
                 </el-form-item>
-                <span class="param-box-row-symbol" @click="removeParam(index)"><i class="nz-icon nz-icon-shanchu1"></i></span>
+                <span class="param-box-row-symbol" @click="removeParam(index)"><i class="nz-icon nz-icon-shanchu1" style="color: #666666"></i></span>
               </div>
             </el-scrollbar>
           </div>
diff --git a/nezha-fronted/src/components/common/rightBox/mibBox.vue b/nezha-fronted/src/components/common/rightBox/mibBox.vue
index f9efc5c7b..b20a213bb 100644
--- a/nezha-fronted/src/components/common/rightBox/mibBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/mibBox.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="right-box right-box-mib" v-clickoutside="clickOutside" >
     <!-- begin--顶部按钮-->
-    <div class="right-box-top-btns">
-      <button id="mib-del" type="button" v-if="editMib.id" @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-style-light">
+    <div class="right-box-top-btns right-box-form-delete">
+      <button id="mib-del" type="button" v-if="editMib.id" @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien">
         <span class="right-box-top-btn-icon"><i class="nz-icon nz-icon-delete"></i></span>
         <span class="right-box-top-btn-txt">{{$t('overall.delete')}}</span>
       </button>
diff --git a/nezha-fronted/src/components/common/rightBox/modelBox.vue b/nezha-fronted/src/components/common/rightBox/modelBox.vue
index 7cef0b755..b41897097 100644
--- a/nezha-fronted/src/components/common/rightBox/modelBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/modelBox.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="right-box right-box-model" v-clickoutside="clickOutside" @click="inputHandler">
     <!-- begin--顶部按钮-->
-    <div class="right-box-top-btns">
-      <button id="model-del" type="button" v-if="editModel.id" @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-style-light">
+    <div class="right-box-top-btns right-box-form-delete">
+      <button id="model-del" type="button" v-if="editModel.id" @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien">
         <span class="right-box-top-btn-icon"><i class="nz-icon nz-icon-delete"></i></span>
         <span class="right-box-top-btn-txt">{{$t('overall.delete')}}</span>
       </button>
diff --git a/nezha-fronted/src/components/common/rightBox/moduleBox.vue b/nezha-fronted/src/components/common/rightBox/moduleBox.vue
index a878da331..79f3b18ab 100644
--- a/nezha-fronted/src/components/common/rightBox/moduleBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/moduleBox.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="right-box right-box-module" v-clickoutside="clickOutside">
     <!-- begin--顶部按钮-->
-    <div class="right-box-top-btns">
-      <button id="module-del" type="button" v-if="editModule.id" @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-style-light">
+    <div class="right-box-top-btns right-box-form-delete">
+      <button id="module-del" type="button" v-if="editModule.id" @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien">
         <span class="right-box-top-btn-icon"><i class="nz-icon nz-icon-delete"></i></span>
         <span class="right-box-top-btn-txt">{{$t('overall.delete')}}</span>
       </button>
@@ -21,11 +21,11 @@
             <el-option :id="'module-project-'+item.id" v-for="item in projectList" :key="item.id" :label="item.name" :value="item"></el-option>
           </el-select>
         </el-form-item>
-        <el-form-item :label='$t("project.module.moduleName")' prop="name">
+        <el-form-item :label='$t("project.module.moduleName")' prop="name" label-width="180px" style="width: calc(100% - 8px);margin-left: 8px;">
           <el-input placeholder="" maxlength="64" show-word-limit v-model="editModule.name" size="small"></el-input>
         </el-form-item>
 
-        <div class="nz-tab module-box-type">
+        <div class="nz-tab module-box-type" style="margin-bottom: 15px;">
           <div class="nz-tab-item-box" @click="changeType('http')" id="module-type-1">
             <div class="nz-tab-item" :class="{'nz-tab-item-active' : editModule.type.toLowerCase() == 'http', 'unclickable': editModule.id}">HTTP</div>
           </div>
@@ -37,7 +37,7 @@
         <!-- snmp表单 -->
         <span class="snmp-form" v-if="editModule.type && editModule.type == 'snmp'">
           <div class="right-box-sub-title">SNMP settings</div>
-          <div class="line-100 right-box-line"></div>
+          <div class="right-box-line"></div>
 
           <el-row>
             <el-col :span="6">
@@ -118,10 +118,9 @@
           </el-row>
 
           <el-row>
-            <el-col :span="1">&nbsp;</el-col>
-            <el-col :span="23">
+            <el-col :span="24">
               <div class="right-box-sub-title">Auth</div>
-              <div class="line-100 right-box-line"></div>
+              <div class="right-box-line"></div>
             </el-col>
           </el-row>
 
@@ -227,9 +226,9 @@
           </el-row>
         </span>
 
-        <div class="right-box-form-tip">
+        <div class="right-box-form-tip" :style="{'margin-bottom': '15px','margin-left':editModule.type.toLowerCase()=='snmp'?'100px':'0'}">
           {{$t('project.module.tip.defaultEndpointSet')}}
-          <div class="line-100"></div>
+          <div></div>
           {{$t('project.module.tip.relation')}}
         </div>
 
@@ -241,19 +240,17 @@
           <el-input placeholder="" v-model="editModule.path" size="small"></el-input>
         </el-form-item>
 
-        <el-form-item class="right-box-form-param" v-if="editModule.type.toLowerCase() == 'http'">
-          <template slot="label">
-            <span>{{$t('project.endpoint.param')}}</span>
-            <div class="right-box-form-btns">
-              <button style="display: none;">第一个button会出现意料之外的hover样式，找不到原因，只好加个不可见的button规避问题</button>
-              <button id="module-clear-all" type="button" @click="clearAllParam" class="nz-btn nz-btn-size-normal nz-btn-style-light">
-                <span><i class="nz-icon nz-icon-delete"></i></span>
-              </button>
-              <button id="module-add-param" type="button" @click="addParam" class="nz-btn nz-btn-size-normal nz-btn-style-light">
-                <span><i style="font-size: 16px;" class="nz-icon nz-icon-create-square"></i></span>
-              </button>
-            </div>
-          </template>
+        <el-form-item :label="$t('project.endpoint.param')" class="right-box-form-param" v-if="editModule.type.toLowerCase() == 'http'">
+
+          <div style="text-align: right;margin-bottom: 5px">
+            <button style="display: none;">第一个button会出现意料之外的hover样式，找不到原因，只好加个不可见的button规避问题</button>
+            <!--<button id="module-clear-all" type="button" @click="clearAllParam" class="nz-btn nz-btn-size-normal nz-btn-style-light">-->
+            <!--<span><i class="nz-icon nz-icon-delete"></i></span>-->
+            <!--</button>-->
+            <span id="module-add-param" type="button" @click="addParam" class="right-box-form-add">
+              <span><i style="font-size: 16px;" class="nz-icon nz-icon-create-square"></i></span>
+            </span>
+          </div>
 
           <div class="param-box param-box-module">
             <el-scrollbar ref="paramBoxScrollbar" style="height: 100%">
@@ -265,7 +262,7 @@
                 <el-form-item class="param-box-row-value" :rules="{required: true, message: $t('validate.required'), trigger: 'blur'}" :prop="'paramObj.' + index + '.value'">
                   <el-input placeholder="value" size="mini" v-model="item.value"></el-input>
                 </el-form-item>
-                <span class="param-box-row-symbol" :id="'moduel-remove-param-'+index" @click="removeParam(index)"><i class="nz-icon nz-icon-shanchu1"></i></span>
+                <span class="param-box-row-symbol" :id="'moduel-remove-param-'+index" @click="removeParam(index)"><i class="nz-icon nz-icon-shanchu1" style="color:#666;"></i></span>
               </div>
             </el-scrollbar>
           </div>
@@ -690,6 +687,10 @@
   .right-box-module .el-cascader .el-input__inner {
     height: 150px;
   }
+  .right-box-form-tip{
+    color: #999999;
+    line-height: 21px;
+  }
 </style>
 <style>
   .sub-label {
diff --git a/nezha-fronted/src/components/common/rightBox/panelBox.vue b/nezha-fronted/src/components/common/rightBox/panelBox.vue
index 95af034a1..877ff080a 100644
--- a/nezha-fronted/src/components/common/rightBox/panelBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/panelBox.vue
@@ -2,8 +2,8 @@
   <transition name="right-box-580">
     <div class="right-box right-box-panel z-top" v-if="rightBox.show" v-clickoutside="clickos">
       <!-- begin--顶部按钮-->
-      <div class="right-box-top-btns">
-        <button type="button" v-if="panel.id != ''" @click="del(panel)" class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-style-light nz-btn-min-width-82">
+      <div class="right-box-top-btns right-box-form-delete">
+        <button type="button" v-if="panel.id != ''" @click="del(panel)" class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-min-width-82">
           <span class="right-box-top-btn-icon"><i class="nz-icon nz-icon-delete"></i></span>
           <span class="right-box-top-btn-txt">{{$t('overall.delete')}}</span>
         </button>
diff --git a/nezha-fronted/src/components/common/rightBox/projectBox.vue b/nezha-fronted/src/components/common/rightBox/projectBox.vue
index c6fa4cbe3..32a5628f4 100644
--- a/nezha-fronted/src/components/common/rightBox/projectBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/projectBox.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="right-box right-box-project" v-clickoutside="clickOutside">
     <!-- begin--顶部按钮-->
-    <div class="right-box-top-btns">
-      <button id="project-del" type="button" v-if="project.id" @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-style-light">
+    <div class="right-box-top-btns right-box-form-delete">
+      <button id="project-del" type="button" v-if="project.id" @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien">
         <span class="right-box-top-btn-icon"><i class="nz-icon nz-icon-delete"></i></span>
         <span class="right-box-top-btn-txt">{{$t('overall.delete')}}</span>
       </button>
diff --git a/nezha-fronted/src/components/common/rightBox/promServerBox.vue b/nezha-fronted/src/components/common/rightBox/promServerBox.vue
index 749236730..b10f413fa 100644
--- a/nezha-fronted/src/components/common/rightBox/promServerBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/promServerBox.vue
@@ -1,9 +1,9 @@
 <template>
   <div class="right-box right-box-prom" v-clickoutside="clickOutside">
     <!-- begin--顶部按钮-->
-    <div class="right-box-top-btns">
+    <div class="right-box-top-btns right-box-form-delete">
       <button type="button" v-if="editPromServer.id" @click="del"
-              class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-style-light"
+              class="nz-btn nz-btn-size-normal nz-btn-size-alien"
               id="promServer-edit-del">
         <span class="right-box-top-btn-icon"><i class="nz-icon nz-icon-delete"></i></span>
         <span class="right-box-top-btn-txt">{{$t('overall.delete')}}</span>
@@ -17,7 +17,7 @@
 
     <!-- begin--表单-->
     <el-scrollbar class="right-box-form-box">
-      <el-form class="right-box-form" :model="editPromServer" label-position="top" :rules="rules" ref="promServerForm">
+      <el-form class="right-box-form right-box-form-left" :model="editPromServer" label-position="right" label-width="120px" :rules="rules" ref="promServerForm">
         <!--DC-->
         <el-form-item :label="$t('config.dc.dc')" prop="idc.name">
           <div class="right-box-form-content">
diff --git a/nezha-fronted/src/components/common/rightBox/trafficSetting/trafficSettingBox.vue b/nezha-fronted/src/components/common/rightBox/trafficSetting/trafficSettingBox.vue
index 6cee62b65..3f232812b 100644
--- a/nezha-fronted/src/components/common/rightBox/trafficSetting/trafficSettingBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/trafficSetting/trafficSettingBox.vue
@@ -10,7 +10,7 @@
           <el-input :disabled="true" v-model="dc.name"></el-input>
         </el-form-item>
         <traffic-setting-tab ref="trafficSetting" :post-asset-list="assetList" v-for="(item,index) in traffic.setting" :index="index" :asset-setting="item" :key="uuids[index]" :id="uuids[index]" @delSelf="delAssetSetting" :validate-repeat-func="valiateRepeatFunc"></traffic-setting-tab>
-        <button @click="addAssetSetting" class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-100" style="margin:5px 1px">{{$t('config.dc.traffic.add')}}</button>
+        <button @click="addAssetSetting" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new" style="margin:5px 1px 5px 70px">{{$t('config.dc.traffic.add')}}</button>
       </el-form>
     </el-scrollbar>
 
diff --git a/nezha-fronted/src/components/common/rightBox/trafficSetting/trafficSettingTab.vue b/nezha-fronted/src/components/common/rightBox/trafficSetting/trafficSettingTab.vue
index 3d00c3b7d..2761afb32 100644
--- a/nezha-fronted/src/components/common/rightBox/trafficSetting/trafficSettingTab.vue
+++ b/nezha-fronted/src/components/common/rightBox/trafficSetting/trafficSettingTab.vue
@@ -111,14 +111,14 @@
             <i class="el-icon-more"></i>
           </button>
         </el-popover>
-        <div class="right-box-row-btn" @click="delSelf"><i class="nz-icon nz-icon-minus"></i></div>
+        <span class="right-box-form-minus-box" @click="delSelf" style="vertical-align: middle"><i class="nz-icon nz-icon-minus"></i></span>
         <div>
           <span style="color:#F56C6C;font-size: 12px;" v-if="hostRepeat">{{$t('validate.repeat')}}</span>
           <span style="color:#F56C6C;font-size: 12px;" v-if="hostInvalid">{{$t('validate.host')}}</span>
           <span style="color:#F56C6C;font-size: 12px;" v-if="hostEmpty">{{$t('validate.required')}}</span>
         </div>
       </el-form-item>
-      <div class="endpoints-box-endpoints">
+      <div class="endpoints-box-endpoints" style="border: 1px solid #E7EAED;border-radius: 2px;padding-bottom: 10px">
         <el-table :data="assetSetting.configs"
                   tooltip-effect="light"
                   v-scrollBar:el-table="'large'"
@@ -131,7 +131,7 @@
                   v-if="refreshTab"
                   style="width: 100%;">
           <el-table-column
-            label-class-name="endpoints-box-endpoints-title"
+            label-class-name="traffic-set-table-title"
             :resizable="false"
             show-overflow-tooltip
             v-for="(item, index) in tableLabels"
@@ -220,14 +220,16 @@
               </template>
             </template>
           </el-table-column>
-          <el-table-column label="" :width="30">
+          <el-table-column label="" :width="40" :show-overflow-tooltip="false">
             <template slot-scope="scope">
-              <el-button @click.stop="delTabRow(scope.$index,scope.row)" :disabled="assetSetting.host == null" style="width: 18px;height: 18px; line-height: 18px; padding:0;" size="mini"><i class="nz-icon nz-icon-minus"></i></el-button>
+              <span @click.stop="delTabRow(scope.$index,scope.row)" :disabled="assetSetting.host == null" class=".right-box-form-delete" size="mini"><i class="nz-icon nz-icon-minus"></i></span>
             </template>
           </el-table-column>
         </el-table>
-        <div class="add-btn">
-          <el-button @click="addTabRow"  style="height: 18px; line-height: 18px; padding-top: 0; padding-bottom: 0;" size="mini"><i class="nz-icon nz-icon-plus"></i></el-button>
+        <div class="add-btn" style="margin-top: 10px;">
+          <span @click="addTabRow" size="mini" class="right-box-form-add">
+            <i class="nz-icon nz-icon-plus"></i>
+          </span>
         </div>
       </div>
       <sub-box ref="subBox" @after="refreshTabFunc"></sub-box>
@@ -270,14 +272,14 @@
           {
             label:'ifDescr',
             prop:'ifdescr',
-            width:250,
+            width:100,
             required:false,
             errRows:[],
           },
           {
             label:this.$t('config.dc.traffic.direction'),
             prop:'direction',
-            width:200,
+            width:100,
             required:true,
             errRows:[],
           },
@@ -605,14 +607,15 @@
 
 <style scoped>
   .asset-config-tab{
-    width: calc(100% - 30px);
+    width: calc(100% - 160px);
     min-height: 100px;
     max-height: 400px;
     border: 1px solid lightgrey;
     border-radius: 5px;
-    padding:10px 20px 10px 10px;
+    padding:18px 50px 25px 40px;
     margin: 0;
     margin-bottom: 10px;
+    margin-left: 70px;
     position: relative;
   }
   .asset-config-tab .add-btn{
@@ -629,6 +632,12 @@
   .asset-config-tab .right-box-row-with-btn{
     width: calc(100% - 69px);
   }
+  /deep/ .el-table tr:last-child td{
+    border-bottom: none;
+  }
+  /deep/ .el-table .traffic-set-table-title{
+    color: #0275b8;
+  }
 </style>
 <style lang="scss">
   .tab-tags{
diff --git a/nezha-fronted/src/components/page/asset/accountConfig.vue b/nezha-fronted/src/components/page/asset/accountConfig.vue
index 65468e64b..5c91ff43f 100644
--- a/nezha-fronted/src/components/page/asset/accountConfig.vue
+++ b/nezha-fronted/src/components/page/asset/accountConfig.vue
@@ -1,5 +1,5 @@
 <template>
-  <el-form label-width="120px" :model="account" :rules="rules" ref="accountForm" style="margin-top: 20px;">
+  <el-form label-width="120px" :model="account" :rules="rules" ref="accountForm" style="margin-top: 20px;margin-left: 66px">
     <template v-if="account.protocol == 'SSH'">
       <el-form-item :label="$t('asset.account')" prop="params.username">
         <el-input autocomplete="new-password" size="small" v-model="account.params.username"/>
diff --git a/nezha-fronted/src/components/page/dashboard/chartBox.vue b/nezha-fronted/src/components/page/dashboard/chartBox.vue
index c8bb6c4d2..35e9840de 100644
--- a/nezha-fronted/src/components/page/dashboard/chartBox.vue
+++ b/nezha-fronted/src/components/page/dashboard/chartBox.vue
@@ -42,6 +42,10 @@
     border-bottom: 1px dashed #dfe7f2;
     width: 100%;
   }
+  .right-box-form .element-item.form-row-item{
+    width: calc(100% - 120px);
+    padding: 20px 20px 20px 0;
+  }
   /*metric样式--end*/
   .label-center{
     vertical-align: middle;
@@ -62,8 +66,8 @@
     </transition>
 
     <!-- begin--顶部按钮-->
-    <div class="right-box-top-btns">
-      <button id="chart-box-delete" type="button" v-if="editChart.id" @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-style-light nz-btn-min-width-82">
+    <div class="right-box-top-btns right-box-form-delete">
+      <button id="chart-box-delete" type="button" v-if="editChart.id" @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-min-width-82">
         <span class="right-box-top-btn-icon"><i class="nz-icon nz-icon-delete"></i></span>
         <span class="right-box-top-btn-txt">{{$t('overall.delete')}}</span>
       </button>
@@ -493,6 +497,9 @@
         this.promqlKeys.push(getUUID());
         this.elementIds.push("");
         this.promqlCount++;
+        this.$nextTick(() => {
+          this.$refs.scrollbar.update();
+        });
       },
       removeExpression(index) {
         if (this.promqlCount > 1) {
@@ -509,6 +516,9 @@
             });
           });
         }
+        this.$nextTick(() => {
+          this.$refs.scrollbar.update();
+        });
       },
       save() {
         this.$refs['chartForm'].validate((valid) => {