docs: site add progress status

tangjinzhou · tangjinzhou · commit 2d23f276ca1c · 2018-07-14T17:59:25.000+08:00
diff --git a/package.json b/package.json
@@ -120,6 +120,7 @@
         "mkdirp": "^0.5.1",
         "mockdate": "^2.0.2",
         "moment-timezone": "^0.5.17",
+        "nprogress": "^0.2.0",
         "postcss": "^6.0.20",
         "postcss-loader": "^2.1.2",
         "pre-commit": "^1.2.2",
diff --git a/site/components/layout.vue b/site/components/layout.vue
@@ -6,6 +6,7 @@ import enUS from 'antd/locale-provider/default'
 import sortBy from 'lodash/sortBy'
 import { isZhCN } from '../util'
 import { Provider, create } from '../../components/_util/store'
+import NProgress from 'nprogress'
 
 const docsList = [
   { key: 'introduce', enTitle: 'Ant Design of Vue', title: 'Ant Design of Vue' },
@@ -40,9 +41,16 @@ export default {
     if (this.unsubscribe) {
       this.unsubscribe()
     }
+    clearTimeout(this.timer)
   },
   mounted () {
     this.addSubMenu()
+    const nprogressHiddenStyle = document.getElementById('nprogress-style')
+    if (nprogressHiddenStyle) {
+      this.timer = setTimeout(() => {
+        nprogressHiddenStyle.parentNode.removeChild(nprogressHiddenStyle)
+      }, 0)
+    }
   },
   watch: {
     '$route.path': function () {
@@ -113,6 +121,9 @@ export default {
       }
       document.title = titleStr
     },
+    mountedCallback () {
+      NProgress.done()
+    },
   },
 
   render () {
@@ -199,10 +210,25 @@ export default {
                     {this.getSubMenu(isCN)}
                   </div>
                   {this.showDemo ? <Provider store={this.store} key={isCN ? 'cn' : 'en'}>
-                    <router-view class={`demo-cols-${config.cols || 2}`}></router-view>
+                    <router-view
+                      class={`demo-cols-${config.cols || 2}`}
+                      {...{ directives: [
+                        {
+                          name: 'mountedCallback',
+                          value: this.mountedCallback,
+                        },
+                      ] }}
+                    ></router-view>
                   </Provider> : ''}
                   {this.showApi ? <div class='markdown api-container' ref='doc'>
-                    <router-view></router-view>
+                    <router-view
+                      {...{ directives: [
+                        {
+                          name: 'mountedCallback',
+                          value: this.mountedCallback,
+                        },
+                      ] }}
+                    ></router-view>
                   </div> : ''}
                 </div>
               </a-col>
diff --git a/site/index.html b/site/index.html
@@ -9,6 +9,11 @@
     <meta http-equiv="Pragma" content="no-cache" />
     <meta http-equiv="Expires" content="0" />
     <link rel="icon" type="image/x-icon" href="https://raw.githubusercontent.com/vueComponent/ant-design/master/logo.png">
+    <style id="nprogress-style">
+        #nprogress {
+            display: none
+        }
+    </style>
 </head>
 
 <body>
diff --git a/site/index.js b/site/index.js
@@ -12,6 +12,17 @@ import './components'
 import demoBox from './components/demoBox'
 import demoContainer from './components/demoContainer'
 
+const mountedCallback = {
+  install: (Vue, options) => {
+    Vue.directive('mountedCallback', {
+      inserted: function (el, binding, vnode) {
+        binding.value(vnode)
+      },
+    })
+  },
+}
+
+Vue.use(mountedCallback)
 Vue.use(VueClipboard)
 Vue.use(VueRouter)
 Vue.component(Md.name, Md)
diff --git a/site/routes.js b/site/routes.js
@@ -1,15 +1,23 @@
 import Layout from './components/layout.vue'
 import Iframe from './components/iframe.vue'
 import demoRoutes from './demoRoutes'
+import NProgress from 'nprogress'
 
+const beforeEnter = (to, from, next) => {
+  NProgress.start()
+  next()
+}
 export default [
   { path: '/ant-design/components',
     component: Layout,
     props: (route) => {
       const name = route.path.split('/ant-design/components/')[1].split('/')[0]
       return { name, showDemo: true }
     },
-    children: demoRoutes,
+    children: demoRoutes.map((item) => ({
+      ...item,
+      beforeEnter,
+    })),
   },
   { path: '/ant-design/iframe',
     component: Iframe,
@@ -32,50 +40,62 @@ export default [
       {
         path: 'docs/vue/customize-theme',
         component: () => import('../docs/vue/customize-theme.en-US.md'),
+        beforeEnter,
       },
       {
         path: 'docs/vue/customize-theme-cn',
         component: () => import('../docs/vue/customize-theme.zh-CN.md'),
+        beforeEnter,
       },
       {
         path: 'docs/vue/getting-started',
         component: () => import('../docs/vue/getting-started.en-US.md'),
+        beforeEnter,
       },
       {
         path: 'docs/vue/getting-started-cn',
         component: () => import('../docs/vue/getting-started.zh-CN.md'),
+        beforeEnter,
       },
       {
         path: 'docs/vue/i18n',
         component: () => import('../docs/vue/i18n.en-US.md'),
+        beforeEnter,
       },
       {
         path: 'docs/vue/i18n-cn',
         component: () => import('../docs/vue/i18n.zh-CN.md'),
+        beforeEnter,
       },
       {
         path: 'docs/vue/introduce',
         component: () => import('../docs/vue/introduce.en-US.md'),
+        beforeEnter,
       },
       {
         path: 'docs/vue/introduce-cn',
         component: () => import('../docs/vue/introduce.zh-CN.md'),
+        beforeEnter,
       },
       {
         path: 'docs/vue/use-with-vue-cli',
         component: () => import('../docs/vue/use-with-vue-cli.en-US.md'),
+        beforeEnter,
       },
       {
         path: 'docs/vue/use-with-vue-cli-cn',
         component: () => import('../docs/vue/use-with-vue-cli.zh-CN.md'),
+        beforeEnter,
       },
       {
         path: 'docs/vue/changelog',
         component: () => import('../CHANGELOG.en-US.md'),
+        beforeEnter,
       },
       {
         path: 'docs/vue/changelog-cn',
         component: () => import('../CHANGELOG.zh-CN.md'),
+        beforeEnter,
       },
       { path: '', redirect: '/ant-design/vue/docs/introduce/' },
     ],
diff --git a/site/theme/static/index.less b/site/theme/static/index.less
@@ -20,3 +20,4 @@
 @import './responsive';
 @import './theme';
 @import './docsearch';
+@import './nprogress';
