diff --git a/examples/main.js b/examples/main.js
index ed4b8f9..7d2374f 100644
--- a/examples/main.js
+++ b/examples/main.js
@@ -11,7 +11,7 @@ import NProgress from 'nprogress';
 import EagleCodeSnippet from "@/components/code-snippet";
 
 import '@/styles/index.scss';
-import "highlight.js/styles/github.css";
+import "@/styles/highlight.scss";
 
 const request = axios.create({
   baseURL: 'http://localhost',
diff --git a/examples/styles/highlight.scss b/examples/styles/highlight.scss
new file mode 100644
index 0000000..32e1f3b
--- /dev/null
+++ b/examples/styles/highlight.scss
@@ -0,0 +1,103 @@
+.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 0.5em;
+  color: #333;
+  background: #f8f8f8;
+}
+
+.hljs-comment,
+.hljs-quote {
+  color: #237804;
+  // color: #998;
+  font-style: italic;
+}
+
+.hljs-params {
+  color: green;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-subst {
+  color: #1d39c4;
+  // color: #333;
+  font-weight: bold;
+}
+
+.hljs-number,
+.hljs-literal,
+.hljs-variable,
+.hljs-template-variable,
+
+.hljs-tag .hljs-attr {
+  color: #f5222d;
+  // color: #008080;
+}
+
+.hljs-string,
+.hljs-doctag {
+  color: #08979c;
+  // color: #d14;
+}
+
+.hljs-title,
+.hljs-section,
+.hljs-selector-id {
+  color: #900;
+  font-weight: bold;
+}
+
+.hljs-subst {
+  font-weight: normal;
+}
+
+.hljs-type,
+.hljs-class .hljs-title {
+  color: #458;
+  font-weight: bold;
+}
+
+.hljs-tag,
+.hljs-name,
+.hljs-attribute {
+  color: #1d39c4;
+  // color: #000080;
+  font-weight: normal;
+}
+
+.hljs-regexp,
+.hljs-link {
+  color: #009926;
+}
+
+.hljs-symbol,
+.hljs-bullet {
+  color: #990073;
+}
+
+.hljs-built_in,
+.hljs-builtin-name {
+  color: #0086b3;
+}
+
+.hljs-meta {
+  color: #999;
+  font-weight: bold;
+}
+
+.hljs-deletion {
+  background: #fdd;
+}
+
+.hljs-addition {
+  background: #dfd;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
+
+.hljs-strong {
+  font-weight: bold;
+}
diff --git a/examples/styles/variables.scss b/examples/styles/variables.scss
index 42163c3..2bb9ba8 100644
--- a/examples/styles/variables.scss
+++ b/examples/styles/variables.scss
@@ -9,6 +9,8 @@ $green-light: #5edd8e;
 $orange: #ff9852;
 $grey: #8c8c8c;
 $black: #000;
+$purple: #722ed1;
+$cyan: #13c2c2;
 
 $text: #314659;
 $border: #e8e8e8;
\ No newline at end of file
diff --git a/examples/views/docs/guide/installation.md b/examples/views/docs/guide/installation.md
index 4422592..56cc94b 100644
--- a/examples/views/docs/guide/installation.md
+++ b/examples/views/docs/guide/installation.md
@@ -6,12 +6,16 @@
 
 ## npm安装
 
-```bash
-npm install --save git+https://frameworkweb:frame1WorkwEb@git.yunweidashi.com/framework/eagle-web-toolkit.git#版本号
-```
+<div class="hljs">
+  <code>
+    <span class="hljs-keyword">npm</span> install --save <span class="hljs-string">git+https://frameworkweb:frame1WorkwEb@git.yunweidashi.com/framework/eagle-web-toolkit.git#{{ appVersion }}</span>
+  </code>
+</div>
 
 ## yarn安装
 
-```bash
-yarn add git+https://frameworkweb:frame1WorkwEb@git.yunweidashi.com/framework/eagle-web-toolkit.git#版本号
-```
\ No newline at end of file
+<div class="hljs">
+  <code>
+    <span class="hljs-keyword">yarn</span> add <span class="hljs-string">git+https://frameworkweb:frame1WorkwEb@git.yunweidashi.com/framework/eagle-web-toolkit.git#{{ appVersion }}</span>
+  </code>
+</div>
diff --git a/examples/views/layout/component.vue b/examples/views/layout/component.vue
index 9f281d4..602e1e3 100644
--- a/examples/views/layout/component.vue
+++ b/examples/views/layout/component.vue
@@ -1,6 +1,6 @@
 <template>
   <el-container>
-    <layout-header></layout-header>
+    <layout-header @menu-change="handleSelect"></layout-header>
     <el-container class="layout-container__component">
       <el-aside class="layout-aside__component" width="240px">
         <el-menu :default-active="activeMenu" class="layout-aside-menu__component" @select="handleSelect">
@@ -132,7 +132,10 @@ export default {
       document.documentElement.scrollTop = dom.offsetTop - headerHeight;
     },
     handleSelect(key) {
-      this.$router.push({ name: key });
+      if (key && this.$route.name !== key) {
+        this.activeMenu = key;
+        this.$router.push({ name: key });
+      }
     }
   }
 }
diff --git a/examples/views/layout/components/header.vue b/examples/views/layout/components/header.vue
index 2edb8e2..024b07c 100644
--- a/examples/views/layout/components/header.vue
+++ b/examples/views/layout/components/header.vue
@@ -3,6 +3,26 @@
     <div class="left">
       <img class="logo" src="/img/logo.svg" />
       <span class="title">{{ appName }}</span>
+      <el-divider class="divider" direction="vertical"></el-divider>
+      <el-autocomplete
+        v-model="searchKey"
+        :fetch-suggestions="querySearch"
+        placeholder="搜索组件"
+        :trigger-on-focus="false"
+        @select="handleSelectMenu"
+        prefix-icon="el-icon-search"
+        class="autocomplete"
+        popper-class="search"
+        size="small"
+        clearable
+      >
+        <div slot-scope="{ item }">
+          <div class="search-option">
+            <span>{{ item.title }}</span>
+            <span class="group">{{ item.group }}</span>
+          </div>
+        </div>
+      </el-autocomplete>
     </div>
     <el-menu :default-active="activeMenu" mode="horizontal" @select="handleSelect">
       <el-menu-item v-for="(data, index) in pages" :key="index" :index="data.meta.path">{{ data.meta.title }}</el-menu-item>
@@ -11,18 +31,28 @@
 </template>
 
 <script>
-import { pages } from '@/router/routes';
+import { pages, components } from '@/router/routes';
 
 export default {
   name: 'layoutHeader',
   data() {
+    let componentList = [];
+    components.forEach((data, index) => {
+      if (data.children && data.children.length > 0) {
+        data.children.forEach(item => {
+          componentList.push({ group: data.group, name: item.name, ...item.meta });
+        });
+      }
+    });
     return {
       appName: process.env.VUE_APP_NAME,
       activeMenu: '/index',
+      components: componentList,
       pages: pages.map((data, index) => {
         const param = data.meta && data.meta.path ? {} : { meta: { title: `Page - ${index}`, path: '/index' } }
         return { ...data, ...param }
-      })
+      }),
+      searchKey: undefined,
     }
   },
   created() {
@@ -31,8 +61,24 @@ export default {
     this.activeMenu = route.path || '/index';
   },
   methods: {
+    querySearch(queryString, cb) {
+      var components = this.components;
+      var results = queryString ? components.filter(this.createFilter(queryString)) : components;
+      // 调用 callback 返回建议列表的数据
+      cb(results);
+    },
+    createFilter(queryString) {
+      return (component) => {
+        return (component.name.toLowerCase().indexOf(queryString.toLowerCase()) >= 0);
+      };
+    },
     handleSelect(key) {
-      this.$router.push({ path: key });
+      if (key && this.$route.path !== key) {
+        this.$router.push({ path: key });
+      }
+    },
+    handleSelectMenu({ name }) {
+      this.$emit('menu-change', name);
     }
   }
 }
@@ -67,6 +113,29 @@ export default {
       background-clip: text;
       -webkit-text-fill-color: transparent;
     }
+    .divider {
+      margin: 0 20px;
+    }
+    .autocomplete {
+      input {
+        border-top: 0;
+        border-left: 0;
+        border-right: 0;
+        border-radius: 0;
+      }
+    }
+  }
+}
+.search {
+  min-width: 300px;
+  .search-option {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-weight: 600;
+    .group {
+      color: #d9d9d9;
+    }
   }
 }
 </style>
--
libgit2 0.21.0