From 19ebab2fa68a39883d66952b03d878dc60f771f5 Mon Sep 17 00:00:00 2001
From: liyang <1711467488@qq.com>
Date: Tue, 28 Aug 2018 09:58:31 +0800
Subject: [PATCH 01/11] =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E5=9F=BA=E7=A1=80?=
 =?UTF-8?q?=E7=BB=93=E6=9E=84=E5=92=8C=E8=BE=93=E5=85=A5=E6=A1=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Former-commit-id: 373359336f6e97367f7b6a31c09fb4a28915cb07 [formerly 373359336f6e97367f7b6a31c09fb4a28915cb07 [formerly 373359336f6e97367f7b6a31c09fb4a28915cb07 [formerly 373359336f6e97367f7b6a31c09fb4a28915cb07 [formerly f700069d686be8e9ee177e36627eb284b3638ca7 [formerly a23ef90c3256f8bdee11ee6f63c778afa8b0e7d3]]]]]
Former-commit-id: cf1abe3e0fdd1078f74e78741bae59315d66aacf
Former-commit-id: 8c342c2eaeb9cf04bfbc1fa7b15f34c36445e77d
Former-commit-id: 38d7d5273db075c711a5235819cf75f15dfbd1a4 [formerly 054ce7262136015f7dd4dfa1cecd9a2e83a90449]
Former-commit-id: e6a1403e2d4426450c70b43a79f9809151df9146
Former-commit-id: b9d31641196ff5ba6cc16a8097ffc6a45582f601
Former-commit-id: e88fe6c0ea4ad041f4a9c44f36ba52222035e7d6
Former-commit-id: 34dbea74181ba5f7bba361921cc46c1750a6aadd
Former-commit-id: ffe6a1be153494a4845b800ebcdaf0483bd85ef0
---
 .../theme/theme-base.scss.REMOVED.git-id      |  2 +-
 .../components/header-search/index.vue        | 15 +++++
 .../components/panel-search/index.vue         | 41 ++++++++++++++
 src/layout/header-aside/layout.vue            | 55 +++++++++++++------
 src/store/modules/d2admin/index.js            |  4 +-
 src/store/modules/d2admin/modules/search.js   | 24 ++++++++
 6 files changed, 123 insertions(+), 18 deletions(-)
 create mode 100644 src/layout/header-aside/components/header-search/index.vue
 create mode 100644 src/layout/header-aside/components/panel-search/index.vue
 create mode 100644 src/store/modules/d2admin/modules/search.js

diff --git a/src/assets/style/theme/theme-base.scss.REMOVED.git-id b/src/assets/style/theme/theme-base.scss.REMOVED.git-id
index 76786659..0313b944 100644
--- a/src/assets/style/theme/theme-base.scss.REMOVED.git-id
+++ b/src/assets/style/theme/theme-base.scss.REMOVED.git-id
@@ -1 +1 @@
-27d62e35e945646beaa49ba9850fdbce60ed9e66
\ No newline at end of file
+76c08deda5f3f6bd81e91aeb695cae984eab131e
\ No newline at end of file
diff --git a/src/layout/header-aside/components/header-search/index.vue b/src/layout/header-aside/components/header-search/index.vue
new file mode 100644
index 00000000..a2c59425
--- /dev/null
+++ b/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"/>
+  </el-button>
+</template>
+
+<script>
+export default {
+  methods: {
+    handleClick () {
+      this.$emit('click')
+    }
+  }
+}
+</script>
diff --git a/src/layout/header-aside/components/panel-search/index.vue b/src/layout/header-aside/components/panel-search/index.vue
new file mode 100644
index 00000000..95f890b7
--- /dev/null
+++ b/src/layout/header-aside/components/panel-search/index.vue
@@ -0,0 +1,41 @@
+<template>
+  <div class="panel-search">
+    <div class="panel-search__input-group" flex="main:center cross:center">
+      <el-input
+        class="panel-search__input"
+        ref="input"
+        v-model="input"
+        suffix-icon="el-icon-search"
+        placeholder="搜索页面"/>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      input: ''
+    }
+  },
+  methods: {
+    focus () {
+      this.$nextTick(() => {
+        this.$refs.input.focus()
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.panel-search {
+  margin: 20px;
+  .panel-search__input-group {
+    height: 200px;
+    .panel-search__input {
+      width: 300px;
+    }
+  }
+}
+</style>
diff --git a/src/layout/header-aside/layout.vue b/src/layout/header-aside/layout.vue
index 04dce9ce..057750bf 100644
--- a/src/layout/header-aside/layout.vue
+++ b/src/layout/header-aside/layout.vue
@@ -20,6 +20,7 @@
         <!-- 顶栏右侧 -->
         <div class="d2-header-right">
           <!-- 如果你只想在开发环境显示这个按钮请添加 v-if="$env === 'development'" -->
+          <d2-header-search @click="handleSearch"/>
           <d2-header-error-log/>
           <d2-header-fullscreen/>
           <d2-header-theme/>
@@ -37,17 +38,26 @@
           <d2-menu-side/>
         </div>
         <!-- 主体 -->
-        <div class="d2-theme-container-main" flex-box="1" flex="dir:top">
-          <div class="d2-theme-container-main-header" flex-box="0">
-            <d2-tabs/>
-          </div>
-          <div class="d2-theme-container-main-body" flex-box="1">
-            <transition :name="transitionActive ? 'fade-transverse' : ''">
-              <keep-alive :include="keepAlive">
-                <router-view/>
-              </keep-alive>
-            </transition>
-          </div>
+        <div class="d2-theme-container-main" flex-box="1" flex>
+          <transition name="fade-scale">
+            <div v-show="searchActive" class="d2-theme-container-main-layer" flex="dir:top">
+              <d2-panel-search ref="panelSearch"/>
+            </div>
+          </transition>
+          <transition name="fade-scale">
+            <div v-show="!searchActive" class="d2-theme-container-main-layer" flex="dir:top">
+              <div class="d2-theme-container-main-header" flex-box="0">
+                <d2-tabs/>
+              </div>
+              <div class="d2-theme-container-main-body" flex-box="1">
+                <transition :name="transitionActive ? 'fade-transverse' : ''">
+                  <keep-alive :include="keepAlive">
+                    <router-view/>
+                  </keep-alive>
+                </transition>
+              </div>
+            </div>
+          </transition>
         </div>
       </div>
     </div>
@@ -63,9 +73,11 @@ export default {
     'd2-menu-header': () => import('./components/menu-header'),
     'd2-tabs': () => import('./components/tabs'),
     'd2-header-fullscreen': () => import('./components/header-fullscreen'),
+    'd2-header-search': () => import('./components/header-search'),
     'd2-header-theme': () => import('./components/header-theme'),
     'd2-header-user': () => import('./components/header-user'),
-    'd2-header-error-log': () => import('./components/header-error-log')
+    'd2-header-error-log': () => import('./components/header-error-log'),
+    'd2-panel-search': () => import('./components/panel-search')
   },
   data () {
     return {
@@ -78,6 +90,7 @@ export default {
   computed: {
     ...mapState('d2admin', {
       grayActive: state => state.gray.active,
+      searchActive: state => state.search.active,
       transitionActive: state => state.transition.active,
       asideCollapse: state => state.menu.asideCollapse
     }),
@@ -97,14 +110,24 @@ export default {
     }
   },
   methods: {
-    ...mapMutations('d2admin/menu', [
-      'asideCollapseToggle'
-    ]),
+    ...mapMutations({
+      menuAsideCollapseToggle: 'd2admin/menu/asideCollapseToggle',
+      searchToggle: 'd2admin/search/toggle'
+    }),
     /**
      * 接收点击切换侧边栏的按钮
      */
     handleToggleAside () {
-      this.asideCollapseToggle()
+      this.menuAsideCollapseToggle()
+    },
+    /**
+     * 接收点击搜索按钮
+     */
+    handleSearch () {
+      this.searchToggle()
+      if (this.searchActive) {
+        this.$refs.panelSearch.focus()
+      }
     }
   }
 }
diff --git a/src/store/modules/d2admin/index.js b/src/store/modules/d2admin/index.js
index 6ad3350b..2cc2fbc3 100644
--- a/src/store/modules/d2admin/index.js
+++ b/src/store/modules/d2admin/index.js
@@ -10,6 +10,7 @@ import ua from './modules/ua'
 import gray from './modules/gray'
 import page from './modules/page'
 import transition from './modules/transition'
+import search from './modules/search'
 
 export default {
   namespaced: true,
@@ -25,6 +26,7 @@ export default {
     ua,
     gray,
     page,
-    transition
+    transition,
+    search
   }
 }
diff --git a/src/store/modules/d2admin/modules/search.js b/src/store/modules/d2admin/modules/search.js
new file mode 100644
index 00000000..a4de5849
--- /dev/null
+++ b/src/store/modules/d2admin/modules/search.js
@@ -0,0 +1,24 @@
+export default {
+  namespaced: true,
+  state: {
+    // 搜索面板激活状态
+    active: false
+  },
+  mutations: {
+    /**
+     * @description 切换激活状态
+     * @param {Object} state vuex state
+     */
+    toggle (state) {
+      state.active = !state.active
+    },
+    /**
+     * @description 设置激活模式
+     * @param {Object} state vuex state
+     * @param {Boolean} active active
+     */
+    set (state, active) {
+      state.active = active
+    }
+  }
+}

From ea1e23fc11ebab3b31043661ffe242bf2694ef05 Mon Sep 17 00:00:00 2001
From: liyang <1711467488@qq.com>
Date: Tue, 28 Aug 2018 11:12:51 +0800
Subject: [PATCH 02/11] =?UTF-8?q?=E5=BF=AB=E6=8D=B7=E9=94=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Former-commit-id: f08b7ba521a8338abff254905997bdb3d5f8b051 [formerly f08b7ba521a8338abff254905997bdb3d5f8b051 [formerly f08b7ba521a8338abff254905997bdb3d5f8b051 [formerly f08b7ba521a8338abff254905997bdb3d5f8b051 [formerly 95b51a0e9b3be340f8dc6b285a66317f5899fe71 [formerly 37fe09545b11607d94cdf89ec62429c0a68f1f03]]]]]
Former-commit-id: 4d0f8841b17942ec75fc5c6468836c31b26a5981
Former-commit-id: 5a4e3cca1b5e16f0a908af6bd341047963d27805
Former-commit-id: 293aa17f542d733777d05c0023aff252b46bebab [formerly 5ad3d0e6fa7cb27407093ca254e8c9898f31fce1]
Former-commit-id: fb90e6ede3a6548cf989404fb648472b17e7fde0
Former-commit-id: 9569f37f5b93fd5e95178a2dbcba878fc91f6c2e
Former-commit-id: b0328b0a52e939aef0fb65c3b30b50c9c72ce625
Former-commit-id: 9e3c51f9afb99d8a67d83c44b2e2fd1f9738abde
Former-commit-id: a21f8109b4c1ce4233054240b1eeba9248df3955
---
 package-lock.json.REMOVED.git-id              |  2 +-
 package.json                                  |  1 +
 .../components/panel-search/index.vue         |  7 +++-
 src/layout/header-aside/layout.vue            | 41 +++++++++++++++++--
 src/setting.js                                |  8 ++++
 src/store/modules/d2admin/modules/search.js   |  8 +++-
 6 files changed, 60 insertions(+), 7 deletions(-)

diff --git a/package-lock.json.REMOVED.git-id b/package-lock.json.REMOVED.git-id
index e44ada5f..08824f12 100644
--- a/package-lock.json.REMOVED.git-id
+++ b/package-lock.json.REMOVED.git-id
@@ -1 +1 @@
-937f5369a5d9b43eeb3c7fa2991f76724481721c
\ No newline at end of file
+3ae82b79660726c08077289a8873ef5ff3ff6471
\ No newline at end of file
diff --git a/package.json b/package.json
index 0af0e951..5a367124 100644
--- a/package.json
+++ b/package.json
@@ -25,6 +25,7 @@
     "flex.css": "^1.1.7",
     "github-markdown-css": "^2.10.0",
     "highlight.js": "^9.12.0",
+    "hotkeys-js": "^3.3.6",
     "js-cookie": "^2.2.0",
     "lodash": "^4.17.10",
     "lowdb": "^1.0.0",
diff --git a/src/layout/header-aside/components/panel-search/index.vue b/src/layout/header-aside/components/panel-search/index.vue
index 95f890b7..93f59b60 100644
--- a/src/layout/header-aside/components/panel-search/index.vue
+++ b/src/layout/header-aside/components/panel-search/index.vue
@@ -6,7 +6,8 @@
         ref="input"
         v-model="input"
         suffix-icon="el-icon-search"
-        placeholder="搜索页面"/>
+        placeholder="搜索页面"
+        @keydown.esc.native="handleEsc"/>
     </div>
   </div>
 </template>
@@ -21,8 +22,12 @@ export default {
   methods: {
     focus () {
       this.$nextTick(() => {
+        this.input = ''
         this.$refs.input.focus()
       })
+    },
+    handleEsc () {
+      this.$emit('close')
     }
   }
 }
diff --git a/src/layout/header-aside/layout.vue b/src/layout/header-aside/layout.vue
index 057750bf..2182f712 100644
--- a/src/layout/header-aside/layout.vue
+++ b/src/layout/header-aside/layout.vue
@@ -20,7 +20,7 @@
         <!-- 顶栏右侧 -->
         <div class="d2-header-right">
           <!-- 如果你只想在开发环境显示这个按钮请添加 v-if="$env === 'development'" -->
-          <d2-header-search @click="handleSearch"/>
+          <d2-header-search @click="handleSearchClick"/>
           <d2-header-error-log/>
           <d2-header-fullscreen/>
           <d2-header-theme/>
@@ -41,7 +41,9 @@
         <div class="d2-theme-container-main" flex-box="1" flex>
           <transition name="fade-scale">
             <div v-show="searchActive" class="d2-theme-container-main-layer" flex="dir:top">
-              <d2-panel-search ref="panelSearch"/>
+              <d2-panel-search
+                ref="panelSearch"
+                @close="searchPanelClose"/>
             </div>
           </transition>
           <transition name="fade-scale">
@@ -66,6 +68,7 @@
 
 <script>
 import { mapState, mapGetters, mapMutations } from 'vuex'
+import hotkeys from 'hotkeys-js'
 export default {
   name: 'd2-layout-header-aside',
   components: {
@@ -87,10 +90,27 @@ export default {
       asideWidthCollapse: '65px'
     }
   },
+  mounted () {
+    // 绑定搜索功能快捷键 [ 打开 ]
+    hotkeys(this.searchHotkey.open, event => {
+      event.preventDefault()
+      this.searchPanelOpen()
+    })
+    // 绑定搜索功能快捷键 [ 关闭 ]
+    hotkeys(this.searchHotkey.close, event => {
+      event.preventDefault()
+      this.searchPanelClose()
+    })
+  },
+  beforeDestroy () {
+    // 解绑搜索功能快捷键
+    hotkeys.unbind('esc')
+  },
   computed: {
     ...mapState('d2admin', {
       grayActive: state => state.gray.active,
       searchActive: state => state.search.active,
+      searchHotkey: state => state.search.hotkey,
       transitionActive: state => state.transition.active,
       asideCollapse: state => state.menu.asideCollapse
     }),
@@ -112,7 +132,8 @@ export default {
   methods: {
     ...mapMutations({
       menuAsideCollapseToggle: 'd2admin/menu/asideCollapseToggle',
-      searchToggle: 'd2admin/search/toggle'
+      searchToggle: 'd2admin/search/toggle',
+      searchSet: 'd2admin/search/set'
     }),
     /**
      * 接收点击切换侧边栏的按钮
@@ -123,11 +144,23 @@ export default {
     /**
      * 接收点击搜索按钮
      */
-    handleSearch () {
+    handleSearchClick () {
       this.searchToggle()
       if (this.searchActive) {
         this.$refs.panelSearch.focus()
       }
+    },
+    searchPanelOpen () {
+      if (!this.searchActive) {
+        this.searchSet(true)
+        this.$refs.panelSearch.focus()
+      }
+    },
+    // 关闭搜索面板
+    searchPanelClose () {
+      if (this.searchActive) {
+        this.searchSet(false)
+      }
     }
   }
 }
diff --git a/src/setting.js b/src/setting.js
index 348bc498..f096efaa 100644
--- a/src/setting.js
+++ b/src/setting.js
@@ -1,6 +1,14 @@
 import { version } from '../package'
 
 const setting = {
+  // 快捷键
+  // 支持快捷键 例如 ctrl+shift+s
+  hotkey: {
+    search: {
+      open: 's',
+      close: 'esc'
+    }
+  },
   // 侧边栏默认折叠状态
   menu: {
     asideCollapse: false
diff --git a/src/store/modules/d2admin/modules/search.js b/src/store/modules/d2admin/modules/search.js
index a4de5849..40a84c56 100644
--- a/src/store/modules/d2admin/modules/search.js
+++ b/src/store/modules/d2admin/modules/search.js
@@ -1,8 +1,14 @@
+import setting from '@/setting.js'
+
 export default {
   namespaced: true,
   state: {
     // 搜索面板激活状态
-    active: false
+    active: false,
+    hotkey: {
+      open: setting.hotkey.search.open,
+      close: setting.hotkey.search.close
+    }
   },
   mutations: {
     /**

From 615dde5e050cf7bb076decf1207db8b8b2913235 Mon Sep 17 00:00:00 2001
From: liyang <1711467488@qq.com>
Date: Tue, 28 Aug 2018 11:16:00 +0800
Subject: [PATCH 03/11] =?UTF-8?q?=E9=A1=B6=E6=A0=8F=E6=90=9C=E7=B4=A2?=
 =?UTF-8?q?=E6=8C=89=E9=92=AE=E5=8A=A0=E5=A4=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Former-commit-id: 40cd281fdff846c727c580d6709724d4c5a3f146 [formerly 40cd281fdff846c727c580d6709724d4c5a3f146 [formerly 40cd281fdff846c727c580d6709724d4c5a3f146 [formerly 40cd281fdff846c727c580d6709724d4c5a3f146 [formerly ca5621d4201f3d678f21fb2c964128bea232ee21 [formerly 34449f9f0a499ec2de4c57f2d3f1d37baa267a73]]]]]
Former-commit-id: 1f680ef63f7837d95b1edcd67283d6457018afe8
Former-commit-id: 1154896c0852c2d8d83475eaf08b0bb3723a73ab
Former-commit-id: 593cbf3ea1dbf22d73ddd778ba1eb19f99ba4f25 [formerly cc39b4f0b7e1ac85e3fe4a7da679b4389c4c90fb]
Former-commit-id: e94065719b4d6de919ffa43e258701bff3dd17e4
Former-commit-id: abdadc2f531e5e4d7b3578906529a986bf1aa578
Former-commit-id: 749a2a8542f8565d4a55306a2fa3a613b2633b9c
Former-commit-id: 240a1ddf7b71bf8446f504b5a741331bb186a01c
Former-commit-id: 5880d87decd9e8e2af4283ee305bd63d21b1e4ab
---
 src/layout/header-aside/components/header-search/index.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/layout/header-aside/components/header-search/index.vue b/src/layout/header-aside/components/header-search/index.vue
index a2c59425..4241920c 100644
--- a/src/layout/header-aside/components/header-search/index.vue
+++ b/src/layout/header-aside/components/header-search/index.vue
@@ -1,6 +1,6 @@
 <template>
   <el-button class="d2-mr btn-text can-hover" type="text" @click="handleClick">
-    <d2-icon name="search"/>
+    <d2-icon name="search" style="font-size: 18px;"/>
   </el-button>
 </template>
 

From 34d2191bbc5a83be4e8ee63bdb9c068e65ac58ef Mon Sep 17 00:00:00 2001
From: liyang <1711467488@qq.com>
Date: Tue, 28 Aug 2018 13:19:50 +0800
Subject: [PATCH 04/11] =?UTF-8?q?=E5=BF=AB=E6=8D=B7=E9=94=AE=E6=8F=90?=
 =?UTF-8?q?=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Former-commit-id: 1615753a5284fa2efad467628e30144392f6ae71 [formerly 1615753a5284fa2efad467628e30144392f6ae71 [formerly 1615753a5284fa2efad467628e30144392f6ae71 [formerly 1615753a5284fa2efad467628e30144392f6ae71 [formerly 8bd4cb6aa48182562bdf38ed9c7b51970ad1e13a [formerly b6da1b444a6b25ccb2da1171b785747b13281453]]]]]
Former-commit-id: a79f9e94e700119842084528d8f5ec625fc20755
Former-commit-id: 9f8e1fb43c9f57e195d8a19270bace6e383622f9
Former-commit-id: 46d2054a3ef0686a5a4e3004ebb3c99901ac889a [formerly aa5b9684dd733dcc83067a07c6a07288eecb503e]
Former-commit-id: 315a9cf504ade759d0547555bb2b430b817e3236
Former-commit-id: 656ad95de67277c5dce358d64d0b28cb3a481d04
Former-commit-id: e85892f37b3f281593b4b33f6a085c8308abf724
Former-commit-id: cb4e185f6d0cf5f704f8cbbff0b54c6d257633bf
Former-commit-id: 27531610d025ada77e1b95258c946876923bf05f
---
 .../components/panel-search/index.vue         | 33 ++++++++++++++++++-
 src/store/modules/d2admin/modules/search.js   |  2 +-
 2 files changed, 33 insertions(+), 2 deletions(-)

diff --git a/src/layout/header-aside/components/panel-search/index.vue b/src/layout/header-aside/components/panel-search/index.vue
index 93f59b60..63e07308 100644
--- a/src/layout/header-aside/components/panel-search/index.vue
+++ b/src/layout/header-aside/components/panel-search/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="panel-search">
-    <div class="panel-search__input-group" flex="main:center cross:center">
+    <div class="panel-search__input-group" flex="dir:top main:center cross:center">
       <el-input
         class="panel-search__input"
         ref="input"
@@ -8,17 +8,34 @@
         suffix-icon="el-icon-search"
         placeholder="搜索页面"
         @keydown.esc.native="handleEsc"/>
+      <div class="panel-search__tip">
+        您可以使用快捷键
+        <span class="panel-search__key">
+          {{hotkey.open}}
+        </span>
+        唤醒搜索面板，按
+        <span class="panel-search__key">
+          {{hotkey.close}}
+        </span>
+        关闭
+      </div>
     </div>
   </div>
 </template>
 
 <script>
+import { mapState } from 'vuex'
 export default {
   data () {
     return {
       input: ''
     }
   },
+  computed: {
+    ...mapState('d2admin/search', [
+      'hotkey'
+    ])
+  },
   methods: {
     focus () {
       this.$nextTick(() => {
@@ -34,6 +51,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import '~@/assets/style/public.scss';
 .panel-search {
   margin: 20px;
   .panel-search__input-group {
@@ -41,6 +59,19 @@ export default {
     .panel-search__input {
       width: 300px;
     }
+    .panel-search__tip {
+      @extend %unable-select;
+      margin-top: 20px;
+      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;
+      }
+    }
   }
 }
 </style>
diff --git a/src/store/modules/d2admin/modules/search.js b/src/store/modules/d2admin/modules/search.js
index 40a84c56..edcf038c 100644
--- a/src/store/modules/d2admin/modules/search.js
+++ b/src/store/modules/d2admin/modules/search.js
@@ -4,7 +4,7 @@ export default {
   namespaced: true,
   state: {
     // 搜索面板激活状态
-    active: false,
+    active: true,
     hotkey: {
       open: setting.hotkey.search.open,
       close: setting.hotkey.search.close

From 61cffc8e43b0ff7bbb0102408a9567858a366193 Mon Sep 17 00:00:00 2001
From: liyang <1711467488@qq.com>
Date: Tue, 28 Aug 2018 17:00:09 +0800
Subject: [PATCH 05/11] =?UTF-8?q?=E5=9F=BA=E6=9C=AC=E5=AE=8C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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
---
 .../header-aside/components/mixin/menu.js     |   2 +-
 .../components/panel-search-item/index.vue    |  85 +++++++++++++++
 .../components/panel-search/index.vue         | 100 ++++++++++++++++--
 src/main.js                                   |   2 +
 src/router/index.js                           |   4 +
 src/store/modules/d2admin/modules/search.js   |  27 ++++-
 6 files changed, 208 insertions(+), 12 deletions(-)
 create mode 100644 src/layout/header-aside/components/panel-search/components/panel-search-item/index.vue

diff --git a/src/layout/header-aside/components/mixin/menu.js b/src/layout/header-aside/components/mixin/menu.js
index 78316f3a..7160b58f 100644
--- a/src/layout/header-aside/components/mixin/menu.js
+++ b/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)
diff --git a/src/layout/header-aside/components/panel-search/components/panel-search-item/index.vue b/src/layout/header-aside/components/panel-search/components/panel-search-item/index.vue
new file mode 100644
index 00000000..25af577e
--- /dev/null
+++ b/src/layout/header-aside/components/panel-search/components/panel-search-item/index.vue
@@ -0,0 +1,85 @@
+<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;
+  &.can-hover {
+    @extend %unable-select;
+    &:hover {
+      background-color: #F5F7FA;
+    }
+  }
+  .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>
diff --git a/src/layout/header-aside/components/panel-search/index.vue b/src/layout/header-aside/components/panel-search/index.vue
index 63e07308..25016796 100644
--- a/src/layout/header-aside/components/panel-search/index.vue
+++ b/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>
diff --git a/src/main.js b/src/main.js
index 39402fd6..6364a6b3 100644
--- a/src/main.js
+++ b/src/main.js
@@ -50,6 +50,8 @@ new Vue({
     this.$store.commit('d2admin/page/init', frameInRoutes)
     // 设置顶栏菜单
     this.$store.commit('d2admin/menu/headerSet', menuHeader)
+    // 初始化菜单搜索功能
+    this.$store.commit('d2admin/search/init', menuHeader)
   },
   mounted () {
     // 展示系统信息
diff --git a/src/router/index.js b/src/router/index.js
index b3766ab0..d87593c1 100755
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,6 +1,8 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router'
 
+import store from '@/store/index'
+
 import util from '@/libs/util.js'
 
 // 路由数据
@@ -18,6 +20,8 @@ const router = new VueRouter({
  * 权限验证
  */
 router.beforeEach((to, from, next) => {
+  // 关闭搜索面板
+  store.commit('d2admin/search/set', false)
   // 验证当前路由所有的匹配中是否需要有登陆验证的
   if (to.matched.some(r => r.meta.requiresAuth)) {
     // 这里暂时将cookie里是否存有token作为验证是否登陆的条件
diff --git a/src/store/modules/d2admin/modules/search.js b/src/store/modules/d2admin/modules/search.js
index edcf038c..95690f3f 100644
--- a/src/store/modules/d2admin/modules/search.js
+++ b/src/store/modules/d2admin/modules/search.js
@@ -5,10 +5,13 @@ export default {
   state: {
     // 搜索面板激活状态
     active: true,
+    // 快捷键
     hotkey: {
       open: setting.hotkey.search.open,
       close: setting.hotkey.search.close
-    }
+    },
+    // 所有可以搜索的页面
+    pool: []
   },
   mutations: {
     /**
@@ -25,6 +28,28 @@ export default {
      */
     set (state, active) {
       state.active = active
+    },
+    /**
+     * @description 初始化
+     * @param {Object} state vuex state
+     * @param {Array} menus menus
+     */
+    init (state, menus) {
+      const pool = []
+      const push = function (menus, titlePrefix = []) {
+        menus.forEach(menu => {
+          if (menu.children) {
+            push(menu.children, [ ...titlePrefix, menu.title ])
+          } else {
+            pool.push({
+              ...menu,
+              fullTitle: [ ...titlePrefix, menu.title ].join(' / ')
+            })
+          }
+        })
+      }
+      push(menus)
+      state.pool = pool
     }
   }
 }

From f7374bee3ed1f95a447ca9017e003838c147b250 Mon Sep 17 00:00:00 2001
From: liyang <1711467488@qq.com>
Date: Tue, 28 Aug 2018 17:34:02 +0800
Subject: [PATCH 06/11] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E6=B3=A8=E9=87=8A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Former-commit-id: 74e5de6c31b689f7d3da5a649a91113d583ecc58 [formerly 74e5de6c31b689f7d3da5a649a91113d583ecc58 [formerly 74e5de6c31b689f7d3da5a649a91113d583ecc58 [formerly 74e5de6c31b689f7d3da5a649a91113d583ecc58 [formerly 4d2a16382139b1c2e0e4e28740ddba6ba3c63a2e [formerly 17859adf57bf5b8cc6149612d3e9a57f1cf59401]]]]]
Former-commit-id: f49ae444b2b3cff3ba3b531a4d07a8ecc150a655
Former-commit-id: a3f99935f53d76df1b031a82a4b325c16ca0c893
Former-commit-id: bced9b902cbbe8273d6b41ff3887094cf73892b0 [formerly 6fb4f87d3611434f990e7fce053d787ac75dbddd]
Former-commit-id: 249b528c4bd3e852b6e7fcd9536b140fe24501d1
Former-commit-id: 40cadc71cb7c238d0e405587bb39d40ad0c45e88
Former-commit-id: 141981b6e688078dcc13d8f148a7ee62e9d3139d
Former-commit-id: 018aca6a468a4a29d93ca5411be21dbcc8eaa094
Former-commit-id: deb3e7fac201bd70da7ba3f04701c111daac208a
---
 .../components/panel-search/index.vue         | 34 ++++++++++++++++---
 1 file changed, 29 insertions(+), 5 deletions(-)

diff --git a/src/layout/header-aside/components/panel-search/index.vue b/src/layout/header-aside/components/panel-search/index.vue
index 25016796..2e51a0a2 100644
--- a/src/layout/header-aside/components/panel-search/index.vue
+++ b/src/layout/header-aside/components/panel-search/index.vue
@@ -67,9 +67,22 @@ export default {
     ])
   },
   methods: {
+    /**
+     * @description 过滤选项 这个方法在每次输入框的值发生变化时会触发
+     */
     querySearch (queryString, callback) {
       var pool = this.pool
-      const results = (queryString ? pool : []).filter(item => {
+      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)
@@ -77,16 +90,19 @@ export default {
         value: e.fullTitle,
         ...e
       }))
-      this.results = results
-      callback(results)
     },
+    /**
+     * @description 聚焦输入框
+     */
     focus () {
       this.input = ''
       setTimeout(() => {
         this.$refs.input.focus()
       }, 500)
     },
-    // 接收用户在列表中选择项目的事件
+    /**
+     * @description 接收用户在列表中选择项目的事件
+     */
     handleResultsGroupItemClick (path) {
       // 如果用户选择的就是当前页面 就直接关闭搜索面板
       if (path === this.$route.path) {
@@ -96,7 +112,9 @@ export default {
       // 用户选择的是其它页面
       this.handleMenuSelect(path)
     },
-    // 接收用户在下拉菜单中选中事件
+    /**
+     * @description 接收用户在下拉菜单中选中事件
+     */
     handleSelect ({ path }) {
       // 如果用户选择的就是当前页面 就直接关闭搜索面板
       if (path === this.$route.path) {
@@ -108,12 +126,18 @@ export default {
         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(() => {

From 06c27b4206c5743f93224937df413dddb3b63939 Mon Sep 17 00:00:00 2001
From: liyang <1711467488@qq.com>
Date: Tue, 28 Aug 2018 17:40:09 +0800
Subject: [PATCH 07/11] =?UTF-8?q?=E6=90=9C=E7=B4=A2=E7=BB=93=E6=9E=9C?=
 =?UTF-8?q?=E9=A1=B9=E7=9B=AE=E7=9A=84=E6=A0=B7=E5=BC=8F=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Former-commit-id: ee13dd70a185103286f994ef3264ad9933f0d6ab [formerly ee13dd70a185103286f994ef3264ad9933f0d6ab [formerly ee13dd70a185103286f994ef3264ad9933f0d6ab [formerly ee13dd70a185103286f994ef3264ad9933f0d6ab [formerly 402355a58a4c22586f24c8c6638f8438e27ad805 [formerly de66c921b9d748cc13aa05213bc827e404c90405]]]]]
Former-commit-id: 7382ebf6f9b621342d2ec7e51eadb57eab7ddc19
Former-commit-id: f9d22eba0c37bf3204aec446ea0383e720ffa441
Former-commit-id: 1eb1bc8cb114d4aafca5aae8f1d2d75d5b36825c [formerly d5148fd8529dc29554b862637fbeaa64469336f6]
Former-commit-id: 1f60f2245c67b5ef710e9408d5d3c2dadcdb7f47
Former-commit-id: b0a5a52af3bf4583ad6872b54ff2e85b95263d4c
Former-commit-id: 52c5e6f6f0a6195a80745cb0526ef0c7f4005800
Former-commit-id: a5453f3ec924cd08a7c52c38ca98b3674edb8cad
Former-commit-id: 545346590541f848739a82afa55b60fd87b3112e
---
 .../panel-search/components/panel-search-item/index.vue        | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/layout/header-aside/components/panel-search/components/panel-search-item/index.vue b/src/layout/header-aside/components/panel-search/components/panel-search-item/index.vue
index 25af577e..0d81c176 100644
--- a/src/layout/header-aside/components/panel-search/components/panel-search-item/index.vue
+++ b/src/layout/header-aside/components/panel-search/components/panel-search-item/index.vue
@@ -38,9 +38,10 @@ export default {
 @import '~@/assets/style/public.scss';
 .d2-panel-search-item {
   height: 64px;
-  margin: 0px;
+  margin: 0px -20px;
   &.can-hover {
     @extend %unable-select;
+    margin: 0px;
     &:hover {
       background-color: #F5F7FA;
     }

From afc2a5b67b3c78c0971bf75b480f65d04b677e21 Mon Sep 17 00:00:00 2001
From: liyang <1711467488@qq.com>
Date: Tue, 28 Aug 2018 18:18:47 +0800
Subject: [PATCH 08/11] =?UTF-8?q?=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Former-commit-id: bb8db2a25ef717137a9d4e473538c0f954ba9eae [formerly bb8db2a25ef717137a9d4e473538c0f954ba9eae [formerly bb8db2a25ef717137a9d4e473538c0f954ba9eae [formerly bb8db2a25ef717137a9d4e473538c0f954ba9eae [formerly 6048998b71a5d72480e0bd1e221dbab02a31053f [formerly 0507967735e3772d1574716b94858068a8b045a6]]]]]
Former-commit-id: cbe63cc098a79ac9ebaafb9d68b1cab37bd9f14f
Former-commit-id: 687b0834254a9afb6bd9ab786fcd0ac70974e9eb
Former-commit-id: 1ee65e08e4be2da3c4872b382cd00b22d0c70803 [formerly 077722278a2e61df580803cb3dd8338717496920]
Former-commit-id: 157231d84ac7a4a1361c466a2aeb660202593193
Former-commit-id: 5f841aa4b756af37c4bd3d7ffc1cf79b15cb653d
Former-commit-id: 3f7e0fd74011f90411a3f811b0123b19eb5f2c28
Former-commit-id: 39b9cdfcff6656ba65f35796cd14e4ca9ad2a26f
Former-commit-id: 11ae87bd38fa19408ca8cb6d20a74268c90cc6a7
---
 src/layout/header-aside/layout.vue       | 51 +++------------------
 src/layout/header-aside/mixins/search.js | 58 ++++++++++++++++++++++++
 src/setting.js                           |  4 ++
 3 files changed, 68 insertions(+), 45 deletions(-)
 create mode 100644 src/layout/header-aside/mixins/search.js

diff --git a/src/layout/header-aside/layout.vue b/src/layout/header-aside/layout.vue
index 2182f712..b0d4401d 100644
--- a/src/layout/header-aside/layout.vue
+++ b/src/layout/header-aside/layout.vue
@@ -68,9 +68,12 @@
 
 <script>
 import { mapState, mapGetters, mapMutations } from 'vuex'
-import hotkeys from 'hotkeys-js'
+import mixinSearch from './mixins/search'
 export default {
   name: 'd2-layout-header-aside',
+  mixins: [
+    mixinSearch
+  ],
   components: {
     'd2-menu-side': () => import('./components/menu-side'),
     'd2-menu-header': () => import('./components/menu-header'),
@@ -79,8 +82,7 @@ export default {
     'd2-header-search': () => import('./components/header-search'),
     'd2-header-theme': () => import('./components/header-theme'),
     'd2-header-user': () => import('./components/header-user'),
-    'd2-header-error-log': () => import('./components/header-error-log'),
-    'd2-panel-search': () => import('./components/panel-search')
+    'd2-header-error-log': () => import('./components/header-error-log')
   },
   data () {
     return {
@@ -90,27 +92,9 @@ export default {
       asideWidthCollapse: '65px'
     }
   },
-  mounted () {
-    // 绑定搜索功能快捷键 [ 打开 ]
-    hotkeys(this.searchHotkey.open, event => {
-      event.preventDefault()
-      this.searchPanelOpen()
-    })
-    // 绑定搜索功能快捷键 [ 关闭 ]
-    hotkeys(this.searchHotkey.close, event => {
-      event.preventDefault()
-      this.searchPanelClose()
-    })
-  },
-  beforeDestroy () {
-    // 解绑搜索功能快捷键
-    hotkeys.unbind('esc')
-  },
   computed: {
     ...mapState('d2admin', {
       grayActive: state => state.gray.active,
-      searchActive: state => state.search.active,
-      searchHotkey: state => state.search.hotkey,
       transitionActive: state => state.transition.active,
       asideCollapse: state => state.menu.asideCollapse
     }),
@@ -131,36 +115,13 @@ export default {
   },
   methods: {
     ...mapMutations({
-      menuAsideCollapseToggle: 'd2admin/menu/asideCollapseToggle',
-      searchToggle: 'd2admin/search/toggle',
-      searchSet: 'd2admin/search/set'
+      menuAsideCollapseToggle: 'd2admin/menu/asideCollapseToggle'
     }),
     /**
      * 接收点击切换侧边栏的按钮
      */
     handleToggleAside () {
       this.menuAsideCollapseToggle()
-    },
-    /**
-     * 接收点击搜索按钮
-     */
-    handleSearchClick () {
-      this.searchToggle()
-      if (this.searchActive) {
-        this.$refs.panelSearch.focus()
-      }
-    },
-    searchPanelOpen () {
-      if (!this.searchActive) {
-        this.searchSet(true)
-        this.$refs.panelSearch.focus()
-      }
-    },
-    // 关闭搜索面板
-    searchPanelClose () {
-      if (this.searchActive) {
-        this.searchSet(false)
-      }
     }
   }
 }
diff --git a/src/layout/header-aside/mixins/search.js b/src/layout/header-aside/mixins/search.js
new file mode 100644
index 00000000..807e6c86
--- /dev/null
+++ b/src/layout/header-aside/mixins/search.js
@@ -0,0 +1,58 @@
+import { mapState, mapMutations } from 'vuex'
+
+import hotkeys from 'hotkeys-js'
+
+export default {
+  components: {
+    'd2-panel-search': () => import('../components/panel-search')
+  },
+  mounted () {
+    // 绑定搜索功能快捷键 [ 打开 ]
+    hotkeys(this.searchHotkey.open, event => {
+      event.preventDefault()
+      this.searchPanelOpen()
+    })
+    // 绑定搜索功能快捷键 [ 关闭 ]
+    hotkeys(this.searchHotkey.close, event => {
+      event.preventDefault()
+      this.searchPanelClose()
+    })
+  },
+  beforeDestroy () {
+    hotkeys.unbind(this.searchHotkey.open)
+    hotkeys.unbind(this.searchHotkey.close)
+  },
+  computed: {
+    ...mapState('d2admin', {
+      searchActive: state => state.search.active,
+      searchHotkey: state => state.search.hotkey
+    })
+  },
+  methods: {
+    ...mapMutations({
+      searchToggle: 'd2admin/search/toggle',
+      searchSet: 'd2admin/search/set'
+    }),
+    /**
+     * 接收点击搜索按钮
+     */
+    handleSearchClick () {
+      this.searchToggle()
+      if (this.searchActive) {
+        this.$refs.panelSearch.focus()
+      }
+    },
+    searchPanelOpen () {
+      if (!this.searchActive) {
+        this.searchSet(true)
+        this.$refs.panelSearch.focus()
+      }
+    },
+    // 关闭搜索面板
+    searchPanelClose () {
+      if (this.searchActive) {
+        this.searchSet(false)
+      }
+    }
+  }
+}
diff --git a/src/setting.js b/src/setting.js
index f096efaa..f651db86 100644
--- a/src/setting.js
+++ b/src/setting.js
@@ -30,6 +30,10 @@ const setting = {
     version: version,
     api: 'https://api.github.com/repos/FairyEver/d2-admin/releases/latest'
   },
+  // 菜单搜索
+  search: {
+    enable: true
+  },
   // 注册的主题
   theme: {
     list: [

From 9fb96b2c9a50a1e1b0f90a860eabe992793f9a60 Mon Sep 17 00:00:00 2001
From: liyang <1711467488@qq.com>
Date: Tue, 28 Aug 2018 21:20:59 +0800
Subject: [PATCH 09/11] =?UTF-8?q?t=E6=B7=BB=E5=8A=A0=E6=B3=A8=E9=87=8A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Former-commit-id: 34b3ab3b3d943043725333bbd481f5a9a466c2c5 [formerly 4b39fd429de16e04cf62131f615fffd97c854a80] [formerly 34b3ab3b3d943043725333bbd481f5a9a466c2c5 [formerly 4b39fd429de16e04cf62131f615fffd97c854a80] [formerly 34b3ab3b3d943043725333bbd481f5a9a466c2c5 [formerly 4b39fd429de16e04cf62131f615fffd97c854a80] [formerly 4b39fd429de16e04cf62131f615fffd97c854a80 [formerly 05c71466c897bff4e2257f2dea63a441d3d166b8 [formerly 08eda9cec10588adfb3780ea3469cce223eee0d0]]]]]
Former-commit-id: 66c29578b50f9a5a1bc4018da51985cded57f6e8
Former-commit-id: a9b499d5e43cd90809d034c4e9412d2605cd3a01
Former-commit-id: c55f0b9f56ce2eecaeac8c5bfea06eaf80fe49f8 [formerly 6a61672670ee93f69d2be6134a314b1bbb66002f]
Former-commit-id: ee0310722e7c30c9f7a7327b45938812d7cc9d66
Former-commit-id: bf15447e3128422d47d49171e1746abf19c7480c
Former-commit-id: 5d48a0f496550bec01fa01bd1d2c4c130bb8ea94
Former-commit-id: a2c29ea8c9793e064f154926b1b8b6e889703fa3
Former-commit-id: 3736a5b8cb3074bd5581b2a8704ae4ec6931055b
---
 src/layout/header-aside/layout.vue | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/layout/header-aside/layout.vue b/src/layout/header-aside/layout.vue
index b0d4401d..268d168a 100644
--- a/src/layout/header-aside/layout.vue
+++ b/src/layout/header-aside/layout.vue
@@ -39,6 +39,7 @@
         </div>
         <!-- 主体 -->
         <div class="d2-theme-container-main" flex-box="1" flex>
+          <!-- 搜索 -->
           <transition name="fade-scale">
             <div v-show="searchActive" class="d2-theme-container-main-layer" flex="dir:top">
               <d2-panel-search
@@ -46,11 +47,14 @@
                 @close="searchPanelClose"/>
             </div>
           </transition>
+          <!-- 内容 -->
           <transition name="fade-scale">
             <div v-show="!searchActive" class="d2-theme-container-main-layer" flex="dir:top">
+              <!-- tab -->
               <div class="d2-theme-container-main-header" flex-box="0">
                 <d2-tabs/>
               </div>
+              <!-- 页面 -->
               <div class="d2-theme-container-main-body" flex-box="1">
                 <transition :name="transitionActive ? 'fade-transverse' : ''">
                   <keep-alive :include="keepAlive">

From b147e9428bed283baa244408d9dd3e90791669b0 Mon Sep 17 00:00:00 2001
From: liyang <1711467488@qq.com>
Date: Tue, 28 Aug 2018 23:10:20 +0800
Subject: [PATCH 10/11] =?UTF-8?q?=E6=89=93=E5=BC=80=E6=90=9C=E7=B4=A2?=
 =?UTF-8?q?=E6=97=B6=E5=85=B6=E5=AE=83=E5=8C=BA=E5=9F=9F=E5=8D=8A=E9=80=8F?=
 =?UTF-8?q?=E6=98=8E?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Former-commit-id: 5e6390229024372d26a6faea0a9edda4a15a203e [formerly 5e6390229024372d26a6faea0a9edda4a15a203e [formerly 5e6390229024372d26a6faea0a9edda4a15a203e [formerly 5e6390229024372d26a6faea0a9edda4a15a203e [formerly 5e4d5754dcae71e37c3b356a8299003a0edbe7b2 [formerly 79e0116aa2c60a0a040600e206308e5956f331f9]]]]]
Former-commit-id: 16313139021ed04197c513aecca9ba021de0e7d6
Former-commit-id: d3fe2efff600923a51cb3046f1e337699f2c85b1
Former-commit-id: 536dcd5b9ca3b2524a17d8725e55dbaab7774daa [formerly 2ea65b88b060e3beb69c2866eb32b70fbaf2e8b8]
Former-commit-id: d1a27f395ffeb62c8ec10af9d722a57b180da319
Former-commit-id: d9bb8243f309751c8b1f530c3516000af8e33237
Former-commit-id: 3d2e185b75482d8eb39f62010b353759ce440fcf
Former-commit-id: 792481c56a8d433a8d3d7483e6b114c3c6e4b10d
Former-commit-id: 1100f65f7c9cfa2f646698439355d35905400a22
---
 src/layout/header-aside/layout.vue | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/layout/header-aside/layout.vue b/src/layout/header-aside/layout.vue
index 268d168a..3a15413c 100644
--- a/src/layout/header-aside/layout.vue
+++ b/src/layout/header-aside/layout.vue
@@ -8,7 +8,12 @@
     <!-- 主体内容 -->
     <div class="d2-layout-header-aside-content" flex="dir:top">
       <!-- 顶栏 -->
-      <div class="d2-theme-header" flex-box="0">
+      <div
+        class="d2-theme-header"
+        :style="{
+          opacity: this.searchActive ? 0.3 : 1
+        }"
+        flex-box="0">
         <div class="logo-group" :style="{width: asideCollapse ? asideWidthCollapse : asideWidth}">
           <img v-if="asideCollapse" :src="`${$baseUrl}image/theme/${themeActiveSetting.name}/logo/icon-only.png`">
           <img v-else :src="`${$baseUrl}image/theme/${themeActiveSetting.name}/logo/all.png`">
@@ -34,7 +39,10 @@
           flex-box="0"
           ref="aside"
           class="d2-theme-container-aside"
-          :style="{width: asideCollapse ? asideWidthCollapse : asideWidth}">
+          :style="{
+            width: asideCollapse ? asideWidthCollapse : asideWidth,
+            opacity: this.searchActive ? 0.3 : 1
+          }">
           <d2-menu-side/>
         </div>
         <!-- 主体 -->

From 836dbd452aa58ec9b44c56e5a939f7aa699bb87d Mon Sep 17 00:00:00 2001
From: liyang <1711467488@qq.com>
Date: Wed, 29 Aug 2018 14:20:58 +0800
Subject: [PATCH 11/11] =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Former-commit-id: a752d74ebda60018646527bae76ebdbaad9dec41 [formerly a752d74ebda60018646527bae76ebdbaad9dec41 [formerly a752d74ebda60018646527bae76ebdbaad9dec41 [formerly a752d74ebda60018646527bae76ebdbaad9dec41 [formerly cf94b8efcddd1f134772021f541d80cac5228e48 [formerly 6a293276c5b8a2ae6390ed5a78802190ca67195f]]]]]
Former-commit-id: 63d86967d621c674d5ee7637e0814c58cc8fd682
Former-commit-id: 6fef6e69bd32e8f9b3257bca0ee608a7f733cdf1
Former-commit-id: ad21197e4afc4e1e130e7137308fd52f7c9b5fff [formerly 8c61f3a1c211b91a08a7a774f1d63e10c3c64f35]
Former-commit-id: 8b05c625708111db21ac272a83ec80e59674c526
Former-commit-id: 71fdc405ae790624298641aa240c98cf93977c99
Former-commit-id: d5250d59e0265365834666bc3599778577f0a4e2
Former-commit-id: cac30498acfbc49c188f2ca33f27216d2c679a64
Former-commit-id: 1b3a5e83c94a51e4f0478214fa41ce03a70439ce
---
 src/assets/svg-icons/icons/d2-admin-text.svg  | 19 ++++++++++++
 .../components/panel-search-item/index.vue    | 19 ++++++++++++
 .../components/panel-search/index.vue         | 31 +++++++++++++++----
 3 files changed, 63 insertions(+), 6 deletions(-)
 create mode 100644 src/assets/svg-icons/icons/d2-admin-text.svg

diff --git a/src/assets/svg-icons/icons/d2-admin-text.svg b/src/assets/svg-icons/icons/d2-admin-text.svg
new file mode 100644
index 00000000..abdcf0b8
--- /dev/null
+++ b/src/assets/svg-icons/icons/d2-admin-text.svg
@@ -0,0 +1,19 @@
+
+<svg viewBox="0 0 88 84" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 49.3 (51167) - http://www.bohemiancoding.com/sketch -->
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="page" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Tablet" transform="translate(-1077.000000, -135.000000)">
+            <g id="Group" transform="translate(1077.000000, 132.000000)">
+                <path d="M0.74,85.8 L0.74,71.44 L3.72,71.44 C5.7600102,71.44 7.2566619,71.5899985 8.21,71.89 C9.1633381,72.1900015 9.9866632,72.6633301 10.68,73.31 C11.3733368,73.9566699 11.9066648,74.746662 12.28,75.68 C12.6533352,76.613338 12.84,77.7033271 12.84,78.95 C12.84,80.1966729 12.5500029,81.3699945 11.97,82.47 C11.3899971,83.5700055 10.6033383,84.3999972 9.61,84.96 C8.6166617,85.5200028 7.186676,85.8 5.32,85.8 L0.74,85.8 Z M2.12,84.44 L3.78,84.44 C5.513342,84.44 6.7699961,84.3533342 7.55,84.18 C8.3300039,84.0066658 9.0133304,83.6633359 9.6,83.15 C10.1866696,82.6366641 10.6333318,82.013337 10.94,81.28 C11.2466682,80.546663 11.4,79.7066714 11.4,78.76 C11.4,77.8133286 11.2233351,76.940004 10.87,76.14 C10.5166649,75.339996 10.0133366,74.6800026 9.36,74.16 C8.7066634,73.6399974 7.9366711,73.2900009 7.05,73.11 C6.1633289,72.9299991 4.8600086,72.84 3.14,72.84 L2.12,72.84 L2.12,84.44 Z M16.2,75.94 L14.82,75.94 C14.886667,74.473326 15.3733288,73.2966711 16.28,72.41 C17.1866712,71.5233289 18.2833269,71.08 19.57,71.08 C20.8566731,71.08 21.9233291,71.4966625 22.77,72.33 C23.6166709,73.1633375 24.04,74.179994 24.04,75.38 C24.04,76.2733378 23.8033357,77.0999962 23.33,77.86 C22.8566643,78.6200038 22.1400048,79.5199948 21.18,80.56 L17.6,84.42 L24.24,84.42 L24.24,85.8 L14.48,85.8 L19.96,79.88 C20.9200048,78.8399948 21.6066646,78.020003 22.02,77.42 C22.4333354,76.819997 22.64,76.1333372 22.64,75.36 C22.64,74.5866628 22.3366697,73.9066696 21.73,73.32 C21.1233303,72.7333304 20.3700045,72.44 19.47,72.44 C18.5699955,72.44 17.8233363,72.7433303 17.23,73.35 C16.6366637,73.9566697 16.2933338,74.8199944 16.2,75.94 Z M32.58,70.86 L39.28,85.8 L37.74,85.8 L35.48,80.9 L29.28,80.9 L27.04,85.8 L25.44,85.8 L32.22,70.86 L32.58,70.86 Z M32.4,74.04 L29.94,79.44 L34.84,79.44 L32.4,74.04 Z M51.88,71.08 L51.88,85.8 L50.54,85.8 L50.54,83.98 C49.3266606,85.4333406 47.9366745,86.16 46.37,86.16 C44.8033255,86.16 43.486672,85.6066722 42.42,84.5 C41.353328,83.3933278 40.82,82.0666744 40.82,80.52 C40.82,78.9733256 41.3599946,77.6500055 42.44,76.55 C43.5200054,75.4499945 44.8133258,74.9 46.32,74.9 C48.053342,74.9 49.4599946,75.6399926 50.54,77.12 L50.54,71.08 L51.88,71.08 Z M50.62,80.56 C50.62,79.3466606 50.220004,78.3200042 49.42,77.48 C48.619996,76.6399958 47.620006,76.22 46.42,76.22 C45.219994,76.22 44.2166707,76.6499957 43.41,77.51 C42.6033293,78.3700043 42.2,79.3833275 42.2,80.55 C42.2,81.7166725 42.6133292,82.733329 43.44,83.6 C44.2666708,84.466671 45.2433277,84.9 46.37,84.9 C47.4966723,84.9 48.4866624,84.4900041 49.34,83.67 C50.1933376,82.8499959 50.62,81.8133396 50.62,80.56 Z M54.98,75.18 L56.34,75.18 L56.34,77.02 C57.2866714,75.6066596 58.4999926,74.9 59.98,74.9 C60.7666706,74.9 61.4699969,75.1233311 62.09,75.57 C62.7100031,76.0166689 63.1266656,76.6466626 63.34,77.46 C63.7800022,76.6333292 64.3399966,76.0000022 65.02,75.56 C65.7000034,75.1199978 66.4833289,74.9 67.37,74.9 C68.2566711,74.9 69.0599964,75.2433299 69.78,75.93 C70.5000036,76.6166701 70.86,77.9733232 70.86,80 L70.86,85.8 L69.46,85.8 L69.46,80 C69.46,79.0266618 69.4000006,78.3100023 69.28,77.85 C69.1599994,77.3899977 68.900002,77.0033349 68.5,76.69 C68.099998,76.3766651 67.5700033,76.22 66.91,76.22 C66.2499967,76.22 65.6333362,76.4399978 65.06,76.88 C64.4866638,77.3200022 64.0933344,77.8799966 63.88,78.56 C63.6666656,79.2400034 63.56,80.2666598 63.56,81.64 L63.56,85.8 L62.22,85.8 L62.22,80.36 C62.22,79.226661 62.1600006,78.4166691 62.04,77.93 C61.9199994,77.4433309 61.6533354,77.0366683 61.24,76.71 C60.8266646,76.3833317 60.320003,76.22 59.72,76.22 C59.119997,76.22 58.5566693,76.3966649 58.03,76.75 C57.5033307,77.1033351 57.0900015,77.5866636 56.79,78.2 C56.4899985,78.8133364 56.34,79.8466594 56.34,81.3 L56.34,85.8 L54.98,85.8 L54.98,75.18 Z M73.1,72.22 C73.1,71.9133318 73.2099989,71.6466678 73.43,71.42 C73.6500011,71.1933322 73.9166651,71.08 74.23,71.08 C74.5433349,71.08 74.8099989,71.1899989 75.03,71.41 C75.2500011,71.6300011 75.36,71.8966651 75.36,72.21 C75.36,72.5233349 75.2500011,72.7899989 75.03,73.01 C74.8099989,73.2300011 74.5433349,73.34 74.23,73.34 C73.9166651,73.34 73.6500011,73.2266678 73.43,73 C73.2099989,72.7733322 73.1,72.5133348 73.1,72.22 Z M73.54,75.18 L74.92,75.18 L74.92,85.8 L73.54,85.8 L73.54,75.18 Z M77.74,75.18 L79.12,75.18 L79.12,77.08 C80.2133388,75.6266594 81.5399922,74.9 83.1,74.9 C83.900004,74.9 84.6199968,75.1166645 85.26,75.55 C85.9000032,75.9833355 86.353332,76.5499965 86.62,77.25 C86.886668,77.9500035 87.02,78.9799932 87.02,80.34 L87.02,85.8 L85.66,85.8 L85.66,80.74 C85.66,79.4999938 85.6033339,78.6600022 85.49,78.22 C85.3766661,77.7799978 85.2033345,77.4066682 84.97,77.1 C84.7366655,76.7933318 84.4400018,76.5600008 84.08,76.4 C83.7199982,76.2399992 83.2833359,76.16 82.77,76.16 C82.2566641,76.16 81.7533358,76.2866654 81.26,76.54 C80.7666642,76.7933346 80.3466684,77.1466644 80,77.6 C79.6533316,78.0533356 79.4200006,78.5199976 79.3,79 C79.1799994,79.4800024 79.12,80.4466594 79.12,81.9 L79.12,85.8 L77.74,85.8 L77.74,75.18 Z" id="D2Admin" fill="#409EFF"></path>
+                <g id="logo-no-shadow" transform="translate(11.000000, 0.000000)">
+                    <path d="M44.2833805,33.4299717 L6.05798302,56.3652102 C4.16366196,57.5018028 1.70662094,56.8875426 0.570028297,54.9932215 C0.197031333,54.3715599 8.87839274e-17,53.6602143 0,52.9352385 L-4.4408921e-16,7.06476152 C-7.1463071e-16,4.85562252 1.790861,3.06476152 4,3.06476152 C4.72497578,3.06476152 5.43632142,3.26179285 6.05798302,3.63478981 L44.2833805,26.5700283 C46.1777016,27.7066209 46.7919618,30.163662 45.6553692,32.057983 C45.3175701,32.6209814 44.8463789,33.0921727 44.2833805,33.4299717 Z" id="Triangle-Copy" fill="#35495E" transform="translate(25.000000, 30.000000) rotate(-180.000000) translate(-25.000000, -30.000000) "></path>
+                    <path d="M60.2833805,33.4299717 L22.057983,56.3652102 C20.163662,57.5018028 17.7066209,56.8875426 16.5700283,54.9932215 C16.1970313,54.3715599 16,53.6602143 16,52.9352385 L16,7.06476152 C16,4.85562252 17.790861,3.06476152 20,3.06476152 C20.7249758,3.06476152 21.4363214,3.26179285 22.057983,3.63478981 L60.2833805,26.5700283 C62.1777016,27.7066209 62.7919618,30.163662 61.6553692,32.057983 C61.3175701,32.6209814 60.8463789,33.0921727 60.2833805,33.4299717 Z" id="Triangle" fill="#409EFF"></path>
+                    <path d="M42.4688663,31.7973091 L24.0289915,42.8612339 C23.081831,43.4295303 21.8533105,43.1224001 21.2850141,42.1752396 C21.0985157,41.8644088 21,41.508736 21,41.1462481 L21,19.0183984 C21,17.9138289 21.8954305,17.0183984 23,17.0183984 C23.3624879,17.0183984 23.7181607,17.116914 24.0289915,17.3034125 L42.4688663,28.3673374 C43.4160268,28.9356337 43.7231569,30.1641542 43.1548606,31.1113147 C42.9859611,31.3928139 42.7503655,31.6284096 42.4688663,31.7973091 Z" id="Triangle-Copy" fill="#FFFFFF" transform="translate(31.000000, 30.082670) rotate(-180.000000) translate(-31.000000, -30.082670) "></path>
+                    <path d="M37.5708451,30.8574929 L30.5144958,35.0913025 C30.0409155,35.3754507 29.4266552,35.2218856 29.1425071,34.7483054 C29.0492578,34.59289 29,34.4150536 29,34.2338096 L29,25.7661904 C29,25.2139056 29.4477153,24.7661904 30,24.7661904 C30.1812439,24.7661904 30.3590804,24.8154482 30.5144958,24.9086975 L37.5708451,29.1425071 C38.0444254,29.4266552 38.1979905,30.0409155 37.9138423,30.5144958 C37.8293925,30.6552454 37.7115947,30.7730432 37.5708451,30.8574929 Z" id="Triangle" fill="#409EFF"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/layout/header-aside/components/panel-search/components/panel-search-item/index.vue b/src/layout/header-aside/components/panel-search/components/panel-search-item/index.vue
index 0d81c176..73a6f843 100644
--- a/src/layout/header-aside/components/panel-search/components/panel-search-item/index.vue
+++ b/src/layout/header-aside/components/panel-search/components/panel-search-item/index.vue
@@ -44,6 +44,25 @@ export default {
     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 {
diff --git a/src/layout/header-aside/components/panel-search/index.vue b/src/layout/header-aside/components/panel-search/index.vue
index 2e51a0a2..751d03d3 100644
--- a/src/layout/header-aside/components/panel-search/index.vue
+++ b/src/layout/header-aside/components/panel-search/index.vue
@@ -1,10 +1,13 @@
 <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="input"
+        v-model="searchText"
         suffix-icon="el-icon-search"
         placeholder="搜索页面"
         :fetch-suggestions="querySearch"
@@ -27,13 +30,13 @@
       </div>
     </div>
     <div
-      v-if="results.length > 0"
+      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 results"
+            v-for="(item, index) in resultsList"
             :key="index"
             :item="item"
             :hover-mode="true"
@@ -56,7 +59,7 @@ export default {
   },
   data () {
     return {
-      input: '',
+      searchText: '',
       results: []
     }
   },
@@ -64,7 +67,14 @@ export default {
     ...mapState('d2admin/search', [
       'hotkey',
       'pool'
-    ])
+    ]),
+    // 这份数据是展示在搜索面板下面的
+    resultsList () {
+      return (this.results.length === 0 && this.searchText === '') ? this.pool.map(e => ({
+        value: e.fullTitle,
+        ...e
+      })) : this.results
+    }
   },
   methods: {
     /**
@@ -98,6 +108,9 @@ export default {
       this.input = ''
       setTimeout(() => {
         this.$refs.input.focus()
+        // 还原
+        this.searchText = ''
+        this.results = []
       }, 500)
     },
     /**
@@ -153,13 +166,19 @@ export default {
 .panel-search {
   margin: 20px;
   .panel-search__input-group {
-    height: 200px;
+    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 {