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
+    }
+  }
+}