perf: 调整panel中图表的按钮

nezha-fronted/src/assets/stylus/main.scss

@@ -130,7 +130,7 @@ li{
   font-size: 12px;
 }
 .nz-btn-size-large {
-  padding: 7px 15px;
+  padding: 6px 15px;
 }
 .nz-btn.nz-btn-size-normal.nz-btn-size-alien { //弹框顶部异形按钮
   height: 40px;
@@ -185,6 +185,10 @@ li{
   border-color: #e5e5e5 ;
   cursor: default;
 }
+.nz-btn-group {
+  border-radius: 4px;
+  display: inline-block;
+}
 .nz-btn-group .nz-btn:first-child:not(:last-child) {
   border-bottom-right-radius: 0;
   border-top-right-radius: 0;
@@ -193,6 +197,19 @@ li{
   border-bottom-left-radius: 0;
   border-top-left-radius: 0;
 }
+.nz-btn-group .nz-btn:not(:first-child):not(:last-child) {
+  border-radius: 0;
+}
+.nz-btn-group .nz-btn {
+  box-shadow: none;
+  vertical-align: top;
+}
+.nz-btn-group .nz-btn:not(:last-of-type) {
+  border-right: 1px solid rgba(162,162,162,0.50);
+}
+.nz-btn-group.nz-btn-group-light {
+  box-shadow: $btn-normal-shadow;
+}
 /* end--按钮组件*/
 
 /*table提示样式*/

nezha-fronted/src/components/charts/chart-table.scss

@@ -27,11 +27,11 @@
     clear: both;
   }
   .edit {
-    // position: absolute;
+    position: absolute;
-    // right: 40px;
+    right: 20px;
-    // top: 5px;
+    top: 17px;
-    // z-index: 10;
+    z-index: 10;
-      background: $btn-light-background-color;
+      /*background: $btn-light-background-color;
       border-radius: 6px;;
       border: 1px solid #ccc;
     .set-icon {
@@ -61,7 +61,7 @@
       cursor: pointer;
       float: right;
       font-size: 14px;
-    }
+    }*/
   }
   .chart-select {
     position: absolute;

nezha-fronted/src/components/charts/chart-table.vue

@@ -4,12 +4,17 @@
 <template>
 <div class="chart-table">
     <div class="clearfix">
-        <div class="float-left table-title">
+        <div class="table-title">
             {{data.title}}
         </div>
-        <div class="float-right">
+        <div class="nz-btn-group nz-btn-group-light edit">
+          <button type="button" @click="refreshChart" style="padding: 6px 14px 5px 14px;" class="nz-btn nz-btn-size-large nz-btn-style-light"><i style="font-size: 16px;" class="global-active-color el-icon-refresh-right"></i></button><button
+          @click="editChart" type="button" class="nz-btn nz-btn-size-large nz-btn-style-light"><i class="nz-icon nz-icon-edit"></i></button><button
+          @click="removeChart" type="button" class="nz-btn nz-btn-size-large nz-btn-style-light"><i class="el-icon-delete"></i></button><button
+          @click="showAllScreen" type="button" class="nz-btn nz-btn-size-large nz-btn-style-light"><i class="el-icon-full-screen"></i></button>
+        </div>
+        <!--<div class="float-right">
             <div class="edit">
-                <!-- v-if="firstShow" -->
                 <div class="list-icon">
                     <span @click="refreshChart" :title="$t('dashboard.refresh')" class="set-icon">
                         <i class="el-icon-refresh-right"></i>
@@ -25,7 +30,7 @@
                     </span>
                 </div>
             </div>
-        </div>
+        </div>-->
     </div>
     <div class="mt-10">
         <!--

nezha-fronted/src/components/charts/line-chart-block.scss

@@ -29,17 +29,17 @@
       white-space: pre-wrap !important;
     }
   }
-  .edit:after{
+  /*.edit:after{
     display: block;
     content: "";
     clear: both;
-  }
+  }*/
   .edit {
     position: absolute;
-    right: 40px;
+    right: 20px;
-    top: 15px;
+    top: 17px;
     z-index: 10;
-    background: $btn-light-background-color;
+    /*background: $btn-light-background-color;
     border-radius: 6px;;
     border: 1px solid #ccc;
     .set-icon {
@@ -71,7 +71,7 @@
       cursor: pointer;
       float: right;
       font-size: 14px;
-    }
+    }*/
   }
   .chart-select {
     position: absolute;

nezha-fronted/src/components/charts/line-chart-block.vue

@@ -4,7 +4,7 @@
 <template>
   <div class="line-chart-block" >
 
-    <div class="edit">
+    <!--<div class="edit">
       <div class="list-icon" v-if="firstShow">
         <span @click="refreshChart" :title="$t('dashboard.refresh')" class="set-icon" v-if="showSetting">
           <i class="el-icon-refresh-right"></i>
@@ -19,6 +19,12 @@
           <i class="el-icon-full-screen"></i>
         </span>
       </div>
+    </div>-->
+    <div class="nz-btn-group nz-btn-group-light edit" v-if="firstShow">
+      <button type="button" @click="refreshChart" style="padding: 6px 14px 5px 14px;" class="nz-btn nz-btn-size-large nz-btn-style-light" v-if="showSetting"><i style="font-size: 16px;" class="global-active-color el-icon-refresh-right"></i></button><button
+      @click="editChart" type="button" class="nz-btn nz-btn-size-large nz-btn-style-light" v-if="showSetting"><i class="nz-icon nz-icon-edit"></i></button><button
+      @click="removeChart" type="button" class="nz-btn nz-btn-size-large nz-btn-style-light" v-if="showSetting"><i class="el-icon-delete"></i></button><button
+      @click="showAllScreen" type="button" class="nz-btn nz-btn-size-large nz-btn-style-light"><i class="el-icon-full-screen"></i></button>
     </div>
 
     <div class="line-area" ref="lineChartArea"  id="lineChartArea"></div>

nezha-fronted/src/components/page/dashboard/panel.vue

@@ -44,8 +44,8 @@
                     <el-dropdown-item v-for="item in panelData" :key="item.id+1" :class="showPanel.id==item.id?'nz-dashboard-dropdown-bg':''" :command="item">{{item.name}}</el-dropdown-item>
                 </el-dropdown-menu>
             </el-dropdown>
-          <div class="nz-btn-group float-right margin-r-20">
+          <div class="nz-btn-group nz-btn-group-light float-right margin-r-20">
-            <button type="button" class="nz-btn nz-btn-size-normal nz-btn-style-light" @click="Refresh()"><i style="font-size: 13px" class="global-active-color nz-icon nz-icon-refresh"></i></button><el-popover v-model="visible" placement="bottom-start" width="200" trigger="click">
+            <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="Refresh()"><i style="font-size: 13px" class="global-active-color nz-icon nz-icon-refresh"></i></button><el-popover v-model="visible" placement="bottom-start" width="200" trigger="click">
               <ul class="popover_ul">
                 <li v-for="i in intervalList"  :style="{color:interval==i.value?'#31749C':''}" :key="i.value+i.name" @click="selectInterval(i.value)">
                   {{i.name}}