fix P0 issue in http://gitlab.alipay-inc.com/ued/ant-design/issues/271

src/components/DescriptionList/index.md

@@ -5,7 +5,7 @@ cols: 1
 order: 4
 ---
 
-描述列表用来展示一系列文本信息。
+成组展示多个只读字段，常见于详情页的信息展示。
 
 ## API
 

src/components/HeaderSearch/demo/basic.md

@@ -3,7 +3,7 @@ order: 0
 title: 全局搜索
 ---
 
-通常放在全局导航条右侧。
+通常放置在导航工具条右侧。（点击搜索图标预览效果）
 
 ````jsx
 import HeaderSearch from 'ant-design-pro/lib/HeaderSearch';

src/components/HeaderSearch/index.md

@@ -5,7 +5,7 @@ cols: 1
 order: 8
 ---
 
-用在顶部导航上，提供应用全局搜索入口。
+通常作为全局搜索的入口，放置在导航工具条右侧。
 
 ## API
 

src/components/NoticeIcon/demo/basic.md

@@ -3,7 +3,7 @@ order: 1
 title: 通知图标
 ---
 
-通常用在全局导航上。
+通常用在导航工具栏上。
 
 ````jsx
 import NoticeIcon from 'ant-design-pro/lib/NoticeIcon';

src/components/NoticeIcon/demo/popover.md

@@ -3,32 +3,94 @@ order: 2
 title: 带浮层卡片
 ---
 
-点击展开通知卡片，展现多种类型的通知，通常放在顶部通栏。
+点击展开通知卡片，展现多种类型的通知，通常放在导航工具栏。
 
 ````jsx
 import NoticeIcon from 'ant-design-pro/lib/NoticeIcon';
 import moment from 'moment';
+import groupBy from 'lodash/groupBy';
 import { Tag } from 'antd';
 
 const data = [{
-  key: '1',
+  id: '000000001',
+  avatar: 'https://gw.alipayobjects.com/zos/rmsportal/ThXAXghbEsBCCSDihZxY.png',
+  title: '你收到了 14 份新周报',
+  datetime: '2017-08-09',
+  type: '通知',
+}, {
+  id: '000000002',
+  avatar: 'https://gw.alipayobjects.com/zos/rmsportal/OKJXDXrmkNshAMvwtvhu.png',
+  title: '你推荐的 曲妮妮 已通过第三轮面试',
+  datetime: '2017-08-08',
+  type: '通知',
+}, {
+  id: '000000003',
+  avatar: 'https://gw.alipayobjects.com/zos/rmsportal/kISTdvpyTAhtGxpovNWd.png',
+  title: '这种模板可以区分多种通知类型',
+  datetime: '2017-08-07',
+  read: true,
+  type: '通知',
+}, {
+  id: '000000004',
+  avatar: 'https://gw.alipayobjects.com/zos/rmsportal/GvqBnKhFgObvnSGkDsje.png',
+  title: '左侧图标用于区分不同的类型',
+  datetime: '2017-08-07',
+  type: '通知',
+}, {
+  id: '000000005',
+  avatar: 'https://gw.alipayobjects.com/zos/rmsportal/ThXAXghbEsBCCSDihZxY.png',
+  title: '内容不要超过两行字，超出时自动截断',
+  datetime: '2017-08-07',
+  type: '通知',
+}, {
+  id: '000000006',
   avatar: 'https://gw.alipayobjects.com/zos/rmsportal/fcHMVNCjPOsbUGdEduuv.jpeg',
   title: '曲丽丽 评论了你',
   description: '描述信息描述信息描述信息',
-  datetime: moment('2017-08-07').fromNow(),
+  datetime: '2017-08-07',
+  type: '消息',
 }, {
-  key: '2',
+  id: '000000007',
   avatar: 'https://gw.alipayobjects.com/zos/rmsportal/fcHMVNCjPOsbUGdEduuv.jpeg',
   title: '朱偏右 回复了你',
   description: '这种模板用于提醒谁与你发生了互动，左侧放『谁』的头像',
-  datetime: moment('2017-08-07').fromNow(),
+  datetime: '2017-08-07',
+  type: '消息',
 }, {
-  key: '3',
+  id: '000000008',
   avatar: 'https://gw.alipayobjects.com/zos/rmsportal/fcHMVNCjPOsbUGdEduuv.jpeg',
   title: '标题',
   description: '这种模板用于提醒谁与你发生了互动，左侧放『谁』的头像',
-  datetime: moment('2017-08-07').fromNow(),
-  extra: <Tag color="red" style={{ marginRight: 0 }}>标签</Tag>,
+  datetime: '2017-08-07',
+  type: '消息',
+}, {
+  id: '000000009',
+  title: '任务名称',
+  description: '任务需要在 2017-01-12 20:00 前启动',
+  extra: '未开始',
+  status: 'todo',
+  type: '待办',
+}, {
+  id: '000000010',
+  title: '第三方紧急代码变更',
+  description: '冠霖提交于 2017-01-06，需在 2017-01-07 前完成代码变更任务',
+  extra: '马上到期',
+  status: 'urgent',
+  type: '待办',
+}, {
+  id: '000000011',
+  title: '信息安全考试',
+  description: '指派竹尔于 2017-01-09 前完成更新并发布',
+  extra: '已耗时 8 天',
+  status: 'doing',
+  type: '待办',
+}, {
+  id: '000000012',
+  title: 'ABCD 版本发布',
+  description: '冠霖提交于 2017-01-06，需在 2017-01-07 前完成代码变更任务',
+  extra: '进行中',
+  status: 'processing',
+  type: '待办',
 }];
 
 function onItemClick(item, tabProps) {
@@ -39,6 +101,35 @@ function onClear(tabTitle) {
   console.log(tabTitle);
 }
 
+function getNoticeData(notices) {
+  if (notices.length === 0) {
+    return {};
+  }
+  const newNotices = notices.map((notice) => {
+    const newNotice = { ...notice };
+    if (newNotice.datetime) {
+      newNotice.datetime = moment(notice.datetime).fromNow();
+    }
+    // transform id to item key
+    if (newNotice.id) {
+      newNotice.key = newNotice.id;
+    }
+    if (newNotice.extra && newNotice.status) {
+      const color = ({
+        todo: '',
+        processing: 'blue',
+        urgent: 'red',
+        doing: 'gold',
+      })[newNotice.status];
+      newNotice.extra = <Tag color={color} style={{ marginRight: 0 }}>{newNotice.extra}</Tag>;
+    }
+    return newNotice;
+  });
+  return groupBy(newNotices, 'type');
+}
+
+const noticeData = getNoticeData(data);
+
 ReactDOM.render(
   <div
     style={{
@@ -50,21 +141,27 @@ ReactDOM.render(
       width: '400px',
     }}
   >
-    <NoticeIcon count={5} onItemClick={onItemClick} onClear={onClear}>
+    <NoticeIcon
+      className="notice-icon"
+      count={5}
+      onItemClick={onItemClick}
+      onClear={onClear}
+      popupAlign={{ offset: [20, -16] }}
+    >
       <NoticeIcon.Tab
-        list={data}
+        list={noticeData['通知']}
         title="通知"
         emptyText="你已查看所有通知"
         emptyImage="https://gw.alipayobjects.com/zos/rmsportal/wAhyIChODzsoKIOBHcBk.svg"
       />
       <NoticeIcon.Tab
-        list={data}
+        list={noticeData['消息']}
         title="消息"
         emptyText="您已读完所有消息"
         emptyImage="https://gw.alipayobjects.com/zos/rmsportal/sAuJeJzSKbUmHfBQRzmZ.svg"
       />
       <NoticeIcon.Tab
-        list={data}
+        list={noticeData['待办']}
         title="待办"
         emptyText="你已完成所有待办"
         emptyImage="https://gw.alipayobjects.com/zos/rmsportal/HsIsxMZiWKrNUavQUXqx.svg"
@@ -73,3 +170,7 @@ ReactDOM.render(
   </div>
 , mountNode);
 ````
+
+```css
+
+```

src/components/NoticeIcon/index.md

@@ -5,7 +5,7 @@ cols: 1
 order: 9
 ---
 
-用在顶部导航上，作为整个产品统一的通知中心。
+用在导航工具栏上，作为整个产品统一的通知中心。
 
 ## API
 

src/components/PageHeader/demo/standard.md

@@ -14,7 +14,7 @@ const { Description } = DescriptionList;
 const ButtonGroup = Button.Group;
 
 const description = (
-  <DescriptionList col="2">
+  <DescriptionList size="small" col="2">
     <Description term="创建人">曲丽丽</Description>
     <Description term="订购产品">XX 服务</Description>
     <Description term="创建时间">2017-07-07</Description>

src/components/Result/demo/classic.md

@@ -12,20 +12,22 @@ import { Button, Row, Col, Icon, Steps } from 'antd';
 const { Step } = Steps;
 
 const desc1 = (
-  <div style={{ fontSize: 12, color: 'rgba(0, 0, 0, 0.45)' }}>
-    <div style={{ margin: '8px 0 4px' }}>
-      曲丽丽<Icon style={{ marginLeft: 8 }} type="dingding-o" />
+  <div style={{ fontSize: 14, position: 'relative', left: 38 }}>
+    <div style={{ marginTop: 8, marginBottom: 4 }}>
+      曲丽丽
+      <Icon type="dingding-o" style={{ marginLeft: 8 }} />
     </div>
-    <div>2016-12-12 12:32</div>
+    <div style={{ marginTop: 8, marginBottom: 4 }}>2016-12-12 12:32</div>
   </div>
 );
 
 const desc2 = (
-  <div style={{ fontSize: 12 }}>
-    <div style={{ margin: '8px 0 4px' }}>
-      周毛毛<Icon type="dingding-o" style={{ color: '#00A0E9', marginLeft: 8 }} />
+  <div style={{ fontSize: 14, position: 'relative', left: 38 }}>
+    <div style={{ marginTop: 8, marginBottom: 4 }}>
+      周毛毛
+      <Icon type="dingding-o" style={{ color: '#00A0E9', marginLeft: 8 }} />
     </div>
-    <div><a href="">催一下</a></div>
+    <div style={{ marginTop: 8, marginBottom: 4 }}><a href="">催一下</a></div>
   </div>
 );
 

src/components/TagSelect/index.md

@@ -5,7 +5,7 @@ cols: 1
 order: 13
 ---
 
-一组标签选择器，带全选/展开/收起功能。
+可进行多选，带折叠收起和展开更多功能，常用于对列表进行筛选。
 
 ## API
 

src/components/Trend/index.md

@@ -5,7 +5,7 @@ cols: 1
 order: 14
 ---
 
-趋势符号，标记上升和下降趋势。
+趋势符号，标记上升和下降趋势。通常用绿色代表“好”，红色代表“不好”，股票涨跌场景除外。
 
 ## API