From c52296525776e7ec07a42f307b2fbf25baa373ef Mon Sep 17 00:00:00 2001
From: hanyuxia <hanyuxia@iie.ac.cn>
Date: Tue, 10 Mar 2020 12:16:10 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E6=96=B0=E5=8A=9F=E8=83=BD=20webshell?=
 =?UTF-8?q?=E6=A8=A1=E5=9D=97=201.header=E7=9A=84xshell=E5=85=A5=E5=8F=A3?=
 =?UTF-8?q?=E5=8F=B3=E4=B8=8A=E8=A7=92=E5=A2=9E=E5=8A=A0=E6=8F=90=E7=A4=BA?=
 =?UTF-8?q?=E6=89=93=E5=BC=80console=E7=AA=97=E5=8F=A3=E6=95=B0=E9=87=8F?=
 =?UTF-8?q?=E7=9A=84=E8=A7=92=E6=A0=87=202.header=E5=8C=BA=E5=9F=9F?=
 =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E5=9B=BE=E6=A0=87=E5=8F=B3=E4=BE=A7=E6=B7=BB?=
 =?UTF-8?q?=E5=8A=A0=E7=AB=96=E7=BA=BF=EF=BC=8C=E5=88=86=E9=9A=94=E8=8F=9C?=
 =?UTF-8?q?=E5=8D=95=20fix=EF=BC=9A=E4=BF=AE=E6=94=B9=E9=97=AE=E9=A2=98=20?=
 =?UTF-8?q?1.header=E5=8C=BA=E5=9F=9F=E5=9B=BE=E6=A0=87=E8=8F=9C=E5=8D=95?=
 =?UTF-8?q?=E5=AE=BD=E5=BA=A6=E8=B0=83=E6=95=B4=E4=B8=BA50px=EF=BC=8C?=
 =?UTF-8?q?=E8=B0=83=E6=95=B4=E6=B7=BB=E5=8A=A0=E8=8F=9C=E5=8D=95=E4=B8=8E?=
 =?UTF-8?q?dashboard=E8=8F=9C=E5=8D=95=E8=B7=9D=E7=A6=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/common/header.vue          | 55 ++++++++++++++-----
 1 file changed, 40 insertions(+), 15 deletions(-)

diff --git a/nezha-fronted/src/components/common/header.vue b/nezha-fronted/src/components/common/header.vue
index 8d791456d..c32f50231 100644
--- a/nezha-fronted/src/components/common/header.vue
+++ b/nezha-fronted/src/components/common/header.vue
@@ -6,26 +6,17 @@
       mode="horizontal"
       active="1"
       unique-opened
-    ><!--
-      <el-submenu index="-1" >
-        <template slot="title" >
-          <div  @click="cli()" >
-            <i class="nz-icon nz-icon-cli"></i>
-          </div>
-        </template>
-      </el-submenu>-->
+    >
       <el-menu-item :index="-1" >
         <div @click="cli()" >
           <i class="nz-icon nz-icon-cli"></i>
-          <!--
-          <div style="background-color:orangered;border-radius:38%;width:20px;height:15px;position:absolute;right:15px;top:8px;border:solid 0px red;">10+</div>
-        -->
+          <div class="right-tip" v-show="$store.state.consoleCount>0">{{$store.state.consoleCount<=10?$store.state.consoleCount:'10+'}}</div>
         </div>
       </el-menu-item>
-      <el-submenu index="0" popper-class="nz-submenu">
+      <el-submenu index="0" popper-class="nz-submenu" class="icon-menu-item">
         <template slot="title">
-            <div class="menu-icon-create">
-             <i class="nz-icon-create-square nz-icon"></i>
+            <div class="menu-icon-create ">
+             <i class="nz-icon-create-square nz-icon" ></i>
             </div>
         </template>
         <template v-for="(item, index) in createMenu">
@@ -36,6 +27,9 @@
           </el-menu-item>
         </template>
       </el-submenu>
+      <el-menu-item :index="-2" >
+        <div class="vertical-line" ></div>
+      </el-menu-item>
       <el-submenu index="1" popper-class="nz-submenu">
         <template slot="title">
           <div @click="jumpTo('panel')" :class ="(activeIndex == 'panel' || activeIndex == 'metricPreview') ? 'menu-active' :'' " >
@@ -577,12 +571,30 @@
     height: 50px;
     line-height: 50px;
   }
+  .header .el-menu--horizontal>.icon-menu-item .el-submenu__title {
+    min-width: 50px !important;
+    /*margin-right:20px;*/
+  }
+  .header .vertical-line{
+    display:inline-block;
+    border-left:solid 2px white;
+    line-height:30px !important;
+    height:30px !important;
+    min-width:0px !important;
+    color:white;
+    margin-right: 8px;
+    margin-left: 8px;
+    margin-top: -8px;
+  }
+  .header .vertical-line:hover{
+    cursor:default !important;
+  }
   /* top el-menu-item sytle------start*/
   .header .el-menu--horizontal>.el-menu-item  {
     height: 50px;
   }
   .header .el-menu--horizontal>.el-menu-item >div {
-    min-width: 80px;
+    min-width: 50px;
     text-align: center;
     /*color:$header-text-color;*/
     padding: 0;
@@ -601,6 +613,19 @@
   .header .el-menu--horizontal>.el-menu-item:not(.is-disabled):focus, .header .el-menu--horizontal>.el-menu-item:not(.is-disabled):hover {
     background-color:transparent !important;
   }
+  .header .right-tip{
+    vertical-align:middle;
+    line-height: 15px;
+    font-size:6px;
+    background-color:orangered;
+    opacity:0.9;color:#4c4c4c;
+    border-radius:7px;
+    min-width:25px;
+    height:15px;
+    position:absolute;
+    left: 25px;
+    bottom: 27px;
+  }
   /* top el-menu-item sytle------end*/
   .el-menu.el-menu--horizontal {
     border-bottom: 0px;