From 949f61d402b1523a508a3c7ea44828bf697e9f28 Mon Sep 17 00:00:00 2001
From: chenjinsong <523037378@qq.com>
Date: Fri, 5 Mar 2021 20:34:58 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E5=91=A8=E4=BA=94=E6=9D=8E=E5=A8=9C?=
 =?UTF-8?q?=E6=96=87=E6=A1=A3=E9=99=A4mibbrowser=E5=A4=96=E7=9A=84?=
 =?UTF-8?q?=E8=B0=83=E6=95=B4=E5=86=85=E5=AE=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 nezha-fronted/src/assets/stylus/index.scss    |   1 +
 nezha-fronted/src/assets/stylus/main.scss     |  74 ++++----
 .../src/components/charts/chart.scss          |  10 +-
 .../src/components/common/chartUnit.vue       |   3 +
 .../src/components/common/deleteButton.vue    |   2 +-
 .../src/components/common/pickTime.vue        |   4 +-
 .../src/components/common/project/chart.scss  |   2 +-
 .../trafficSetting/trafficSettingBox.vue      |   4 +-
 .../trafficSetting/trafficSettingTab.vue      | 172 ++++++++++--------
 .../src/components/common/timePicker.vue      |   9 +-
 .../src/components/page/alert/config.vue      |   1 +
 .../src/components/page/config/account.vue    |  14 +-
 .../src/components/page/config/mibBrowser.vue |   3 +
 .../src/components/page/config/system.vue     |  52 +++++-
 .../page/dashboard/explore/promqlInput.vue    |   9 +-
 nezha-fronted/src/main.js                     |   5 +-
 16 files changed, 223 insertions(+), 142 deletions(-)

diff --git a/nezha-fronted/src/assets/stylus/index.scss b/nezha-fronted/src/assets/stylus/index.scss
index f499721ce..5da28615a 100644
--- a/nezha-fronted/src/assets/stylus/index.scss
+++ b/nezha-fronted/src/assets/stylus/index.scss
@@ -49,3 +49,4 @@ $suspended-color: #9e9c98; //全局停用色灰色
 $left-menu-bgcolor:#FFF;
 
 @import './main.scss';
+/*@import './table.scss';*/
diff --git a/nezha-fronted/src/assets/stylus/main.scss b/nezha-fronted/src/assets/stylus/main.scss
index c16bd0f22..6062530d2 100644
--- a/nezha-fronted/src/assets/stylus/main.scss
+++ b/nezha-fronted/src/assets/stylus/main.scss
@@ -851,13 +851,6 @@ li{
 .nz-table + .to-top-is-hover{
   display: none;
 }
-revogr-header .data-header-cell .resizable:hover {
-  background-color: #ccc !important;
-  width: 6px;
-}
-revo-grid[theme=compact] revogr-viewport revogr-header .data-header-cell {
-  border-right: 1px solid #eee;
-}
 
 .nz-table + .to-top-is-hover:hover{
   display: block;
@@ -936,33 +929,7 @@ revo-grid[theme=compact] revogr-viewport revogr-header .data-header-cell {
   padding:2px 5px;
   border-radius: 4px;
 }
-.data-cell {
-  font-size: 12px;
-}
-.data-cell .danger {
-  background-color: $danger-color;
-  color: white;
-  padding:2px 5px;
-  border-radius: 4px;
-}
-.data-cell .success {
-  background-color: $success-color;
-  color: white;
-  padding:2px 5px;
-  border-radius: 4px;
-}
-.data-cell .suspended {
-  background-color: $suspended-color;
-  color: white;
-  padding:2px 5px;
-  border-radius: 4px;
-}
-.data-cell .warning {
-  background-color: $warning-color;
-  color: white;
-  padding:2px 5px;
-  border-radius: 4px;
-}
+
 .nz-table th {
   padding: 0;
 }
@@ -1912,6 +1879,44 @@ revo-grid[theme=compact] revogr-viewport revogr-header .data-header-cell {
   background-color: rgba(255, 99, 71, .85);
 }
 
+.el-message-box__wrapper {
+  .el-message-box__status.el-icon-warning {
+    color: #ef775e !important;
+  }
+  .el-message-box__headerbtn:focus .el-message-box__close, .el-message-box__headerbtn:hover .el-message-box__close {
+    color: $global-text-color-active;
+  }
+  .el-message-box__container {
+    display: flex;
+    min-height: 60px;
+    align-items: center;
+  }
+
+  .el-message-box__btns {
+    .el-button:not(.el-button--primary):focus{
+      color: #606266;
+    }
+    .el-button:not(.el-button--primary):hover {
+      color: #606266;
+      opacity: .8;
+      border-color: #DCDFE6;
+      background-color: white;
+    }
+
+    .el-button--primary {
+      box-shadow: none;
+      background-color: $global-text-color-active;
+    }
+    .el-button--primary:focus{
+      background-color: $global-text-color-active;
+    }
+    .el-button--primary:hover {
+      background-color: $global-text-color-active;
+      opacity: .8;
+    }
+  }
+}
+
 /*滚动条相关, 11px/8px/5px, 默认8px*/
 .ps__rail-y:hover > .ps__thumb-y,
 .ps__rail-y:focus > .ps__thumb-y,
@@ -2423,3 +2428,4 @@ revo-grid[theme=compact] revogr-viewport revogr-header .data-header-cell {
 /deep/ .el-input-number .el-input__inner{
   text-align: left;
 }
+
diff --git a/nezha-fronted/src/components/charts/chart.scss b/nezha-fronted/src/components/charts/chart.scss
index f6766067f..cc65349ea 100644
--- a/nezha-fronted/src/components/charts/chart.scss
+++ b/nezha-fronted/src/components/charts/chart.scss
@@ -278,7 +278,7 @@
     position: relative;
     background-color: white;
     .chartTitle:hover {
-      background-color:#d8dce1;
+      background-color:#efefef;
     }
     //.chartTitle:not(.drag-disabled) {
     //  cursor: move;
@@ -299,7 +299,7 @@
         font-size: 12px;
       }
       .chart-title-text {
-        font-size: 16px;
+        font-size: 14px;
         line-height: 26px;
         color: #52545c;
         display:flex;
@@ -494,12 +494,12 @@
     position: relative;
     background-color: white;
     .chartTitle:hover {
-      background-color:#d8dce1;
+      background-color:#efefef;
     }
     .chartTitle {
       text-align: center;
       width: 100%;
-      line-height: 30px;
+      line-height: 20px;
       height: 28px;
       padding: 1px 3px 0 3px;
       box-sizing: border-box;
@@ -513,7 +513,7 @@
         font-size: 12px;
       }
       .chart-title {
-        font-size: 16px;
+        font-size: 14px;
         line-height: 26px;
         color: #52545c;
         display:flex;
diff --git a/nezha-fronted/src/components/common/chartUnit.vue b/nezha-fronted/src/components/common/chartUnit.vue
index d5d2b4f31..9f5b9fc26 100644
--- a/nezha-fronted/src/components/common/chartUnit.vue
+++ b/nezha-fronted/src/components/common/chartUnit.vue
@@ -54,6 +54,9 @@
     width: 100px;
     margin: 0 20px 0 0;
   }
+  .chart-unit .el-input__suffix-inner {
+    color: #aaa;
+  }
   .unit-pop-class .el-cascader-panel{
     height: 200px;
     background-color: #FFF;
diff --git a/nezha-fronted/src/components/common/deleteButton.vue b/nezha-fronted/src/components/common/deleteButton.vue
index 2ed6462dd..ee044f6be 100644
--- a/nezha-fronted/src/components/common/deleteButton.vue
+++ b/nezha-fronted/src/components/common/deleteButton.vue
@@ -9,7 +9,7 @@
     name: "deleteButton",
     props:{
       filterFunction:Function,
-      deleteObjs:Array,
+      deleteObjs: Object,
       api:String,
       clickFunction:Function,
       id:String
diff --git a/nezha-fronted/src/components/common/pickTime.vue b/nezha-fronted/src/components/common/pickTime.vue
index c3497b71c..883d43671 100644
--- a/nezha-fronted/src/components/common/pickTime.vue
+++ b/nezha-fronted/src/components/common/pickTime.vue
@@ -2,7 +2,7 @@
   <div class="interval-refresh ">
     <time-picker v-if="showTimePicker" ref="timePicker" class="time-picker" @change="dateChange" :default-pick="defaultPick" :show-empty="showEmpty" v-model="this.searchTime"></time-picker>
     <chart-unit v-model="unit" v-if="useChartUnit"></chart-unit>
-      <div class="nz-btn-group nz-btn-group-size-normal nz-btn-group-light margin-r-20" v-show="useRefresh" style="vertical-align: middle;">
+      <div class="nz-btn-group nz-btn-group-size-normal nz-btn-group-light margin-r-20" style="height: 24px;line-height: 24px;vertical-align: middle;" v-show="useRefresh">
         <button style="border-right: 1px solid rgba(162,162,162,0.50);" type="button" class="nz-btn nz-btn-size-normal nz-btn-style-light" @click="refreshDataFunc" :id="id+'-refresh'">
           <i style="font-size: 14px" class="global-active-color nz-icon nz-icon-refresh"></i>&nbsp;
           <span class="nz-btn nz-btn-text" ><slot name="added-text"></slot></span>
@@ -14,7 +14,7 @@
             </li>
           </ul>
           <button type="button" style="border-radius: 0 4px 4px 0;padding:0px;" class="nz-btn nz-btn-size-normal nz-btn-style-light" slot="reference">
-            <span class="nz-btn nz-btn-text">{{interval.value != -1 ? interval.label : ''}}</span><i style="font-size: 14px" class="nz-icon nz-icon-arrow-down"></i>
+            <span class="nz-btn nz-btn-text" style="padding-left: 10px;" v-if="interval.value && interval.value != -1">{{interval.label}}</span><i class="nz-icon nz-icon-arrow-down" style="font-size: 14px"></i>
           </button>
         </el-popover>
       </div>
diff --git a/nezha-fronted/src/components/common/project/chart.scss b/nezha-fronted/src/components/common/project/chart.scss
index 2dd7c7b44..6b5d921f4 100644
--- a/nezha-fronted/src/components/common/project/chart.scss
+++ b/nezha-fronted/src/components/common/project/chart.scss
@@ -274,7 +274,7 @@
         font-size: 12px;
       }
       .chart-title-text {
-        font-size: 16px;
+        font-size: 14px;
         line-height: 26px;
         color: #52545c;
         display:flex;
diff --git a/nezha-fronted/src/components/common/rightBox/trafficSetting/trafficSettingBox.vue b/nezha-fronted/src/components/common/rightBox/trafficSetting/trafficSettingBox.vue
index f15cfafe4..3991f5b4f 100644
--- a/nezha-fronted/src/components/common/rightBox/trafficSetting/trafficSettingBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/trafficSetting/trafficSettingBox.vue
@@ -5,12 +5,12 @@
     <div class="right-box-title">{{$t('config.dc.traffic.title')}}</div>
     <!-- end--标题-->
     <div class="right-box-form-box">
-      <el-form class="right-box-form" :model="traffic" label-width="100px" label-position="left" ref="trafficForm">
+      <el-form :model="traffic" class="right-box-form" label-position="top" label-width="100px" ref="trafficForm">
         <el-form-item :label="$t('config.dc.dc')" size="small">
           <el-input :disabled="true" v-model="dc.name" id="traffic-setting-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 type="button" @click="addAssetSetting" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new" style="margin:5px 1px 5px 70px" id="traffic-setting-add">{{$t('config.dc.traffic.add')}}</button>
+        <button @click="addAssetSetting" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new" id="traffic-setting-add" style="margin:15px 1px 15px 15px" type="button">{{$t('config.dc.traffic.add')}}</button>
       </el-form>
     </div>
 
diff --git a/nezha-fronted/src/components/common/rightBox/trafficSetting/trafficSettingTab.vue b/nezha-fronted/src/components/common/rightBox/trafficSetting/trafficSettingTab.vue
index 73ad937ca..95aea7d57 100644
--- a/nezha-fronted/src/components/common/rightBox/trafficSetting/trafficSettingTab.vue
+++ b/nezha-fronted/src/components/common/rightBox/trafficSetting/trafficSettingTab.vue
@@ -1,24 +1,24 @@
 <template>
     <div class="asset-config-tab">
-      <el-form-item :label="$t('asset.asset')" size="small" class="right-box-form-content" ref="assetConfigForm" label-width="90px">
-        <!--<el-select class="right-box-row-with-btn" clearable @clear="clearAssetInput"  v-model="assetSetting.assetId" @change="assetChanged" popper-class="no-style-class" :class="{'input-error':assetValidate}">
-          <el-option v-for="(item,index) in assetList" :label="item.host" :disabled="item.isOccupy" :value="item.id" :key="item.host+'-'+item.id"></el-option>
-        </el-select>-->
-        <el-autocomplete
-          id="traffic-setting-asset"
-          clearable
-          :class="{'input-error':hostInvalid || hostRepeat}"
-          class="asset-input right-box-row-with-btn"
-          v-model="assetSetting.host"
-          popper-class="no-style-class"
-          :fetch-suggestions="queryAssetHosts"
-          :debounce="1000"
-          :trigger-on-focus="false"
-          :highlight-first-item="true"
-          @input="hostInputChange"
-          @blur="validateHostEmpty"
-        ></el-autocomplete><el-popover
-        @hide="popHide" @show="popShow" placement="bottom" popper-class="no-style-class" trigger="click">
+      <div class="asset-item">
+        <span class="asset-item--label">{{$t("asset.asset")}}</span>
+        <div class="asset-item--input">
+          <el-autocomplete
+             :class="{'input-error':hostInvalid || hostRepeat}"
+             :debounce="1000"
+             :fetch-suggestions="queryAssetHosts"
+             :highlight-first-item="true"
+             :trigger-on-focus="false"
+             @blur="validateHostEmpty"
+             @input="hostInputChange"
+             class="asset-input right-box-row-with-btn"
+             clearable
+             id="traffic-setting-asset"
+             popper-class="no-style-class"
+             size="small"
+             v-model="assetSetting.host"
+           ></el-autocomplete>
+          <el-popover @hide="popHide" @show="popShow" placement="bottom" popper-class="no-style-class" trigger="click">
           <div class="mib-browser-ad-search">
             <el-row class="mib-browser-ad-search-item" style="font-weight: bold">{{$t('config.dc.traffic.snmpSetting')}}</el-row>
             <el-row class="mib-browser-ad-search-item">
@@ -113,20 +113,14 @@
             <i class="el-icon-more"></i>
           </button>
         </el-popover>
-        <span @click="delSelf" class="right-box-form-minus-box" id="traffic-setting-delself"
-              style="vertical-align: middle;right: 0;
-                      position: absolute;
-                      line-height: 21px;
-                      height: 21px;
-                      top: 50%;
-                      transform: translateY(-50%);"
-        ><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>
+        <span @click="delSelf" class="asset-item--btn right-box-form-minus-box" id="traffic-setting-delself"><i class="nz-icon nz-icon-minus"></i></span>
+      </div>
+      <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>
       <div class="endpoints-box-endpoints" style="border: 1px solid #E7EAED;border-radius: 2px;padding-bottom: 10px">
         <el-table :data="assetSetting.configs"
                   tooltip-effect="light"
@@ -145,31 +139,16 @@
             show-overflow-tooltip
             v-for="(item, index) in tableLabels"
             :width="item.width"
-            align="center"
             :key="`col-${index}`"
             style="max-height: 200px"
             >
             <template slot="header">
-              <span v-if="item.required == true"><span style="color: red;">*</span>{{item.label}}</span>
+              <span v-if="item.required == true"><span style="color: red;">*</span><span style="padding-left: 6px;">{{item.label}}</span></span>
               <span v-else>{{item.label}}</span>
             </template>
             <template slot-scope="scope" :column="item">
               <template v-if="item.prop == 'tags'">
                 <div class="tab-tags" @click="showEditTagsBox(true,scope.$index,scope.row,$event)" id="traffic-setting-show-tags">
-                  <!--<el-scrollbar style="height: 100%;">
-                    <el-tag
-                      v-for="(value, key, index) in scope.row[item.prop]"
-                      class="tab-tags"
-                      size="mini"
-                      :key="key"
-                      style="display: block;margin-bottom:5px;" >
-                      &lt;!&ndash;                  <div class="tab-tags-item">&ndash;&gt;
-                      &lt;!&ndash;                    <div class="tag-item-key">{{key}}：</div><div class="tag-item-value">{{value}}</div>&ndash;&gt;
-
-                      &lt;!&ndash;                  </div>&ndash;&gt;
-                      {{key}}：{{value}}
-                    </el-tag>
-                  </el-scrollbar>-->
                   <el-tooltip placement="top" effect="light" popper-class="tags-pop transparent-pop">
                     <div slot="content">
                       <template v-if="scope.row[item.prop]">
@@ -190,9 +169,6 @@
               <template v-if="item.prop == 'ifindex'">
                 <span v-if="scope.row.edit==false">{{scope.row[item.prop]}}</span>
                 <template v-else>
-<!--                  <el-select v-model="scope.row[item.prop]" :disabled="assetSetting.host == null" size="mini" popper-class="no-style-class" @change="ifIndexChange(scope.row[item.prop],scope.row)" :class="{'input-error':isError(item.errRows,scope.$index),'transparent-pop':assetSetting.host == null}">-->
-<!--                    <el-option v-for="(item,index) in ifIndexList" :label="item.label" :value="item.value" :key="item.value" :disabled="item.isOccupy"></el-option>-->
-<!--                  </el-select>-->
                   <el-autocomplete
                     v-model="scope.row[item.prop]"
                     :class="{'input-error':isError(item.errRows,scope.$index)||ifIndexError,'transparent-pop':assetSetting.host == ''}"
@@ -207,10 +183,6 @@
                 </template>
               </template>
               <template v-if="item.prop == 'ifdescr'">
-                <!--<span v-if="scope.row.edit==false">{{scope.row[item.prop]}}</span>
-                <template v-else>
-                  <el-input v-model="scope.row[item.prop]" size="small" clearable></el-input>
-                </template>-->
                 <span>{{scope.row[item.prop]}}</span>
               </template>
               <template v-if="item.prop == 'direction'">
@@ -221,8 +193,8 @@
                 <template v-else>
                   <el-checkbox-group :disabled="assetSetting.host == null" v-model="scope.row[item.prop]" class="direction-checkbox" :class="{'input-error':isError(item.errRows,scope.$index),'transparent-pop':assetSetting.host == null}">
                     <div class="input__inner">
-                      <el-checkbox label="rx">RX</el-checkbox>
-                      <el-checkbox label="tx" >TX</el-checkbox>
+                      <el-checkbox label="rx">&nbsp;RX</el-checkbox>
+                      <el-checkbox label="tx" >&nbsp;TX</el-checkbox>
                     </div>
                   </el-checkbox-group>
                 </template>
@@ -231,7 +203,7 @@
           </el-table-column>
           <el-table-column label="" :width="40" :show-overflow-tooltip="false">
             <template slot-scope="scope">
-              <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>
+              <span :disabled="assetSetting.host == null" @click.stop="delTabRow(scope.$index,scope.row)" class="right-box-form-delete" size="mini"><i class="nz-icon nz-icon-minus"></i></span>
             </template>
           </el-table-column>
         </el-table>
@@ -281,14 +253,14 @@
           {
             label:'ifDescr',
             prop:'ifdescr',
-            width:100,
+            width:150,
             required:false,
             errRows:[],
           },
           {
             label:this.$t('config.dc.traffic.direction'),
             prop:'direction',
-            width:100,
+            width:200,
             required:true,
             errRows:[],
           },
@@ -612,18 +584,52 @@
   }
 </script>
 
-<style scoped>
-  .asset-config-tab{
-    width: calc(100% - 160px);
+<style lang="scss" scoped>
+  .asset-config-tab {
     min-height: 100px;
     max-height: 400px;
-    border: 1px solid lightgrey;
-    border-radius: 5px;
-    padding:18px 50px 25px 40px;
-    margin: 0;
-    margin-bottom: 10px;
-    margin-left: 70px;
+    border: 1px solid #E4E7ED;;
+    border-radius: 2px;
     position: relative;
+    margin-left: 15px;
+    margin-top: 18px;
+    padding: 18px 18px 26px 40px;
+
+    .asset-item {
+      display: flex;
+      align-items: center;
+      margin-bottom: 18px;
+
+      .asset-item--label {
+        color: #666;
+        padding-right: 20px;
+        line-height: 32px;
+      }
+
+      .asset-item--input {
+        display: flex;
+        width: 100%;
+        padding-right: 10px;
+
+        .right-box-row-with-btn {
+          width: 100%;
+        }
+      }
+
+      .asset-item--btn {
+        height: 28px;
+        box-sizing: border-box;
+        line-height: 21px;
+      }
+    }
+
+    .endpoints-box-endpoints {
+      width: calc(100% - 39px);
+
+      table.el-table__body {
+        font-size: 16px;
+      }
+    }
   }
   .asset-config-tab .add-btn{
     text-align: center;
@@ -635,17 +641,24 @@
     top: 1px;
     left: -1px;
   }
-  .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;
+    color: $global-text-color-active;
   }
+
 </style>
 <style lang="scss">
+
+  .asset-config-tab .right-box-form-minus-box {
+    background-color: #FEF3F0 !important;
+  }
+
+  .asset-config-tab .right-box-form-minus-box .nz-icon {
+    color: #EF9A87 !important;
+  }
+
   .tab-tags{
     width: 100%;
     height: 22px;
@@ -684,15 +697,16 @@
   }
   .taffic-setting-tab .el-table__row:hover{
     .input__inner{
-      border-color: #F0F0F0;
+      border-color: #c0c4cc;
     }
   }
   .input__inner{
-    border: 1px solid;
-    border-color: white;
-    border-radius: 4px;
-    padding-left: 4px;
-    background-color: white;
+    width: 120px;
+    height: 30px;
+    line-height: 30px;
+    padding-left: 15px;
+    border-radius: 2px;
+    border: 1px solid #DCDFE6;
   }
   .input-error .el-input__inner,.input-error .el-input__inner:hover,.input-error .el-input__inner:focus,
   .input-error .input__inner,.input-error .input__inner:hover,.input-error .input__inner:focus {
diff --git a/nezha-fronted/src/components/common/timePicker.vue b/nezha-fronted/src/components/common/timePicker.vue
index 465961653..7af537cbe 100644
--- a/nezha-fronted/src/components/common/timePicker.vue
+++ b/nezha-fronted/src/components/common/timePicker.vue
@@ -67,6 +67,11 @@
   .panel-time-picker-popper .el-picker-panel__footer button:nth-child(1){
     display:none;
   }
+
+  .dropdown--suffix {
+    padding: 0 8px;
+    color: #aaa;
+  }
 </style>
 <template>
   <div class="calendar top-tools" id="panel-calender">
@@ -108,7 +113,9 @@
         <div  class="el-dropdown-link" slot="reference">
           <i class="nz-icon nz-icon-time" style="width:20px;"></i>
           <span class="panel-list-title" id="timePickerContent">{{showTime.text}}</span>
-          <i class="nz-icon nz-icon-arrow-down"  style="padding-left:0px !important;width:20px;"></i>
+          <span class="dropdown--suffix">
+            <i class="el-icon-arrow-down"></i>
+          </span>
         </div>
       </el-popover>
       <el-dropdown-menu class="nz-dashboard-dropdown popper-z-index" slot="dropdown">
diff --git a/nezha-fronted/src/components/page/alert/config.vue b/nezha-fronted/src/components/page/alert/config.vue
index 26ec837e4..3ab895f2a 100644
--- a/nezha-fronted/src/components/page/alert/config.vue
+++ b/nezha-fronted/src/components/page/alert/config.vue
@@ -384,6 +384,7 @@
             });
             this.tableData = response.data.list;
             this.pageObj.total = response.data.total;
+            console.info(this.$refs.alertRuleTable)
             if (!this.scrollbarWrap) {
               this.$nextTick(() => {
                 this.scrollbarWrap = this.$refs.alertRuleTable.bodyWrapper;
diff --git a/nezha-fronted/src/components/page/config/account.vue b/nezha-fronted/src/components/page/config/account.vue
index 3f2179cf1..acc927e8e 100644
--- a/nezha-fronted/src/components/page/config/account.vue
+++ b/nezha-fronted/src/components/page/config/account.vue
@@ -5,15 +5,13 @@
   .account .account-role-item{
     background-color: #409eff;
     border: 1px solid #409eff;
-    height: 20px;
-    font-size: 12px;
-    line-height: 20px;
-    border-radius: 4px;
     display: inline-block;
-    box-sizing: content-box;
-    padding:3px;
-    margin-right: 3px;
+    height: 20px;
+    line-height: 18px;
+    padding: 0 5px;
     color: white;
+    border-radius: 4px;
+    box-sizing: border-box;
   }
 </style>
 <template>
@@ -89,7 +87,7 @@
             <template v-if="item.prop == 'roles'">
               <template v-if="scope.row[item.prop]">
                 <template  v-for="role in scope.row[item.prop]">
-                  <div class="account-role-item" v-if="role"><span>{{role.i18n?$t(role.i18n):role.name}}</span></div>
+                  <span class="account-role-item" v-if="role">{{role.i18n?$t(role.i18n):role.name}}</span>
                 </template>
               </template>
               <template v-else>
diff --git a/nezha-fronted/src/components/page/config/mibBrowser.vue b/nezha-fronted/src/components/page/config/mibBrowser.vue
index 347a7695c..dfc0eea6a 100644
--- a/nezha-fronted/src/components/page/config/mibBrowser.vue
+++ b/nezha-fronted/src/components/page/config/mibBrowser.vue
@@ -802,6 +802,9 @@
     border-top: none;
     border-bottom: none;
   }
+  .mib-browser-table-title {
+    margin-bottom: 10px;
+  }
   .mib-browser-table-title, .mib-browser-tree-title {
     height: 30px;
     line-height: 30px;
diff --git a/nezha-fronted/src/components/page/config/system.vue b/nezha-fronted/src/components/page/config/system.vue
index 680c068bf..b89454c8b 100644
--- a/nezha-fronted/src/components/page/config/system.vue
+++ b/nezha-fronted/src/components/page/config/system.vue
@@ -945,10 +945,11 @@
     }
 </script>
 
-<style scoped>
-  .system{
+<style lang="scss" scoped>
+  .system {
     height: 100%;
     position: relative;
+    margin-top: 10px;
   }
   .system-config-form{
     width: 61.8% !important;
@@ -1077,7 +1078,48 @@
     cursor: pointer;
   }
 </style>
-<style>
+<style lang="scss">
+  .system {
+    .el-tabs__nav-scroll {
+      background-color: #eee;
+    }
+    .el-form-item:last-of-type {
+      padding-top: 36px !important;
+
+      .el-form-item__content {
+        margin-left: 0 !important;
+        width: 692px;
+        text-align: center;
+      }
+      .nz-btn {
+        margin: 0 10px;
+      }
+    }
+    .el-tabs__content {
+      padding-top: 25px;
+    }
+    .el-tabs__item {
+      outline: none;
+      box-sizing: border-box;
+    }
+    .el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active {
+      color: $global-text-color-active;
+      border-bottom: none;
+      border-left: none;
+      border-right: none;
+      border-top: 4px solid $global-text-color-active;
+    }
+    .el-tabs--border-card>.el-tabs__header .el-tabs__item:not(.is-disabled):hover {
+      color: $global-text-color-active;
+      opacity: .8;
+    }
+    .el-tabs--border-card>.el-tabs__header .el-tabs__item {
+      border-bottom: none;
+      border-left: none;
+      border-right: none;
+      border-top: 4px solid transparent;
+    }
+  }
   .system-config-form .el-form-item__content{
     width: 512px;
   }
@@ -1090,6 +1132,10 @@
     line-height: 28px;
     /*width: 512px;*/
   }
+  .system-tabs {
+    box-shadow: unset !important;
+    border-color: #eee !important;
+  }
   .system-tabs .el-tabs--border-card{
     webkit-box-shadow: unset !important;
     box-shadow: unset !important;
diff --git a/nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue b/nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue
index 8b10228ef..f3940986b 100644
--- a/nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue
+++ b/nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue
@@ -193,7 +193,6 @@
 <style scoped lang="scss">
   .promqlInput{
     position: relative;
-    height: 36px;
     width: 100%;
     display: flex;
     margin-bottom: 18px;
@@ -223,8 +222,8 @@
     /*border-radius: 3px;*/
     /*background-color: #dde4ed;*/
     width: 34px;
-    height: 34px !important;
-    line-height: 34px;
+    height: 29px !important;
+    line-height: 30px;
     text-align: center;
   }
   .query-options .option:focus,.query-options .option:hover{
@@ -239,7 +238,7 @@
     height: 100%;
   }
   .metric-btn{
-    height: 36px !important;
+    height: 29px !important;
     width: 105px;
     margin-left: 1px;
   }
@@ -269,6 +268,6 @@
     z-index: 2100;
   }
   .input-box .el-input__inner{
-    height: 36px;
+    height: 30px;
   }
 </style>
diff --git a/nezha-fronted/src/main.js b/nezha-fronted/src/main.js
index 5e6eca972..4580326d7 100644
--- a/nezha-fronted/src/main.js
+++ b/nezha-fronted/src/main.js
@@ -134,7 +134,7 @@ Vue.mixin({
         if(title&&title.label){
           item.label=title.label;
         }
-      })
+      });
     },
     hasButton(code) {
       return hasButton(this.$store.getters.buttonList, code);
@@ -184,6 +184,9 @@ Vue.mixin({
       }
       return 0;
     },
+    translation(key) {
+      return i18n.t(key);
+    },
   },
   computed: {
     getMenuList() {