From e73e4ced3d7d7e08326c7d6529a1f38cdf14bd26 Mon Sep 17 00:00:00 2001
From: chenjinsong <523037378@qq.com>
Date: Mon, 20 Jan 2020 11:56:32 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E8=B0=83=E6=95=B4panel=E4=B8=AD?=
 =?UTF-8?q?=E5=9B=BE=E8=A1=A8=E7=9A=84=E6=8C=89=E9=92=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 nezha-fronted/src/assets/stylus/main.scss     | 19 ++++++++++++++++++-
 .../src/components/charts/chart-table.scss    | 12 ++++++------
 .../src/components/charts/chart-table.vue     | 13 +++++++++----
 .../components/charts/line-chart-block.scss   | 12 ++++++------
 .../components/charts/line-chart-block.vue    |  8 +++++++-
 .../src/components/page/dashboard/panel.vue   |  4 ++--
 6 files changed, 48 insertions(+), 20 deletions(-)

diff --git a/nezha-fronted/src/assets/stylus/main.scss b/nezha-fronted/src/assets/stylus/main.scss
index b3fd86a56..6d820e1cd 100644
--- a/nezha-fronted/src/assets/stylus/main.scss
+++ b/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提示样式*/
diff --git a/nezha-fronted/src/components/charts/chart-table.scss b/nezha-fronted/src/components/charts/chart-table.scss
index fd26aa1a5..63946151d 100644
--- a/nezha-fronted/src/components/charts/chart-table.scss
+++ b/nezha-fronted/src/components/charts/chart-table.scss
@@ -27,11 +27,11 @@
     clear: both;
   }
   .edit {
-    // position: absolute;
-    // right: 40px;
-    // top: 5px;
-    // z-index: 10;
-      background: $btn-light-background-color;
+    position: absolute;
+    right: 20px;
+    top: 17px;
+    z-index: 10;
+      /*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;
diff --git a/nezha-fronted/src/components/charts/chart-table.vue b/nezha-fronted/src/components/charts/chart-table.vue
index a1c98e893..92a9c3bd4 100644
--- a/nezha-fronted/src/components/charts/chart-table.vue
+++ b/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">
         <!--
diff --git a/nezha-fronted/src/components/charts/line-chart-block.scss b/nezha-fronted/src/components/charts/line-chart-block.scss
index 6b6b12424..d2f60bc60 100644
--- a/nezha-fronted/src/components/charts/line-chart-block.scss
+++ b/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;
-    top: 15px;
+    right: 20px;
+    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;
diff --git a/nezha-fronted/src/components/charts/line-chart-block.vue b/nezha-fronted/src/components/charts/line-chart-block.vue
index 1986a5cdb..ff419fc39 100644
--- a/nezha-fronted/src/components/charts/line-chart-block.vue
+++ b/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>
diff --git a/nezha-fronted/src/components/page/dashboard/panel.vue b/nezha-fronted/src/components/page/dashboard/panel.vue
index 1ddd0aa8c..e33fe96dc 100644
--- a/nezha-fronted/src/components/page/dashboard/panel.vue
+++ b/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">
-            <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">
+          <div class="nz-btn-group nz-btn-group-light float-right margin-r-20">
+            <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}}