基本完成

Former-commit-id: 4d9b039cac8205ae66e7c0189ba6c8ca0ee69068 [formerly 4d9b039cac8205ae66e7c0189ba6c8ca0ee69068 [formerly 4d9b039cac8205ae66e7c0189ba6c8ca0ee69068 [formerly 4d9b039cac8205ae66e7c0189ba6c8ca0ee69068 [formerly ef07da1feaee3062a8b597c01abe8676ec8fee1f [formerly 735ab19a7fa3c151c317952e38198c5803cdacad]]]]]
Former-commit-id: 5ad5a87bb45c1a1ed8b63d80cf868339daceb31f
Former-commit-id: 02ddcd34082c40f2e09ea08666912f8d6eb3fb65
Former-commit-id: 0b4940b7b5f60f5835f325da20923fb1caea05cf [formerly 47e09c5d46868279df43ca2a3d4fbdb6bbcd38ac]
Former-commit-id: 9ac892cf0a29999a8560e45bd7a954f581efe1f8
Former-commit-id: a025b38832a9b326893545b422a7dea653c99f31
Former-commit-id: 4ce579cc6ca5cfd91ad3d1a25b59e74992256a3b
Former-commit-id: 01eb489103d67ddabc90d711c42a3ccd39572e40
Former-commit-id: 8840285fb15925b1715f0983bb03119c8c0022d3

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

@@ -1,13 +1,19 @@
 <template>
-  <div class="panel-search">
-    <div class="panel-search__input-group" flex="dir:top main:center cross:center">
-      <el-input
+  <div class="panel-search" flex="dir:top">
+    <div class="panel-search__input-group" flex-box="0" flex="dir:top main:center cross:center">
+      <el-autocomplete
         class="panel-search__input"
         ref="input"
         v-model="input"
         suffix-icon="el-icon-search"
         placeholder="搜索页面"
-        @keydown.esc.native="handleEsc"/>
+        :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">
@@ -20,31 +26,99 @@
         关闭
       </div>
     </div>
+    <div
+      v-if="results.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 results"
+            :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 {
-      input: ''
+      input: '',
+      results: []
     }
   },
   computed: {
     ...mapState('d2admin/search', [
-      'hotkey'
+      'hotkey',
+      'pool'
     ])
   },
   methods: {
+    querySearch (queryString, callback) {
+      var pool = this.pool
+      const results = (queryString ? 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
+      }))
+      this.results = results
+      callback(results)
+    },
     focus () {
-      this.$nextTick(() => {
-        this.input = ''
+      this.input = ''
+      setTimeout(() => {
         this.$refs.input.focus()
+      }, 500)
+    },
+    // 接收用户在列表中选择项目的事件
+    handleResultsGroupItemClick (path) {
+      // 如果用户选择的就是当前页面 就直接关闭搜索面板
+      if (path === this.$route.path) {
+        this.handleEsc()
+        return
+      }
+      // 用户选择的是其它页面
+      this.handleMenuSelect(path)
+    },
+    // 接收用户在下拉菜单中选中事件
+    handleSelect ({ path }) {
+      // 如果用户选择的就是当前页面 就直接关闭搜索面板
+      if (path === this.$route.path) {
+        this.handleEsc()
+        return
+      }
+      // 用户选择的是其它页面
+      this.$nextTick(() => {
+        this.handleMenuSelect(path)
       })
     },
+    closeSuggestion () {
+      if (this.$refs.input.activated) {
+        this.$refs.input.suggestions = []
+        this.$refs.input.activated = false
+      }
+    },
     handleEsc () {
-      this.$emit('close')
+      this.closeSuggestion()
+      this.$nextTick(() => {
+        this.$emit('close')
+      })
     }
   }
 }
@@ -57,7 +131,7 @@ export default {
   .panel-search__input-group {
     height: 200px;
     .panel-search__input {
-      width: 300px;
+      width: 500px;
     }
     .panel-search__tip {
       @extend %unable-select;
@@ -73,5 +147,11 @@ export default {
       }
     }
   }
+  .panel-search__results-group {
+    overflow: auto;
+    .panel-search__results-group-inner {
+      margin: -20px;
+    }
+  }
 }
 </style>