diff --git a/nezha-fronted/src/assets/stylus/main.scss b/nezha-fronted/src/assets/stylus/main.scss
index 263e7c098..cef9fb8c9 100644
--- a/nezha-fronted/src/assets/stylus/main.scss
+++ b/nezha-fronted/src/assets/stylus/main.scss
@@ -259,7 +259,7 @@ li{
 }
 .nz-btn.nz-btn-size-small-new{
   height: 24px;
-  line-height: 24px;
+  line-height: 22px;
   text-align: center;
   min-width: 60px;
   padding: 0 10px;
@@ -1040,9 +1040,6 @@ li{
 .right-box .el-form-item__label {
   line-height: 30px;
 }
-.right-box-sub-title {
-  padding: 8px 0;
-}
 .right-box-line {
   margin-bottom: 18px;
   background-color: #DCDFE6;
@@ -1096,12 +1093,14 @@ li{
   display: inline-block;
   padding-top: 20px;
   font-size: 14px;
+  font-weight: bold;
   color: $box-title-color;
 }
 .right-box-sub-title {
   font-size: 14px;
   color: $box-title-color;
-  padding-bottom: 5px;
+  background: #F6F6F6;
+  padding: 8px 12px 5px 12px;
 }
 .pop-title {
   line-height: 25px;
@@ -1198,7 +1197,7 @@ li{
 .dc-asset-state-out {
   background-color: orange;
 }
-.dc-asset-state-high {
+.dc-asset-state-P1 {
   background-color: rgba(255, 0, 0, 0.6);
 }
 .chart-box-dropdown {
@@ -1300,17 +1299,23 @@ li{
 .right-box-add-endpoint .right-box-form {
   height: 100%;
 }
-.right-box-form .half-form-item{
+.right-box-form>.el-form-item.half-form-item{
   display: inline-block;
-  width: 400px;
+  width: 350px;
+}
+.right-box-form>.el-form-item.half-form-item:nth-child(odd){
+  display: inline-block;
+  width: 350px;
+  margin-left: 0;
 }
 .right-box-form .one-third-form-item-left{
   display: inline-block;
-  width: 247px;
+  width: 220px;
 }
 .right-box-form .one-third-form-item-right{
+  margin-left: 10px;
   display: inline-block;
-  width: 148px;
+  width: 110px;
   .el-form-item__label{
     width: 20px !important;
   }
@@ -1320,6 +1325,8 @@ li{
 }
 .right-box-form>.el-form-item {
   margin-bottom: 18px;
+  width: calc(100% - 70px);
+  margin-left: 70px;
 }
 .right-box-form .el-select {
   width: 100%;
@@ -2142,3 +2149,43 @@ li{
 .content-row-box .content-col-box:first-child{
   margin-left: 0;
 }
+.right-box-small-title{
+  font-family: Roboto-Regular;
+  font-size: 14px;
+  color: #333333;
+  letter-spacing: 0;
+  text-align: left;
+  width: calc(100% - 100px);
+  margin-left: 100px;
+}
+.right-box-form .form-row-item{
+  padding: 20px 20px 20px 0;
+  border: 1px dashed #dfe7f2;
+  width: calc(100% - 120px);
+  margin-left: 70px;
+  position: relative;
+}
+.right-box-form .form-row-item .nz-icon-minus{
+  color: #EC7F66;
+}
+.right-box-form  .nz-icon-minus-medium{
+  padding: 2px 6px;
+  background: rgba(236,127,102,.1);
+  border-radius: 4px;
+  cursor: pointer;
+}
+.right-box-form .form-row-item .nz-icon-minus-position{
+  position: absolute;
+  top: 50%;
+  right: -55px;
+  transform: translate(-50%,-50%);
+}
+.right-box-form>.el-form-item.half-form-item-other{
+  display: inline-block;
+  width: 350px;
+}
+.right-box-form>.el-form-item.half-form-item-other:nth-child(odd){
+  display: inline-block;
+  width: 390px;
+  margin-left: 0;
+}
diff --git a/nezha-fronted/src/components/page/dashboard/chartBox.vue b/nezha-fronted/src/components/page/dashboard/chartBox.vue
index 1088b290f..eb7e5edca 100644
--- a/nezha-fronted/src/components/page/dashboard/chartBox.vue
+++ b/nezha-fronted/src/components/page/dashboard/chartBox.vue
@@ -96,8 +96,8 @@
           <el-input size="small" maxlength="64" show-word-limit v-model="editChart.title"></el-input>
         </el-form-item>
 
-        <div class="right-box-sub-title">{{$t('dashboard.panel.chartForm.option')}}</div>
-        <div class="line-100" style="margin-bottom: 20px;"></div>
+        <div class="right-box-small-title">{{$t('dashboard.panel.chartForm.option')}}</div>
+        <div style="margin-bottom: 20px;width: 100%"></div>
 
         <!-- type unit start-->
         <el-form-item :label="$t('dashboard.panel.chartForm.type')" prop="type" class="half-form-item">
@@ -108,7 +108,7 @@
           </el-select>
         </el-form-item>
 
-        <el-form-item :label="$t('dashboard.panel.chartForm.unit')" prop="unit" class="half-form-item" style="width: 415px;">
+        <el-form-item :label="$t('dashboard.panel.chartForm.unit')" prop="unit" class="half-form-item">
           <el-cascader filterable placeholder="" popper-class="dc-dropdown" size="mini"  style="width: 100%"
                        :options="unitOptions"
                        :props="{ expandTrigger: 'hover',emitPath:false }"
@@ -128,7 +128,7 @@
           </el-select>
         </el-form-item>
 
-        <el-form-item :label="$t('dashboard.panel.chartForm.high')" prop="hight"  class="half-form-item" style="width: 415px;">
+        <el-form-item :label="$t('dashboard.panel.chartForm.high')" prop="hight"  class="half-form-item">
           <el-autocomplete
             v-model="editChart.height"
             :fetch-suggestions="querySearch"
@@ -158,11 +158,11 @@
           </el-select>
         </el-form-item>
 
-        <el-form-item v-if="editChart.type == 'line' || editChart.type == 'bar' || editChart.type == 'stackArea'" :label='$t("dashboard.panel.chartForm.threshold")' prop="param.threshold"  class="half-form-item" style="width: 415px">
+        <el-form-item v-if="editChart.type == 'line' || editChart.type == 'bar' || editChart.type == 'stackArea'" :label='$t("dashboard.panel.chartForm.threshold")' prop="param.threshold"  class="half-form-item">
           <el-input size="mini" type="input" v-model="editChart.param.threshold"></el-input>
         </el-form-item>
 
-        <div v-if="!isUrl&&!isAlert" class="right-box-sub-title">
+        <div v-if="!isUrl&&!isAlert" class="right-box-sub-title" style="margin-bottom: 20px">
           <span>{{$t('alert.config.expr')}}</span>
           <span v-if="!isSingleStat" style="height: 19px;display: inline-block;line-height: 1;" class="float-right" @click="addExpression">
             <span class="create-square-box">
@@ -171,13 +171,13 @@
           </span>
         </div>
         <div v-if="isAlert" class="right-box-sub-title">{{$t('dashboard.panel.chartForm.alertParam.param')}}</div>
-        <div v-if="!isUrl" class="line-100"></div>
+        <div v-if="!isUrl" style="width: 100%"></div>
 
         <el-row v-if="isAlert" class="element-item">
           <alert-chart-param ref="alertParamBox" @on-enter-complate="getAlertParam"></alert-chart-param>
         </el-row>
 
-        <el-row v-if="!isUrl &&!isAlert" class="element-item" style="" v-for="index of promqlKeys.length" :key="'ele' + index">
+        <el-row v-if="!isUrl &&!isAlert" class="element-item form-row-item" style="" v-for="index of promqlKeys.length" :key="'ele' + index">
           <promql-input
             :ref="'promql-'+(index-1)"
             :id="promqlKeys[index-1]"
@@ -188,6 +188,7 @@
             :plugins="['metric-selector', 'metric-input', 'remove']"
             @change="expressionChange"
             @removeExpression="removeExpression"
+            :showRemove="false"
           ></promql-input>
           <el-row>
             <template v-if="editChart.type != 'singleStat'">
@@ -214,13 +215,16 @@
               </el-col>
             </template>
           </el-row>
+          <span class="nz-icon-minus-medium nz-icon-minus-position">
+            <i class="nz-icon nz-icon-minus" @click="removeExpression"></i>
+          </span>
         </el-row>
         <!--value mapping start-->
         <div  class="right-box-sub-title" v-if="editChart.type == 'singleStat'">
           <span>{{$t('dashboard.panel.chartForm.valMapping.name')}}</span>
           <span  class="float-right" @click="addMapping"><i style="font-size: 16px; cursor: pointer;" class="nz-icon nz-icon-create-square"></i></span>
         </div>
-        <div class="line-100" style="margin-bottom: 20px;" v-if="editChart.type == 'singleStat'"></div>
+        <div style="margin-bottom: 20px; width: 100%" v-if="editChart.type == 'singleStat'"></div>
         <el-form-item :label="$t('dashboard.panel.chartForm.type')" prop="span" v-if="editChart.type == 'singleStat'">
           <el-radio-group v-model="editChart.param.valueMapping.type" fill="#FA901C" text-color="#FA901C" size="small" class="val-mapping-type"  @change="valueMappingChange">
             <el-radio-button label="value" border class="no-fill">{{$t('dashboard.panel.chartForm.valMapping.value')}}</el-radio-button>
@@ -229,18 +233,18 @@
         </el-form-item>
         <template v-if="editChart.type == 'singleStat'&&editChart.param.valueMapping.type == 'value'">
           <template  v-for="(mapping,index) in editChart.param.valueMapping.mapping">
-            <el-form-item :label="$t('dashboard.panel.chartForm.valMapping.value')" prop="span" class="half-form-item" >
-              <el-input size="mini" type="input" v-model="mapping.value"></el-input>
+            <el-form-item :label="$t('dashboard.panel.chartForm.valMapping.value')" prop="span" class="half-form-item-other" >
+              <el-input size="mini" type="input" v-model="mapping.value" style="display: inline-block;;"></el-input>
             </el-form-item>
-            <el-form-item :label="$t('dashboard.panel.chartForm.valMapping.text')" prop="span" class="half-form-item" style="width: 415px;">
-              <el-input size="mini" type="input" v-model="mapping.text" style="display: inline-block;width:calc(100% - 21px);"></el-input>
-              <div  @click="delMapping(index)" style="display: inline-block"><i class="nz-icon nz-icon-minus"></i></div>
+            <el-form-item :label="$t('dashboard.panel.chartForm.valMapping.text')" prop="span" class="half-form-item-other">
+              <el-input size="mini" type="input" v-model="mapping.text" style="display: inline-block;width:calc(100% - 40px);"></el-input>
+              <span  @click="delMapping(index)" class="nz-icon-minus-medium" style="margin-left: 7px"><i class="nz-icon nz-icon-minus"></i></span>
             </el-form-item>
           </template>
         </template>
         <template v-if="editChart.type == 'singleStat'&&editChart.param.valueMapping.type == 'range'">
           <template  v-for="(mapping,index) in editChart.param.valueMapping.mapping">
-            <div class="half-form-item">
+            <div class="half-form-item-other" style="display: inline-block;margin-left: 70px">
               <el-form-item :label="$t('dashboard.panel.chartForm.valMapping.from')" prop="span" class="one-third-form-item-left" >
                 <el-input size="mini" type="input" v-model="mapping.from"></el-input>
               </el-form-item>
@@ -248,8 +252,8 @@
                 <el-input size="mini" type="input" v-model="mapping.to"></el-input>
               </el-form-item>
             </div>
-            <el-form-item :label="$t('dashboard.panel.chartForm.valMapping.text')" prop="span" class="half-form-item" style="width: 415px;">
-              <el-input size="mini" type="input" v-model="mapping.text" style="display: inline-block;width:calc(100% - 21px);" ></el-input>
+            <el-form-item :label="$t('dashboard.panel.chartForm.valMapping.text')" prop="span" class="half-form-item-other">
+              <el-input size="mini" type="input" v-model="mapping.text" style="display: inline-block;width:calc(100% - 40px);" ></el-input>
               <div @click="delMapping(index)" style="display: inline-block"><i class="nz-icon nz-icon-minus"></i></div>
             </el-form-item>
           </template>
@@ -260,9 +264,9 @@
           <div  class="right-box-sub-title" >
             <span>{{$t('dashboard.panel.chartForm.legendValue')}}</span>
           </div>
-          <div class="line-100" style="margin-bottom: 20px;" ></div>
+          <div style="margin-bottom: 20px; width: 100%" ></div>
           <div style="display: flex;">
-            <span style="margin-left: 50px;"></span>
+            <span style="margin-left: 150px;"></span>
             <template v-for="item in sortedOptionKeys">
               <div style="flex: 1">
                 <span style="margin-right: 10px;color:rgb(102, 102, 102)">{{item.label}}</span>
@@ -587,11 +591,9 @@
           this.subCount = 0;
           // 保存完成,进行删除操作
           //('box第二步，deleteIndex='+this.deleteIndex+'=开始删除一个元素')
-          //console.log('box第二步，删除之前，elements='+JSON.stringify(this.elements)+'  elementTarget='+JSON.stringify(this.elementTarget)+'  bus='+JSON.stringify(bus.chartAddInfo.metricTarget));
           this.elements.splice(this.deleteIndex, 1);
           this.elementTarget.splice(this.deleteIndex, 1);//没有作用，此处是[]
           bus.chartAddInfo.metricTarget.splice(this.deleteIndex, 1);
-          //console.log('box第二步，删除完毕，elements='+JSON.stringify(this.elements),'  elementTarget='+JSON.stringify(this.elementTarget),'  bus='+JSON.stringify(bus.chartAddInfo.metricTarget));
 
           this.$nextTick(() => {
             this.$refs.chartTag.forEach((item, index) => {
@@ -1207,7 +1209,6 @@
                   legend: this.legends[index],
                 });
               });
-              //console.info(elements)
               params.elements = elements;
               if (valid) {
                 this.$refs.chartsPreview.show(params);
@@ -1299,7 +1300,6 @@
             this.setIsOtherChart();
             n.param&&!n.param.legendValue&&this.$set(this.editChart.param,'legendValue',{min:'off',max:'off',avg:'off',last:'off',total:'off'})
           }
-          //console.info(this.showPanel);
           this.$set(this.editChart, "panelName", this.showPanel.name);
           if (this.showPanel.id) {
             this.panelId = this.showPanel.id;
@@ -1315,7 +1315,6 @@
         deep: true,
         immediate: true,
         handler(n) {
-          // console.info((JSON.parse(JSON.stringify(n))))
           let panel = this.panelData.find(p => {
             return p.name == n.panelName;
           });