NEZ-1514 feat:全局搜索功能(15%)

nezha-fronted/src/assets/css/components/common/globalSearch/globalSearch.scss

@@ -0,0 +1,71 @@
+.global-search-bac{
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 1;
+  background: rgba(0,0,0,0.2);
+  height: 100vh;
+  width: 100vw;
+  display: flex;
+  justify-content: space-around;
+  //align-items: center;
+  box-sizing: border-box;
+  padding-top: 80px;
+}
+.global-search-box.search-after{
+  height: 82%;
+  min-height: 894px;
+}
+.global-search-box {
+  //background: $--background-color-empty;
+  background: rgba(0,0,0,0);
+  width: 80%;
+  max-width: 1040px;
+  height: auto;
+  display: flex;
+  flex-direction: column;
+  .global-search-input {
+    background: $--background-color-empty;
+    height: 72px;
+    font-size: 26px;
+    display: flex;
+    border-radius: 6px;
+    line-height: 72px;
+    .nz-icon-search {
+      margin-left: 22px;
+      margin-right: 20px;
+      font-size: 26px;
+      color: $--color-text-primary;
+    }
+    .el-input__inner {
+      border: none !important;
+      border-right: 1px solid $--border-color-light !important;
+      font-size: 26px;
+      height: 40px;
+      line-height: 72px;
+      color: $--color-text-regular;
+      vertical-align: middle;
+    }
+    .global-search-cancel{
+      font-size: 16px;
+      letter-spacing: 0;
+      font-weight: 400;
+      margin-left: 20px;
+      margin-right: 20px;
+      color: $--color-text-primary;
+    }
+  }
+  .global-search-input.search-after{
+    border-radius: 6px 6px 0 0;
+  }
+  .global-search-content{
+    flex: 1;
+    background: $--background-color-empty;
+    border-top: 1px solid $--border-color-light;
+    .global-search-footer {
+      height: 72px;
+      border-radius: 0 0 6px 6px;
+      background: $--background-color-empty;
+    }
+  }
+}

nezha-fronted/src/assets/css/components/index.scss

@@ -53,6 +53,7 @@
 @import './common/table/settings/userTable.scss';
 @import './common/table/settings/switchTab.scss';
 @import './common/table/special/endpointQuery.scss';
+@import './common/globalSearch/globalSearch';
 @import './common/browserWindowZoom.scss';
 @import './common/chartUnit.scss';
 @import './common/elementSet.scss';

nezha-fronted/src/components/common/globalSearch/globalSearch.vue

@@ -0,0 +1,95 @@
+<template>
+  <div class="global-search-bac" v-if="globalShow" @click.self="close">
+    <div class="global-search-box" :class="firstShow? '' : 'search-after'" @click.self="close">
+      <div class="global-search-input" :class="firstShow? '' : 'search-after'">
+        <i class="nz-icon nz-icon-search" v-loading="loading"></i>
+        <el-input v-model="searchStr" @keydown.native.enter="searchAll" ref="searchStr"></el-input>
+        <div @click="close" class="global-search-cancel">
+          Cancel
+        </div>
+      </div>
+      <div v-loading="loading" class="global-search-content" v-if="!firstShow">
+        <div class="global-search-content-content" >
+          content
+        </div>
+        <div class="global-search-footer">
+          footer
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'globalSearch',
+  computed: {
+    globalShow () {
+      return this.$store.getters.getGlobalShow
+    }
+  },
+  data () {
+    return {
+      firstShow: true,
+      searchStr: '',
+      loading: false,
+      selectIndex: ''
+    }
+  },
+  watch: {
+    globalShow: {
+      immediate: true,
+      deep: true,
+      handler (n) {
+        if (n) {
+          this.bindEvent()
+        }
+      }
+    }
+  },
+  methods: {
+    close () {
+      this.searchStr = ''
+      this.firstShow = true
+      this.$store.commit('setGlobalShow', false)
+      this.unbindEvent()
+    },
+    bindEvent () {
+      window.addEventListener('keydown', this.keyDown)
+    },
+    unbindEvent () {
+      this.selectIndex = ''
+      window.removeEventListener('keydown', this.keyDown)
+    },
+    keyDown (e) {
+      console.log(e, e.target, e.keyCode)
+      if (e.target._prevClass === 'el-input__inner') {
+        console.log('blur')
+        this.$refs.searchStr.blur()
+        return
+      }
+      if (e.keyCode === '13') {
+        this.jumpTo()
+      }
+      if (e.keyCode === '56') {
+        this.selectIndex++
+      }
+      if (e.keyCode === '78') {
+        this.selectIndex--
+      }
+    },
+    searchAll () {
+      this.selectIndex = 0
+      this.firstShow = false
+      this.loading = true
+      // this.$get().then(res=>{
+      //   this.loading = false
+      // })
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

nezha-fronted/src/components/layout/header.vue

@@ -5,6 +5,13 @@
       <el-breadcrumb-item v-for="crumb in breadcrumb" :key="crumb.code">{{$t(crumb.i18n)}}</el-breadcrumb-item>
     </el-breadcrumb>
     <div class="header-menu">
+      <el-dropdown trigger="click">
+        <el-dropdown-menu></el-dropdown-menu>
+        <div id="header-open-global-search" @click="openGlobalSearch">
+          <div class="header-menu__item"><i class="nz-icon nz-icon-search"></i></div>
+          <span v-show="$store.state.consoleCount>0" class="right-tip">{{$store.state.consoleCount<=10?$store.state.consoleCount:'10+'}}</span>
+        </div>
+      </el-dropdown>
       <el-dropdown trigger="click">
         <div class="header-menu__item"><i class="nz-icon nz-icon-more-app"></i></div>
         <el-dropdown-menu slot="dropdown" class="right-box-select-top right-public-box-dropdown-top">
@@ -118,7 +125,10 @@ export default {
     cli () {
       this.$store.commit('openConsole')
     },
-
+    // 打开全局搜索
+    openGlobalSearch () {
+      this.$store.commit('setGlobalShow', true)
+    },
     /**
        * @param route 路由地址
        * @param parentMenu 菜单大类

nezha-fronted/src/components/layout/home.vue

@@ -7,6 +7,8 @@
     </div>
     <!--web-ssh-->
     <web-ssh ref="webSsh"></web-ssh>
+    <!--global-search-->
+    <global-search ref="globalSearch"></global-search>
     <!--table悬浮提示容器-->
     <span class="el-popover table-tooltip"></span>
     <!-- 临时文本dom，用来计算文本长度 -->
@@ -20,13 +22,16 @@ import Header from './header'
 import webSSH from '../cli/webSSH'
 import leftMenu from './leftMenu'
 import container from './container'
+import globalSearch from '@/components/common/globalSearch/globalSearch'
+
 export default {
   name: 'home',
   components: {
     Header,
     leftMenu,
     container,
-    'web-ssh': webSSH
+    'web-ssh': webSSH,
+    globalSearch
   },
   data () {
     return {

nezha-fronted/src/store/index.js

@@ -40,12 +40,16 @@ const store = new Vuex.Store({
     metricsList: [],
     langList: [],
     i18nReady: false,
-    timeFormatMain: localStorage.getItem('nz-default-dateFormat') || 'YYYY-MM-DD HH:mm:ss'
+    timeFormatMain: localStorage.getItem('nz-default-dateFormat') || 'YYYY-MM-DD HH:mm:ss',
+    globalShow: false
   },
   getters: {
     getTimeFormatMain (state) {
       return state.timeFormatMain
     },
+    getGlobalShow (state) {
+      return state.globalShow
+    },
     getLinkData (state) {
       return state.linkData
     },
@@ -174,6 +178,9 @@ const store = new Vuex.Store({
     setTimeFormatMain (state, timeFormat) {
       state.timeFormatMain = timeFormat
     },
+    setGlobalShow (state, globalShow) {
+      state.globalShow = globalShow
+    },
     i18nReady (state, ready) {
       state.i18nReady = ready
     }