perf: 工具栏样式调整

1.顶部工具栏样式调整 2.字体文件引用方式调整
2020-02-12 12:06:37 +08:00
parent 6e18c19401
commit e62bf92ff7
7 changed files with 414 additions and 58 deletions
--- a/nezha-fronted/index.html
+++ b/nezha-fronted/index.html
@@ -12,10 +12,6 @@
      padding: 0;
      font-family: NotoSans;
    }
-    @font-face {
-      font-family: 'NotoSans';   /*字体名称*/
-      src: url('./font/NotoSansSC-6.ttf');
-    }
  </style>
 </head>

--- a/nezha-fronted/src/assets/css/main.css
+++ b/nezha-fronted/src/assets/css/main.css
@@ -0,0 +1,4 @@
+@font-face {
+  font-family: 'NotoSans';   /*字体名称*/
+  src: url('font/NotoSansSC-6.ttf');
+}
--- a/nezha-fronted/src/assets/stylus/main.scss
+++ b/nezha-fronted/src/assets/stylus/main.scss
@@ -1,4 +1,3 @@
-
 [v-cloak] {
  display: none !important;
 }
@@ -65,6 +64,9 @@ li{
 .margin-b-30 {
  margin-bottom: 30px !important;
 }
+.margin-t-m1 {
+  margin-top: -1px;
+}
 .float-left {
  float: left;
 }
@@ -153,6 +155,7 @@ li{
 .nz-btn.nz-btn-size-normal {
  font-size: 12px;
  padding: 4px 8px;
+  max-height: 24px;
 }
 .nz-btn.nz-btn-size-small {
  font-size: 12px;
@@ -220,6 +223,9 @@ li{
  border-radius: 4px;
  display: inline-block;
 }
+.nz-btn-group-size-normal {
+  max-height: 24px;
+}
 .nz-btn-group .nz-btn:first-child:not(:last-child) {
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
@@ -434,6 +440,10 @@ li{
  width: 260px;
  margin: -1px 20px 0 0;
 }
+.top-tool-right {
+  display: flex;
+  align-content: center;
+}
 /* end--顶部工具栏*/

 /* start--内容*/
--- a/nezha-fronted/src/components/page/dashboard/panel.vue
+++ b/nezha-fronted/src/components/page/dashboard/panel.vue
@@ -22,18 +22,19 @@
            </el-dropdown-menu>
          </el-dropdown>
        </div>
-        <div>
-          <button @click="toAddChart"
-                  class="nz-btn nz-btn-size-normal nz-btn-style-light float-right nz-btn-min-width-82">
-                      <span class="top-tool-btn-txt">
-                          <i class="nz-icon-create-square nz-icon"></i>
-                          {{$t('overall.add')}}</span>
-          </button>
-          <div class="top-tool-search float-right">
-            <search-input ref="searchInput" :searchMsg="searchMsg" @search="search"></search-input>
+        <div class="top-tool-right">
+          <div class="panel-calendar margin-r-20">
+            <div class="block">
+              <el-date-picker prefix-icon=" " class="nz-dashboard-picker" size="mini" ref="calendar"
+                              format="yyyy/MM/dd HH:mm" @change="dateChange" v-model="searchTime" type="datetimerange"
+                              :picker-options="pickerOptions" :range-separator="$t('dashboard.panel.to')"
+                              :start-placeholder="$t('dashboard.panel.startTime')"
+                              :end-placeholder="$t('dashboard.panel.endTime')" align="right">
+              </el-date-picker>
+            </div>
          </div>

-          <div class="nz-btn-group nz-btn-group-light float-right margin-r-20">
+          <div class="nz-btn-group nz-btn-group-size-normal nz-btn-group-light 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: 12px" class="global-active-color nz-icon nz-icon-refresh"></i>
@@ -51,16 +52,17 @@
            </button>
          </el-popover>
          </div>
-          <div class="panel-calendar margin-r-20">
-            <div class="block">
-              <el-date-picker prefix-icon=" " class="nz-dashboard-picker" size="mini" ref="calendar"
-                              format="yyyy/MM/dd HH:mm" @change="dateChange" v-model="searchTime" type="datetimerange"
-                              :picker-options="pickerOptions" :range-separator="$t('dashboard.panel.to')"
-                              :start-placeholder="$t('dashboard.panel.startTime')"
-                              :end-placeholder="$t('dashboard.panel.endTime')" align="right">
-              </el-date-picker>
-            </div>
+
+          <div class="top-tool-search">
+            <search-input ref="searchInput" :searchMsg="searchMsg" @search="search"></search-input>
          </div>
+
+          <button @click="toAddChart"
+                  class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-82">
+                      <span class="top-tool-btn-txt">
+                          <i class="nz-icon-create-square nz-icon"></i>
+                          {{$t('overall.add')}}</span>
+          </button>
        </div>
      </div>
      <div class="table-list" @scroll="onScroll" id="tableList">
--- a/nezha-fronted/src/components/page/project/metricSearch.vue
+++ b/nezha-fronted/src/components/page/project/metricSearch.vue
@@ -1,5 +1,21 @@
 <template>
-  <div :class="componetStyle">
+  <div class="new-search" >
+    <div class="search-input-all input-position" @click="">
+      <!--            历史记录-->
+      <div class="search-history">
+        <i class="el-icon-time" @click="look_history" id="search-view-history"></i>
+      </div>
+      <!--            搜索框-->
+      <div class="input-center-box" id="input-center-box">
+      </div>
+      <!--            清空内容-->
+      <div class="clear-search" @click="">
+        <i class="el-icon-close"></i>
+      </div>
+    </div>
+    <button @click="" type="button" class="nz-btn nz-btn-size-normal nz-btn-style-light float-right" id="search-input-search"><i class="el-icon-search"></i></button>
+  </div>
+  <!--<div class="metric-search-box margin-r-20" :class="componetStyle">
    <el-popover placement="bottom"
                width="200"
                v-model="historyShow"
@@ -22,14 +38,12 @@
        @select="handleSelect"
        ref="queryExpression"
      >
-        <i slot="prefix" class="el-input__icon el-icon-search"></i>
        <template slot-scope="{ item }">
-          <span>{{ item.key }}<!--:{{item.type}}--></span>
+          <span>{{ item.key }}&lt;!&ndash;:{{item.type}}&ndash;&gt;</span>
        </template>
-      </el-autocomplete>
-      <button class="nz-btn nz-btn-size-normal nz-btn-style-light" @click="filterTabelData">GO</button>
-    </div>
+      </el-autocomplete><button class="nz-btn nz-btn-size-normal nz-btn-style-light" @click="filterTabelData"><i class="el-icon-search"></i></button>
    </div>
+  </div>-->

 </template>

@@ -162,8 +176,8 @@
    }
 </script>

-<style scoped>
-  .search-input-history{
+<style scoped lang="scss">
+  /*  .search-input-history{
    display: inline-block;
    border:1px solid  #e5e5e5;
    border-radius: 10%;
@@ -174,4 +188,329 @@
  .history-li:hover{
    background-color: #e5e5e5;
  }
+
+  .metric-search-box {
+    display: inline-block;
+  }*/
+
+ .new-search{
+   display: flex;
+   position: relative;
+   line-height: 25px;
+   border-radius: 4px;
+   border: 1px solid #D8D8D8;
+   /*box-shadow: inset 0 0 5px 0 rgba(184,184,184,0.80);*/
+ }
+.new-search .nz-btn {
+  box-shadow: 0 0 1px 1px #d8d8d8;
+  border-radius: 0 4px 4px 0;
+}
+.new-search .search-input-all{
+  width: 240px;
+  background-color: $content-right-background-color;
+  color: rgba(0,0,0,.55);
+  height: 24px;
+  line-height: 24px;
+  border-bottom-left-radius: 5px;
+  border-top-left-radius: 5px;
+  display: flex;
+  position: relative;
+
+}
+input {
+  background-color: $content-right-background-color;
+}
+.search-input-all .btn-retract{
+  padding: 0px 4px;
+  text-align: center;
+}
+.search-input-all .search-history{
+  padding: 0px 7px;
+  height: 16px;
+  line-height: 16px;
+  text-align: center;
+  border-right: 1px solid #e5e5e5;
+  margin-top: 4px;
+  position: relative;
+}
+.search-input-all .input-center-box{
+  flex: 1;
+  height: 100%;
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+.input-center-box::-webkit-scrollbar {/*滚动条整体样式*/
+  width: 4px;     /*高宽分别对应横竖滚动条的尺寸*/
+  height: 6px;
+}
+.input-center-box::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
+  border-radius: 3px;
+  -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
+  background: rgba(0,0,0,0.2);
+}
+.input-center-box::-webkit-scrollbar-track {/*滚动条里面轨道*/
+  -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
+  border-radius: 0;
+  background: rgba(0,0,0,0.1);
+}
+.search-input-all .clear-search{
+  padding: 0 5px;
+  text-align: center;
+  font-size: 12px;
+}
+.dataBackG{
+  background: #f0f0f0;
+}
+.none{
+  display: none !important;
+}
+.new-search-btn {
+  padding: 0 4px;
+  cursor: pointer;
+}
+.search-text{
+  display: inline-block;
+  margin-right: 20px;
+}
+.sreach_box{
+  position: relative;
+  width: 80%;
+  height: 25px;
+  padding: 20px;
+  background: #fff;
+  margin: 200px auto;
+}
+.keyring_sreach_right_btn{
+  width: 18%;
+  height: 25px;
+  float: right;
+  line-height: 25px;
+  text-align: center;
+  border: 1px solid #dfdfdf;
+}
+.keyring_sreach_right_btn .right-btn-group{
+  float: left;
+  width: 80%;
+  border-right: 1px solid #dfdfdf;
+  box-sizing: border-box;
+}
+.keyring_sreach_right_btn .right-btn-icon{
+  float: left;
+  width: 19%;
+}
+.sreach_box .close_zhezhao{
+  position: absolute;
+  right: 0;
+  top: -50px;
+  width: 24px;
+  height: 25px;
+  border-radius: 50%;
+  background: #fff;
+  text-align: center;
+  line-height: 28px;
+  font-size: 12px;
+}
+
+.localStorage_list_box{
+  position: absolute;
+  left: 10px;
+  top: 36px;
+  width: auto;
+  min-width:250px;
+  max-width: 350px;
+  height: auto;
+  border: 1px solid #dfdfdf;
+  background: #fff;
+  color: #2e2e2e;
+  text-align: left;
+  border-radius: 3px;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+  z-index: 9999;
+  font-size: 12px;
+}
+.localStorage_list_box .list_box_title{
+  width: 100%;
+  height: 40px;
+  line-height: 40px;
+  line-height: 40px;
+  text-align: center;
+  position: relative;
+  border-bottom: 1px solid #dfdfdf;
+  color: #2e2e2e;
+}
+.localStorage_list_box .list_box_title i{
+  position: absolute;
+  right: 10px;
+}
+.localStorage_list_box .list_box_content{
+  text-align: left;
+  padding: 5px 0;
+  box-sizing: border-box;
+  border-bottom: 1px solid #dfdfdf;
+}
+.localStorage_list_box ul li{
+  padding: 5px 10px;
+  line-height: 20px;
+}
+.localStorage_list_box ul li:hover{
+  background: #f0f0f0;
+  cursor:pointer;
+}
+
+.localStorage_list_box ul li span{
+  color: #2e2e2e;
+}
+.localStorage_list_box ul li .value{
+  font-weight: 600;
+}
+.localStorage_list_box .list_box_clear{
+  padding-left: 10px;
+  line-height: 40px;
+}
+.localStorage_list_box .list_box_clear:hover{
+  background: #f0f0f0;
+  cursor:pointer;
+}
+.input-center-box .sreach_fixe_left{
+  width: auto;
+  display: flex;
+  height: 100%;
+  min-width: 100%;
+}
+.sreach_list{
+  display: flex;
+  justify-content:flex-start;
+  height: 100%;
+  padding-left: 10px;
+}
+.sreach_fixe_left .selectinfo_box{
+  display: flex;
+  flex-shrink: 0;
+  width: auto;
+  height: auto;
+  margin: 3px 2px;
+  font-size: 12px;
+}
+.selectinfo_box .select_condition{
+  float:left;
+  height: 13px;
+  padding: 3px;
+  background:#f8f8f8;
+  line-height: 13px;
+  color: rgba(0,0,0,.55);
+}
+.selectinfo_box .select_content{
+  float: left;
+  line-height: 13px;
+  height: 13px;
+  padding: 3px;
+  background: #f0f0f0;
+  color: rgba(0,0,0,0.85);
+  display: flex;
+}
+.select_input{
+  height: 100%;
+  flex: 1;
+  float: left;
+  min-width: 100px;
+}
+.select_input input{
+  width: 100%;
+  height: 100%;
+  border: none;
+  float: left;
+  padding-left: 5px !important;
+  box-sizing: border-box;
+}
+.select_input input:focus {
+  border:none;
+  box-shadow:none;
+}
+.select_input .select_info_list{
+  position: absolute;
+  left: 100px;
+  top: 36px;
+  height: auto;
+  width: auto;
+  max-height: 240px;
+  padding: 5px 0;
+  background: #fff;
+  border: 1px solid #e5e5e5;
+  border-radius: 3px;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+  overflow-y: auto;
+  z-index: 9999;
+}
+.select_info_list ul li{
+  padding: 5px 10px;
+  line-height: 20px;
+}
+.select_info_list ul li:hover{
+  background: #f0f0f0;
+  cursor: pointer;
+}
+.sreach_input .input{
+  flex: 1;
+  height: 100%;
+  padding-left: 10px !important;
+  box-sizing: border-box;
+  position: relative;
+}
+.sreach_input .input input{
+  width: 100%;
+  height: 100%;
+  border: none;
+  padding: 0 !important;
+  float: left;
+}
+.sreach_box input:focus {
+  outline: none;
+  border-color: transparent;
+  box-shadow: none;
+}
+.sreach_input input::placeholder{
+  color: rgba(0,0,0,0.55)
+}
+.input_list{
+  position: absolute;
+  left: 47px;
+  top: 36px;
+  width: auto;
+  max-width: 400px;
+  max-height: 240px;
+  min-width: 300px;
+  background: #fff;
+  border-radius: 3px;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+  z-index: 9;
+  overflow-y: auto;
+  font-size: 12px;
+}
+.input_list ul{
+  padding: 4px 0;
+}
+.input_list ul li{
+  padding: 4px 10px;
+  line-height: 16px;
+  height: 20px;
+}
+.input_list ul li:hover{
+  background: #f0f0f0;
+  cursor:pointer;
+}
+.search-style-ind{
+  background: #f0f0f0;
+  cursor:pointer;
+}
+.sreach_fixe>i{
+  margin-right: 15px;
+}
+.is-disabled{
+  color: #C0C4CC;
+  cursor: not-allowed !important;
+  background: #fff !important;
+}
+li {
+  list-style: none;
+}
 </style>
--- a/nezha-fronted/src/components/page/project/project.vue
+++ b/nezha-fronted/src/components/page/project/project.vue
@@ -157,7 +157,8 @@
          </div>
        </div>
        <!--时间选择器-->
-        <div>
+        <div class="top-tool-right">
+          <div class="margin-r-20 margin-t-m1">
            <button @click="changeTime(-10)" class="nz-btn nz-btn-size-normal nz-btn-style-light"><i class="el-icon-d-arrow-left"></i></button>
            <el-date-picker
              v-model="formatTime"
@@ -171,8 +172,11 @@
              @change="pickTime"
              >
            </el-date-picker>
-          <button @click="changeTime(10)" class="nz-btn nz-btn-size-normal nz-btn-style-light margin-r-20"><i class="el-icon-d-arrow-right"></i></button>
+            <button @click="changeTime(10)" class="nz-btn nz-btn-size-normal nz-btn-style-light"><i class="el-icon-d-arrow-right"></i></button>
+          </div>
+          <div class="top-tool-search">
            <metric-search :metrics="metricList" :labels="labelList"  v-if="tableShow == 3" @expression-change="tableFilter"></metric-search>
+          </div>
          <button @click="viewGraph" slot="reference" class="nz-btn nz-btn-size-normal nz-btn-style-normal nz-btn-min-width-120">
            <span class='top-tool-btn-txt'>{{$t('project.endpoint.addGraph')}}</span>
          </button>
--- a/nezha-fronted/src/main.js
+++ b/nezha-fronted/src/main.js
@@ -1,6 +1,7 @@
 //import "./assets/css/main.css";
 import './assets/stylus/index.scss'
 import "./assets/css/nzIcon.css";
+import "./assets/css/main.css";
 import 'element-ui/lib/theme-chalk/index.css';
 import ElementUI from 'element-ui';
 import 'xterm/dist/xterm.css'