Merge branch 'feature/menu_search' into develop

Former-commit-id: 1b92128e89b29eda735f274243b152009c9fda1d [formerly 1b92128e89b29eda735f274243b152009c9fda1d [formerly 1b92128e89b29eda735f274243b152009c9fda1d [formerly 1b92128e89b29eda735f274243b152009c9fda1d [formerly 6d0ad889c8a55b39aed1234f33bd4289becb382f [formerly 628b796b47811eac1da0c6ef7a2857a0dc93762a]]]]]
Former-commit-id: b643ffbe716bc602991a675857c899fe4598de6b
Former-commit-id: 89177da3733ab7fd98ff5c038c2c2618353d1521
Former-commit-id: 1d1328895a0adc0e43e207167b48db8a77ea49f9 [formerly 75f6252347dc0048f1ce40a56690da8f0971f95a]
Former-commit-id: 422e9a18552f63ec5390a3f79688bdd733a72047
Former-commit-id: facbc0e703cfb4a43a2af3348cd69f63b7e1f425
Former-commit-id: 27f70579ee35411203e52c565854c81af6060e89
Former-commit-id: 85d532f0d569c2681dc4bd6cf2f39c3078ea30c5
Former-commit-id: 76aa5b8cc5b7097c23ddb18c93817d47591e100b

src/layout/header-aside/components/header-search/index.vue

@@ -0,0 +1,15 @@
+<template>
+  <el-button class="d2-mr btn-text can-hover" type="text" @click="handleClick">
+    <d2-icon name="search" style="font-size: 18px;"/>
+  </el-button>
+</template>
+
+<script>
+export default {
+  methods: {
+    handleClick () {
+      this.$emit('click')
+    }
+  }
+}
+</script>

src/layout/header-aside/components/mixin/menu.js

@@ -3,7 +3,7 @@ import util from '@/libs/util.js'
 export default {
   methods: {
     handleMenuSelect (index, indexPath) {
-      if (/^d2-menu-empty-\d+$/.test(index)) {
+      if (/^d2-menu-empty-\d+$/.test(index) || index === undefined) {
         this.$message.warning('临时菜单')
       } else if (/^https:\/\/|http:\/\//.test(index)) {
         util.open(index)

src/layout/header-aside/components/panel-search/components/panel-search-item/index.vue

@@ -0,0 +1,105 @@
+<template>
+  <div class="d2-panel-search-item" :class="hoverMode ? 'can-hover' : ''" flex>
+    <div class="d2-panel-search-item__icon" flex-box="0">
+      <div class="d2-panel-search-item__icon-box" flex="main:center cross:center">
+        <d2-icon v-if="item.icon" :name="item.icon"/>
+        <d2-icon-svg v-else-if="item.iconSvg" :name="item.iconSvg"/>
+        <d2-icon v-else name="file-o"/>
+      </div>
+    </div>
+    <div class="d2-panel-search-item__info" flex-box="1" flex="dir:top">
+      <div class="d2-panel-search-item__info-title" flex-box="1" flex="cross:center">
+        <span>{{item.title}}</span>
+      </div>
+      <div class="d2-panel-search-item__info-fullTitle" flex-box="0">
+        <span>{{item.fullTitle}}</span>
+      </div>
+      <div class="d2-panel-search-item__info-path" flex-box="0">
+        <span>{{item.path}}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    item: {
+      default: () => ({})
+    },
+    hoverMode: {
+      default: false
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '~@/assets/style/public.scss';
+.d2-panel-search-item {
+  height: 64px;
+  margin: 0px -20px;
+  &.can-hover {
+    @extend %unable-select;
+    margin: 0px;
+    &:hover {
+      background-color: #F5F7FA;
+      .d2-panel-search-item__icon {
+        .d2-panel-search-item__icon-box {
+          i {
+            font-size: 24px;
+            color: $color-primary;
+          }
+        }
+      }
+      .d2-panel-search-item__info {
+        .d2-panel-search-item__info-title {
+          color: $color-text-main;
+        }
+        .d2-panel-search-item__info-fullTitle {
+          color: $color-text-normal;
+        }
+        .d2-panel-search-item__info-path {
+          color: $color-text-normal;
+        }
+      }
+    }
+  }
+  .d2-panel-search-item__icon {
+    width: 64px;
+    .d2-panel-search-item__icon-box {
+      height: 64px;
+      width: 64px;
+      border-right: 1px solid $color-border-3;
+      i {
+        font-size: 20px;
+        color: $color-text-sub;
+      }
+      svg {
+        height: 20px;
+        width: 20px;
+      }
+    }
+  }
+  .d2-panel-search-item__info {
+    margin-left: 10px;
+    .d2-panel-search-item__info-title {
+      font-size: 16px;
+      line-height: 16px;
+      font-weight: bold;
+      color: $color-text-normal;
+    }
+    .d2-panel-search-item__info-fullTitle {
+      font-size: 10px;
+      line-height: 14px;
+      color: $color-text-placehoder;
+    }
+    .d2-panel-search-item__info-path {
+      margin-bottom: 4px;
+      font-size: 10px;
+      line-height: 14px;
+      color: $color-text-placehoder;
+    }
+  }
+}
+</style>

src/layout/header-aside/components/panel-search/index.vue

@@ -0,0 +1,200 @@
+<template>
+  <div class="panel-search" flex="dir:top">
+    <div class="panel-search__input-group" flex-box="0" flex="dir:top main:center cross:center">
+      <d2-icon-svg
+        class="panel-search__logo"
+        name="d2-admin-text"/>
+      <el-autocomplete
+        class="panel-search__input"
+        ref="input"
+        v-model="searchText"
+        suffix-icon="el-icon-search"
+        placeholder="搜索页面"
+        :fetch-suggestions="querySearch"
+        :trigger-on-focus="false"
+        :clearable="true"
+        @keydown.esc.native="handleEsc"
+        @select="handleSelect">
+        <d2-panel-search-item slot-scope="{ item }" :item="item"/>
+      </el-autocomplete>
+      <div class="panel-search__tip">
+        您可以使用快捷键
+        <span class="panel-search__key">
+          {{hotkey.open}}
+        </span>
+        唤醒搜索面板，按
+        <span class="panel-search__key">
+          {{hotkey.close}}
+        </span>
+        关闭
+      </div>
+    </div>
+    <div
+      v-if="resultsList.length > 0"
+      class="panel-search__results-group"
+      flex-box="1">
+      <el-card>
+        <div class="panel-search__results-group-inner">
+          <d2-panel-search-item
+            v-for="(item, index) in resultsList"
+            :key="index"
+            :item="item"
+            :hover-mode="true"
+            @click.native="handleResultsGroupItemClick(item.path)"/>
+        </div>
+      </el-card>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+import mixin from '../mixin/menu'
+export default {
+  mixins: [
+    mixin
+  ],
+  components: {
+    'd2-panel-search-item': () => import('./components/panel-search-item/index.vue')
+  },
+  data () {
+    return {
+      searchText: '',
+      results: []
+    }
+  },
+  computed: {
+    ...mapState('d2admin/search', [
+      'hotkey',
+      'pool'
+    ]),
+    // 这份数据是展示在搜索面板下面的
+    resultsList () {
+      return (this.results.length === 0 && this.searchText === '') ? this.pool.map(e => ({
+        value: e.fullTitle,
+        ...e
+      })) : this.results
+    }
+  },
+  methods: {
+    /**
+     * @description 过滤选项 这个方法在每次输入框的值发生变化时会触发
+     */
+    querySearch (queryString, callback) {
+      var pool = this.pool
+      const results = this.query(queryString ? pool : [], queryString)
+      this.results = results
+      callback(results)
+    },
+    /**
+     * @description 指定的数据源中根据指定的查询字符串过滤数据
+     * @param {Object} pool 需要过滤的数据
+     * @param {String} queryString 查询字符串
+     */
+    query (pool, queryString) {
+      return pool.filter(item => {
+        const path = item.path || ''
+        const fullTitle = item.fullTitle || ''
+        return (`${fullTitle}${path}`.toLowerCase().indexOf(queryString.toLowerCase()) >= 0)
+      }).map(e => ({
+        value: e.fullTitle,
+        ...e
+      }))
+    },
+    /**
+     * @description 聚焦输入框
+     */
+    focus () {
+      this.input = ''
+      setTimeout(() => {
+        this.$refs.input.focus()
+        // 还原
+        this.searchText = ''
+        this.results = []
+      }, 500)
+    },
+    /**
+     * @description 接收用户在列表中选择项目的事件
+     */
+    handleResultsGroupItemClick (path) {
+      // 如果用户选择的就是当前页面 就直接关闭搜索面板
+      if (path === this.$route.path) {
+        this.handleEsc()
+        return
+      }
+      // 用户选择的是其它页面
+      this.handleMenuSelect(path)
+    },
+    /**
+     * @description 接收用户在下拉菜单中选中事件
+     */
+    handleSelect ({ path }) {
+      // 如果用户选择的就是当前页面 就直接关闭搜索面板
+      if (path === this.$route.path) {
+        this.handleEsc()
+        return
+      }
+      // 用户选择的是其它页面
+      this.$nextTick(() => {
+        this.handleMenuSelect(path)
+      })
+    },
+    /**
+     * @augments 关闭输入框的下拉菜单
+     */
+    closeSuggestion () {
+      if (this.$refs.input.activated) {
+        this.$refs.input.suggestions = []
+        this.$refs.input.activated = false
+      }
+    },
+    /**
+     * @augments 接收用户触发的关闭
+     */
+    handleEsc () {
+      this.closeSuggestion()
+      this.$nextTick(() => {
+        this.$emit('close')
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '~@/assets/style/public.scss';
+.panel-search {
+  margin: 20px;
+  .panel-search__input-group {
+    height: 240px;
+    .panel-search__logo {
+      width: 80px;
+      height: 80px;
+      margin-bottom: 20px;
+    }
+    .panel-search__input {
+      width: 500px;
+    }
+    .panel-search__tip {
+      @extend %unable-select;
+      margin-top: 20px;
+      margin-bottom: 40px;
+      font-size: 12px;
+      color: $color-text-sub;
+      .panel-search__key {
+        padding: 1px 5px;
+        margin: 0px 2px;
+        border-radius: 2px;
+        background-color: $color-text-normal;
+        color: $color-bg;
+      }
+    }
+  }
+  .panel-search__results-group {
+    overflow: auto;
+    .panel-search__results-group-inner {
+      margin: -20px;
+    }
+  }
+}
+</style>