From d736aec1083f92fb766991a60daa972e154c0b6b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B5=B5=E4=B8=BD?= <zhaoli@yidian-inc.com>
Date: Wed, 7 Feb 2018 18:44:11 +0800
Subject: [PATCH] page for badge

---
 .gitignore                           |   3 +
 components/badge/badgeTypes.js       |  10 ++
 components/badge/demo/basic.md       |  23 ++++
 components/badge/demo/change.md      |  56 +++++++++
 components/badge/demo/dot.md         |  20 ++++
 components/badge/demo/index.vue      | 165 ++++++++-------------------
 components/badge/demo/link.md        |  20 ++++
 components/badge/demo/no-wrapper.md  |  20 ++++
 components/badge/demo/overflow.md    |  26 +++++
 components/badge/demo/status.md      |  31 +++++
 components/badge/index.en_US.md      |  21 ++++
 components/badge/index.zh-CN.md      |  21 ++++
 components/breadcrumb/index.zh-CN.md |  50 ++++++++
 components/button/demo/ghost.md      |   1 +
 14 files changed, 347 insertions(+), 120 deletions(-)
 create mode 100644 components/badge/badgeTypes.js
 create mode 100644 components/badge/demo/basic.md
 create mode 100644 components/badge/demo/change.md
 create mode 100644 components/badge/demo/dot.md
 create mode 100644 components/badge/demo/link.md
 create mode 100644 components/badge/demo/no-wrapper.md
 create mode 100644 components/badge/demo/overflow.md
 create mode 100644 components/badge/demo/status.md
 create mode 100644 components/badge/index.en_US.md
 create mode 100644 components/badge/index.zh-CN.md
 create mode 100644 components/breadcrumb/index.zh-CN.md

diff --git a/.gitignore b/.gitignore
index 9416a7fd1..51b07a34e 100644
--- a/.gitignore
+++ b/.gitignore
@@ -59,3 +59,6 @@ typings/
 .idea
 .DS_Store
 dist/
+
+# 备份文件
+/components/test/*
diff --git a/components/badge/badgeTypes.js b/components/badge/badgeTypes.js
new file mode 100644
index 000000000..2621a4ce0
--- /dev/null
+++ b/components/badge/badgeTypes.js
@@ -0,0 +1,10 @@
+import PropTypes from '../_util/vue-types'
+export default () => ({
+  count: PropTypes.number,
+  dot: PropTypes.bool,
+  offset: PropTypes.arrayOf([PropTypes.number, PropTypes.number]),
+  overflowCount: PropTypes.number.def('99'),
+  showZero: PropTypes.bool.def('false'),
+  status: PropTypes.oneOf(['success', 'processing', 'default', 'error', 'warning']),
+  text: PropTypes.string,
+})
diff --git a/components/badge/demo/basic.md b/components/badge/demo/basic.md
new file mode 100644
index 000000000..30b568973
--- /dev/null
+++ b/components/badge/demo/basic.md
@@ -0,0 +1,23 @@
+<cn>
+#### 基本
+简单的徽章展示，当 `count` 为 `0` 时，默认不显示，但是可以使用 `showZero` 修改为显示。
+</cn>
+
+<us>
+#### basic
+Simplest Usage. Badge will be hidden when `count` is `0`, but we can use `showZero` to show it.
+</us>
+
+```html
+<template>
+  <div>
+    <a-badge count=5>
+      <a href="#" class="head-example"></a>
+    </a-badge>
+    <a-badge count=0 showZero>
+      <a href="#" class="head-example"></a>
+    </a-badge>
+  </div>
+</template>
+```
+
diff --git a/components/badge/demo/change.md b/components/badge/demo/change.md
new file mode 100644
index 000000000..b5ade5ddc
--- /dev/null
+++ b/components/badge/demo/change.md
@@ -0,0 +1,56 @@
+<cn>
+#### 动态
+  展示动态变化的效果。
+</cn>
+
+<us>
+#### Dynamic
+  The count will be animated as it changes.
+</us>
+
+```html
+<template>
+  <a-badge :count="count">
+    <a href="#" class="head-example"></a>
+  </a-badge>
+  <a-button-group>
+    <a-button @click="decline">
+      <a-icon type="minus"></a-icon>
+    </a-button>
+    <a-button @click="increase">
+      <a-icon type="plus"></a-icon>
+    </a-button>
+  </a-button-group>
+  <br />
+  <a-badge :dot="isShow">
+    <a href="#" class="head-example()"></a>
+  </a-badge>
+  <a-button @click="changeShow()">toggle</a-button>
+</template>
+<script>
+export default {
+  data(){
+    return {
+      count: 3,
+      isShow: true,
+    }
+  },
+  methods: {
+    decline () {
+      let count = this.count - 1
+      if (count < 0) {
+        count = 0
+      }
+      this.count = count
+    },
+    increase () {
+      const count = this.count+1
+      this.count = count // 为什么不用this.count++?省事还简单？
+    },
+    changeShow () {
+      this.isShow = !this.isShow
+    }
+  }
+}
+</script>     
+```
diff --git a/components/badge/demo/dot.md b/components/badge/demo/dot.md
new file mode 100644
index 000000000..fcf04364f
--- /dev/null
+++ b/components/badge/demo/dot.md
@@ -0,0 +1,20 @@
+<cn>
+#### 讨嫌的小红点
+没有具体的数字。
+</cn>
+
+<us>
+#### Red badge
+This will simply display a red badge, without a specific count.
+</us>
+
+```html
+<template>
+  <a-badge dot>
+    <a-icon type="notification" />
+  </a-badge>
+  <a-badge dot>
+    <a href="#">Link something</a>
+</a-badge>
+</template>
+```
diff --git a/components/badge/demo/index.vue b/components/badge/demo/index.vue
index 6aeb8d7ca..0b39bcacd 100644
--- a/components/badge/demo/index.vue
+++ b/components/badge/demo/index.vue
@@ -1,126 +1,51 @@
-<template>
-  <div>
-    基本：
-    <div>
-      <a-badge count=5>
-        <a href="#" class="head-example" />
-      </a-badge>
-      <a-badge count=0 showZero>
-        <a href="#" class="head-example" />
-      </a-badge>
-    </div>
-    <br>
-    独立使用：
-    <div>
-      <a-badge count=25 />
-      <a-badge count=4 :styles="{backgroundColor: '#fff', color: '#999', boxShadow: '0 0 0 1px #d9d9d9 inset'}" />
-      <a-badge count=109 :styles= "{backgroundColor: '#52c41a'} " />
-    </div>
-    <br>
-    封顶数字：
-    <div style="margin-top: 10px">
-      <a-badge count=99>
-        <a href="#" class="head-example" />
-      </a-badge>
-      <a-badge count=100>
-        <a href="#" class="head-example" />
-      </a-badge>
-      <a-badge count=99 overflowCount=10>
-        <a href="#" class="head-example" />
-      </a-badge>
-      <a-badge count=1000 overflowCount=999>
-        <a href="#" class="head-example" />
-      </a-badge>
-    </div>
-    <br>
-     讨嫌的小红点：
-    <div style="margin-top: 10px">
-      <a-badge dot>
-        <a-icon type="notification" />
-      </a-badge>
-      <a-badge dot>
-        <a href="#">Link something</a>
-      </a-badge>
-    </div>
-    <br>
-    状态点：
-    <div>
-      <a-badge status="success" />
-      <a-badge status="error" />
-      <a-badge status="default" />
-      <a-badge status="processing" />
-      <a-badge :status="currentStatus" />
-      <a-button @click="changeStatus">改processing</a-button>
-      <br />
-      <a-badge status="success" text="Success" />
-      <br />
-      <a-badge status="error" text="Error" />
-      <br />
-      <a-badge status="default" text="Default" />
-      <br />
-      <a-badge status="processing" text="Processing" />
-      <br />
-      <a-badge status="warning" text="Warning" />
-    </div>
-    <br />
-    动态：
-    <div>
-      <a-badge :count="count">
-        <a href="#" class="head-example" />
-      </a-badge>
-      <a-button @click="changeMinsValue()">
-        <a-icon type="minus" />
-      </a-button>
-      <a-button @click="changePlusValue(1)">
-        <a-icon type="plus" />
-      </a-button>
-      <br/>
-      <a-badge :dot="isShow">
-        <a href="#" class="head-example" />
-      </a-badge>
-      <a-button @click="changeShow()">toggle</a-button>
-    </div>
-    <br />
-  </div>
-</template>
 <script>
-let i = 0
-export default {
-  data () {
-    return {
-      currentStatus: 'warning',
-      count: 3,
-      isShow: true,
-    }
-  },
-  methods: {
-    changeStatus () {
-      this.currentStatus = 'processing'
+  import Basic from './basic.md'
+  import NoWapper from './no-wrapper'
+  import Dot from './dot'
+  import Change from './change'
+  import Overflow from './overflow'
+  import Status from './status'
+
+  import CN from './../index.zh-CN.md'
+  import US from './../index.en_US.md'
+
+  const md = {
+    cn: `# Badge徽标数
+         图标右上角的圆形徽标数字。
+         ## 何时使用
+         一般出现在通知图标或头像的右上角，用于显示需要处理的消息条数，通过醒目视觉形式吸引用户处理。
+         ## 代码演示
+        `,
+    us: `# Badge
+         Small numerical value or status descriptor for UI elements.
+         ##When To Use
+         Badge normally appears in proximity to notifications or user avatars with eye-catching appeal, typically displaying unread messages count.
+         ##Examples
+        `
+  }
+
+  export default {
+    render () {
+      return (
+        <div>
+          <md cn={md.cn} us={md.us} />
+          <Basic />
+          <NoWapper />
+          <Overflow />
+          <Dot />
+          <Status />
+          <Change />
+          <api>
+            <CN slot='cn' />
+            <US />
+          </api>
+        </div>
+      )
     },
-    changeMinsValue () {
-      i++
-      console.dir(i)
-      let count = this.count - 1
-      if (count < 0) {
-        count = 0
-      }
-      this.count = count
-    },
-    changePlusValue () {
-      // setInterval(() => {
-      //   const count = this.count + 1
-      //   this.count = count
-      // }, 300)
-      const count = this.count + 1
-      this.count = count
-    },
-    changeShow () {
-      this.isShow = !this.isShow
-    },
-  },
-}
+  }
 </script>
-<style scoped>
+
+<style>
   .head-example {
     width: 42px;
     height: 42px;
diff --git a/components/badge/demo/link.md b/components/badge/demo/link.md
new file mode 100644
index 000000000..f42d8f2d3
--- /dev/null
+++ b/components/badge/demo/link.md
@@ -0,0 +1,20 @@
+<cn>
+#### 可点击
+  用 a 标签进行包裹即可。
+</cn>
+
+<us>
+#### Clickable
+  The badge can be wrapped with `a` tag to make it linkable.
+</us>
+
+```html
+<template>
+  <a-badge dot>
+    <Icon type="notification"></Icon>
+  </a-badge>
+  <a-badge dot>
+    <a href="#" class="head-example">Link something</a>
+  </a-badge>
+</template>
+```
diff --git a/components/badge/demo/no-wrapper.md b/components/badge/demo/no-wrapper.md
new file mode 100644
index 000000000..20c6de821
--- /dev/null
+++ b/components/badge/demo/no-wrapper.md
@@ -0,0 +1,20 @@
+<cn>
+#### 独立使用
+不包裹任何元素即是独立使用，可自定样式展现。
+在右上角的 badge 则限定为红色。
+</cn>
+
+<us>
+#### Standalone
+Used in standalone when children is empty.
+</us>
+
+```html
+<template>
+  <div>
+    <a-badge count=25 />
+    <a-badge count=4 :styles="{backgroundColor: '#fff', color: '#999', boxShadow: '0 0 0 1px #d9d9d9 inset'}" />
+    <a-badge count=109 :styles= "{backgroundColor: '#52c41a'} " />
+  </div>
+</template>
+```
diff --git a/components/badge/demo/overflow.md b/components/badge/demo/overflow.md
new file mode 100644
index 000000000..bb219a884
--- /dev/null
+++ b/components/badge/demo/overflow.md
@@ -0,0 +1,26 @@
+<cn>
+#### 封顶数字
+超过 `overflowCount` 的会显示为 `${overflowCount}+`，默认的 `overflowCount` 为 `99`。
+</cn>
+
+<us>
+#### Overflow Count
+`${overflowCount}+` is displayed when count is larger than `overflowCount`. The default value of `overflowCount` is `99`.
+</us>
+
+```html
+<template>
+  <a-badge count=99>
+    <a href="#" class="head-example"></a>
+  </a-badge>
+  <a-badge count=100>
+    <a href="#" class="head-example"></a>
+  </a-badge>
+  <a-badge count=99 overflowCount=10>
+    <a href="#" class="head-example"></a>
+  </a-badge>
+  <a-badge count=1000 overflowCount=999>
+    <a href="#" class="head-example"></a>
+  </a-badge>
+</template>
+```
diff --git a/components/badge/demo/status.md b/components/badge/demo/status.md
new file mode 100644
index 000000000..9ec4f91cc
--- /dev/null
+++ b/components/badge/demo/status.md
@@ -0,0 +1,31 @@
+<cn>
+#### 状态点
+  用于表示状态的小圆点。
+</cn>
+
+<us>
+#### Status
+  Standalone badge with status.
+</us>
+
+```html
+<template>
+  <div>
+    <a-badge status="success" />
+    <a-badge status="error" />
+    <a-badge status="default" />
+    <a-badge status="processing" />
+    <a-badge status="warning" />
+    <br />
+    <a-badge status="success" text="Success" />
+    <br />
+    <a-badge status="error" text="Error" />
+    <br />
+    <a-badge status="default" text="Default" />
+    <br />
+    <a-badge status="processing" text="Processing" />
+    <br />
+    <a-badge status="warning" text="warning" />
+  </div>
+</template>
+```
diff --git a/components/badge/index.en_US.md b/components/badge/index.en_US.md
new file mode 100644
index 000000000..3d363982a
--- /dev/null
+++ b/components/badge/index.en_US.md
@@ -0,0 +1,21 @@
+## API
+
+```vue
+<a-badge count=5>
+  <a href="#" class="head-example" />
+</a-badge>
+```
+
+```vue
+<a-badge count=5 />
+```
+
+| Property | Description | Type | Default |
+| -------- | ----------- | ---- | ------- |
+| count | Number to show in badge | number\|ReactNode |  |
+| dot | Whether to display a red dot instead of `count` | boolean | `false` |
+| offset | set offset of the badge dot, like [x, y] | [number, number] | - |
+| overflowCount | Max count to show | number | 99 |
+| showZero | Whether to show badge when `count` is zero | boolean | `false` |
+| status | Set Badge as a status dot | `success` \| `processing` \| `default` \| `error` \| `warning` | `''` |
+| text | If `status` is set, `text` sets the display text of the status `dot` | string | `''` |
diff --git a/components/badge/index.zh-CN.md b/components/badge/index.zh-CN.md
new file mode 100644
index 000000000..d4a7f971d
--- /dev/null
+++ b/components/badge/index.zh-CN.md
@@ -0,0 +1,21 @@
+## API
+
+```vue
+<a-badge count=5>
+  <a href="#" class="head-example" />
+</a-badge>
+```
+
+```vue
+<a-badge count=5 />
+```
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| count | 展示的数字，大于 overflowCount 时显示为 `${overflowCount}+`，为 0 时隐藏 | number|ReactNode  |  |
+| dot | 不展示数字，只有一个小红点 | boolean | false |
+| offset | 设置状态点的位置偏移，格式为 [x, y] | [number, number] | - |
+| overflowCount | 展示封顶的数字值 | number | 99 |
+| showZero | 当数值为 0 时，是否展示 Badge | boolean | false |
+| status | 设置 Badge 为状态点 | Enum{ 'success', 'processing, 'default', 'error', 'warning' } | '' |
+| text | 在设置了 `status` 的前提下有效，设置状态点的文本 | string | '' |
diff --git a/components/breadcrumb/index.zh-CN.md b/components/breadcrumb/index.zh-CN.md
new file mode 100644
index 000000000..cc1380b83
--- /dev/null
+++ b/components/breadcrumb/index.zh-CN.md
@@ -0,0 +1,50 @@
+---
+category: Components
+subtitle: 面包屑
+type: Navigation
+title: Breadcrumb
+---
+
+显示当前页面在系统层级结构中的位置，并能向上返回。
+
+## 何时使用
+
+- 当系统拥有超过两级以上的层级结构时；
+- 当需要告知用户『你在哪里』时；
+- 当需要向上导航的功能时。
+
+## API
+
+| 参数 | 说明 | 类型 | 可选值 | 默认值 |
+| --- | --- | --- | --- | --- |
+| itemRender | 自定义链接函数，和 react-router 配置使用 | (route, params, routes, paths) => ReactNode |  | - |
+| params | 路由的参数 | object |  | - |
+| routes | router 的路由栈信息 | object\[] |  | - |
+| separator | 分隔符自定义 | string\|ReactNode |  | '/' |
+
+> 2.0 之后，`linkRender` 和 `nameRender` 被移除，请使用 `itemRender` 来代替。
+
+### 和 browserHistory 配合
+
+和 react-router 一起使用时，默认生成的 url 路径是带有 `#` 的，如果和 browserHistory 一起使用的话，你可以使用 `itemRender` 属性定义面包屑链接。
+
+```vue
+import { Link } from 'react-router';
+
+const routes = [{
+  path: 'index',
+  breadcrumbName: '首页'
+}, {
+  path: 'first',
+  breadcrumbName: '一级面包屑'
+}, {
+  path: 'second',
+  breadcrumbName: '当前页面'
+}];
+function itemRender(route, params, routes, paths) {
+  const last = routes.indexOf(route) === routes.length - 1;
+  return last ? <span>{route.breadcrumbName}</span> : <Link to={paths.join('/')}>{route.breadcrumbName}</Link>;
+}
+
+return <Breadcrumb itemRender={itemRender} routes={routes}/>;
+```
diff --git a/components/button/demo/ghost.md b/components/button/demo/ghost.md
index 25d9a2662..eccced014 100644
--- a/components/button/demo/ghost.md
+++ b/components/button/demo/ghost.md
@@ -7,6 +7,7 @@
 #### Ghost Button
 `ghost` property will make button's background transparent, it is common used in colored background.
 </us>
+
 ```html
 <template>
   <div :style="{ background: 'rgb(190, 200, 200)', padding: '26px 16px 16px' }">