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] =?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: {
     /**