fix

examples/components/demo.vue

@@ -1,6 +1,7 @@
 <script>
 import { Menu } from 'antd'
 import * as AllDemo from '../demo'
+import Header from './header'
 const MenuItem = Menu.Item
 export default {
   render () {
@@ -11,14 +12,17 @@ export default {
       lang = 'us'
     }
     return (
-      <div class='site page-container'>
-        <Menu class='nav' selectedKeys={[name]}>
-          {Object.keys(AllDemo).map(d => <MenuItem key={d}>
-            <router-link to={{ path: `/components/${lang}/${d}` }}>{d}</router-link>
-          </MenuItem>)}
-        </Menu>
-        <div class='content main-container'>
-          {Demo ? <Demo /> : '正在紧急开发中...'}
+      <div class='site'>
+        <Header />
+        <div class='main-wrapper'>
+          <Menu class='nav' selectedKeys={[name]}>
+            {Object.keys(AllDemo).map(d => <MenuItem key={d}>
+              <router-link to={{ path: `/components/${lang}/${d}` }}>{d}</router-link>
+            </MenuItem>)}
+          </Menu>
+          <div class='content main-container'>
+            {Demo ? <Demo /> : '正在紧急开发中...'}
+          </div>
         </div>
 
       </div>

examples/components/header.vue

@@ -0,0 +1,24 @@
+<template>
+  <header id='header'>
+    <a-menu v-model="current" mode="horizontal" id="nav">
+      <a-menu-item key='home'>
+        首页
+      </a-menu-item>
+      <a-menu-item key='design'>
+        设计语言
+      </a-menu-item>
+      <a-menu-item key='components'>
+        组件
+      </a-menu-item>
+    </a-menu>
+  </header>
+</template>
+<script>
+export default {
+  data () {
+    return {
+      current: ['components'],
+    }
+  },
+}
+</script>

examples/index.less

@@ -1,11 +1,25 @@
 @import './theme/static/index.less';
+#app {
+  height: 100%;
+}
 .site {
   display: flex;
+  flex-direction: column;
+  height: 100%;
   .nav {
     width: 200px;
+    overflow-y: scroll;
   }
   .content {
     flex: 1;
+    overflow-y: scroll;
+  }
+  #header {
+    padding: 0 50px;
+  }
+  .main-wrapper {
+    display: flex;
+    flex: 1;
   }
 }