From 4b06ad0e94233334a79396a5cf59e241dc53f97b Mon Sep 17 00:00:00 2001
From: tjz <415800467@qq.com>
Date: Tue, 10 Apr 2018 21:44:45 +0800
Subject: [PATCH] fix docs

---
 docs/vue/i18n.en-US.md             |   2 +-
 docs/vue/introduce.en-US.md        |   4 +-
 docs/vue/introduce.zh-CN.md        |   4 +-
 docs/vue/use-with-vue-cli.en-US.md |   5 +-
 docs/vue/use-with-vue-cli.zh-CN.md |   4 +-
 site/components/demo.vue           | 140 -----------------------------
 site/components/layout.vue         |  36 ++++++--
 webpack.base.config.js             |   2 +-
 8 files changed, 38 insertions(+), 159 deletions(-)
 delete mode 100644 site/components/demo.vue

diff --git a/docs/vue/i18n.en-US.md b/docs/vue/i18n.en-US.md
index e6e4e5f4d..ef258fb56 100644
--- a/docs/vue/i18n.en-US.md
+++ b/docs/vue/i18n.en-US.md
@@ -6,7 +6,7 @@ If you want to use other languages, you can follow the instructions below.
 
 ## LocaleProvider
 
-vue-antd-ui provides a React Component [LocaleProvider](/ant-design/components/locale-provider) for configuring vue-antd-ui locale text globally.
+vue-antd-ui provides a Vue Component [LocaleProvider](/ant-design/components/locale-provider) for configuring vue-antd-ui locale text globally.
 
 ````html
 <template>
diff --git a/docs/vue/introduce.en-US.md b/docs/vue/introduce.en-US.md
index 52d8b1ecd..b91bf0d58 100644
--- a/docs/vue/introduce.en-US.md
+++ b/docs/vue/introduce.en-US.md
@@ -26,12 +26,12 @@ Following the Ant Design specification, we developed a Vue UI library `antd` tha
 ## Features
 
 - An enterprise-class UI design language for web applications.
-- A set of high-quality React components out of the box.
+- A set of high-quality Vue components out of the box.
 - Shared [Ant Design of React](https://ant.design/docs/spec/introduce) design resources.
 
 ## Environment Support
 
-* Modern browsers and Internet Explorer 9+ (with [polyfills](https://vuecomponent.github.io/ant-design/docs/react/getting-started-cn#兼容性))
+* Modern browsers and Internet Explorer 9+ (with [polyfills](https://vuecomponent.github.io/ant-design/docs/vue/getting-started-cn/#兼容性))
 * Server-side Rendering
 
 ## Version
diff --git a/docs/vue/introduce.zh-CN.md b/docs/vue/introduce.zh-CN.md
index 12706aa0e..bc5a01f7a 100644
--- a/docs/vue/introduce.zh-CN.md
+++ b/docs/vue/introduce.zh-CN.md
@@ -30,7 +30,7 @@
 
 ## 支持环境
 
-* 现代浏览器和 IE9 及以上（需要 [polyfills](https://vuecomponent.github.io/ant-design/docs/react/getting-started-cn#兼容性)）。
+* 现代浏览器和 IE9 及以上（需要 [polyfills](https://vuecomponent.github.io/ant-design/docs/vue/getting-started-cn/#兼容性)）。
 * 支持服务端渲染。
 
 ## 版本
@@ -118,7 +118,7 @@ import 'vue-antd-ui/dist/antd.css';  // or 'vue-antd-ui/dist/antd.less'
 
 - [首页](https://vuecomponent.github.io/ant-design/)
 - [Ant Design React](https://ant.design/)
-- [组件库](https://vuecomponent.github.io/ant-design/docs/react/introduce-cn)
+- [组件库](https://vuecomponent.github.io/ant-design/docs/vue/introduce-cn)
 - [更新日志](/ant-design/changelog-cn)
 - [CodeSandbox 模板](https://codesandbox.io/s/2wpk21kzvr) for bug reports
 - [定制主题](/ant-design/docs/vue/customize-theme-cn)
diff --git a/docs/vue/use-with-vue-cli.en-US.md b/docs/vue/use-with-vue-cli.en-US.md
index ad613ba4e..e36031b5b 100644
--- a/docs/vue/use-with-vue-cli.en-US.md
+++ b/docs/vue/use-with-vue-cli.en-US.md
@@ -3,7 +3,6 @@
 
 [vue-cli](https://github.com/vuejs/vue-cli) is one of the best Vue application development tools. We are going to use `antd` within it and modify the webpack config for some customized needs.
 
----
 
 ## Install and Initialization
 
@@ -100,7 +99,7 @@ Now we need to customize the default webpack config.
 
 ### Use babel-plugin-import
 
-[babel-plugin-import](https://github.com/ant-design/babel-plugin-import) is a babel plugin for importing components on demand ([How does it work?](/ant-design/docs/vue/getting-started#Import-on-Demand)).
+[babel-plugin-import](https://github.com/ant-design/babel-plugin-import) is a babel plugin for importing components on demand ([How does it work?](/ant-design/docs/vue/getting-started/#Import-on-Demand)).
 
 ```bash
 $ yarn add babel-plugin-import --dev
@@ -150,7 +149,7 @@ Remove the `import 'vue-antd-ui/dist/antd.css';` statement added before because
   })
 ```
 
-Then reboot with `npm run dev` and visit the demo page, you should not find any [warning messages](https://zos.alipayobjects.com/rmsportal/vgcHJRVZFmPjAawwVoXK.png) in the console, which prove that the `import on demand` config is working now. You will find more info about it in [this guide](/ant-design/docs/vue/getting-started#Import-on-Demand).
+Then reboot with `npm run dev` and visit the demo page, you should not find any [warning messages](https://zos.alipayobjects.com/rmsportal/vgcHJRVZFmPjAawwVoXK.png) in the console, which prove that the `import on demand` config is working now. You will find more info about it in [this guide](/ant-design/docs/vue/getting-started/#Import-on-Demand).
 
 ### Customize Theme
 
diff --git a/docs/vue/use-with-vue-cli.zh-CN.md b/docs/vue/use-with-vue-cli.zh-CN.md
index 6e36417c5..5dba78e9b 100644
--- a/docs/vue/use-with-vue-cli.zh-CN.md
+++ b/docs/vue/use-with-vue-cli.zh-CN.md
@@ -96,7 +96,7 @@ new Vue({
 
 ### 使用 babel-plugin-import
 
-[babel-plugin-import](https://github.com/ant-design/babel-plugin-import) 是一个用于按需加载组件代码和样式的 babel 插件（[原理](/ant-design/docs/vue/getting-started#按需加载)）。
+[babel-plugin-import](https://github.com/ant-design/babel-plugin-import) 是一个用于按需加载组件代码和样式的 babel 插件（[原理](/ant-design/docs/vue/getting-started-cn/#按需加载)）。
 
 ```bash
 $ yarn add babel-plugin-import --dev
@@ -147,7 +147,7 @@ $ yarn add babel-plugin-import --dev
   })
 ```
 
-最后重启 `npm run dev` 访问页面，antd 组件的 js 和 css 代码都会按需加载，你在控制台也不会看到这样的[警告信息](https://zos.alipayobjects.com/rmsportal/vgcHJRVZFmPjAawwVoXK.png)。关于按需加载的原理和其他方式可以阅读[这里](/ant-design/docs/vue/getting-started-cn#按需加载)。
+最后重启 `npm run dev` 访问页面，antd 组件的 js 和 css 代码都会按需加载，你在控制台也不会看到这样的[警告信息](https://zos.alipayobjects.com/rmsportal/vgcHJRVZFmPjAawwVoXK.png)。关于按需加载的原理和其他方式可以阅读[这里](/ant-design/docs/vue/getting-started-cn/#按需加载)。
 
 ### 自定义主题
 
diff --git a/site/components/demo.vue b/site/components/demo.vue
deleted file mode 100644
index c8bd19770..000000000
--- a/site/components/demo.vue
+++ /dev/null
@@ -1,140 +0,0 @@
-<script>
-import * as AllDemo from '../demo'
-import Header from './header'
-import zhCN from 'antd/locale-provider/zh_CN'
-import enUS from 'antd/locale-provider/default'
-import _ from 'lodash'
-import { isZhCN } from '../util'
-import { Provider, create } from '../../components/_util/store'
-
-export default {
-  data () {
-    this.store = create({
-      currentSubMenu: [],
-    })
-    this.subscribe()
-    return {
-      currentSubMenu: [],
-    }
-  },
-  beforeDestroy () {
-    if (this.unsubscribe) {
-      this.unsubscribe()
-    }
-  },
-  watch: {
-    '$route.params.name': function () {
-      this.store.setState({ currentSubMenu: [] })
-    },
-  },
-  methods: {
-    subscribe () {
-      const { store } = this
-      this.unsubscribe = store.subscribe(() => {
-        this.currentSubMenu = this.store.getState().currentSubMenu
-      })
-    },
-    getSubMenu (isCN) {
-      const currentSubMenu = this.currentSubMenu
-      const lis = []
-      currentSubMenu.forEach(({ cnTitle, usTitle, id }) => {
-        const title = isCN ? cnTitle : usTitle
-        const className = window.location.hash === `#${id}` ? 'current' : ''
-        lis.push(<li title={title}><a href={`#${id}`} class={className}>{title}</a></li>)
-      })
-      return (
-        <a-affix>
-          <ul id='demo-toc' class='toc'>
-            {lis}
-            <li title='API' key='API'>
-              <a
-                href='#api'
-                class={{
-                  current: window.location.hash === '#api',
-                }}
-              >API</a>
-            </li>
-          </ul>
-        </a-affix>
-      )
-    },
-  },
-  render () {
-    const { name } = this.$route.params
-    const isCN = isZhCN(name)
-    const lang = isCN ? 'cn' : 'us'
-    // name = name.replace(/-cn\/?$/, '')
-    const titleMap = {}
-    const menuConfig = {
-      General: [],
-      Layout: [],
-      Navigation: [],
-      'Data Entry': [],
-      'Data Display': [],
-      Feedback: [],
-      Other: [],
-    }
-    for (const [title, d] of Object.entries(AllDemo)) {
-      const type = d.type || 'Other'
-      const key = `${title.replace(/(\B[A-Z])/g, '-$1').toLowerCase()}`
-      titleMap[key] = title
-      menuConfig[type] = menuConfig[type] || []
-      menuConfig[type].push(d)
-    }
-    const Demo = AllDemo[titleMap[name.replace(/-cn\/?$/, '')]]
-    const MenuGroup = []
-    for (const [type, menus] of Object.entries(menuConfig)) {
-      const MenuItems = []
-      _.sortBy(menus, ['title']).forEach(({ title, subtitle }) => {
-        const linkValue = lang === 'cn'
-          ? [<span>{title}</span>, <span class='chinese'>{subtitle}</span>]
-          : [<span>{title}</span>]
-        let key = `${title.replace(/(\B[A-Z])/g, '-$1').toLowerCase()}`
-        if (lang === 'cn') {
-          key = `${key}-cn`
-        }
-        MenuItems.push(<a-menu-item key={key}>
-          <router-link to={{ path: `/ant-design/components/${key}/` }}>{linkValue}</router-link>
-        </a-menu-item>)
-      })
-      MenuGroup.push(<a-menu-item-group title={type}>{MenuItems}</a-menu-item-group>)
-    }
-    let locale = zhCN
-    if (lang !== 'cn') {
-      locale = enUS
-    }
-    return (
-      <div class='page-wrapper'>
-        <Header num={Object.keys(AllDemo).length}/>
-
-        <a-locale-provider locale={locale}>
-          <div class='main-wrapper'>
-            <a-row>
-              <a-col xxl={4} xl={5} lg={5} md={6} sm={24} xs={24}>
-                <a-menu
-                  class='aside-container menu-site'
-                  selectedKeys={[name]}
-                  defaultOpenKeys={['Components']}
-                  inlineIndent={40}
-                  mode='inline'>
-                  <a-sub-menu title='Components' key='Components'>
-                    {MenuGroup}
-                  </a-sub-menu>
-                </a-menu>
-              </a-col>
-              <a-col xxl={20} xl={19} lg={19} md={18} sm={0} xs={0}>
-                <div class='content main-container'>
-                  <div class='toc-affix' style='width: 110px;'>
-                    {this.getSubMenu(isCN)}
-                  </div>
-                  {Demo ? <Provider store={this.store}><Demo key={lang}/></Provider> : '正在紧急开发中...'}
-                </div>
-              </a-col>
-            </a-row>
-          </div>
-        </a-locale-provider>
-      </div>
-    )
-  },
-}
-</script>
diff --git a/site/components/layout.vue b/site/components/layout.vue
index 6308a2a1f..19184c657 100644
--- a/site/components/layout.vue
+++ b/site/components/layout.vue
@@ -25,12 +25,31 @@ export default {
       this.unsubscribe()
     }
   },
+  mounted () {
+    this.addSubMenu()
+  },
   watch: {
-    '$route': function () {
+    '$route.path': function () {
       this.store.setState({ currentSubMenu: [] })
+      this.addSubMenu()
     },
   },
   methods: {
+    addSubMenu () {
+      if (this.$route.path.indexOf('/docs/vue/') !== -1) {
+        this.$nextTick(() => {
+          const menus = []
+          this.$refs.doc.querySelectorAll(['h2', 'h3']).forEach(dom => {
+            const id = dom.id
+            if (id) {
+              const title = dom.textContent.split('#')[0].trim()
+              menus.push({ cnTitle: title, usTitle: title, id })
+            }
+          })
+          this.currentSubMenu = menus
+        })
+      }
+    },
     subscribe () {
       const { store } = this
       this.unsubscribe = store.subscribe(() => {
@@ -42,21 +61,22 @@ export default {
       const lis = []
       currentSubMenu.forEach(({ cnTitle, usTitle, id }) => {
         const title = isCN ? cnTitle : usTitle
-        const className = window.location.hash === `#${id}` ? 'current' : ''
+        const className = decodeURIComponent(window.location.hash) === `#${id}` ? 'current' : ''
         lis.push(<li title={title}><a href={`#${id}`} class={className}>{title}</a></li>)
       })
+      const showApi = this.$route.path.indexOf('/components/') !== -1
       return (
         <a-affix>
           <ul id='demo-toc' class='toc'>
             {lis}
-            <li title='API' key='API'>
+            {showApi ? <li title='API' key='API'>
               <a
-                href='#api'
+                href='#API'
                 class={{
-                  current: window.location.hash === '#api',
+                  current: window.location.hash === '#API',
                 }}
               >API</a>
-            </li>
+            </li> : ''}
           </ul>
         </a-affix>
       )
@@ -144,12 +164,12 @@ export default {
               <a-col xxl={20} xl={19} lg={19} md={18} sm={0} xs={0}>
                 <div class='content main-container'>
                   <div class='toc-affix' style='width: 110px;'>
-                    {Demo ? this.getSubMenu(isCN) : ''}
+                    {this.getSubMenu(isCN)}
                   </div>
                   {Demo ? <Provider store={this.store}>
                     <Demo key={isCN ? 'cn' : 'en'}/>
                   </Provider> : ''}
-                  <div class='markdown api-container'>
+                  <div class='markdown api-container' ref='doc'>
                     <router-view></router-view>
                   </div>
                 </div>
diff --git a/webpack.base.config.js b/webpack.base.config.js
index 0fe743cfe..8256cafac 100644
--- a/webpack.base.config.js
+++ b/webpack.base.config.js
@@ -47,7 +47,7 @@ const md = require('markdown-it')('default', {
   highlight: renderHighlight,
 }).use(require('markdown-it-anchor'), {
   level: 2,
-  // slugify: string => string,
+  slugify: string => string.trim().split(' ').join('-'),
   permalink: true,
   // renderPermalink: (slug, opts, state, permalink) => {},
   permalinkClass: 'anchor',