docs: optimize site #117

README-zh_CN.md

@@ -22,18 +22,6 @@ Ant Design 3.X 的 Vue 实现，开发和服务于企业级后台产品。
 
 [README in English](README.md)
 
-## 赞助
-
-ant-design-vue是一个开源的独立项目，为了项目能够更好的持续的发展，我们期望获得你的支持，你可以通过如下任何一种方式支持我们：
-
-- [Patreon](https://www.patreon.com/tangjinzhou)
-- [opencollective](https://opencollective.com/ant-design-vue)
-- [paypal](https://www.paypal.me/tangjinzhou)
-
-<p align="center">
-  <img src="https://user-images.githubusercontent.com/6937879/43032487-932a5536-8cea-11e8-9175-9c006e938a82.png">
-</p>
-
 ## 特性
 
 - 提炼自企业级中后台产品的交互语言和视觉风格。
@@ -61,3 +49,12 @@ $ yarn add ant-design-vue
 - [Vue官方文档](https://cn.vuejs.org/)
 - [Antd React](http://ant.design/)
 
+## 赞助
+
+ant-design-vue是MIT协议的开源项目。为了项目能够更好的持续的发展，我们期望获得更多的[支持者](https://github.com/vueComponent/ant-design-vue/blob/master/BACKERS.md)，你可以通过如下任何一种方式支持我们：
+
+- [Patreon](https://www.patreon.com/tangjinzhou)
+- [opencollective](https://opencollective.com/ant-design-vue)
+- [paypal](https://www.paypal.me/tangjinzhou)
+- [支付宝或微信](https://user-images.githubusercontent.com/6937879/43032487-932a5536-8cea-11e8-9175-9c006e938a82.png)
+

README.md

@@ -27,18 +27,6 @@ An enterprise-class UI components based on Ant Design 3.X and Vue.
 - A set of high-quality Vue components out of the box.
 - Shared [Ant Design of React](https://ant.design/docs/spec/introduce) design resources.
 
-## Donation
-
-ant-design-vue is an open source independent project. In order to achieve better and sustainable development of the project, we hope to get your support. You can support us in any of the following ways:
-
-- [Patreon](https://www.patreon.com/tangjinzhou)
-- [opencollective](https://opencollective.com/ant-design-vue)
-- [paypal](https://www.paypal.me/tangjinzhou)
-
-<p align="center">
-  <img src="https://user-images.githubusercontent.com/6937879/43032487-932a5536-8cea-11e8-9175-9c006e938a82.png">
-</p>
-
 ## Using npm or yarn
 
 **We recommend using npm or yarn to install**，it not only makes development easier，but also allow you to take advantage of the rich ecosystem of Javascript packages and tooling.
@@ -60,3 +48,13 @@ If you are in a bad network environment，you can try other registries and tools
 - [Vue](https://vuejs.org/)
 - [Ant Design React](http://ant.design/)
 
+## Donation
+
+ant-design-vue is an MIT-licensed open source project. In order to achieve better and sustainable development of the project, we expect to gain more [backers](https://github.com/vueComponent/ant-design-vue/blob/master/BACKERS.md). You can support us in any of the following ways:
+
+- [Patreon](https://www.patreon.com/tangjinzhou)
+- [opencollective](https://opencollective.com/ant-design-vue)
+- [paypal](https://www.paypal.me/tangjinzhou)
+- [支付宝或微信](https://user-images.githubusercontent.com/6937879/43032487-932a5536-8cea-11e8-9175-9c006e938a82.png)
+
+

components/icon/demo/index.vue

@@ -47,7 +47,7 @@ export default {
   render () {
     return (
       <div>
-        <md cn={md.cn} us={md.us}/>
+        <md class='api-container' cn={md.cn} us={md.us}/>
         <md cn='### 方向性图标' us='### Directional Icons'/>
         <IconSet class='icons' catigory='direction' />
         <md cn='### 提示建议性图标' us='### Suggested Icons'/>

site/components/footer.vue

@@ -0,0 +1,98 @@
+<script>
+export default {
+  props: {
+    isCN: Boolean,
+  },
+  render () {
+    const isCN = this.isCN
+    return (
+      <footer id='footer'>
+        <div class='footer-wrap'>
+          <a-row>
+            <a-col md={6} sm={24} xs={24}>
+              <div class='footer-center'>
+                <h2>Ant Design</h2>
+                <div>
+                  <a href='https://github.com/vueComponent/ant-design-vue' target='_blank '>
+                    <span>GitHub</span></a><span> - </span>
+                  <span><i class='anticon anticon-github'></i></span>
+                </div>
+                <div>
+                  <a href='https://ant.design/docs/react/introduce-cn' target='_blank'>Ant Design</a>
+                  <span> - </span><span>React</span>
+                </div>
+                <div>
+                  <a href='https://github.com/NG-ZORRO/ng-zorro-antd' target='_blank'>Ant Design</a>
+                  <span> - </span><span>Angular</span>
+                </div>
+                <div>
+                  <a href='https://github.com/websemantics/awesome-ant-design' target='_blank '>
+                    <span>Awesome Ant Design</span>
+                  </a>
+                </div>
+              </div>
+            </a-col>
+            <a-col md={6} sm={24} xs={24}>
+              <div class='footer-center'>
+                <h2>{isCN ? '资源链接' : 'Resources'}</h2>
+                <div>
+                  <a href='https://cn.vuejs.org/' target='_blank'>Vue</a>
+                </div>
+                <div>
+                  <a href='https://cli.vuejs.org/' target='_blank'>Vue CLI</a>
+                </div>
+                <div>
+                  <a href='http://library.ant.design/' rel='noopener noreferrer' target='_blank'>AntD Library</a>
+                </div>
+                <div>
+                  <a href='http://tangjinzhou.gitee.io/ant-design-vue/' target='_blank' >
+                    <span>{isCN ? '国内镜像' : 'China Mirror'} 🇨🇳</span>
+                  </a>
+                </div>
+              </div>
+            </a-col>
+            <a-col md={6} sm={24} xs={24}>
+              <div class='footer-center'>
+                <h2>{isCN ? '社区' : 'Community'}</h2>
+                {
+                  isCN ? <div>
+                    <a href='https://zhuanlan.zhihu.com/ant-design-vue' target='_blank'>
+                      <span>知乎专栏</span>
+                    </a>
+                  </div>
+                    : ''
+                }
+                <div>
+                  <a href='https://github.com/vueComponent/ant-design-vue/releases' target='_blank'>
+                    <span>{isCN ? '更新记录' : 'Change Log'}</span>
+                  </a>
+                </div>
+                <div>
+                  <a rel='noopener noreferrer' target='_blank' href='https://vuecomponent.github.io/issue-helper/?lang=zh'>
+                    <span>{isCN ? '报告 Bug' : 'Bug Report'}</span>
+                  </a>
+                </div>
+              </div>
+            </a-col>
+            <a-col md={6} sm={24} xs={24}>
+              <div class='footer-center'>
+                <h2>
+                  <img alt='' class='title-icon' src='https://gw.alipayobjects.com/zos/rmsportal/nBVXkrFdWHxbZlmMbsaH.svg'/>
+                  <span>{isCN ? '更多产品' : 'More Products'}</span>
+                </h2>
+                <div>
+                  <a href='https://antv.alipay.com/' rel='noopener noreferrer' target='_blank'>AntV</a>
+                  <span> - </span>
+                  <span>{isCN ? '数据可视化' : 'Data Visualization'}</span></div><div><a href='https://eggjs.org/' rel='noopener noreferrer' target='_blank'>Egg</a>
+                  <span> - </span>
+                  <span>{isCN ? '企业级 Node 开发框架' : 'Enterprise Node Framework'}</span>
+                </div>
+              </div>
+            </a-col>
+          </a-row>
+        </div>
+      </footer>
+    )
+  },
+}
+</script>

site/components/header.vue

@@ -35,7 +35,7 @@ export default {
           <a-col class='header-left' xxl={4} xl={5} lg={5} md={6} sm={24} xs={24}>
             <router-link to={{ path: '/ant-design-vue' }} id='logo'>
               <img alt='logo' height='32' src='https://raw.githubusercontent.com/vueComponent/ant-design-vue/master/logo.png' />
-              <span>  Ant Design Vue</span>
+              <span style='color: black;font-size: 16px;font-weight: 400;'>Ant Design Vue</span>
             </router-link>
             <a-button ghost size='small' onClick={this.handleClick} class='header-lang-button' key='lang-button'>
               {isCN ? 'English' : '中文'}

site/components/layout.vue

@@ -1,14 +1,13 @@
 <script>
 import AllDemo from '../demo'
 import Header from './header'
+import Footer from './footer'
 import zhCN from 'antd/locale-provider/zh_CN'
 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'
-import debounce from 'lodash/debounce'
-import addDOMEventListener from 'add-dom-event-listener'
 
 const docsList = [
   { key: 'introduce', enTitle: 'Ant Design of Vue', title: 'Ant Design of Vue' },
@@ -18,27 +17,6 @@ const docsList = [
   { key: 'changelog', enTitle: 'Change Log', title: '更新日志' },
   { key: 'i18n', enTitle: 'Internationalization', title: '国际化' },
 ]
-function getOffsetTop (element, container = window) {
-  if (!element) {
-    return 0
-  }
-
-  if (!element.getClientRects().length) {
-    return 0
-  }
-
-  const rect = element.getBoundingClientRect()
-
-  if (rect.width || rect.height) {
-    if (container === window) {
-      container = element.ownerDocument.documentElement
-      return rect.top - container.clientTop
-    }
-    return rect.top - container.getBoundingClientRect().top
-  }
-
-  return rect.top
-}
 
 export default {
   props: {
@@ -83,12 +61,6 @@ export default {
           nprogressHiddenStyle.parentNode.removeChild(nprogressHiddenStyle)
         }, 0)
       }
-
-      this.updateHeight()
-      this.debouncedResize = debounce(() => {
-        this.updateHeight()
-      }, 200)
-      this.resizeEvent = addDOMEventListener(window, 'resize', this.debouncedResize)
     })
   },
   watch: {
@@ -98,12 +70,6 @@ export default {
     },
   },
   methods: {
-    updateHeight () {
-      const el = this.$refs.sidebar.$el
-      const offsetTop = getOffsetTop(el)
-      const docHeight = document.documentElement.offsetHeight
-      this.sidebarHeight = docHeight - offsetTop
-    },
     addSubMenu () {
       if (this.$route.path.indexOf('/docs/vue/') !== -1) {
         this.$nextTick(() => {
@@ -141,10 +107,14 @@ export default {
         </a-anchor>
       )
     },
-    getDocsMenu (isCN) {
+    getDocsMenu (isCN, pagesKey) {
       const docsMenu = []
-      docsList.forEach(({ key, enTitle, title }) => {
+      docsList.forEach(({ key, enTitle, title }, index) => {
         const k = isCN ? `${key}-cn` : key
+        pagesKey.push({ name: k,
+          url: `/ant-design-vue/docs/vue/${k}/`,
+          title: isCN ? title : enTitle,
+        })
         docsMenu.push(<a-menu-item key={k}>
           <router-link to={`/ant-design-vue/docs/vue/${k}/`}>{isCN ? title : enTitle }</router-link>
         </a-menu-item>)
@@ -176,7 +146,6 @@ export default {
   render () {
     const name = this.name
     const isCN = isZhCN(name)
-    // name = name.replace(/-cn\/?$/, '')
     const titleMap = {}
     const menuConfig = {
       General: [],
@@ -187,6 +156,9 @@ export default {
       Feedback: [],
       Other: [],
     }
+    const pagesKey = []
+    let prevPage = null
+    let nextPage = null
     const searchData = []
     for (const [title, d] of Object.entries(AllDemo)) {
       const type = d.type || 'Other'
@@ -196,14 +168,8 @@ export default {
       menuConfig[type] = menuConfig[type] || []
       menuConfig[type].push(d)
     }
+    const docsMenu = this.getDocsMenu(isCN, pagesKey)
     const reName = name.replace(/-cn\/?$/, '')
-    // const Demo = new Vue({
-    //   template: '<demo-component/>',
-    //   components: {
-    //     'demo-component': () => import(`../../components/${AllDemo[titleMap[reName]].key}/demo/index.vue`),
-    //   },
-    // })
-    // AllDemo[titleMap[reName]]
     const MenuGroup = []
     for (const [type, menus] of Object.entries(menuConfig)) {
       const MenuItems = []
@@ -215,6 +181,11 @@ export default {
         if (isCN) {
           key = `${key}-cn`
         }
+        pagesKey.push({
+          name: key,
+          url: `/ant-design-vue/components/${key}/`,
+          title: isCN ? `${title} ${subtitle}` : title,
+        })
         searchData.push({
           title,
           subtitle,
@@ -226,29 +197,34 @@ export default {
       })
       MenuGroup.push(<a-menu-item-group title={type}>{MenuItems}</a-menu-item-group>)
     }
+    pagesKey.forEach((item, index) => {
+      if (item.name === name) {
+        prevPage = pagesKey[index - 1]
+        nextPage = pagesKey[index + 1]
+      }
+    })
     let locale = zhCN
     if (!isCN) {
       locale = enUS
     }
     const config = AllDemo[titleMap[reName]]
     this.resetDocumentTitle(config, reName, isCN)
-    const { showSideBars, sidebarHeight } = this
+    const { showSideBars } = this
     return (
       <div class='page-wrapper'>
         <Header searchData={searchData} name={name}/>
         <a-locale-provider locale={locale}>
           <div class='main-wrapper'>
             <a-row>
-              <a-col v-show={showSideBars} style={{ height: `${sidebarHeight}px` }} ref='sidebar' class='site-sidebar' xxl={4} xl={5} lg={5} md={6} sm={8} xs={12}>
+              <a-col v-show={showSideBars} ref='sidebar' class='site-sidebar' xxl={4} xl={5} lg={5} md={6} sm={8} xs={12}>
                 <div class='drawer-mask' onClick={() => { this.showSideBars = false }}></div>
                 <a-menu
-
                   class='aside-container menu-site'
                   selectedKeys={[name]}
                   defaultOpenKeys={['Components']}
                   inlineIndent={40}
                   mode='inline'>
-                  {this.getDocsMenu(isCN)}
+                  {docsMenu}
                   <a-sub-menu title={`Components(${searchData.length})`} key='Components'>
                     {MenuGroup}
                   </a-sub-menu>
@@ -287,12 +263,15 @@ export default {
                     ></router-view>
                   </div> : ''}
                 </div>
+                <section class='prev-next-nav'>
+                  {prevPage ? <router-link class='prev-page' to={`${prevPage.url}`}>{prevPage.title}</router-link> : ''}
+                  {nextPage ? <router-link class='next-page' to={`${nextPage.url}`}>{nextPage.title}</router-link> : ''}
+                </section>
               </a-col>
             </a-row>
-
           </div>
         </a-locale-provider>
-
+        <Footer ref='footer' isCN={isCN}/>
         { name.indexOf('back-top') === -1 ? <a-back-top /> : null }
       </div>
     )

site/index.less

@@ -31,7 +31,6 @@
 }
 .api-container pre code {
   padding: 12px 20px;
-  margin: 16px 0;
   overflow: auto;
 }
 
@@ -95,12 +94,12 @@
     font-size: 12px;
   }
 }
-.site-sidebar{
+@media only screen and (max-width: 767.99px) {
+  .site-sidebar{
     position: fixed;
     z-index: 1;
     overflow-y: scroll;
-}
+  }
-@media only screen and (max-width: 767.99px) {
   .main-wrapper {
     z-index: 11;
     margin-top: 0px;
@@ -109,6 +108,7 @@
     width: 100%;
     top: 0;
     left: 0;
+    bottom: 0;
     .aside-container{
       width: 80%;
       z-index: 1;
@@ -179,9 +179,6 @@
   .header-left .header-lang-button{
     display: none;
   }
-  .site-sidebar{
-    top: 104px;
-  }
   .drawer-mask{
     display: none !important;
   }

site/theme/static/responsive.less

@@ -11,16 +11,6 @@
   cursor: pointer;
 }
 
-@media only screen and (min-width: 1440px) and (max-width: 1599px) {
-  .main-wrapper > .ant-row > .ant-col-xl-5 {
-    width: 274px;
-  }
-
-  #header .ant-row .ant-col-xl-5 {
-    width: 274px;
-  }
-}
-
 @media only screen and (max-width: 1280px) {
   .en-us #search-box {
     display: none;