init

src/components/HeaderSearch/index.vue

@@ -0,0 +1,155 @@
+<template>
+  <div :class="{'show':show}" class="headerSearch">
+    <svg-icon class-name="search-icon" icon-class="search" @click="click" />
+    <el-select
+      ref="headerSearchSelect"
+      v-model="search"
+      :remote-method="remoteMethod"
+      filterable
+      default-first-option
+      remote
+      placeholder="Search"
+      class="header-search-select"
+      @blur="blur"
+      @change="change">
+      <el-option v-for="item in options" :key="item.path" :value="item" :label="item.title.join(' > ')"/>
+    </el-select>
+  </div>
+</template>
+
+<script>
+import path from 'path'
+import i18n from '@/lang'
+
+export default {
+  name: 'HeaderSearch',
+
+  data() {
+    return {
+      search: '',
+      options: [],
+      routersArr: [],
+      show: false
+    }
+  },
+  computed: {
+    routers() {
+      return this.$store.getters.permission_routers
+    },
+    lang() {
+      return this.$store.getters.language
+    }
+  },
+  watch: {
+    lang() {
+      this.routersArr = this.generateRouters(this.routers)
+    },
+    routers() {
+      this.routersArr = this.generateRouters(this.routers)
+    }
+  },
+  mounted() {
+    this.routersArr = this.generateRouters(this.routers)
+  },
+  methods: {
+    click() {
+      this.show = !this.show
+      if (this.show) {
+        this.$refs.headerSearchSelect.focus()
+      }
+    },
+    blur() {
+      this.$refs.headerSearchSelect.blur()
+      this.show = false
+    },
+    generateRouters(routers, basePath = '/') {
+      const res = []
+
+      for (const router of routers) {
+        if (router.hidden) { continue }
+
+        const data = {
+          path: path.resolve(basePath, router.path),
+          meta: { ...router.meta }
+        }
+
+        if (router.meta && router.meta.title) {
+          const i18ntitle = i18n.t(`route.${router.meta.title}`)
+          data.title = i18ntitle
+        }
+        if (router.children) {
+          const tempTags = this.generateRouters(router.children, router.path)
+          if (tempTags.length >= 1) {
+            data.children = tempTags
+          }
+        }
+        res.push(data)
+      }
+      return res
+    },
+    matchRouters(routers, query = query.trim().toLowerCase(), preTitle = []) {
+      let options = []
+      routers.forEach(router => {
+        const data = {
+          path: router.path,
+          title: router.title ? [...preTitle, router.title] : [...preTitle]
+        }
+        if (router.title && router.title.toLowerCase().includes(query)) {
+          options.push(data)
+        }
+        if (router.children) {
+          const tempTags = this.matchRouters(router.children, query, data.title)
+          if (tempTags.length >= 1) {
+            options = [...options, ...tempTags]
+          }
+        }
+      })
+      return options
+    },
+    remoteMethod(query) {
+      if (query !== '') {
+        this.options = this.matchRouters(this.routersArr, query)
+        console.log(this.options)
+      } else {
+        this.options = []
+      }
+    },
+    change(val) {
+      this.$router.push(val.path)
+      this.search = ''
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.headerSearch {
+  .search-icon {
+    cursor: pointer;
+  }
+
+  .header-search-select {
+    transition: width 0.3s, margin-left 0.3s;
+    width: 0;
+    overflow: hidden;
+    background: transparent;
+    border-radius: 0;
+    display: inline-block;
+
+    /deep/ .el-input__inner {
+      border-radius: 0;
+      border: 0;
+      padding-left: 0;
+      padding-right: 0;
+      box-shadow: none !important;
+      border-bottom: 1px solid #d9d9d9;
+    }
+  }
+
+  &.show {
+    .header-search-select {
+      width: 210px;
+    }
+  }
+}
+</style>

src/icons/svg/search.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1549853555372" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2478" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><defs><style type="text/css"></style></defs><path d="M938.2 832.6L723.8 618.1c-2.5-2.5-5.3-4.4-7.9-6.4 36.2-55.6 57.3-121.8 57.3-193.1C773.3 222.8 614.6 64 418.7 64S64 222.8 64 418.6c0 195.9 158.8 354.6 354.6 354.6 71.3 0 137.5-21.2 193.2-57.4 2 2.7 3.9 5.4 6.3 7.8L832.5 938c14.6 14.6 33.7 21.9 52.8 21.9 19.1 0 38.2-7.3 52.8-21.8 29.2-29.1 29.2-76.4 0.1-105.5M418.7 661.3C284.9 661.3 176 552.4 176 418.6 176 284.9 284.9 176 418.7 176c133.8 0 242.6 108.9 242.6 242.7 0 133.7-108.9 242.6-242.6 242.6" p-id="2479"></path></svg>

src/views/layout/components/Navbar.vue

@@ -6,6 +6,9 @@
 
     <div class="right-menu">
       <template v-if="device!=='mobile'">
+
+        <search class="right-menu-item" style="vertical-align: top;color: #5a5e66;font-size:20px;"/>
+
         <error-log class="errLog-container right-menu-item"/>
 
         <el-tooltip :content="$t('navbar.screenfull')" effect="dark" placement="bottom">
@@ -57,6 +60,7 @@ import Screenfull from '@/components/Screenfull'
 import SizeSelect from '@/components/SizeSelect'
 import LangSelect from '@/components/LangSelect'
 import ThemePicker from '@/components/ThemePicker'
+import Search from '@/components/HeaderSearch'
 
 export default {
   components: {
@@ -66,7 +70,8 @@ export default {
     Screenfull,
     SizeSelect,
     LangSelect,
-    ThemePicker
+    ThemePicker,
+    Search
   },
   computed: {
     ...mapGetters([