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 f4d3bc44..b59968e6 100644
--- a/package.json
+++ b/package.json
@@ -26,6 +26,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/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/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/header-search/index.vue b/src/layout/header-aside/components/header-search/index.vue
new file mode 100644
index 00000000..4241920c
--- /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" style="font-size: 18px;"/>
+  </el-button>
+</template>
+
+<script>
+export default {
+  methods: {
+    handleClick () {
+      this.$emit('click')
+    }
+  }
+}
+</script>
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..73a6f843
--- /dev/null
+++ b/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>
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..751d03d3
--- /dev/null
+++ b/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>
diff --git a/src/layout/header-aside/layout.vue b/src/layout/header-aside/layout.vue
index 04dce9ce..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`">
@@ -20,6 +25,7 @@
         <!-- 顶栏右侧 -->
         <div class="d2-header-right">
           <!-- 如果你只想在开发环境显示这个按钮请添加 v-if="$env === 'development'" -->
+          <d2-header-search @click="handleSearchClick"/>
           <d2-header-error-log/>
           <d2-header-fullscreen/>
           <d2-header-theme/>
@@ -33,21 +39,39 @@
           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>
         <!-- 主体 -->
-        <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"
+                @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">
+                    <router-view/>
+                  </keep-alive>
+                </transition>
+              </div>
+            </div>
+          </transition>
         </div>
       </div>
     </div>
@@ -56,13 +80,18 @@
 
 <script>
 import { mapState, mapGetters, mapMutations } from 'vuex'
+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'),
     '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')
@@ -97,14 +126,14 @@ export default {
     }
   },
   methods: {
-    ...mapMutations('d2admin/menu', [
-      'asideCollapseToggle'
-    ]),
+    ...mapMutations({
+      menuAsideCollapseToggle: 'd2admin/menu/asideCollapseToggle'
+    }),
     /**
      * 接收点击切换侧边栏的按钮
      */
     handleToggleAside () {
-      this.asideCollapseToggle()
+      this.menuAsideCollapseToggle()
     }
   }
 }
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/main.js b/src/main.js
index 04332968..e5b0588b 100644
--- a/src/main.js
+++ b/src/main.js
@@ -53,6 +53,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 38fc6878..c41174cb 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/setting.js b/src/setting.js
index 348bc498..f651db86 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
@@ -22,6 +30,10 @@ const setting = {
     version: version,
     api: 'https://api.github.com/repos/FairyEver/d2-admin/releases/latest'
   },
+  // 菜单搜索
+  search: {
+    enable: true
+  },
   // 注册的主题
   theme: {
     list: [
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..95690f3f
--- /dev/null
+++ b/src/store/modules/d2admin/modules/search.js
@@ -0,0 +1,55 @@
+import setting from '@/setting.js'
+
+export default {
+  namespaced: true,
+  state: {
+    // 搜索面板激活状态
+    active: true,
+    // 快捷键
+    hotkey: {
+      open: setting.hotkey.search.open,
+      close: setting.hotkey.search.close
+    },
+    // 所有可以搜索的页面
+    pool: []
+  },
+  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
+    },
+    /**
+     * @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
+    }
+  }
+}