prettier md

.prettierignore

@@ -1,4 +1,3 @@
-**/*.md
 **/*.svg
 package.json
 .umi

.prettierrc

@@ -2,6 +2,7 @@
   "singleQuote": true,
   "trailingComma": "es5",
   "printWidth": 100,
+  "proseWrap": "never",
   "overrides": [
     {
       "files": ".prettierrc",

package.json

@@ -111,7 +111,7 @@
     "lint-staged": "^8.1.1",
     "merge-umi-mock-data": "^1.0.4",
     "mockjs": "^1.0.1-beta3",
-    "prettier": "^1.16.4",
+    "prettier": "^1.17.0",
     "serverless-http": "^1.9.1",
     "slash2": "^2.0.0",
     "stylelint": "^9.10.1",

scripts/getPrettierFiles.js

@@ -7,11 +7,13 @@ const getPrettierFiles = () => {
   const configFiles = glob.sync('config/**/*.js*', { ignore: ['**/node_modules/**', 'build/**'] });
   const scriptFiles = glob.sync('scripts/**/*.js');
   const lessFiles = glob.sync('src/**/*.less*', { ignore: ['**/node_modules/**', 'build/**'] });
+  const mdFiles = glob.sync('src/**/*.md*', { ignore: ['**/node_modules/**', 'build/**'] });
   files = files.concat(jsFiles);
   files = files.concat(tsFiles);
   files = files.concat(configFiles);
   files = files.concat(scriptFiles);
   files = files.concat(lessFiles);
+  files = files.concat(mdFiles);
   if (!files.length) {
     return;
   }

src/components/Authorized/demo/AuthorizedArray.md

@@ -1,6 +1,6 @@
 ---
 order: 1
-title: 
+title:
   zh-CN: 使用数组作为参数
   en-US: Use Array as a parameter
 ---
@@ -18,6 +18,6 @@ ReactDOM.render(
   <Authorized authority={['user', 'admin']} noMatch={noMatch}>
     <Alert message="Use Array as a parameter passed!" type="success" showIcon />
   </Authorized>,
-  mountNode,
+  mountNode
 );
 ```

src/components/Authorized/demo/AuthorizedFunction.md

@@ -1,6 +1,6 @@
 ---
 order: 2
-title: 
+title:
   zh-CN: 使用方法作为参数
   en-US: Use function as a parameter
 ---
@@ -20,12 +20,8 @@ const havePermission = () => {
 
 ReactDOM.render(
   <Authorized authority={havePermission} noMatch={noMatch}>
-    <Alert
-      message="Use Function as a parameter passed!"
-      type="success"
-      showIcon
-    />
+    <Alert message="Use Function as a parameter passed!" type="success" showIcon />
   </Authorized>,
-  mountNode,
+  mountNode
 );
 ```

src/components/Authorized/demo/basic.md

@@ -1,6 +1,6 @@
 ---
 order: 0
-title: 
+title:
   zh-CN: 基本使用
   en-US: Basic use
 ---
@@ -20,6 +20,6 @@ ReactDOM.render(
       <Alert message="user Passed!" type="success" showIcon />
     </Authorized>
   </div>,
-  mountNode,
+  mountNode
 );
 ```

src/components/Authorized/demo/secured.md

@@ -1,6 +1,6 @@
 ---
 order: 3
-title: 
+title:
   zh-CN: 注解基本使用
   en-US: Basic use secured
 ---
@@ -16,15 +16,13 @@ const { Secured } = RenderAuthorized('user');
 @Secured('admin')
 class TestSecuredString extends React.Component {
   render() {
-    return (
-      <Alert message="user Passed!" type="success" showIcon />
-    )
+    return <Alert message="user Passed!" type="success" showIcon />;
   }
 }
 ReactDOM.render(
   <div>
     <TestSecuredString />
   </div>,
-  mountNode,
+  mountNode
 );
 ```

src/components/Authorized/index.md

@@ -15,23 +15,22 @@ order: 15
 
 权限组件默认 export RenderAuthorized 函数，它接收当前权限作为参数，返回一个权限对象，该对象提供以下几种使用方式。
 
-
 ### Authorized
 
 最基础的权限控制。
 
-| 参数      | 说明                                      | 类型         | 默认值 |
-|----------|------------------------------------------|-------------|-------|
-| children    | 正常渲染的元素，权限判断通过时展示           | ReactNode  | - |
-| authority   | 准入权限/权限判断         | `string | array | Promise | (currentAuthority) => boolean | Promise` | - |
-| noMatch     | 权限异常渲染元素，权限判断不通过时展示        | ReactNode  | - |
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| children | 正常渲染的元素，权限判断通过时展示 | ReactNode | - |
+| authority | 准入权限/权限判断 | `string | array | Promise | (currentAuthority) => boolean | Promise` | - |
+| noMatch | 权限异常渲染元素，权限判断不通过时展示 | ReactNode | - |
 
 ### Authorized.AuthorizedRoute
 
-| 参数      | 说明                                      | 类型         | 默认值 |
-|----------|------------------------------------------|-------------|-------|
-| authority     | 准入权限/权限判断         | `string | array | Promise | (currentAuthority) => boolean | Promise` | - |
-| redirectPath  | 权限异常时重定向的页面路由                | string  | - |
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| authority | 准入权限/权限判断 | `string | array | Promise | (currentAuthority) => boolean | Promise` | - |
+| redirectPath | 权限异常时重定向的页面路由 | string | - |
 
 其余参数与 `Route` 相同。
 
@@ -39,18 +38,17 @@ order: 15
 
 注解方式，`@Authorized.Secured(authority, error)`
 
-| 参数      | 说明                                      | 类型         | 默认值 |
-|----------|------------------------------------------|-------------|-------|
-| authority     | 准入权限/权限判断         | `string | Promise | (currentAuthority) => boolean | Promise` | - |
-| error  | 权限异常时渲染元素                |  ReactNode | <Exception type="403" /> |
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| authority | 准入权限/权限判断 | `string | Promise | (currentAuthority) => boolean | Promise` | - |
+| error | 权限异常时渲染元素 | ReactNode | <Exception type="403" /> |
 
 ### Authorized.check
 
-函数形式的 Authorized，用于某些不能被 HOC 包裹的组件。 `Authorized.check(authority, target, Exception)`
-注意：传入一个 Promise 时，无论正确还是错误返回的都是一个 ReactClass。
+函数形式的 Authorized，用于某些不能被 HOC 包裹的组件。 `Authorized.check(authority, target, Exception)` 注意：传入一个 Promise 时，无论正确还是错误返回的都是一个 ReactClass。
 
-| 参数      | 说明                                      | 类型         | 默认值 |
-|----------|------------------------------------------|-------------|-------|
-| authority     | 准入权限/权限判断         | `string | Promise | (currentAuthority) => boolean | Promise` | - |
-| target     | 权限判断通过时渲染的元素         | ReactNode | - |
-| Exception  | 权限异常时渲染元素                |  ReactNode | - |
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| authority | 准入权限/权限判断 | `string | Promise | (currentAuthority) => boolean | Promise` | - |
+| target | 权限判断通过时渲染的元素 | ReactNode | - |
+| Exception | 权限异常时渲染元素 | ReactNode | - |

src/components/AvatarList/demo/maxLength.md

@@ -1,24 +1,46 @@
 ---
 order: 0
-title: 
-  zh-CN: 要显示的最大项目 
+title:
+  zh-CN: 要显示的最大项目
   en-US: Max Items to Show
 ---
 
-`maxLength` attribute specifies the maximum number of items to show while `excessItemsStyle` style the excess
-item component.
+`maxLength` attribute specifies the maximum number of items to show while `excessItemsStyle` style the excess item component.
 
-````jsx
+```jsx
 import AvatarList from 'ant-design-pro/lib/AvatarList';
 
 ReactDOM.render(
-  <AvatarList size="mini" maxLength={3} excessItemsStyle={{ color: '#f56a00', backgroundColor: '#fde3cf' }}>
-    <AvatarList.Item tips="Jake" src="https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png" />
-    <AvatarList.Item tips="Andy" src="https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png" />
-    <AvatarList.Item tips="Niko" src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png" />
-    <AvatarList.Item tips="Niko" src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png" />
-    <AvatarList.Item tips="Niko" src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png" />
-    <AvatarList.Item tips="Niko" src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png" />
-  </AvatarList>
-, mountNode);
-````
+  <AvatarList
+    size="mini"
+    maxLength={3}
+    excessItemsStyle={{ color: '#f56a00', backgroundColor: '#fde3cf' }}
+  >
+    <AvatarList.Item
+      tips="Jake"
+      src="https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png"
+    />
+    <AvatarList.Item
+      tips="Andy"
+      src="https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png"
+    />
+    <AvatarList.Item
+      tips="Niko"
+      src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png"
+    />
+    <AvatarList.Item
+      tips="Niko"
+      src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png"
+    />
+    <AvatarList.Item
+      tips="Niko"
+      src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png"
+    />
+    <AvatarList.Item
+      tips="Niko"
+      src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png"
+    />
+  </AvatarList>,
+  mountNode
+);
+```

src/components/AvatarList/demo/simple.md

@@ -1,20 +1,30 @@
 ---
 order: 0
-title: 
-  zh-CN: 基础样例 
+title:
+  zh-CN: 基础样例
   en-US: Basic Usage
 ---
 
 Simplest of usage.
 
-````jsx
+```jsx
 import AvatarList from 'ant-design-pro/lib/AvatarList';
 
 ReactDOM.render(
   <AvatarList size="mini">
-    <AvatarList.Item tips="Jake" src="https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png" />
-    <AvatarList.Item tips="Andy" src="https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png" />
-    <AvatarList.Item tips="Niko" src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png" />
-  </AvatarList>
-, mountNode);
-````
+    <AvatarList.Item
+      tips="Jake"
+      src="https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png"
+    />
+    <AvatarList.Item
+      tips="Andy"
+      src="https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png"
+    />
+    <AvatarList.Item
+      tips="Niko"
+      src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png"
+    />
+  </AvatarList>,
+  mountNode
+);
+```

src/components/AvatarList/index.en-US.md

@@ -10,11 +10,11 @@ A list of user's avatar for project or group member list frequently. If a large
 
 ### AvatarList
 
-| Property         | Description           | Type                               | Default   |
-| ---------------- | --------------------- | ---------------------------------- | --------- |
+| Property         | Description           | Type                                 | Default   |
+| ---------------- | --------------------- | ------------------------------------ | --------- |
 | size             | size of list          | `large`、`small` 、`mini`, `default` | `default` |
-| maxLength        | max items to show     | number                             | -         |
-| excessItemsStyle | the excess item style | CSSProperties                      | -         |
+| maxLength        | max items to show     | number                               | -         |
+| excessItemsStyle | the excess item style | CSSProperties                        | -         |
 
 ### AvatarList.Item
 

src/components/AvatarList/index.zh-CN.md

@@ -11,15 +11,15 @@ cols: 1
 
 ### AvatarList
 
-| 参数               | 说明       | 类型                                 | 默认值       |
-| ---------------- | -------- | ---------------------------------- | --------- |
-| size             | 头像大小     | `large`、`small` 、`mini`, `default` | `default` |
-| maxLength        | 要显示的最大项目 | number                             | -         |
-| excessItemsStyle | 多余的项目风格  | CSSProperties                      | -         |
+| 参数             | 说明             | 类型                                 | 默认值    |
+| ---------------- | ---------------- | ------------------------------------ | --------- |
+| size             | 头像大小         | `large`、`small` 、`mini`, `default` | `default` |
+| maxLength        | 要显示的最大项目 | number                               | -         |
+| excessItemsStyle | 多余的项目风格   | CSSProperties                        | -         |
 
 ### AvatarList.Item
 
-| 参数   | 说明     | 类型        | 默认值 |
-| ---- | ------ | --------- | --- |
-| tips | 头像展示文案 | ReactNode | -   |
-| src  | 头像图片连接 | string    | -   |
+| 参数 | 说明         | 类型      | 默认值 |
+| ---- | ------------ | --------- | ------ |
+| tips | 头像展示文案 | ReactNode | -      |
+| src  | 头像图片连接 | string    | -      |

src/components/Charts/demo/bar.md

@@ -5,7 +5,7 @@ title: 柱状图
 
 通过设置 `x`，`y` 属性，可以快速的构建出一个漂亮的柱状图，各种纬度的关系则是通过自定义的数据展现。
 
-````jsx
+```jsx
 import { Bar } from 'ant-design-pro/lib/Charts';
 
 const salesData = [];
@@ -16,11 +16,5 @@ for (let i = 0; i < 12; i += 1) {
   });
 }
 
-ReactDOM.render(
-  <Bar
-    height={200}
-    title="销售额趋势"
-    data={salesData}
-  />
-, mountNode);
-````
+ReactDOM.render(<Bar height={200} title="销售额趋势" data={salesData} />, mountNode);
+```

src/components/Charts/demo/chart-card.md

@@ -21,26 +21,19 @@ ReactDOM.render(
             <Icon type="info-circle-o" />
           </Tooltip>
         }
-        total={() => (
-          <span dangerouslySetInnerHTML={{ __html: yuan(126560) }} />
-        )}
-        footer={
-          <Field label="日均销售额" value={numeral(12423).format("0,0")} />
-        }
+        total={() => <span dangerouslySetInnerHTML={{ __html: yuan(126560) }} />}
+        footer={<Field label="日均销售额" value={numeral(12423).format('0,0')} />}
         contentHeight={46}
       >
         <span>
           周同比
-          <Trend flag="up" style={{ marginLeft: 8, color: "rgba(0,0,0,.85)" }}>
+          <Trend flag="up" style={{ marginLeft: 8, color: 'rgba(0,0,0,.85)' }}>
             12%
           </Trend>
         </span>
         <span style={{ marginLeft: 16 }}>
           日环比
-          <Trend
-            flag="down"
-            style={{ marginLeft: 8, color: "rgba(0,0,0,.85)" }}
-          >
+          <Trend flag="down" style={{ marginLeft: 8, color: 'rgba(0,0,0,.85)' }}>
             11%
           </Trend>
         </span>
@@ -61,12 +54,8 @@ ReactDOM.render(
             <Icon type="info-circle-o" />
           </Tooltip>
         }
-        total={() => (
-          <span dangerouslySetInnerHTML={{ __html: yuan(126560) }} />
-        )}
-        footer={
-          <Field label="日均销售额" value={numeral(12423).format("0,0")} />
-        }
+        total={() => <span dangerouslySetInnerHTML={{ __html: yuan(126560) }} />}
+        footer={<Field label="日均销售额" value={numeral(12423).format('0,0')} />}
       />
     </Col>
     <Col span={24} style={{ marginTop: 24 }}>
@@ -84,12 +73,10 @@ ReactDOM.render(
             <Icon type="info-circle-o" />
           </Tooltip>
         }
-        total={() => (
-          <span dangerouslySetInnerHTML={{ __html: yuan(126560) }} />
-        )}
+        total={() => <span dangerouslySetInnerHTML={{ __html: yuan(126560) }} />}
       />
     </Col>
   </Row>,
-  mountNode,
+  mountNode
 );
 ```

src/components/Charts/demo/gauge.md

@@ -1,18 +1,12 @@
 ---
 order: 7
-title: 仪表盘 
+title: 仪表盘
 ---
 
 仪表盘是一种进度展示方式，可以更直观的展示当前的进展情况，通常也可表示占比。
 
-````jsx
+```jsx
 import { Gauge } from 'ant-design-pro/lib/Charts';
 
-ReactDOM.render(
-  <Gauge
-    title="核销率"
-    height={164}
-    percent={87}
-  />
-, mountNode);
-````
+ReactDOM.render(<Gauge title="核销率" height={164} percent={87} />, mountNode);
+```

src/components/Charts/demo/mini-area.md

@@ -4,7 +4,7 @@ col: 2
 title: 迷你区域图
 ---
 
-````jsx
+```jsx
 import { MiniArea } from 'ant-design-pro/lib/Charts';
 import moment from 'moment';
 
@@ -12,17 +12,10 @@ const visitData = [];
 const beginDay = new Date().getTime();
 for (let i = 0; i < 20; i += 1) {
   visitData.push({
-    x: moment(new Date(beginDay + (1000 * 60 * 60 * 24 * i))).format('YYYY-MM-DD'),
+    x: moment(new Date(beginDay + 1000 * 60 * 60 * 24 * i)).format('YYYY-MM-DD'),
     y: Math.floor(Math.random() * 100) + 10,
   });
 }
 
-ReactDOM.render(
-  <MiniArea
-    line
-    color="#cceafe"
-    height={45}
-    data={visitData}
-  />
-, mountNode);
-````
+ReactDOM.render(<MiniArea line color="#cceafe" height={45} data={visitData} />, mountNode);
+```

src/components/Charts/demo/mini-bar.md

@@ -6,7 +6,7 @@ title: 迷你柱状图
 
 迷你柱状图更适合展示简单的区间数据，简洁的表现方式可以很好的减少大数据量的视觉展现压力。
 
-````jsx
+```jsx
 import { MiniBar } from 'ant-design-pro/lib/Charts';
 import moment from 'moment';
 
@@ -14,15 +14,10 @@ const visitData = [];
 const beginDay = new Date().getTime();
 for (let i = 0; i < 20; i += 1) {
   visitData.push({
-    x: moment(new Date(beginDay + (1000 * 60 * 60 * 24 * i))).format('YYYY-MM-DD'),
+    x: moment(new Date(beginDay + 1000 * 60 * 60 * 24 * i)).format('YYYY-MM-DD'),
     y: Math.floor(Math.random() * 100) + 10,
   });
 }
 
-ReactDOM.render(
-  <MiniBar
-    height={45}
-    data={visitData}
-  />
-, mountNode);
-````
+ReactDOM.render(<MiniBar height={45} data={visitData} />, mountNode);
+```

src/components/Charts/demo/mini-pie.md

@@ -3,14 +3,10 @@ order: 6
 title: 迷你饼状图
 ---
 
-通过简化 `Pie` 属性的设置，可以快速的实现极简的饼状图，可配合 `ChartCard` 组合展
-现更多业务场景。
+通过简化 `Pie` 属性的设置，可以快速的实现极简的饼状图，可配合 `ChartCard` 组合展现更多业务场景。
 
 ```jsx
 import { Pie } from 'ant-design-pro/lib/Charts';
 
-ReactDOM.render(
-  <Pie percent={28} subTitle="中式快餐" total="28%" height={140} />,
-  mountNode
-);
+ReactDOM.render(<Pie percent={28} subTitle="中式快餐" total="28%" height={140} />, mountNode);
 ```

src/components/Charts/demo/mini-progress.md

@@ -3,10 +3,8 @@ order: 3
 title: 迷你进度条
 ---
 
-````jsx
+```jsx
 import { MiniProgress } from 'ant-design-pro/lib/Charts';
 
-ReactDOM.render(
-  <MiniProgress percent={78} strokeWidth={8} target={80} />
-, mountNode);
-````
+ReactDOM.render(<MiniProgress percent={78} strokeWidth={8} target={80} />, mountNode);
+```

src/components/Charts/demo/mix.md

@@ -5,7 +5,7 @@ title: 图表套件组合展示
 
 利用 Ant Design Pro 提供的图表套件，可以灵活组合符合设计规范的图表来满足复杂的业务需求。
 
-````jsx
+```jsx
 import { ChartCard, Field, MiniArea, MiniBar, MiniProgress } from 'ant-design-pro/lib/Charts';
 import Trend from 'ant-design-pro/lib/Trend';
 import NumberInfo from 'ant-design-pro/lib/NumberInfo';
@@ -17,7 +17,7 @@ const visitData = [];
 const beginDay = new Date().getTime();
 for (let i = 0; i < 20; i += 1) {
   visitData.push({
-    x: moment(new Date(beginDay + (1000 * 60 * 60 * 24 * i))).format('YYYY-MM-DD'),
+    x: moment(new Date(beginDay + 1000 * 60 * 60 * 24 * i)).format('YYYY-MM-DD'),
     y: Math.floor(Math.random() * 100) + 10,
   });
 }
@@ -25,52 +25,53 @@ for (let i = 0; i < 20; i += 1) {
 ReactDOM.render(
   <Row>
     <Col span={24}>
-      <ChartCard
-        title="搜索用户数量"
-        total={numeral(8846).format('0,0')}
-        contentHeight={134}
-      >
+      <ChartCard title="搜索用户数量" total={numeral(8846).format('0,0')} contentHeight={134}>
         <NumberInfo
           subTitle={<span>本周访问</span>}
           total={numeral(12321).format('0,0')}
           status="up"
           subTotal={17.1}
         />
-        <MiniArea
-          line
-          height={45}
-          data={visitData}
-        />
+        <MiniArea line height={45} data={visitData} />
       </ChartCard>
     </Col>
     <Col span={24} style={{ marginTop: 24 }}>
       <ChartCard
         title="访问量"
-        action={<Tooltip title="指标说明"><Icon type="info-circle-o" /></Tooltip>}
+        action={
+          <Tooltip title="指标说明">
+            <Icon type="info-circle-o" />
+          </Tooltip>
+        }
         total={numeral(8846).format('0,0')}
         footer={<Field label="日访问量" value={numeral(1234).format('0,0')} />}
         contentHeight={46}
       >
-        <MiniBar
-          height={46}
-          data={visitData}
-        />
+        <MiniBar height={46} data={visitData} />
       </ChartCard>
     </Col>
     <Col span={24} style={{ marginTop: 24 }}>
       <ChartCard
         title="线上购物转化率"
-        action={<Tooltip title="指标说明"><Icon type="info-circle-o" /></Tooltip>}
+        action={
+          <Tooltip title="指标说明">
+            <Icon type="info-circle-o" />
+          </Tooltip>
+        }
         total="78%"
         footer={
           <div>
             <span>
               周同比
-              <Trend flag="up" style={{ marginLeft: 8, color: 'rgba(0,0,0,.85)' }}>12%</Trend>
+              <Trend flag="up" style={{ marginLeft: 8, color: 'rgba(0,0,0,.85)' }}>
+                12%
+              </Trend>
             </span>
             <span style={{ marginLeft: 16 }}>
               日环比
-              <Trend flag="down" style={{ marginLeft: 8, color: 'rgba(0,0,0,.85)' }}>11%</Trend>
+              <Trend flag="down" style={{ marginLeft: 8, color: 'rgba(0,0,0,.85)' }}>
+                11%
+              </Trend>
             </span>
           </div>
         }
@@ -79,6 +80,7 @@ ReactDOM.render(
         <MiniProgress percent={78} strokeWidth={8} target={80} />
       </ChartCard>
     </Col>
-  </Row>
-, mountNode);
-````
+  </Row>,
+  mountNode
+);
+```

src/components/Charts/demo/pie.md

@@ -41,7 +41,7 @@ ReactDOM.render(
     total={() => (
       <span
         dangerouslySetInnerHTML={{
-          __html: yuan(salesPieData.reduce((pre, now) => now.y + pre, 0))
+          __html: yuan(salesPieData.reduce((pre, now) => now.y + pre, 0)),
         }}
       />
     )}
@@ -49,6 +49,6 @@ ReactDOM.render(
     valueFormat={val => <span dangerouslySetInnerHTML={{ __html: yuan(val) }} />}
     height={294}
   />,
-  mountNode,
+  mountNode
 );
 ```

src/components/Charts/demo/radar.md

@@ -3,7 +3,7 @@ order: 7
 title: 雷达图
 ---
 
-````jsx
+```jsx
 import { Radar, ChartCard } from 'ant-design-pro/lib/Charts';
 
 const radarOriginData = [
@@ -40,8 +40,8 @@ const radarTitleMap = {
   contribute: '贡献',
   hot: '热度',
 };
-radarOriginData.forEach((item) => {
-  Object.keys(item).forEach((key) => {
+radarOriginData.forEach(item => {
+  Object.keys(item).forEach(key => {
     if (key !== 'name') {
       radarData.push({
         name: item.name,
@@ -54,11 +54,8 @@ radarOriginData.forEach((item) => {
 
 ReactDOM.render(
   <ChartCard title="数据比例">
-    <Radar
-      hasLegend
-      height={286}
-      data={radarData}
-    />
-  </ChartCard>
-, mountNode);
-````
+    <Radar hasLegend height={286} data={radarData} />
+  </ChartCard>,
+  mountNode
+);
+```

src/components/Charts/demo/tag-cloud.md

@@ -5,21 +5,16 @@ title: 标签云
 
 标签云是一套相关的标签以及与此相应的权重展示方式，一般典型的标签云有 30 至 150 个标签，而权重影响使用的字体大小或其他视觉效果。
 
-````jsx
+```jsx
 import { TagCloud } from 'ant-design-pro/lib/Charts';
 
 const tags = [];
 for (let i = 0; i < 50; i += 1) {
   tags.push({
     name: `TagClout-Title-${i}`,
-    value: Math.floor((Math.random() * 50)) + 20,
+    value: Math.floor(Math.random() * 50) + 20,
   });
 }
 
-ReactDOM.render(
-  <TagCloud
-    data={tags}
-    height={200}
-  />
-, mountNode);
-````
+ReactDOM.render(<TagCloud data={tags} height={200} />, mountNode);
+```

src/components/Charts/demo/timeline-chart.md

@@ -5,23 +5,20 @@ title: 带有时间轴的图表
 
 使用 `TimelineChart` 组件可以实现带有时间轴的柱状图展现，而其中的 `x` 属性，则是时间值的指向，默认最多支持同时展现两个指标，分别是 `y1` 和 `y2`。
 
-````jsx
+```jsx
 import { TimelineChart } from 'ant-design-pro/lib/Charts';
 
 const chartData = [];
 for (let i = 0; i < 20; i += 1) {
   chartData.push({
-    x: (new Date().getTime()) + (1000 * 60 * 30 * i),
+    x: new Date().getTime() + 1000 * 60 * 30 * i,
     y1: Math.floor(Math.random() * 100) + 1000,
     y2: Math.floor(Math.random() * 100) + 10,
   });
 }
 
 ReactDOM.render(
-  <TimelineChart
-    height={200}
-    data={chartData}
-    titleMap={{ y1: '客流量', y2: '支付笔数' }}
-  />
-, mountNode);
-````
+  <TimelineChart height={200} data={chartData} titleMap={{ y1: '客流量', y2: '支付笔数' }} />,
+  mountNode
+);
+```

src/components/Charts/demo/waterwave.md

@@ -1,20 +1,17 @@
 ---
 order: 8
-title: 水波图 
+title: 水波图
 ---
 
 水波图是一种比例的展示方式，可以更直观的展示关键值的占比。
 
-````jsx
+```jsx
 import { WaterWave } from 'ant-design-pro/lib/Charts';
 
 ReactDOM.render(
   <div style={{ textAlign: 'center' }}>
-    <WaterWave
-      height={161}
-      title="补贴资金剩余"
-      percent={34}
-    />
-  </div>
-, mountNode);
-````
+    <WaterWave height={161} title="补贴资金剩余" percent={34} />
+  </div>,
+  mountNode
+);
+```

src/components/Charts/index.md

@@ -13,26 +13,27 @@ Ant Design Pro 提供的业务中常用的图表类型，都是基于 [G2](https
 
 ### ChartCard
 
-| 参数      | 说明                                      | 类型         | 默认值 |
-|----------|------------------------------------------|-------------|-------|
-| title | 卡片标题 | ReactNode\|string | - |
-| action | 卡片操作 | ReactNode | - |
-| total | 数据总量 | ReactNode \| number \| function | - |
-| footer | 卡片底部 | ReactNode | - |
-| contentHeight | 内容区域高度 | number | - |
-| avatar | 右侧图标 | React.ReactNode | - |
+| 参数          | 说明         | 类型                            | 默认值 |
+| ------------- | ------------ | ------------------------------- | ------ |
+| title         | 卡片标题     | ReactNode\|string               | -      |
+| action        | 卡片操作     | ReactNode                       | -      |
+| total         | 数据总量     | ReactNode \| number \| function | -      |
+| footer        | 卡片底部     | ReactNode                       | -      |
+| contentHeight | 内容区域高度 | number                          | -      |
+| avatar        | 右侧图标     | React.ReactNode                 | -      |
+
 ### MiniBar
 
-| 参数      | 说明                                      | 类型         | 默认值 |
-|----------|------------------------------------------|-------------|-------|
-| color | 图表颜色 | string | `#1890FF` |
-| height | 图表高度 | number | - |
-| data | 数据 | array<{x, y}> | - |
+| 参数   | 说明     | 类型          | 默认值    |
+| ------ | -------- | ------------- | --------- |
+| color  | 图表颜色 | string        | `#1890FF` |
+| height | 图表高度 | number        | -         |
+| data   | 数据     | array<{x, y}> | -         |
 
 ### MiniArea
 
-| 参数      | 说明                                      | 类型         | 默认值 |
-|----------|------------------------------------------|-------------|-------|
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
 | color | 图表颜色 | string | `rgba(24, 144, 255, 0.2)` |
 | borderColor | 图表边颜色 | string | `#1890FF` |
 | height | 图表高度 | number | - |
@@ -44,17 +45,17 @@ Ant Design Pro 提供的业务中常用的图表类型，都是基于 [G2](https
 
 ### MiniProgress
 
-| 参数      | 说明                                      | 类型         | 默认值 |
-|----------|------------------------------------------|-------------|-------|
-| target | 目标比例 | number | - |
-| color | 进度条颜色 | string | - |
-| strokeWidth | 进度条高度 | number | - |
-| percent | 进度比例 | number | - |
+| 参数        | 说明       | 类型   | 默认值 |
+| ----------- | ---------- | ------ | ------ |
+| target      | 目标比例   | number | -      |
+| color       | 进度条颜色 | string | -      |
+| strokeWidth | 进度条高度 | number | -      |
+| percent     | 进度比例   | number | -      |
 
 ### Bar
 
-| 参数      | 说明                                      | 类型         | 默认值 |
-|----------|------------------------------------------|-------------|-------|
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
 | title | 图表标题 | ReactNode\|string | - |
 | color | 图表颜色 | string | `rgba(24, 144, 255, 0.85)` |
 | padding | 图表内部间距 | [array](https://github.com/alibaba/BizCharts/blob/master/doc/api/chart.md#7padding-object--number--array-) | `'auto'` |
@@ -64,8 +65,8 @@ Ant Design Pro 提供的业务中常用的图表类型，都是基于 [G2](https
 
 ### Pie
 
-| 参数      | 说明                                      | 类型         | 默认值 |
-|----------|------------------------------------------|-------------|-------|
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
 | animate | 是否显示动画 | boolean | true |
 | color | 图表颜色 | string | `rgba(24, 144, 255, 0.85)` |
 | height | 图表高度 | number | - |
@@ -80,8 +81,8 @@ Ant Design Pro 提供的业务中常用的图表类型，都是基于 [G2](https
 
 ### Radar
 
-| 参数      | 说明                                      | 类型         | 默认值 |
-|----------|------------------------------------------|-------------|-------|
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
 | title | 图表标题 | ReactNode\|string | - |
 | height | 图表高度 | number | - |
 | hasLegend | 是否显示 legend | boolean | `false` |
@@ -90,41 +91,41 @@ Ant Design Pro 提供的业务中常用的图表类型，都是基于 [G2](https
 
 ### Gauge
 
-| 参数      | 说明                                      | 类型         | 默认值 |
-|----------|------------------------------------------|-------------|-------|
-| title | 图表标题 | ReactNode\|string | - |
-| height | 图表高度 | number | - |
-| color | 图表颜色 | string | `#2F9CFF` |
-| bgColor | 图表背景颜色 | string | `#F0F2F5` |
-| percent | 进度比例 | number | - |
+| 参数    | 说明         | 类型              | 默认值    |
+| ------- | ------------ | ----------------- | --------- |
+| title   | 图表标题     | ReactNode\|string | -         |
+| height  | 图表高度     | number            | -         |
+| color   | 图表颜色     | string            | `#2F9CFF` |
+| bgColor | 图表背景颜色 | string            | `#F0F2F5` |
+| percent | 进度比例     | number            | -         |
 
 ### WaterWave
 
-| 参数      | 说明                                      | 类型         | 默认值 |
-|----------|------------------------------------------|-------------|-------|
-| title | 图表标题 | ReactNode\|string | - |
-| height | 图表高度 | number | - |
-| color | 图表颜色 | string | `#1890FF` |
-| percent | 进度比例 | number | - |
+| 参数    | 说明     | 类型              | 默认值    |
+| ------- | -------- | ----------------- | --------- |
+| title   | 图表标题 | ReactNode\|string | -         |
+| height  | 图表高度 | number            | -         |
+| color   | 图表颜色 | string            | `#1890FF` |
+| percent | 进度比例 | number            | -         |
 
 ### TagCloud
 
-| 参数      | 说明                                      | 类型         | 默认值 |
-|----------|------------------------------------------|-------------|-------|
-| data | 标题 | Array<name, value\> | - |
-| height | 高度值 | number | - |
+| 参数   | 说明   | 类型                | 默认值 |
+| ------ | ------ | ------------------- | ------ |
+| data   | 标题   | Array<name, value\> | -      |
+| height | 高度值 | number              | -      |
 
 ### TimelineChart
 
-| 参数      | 说明                                      | 类型         | 默认值 |
-|----------|------------------------------------------|-------------|-------|
-| data | 标题 | Array<x, y1, y2\> | - |
-| titleMap | 指标别名 | Object{y1: '客流量', y2: '支付笔数'} | - |
-| height | 高度值 | number | 400 |
+| 参数     | 说明     | 类型                                 | 默认值 |
+| -------- | -------- | ------------------------------------ | ------ |
+| data     | 标题     | Array<x, y1, y2\>                    | -      |
+| titleMap | 指标别名 | Object{y1: '客流量', y2: '支付笔数'} | -      |
+| height   | 高度值   | number                               | 400    |
 
 ### Field
 
-| 参数      | 说明                                      | 类型         | 默认值 |
-|----------|------------------------------------------|-------------|-------|
-| label | 标题 | ReactNode\|string | - |
-| value | 值 | ReactNode\|string | - |
+| 参数  | 说明 | 类型              | 默认值 |
+| ----- | ---- | ----------------- | ------ |
+| label | 标题 | ReactNode\|string | -      |
+| value | 值   | ReactNode\|string | -      |

src/components/CountDown/demo/simple.md

@@ -13,12 +13,10 @@ title:
 
 The simplest usage.
 
-````jsx
+```jsx
 import CountDown from 'ant-design-pro/lib/CountDown';
 
 const targetTime = new Date().getTime() + 3900000;
 
-ReactDOM.render(
-  <CountDown style={{ fontSize: 20 }} target={targetTime} />
-, mountNode);
-````
+ReactDOM.render(<CountDown style={{ fontSize: 20 }} target={targetTime} />, mountNode);
+```

src/components/CountDown/index.en-US.md

@@ -8,8 +8,8 @@ Simple CountDown Component.
 
 ## API
 
-| Property | Description | Type | Default |
-|----------|------------------------------------------|-------------|-------|
-| format | Formatter of time | Function(time) |  |
-| target | Target time | Date | - |
-| onEnd |  Countdown to the end callback | funtion | -|
+| Property | Description                   | Type           | Default |
+| -------- | ----------------------------- | -------------- | ------- |
+| format   | Formatter of time             | Function(time) |         |
+| target   | Target time                   | Date           | -       |
+| onEnd    | Countdown to the end callback | funtion        | -       |

src/components/CountDown/index.zh-CN.md

@@ -1,5 +1,5 @@
 ---
-title: CountDown 
+title: CountDown
 subtitle: 倒计时
 cols: 1
 order: 3
@@ -9,8 +9,8 @@ order: 3
 
 ## API
 
-| 参数      | 说明                                      | 类型         | 默认值 |
-|----------|------------------------------------------|-------------|-------|
-| format | 时间格式化显示 | Function(time) |  |
-| target | 目标时间 | Date | - |
-| onEnd |  倒计时结束回调 | funtion | -|
+| 参数   | 说明           | 类型           | 默认值 |
+| ------ | -------------- | -------------- | ------ |
+| format | 时间格式化显示 | Function(time) |        |
+| target | 目标时间       | Date           | -      |
+| onEnd  | 倒计时结束回调 | funtion        | -      |

src/components/DescriptionList/demo/basic.md

@@ -13,7 +13,7 @@ title:
 
 Basic DescriptionList.
 
-````jsx
+```jsx
 import DescriptionList from 'ant-design-pro/lib/DescriptionList';
 
 const { Description } = DescriptionList;
@@ -21,23 +21,18 @@ const { Description } = DescriptionList;
 ReactDOM.render(
   <DescriptionList size="large" title="title">
     <Description term="Firefox">
-      A free, open source, cross-platform,
-      graphical web browser developed by the
-      Mozilla Corporation and hundreds of
-      volunteers.
+      A free, open source, cross-platform, graphical web browser developed by the Mozilla
+      Corporation and hundreds of volunteers.
     </Description>
     <Description term="Firefox">
-      A free, open source, cross-platform,
-      graphical web browser developed by the
-      Mozilla Corporation and hundreds of
-      volunteers.
+      A free, open source, cross-platform, graphical web browser developed by the Mozilla
+      Corporation and hundreds of volunteers.
     </Description>
     <Description term="Firefox">
-      A free, open source, cross-platform,
-      graphical web browser developed by the
-      Mozilla Corporation and hundreds of
-      volunteers.
+      A free, open source, cross-platform, graphical web browser developed by the Mozilla
+      Corporation and hundreds of volunteers.
     </Description>
-  </DescriptionList>
-, mountNode);
-````
+  </DescriptionList>,
+  mountNode
+);
+```

src/components/DescriptionList/demo/vertical.md

@@ -13,7 +13,7 @@ title:
 
 Vertical layout.
 
-````jsx
+```jsx
 import DescriptionList from 'ant-design-pro/lib/DescriptionList';
 
 const { Description } = DescriptionList;
@@ -21,23 +21,18 @@ const { Description } = DescriptionList;
 ReactDOM.render(
   <DescriptionList size="large" title="title" layout="vertical">
     <Description term="Firefox">
-      A free, open source, cross-platform,
-      graphical web browser developed by the
-      Mozilla Corporation and hundreds of
-      volunteers.
+      A free, open source, cross-platform, graphical web browser developed by the Mozilla
+      Corporation and hundreds of volunteers.
     </Description>
     <Description term="Firefox">
-      A free, open source, cross-platform,
-      graphical web browser developed by the
-      Mozilla Corporation and hundreds of
-      volunteers.
+      A free, open source, cross-platform, graphical web browser developed by the Mozilla
+      Corporation and hundreds of volunteers.
     </Description>
     <Description term="Firefox">
-      A free, open source, cross-platform,
-      graphical web browser developed by the
-      Mozilla Corporation and hundreds of
-      volunteers.
+      A free, open source, cross-platform, graphical web browser developed by the Mozilla
+      Corporation and hundreds of volunteers.
     </Description>
-  </DescriptionList>
-, mountNode);
-````
+  </DescriptionList>,
+  mountNode
+);
+```

src/components/DescriptionList/index.en-US.md

@@ -10,24 +10,24 @@ Groups display multiple read-only fields, which are common to informational disp
 
 ### DescriptionList
 
-| Property      | Description                         | Type        | Default |
-|----------|------------------------------------------|-------------|---------|
-| layout    | type of layout                          | Enum{'horizontal', 'vertical'}  | 'horizontal' |
-| col       | specify the maximum number of columns to display, the final columns number is determined by col setting combined with [Responsive Rules](/components/DescriptionList#Responsive-Rules)             | number(0 < col <= 4)  | 3 |
-| title     | title                                 | ReactNode  | - |
-| gutter    | specify the distance between two items, unit is `px`  | number  | 32 |
-| size     | size of list       | Enum{'large', 'small'}  | - |
+| Property | Description | Type | Default |
+| --- | --- | --- | --- |
+| layout | type of layout | Enum{'horizontal', 'vertical'} | 'horizontal' |
+| col | specify the maximum number of columns to display, the final columns number is determined by col setting combined with [Responsive Rules](/components/DescriptionList#Responsive-Rules) | number(0 < col <= 4) | 3 |
+| title | title | ReactNode | - |
+| gutter | specify the distance between two items, unit is `px` | number | 32 |
+| size | size of list | Enum{'large', 'small'} | - |
 
 #### Responsive Rules
 
-| Window Width        | Columns Number                             | 
-|---------------------|---------------------------------------------|
-| `≥768px`           |  `col`                                       |
-| `≥576px`           |  `col < 2 ? col : 2`                         |
-| `<576px`           |  `1`                                         |
+| Window Width | Columns Number      |
+| ------------ | ------------------- |
+| `≥768px`     | `col`               |
+| `≥576px`     | `col < 2 ? col : 2` |
+| `<576px`     | `1`                 |
 
 ### DescriptionList.Description
 
-| Property | Description                                      | Type         | Default |
-|----------|------------------------------------------|-------------|-------|
-| term     | item title                                 | ReactNode  | - |
+| Property | Description | Type      | Default |
+| -------- | ----------- | --------- | ------- |
+| term     | item title  | ReactNode | -       |

src/components/DescriptionList/index.zh-CN.md

@@ -11,27 +11,24 @@ order: 4
 
 ### DescriptionList
 
-| 参数      | 说明                                      | 类型         | 默认值 |
-|----------|------------------------------------------|-------------|-------|
-| layout    | 布局方式                                 | Enum{'horizontal', 'vertical'}  | 'horizontal' |
-| col       | 指定信息最多分几列展示，最终一行几列由 col 配置结合[响应式规则](/components/DescriptionList#响应式规则)决定          | number(0 < col <= 4)  | 3 |
-| title     | 列表标题                                 | ReactNode  | - |
-| gutter    | 列表项间距，单位为 `px`                    | number  | 32 |
-| size     | 列表型号        | Enum{'large', 'small'}  | - |
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| layout | 布局方式 | Enum{'horizontal', 'vertical'} | 'horizontal' |
+| col | 指定信息最多分几列展示，最终一行几列由 col 配置结合[响应式规则](/components/DescriptionList#响应式规则)决定 | number(0 < col <= 4) | 3 |
+| title | 列表标题 | ReactNode | - |
+| gutter | 列表项间距，单位为 `px` | number | 32 |
+| size | 列表型号 | Enum{'large', 'small'} | - |
 
 #### 响应式规则
 
-| 窗口宽度             | 展示列数                                      | 
-|---------------------|---------------------------------------------|
-| `≥768px`           |  `col`                                       |
-| `≥576px`           |  `col < 2 ? col : 2`                         |
-| `<576px`           |  `1`                                         |
+| 窗口宽度 | 展示列数            |
+| -------- | ------------------- |
+| `≥768px` | `col`               |
+| `≥576px` | `col < 2 ? col : 2` |
+| `<576px` | `1`                 |
 
 ### DescriptionList.Description
 
-| 参数      | 说明                                      | 类型         | 默认值 |
-|----------|------------------------------------------|-------------|-------|
-| term     | 列表项标题                                 | ReactNode  | - |
-
-
-
+| 参数 | 说明       | 类型      | 默认值 |
+| ---- | ---------- | --------- | ------ |
+| term | 列表项标题 | ReactNode | -      |

src/components/Ellipsis/demo/line.md

@@ -1,6 +1,6 @@
 ---
 order: 1
-title: 
+title:
   zh-CN: 按照行数省略
   en-US: Truncate according to the number of rows
 ---
@@ -17,15 +17,23 @@ title:
 
 Also note that, in this mode, the outer container needs to have a specified width (or set its own width).
 
-
-````jsx
+```jsx
 import Ellipsis from 'ant-design-pro/lib/Ellipsis';
 
-const article = <p>There were injuries alleged in three <a href="#cover">cases in 2015</a>, and a fourth incident in September, according to the safety recall report. After meeting with US regulators in October, the firm decided to issue a voluntary recall.</p>;
+const article = (
+  <p>
+    There were injuries alleged in three <a href="#cover">cases in 2015</a>, and a fourth incident
+    in September, according to the safety recall report. After meeting with US regulators in
+    October, the firm decided to issue a voluntary recall.
+  </p>
+);
 
 ReactDOM.render(
   <div style={{ width: 200 }}>
-    <Ellipsis tooltip lines={3}>{article}</Ellipsis>
-  </div>
-, mountNode);
-````
+    <Ellipsis tooltip lines={3}>
+      {article}
+    </Ellipsis>
+  </div>,
+  mountNode
+);
+```

src/components/Ellipsis/demo/number.md

@@ -1,6 +1,6 @@
 ---
 order: 0
-title: 
+title:
   zh-CN: 按照字符数省略
   en-US: Truncate according to the number of character
 ---
@@ -13,16 +13,20 @@ title:
 
 `length` attribute specifies the maximum length where the text will automatically be truncated when exceeded.
 
-````jsx
+```jsx
 import Ellipsis from 'ant-design-pro/lib/Ellipsis';
 
-const article = 'There were injuries alleged in three cases in 2015, and a fourth incident in September, according to the safety recall report. After meeting with US regulators in October, the firm decided to issue a voluntary recall.';
+const article =
+  'There were injuries alleged in three cases in 2015, and a fourth incident in September, according to the safety recall report. After meeting with US regulators in October, the firm decided to issue a voluntary recall.';
 
 ReactDOM.render(
   <div>
     <Ellipsis length={100}>{article}</Ellipsis>
     <h4 style={{ marginTop: 24 }}>Show Tooltip</h4>
-    <Ellipsis length={100} tooltip>{article}</Ellipsis>
-  </div>
-, mountNode);
-````
+    <Ellipsis length={100} tooltip>
+      {article}
+    </Ellipsis>
+  </div>,
+  mountNode
+);
+```

src/components/Ellipsis/index.en-US.md

@@ -1,5 +1,5 @@
 ---
-title: Ellipsis 
+title: Ellipsis
 cols: 1
 order: 10
 ---
@@ -8,9 +8,9 @@ When the text is too long, the Ellipsis automatically shortens it according to i
 
 ## API
 
-Property | Description | Type | Default
-----|------|-----|------
-tooltip | tooltip for showing the full text content when hovering over | boolean | -
-length | 	maximum number of characters in the text before being truncated | number | -
-lines | maximum number of rows in the text before being truncated | number | `1`
-fullWidthRecognition | whether consider full-width character length as 2 when calculate string length | boolean | -
+| Property | Description | Type | Default |
+| --- | --- | --- | --- |
+| tooltip | tooltip for showing the full text content when hovering over | boolean | - |
+| length | maximum number of characters in the text before being truncated | number | - |
+| lines | maximum number of rows in the text before being truncated | number | `1` |
+| fullWidthRecognition | whether consider full-width character length as 2 when calculate string length | boolean | - |

src/components/Ellipsis/index.zh-CN.md

@@ -9,9 +9,9 @@ order: 10
 
 ## API
 
-参数 | 说明 | 类型 | 默认值
-----|------|-----|------
-tooltip | 移动到文本展示完整内容的提示 | boolean | -
-length | 在按照长度截取下的文本最大字符数，超过则截取省略 | number | -
-lines | 在按照行数截取下最大的行数，超过则截取省略 | number | `1`
-fullWidthRecognition | 是否将全角字符的长度视为2来计算字符串长度 | boolean | -
+| 参数                 | 说明                                             | 类型    | 默认值 |
+| -------------------- | ------------------------------------------------ | ------- | ------ |
+| tooltip              | 移动到文本展示完整内容的提示                     | boolean | -      |
+| length               | 在按照长度截取下的文本最大字符数，超过则截取省略 | number  | -      |
+| lines                | 在按照行数截取下最大的行数，超过则截取省略       | number  | `1`    |
+| fullWidthRecognition | 是否将全角字符的长度视为 2 来计算字符串长度      | boolean | -      |

src/components/Exception/demo/403.md

@@ -13,7 +13,7 @@ title:
 
 403 page with custom operations.
 
-````jsx
+```jsx
 import Exception from 'ant-design-pro/lib/Exception';
 import { Button } from 'antd';
 
@@ -23,7 +23,5 @@ const actions = (
     <Button>Detail</Button>
   </div>
 );
-ReactDOM.render(
-  <Exception type="403" actions={actions} />
-, mountNode);
-````
+ReactDOM.render(<Exception type="403" actions={actions} />, mountNode);
+```

src/components/Exception/demo/404.md

@@ -13,10 +13,8 @@ title:
 
 404 page.
 
-````jsx
+```jsx
 import Exception from 'ant-design-pro/lib/Exception';
 
-ReactDOM.render(
-  <Exception type="404" />
-, mountNode);
-````
+ReactDOM.render(<Exception type="404" />, mountNode);
+```

src/components/Exception/demo/500.md

@@ -13,10 +13,8 @@ title:
 
 500 page.
 
-````jsx
+```jsx
 import Exception from 'ant-design-pro/lib/Exception';
 
-ReactDOM.render(
-  <Exception type="500" />
-, mountNode);
-````
+ReactDOM.render(<Exception type="500" />, mountNode);
+```

src/components/Exception/index.en-US.md

@@ -8,13 +8,13 @@ Exceptions page is used to provide feedback on specific abnormal state. Usually,
 
 ## API
 
-Property | Description | Type | Default
----------|-------------|------|--------
+| Property | Description | Type | Default |
+| --- | --- | --- | --- |
 | backText | default return button text | ReactNode | back to home |
-type | type of exception, the corresponding default `title`, `desc`, `img` will be given if set, which can be overridden by explicit setting of `title`, `desc`, `img` | Enum {'403', '404', '500'} | -
-title | title | ReactNode | -
-desc | supplementary description | ReactNode | -
-img | the url of background image | string | -
-actions | suggested operations, a default 'Home' link will show if not set | ReactNode | -
-linkElement | to specify the element of link | string\|ReactElement | 'a'
-redirect | redirect path | string | '/'
+| type | type of exception, the corresponding default `title`, `desc`, `img` will be given if set, which can be overridden by explicit setting of `title`, `desc`, `img` | Enum {'403', '404', '500'} | - |
+| title | title | ReactNode | - |
+| desc | supplementary description | ReactNode | - |
+| img | the url of background image | string | - |
+| actions | suggested operations, a default 'Home' link will show if not set | ReactNode | - |
+| linkElement | to specify the element of link | string\|ReactElement | 'a' |
+| redirect | redirect path | string | '/' |

src/components/Exception/index.zh-CN.md

@@ -9,13 +9,13 @@ order: 5
 
 ## API
 
-| 参数 | 说明| 类型 | 默认值 |
-|-------------|------------------------------------------|-------------|-------|
-| backText| 默认的返回按钮文本 | ReactNode| back to home |
-| type| 页面类型，若配置，则自带对应类型默认的 `title`，`desc`，`img`，此默认设置可以被 `title`，`desc`，`img` 覆盖 | Enum {'403', '404', '500'} | - |
-| title | 标题 | ReactNode| -|
-| desc| 补充描述| ReactNode| -|
-| img | 背景图片地址 | string| -|
-| actions | 建议操作，配置此属性时默认的『返回首页』按钮不生效| ReactNode| -|
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| backText | 默认的返回按钮文本 | ReactNode | back to home |
+| type | 页面类型，若配置，则自带对应类型默认的 `title`，`desc`，`img`，此默认设置可以被 `title`，`desc`，`img` 覆盖 | Enum {'403', '404', '500'} | - |
+| title | 标题 | ReactNode | - |
+| desc | 补充描述 | ReactNode | - |
+| img | 背景图片地址 | string | - |
+| actions | 建议操作，配置此属性时默认的『返回首页』按钮不生效 | ReactNode | - |
 | linkElement | 定义链接的元素 | string\|ReactElement | 'a' |
-| redirect | 返回按钮的跳转地址 | string | '/'
+| redirect | 返回按钮的跳转地址 | string | '/' |

src/components/FooterToolbar/demo/basic.md

@@ -14,7 +14,7 @@ iframe: 400
 
 Fixed to the footer.
 
-````jsx
+```jsx
 import FooterToolbar from 'ant-design-pro/lib/FooterToolbar';
 import { Button } from 'antd';
 
@@ -39,6 +39,7 @@ ReactDOM.render(
       <Button>Cancel</Button>
       <Button type="primary">Submit</Button>
     </FooterToolbar>
-  </div>
-, mountNode);
-````
+  </div>,
+  mountNode
+);
+```

src/components/FooterToolbar/index.en-US.md

@@ -12,7 +12,7 @@ It is fixed at the bottom of the content area and does not move along with the s
 
 ## API
 
-Property | Description | Type | Default
----------|-------------|------|--------
-children | toolbar content, align to the right | ReactNode | -
-extra | extra information, align to the left | ReactNode | -
+| Property | Description                          | Type      | Default |
+| -------- | ------------------------------------ | --------- | ------- |
+| children | toolbar content, align to the right  | ReactNode | -       |
+| extra    | extra information, align to the left | ReactNode | -       |

src/components/FooterToolbar/index.zh-CN.md

@@ -13,7 +13,7 @@ order: 6
 
 ## API
 
-参数 | 说明 | 类型 | 默认值
-----|------|-----|------
-children | 工具栏内容，向右对齐 | ReactNode | -
-extra | 额外信息，向左对齐 | ReactNode | -
+| 参数     | 说明                 | 类型      | 默认值 |
+| -------- | -------------------- | --------- | ------ |
+| children | 工具栏内容，向右对齐 | ReactNode | -      |
+| extra    | 额外信息，向左对齐   | ReactNode | -      |

src/components/GlobalFooter/demo/basic.md

@@ -6,32 +6,41 @@ iframe: 400
 
 基本页脚。
 
-````jsx
+```jsx
 import GlobalFooter from 'ant-design-pro/lib/GlobalFooter';
 import { Icon } from 'antd';
 
-const links = [{
-  key: '帮助',
-  title: '帮助',
-  href: '',
-}, {
-  key: 'github',
-  title: <Icon type="github" />,
-  href: 'https://github.com/ant-design/ant-design-pro',
-  blankTarget: true,
-}, {
-  key: '条款',
-  title: '条款',
-  href: '',
-  blankTarget: true,
-}];
+const links = [
+  {
+    key: '帮助',
+    title: '帮助',
+    href: '',
+  },
+  {
+    key: 'github',
+    title: <Icon type="github" />,
+    href: 'https://github.com/ant-design/ant-design-pro',
+    blankTarget: true,
+  },
+  {
+    key: '条款',
+    title: '条款',
+    href: '',
+    blankTarget: true,
+  },
+];
 
-const copyright = <div>Copyright <Icon type="copyright" /> 2017 蚂蚁金服体验技术部出品</div>;
+const copyright = (
+  <div>
+    Copyright <Icon type="copyright" /> 2017 蚂蚁金服体验技术部出品
+  </div>
+);
 
 ReactDOM.render(
   <div style={{ background: '#f5f5f5', overflow: 'hidden' }}>
     <div style={{ height: 280 }} />
     <GlobalFooter links={links} copyright={copyright} />
-  </div>
-, mountNode);
-````
+  </div>,
+  mountNode
+);
+```

src/components/GlobalFooter/index.md

@@ -9,7 +9,7 @@ order: 7
 
 ## API
 
-参数 | 说明 | 类型 | 默认值
-----|------|-----|------
-links | 链接数据 | array<{ title: ReactNode, href: string, blankTarget?: boolean }> | -
-copyright | 版权信息 | ReactNode | -
+| 参数      | 说明     | 类型                                                             | 默认值 |
+| --------- | -------- | ---------------------------------------------------------------- | ------ |
+| links     | 链接数据 | array<{ title: ReactNode, href: string, blankTarget?: boolean }> | -      |
+| copyright | 版权信息 | ReactNode                                                        | -      |

src/components/HeaderSearch/demo/basic.md

@@ -5,7 +5,7 @@ title: 全局搜索
 
 通常放置在导航工具条右侧。（点击搜索图标预览效果）
 
-````jsx
+```jsx
 import HeaderSearch from 'ant-design-pro/lib/HeaderSearch';
 
 ReactDOM.render(
@@ -22,13 +22,14 @@ ReactDOM.render(
     <HeaderSearch
       placeholder="站内搜索"
       dataSource={['搜索提示一', '搜索提示二', '搜索提示三']}
-      onSearch={(value) => {
+      onSearch={value => {
         console.log('input', value); // eslint-disable-line
       }}
-      onPressEnter={(value) => {
+      onPressEnter={value => {
         console.log('enter', value); // eslint-disable-line
       }}
     />
-  </div>
-, mountNode);
-````
+  </div>,
+  mountNode
+);
+```

src/components/HeaderSearch/index.en-US.md

@@ -9,14 +9,14 @@ Usually placed as an entry to the global search, placed on the right side of the
 
 ## API
 
-参数 | 说明 | 类型 | 默认值
-----|------|-----|------
-placeholder | placeholder text | string | -
-dataSource | current list of prompts | string[] | -
-onSearch | Called when searching items. | function(value) | -
-onChange | Called when select an option or input value change, or value of input is changed | function(value) | -
-onSelect | Called when a option is selected. param is option's value and option instance. | function(value) | -
-onPressEnter | Callback when pressing Enter | function(value) | -
-onVisibleChange | Show or hide the callback of the text box | function(value) |-
-defaultOpen | The input box is displayed for the first time. | boolean | false
-open | The input box is displayed | boolean |false
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| placeholder | placeholder text | string | - |
+| dataSource | current list of prompts | string[] | - |
+| onSearch | Called when searching items. | function(value) | - |
+| onChange | Called when select an option or input value change, or value of input is changed | function(value) | - |
+| onSelect | Called when a option is selected. param is option's value and option instance. | function(value) | - |
+| onPressEnter | Callback when pressing Enter | function(value) | - |
+| onVisibleChange | Show or hide the callback of the text box | function(value) | - |
+| defaultOpen | The input box is displayed for the first time. | boolean | false |
+| open | The input box is displayed | boolean | false |

src/components/HeaderSearch/index.zh-CN.md

@@ -9,14 +9,14 @@ order: 8
 
 ## API
 
-参数 | 说明 | 类型 | 默认值
-----|------|-----|------
-placeholder | 占位文字 | string | -
-dataSource | 当前提示内容列表 | string[] | -
-onSearch | 搜索补全项的时候调用 | function(value) | -
-onChange | 选中 option，或 input 的 value 变化时，调用此函数 | function(value) | -
-onSelect | 被选中时调用，参数为选中项的 value 值 | function(value) | -
-onPressEnter | 按下回车时的回调 | function(value) | -
-onVisibleChange | 显示或隐藏文本框的回调 | function(value) |-
-defaultOpen | 输入框首次显示是否显示  | boolean | false
-open | 控制输入框是否显示 | boolean |false
+| 参数            | 说明                                              | 类型            | 默认值 |
+| --------------- | ------------------------------------------------- | --------------- | ------ |
+| placeholder     | 占位文字                                          | string          | -      |
+| dataSource      | 当前提示内容列表                                  | string[]        | -      |
+| onSearch        | 搜索补全项的时候调用                              | function(value) | -      |
+| onChange        | 选中 option，或 input 的 value 变化时，调用此函数 | function(value) | -      |
+| onSelect        | 被选中时调用，参数为选中项的 value 值             | function(value) | -      |
+| onPressEnter    | 按下回车时的回调                                  | function(value) | -      |
+| onVisibleChange | 显示或隐藏文本框的回调                            | function(value) | -      |
+| defaultOpen     | 输入框首次显示是否显示                            | boolean         | false  |
+| open            | 控制输入框是否显示                                | boolean         | false  |

src/components/Login/demo/basic.md

@@ -7,7 +7,7 @@ title:
 
 Support login with account and mobile number.
 
-````jsx
+```jsx
 import Login from 'ant-design-pro/lib/Login';
 import { Alert, Checkbox } from 'antd';
 
@@ -30,27 +30,23 @@ class LoginDemo extends React.Component {
           notice: '',
         },
         () => {
-          if (
-            !err &&
-            (values.username !== 'admin' || values.password !== '888888')
-          ) {
+          if (!err && (values.username !== 'admin' || values.password !== '888888')) {
             setTimeout(() => {
               this.setState({
-                notice:
-                  'The combination of username and password is incorrect!',
+                notice: 'The combination of username and password is incorrect!',
               });
             }, 500);
           }
-        },
+        }
       );
     }
   };
-  onTabChange = (key) => {
+  onTabChange = key => {
     this.setState({
       type: key,
     });
   };
-  changeAutoLogin = (e) => {
+  changeAutoLogin = e => {
     this.setState({
       autoLogin: e.target.checked,
     });
@@ -78,16 +74,10 @@ class LoginDemo extends React.Component {
           </Tab>
           <Tab key="tab2" tab="Mobile">
             <Mobile name="mobile" />
-            <Captcha
-              onGetCaptcha={() => console.log('Get captcha!')}
-              name="captcha"
-            />
+            <Captcha onGetCaptcha={() => console.log('Get captcha!')} name="captcha" />
           </Tab>
           <div>
-            <Checkbox
-              checked={this.state.autoLogin}
-              onChange={this.changeAutoLogin}
-            >
+            <Checkbox checked={this.state.autoLogin} onChange={this.changeAutoLogin}>
               Keep me logged in
             </Checkbox>
             <a style={{ float: 'right' }} href="">
@@ -111,7 +101,7 @@ class LoginDemo extends React.Component {
 }
 
 ReactDOM.render(<LoginDemo />, mountNode);
-````
+```
 
 <style>
 #scaffold-src-components-Login-demo-basic .login-warp{

src/components/Login/index.en-US.md

@@ -10,25 +10,25 @@ Support multiple common ways of login with built-in controls. You can choose you
 
 ### Login
 
-Property | Description | Type | Default
-----|------|-----|------
-defaultActiveKey | default key to activate the tab panel | String | -
-onTabChange | callback on changing tabs | (key) => void | -
-onSubmit | callback on submit | (err, values) => void | -
+| Property         | Description                           | Type                  | Default |
+| ---------------- | ------------------------------------- | --------------------- | ------- |
+| defaultActiveKey | default key to activate the tab panel | String                | -       |
+| onTabChange      | callback on changing tabs             | (key) => void         | -       |
+| onSubmit         | callback on submit                    | (err, values) => void | -       |
 
 ### Login.Tab
 
-Property | Description | Type | Default
-----|------|-----|------
-key | key of the tab | String | -
-tab | displayed text of the tab | ReactNode | -
+| Property | Description               | Type      | Default |
+| -------- | ------------------------- | --------- | ------- |
+| key      | key of the tab            | String    | -       |
+| tab      | displayed text of the tab | ReactNode | -       |
 
 ### Login.UserName
 
-Property | Description | Type | Default
-----|------|-----|------
-name | name of the control, also the key of the submitted data | String | -
-rules | validation rules, same with [option.rules](getFieldDecorator(id, options)) in Form getFieldDecorator(id, options) | object[] | -
+| Property | Description | Type | Default |
+| --- | --- | --- | --- |
+| name | name of the control, also the key of the submitted data | String | - |
+| rules | validation rules, same with [option.rules](getFieldDecorator(id, options)) in Form getFieldDecorator(id, options) | object[] | - |
 
 Apart from the above properties, Login.Username also support all properties of antd.Input, together with the default values of basic settings, such as _placeholder_, _size_ and _prefix_. All of these default values can be over-written.
 
@@ -36,14 +36,14 @@ Apart from the above properties, Login.Username also support all properties of a
 
 ### Login.Captcha
 
-Property | Description | Type | Default
-----|------|-----|------
-onGetCaptcha | callback on getting a new Captcha | () => (void \| false \| Promise) | -
-countDown | count down | number |-
-buttonText | text on getting a new Captcha  | ReactNode | '获取验证码'
+| Property | Description | Type | Default |
+| --- | --- | --- | --- |
+| onGetCaptcha | callback on getting a new Captcha | () => (void \| false \| Promise) | - |
+| countDown | count down | number | - |
+| buttonText | text on getting a new Captcha | ReactNode | '获取验证码' |
 
 Apart from the above properties, _Login.Captcha_ support the same properties with _Login.UserName_.
 
 ### Login.Submit
 
-Support all properties of _antd.Button_.
+Support all properties of _antd.Button_.

src/components/Login/index.zh-CN.md

@@ -11,36 +11,37 @@ order: 15
 
 ### Login
 
-参数 | 说明 | 类型 | 默认值
-----|------|-----|------
-defaultActiveKey | 默认激活 tab 面板的 key | String | -
-onTabChange | 切换页签时的回调 | (key) => void | -
-onSubmit | 点击提交时的回调 | (err, values) => void | -
+| 参数             | 说明                    | 类型                  | 默认值 |
+| ---------------- | ----------------------- | --------------------- | ------ |
+| defaultActiveKey | 默认激活 tab 面板的 key | String                | -      |
+| onTabChange      | 切换页签时的回调        | (key) => void         | -      |
+| onSubmit         | 点击提交时的回调        | (err, values) => void | -      |
 
 ### Login.Tab
 
-参数 | 说明 | 类型 | 默认值
-----|------|-----|------
-key | 对应选项卡的 key | String | -
-tab | 选项卡头显示文字 | ReactNode | -
+| 参数 | 说明             | 类型      | 默认值 |
+| ---- | ---------------- | --------- | ------ |
+| key  | 对应选项卡的 key | String    | -      |
+| tab  | 选项卡头显示文字 | ReactNode | -      |
 
 ### Login.UserName
 
-参数 | 说明 | 类型 | 默认值
-----|------|-----|------
-name | 控件标记，提交数据中同样以此为 key | String | -
-rules | 校验规则，同 Form getFieldDecorator(id, options) 中 [option.rules 的规则](getFieldDecorator(id, options)) | object[] | -
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| name | 控件标记，提交数据中同样以此为 key | String | - |
+| rules | 校验规则，同 Form getFieldDecorator(id, options) 中 [option.rules 的规则](getFieldDecorator(id, options)) | object[] | - |
 
 除上述属性以外，Login.UserName 还支持 antd.Input 的所有属性，并且自带默认的基础配置，包括 `placeholder` `size` `prefix` 等，这些基础配置均可被覆盖。
+
 ## Login.Password、Login.Mobile 同 Login.UserName
 
 ### Login.Captcha
 
-参数 | 说明 | 类型 | 默认值
-----|------|-----|------
-onGetCaptcha | 点击获取校验码的回调 | () => (void \| false \| Promise) | -
-countDown | 倒计时 | number |-
-buttonText | 点击获取校验码的说明文字 | ReactNode | '获取验证码'
+| 参数         | 说明                     | 类型                             | 默认值       |
+| ------------ | ------------------------ | -------------------------------- | ------------ |
+| onGetCaptcha | 点击获取校验码的回调     | () => (void \| false \| Promise) | -            |
+| countDown    | 倒计时                   | number                           | -            |
+| buttonText   | 点击获取校验码的说明文字 | ReactNode                        | '获取验证码' |
 
 除上述属性以外，Login.Captcha 支持的属性与 Login.UserName 相同。
 

src/components/NoticeIcon/demo/basic.md

@@ -5,8 +5,8 @@ title: 通知图标
 
 通常用在导航工具栏上。
 
-````jsx
+```jsx
 import NoticeIcon from 'ant-design-pro/lib/NoticeIcon';
 
 ReactDOM.render(<NoticeIcon count={5} />, mountNode);
-````
+```

src/components/NoticeIcon/demo/popover.md

@@ -9,90 +9,103 @@ title: 带浮层卡片
 import NoticeIcon from 'ant-design-pro/lib/NoticeIcon';
 import { Tag } from 'antd';
 
-const data = [{
-  id: '000000001',
-  avatar: 'https://gw.alipayobjects.com/zos/rmsportal/ThXAXghbEsBCCSDihZxY.png',
-  title: '你收到了 14 份新周报',
-  datetime: '2017-08-09',
-  type: 'notification',
-}, {
-  id: '000000002',
-  avatar: 'https://gw.alipayobjects.com/zos/rmsportal/OKJXDXrmkNshAMvwtvhu.png',
-  title: '你推荐的 曲妮妮 已通过第三轮面试',
-  datetime: '2017-08-08',
-  type: 'notification',
-}, {
-  id: '000000003',
-  avatar: 'https://gw.alipayobjects.com/zos/rmsportal/kISTdvpyTAhtGxpovNWd.png',
-  title: '这种模板可以区分多种通知类型',
-  datetime: '2017-08-07',
-  read: true,
-  type: 'notification',
-}, {
-  id: '000000004',
-  avatar: 'https://gw.alipayobjects.com/zos/rmsportal/GvqBnKhFgObvnSGkDsje.png',
-  title: '左侧图标用于区分不同的类型',
-  datetime: '2017-08-07',
-  type: 'notification',
-}, {
-  id: '000000005',
-  avatar: 'https://gw.alipayobjects.com/zos/rmsportal/ThXAXghbEsBCCSDihZxY.png',
-  title: '内容不要超过两行字，超出时自动截断',
-  datetime: '2017-08-07',
-  type: 'notification',
-}, {
-  id: '000000006',
-  avatar: 'https://gw.alipayobjects.com/zos/rmsportal/fcHMVNCjPOsbUGdEduuv.jpeg',
-  title: '曲丽丽 评论了你',
-  description: '描述信息描述信息描述信息',
-  datetime: '2017-08-07',
-  type: 'message',
-  clickClose: true,
-}, {
-  id: '000000007',
-  avatar: 'https://gw.alipayobjects.com/zos/rmsportal/fcHMVNCjPOsbUGdEduuv.jpeg',
-  title: '朱偏右 回复了你',
-  description: '这种模板用于提醒谁与你发生了互动，左侧放『谁』的头像',
-  datetime: '2017-08-07',
-  type: 'message',
-  clickClose: true,
-}, {
-  id: '000000008',
-  avatar: 'https://gw.alipayobjects.com/zos/rmsportal/fcHMVNCjPOsbUGdEduuv.jpeg',
-  title: '标题',
-  description: '这种模板用于提醒谁与你发生了互动，左侧放『谁』的头像',
-  datetime: '2017-08-07',
-  type: 'message',
-  clickClose: true,
-}, {
-  id: '000000009',
-  title: '任务名称',
-  description: '任务需要在 2017-01-12 20:00 前启动',
-  extra: '未开始',
-  status: 'todo',
-  type: 'event',
-}, {
-  id: '000000010',
-  title: '第三方紧急代码变更',
-  description: '冠霖提交于 2017-01-06，需在 2017-01-07 前完成代码变更任务',
-  extra: '马上到期',
-  status: 'urgent',
-  type: 'event',
-}, {
-  id: '000000011',
-  title: '信息安全考试',
-  description: '指派竹尔于 2017-01-09 前完成更新并发布',
-  extra: '已耗时 8 天',
-  status: 'doing',
-  type: 'event',
-}, {
-  id: '000000012',
-  title: 'ABCD 版本发布',
-  description: '冠霖提交于 2017-01-06，需在 2017-01-07 前完成代码变更任务',
-  extra: '进行中',
-  status: 'processing',
-  type: 'event',
-}];
+const data = [
+  {
+    id: '000000001',
+    avatar: 'https://gw.alipayobjects.com/zos/rmsportal/ThXAXghbEsBCCSDihZxY.png',
+    title: '你收到了 14 份新周报',
+    datetime: '2017-08-09',
+    type: 'notification',
+  },
+  {
+    id: '000000002',
+    avatar: 'https://gw.alipayobjects.com/zos/rmsportal/OKJXDXrmkNshAMvwtvhu.png',
+    title: '你推荐的 曲妮妮 已通过第三轮面试',
+    datetime: '2017-08-08',
+    type: 'notification',
+  },
+  {
+    id: '000000003',
+    avatar: 'https://gw.alipayobjects.com/zos/rmsportal/kISTdvpyTAhtGxpovNWd.png',
+    title: '这种模板可以区分多种通知类型',
+    datetime: '2017-08-07',
+    read: true,
+    type: 'notification',
+  },
+  {
+    id: '000000004',
+    avatar: 'https://gw.alipayobjects.com/zos/rmsportal/GvqBnKhFgObvnSGkDsje.png',
+    title: '左侧图标用于区分不同的类型',
+    datetime: '2017-08-07',
+    type: 'notification',
+  },
+  {
+    id: '000000005',
+    avatar: 'https://gw.alipayobjects.com/zos/rmsportal/ThXAXghbEsBCCSDihZxY.png',
+    title: '内容不要超过两行字，超出时自动截断',
+    datetime: '2017-08-07',
+    type: 'notification',
+  },
+  {
+    id: '000000006',
+    avatar: 'https://gw.alipayobjects.com/zos/rmsportal/fcHMVNCjPOsbUGdEduuv.jpeg',
+    title: '曲丽丽 评论了你',
+    description: '描述信息描述信息描述信息',
+    datetime: '2017-08-07',
+    type: 'message',
+    clickClose: true,
+  },
+  {
+    id: '000000007',
+    avatar: 'https://gw.alipayobjects.com/zos/rmsportal/fcHMVNCjPOsbUGdEduuv.jpeg',
+    title: '朱偏右 回复了你',
+    description: '这种模板用于提醒谁与你发生了互动，左侧放『谁』的头像',
+    datetime: '2017-08-07',
+    type: 'message',
+    clickClose: true,
+  },
+  {
+    id: '000000008',
+    avatar: 'https://gw.alipayobjects.com/zos/rmsportal/fcHMVNCjPOsbUGdEduuv.jpeg',
+    title: '标题',
+    description: '这种模板用于提醒谁与你发生了互动，左侧放『谁』的头像',
+    datetime: '2017-08-07',
+    type: 'message',
+    clickClose: true,
+  },
+  {
+    id: '000000009',
+    title: '任务名称',
+    description: '任务需要在 2017-01-12 20:00 前启动',
+    extra: '未开始',
+    status: 'todo',
+    type: 'event',
+  },
+  {
+    id: '000000010',
+    title: '第三方紧急代码变更',
+    description: '冠霖提交于 2017-01-06，需在 2017-01-07 前完成代码变更任务',
+    extra: '马上到期',
+    status: 'urgent',
+    type: 'event',
+  },
+  {
+    id: '000000011',
+    title: '信息安全考试',
+    description: '指派竹尔于 2017-01-09 前完成更新并发布',
+    extra: '已耗时 8 天',
+    status: 'doing',
+    type: 'event',
+  },
+  {
+    id: '000000012',
+    title: 'ABCD 版本发布',
+    description: '冠霖提交于 2017-01-06，需在 2017-01-07 前完成代码变更任务',
+    extra: '进行中',
+    status: 'processing',
+    type: 'event',
+  },
+];
 
 function onItemClick(item, tabProps) {
   console.log(item, tabProps);

src/components/NoticeIcon/index.en-US.md

@@ -1,6 +1,6 @@
 ---
 title: NoticeIcon
-subtitle: 
+subtitle:
 cols: 1
 order: 9
 ---
@@ -9,39 +9,39 @@ Used in navigation toolbar as a unified notification center for the entire produ
 
 ## API
 
-Property | Description | Type | Default
-----|------|-----|------
-count | Total number of messages | number | -
-bell | Change the bell Icon | ReactNode | `<Icon type='bell' />`
-loading | Popup card loading status | boolean | `false`
-onClear | Click to clear button the callback | function(tabName) | -
-onItemClick | Click on the list item's callback | function(item, tabProps) | -
-onPopupVisibleChange | Popup Card Showing or Hiding Callbacks | function(visible) | -
-onTabChange | Switching callbacks for tabs | function(tabTitle) | -
-onViewMore | Callback of click for view more | function(tabProps, event) | -
-popupVisible | Popup card display state | boolean | -
-locale | Default message text | Object | `{ emptyText: 'No notifications', clear: 'Clear', viewMore: 'Loading more' }`
-clearClose | Close menu after clear | boolean | `false`
+| Property | Description | Type | Default |
+| --- | --- | --- | --- |
+| count | Total number of messages | number | - |
+| bell | Change the bell Icon | ReactNode | `<Icon type='bell' />` |
+| loading | Popup card loading status | boolean | `false` |
+| onClear | Click to clear button the callback | function(tabName) | - |
+| onItemClick | Click on the list item's callback | function(item, tabProps) | - |
+| onPopupVisibleChange | Popup Card Showing or Hiding Callbacks | function(visible) | - |
+| onTabChange | Switching callbacks for tabs | function(tabTitle) | - |
+| onViewMore | Callback of click for view more | function(tabProps, event) | - |
+| popupVisible | Popup card display state | boolean | - |
+| locale | Default message text | Object | `{ emptyText: 'No notifications', clear: 'Clear', viewMore: 'Loading more' }` |
+| clearClose | Close menu after clear | boolean | `false` |
 
 ### NoticeIcon.Tab
 
-Property | Description | Type | Default
-----|------|-----|------
-count | Unread messages count of this tab | number | list.length
-emptyText | Message text when list is empty | ReactNode | -
-emptyImage | Image when list is empty | string | -
-list | List data, format refer to the following table | Array | `[]`
-showClear | Clear button display status | boolean | `true`
-showViewMore | View more button display status | boolean | `false`
-title | header for message Tab, the actual text is `locale[title] || title` | string | -
+| Property | Description | Type | Default |
+| --- | --- | --- | --- |
+| count | Unread messages count of this tab | number | list.length |
+| emptyText | Message text when list is empty | ReactNode | - |
+| emptyImage | Image when list is empty | string | - |
+| list | List data, format refer to the following table | Array | `[]` |
+| showClear | Clear button display status | boolean | `true` |
+| showViewMore | View more button display status | boolean | `false` |
+| title | header for message Tab, the actual text is `locale[title] || title` | string | - |
 
 ### Tab data
 
-Property | Description | Type | Default
-----|------|-----|------
-avatar | avatar img url | string \| ReactNode | -
-title | title | ReactNode | -
-description | description info | ReactNode | -
-datetime | Timestamps | ReactNode | -
-extra | Additional information in the upper right corner of the list item | ReactNode | -
-clickClose | Close menu after clicking list item | boolean | `false`
+| Property | Description | Type | Default |
+| --- | --- | --- | --- |
+| avatar | avatar img url | string \| ReactNode | - |
+| title | title | ReactNode | - |
+| description | description info | ReactNode | - |
+| datetime | Timestamps | ReactNode | - |
+| extra | Additional information in the upper right corner of the list item | ReactNode | - |
+| clickClose | Close menu after clicking list item | boolean | `false` |

src/components/NoticeIcon/index.zh-CN.md

@@ -9,39 +9,39 @@ order: 9
 
 ## API
 
-参数 | 说明 | 类型 | 默认值
-----|------|-----|------
-count | 图标上的消息总数 | number | -
-bell | translate this please -> Change the bell Icon | ReactNode | `<Icon type='bell' />`
-loading | 弹出卡片加载状态 | boolean | `false`
-onClear | 点击清空按钮的回调 | function(tabName) | -
-onItemClick | 点击列表项的回调 | function(item, tabProps) | -
-onPopupVisibleChange | 弹出卡片显隐的回调 | function(visible) | -
-onTabChange | 切换页签的回调 | function(tabTitle) | -
-onViewMore | 点击查看更多的回调 | function(tabProps, event) | -
-popupVisible | 控制弹层显隐 | boolean | -
-locale | 默认文案 | Object | `{ emptyText: 'No notifications', clear: 'Clear', viewMore: 'Loading more' }`
-clearClose | 点击清空按钮后关闭通知菜单 | boolean | `false`
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| count | 图标上的消息总数 | number | - |
+| bell | translate this please -> Change the bell Icon | ReactNode | `<Icon type='bell' />` |
+| loading | 弹出卡片加载状态 | boolean | `false` |
+| onClear | 点击清空按钮的回调 | function(tabName) | - |
+| onItemClick | 点击列表项的回调 | function(item, tabProps) | - |
+| onPopupVisibleChange | 弹出卡片显隐的回调 | function(visible) | - |
+| onTabChange | 切换页签的回调 | function(tabTitle) | - |
+| onViewMore | 点击查看更多的回调 | function(tabProps, event) | - |
+| popupVisible | 控制弹层显隐 | boolean | - |
+| locale | 默认文案 | Object | `{ emptyText: 'No notifications', clear: 'Clear', viewMore: 'Loading more' }` |
+| clearClose | 点击清空按钮后关闭通知菜单 | boolean | `false` |
 
 ### NoticeIcon.Tab
 
-参数 | 说明 | 类型 | 默认值
-----|------|-----|------
-count | 当前 Tab 未读消息数量 | number | list.length
-emptyText | 针对每个 Tab 定制空数据文案 | ReactNode | -
-emptyImage | 针对每个 Tab 定制空数据图片 | string | -
-list | 列表数据，格式参照下表 | Array | `[]`
-showClear | 是否显示清空按钮 | boolean | `true`
-showViewMore | 是否显示查看更多按钮 | boolean | `false`
-title | 消息分类的页签标题，实际的文案是 `locale[title] || title` | string | -
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| count | 当前 Tab 未读消息数量 | number | list.length |
+| emptyText | 针对每个 Tab 定制空数据文案 | ReactNode | - |
+| emptyImage | 针对每个 Tab 定制空数据图片 | string | - |
+| list | 列表数据，格式参照下表 | Array | `[]` |
+| showClear | 是否显示清空按钮 | boolean | `true` |
+| showViewMore | 是否显示查看更多按钮 | boolean | `false` |
+| title | 消息分类的页签标题，实际的文案是 `locale[title] || title` | string | - |
 
 ### Tab data
 
-参数 | 说明 | 类型 | 默认值
-----|------|-----|------
-avatar | 头像图片链接 | string \| ReactNode | -
-title | 标题 | ReactNode | -
-description | 描述信息 | ReactNode | -
-datetime | 时间戳 | ReactNode | -
-extra | 额外信息，在列表项右上角 | ReactNode | -
-clickClose | 点击列表项关闭通知菜单 | boolean | `false`
+| 参数        | 说明                     | 类型                | 默认值  |
+| ----------- | ------------------------ | ------------------- | ------- |
+| avatar      | 头像图片链接             | string \| ReactNode | -       |
+| title       | 标题                     | ReactNode           | -       |
+| description | 描述信息                 | ReactNode           | -       |
+| datetime    | 时间戳                   | ReactNode           | -       |
+| extra       | 额外信息，在列表项右上角 | ReactNode           | -       |
+| clickClose  | 点击列表项关闭通知菜单   | boolean             | `false` |

src/components/NumberInfo/demo/basic.md

@@ -1,6 +1,6 @@
 ---
 order: 0
-title: 
+title:
   zh-CN: 演示
   en-US: Demo
 ---
@@ -13,7 +13,7 @@ title:
 
 Used for presenting various numerical data.
 
-````jsx
+```jsx
 import NumberInfo from 'ant-design-pro/lib/NumberInfo';
 import numeral from 'numeral';
 
@@ -25,6 +25,7 @@ ReactDOM.render(
       status="up"
       subTotal={17.1}
     />
-  </div>
-, mountNode);
-````
+  </div>,
+  mountNode
+);
+```

src/components/NumberInfo/index.en-US.md

@@ -8,12 +8,12 @@ Often used in data cards for highlighting the business data.
 
 ## API
 
-Property | Description | Type | Default
-----|------|-----|------
-title | title | ReactNode\|string | -
-subTitle | subtitle | ReactNode\|string | -
-total | total amount | ReactNode\|string | -
-subTotal | total amount of additional information | ReactNode\|string | -
-status | increase state | 'up \| down' | -
-theme | state style | string | 'light'
-gap | set the spacing (pixels) between numbers and descriptions | number | 8
+| Property | Description | Type | Default |
+| --- | --- | --- | --- |
+| title | title | ReactNode\|string | - |
+| subTitle | subtitle | ReactNode\|string | - |
+| total | total amount | ReactNode\|string | - |
+| subTotal | total amount of additional information | ReactNode\|string | - |
+| status | increase state | 'up \| down' | - |
+| theme | state style | string | 'light' |
+| gap | set the spacing (pixels) between numbers and descriptions | number | 8 |

src/components/NumberInfo/index.zh-CN.md

@@ -9,12 +9,12 @@ order: 10
 
 ## API
 
-参数 | 说明 | 类型 | 默认值
-----|------|-----|------
-title | 标题 | ReactNode\|string | -
-subTitle | 子标题 | ReactNode\|string | -
-total | 总量 | ReactNode\|string | -
-subTotal | 子总量 | ReactNode\|string | -
-status | 增加状态 | 'up \| down' | -
-theme | 状态样式 | string | 'light'
-gap | 设置数字和描述之间的间距（像素）| number | 8
+| 参数     | 说明                             | 类型              | 默认值  |
+| -------- | -------------------------------- | ----------------- | ------- |
+| title    | 标题                             | ReactNode\|string | -       |
+| subTitle | 子标题                           | ReactNode\|string | -       |
+| total    | 总量                             | ReactNode\|string | -       |
+| subTotal | 子总量                           | ReactNode\|string | -       |
+| status   | 增加状态                         | 'up \| down'      | -       |
+| theme    | 状态样式                         | string            | 'light' |
+| gap      | 设置数字和描述之间的间距（像素） | number            | 8       |

src/components/Result/demo/classic.md

@@ -5,7 +5,7 @@ title: Classic
 
 典型结果页面。
 
-````jsx
+```jsx
 import Result from 'ant-design-pro/lib/Result';
 import { Button, Row, Col, Icon, Steps } from 'antd';
 
@@ -27,7 +27,9 @@ const desc2 = (
       周毛毛
       <Icon type="dingding" style={{ color: '#00A0E9', marginLeft: 8 }} />
     </div>
-    <div style={{ marginTop: 8, marginBottom: 4 }}><a href="">催一下</a></div>
+    <div style={{ marginTop: 8, marginBottom: 4 }}>
+      <a href="">催一下</a>
+    </div>
   </div>
 );
 
@@ -75,6 +77,7 @@ ReactDOM.render(
     extra={extra}
     actions={actions}
     style={{ width: '100%' }}
-  />
-, mountNode);
-````
+  />,
+  mountNode
+);
+```

src/components/Result/demo/error.md

@@ -5,7 +5,7 @@ title: Failed
 
 提交失败。
 
-````jsx
+```jsx
 import Result from 'ant-design-pro/lib/Result';
 import { Button, Icon } from 'antd';
 
@@ -15,12 +15,18 @@ const extra = (
       您提交的内容有如下错误：
     </div>
     <div style={{ marginBottom: 16 }}>
-      <Icon style={{ color: '#f5222d', marginRight: 8 }} type="close-circle" />您的账户已被冻结
-      <a style={{ marginLeft: 16 }}>立即解冻 <Icon type="right" /></a>
+      <Icon style={{ color: '#f5222d', marginRight: 8 }} type="close-circle" />
+      您的账户已被冻结
+      <a style={{ marginLeft: 16 }}>
+        立即解冻 <Icon type="right" />
+      </a>
     </div>
     <div>
-      <Icon style={{ color: '#f5222d', marginRight: 8 }} type="close-circle" />您的账户还不具备申请资格
-      <a style={{ marginLeft: 16 }}>立即升级 <Icon type="right" /></a>
+      <Icon style={{ color: '#f5222d', marginRight: 8 }} type="close-circle" />
+      您的账户还不具备申请资格
+      <a style={{ marginLeft: 16 }}>
+        立即升级 <Icon type="right" />
+      </a>
     </div>
   </div>
 );
@@ -34,6 +40,7 @@ ReactDOM.render(
     description="请核对并修改以下信息后，再重新提交。"
     extra={extra}
     actions={actions}
-  />
-, mountNode);
-````
+  />,
+  mountNode
+);
+```

src/components/Result/demo/structure.md

@@ -5,7 +5,7 @@ title: Structure
 
 结构包含 `处理结果`，`补充信息` 以及 `操作建议` 三个部分，其中 `处理结果` 由 `提示图标`，`标题` 和 `结果描述` 组成。
 
-````jsx
+```jsx
 import Result from 'ant-design-pro/lib/Result';
 
 ReactDOM.render(
@@ -15,6 +15,7 @@ ReactDOM.render(
     description={<div style={{ background: 'rgba(16, 142, 233, 1)', color: '#fff' }}>结果描述</div>}
     extra="其他补充信息，自带灰底效果"
     actions={<div style={{ background: '#3ba0e9', color: '#fff' }}>操作建议，一般放置按钮组</div>}
-  />
-, mountNode);
-````
+  />,
+  mountNode
+);
+```

src/components/Result/index.md

@@ -9,10 +9,10 @@ order: 12
 
 ## API
 
-| 参数      | 说明                                      | 类型         | 默认值 |
-|----------|------------------------------------------|-------------|-------|
-| type | 类型，不同类型自带对应的图标 | Enum {'success', 'error'} | - |
-| title       | 标题     | ReactNode  | -    |
-| description | 结果描述    | ReactNode  | -    |
-| extra       | 补充信息，有默认的灰色背景     | ReactNode  | -    |
-| actions     | 操作建议，推荐放置跳转链接，按钮组等    | ReactNode  | -    |
+| 参数        | 说明                                 | 类型                      | 默认值 |
+| ----------- | ------------------------------------ | ------------------------- | ------ |
+| type        | 类型，不同类型自带对应的图标         | Enum {'success', 'error'} | -      |
+| title       | 标题                                 | ReactNode                 | -      |
+| description | 结果描述                             | ReactNode                 | -      |
+| extra       | 补充信息，有默认的灰色背景           | ReactNode                 | -      |
+| actions     | 操作建议，推荐放置跳转链接，按钮组等 | ReactNode                 | -      |

src/components/TagSelect/demo/expandable.md

@@ -5,7 +5,7 @@ title: 可展开和收起
 
 使用 `expandable` 属性，让标签组可以收起，避免过高。
 
-````jsx
+```jsx
 import TagSelect from 'ant-design-pro/lib/TagSelect';
 
 function handleFormSubmit(checkedValue) {
@@ -26,6 +26,7 @@ ReactDOM.render(
     <TagSelect.Option value="cat10">类目十</TagSelect.Option>
     <TagSelect.Option value="cat11">类目十一</TagSelect.Option>
     <TagSelect.Option value="cat12">类目十二</TagSelect.Option>
-  </TagSelect>
-, mountNode);
-````
+  </TagSelect>,
+  mountNode
+);
+```

src/components/TagSelect/demo/simple.md

@@ -5,7 +5,7 @@ title: 基础样例
 
 结合 `Tag` 的 `TagSelect` 组件，方便的应用于筛选类目的业务场景中。
 
-````jsx
+```jsx
 import TagSelect from 'ant-design-pro/lib/TagSelect';
 
 function handleFormSubmit(checkedValue) {
@@ -20,6 +20,7 @@ ReactDOM.render(
     <TagSelect.Option value="cat4">类目四</TagSelect.Option>
     <TagSelect.Option value="cat5">类目五</TagSelect.Option>
     <TagSelect.Option value="cat6">类目六</TagSelect.Option>
-  </TagSelect>
-, mountNode);
-````
+  </TagSelect>,
+  mountNode
+);
+```

src/components/TagSelect/index.md

@@ -11,17 +11,17 @@ order: 13
 
 ### TagSelect
 
-| 参数      | 说明                                      | 类型         | 默认值 |
-|----------|------------------------------------------|-------------|-------|
-| value    |选中的项              |string[] \| number[] | |
-| defaultValue    |默认选中的项   |string[] \| number[] | |
-| onChange | 标签选择的回调函数 | Function(checkedTags) |  |
-| expandable | 是否展示 `展开/收起` 按钮 | Boolean | false |
-| hideCheckAll | 隐藏 `全部` 按钮 | Boolean | false |
+| 参数         | 说明                      | 类型                  | 默认值 |
+| ------------ | ------------------------- | --------------------- | ------ |
+| value        | 选中的项                  | string[] \| number[]  |        |
+| defaultValue | 默认选中的项              | string[] \| number[]  |        |
+| onChange     | 标签选择的回调函数        | Function(checkedTags) |        |
+| expandable   | 是否展示 `展开/收起` 按钮 | Boolean               | false  |
+| hideCheckAll | 隐藏 `全部` 按钮          | Boolean               | false  |
 
 ### TagSelectOption
 
-| 参数      | 说明                                      | 类型         | 默认值 |
-|----------|------------------------------------------|-------------|-------|
-| value | TagSelect的值  | string\| number | - |
-| children | tag的内容 | string \| ReactNode | - |
+| 参数     | 说明           | 类型                | 默认值 |
+| -------- | -------------- | ------------------- | ------ |
+| value    | TagSelect 的值 | string\| number     | -      |
+| children | tag 的内容     | string \| ReactNode | -      |

src/components/Trend/demo/basic.md

@@ -10,8 +10,11 @@ import Trend from 'ant-design-pro/lib/Trend';
 
 ReactDOM.render(
   <div>
-    <Trend flag="up" >12%</Trend>
-    <Trend flag="down" style={{ marginLeft: 8 }}>11%</Trend>
-  </div>
-, mountNode);
+    <Trend flag="up">12%</Trend>
+    <Trend flag="down" style={{ marginLeft: 8 }}>
+      11%
+    </Trend>
+  </div>,
+  mountNode
+);
 ```

src/components/Trend/demo/reverse.md

@@ -10,8 +10,13 @@ import Trend from 'ant-design-pro/lib/Trend';
 
 ReactDOM.render(
   <div>
-    <Trend flag="up" reverseColor={true} >12%</Trend>
-    <Trend flag="down" reverseColor={true} style={{ marginLeft: 8 }}>11%</Trend>
-  </div>
-, mountNode);
+    <Trend flag="up" reverseColor={true}>
+      12%
+    </Trend>
+    <Trend flag="down" reverseColor={true} style={{ marginLeft: 8 }}>
+      11%
+    </Trend>
+  </div>,
+  mountNode
+);
 ```

src/components/Trend/index.md

@@ -13,8 +13,8 @@ order: 14
 <Trend flag="up">50%</Trend>
 ```
 
-| 参数      | 说明                                      | 类型         | 默认值 |
-|----------|------------------------------------------|-------------|-------|
-| colorful | 是否彩色标记 | Boolean | true |
-| flag | 上升下降标识：`up|down` | string | - |
-| reverseColor | 颜色反转 | Boolean | false |
+| 参数         | 说明                    | 类型    | 默认值 |
+| ------------ | ----------------------- | ------- | ------ |
+| colorful     | 是否彩色标记            | Boolean | true   |
+| flag         | 上升下降标识：`up|down` | string  | -      |
+| reverseColor | 颜色反转                | Boolean | false  |