update docs

components/date-picker/index.en-US.md

@@ -58,7 +58,7 @@ The following APIs are shared by DatePicker, MonthPicker, RangePicker, WeekPicke
 | disabledTime | to specify the time that cannot be selected | function(date) | - |
 | format | to set the date format, refer to [moment.js](http://momentjs.com/) | string | "YYYY-MM-DD" |
 | renderExtraFooter | render extra footer in panel by setting a scoped slot | slot="renderExtraFooter" | - |
-| showTime | to provide an additional time selection | object\|boolean | [TimePicker Options](/components/time-picker/#API) |
+| showTime | to provide an additional time selection | object\|boolean | [TimePicker Options](#/us/components/time-picker/API) |
 | showTime.defaultValue | to set default time of selected date | [moment](http://momentjs.com/) | moment() |
 | showToday | whether to show "Today" button | boolean | true |
 | value | to set date | [moment](http://momentjs.com/) | - |
@@ -107,7 +107,7 @@ The following APIs are shared by DatePicker, MonthPicker, RangePicker, WeekPicke
 | format | to set the date format | string | "YYYY-MM-DD HH:mm:ss" |
 | ranges | preseted ranges for quick selection | { \[range: string\]: [moment](http://momentjs.com/)\[] } \| () => { \[range: string\]: [moment](http://momentjs.com/)\[] } | - |
 | renderExtraFooter | render extra footer in panel by setting a scoped slot| slot="renderExtraFooter" | - |
-| showTime | to provide an additional time selection | object\|boolean | [TimePicker Options](/components/time-picker/#API) |
+| showTime | to provide an additional time selection | object\|boolean | [TimePicker Options](#/us/components/time-picker/API) |
 | showTime.defaultValue | to set default time of selected date, [demo](https://ant.design/components/date-picker/#components-date-picker-demo-disabled-date) | [moment](http://momentjs.com/)\[] | [moment(), moment()] |
 | value | to set date | \[[moment](http://momentjs.com/), [moment](http://momentjs.com/)] | - |
 

components/date-picker/index.zh-CN.md

@@ -59,7 +59,7 @@
 | disabledTime | 不可选择的时间 | function(date) | 无 |
 | format | 展示的日期格式，配置参考 [moment.js](http://momentjs.com/) | string | "YYYY-MM-DD" |
 | renderExtraFooter | 在面板中添加额外的页脚 | slot="renderExtraFooter" | - |
-| showTime | 增加时间选择功能 | Object\|boolean | [TimePicker Options](/components/time-picker/#API) |
+| showTime | 增加时间选择功能 | Object\|boolean | [TimePicker Options](#/cn/components/time-picker/API) |
 | showTime.defaultValue | 设置用户选择日期时默认的时分秒 | [moment](http://momentjs.com/) | moment() |
 | showToday | 是否展示“今天”按钮 | boolean | true |
 | value | 日期 | [moment](http://momentjs.com/) | 无 |
@@ -110,8 +110,8 @@
 | format | 展示的日期格式 | string | "YYYY-MM-DD HH:mm:ss" |
 | ranges       | 预设时间范围快捷选择 | { \[range: string\]: [moment](http://momentjs.com/)\[] } \| () => { \[range: string\]: [moment](http://momentjs.com/)\[] } | 无 |
 | renderExtraFooter | 在面板中添加额外的页脚 | slot="renderExtraFooter" | - |
-| showTime | 增加时间选择功能 | Object\|boolean | [TimePicker Options](/components/time-picker/#API) |
+| showTime | 增加时间选择功能 | Object\|boolean | [TimePicker Options](#/cn/components/time-picker/API) |
-| showTime.defaultValue | 设置用户选择日期时默认的时分秒，[例子](https://ant.design/components/date-picker/#components-date-picker-demo-disabled-date) | [moment](http://momentjs.com/)\[] | [moment(), moment()] |
+| showTime.defaultValue | 设置用户选择日期时默认的时分秒 | [moment](http://momentjs.com/)\[] | [moment(), moment()] |
 | value | 日期 | [moment](http://momentjs.com/)\[] | 无 |
 
 ### RangePicker事件

components/icon/demo/index.vue

@@ -40,6 +40,10 @@ const md = {
       `,
 }
 export default {
+  category: 'Components',
+  type: 'General',
+  title: 'Icon',
+  subtitle: '图标',
   render () {
     return (
       <div>

components/index.js

@@ -1,4 +1,3 @@
-import './style.js'
 import Button from './button'
 const ButtonGroup = Button.Group
 export { Button, ButtonGroup }

components/locale-provider/demo/index.vue

@@ -3,6 +3,20 @@ import Basic from './basic'
 import All from './all'
 import CN from '../index.zh-CN.md'
 import US from '../index.en-US.md'
+const md = {
+  cn: `## API
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| locale | 语言包配置，语言包可到 \`antd/lib/locale-provider/\` 目录下寻找 | object | - |
+`,
+  us: `## API
+
+| Property | Description | Type | Default |
+| -------- | ----------- | ---- | ------- |
+| locale | language package setting, you can find the packages in this path: \`antd/lib/locale-provider/\` | object | - |
+`,
+}
 export default {
   category: 'Components',
   subtitle: '国际化',
@@ -18,6 +32,7 @@ export default {
         </api>
         <Basic />
         <All />
+        <md cn={md.cn} us={md.us}/>
       </div>
     )
   },

components/locale-provider/index.en-US.md

@@ -49,10 +49,4 @@ If you can't find your language, you are welcome to create a locale package base
 
 This component aims for localization of the built-in text, if you want to support other documents, we recommend using [vue-i18n](https://github.com/kazupon/vue-i18n).
 
-## API
-
-| Property | Description | Type | Default |
-| -------- | ----------- | ---- | ------- |
-| locale | language package setting, you can find the packages in this path: `antd/lib/locale-provider/` | object | - |
-
 ## Examples

components/locale-provider/index.zh-CN.md

@@ -48,10 +48,4 @@ const { LocaleProvider, locales } = window.antd;
 
 本模块仅用于组件的内建文案，若有业务文案的国际化需求，建议使用 [vue-i18n](https://github.com/kazupon/vue-i18n)
 
-## API
-
-| 参数 | 说明 | 类型 | 默认值 |
-| --- | --- | --- | --- |
-| locale | 语言包配置，语言包可到 `antd/lib/locale-provider/` 目录下寻找 | object | - |
-
 ## 代码演示

components/menu/index.en-US.md

@@ -54,7 +54,7 @@
 | children | sub menus or sub menu items | Array<MenuItem\|SubMenu> |  |
 | disabled | whether sub menu is disabled or not | boolean | false |
 | key | unique id of the sub menu | string |  |
-| title | title of the sub menu | string\|ReactNode |  |
+| title | title of the sub menu | string\|slot |  |
 
 ### Menu.SubMenu Events
 | Events Name | Description | Arguments |
@@ -66,7 +66,7 @@
 | Param | Description | Type | Default value |
 | ----- | ----------- | ---- | ------------- |
 | children | sub menu items | MenuItem\[] |  |
-| title | title of the group | string\|ReactNode |  |
+| title | title of the group | string\|slot |  |
 
 ### Menu.Divider
 

components/menu/index.zh-CN.md

@@ -61,7 +61,7 @@
 
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| title | 分组标题 | string\|\|function|\slot |  |
+| title | 分组标题 | string\|\|function\|slot |  |
 
 ### Menu.Divider
 

components/popconfirm/index.zh-CN.md

@@ -27,7 +27,7 @@ title: Popconfirm
 | cancel | 点击取消时触发 | (e) |
 | confirm | 点击确认时触发 | (e) |
 
-更多属性请参考 [Tooltip](/components/tooltip/#API)。
+更多属性请参考 [Tooltip](#/cn/components/tooltip/API)。
 
 ## 注意
 

components/popover/index.zh-CN.md

@@ -20,7 +20,7 @@ title: Popover
 | content | 卡片内容 | string\|function\|slot | 无 |
 | title | 卡片标题 | string\|function\|slot | 无 |
 
-更多属性请参考 [Tooltip](/components/tooltip/#API)。
+更多属性请参考 [Tooltip](#/cn/components/tooltip/API)。
 
 ## 注意
 

components/select/demo/coordinate.md

@@ -2,13 +2,13 @@
 <cn>
 #### 联动
 省市联动是典型的例子。
-推荐使用 [Cascader](/components/cascader/) 组件。
+推荐使用 [Cascader](#/cn/components/cascader/) 组件。
 </cn>
 
 <us>
 #### coordinate
 Coordinating the selection of provinces and cities is a common use case and demonstrates how selection can be coordinated.
-Using the [Cascader](/components/cascader) component is strongly recommended instead as it is more flexible and capable.
+Using the [Cascader](#/us/components/cascader) component is strongly recommended instead as it is more flexible and capable.
 </us>
 
 ```html

components/tabs/index.zh-CN.md

@@ -16,7 +16,7 @@ Ant Design 依次提供了三级选项卡，分别用于不同的场景。
 
 - 卡片式的页签，提供可关闭的样式，常用于容器顶部。
 - 标准线条式页签，用于容器内部的主功能切换，这是最常用的 Tabs。
-- [RadioButton](/components/radio/#components-radio-demo-radiobutton) 可作为更次级的页签来使用。
+- [RadioButton](#/cn/components/radio/components-radio-demo-radiobutton) 可作为更次级的页签来使用。
 
 ## API
 

components/vc-menu/MenuItemGroup.jsx

@@ -34,7 +34,7 @@ const MenuItemGroup = {
           {getComponentFromProp(this, 'title')}
         </div>
         <ul class={listClassName}>
-          {this.$slots.default.map(this.renderInnerMenuItem)}
+          {this.$slots.default && this.$slots.default.map(this.renderInnerMenuItem)}
         </ul>
       </li>
     )

examples/components/demo.vue

@@ -5,9 +5,40 @@ import zhCN from 'antd/locale-provider/zh_CN'
 import enUS from 'antd/locale-provider/default'
 export default {
   render () {
-    const { name, demo } = this.$route.params // eslint-disable-line
+    const { name } = this.$route.params
     let { lang } = this.$route.params
-    const Demo = AllDemo[name]
+    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]]
+    const MenuGroup = []
+    for (const [type, menus] of Object.entries(menuConfig)) {
+      const MenuItems = []
+      menus.forEach(({ title, subtitle }) => {
+        const linkValue = lang === 'cn'
+          ? [<span>{title}</span>, <span class='chinese'>{subtitle}</span>]
+          : [<span>{title}</span>]
+        const key = `${title.replace(/(\B[A-Z])/g, '-$1').toLowerCase()}`
+        MenuItems.push(<a-menu-item key={key} style='padding-left: 80px'>
+          <router-link to={{ path: `/${lang}/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') {
       lang = 'us'
@@ -17,16 +48,24 @@ export default {
       <a-locale-provider locale={locale}>
         <div class='site'>
           <Header />
-          <div class='main-wrapper'>
+          <a-row>
-            <a-menu class='nav' selectedKeys={[name]}>
+            <a-col xxl={4} xl={5} lg={5} md={6} sm={24} xs={24}>
-              {Object.keys(AllDemo).map(d => <a-menu-item key={d}>
+              <a-menu
-                <router-link to={{ path: `/${lang}/components/${d}` }}>{d}</router-link>
+                class='aside-container menu-site'
-              </a-menu-item>)}
+                selectedKeys={[name]}
+                defaultOpenKeys={['Components']}
+                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'>
-              {Demo ? <Demo /> : '正在紧急开发中...'}
+                {Demo ? <Demo key={lang}/> : '正在紧急开发中...'}
-            </div>
               </div>
+            </a-col>
+          </a-row>
         </div>
       </a-locale-provider>
     )

examples/components/header.vue

@@ -1,27 +1,43 @@
-<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-item key='github'>
-        <a href="https://github.com/vueComponent/ant-design">GitHub</a>
-      </a-menu-item>
-    </a-menu>
-  </header>
-</template>
 <script>
 export default {
   data () {
     return {
-      current: ['components'],
     }
   },
+  methods: {
+    handleClick () {
+      const { lang, name } = this.$route.params
+      this.$router.push({
+        path: `/${lang === 'cn' ? 'us' : 'cn'}/components/${name}`,
+      })
+    },
+  },
+  render () {
+    const { lang } = this.$route.params
+    return (
+      <header id='header'>
+        <a-row>
+          <a-col xxl={4} xl={5} lg={5} md={6} sm={24} xs={24}>
+            Logo
+          </a-col>
+          <a-col xxl={20} xl={19} lg={19} md={18} sm={0} xs={0}>
+            <div id='search-box'>
+            </div>
+            <a-button ghost size='small' onClick={this.handleClick} class='header-lang-button' key='lang-button'>
+              {lang === 'cn' ? 'English' : '中文'}
+            </a-button>
+            <a-menu selectedKeys={['components']} mode='horizontal' class='menu-site' id='nav'>
+              <a-menu-item key='components'>
+                {lang === 'cn' ? '组件' : 'Components'}
+              </a-menu-item>
+              <a-menu-item key='github'>
+                <a href='https://github.com/vueComponent/ant-design'>GitHub</a>
+              </a-menu-item>
+            </a-menu>
+          </a-col>
+        </a-row>
+      </header>
+    )
+  },
 }
 </script>

examples/index.js

@@ -1,3 +1,4 @@
+import '../components/style.js'
 import './index.less'
 import 'highlight.js/styles/solarized-light.css'
 import Vue from 'vue'

examples/index.less

@@ -8,9 +8,6 @@
   .content {
     flex: 1;
   }
-  #header {
-    padding: 0 50px;
-  }
   .main-wrapper {
     display: flex;
     flex: 1;