merge

2018-04-07 00:26:30 +08:00 · 2018-04-07 00:26:30 +08:00 · c9736a4136
parent a1b671a8c4 25d1703092
commit c9736a4136
46 changed files with 305 additions and 95 deletions
--- a/.gitignore
+++ b/.gitignore
@ -61,6 +61,7 @@ typings/
 dist
 lib
 es
+site-dist

 # 备份文件
 /components/test/*
--- a/components/icon/demo/index.vue
+++ b/components/icon/demo/index.vue
@ -1,5 +1,5 @@
 <script>
-import IconSet from '@/examples/components/IconSet/index'
+import IconSet from '@/site/components/IconSet/index'
 const md = {
  cn: `# 图标 Icon
        语义化的矢量图形。
--- a/examples/components/api.vue
+++ b/examples/components/api.vue
@ -1,17 +0,0 @@
-<template>
-  <div class='markdown api-container'>
-    <slot v-if="lang === 'cn'" name="cn"></slot>
-    <slot v-else></slot>
-  </div>
-</template>
-<script>
-export default {
-  name: 'api',
-  data () {
-    const { lang } = this.$route.params
-    return {
-      lang,
-    }
-  },
-}
-</script>
--- a/package-lock.json
+++ b/package-lock.json
@ -73,7 +73,7 @@
            "dev": true,
            "requires": {
                "@babel/types": "7.0.0-beta.42",
-                "lodash": "4.17.4"
+                "lodash": "4.17.5"
            },
            "dependencies": {
                "@babel/types": {
@ -83,7 +83,7 @@
                    "dev": true,
                    "requires": {
                        "esutils": "2.0.2",
-                        "lodash": "4.17.4",
+                        "lodash": "4.17.5",
                        "to-fast-properties": "2.0.0"
                    }
                },
@ -104,7 +104,7 @@
                "@babel/code-frame": "7.0.0-beta.36",
                "@babel/types": "7.0.0-beta.36",
                "babylon": "7.0.0-beta.36",
-                "lodash": "4.17.4"
+                "lodash": "4.17.5"
            },
            "dependencies": {
                "babylon": {
@ -128,7 +128,7 @@
                "debug": "3.1.0",
                "globals": "11.1.0",
                "invariant": "2.2.2",
-                "lodash": "4.17.4"
+                "lodash": "4.17.5"
            },
            "dependencies": {
                "babylon": {
@ -152,7 +152,7 @@
            "dev": true,
            "requires": {
                "esutils": "2.0.2",
-                "lodash": "4.17.4",
+                "lodash": "4.17.5",
                "to-fast-properties": "2.0.0"
            },
            "dependencies": {
@ -684,7 +684,7 @@
                "convert-source-map": "1.5.1",
                "fs-readdir-recursive": "1.1.0",
                "glob": "7.1.2",
-                "lodash": "4.17.4",
+                "lodash": "4.17.5",
                "output-file-sync": "1.1.2",
                "path-is-absolute": "1.0.1",
                "slash": "1.0.0",
@ -749,7 +749,7 @@
                "convert-source-map": "1.5.1",
                "debug": "2.6.9",
                "json5": "0.5.1",
-                "lodash": "4.17.4",
+                "lodash": "4.17.5",
                "minimatch": "3.0.4",
                "path-is-absolute": "1.0.1",
                "private": "0.1.8",
@ -800,7 +800,7 @@
                "babel-types": "6.26.0",
                "detect-indent": "4.0.0",
                "jsesc": "1.3.0",
-                "lodash": "4.17.4",
+                "lodash": "4.17.5",
                "source-map": "0.5.7",
                "trim-right": "1.0.1"
            }
@ -1513,7 +1513,7 @@
                "babel-traverse": "6.26.0",
                "babel-types": "6.26.0",
                "babylon": "6.18.0",
-                "lodash": "4.17.4"
+                "lodash": "4.17.5"
            }
        },
        "babel-traverse": {
@ -1530,7 +1530,7 @@
                "debug": "2.6.9",
                "globals": "9.18.0",
                "invariant": "2.2.2",
-                "lodash": "4.17.4"
+                "lodash": "4.17.5"
            },
            "dependencies": {
                "debug": {
@ -1552,7 +1552,7 @@
            "requires": {
                "babel-runtime": "6.26.0",
                "esutils": "2.0.2",
-                "lodash": "4.17.4",
+                "lodash": "4.17.5",
                "to-fast-properties": "1.0.3"
            }
        },
@ -2113,7 +2113,7 @@
                "dom-serializer": "0.1.0",
                "entities": "1.1.1",
                "htmlparser2": "3.9.2",
-                "lodash": "4.17.4",
+                "lodash": "4.17.5",
                "parse5": "3.0.3"
            }
        },
@ -2459,7 +2459,7 @@
            "integrity": "sha1-RYwH4J4NkA/Ci3Cj/sLazR0st/Y=",
            "dev": true,
            "requires": {
-                "lodash": "4.17.4"
+                "lodash": "4.17.5"
            }
        },
        "combined-stream": {
@ -3958,7 +3958,7 @@
                "js-yaml": "3.10.0",
                "json-stable-stringify-without-jsonify": "1.0.1",
                "levn": "0.3.0",
-                "lodash": "4.17.4",
+                "lodash": "4.17.5",
                "minimatch": "3.0.4",
                "mkdirp": "0.5.1",
                "natural-compare": "1.4.0",
@ -4446,7 +4446,7 @@
                    "integrity": "sha1-YaKau2/MAm/qd+VtHG7FOnlZUfQ=",
                    "dev": true,
                    "requires": {
-                        "lodash": "4.17.4"
+                        "lodash": "4.17.5"
                    }
                }
            }
@ -7058,7 +7058,7 @@
                "bluebird": "3.5.1",
                "html-minifier": "3.5.8",
                "loader-utils": "0.2.17",
-                "lodash": "4.17.4",
+                "lodash": "4.17.5",
                "pretty-error": "2.1.1",
                "toposort": "1.0.6"
            },
@ -7141,7 +7141,7 @@
            "requires": {
                "http-proxy": "1.16.2",
                "is-glob": "3.1.0",
-                "lodash": "4.17.4",
+                "lodash": "4.17.5",
                "micromatch": "2.3.11"
            },
            "dependencies": {
@ -7349,7 +7349,7 @@
                "cli-width": "2.2.0",
                "external-editor": "2.1.0",
                "figures": "2.0.0",
-                "lodash": "4.17.4",
+                "lodash": "4.17.5",
                "mute-stream": "0.0.7",
                "run-async": "2.3.0",
                "rx-lite": "4.0.8",
@ -7649,6 +7649,11 @@
            "integrity": "sha1-bghLvJIGH7sJcexYts5tQE4k2mk=",
            "dev": true
        },
+        "is-negative-zero": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/is-negative-zero/-/is-negative-zero-2.0.0.tgz",
+            "integrity": "sha1-lVOxIbD6wohp2p7UWeIMdUN4hGE="
+        },
        "is-number": {
            "version": "2.1.0",
            "resolved": "https://registry.npmjs.org/is-number/-/is-number-2.1.0.tgz",
@ -7961,7 +7966,7 @@
                    "integrity": "sha1-YaKau2/MAm/qd+VtHG7FOnlZUfQ=",
                    "dev": true,
                    "requires": {
-                        "lodash": "4.17.4"
+                        "lodash": "4.17.5"
                    }
                }
            }
@ -8351,7 +8356,7 @@
            "integrity": "sha1-0jyjSAG9qYY60xjju0vUBisTrNI=",
            "dev": true,
            "requires": {
-                "lodash": "4.17.4",
+                "lodash": "4.17.5",
                "phantomjs-prebuilt": "2.1.16"
            }
        },
@ -8830,9 +8835,9 @@
            }
        },
        "lodash": {
-            "version": "4.17.4",
-            "resolved": "https://registry.npm.taobao.org/lodash/download/lodash-4.17.4.tgz",
-            "integrity": "sha1-eCA6TRwyiuHYbcpkYONptX9AVa4="
+            "version": "4.17.5",
+            "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.5.tgz",
+            "integrity": "sha512-svL3uiZf1RwhH+cWrfZn3A4+U58wbP0tGVTLQPbjplZxZ8ROD9VLuNgsRniTlLe7OlSqR79RUehXgpBW/s0IQw=="
        },
        "lodash._baseassign": {
            "version": "3.2.0",
@ -13011,7 +13016,7 @@
            "dev": true,
            "requires": {
                "chalk": "2.3.0",
-                "lodash": "4.17.4",
+                "lodash": "4.17.5",
                "log-symbols": "2.1.0",
                "postcss": "6.0.16"
            },
@ -15588,7 +15593,7 @@
                "ignore": "3.3.7",
                "imurmurhash": "0.1.4",
                "known-css-properties": "0.5.0",
-                "lodash": "4.17.4",
+                "lodash": "4.17.5",
                "log-symbols": "2.1.0",
                "mathml-tag-names": "2.0.1",
                "meow": "4.0.0",
@ -15994,7 +15999,7 @@
                "ajv": "5.5.2",
                "ajv-keywords": "2.1.1",
                "chalk": "2.3.0",
-                "lodash": "4.17.4",
+                "lodash": "4.17.5",
                "slice-ansi": "1.0.0",
                "string-width": "2.1.1"
            },
@ -17044,7 +17049,7 @@
                        "entities": "1.1.1",
                        "htmlparser2": "3.8.3",
                        "jsdom": "7.2.2",
-                        "lodash": "4.17.4"
+                        "lodash": "4.17.5"
                    }
                },
                "domhandler": {
@ -17144,7 +17149,7 @@
                "eslint-visitor-keys": "1.0.0",
                "espree": "3.5.2",
                "esquery": "1.0.0",
-                "lodash": "4.17.4"
+                "lodash": "4.17.5"
            }
        },
        "vue-hot-reload-api": {
@ -17307,7 +17312,7 @@
                    "integrity": "sha1-YaKau2/MAm/qd+VtHG7FOnlZUfQ=",
                    "dev": true,
                    "requires": {
-                        "lodash": "4.17.4"
+                        "lodash": "4.17.5"
                    }
                }
            }
@ -17364,7 +17369,7 @@
                    "integrity": "sha1-YaKau2/MAm/qd+VtHG7FOnlZUfQ=",
                    "dev": true,
                    "requires": {
-                        "lodash": "4.17.4"
+                        "lodash": "4.17.5"
                    }
                },
                "camelcase": {
@ -18003,7 +18008,7 @@
            "integrity": "sha1-8Rl6Cpc+acb77rbWWCGaqMDBNVU=",
            "dev": true,
            "requires": {
-                "lodash": "4.17.4"
+                "lodash": "4.17.5"
            }
        },
        "webpack-sources": {
--- a/package.json
+++ b/package.json
@ -24,7 +24,8 @@
  "scripts": {
    "start": "NODE_ENV=development ./node_modules/.bin/webpack-dev-server --open --hot",
    "test": "karma start test/karma.conf.js --single-run",
-    "build": "sh build.sh",
+    "site": "node scripts/run.js site-dist",
+    "copy": "node scripts/run.js copy-html",
    "compile": "node antd-tools/cli/run.js compile",
    "dist": "node antd-tools/cli/run.js dist",
    "lint": "eslint -c ./.eslintrc --fix --ext .jsx ./components",
@ -100,6 +101,7 @@
    "markdown-it": "^8.4.0",
    "marked": "^0.3.7",
    "merge2": "^1.2.1",
+    "mkdirp": "^0.5.1",
    "mocha": "^3.2.0",
    "postcss": "^6.0.20",
    "postcss-loader": "^2.1.2",
--- a/scripts/deploy-to-gh-pages.sh
+++ b/scripts/deploy-to-gh-pages.sh
@ -6,15 +6,15 @@ if [[ $TRAVIS_BRANCH == "master" && $TRAVIS_PULL_REQUEST == "false" ]]; then

 echo "Starting to update gh-pages\n"

-rm -rf dist
-mkdir dist
+rm -rf site-dist
+mkdir site-dist

 git config --global user.email "travis@travis-ci.org"
 git config --global user.name "Travis"

-./node_modules/.bin/webpack --config webpack.site.config.js
+npm run site

-cd dist
+cd site-dist
 git init
 git add -f .
 git commit -m "Travis build"
--- a/scripts/gulpfile.js
+++ b/scripts/gulpfile.js
@ -0,0 +1,80 @@
+'use strict'
+const webpack = require('webpack')
+
+const path = require('path')
+const gulp = require('gulp')
+const readline = require('readline')
+const fs = require('fs')
+
+const rimraf = require('rimraf')
+const mkdirp = require('mkdirp')
+
+const cwd = process.cwd()
+
+function dist (done) {
+  rimraf.sync(path.join(cwd, 'site-dist'))
+  process.env.RUN_ENV = 'PRODUCTION'
+  const webpackConfig = require(path.join(cwd, 'webpack.site.config.js'))
+  webpack(webpackConfig, (err, stats) => {
+    if (err) {
+      console.error(err.stack || err)
+      if (err.details) {
+        console.error(err.details)
+      }
+      return
+    }
+
+    const info = stats.toJson()
+
+    if (stats.hasErrors()) {
+      console.error(info.errors)
+    }
+
+    if (stats.hasWarnings()) {
+      console.warn(info.warnings)
+    }
+
+    const buildInfo = stats.toString({
+      colors: true,
+      children: true,
+      chunks: false,
+      modules: false,
+      chunkModules: false,
+      hash: false,
+      version: false,
+    })
+    console.log(buildInfo)
+    done(0)
+  })
+}
+
+function copyHtml () {
+  const rl = readline.createInterface({
+    input: fs.createReadStream(path.join(cwd, 'site/demo.js')),
+  })
+
+  rl.on('line', (line) => {
+    const name = line.split('antd/')[1].split('/')[0]
+    console.log('create path:', name)
+    const toPath1 = `site-dist/components/${name}`
+    const toPath2 = `site-dist/components/${name}-cn`
+    rimraf.sync(path.join(cwd, toPath1))
+    rimraf.sync(path.join(cwd, toPath2))
+    mkdirp(path.join(cwd, toPath1), function () {
+      fs.writeFileSync(path.join(cwd, `${toPath1}/index.html`), fs.readFileSync(path.join(cwd, 'site-dist/index.html')))
+    })
+    mkdirp(path.join(cwd, toPath2), function () {
+      fs.writeFileSync(path.join(cwd, `${toPath2}/index.html`), fs.readFileSync(path.join(cwd, 'site-dist/index.html')))
+    })
+  })
+}
+
+gulp.task('site-dist', (done) => {
+  dist(() => {
+    copyHtml()
+  })
+})
+gulp.task('copy-html', () => {
+  copyHtml()
+})
+
--- a/scripts/run.js
+++ b/scripts/run.js
@ -0,0 +1,26 @@
+#!/usr/bin/env node
+
+'use strict'
+
+require('colorful').colorful()
+const gulp = require('gulp')
+const program = require('commander')
+
+program.on('--help', () => {
+  console.log('  Usage:'.to.bold.blue.color)
+  console.log()
+})
+
+program.parse(process.argv)
+
+const task = program.args[0]
+
+if (!task) {
+  program.help()
+} else {
+  console.log('scripts run', task)
+
+  require('./gulpfile')
+
+  gulp.start(task)
+}
--- a/examples/components/IconSet/CopyableIcon.vue
+++ b/examples/components/IconSet/CopyableIcon.vue
--- a/examples/components/IconSet/index.vue
+++ b/examples/components/IconSet/index.vue
--- a/site/components/api.vue
+++ b/site/components/api.vue
@ -0,0 +1,18 @@
+<template>
+  <div class='markdown api-container' id="component-api">
+    <slot v-if="isZhCN" name="cn"></slot>
+    <slot v-else></slot>
+  </div>
+</template>
+<script>
+import { isZhCN } from '../util'
+export default {
+  name: 'api',
+  data () {
+    const { name } = this.$route.params
+    return {
+      isZhCN: isZhCN(name),
+    }
+  },
+}
+</script>
--- a/examples/components/demo.vue
+++ b/examples/components/demo.vue
@ -4,10 +4,66 @@ 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} key={id}><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='#component-api'
+                class={{
+                  current: window.location.hash === '#component-api',
+                }}
+              >API</a>
+            </li>
+          </ul>
+        </a-affix>
+      )
+    },
+  },
  render () {
    const { name } = this.$route.params
-    let { lang } = this.$route.params
+    const isCN = isZhCN(name)
+    const lang = isCN ? 'cn' : 'us'
+    // name = name.replace('-cn', '')
    const titleMap = {}
    const menuConfig = {
      General: [],
@ -25,7 +81,7 @@ export default {
      menuConfig[type] = menuConfig[type] || []
      menuConfig[type].push(d)
    }
-    const Demo = AllDemo[titleMap[name]]
+    const Demo = AllDemo[titleMap[name.replace('-cn', '')]]
    const MenuGroup = []
    for (const [type, menus] of Object.entries(menuConfig)) {
      const MenuItems = []
@ -33,21 +89,24 @@ export default {
        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()}`
+        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: `/${lang}/components/${key}` }}>{linkValue}</router-link>
+          <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') {
-      lang = 'us'
      locale = enUS
    }
    return (
      <div class='page-wrapper'>
        <Header num={Object.keys(AllDemo).length}/>
+
        <a-locale-provider locale={locale}>
          <div class='main-wrapper'>
            <a-row>
@ -65,7 +124,10 @@ export default {
              </a-col>
              <a-col xxl={20} xl={19} lg={19} md={18} sm={0} xs={0}>
                <div class='content main-container'>
-                  {Demo ? <Demo key={lang}/> : '正在紧急开发中...'}
+                  <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>
--- a/examples/components/demoBox.vue
+++ b/examples/components/demoBox.vue
@ -1,10 +1,10 @@
 <template>
-  <section :class="['code-box', isOpen ? 'expand': '']">
+  <section :class="['code-box', isOpen ? 'expand': '']" :id="id">
    <section class="code-box-demo">
      <slot name="component"></slot>
    </section>
    <section class="code-box-meta markdown">
-      <slot v-if="lang === 'cn'" name="description"></slot>
+      <slot v-if="isZhCN" name="description"></slot>
      <slot v-else name="us-description"></slot>
      <span class="btn-toggle" :class="{open: isOpen}" @click="toggle"><i class="anticon anticon-down-circle-o"></i></span>
    </section>
@ -30,24 +30,36 @@
 <script>
 import animate from 'antd/_util/openAnimation'
 import BaseMixin from 'antd/_util/BaseMixin'
+import { isZhCN } from '../util'
 export default {
  mixins: [BaseMixin],
  name: 'demoBox',
  props: {
    jsfiddle: Object,
  },
+  inject: {
+    _store: { default: {}},
+  },
  data () {
-    const { lang } = this.$route.params
-    const { html, script, style } = this.jsfiddle
+    const { name = '' } = this.$route.params
+    const { html, script, style, us, cn } = this.jsfiddle
    let sourceCode = `<template>${html}</template>\n`
    sourceCode = script ? sourceCode + '\<script>' + script + '<\/script>' : sourceCode
    sourceCode = style ? sourceCode + '\<style>' + style + '<\/style>' : sourceCode
+    const usTitle = (us.split('#### ')[1] || '').split('\n')[0] || ''
+    const cnTitle = (cn.split('#### ')[1] || '').split('\n')[0] || ''
+    const id = ['components', name.replace('-cn', ''), 'demo', ...usTitle.split(' ')].join('-').toLowerCase()
+    if (this._store.store) {
+      const { currentSubMenu } = this._store.store.getState()
+      this._store.store.setState({ currentSubMenu: [...currentSubMenu, { cnTitle, usTitle, id }] })
+    }
    return {
      isOpen: false,
-      lang,
+      isZhCN: isZhCN(name),
      copied: false,
      copyTooltipVisible: false,
      sourceCode,
+      id,
    }
  },
  methods: {
@ -76,7 +88,7 @@ export default {
 }
 </script>
 <style scoped lang="less">
-.box-demo{
+.box-demo {
  padding: 0;
  border: 1px solid #e9e9e9;
  border-radius: 4px;
@ -84,11 +96,11 @@ export default {
  margin-top: 20px;
  margin-bottom: 20px;
 }
-.box-demo-show{
+.box-demo-show {
  padding: 20px 25px 30px;
  border-bottom: 1px solid #e9e9e9;
 }
-.box-demo-description{
+.box-demo-description {
  position: relative;
  padding: 17px 16px 15px 20px;
  border-radius: 0 0 6px 6px;
@ -96,10 +108,10 @@ export default {
  transition: background-color 0.4s ease;
  width: 100%;
  font-size: 12px;
-  &.bordered{
+  &.bordered {
    border-bottom: 1px dashed #e9e9e9;
  }
-  h3, h4{
+  h3, h4 {
    position: absolute;
    top: -14px;
    padding: 1px 8px;
@ -112,15 +124,15 @@ export default {
    background: #fff;
    -webkit-transition: background-color 0.4s ease;
    transition: background-color 0.4s ease;
-    .header-anchor{
+    .header-anchor {
      display: none;
    }
  }
-  li{
+  li {
    line-height: 21px;
  }
 }
-.box-demo-code{
+.box-demo-code {
  -webkit-transition: height .2s ease-in-out;
  transition: height .2s ease-in-out;
  overflow: auto;
@ -128,7 +140,7 @@ export default {
  pre {
    margin: 0;
  }
-  code{
+  code {
    margin: 0;
    background: #f7f7f7;
    padding: .2em .4em;
@ -137,7 +149,7 @@ export default {
    border: 1px solid #eee;
  }
 }
-.btn-toggle{
+.btn-toggle {
  position: absolute;
  right: 16px;
  bottom: 17px;
@ -147,12 +159,12 @@ export default {
  font-size: 18px;
  line-height: 18px;
  color: #999;
-  i{
+  i {
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
  }
-  &.open{
-    i{
+  &.open {
+    i {
      -webkit-transform: rotate(-180deg);
      -ms-transform: rotate(-180deg);
      transform: rotate(-180deg);
--- a/examples/components/header.vue
+++ b/examples/components/header.vue
@ -1,4 +1,5 @@
 <script>
+import { isZhCN } from '../util'
 export default {
  props: {
    num: Number,
@ -9,21 +10,23 @@ export default {
  },
  methods: {
    handleClick () {
-      const { lang, name } = this.$route.params
+      const { name } = this.$route.params
+      const newName = isZhCN(name) ? name.replace('-cn', '') : `${name}-cn`
      this.$router.push({
-        path: `/${lang === 'cn' ? 'us' : 'cn'}/components/${name}`,
+        path: `/ant-design/components/${newName}/`,
      })
    },
  },
  render () {
-    const { lang } = this.$route.params
+    const { name } = this.$route.params
+    const isCN = isZhCN(name)
    return (
      <header id='header'>
        <a-row>
          <a-col xxl={4} xl={5} lg={5} md={6} sm={24} xs={24}>
-            <router-link to={{ path: `/${lang}` }} id='logo'>
+            <router-link to={{ path: '/ant-design' }} id='logo'>
              <img alt='logo' src='https://raw.githubusercontent.com/vueComponent/ant-design/master/logo.png' />
-              <span>   VUE-ANTD</span>
+              <span>  VUE-ANTD</span>
            </router-link>
          </a-col>
          <a-col xxl={20} xl={19} lg={19} md={18} sm={0} xs={0}>
@ -31,11 +34,11 @@ export default {
              进度：{this.num} / 52
            </div>
            <a-button ghost size='small' onClick={this.handleClick} class='header-lang-button' key='lang-button'>
-              {lang === 'cn' ? 'English' : '中文'}
+              {isCN ? 'English' : '中文'}
            </a-button>
            <a-menu selectedKeys={['components']} mode='horizontal' class='menu-site' id='nav'>
              <a-menu-item key='components'>
-                {lang === 'cn' ? '组件' : 'Components'}
+                {isCN ? '组件' : 'Components'}
              </a-menu-item>
              <a-menu-item key='github'>
                <a href='https://github.com/vueComponent/ant-design'>GitHub</a>
--- a/examples/components/md.vue
+++ b/examples/components/md.vue
@ -3,6 +3,7 @@
 </template>
 <script>
 import marked from 'marked'
+import { isZhCN } from '../util'
 marked.setOptions({
  renderer: new marked.Renderer(),
  gfm: true,
@ -20,13 +21,13 @@ export default {
    us: String,
  },
  data () {
-    const { lang } = this.$route.params
+    const { name } = this.$route.params
    let text = ''
    const { cn, us } = this
    if (this.$slots.default && this.$slots.default[0] && this.$slots.default[0].text) {
      text = this.$slots.default[0].text
    } else {
-      text = lang === 'cn' ? cn : us
+      text = isZhCN(name) ? cn : us
    }
    text = text || ''
    text = text.split('\n').map(t => t.trim()).join('\n')
--- a/examples/demo.js
+++ b/examples/demo.js
--- a/examples/index.html
+++ b/examples/index.html
--- a/examples/index.js
+++ b/examples/index.js
@ -27,7 +27,7 @@ Object.keys(Components).forEach(k => {
 })

 const router = new VueRouter({
-  mode: 'hash',
+  mode: 'history',
  routes,
 })
 new Vue({
--- a/examples/index.less
+++ b/examples/index.less
--- a/site/routes.js
+++ b/site/routes.js
@ -0,0 +1,12 @@
+import Demo from './components/demo.vue'
+const AsyncComp = () => {
+  const d = window.location.hash.replace('#', '')
+  return {
+    component: import(`../components/input-number/demo/${d}`),
+  }
+}
+export default [
+  { path: '/:prefix?/components/:name/', component: Demo },
+  { path: '/:prefix?/test/:demo?/', component: AsyncComp },
+  { path: '/*', redirect: '/ant-design/components/button/' },
+]
--- a/examples/theme/static/colors.less
+++ b/examples/theme/static/colors.less
--- a/examples/theme/static/common.less
+++ b/examples/theme/static/common.less
--- a/examples/theme/static/demo.less
+++ b/examples/theme/static/demo.less
--- a/examples/theme/static/docsearch.less
+++ b/examples/theme/static/docsearch.less
--- a/examples/theme/static/footer.less
+++ b/examples/theme/static/footer.less
--- a/examples/theme/static/header.less
+++ b/examples/theme/static/header.less
--- a/examples/theme/static/highlight.less
+++ b/examples/theme/static/highlight.less
--- a/examples/theme/static/home.less
+++ b/examples/theme/static/home.less
--- a/examples/theme/static/icons.less
+++ b/examples/theme/static/icons.less
--- a/examples/theme/static/index.less
+++ b/examples/theme/static/index.less
--- a/examples/theme/static/markdown.less
+++ b/examples/theme/static/markdown.less
--- a/examples/theme/static/mock-browser.less
+++ b/examples/theme/static/mock-browser.less
--- a/examples/theme/static/motion.less
+++ b/examples/theme/static/motion.less
--- a/examples/theme/static/new-version-info-modal.less
+++ b/examples/theme/static/new-version-info-modal.less
--- a/examples/theme/static/not-found.less
+++ b/examples/theme/static/not-found.less
--- a/examples/theme/static/nprogress.less
+++ b/examples/theme/static/nprogress.less
--- a/examples/theme/static/page-nav.less
+++ b/examples/theme/static/page-nav.less
--- a/examples/theme/static/preview-img.less
+++ b/examples/theme/static/preview-img.less
--- a/examples/theme/static/resource.less
+++ b/examples/theme/static/resource.less
--- a/examples/theme/static/responsive.less
+++ b/examples/theme/static/responsive.less
--- a/examples/theme/static/theme.less
+++ b/examples/theme/static/theme.less
--- a/examples/theme/static/toc.less
+++ b/examples/theme/static/toc.less
--- a/site/util.js
+++ b/site/util.js
@ -0,0 +1,3 @@
+export function isZhCN (name) {
+  return /-cn\/?$/.test(name)
+}
--- a/webpack.base.config.js
+++ b/webpack.base.config.js
@ -83,6 +83,8 @@ md.core.ruler.push('update_template', function replace ({ tokens }) {
      html: template,
      script,
      style,
+      us,
+      cn,
    }
    jsfiddle = md.utils.escapeHtml(JSON.stringify(jsfiddle))
    const codeHtml = code ? md.render(code) : ''
@ -120,7 +122,7 @@ md.core.ruler.push('update_template', function replace ({ tokens }) {
 module.exports = {
  entry: {
    index: [
-      './examples/index.js',
+      './site/index.js',
    ],
  },
  module: {
--- a/webpack.config.js
+++ b/webpack.config.js
@ -7,7 +7,7 @@ const baseWebpackConfig = require('./webpack.base.config')
 module.exports = merge(baseWebpackConfig, {
  output: {
    path: path.resolve(__dirname, './dist'),
-    publicPath: '/',
+    publicPath: '/ant-design/',
    filename: 'build.js',
  },
  module: {
@ -39,7 +39,7 @@ module.exports = merge(baseWebpackConfig, {
    host: '0.0.0.0',
    historyApiFallback: {
      rewrites: [
-        { from: /.*/, to: '/index.html' },
+        { from: /./, to: '/ant-design/index.html' },
      ],
    },
    disableHostCheck: true,
@ -51,7 +51,7 @@ module.exports = merge(baseWebpackConfig, {
  devtool: '#source-map',
  plugins: [
    new HtmlWebpackPlugin({
-      template: 'examples/index.html',
+      template: 'site/index.html',
      filename: 'index.html',
      inject: true,
    }),
--- a/webpack.site.config.js
+++ b/webpack.site.config.js
@ -13,8 +13,8 @@ const modulePlugin = new ExtractTextPlugin({

 module.exports = merge(baseWebpackConfig, {
  output: {
-    path: path.resolve(__dirname, './dist'),
-    publicPath: './',
+    path: path.resolve(__dirname, './site-dist'),
+    publicPath: '/ant-design/',
    filename: '[name].[chunkhash].js',
    chunkFilename: '[chunkhash].async.js',
  },
@ -74,7 +74,7 @@ module.exports = merge(baseWebpackConfig, {
      },
    }),
    new HtmlWebpackPlugin({
-      template: './examples/index.html',
+      template: './site/index.html',
      inject: true,
      minify: { collapseWhitespace: true },
      production: true,