diff --git a/public/index.html b/public/index.html
index 3b8c6c2..b344352 100644
--- a/public/index.html
+++ b/public/index.html
@@ -6,7 +6,7 @@
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <meta name="description" content="xe-utils 函数库、工具类，vxe-table 表格解决方案.">
-    <title>xe-utils 函数库、工具类</title>
+    <title>XE Utils 函数库、工具类</title>
     <script>var _hmt=_hmt||[];(function(){if(location.host.indexOf("localhost")===-1){var b=document.createElement("script");b.src="https://hm.baidu.com/hm.js?1eb3cea61a6e722c5e3dd0114830306c";b.onload=function(){_hmt.push(["_requirePlugin","UrlChangeTracker",{shouldTrackUrlChange:function(c,d){return c&&d}}])};var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(b,a)}})();</script>
     <script data-mode="hash" type="text/javascript" charset="UTF-8" src="https://cdn.wwads.cn/js/makemoney.js" async></script>
     <style>.pagead-right {position: fixed;right: 20px;top: 50px;width: 280px;z-index: 99;}</style>
diff --git a/src/App.vue b/src/App.vue
index 0e8b724..f2db9de 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -7,10 +7,10 @@
 <style lang="scss">
 #app {
   height: 100%;
+  overflow: auto;
 }
 html, body {
   height: 100%;
-  min-width: 1200px;
   margin: 0;
   padding: 0;
   color: #000;
@@ -42,34 +42,65 @@ html, body {
   height: 100%;
   margin: 0 auto;
   overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  .page-header {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    min-height: 50px;
+    border-bottom: 1px solid #ecf0f7;
+    .header-left,
+    .header-right {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      flex-shrink: 0;
+    }
+    .header-middle {
+      flex-grow: 1;
+    }
+  }
+  .header-left {
+    padding: 0 16px;
+    .logo {
+      text-decoration: none;
+      color: var(--vxe-ui-docs-font-color);
+      padding: 0 0.4em;
+      font-weight: 700;
+      font-size: 18px;
+      padding: 0 8px;
+      cursor: pointer;
+      img {
+        height: 20px;
+        margin-right: 16px;
+      }
+      img,
+      span {
+        display: inline-block;
+        vertical-align: middle;
+      }
+    }
+  }
+  .page-body {
+    flex-grow: 1;
+    overflow: auto;
+    display: flex;
+    flex-direction: row;
+  }
   .aside {
-    position: fixed;
-    top: 0;
-    left: 0;
+    display: flex;
+    flex-direction: column;
     width: 240px;
-    height: 100%;
     flex-shrink: 0;
     overflow: auto;
-    float: left;
     border-right: 1px solid #dcdfe6;
-    padding: 100px 0 30px 0;
+    padding: 0 0 30px 0;
     .header {
-      position: fixed;
-      top: 0;
-      left: 0;
+      flex-shrink: 0;
       text-align: center;
       width: 220px;
       background-color: #fff;
-      .title {
-        font-size: 28px;
-        margin: 10px 0 0 0;
-        text-align: center;
-        a {
-          color: #409eff;
-          text-decoration: none;
-          cursor: pointer;
-        }
-      }
       .search-wrapper {
         padding: 10px 0;
         .search-input {
@@ -107,11 +138,15 @@ html, body {
     }
   }
   .body {
-    width: 100%;
-    height: 100%;
+    flex-grow: 1;
     overflow: auto;
-    float: left;
-    padding: 0 10px 0 280px;
+    padding-right: 300px;
+    .body-inner {
+      max-width: 1000px;
+      min-width: 600px;
+      margin: 0 auto;
+      padding: 0 16px 0 24px;
+    }
     .api-item {
       .title {
         font-weight: 700;
diff --git a/src/router/index.ts b/src/router/index.ts
index 30524bc..0534a52 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -7,6 +7,18 @@ Vue.use(Router)
 export default new Router({
   mode: 'hash',
   routes: [
+    {
+      path: '*',
+      redirect: {
+        name: 'API'
+      }
+    },
+    {
+      path: '/',
+      redirect: {
+        name: 'API'
+      }
+    },
     {
       path: '/',
       name: 'API',
diff --git a/src/views/API.vue b/src/views/API.vue
index 10154b0..5647e6a 100644
--- a/src/views/API.vue
+++ b/src/views/API.vue
@@ -1,47 +1,61 @@
 <template>
   <div class="page-container">
-    <div class="aside">
-      <div class="header">
-        <h1 class="title">
-          <a href="https://github.com/xuliangzhan/xe-utils">xe-utils</a>
-        </h1>
-        <div class="search-wrapper">
-          <input class="search-input" v-model="filterName" type="search" placeholder="API 搜索">
-        </div>
+    <div class="page-header">
+      <div class="header-left">
+        <a class="logo" href="/">
+          <img src="/logo.png">
+          <span class="title">XE Utils</span>
+        </a>
+        <a :href='`https://gitee.com/x-extends/xe-utils/stargazers`'>
+          <img :src='`https://gitee.com/x-extends/xe-utils/badge/star.svg?theme=gvp`' alt='star'>
+        </a>
+        <a :href="`http://npm-stat.com/charts.html?package=xe-utils`">
+          <img :src="`https://img.shields.io/npm/dm/xe-utils.svg`">
+        </a>
+        <a :href="`https://github.com/x-extends/xe-utils/stargazers`">
+          <img :src="`https://img.shields.io/github/stars/x-extends/xe-utils.svg`">
+        </a>
+      </div>
+      <div class="header-middle"></div>
+      <div class="header-right">
       </div>
-      <ul>
-        <li class="menu-item" v-for="group in apiList" :key="group.id">
-          <a class="menu-link" @click="group.expand = !group.expand">{{ group.label }}</a>
-          <ul class="child-menu" v-show="group.expand">
-            <li class="menu-item" v-for="item in group.children" :key="item.id" :class="{active: selected === item}">
-              <a class="menu-link" @click="menuLinkEvent(item)" v-html="item.name"></a>
-            </li>
-          </ul>
-        </li>
-      </ul>
     </div>
-    <div class="body">
-      <div v-for="group in apiList" :key="group.id">
-        <div class="api-item" v-for="item in group.children" :key="item.id">
-          <p class="title" :id="item.name" v-html="`${item.name } (${ item.args }) ${ item.title}`"></p>
-          <p class="desc" v-html="item.desc"></p>
-          <table class="param-table" border="0" v-if="item.params && item.params.length">
-            <tr v-for="(rows, pIndex) in item.params" :key="pIndex">
-              <td v-for="(val, vIndex) in rows" :key="vIndex">{{ val }}</td>
-            </tr>
-          </table>
-          <pre>
-            <code class="javascript" v-for="(code,cIndex) in item.codes" :key="cIndex">{{ code }}</code>
-          </pre>
+    <div class="page-body">
+      <div class="aside">
+        <div class="header">
+          <div class="search-wrapper">
+            <input class="search-input" v-model="filterName" type="search" placeholder="API 搜索">
+          </div>
         </div>
+        <ul>
+          <li class="menu-item" v-for="group in apiList" :key="group.id">
+            <a class="menu-link" @click="group.expand = !group.expand">{{ group.label }}</a>
+            <ul class="child-menu" v-show="group.expand">
+              <li class="menu-item" v-for="item in group.children" :key="item.id" :class="{active: selected === item}">
+                <a class="menu-link" @click="menuLinkEvent(item)" v-html="item.name"></a>
+              </li>
+            </ul>
+          </li>
+        </ul>
       </div>
-      <!-- <div>
-        <div id="donation" class="donation-item">
-          <p>如果您觉得我们的开源软件对你有所帮助，请扫下方二维码打赏我们一杯咖啡☕</p>
-          <p>由于维护一个开源项目需要花费非常大的精力与时间，如果您正在使用该项目，您的捐赠会帮助该项目能持续发展下去</p>
-          <img src="static/donation/pay.jpg">
+      <div class="body">
+        <div class="body-inner">
+          <div v-for="group in apiList" :key="group.id">
+            <div class="api-item" v-for="item in group.children" :key="item.id">
+              <p class="title" :id="item.name" v-html="`${item.name } (${ item.args }) ${ item.title}`"></p>
+              <p class="desc" v-html="item.desc"></p>
+              <table class="param-table" border="0" v-if="item.params && item.params.length">
+                <tr v-for="(rows, pIndex) in item.params" :key="pIndex">
+                  <td v-for="(val, vIndex) in rows" :key="vIndex">{{ val }}</td>
+                </tr>
+              </table>
+              <pre>
+                <code class="javascript" v-for="(code,cIndex) in item.codes" :key="cIndex">{{ code }}</code>
+              </pre>
+            </div>
+          </div>
         </div>
-      </div> -->
+      </div>
     </div>
   </div>
 </template>
@@ -55,6 +69,37 @@ export default {
       selected: null,
       filterName: '',
       list: [
+        {
+          label: '开发指南',
+          value: 'insert',
+          expand: true,
+          children: [
+            {
+              name: 'NPM 安装',
+              args: '',
+              title: '使用 npm 的方式安装',
+              desc: '',
+              params: [],
+              codes: [
+                `
+                npm install xe-utils
+                `
+              ]
+            },
+            {
+              name: 'CDN 安装',
+              args: '',
+              title: '可以通过第三方开放的 CDN 来引用',
+              desc: '',
+              params: [],
+              codes: [
+                `
+                ${decodeURIComponent('%3Cscript%20src%3D%22https%3A%2F%2Fcdn.jsdelivr.net%2Fnpm%2Fxe-utils%22%3E%3C%2Fscript%3E')}
+                `
+              ]
+            }
+          ]
+        },
         {
           label: 'Base',
           value: 'base',