快捷键提示

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

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>