From d90c08b0367d211f7306cacadf6f035db5468bc9 Mon Sep 17 00:00:00 2001 From: ddcat1115 Date: Tue, 31 Oct 2017 16:28:17 +0800 Subject: [PATCH] fix P0 issue in http://gitlab.alipay-inc.com/ued/ant-design/issues/271 --- src/components/DescriptionList/index.md | 2 +- src/components/HeaderSearch/demo/basic.md | 2 +- src/components/HeaderSearch/index.md | 2 +- src/components/NoticeIcon/demo/basic.md | 2 +- src/components/NoticeIcon/demo/popover.md | 125 +++++++++++++++++++-- src/components/NoticeIcon/index.md | 2 +- src/components/PageHeader/demo/standard.md | 2 +- src/components/Result/demo/classic.md | 18 +-- src/components/TagSelect/index.md | 2 +- src/components/Trend/index.md | 2 +- 10 files changed, 131 insertions(+), 28 deletions(-) diff --git a/src/components/DescriptionList/index.md b/src/components/DescriptionList/index.md index 377d0351..364fa107 100644 --- a/src/components/DescriptionList/index.md +++ b/src/components/DescriptionList/index.md @@ -5,7 +5,7 @@ cols: 1 order: 4 --- -描述列表用来展示一系列文本信息。 +成组展示多个只读字段，常见于详情页的信息展示。 ## API diff --git a/src/components/HeaderSearch/demo/basic.md b/src/components/HeaderSearch/demo/basic.md index 733e5555..67703459 100644 --- a/src/components/HeaderSearch/demo/basic.md +++ b/src/components/HeaderSearch/demo/basic.md @@ -3,7 +3,7 @@ order: 0 title: 全局搜索 --- -通常放在全局导航条右侧。 +通常放置在导航工具条右侧。（点击搜索图标预览效果） ````jsx import HeaderSearch from 'ant-design-pro/lib/HeaderSearch'; diff --git a/src/components/HeaderSearch/index.md b/src/components/HeaderSearch/index.md index 106fac0d..7064228d 100644 --- a/src/components/HeaderSearch/index.md +++ b/src/components/HeaderSearch/index.md @@ -5,7 +5,7 @@ cols: 1 order: 8 --- -用在顶部导航上，提供应用全局搜索入口。 +通常作为全局搜索的入口，放置在导航工具条右侧。 ## API diff --git a/src/components/NoticeIcon/demo/basic.md b/src/components/NoticeIcon/demo/basic.md index 26835db4..dc9afeaa 100644 --- a/src/components/NoticeIcon/demo/basic.md +++ b/src/components/NoticeIcon/demo/basic.md @@ -3,7 +3,7 @@ order: 1 title: 通知图标 --- -通常用在全局导航上。 +通常用在导航工具栏上。 ````jsx import NoticeIcon from 'ant-design-pro/lib/NoticeIcon'; diff --git a/src/components/NoticeIcon/demo/popover.md b/src/components/NoticeIcon/demo/popover.md index 4ec81509..6c047b7e 100644 --- a/src/components/NoticeIcon/demo/popover.md +++ b/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: 标签, + 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 = {newNotice.extra}; + } + return newNotice; + }); + return groupBy(newNotices, 'type'); +} + +const noticeData = getNoticeData(data); + ReactDOM.render(
- + , mountNode); ```` + +```css + +``` diff --git a/src/components/NoticeIcon/index.md b/src/components/NoticeIcon/index.md index abd8fb08..0c91c8e3 100644 --- a/src/components/NoticeIcon/index.md +++ b/src/components/NoticeIcon/index.md @@ -5,7 +5,7 @@ cols: 1 order: 9 --- -用在顶部导航上，作为整个产品统一的通知中心。 +用在导航工具栏上，作为整个产品统一的通知中心。 ## API diff --git a/src/components/PageHeader/demo/standard.md b/src/components/PageHeader/demo/standard.md index 1aa167da..c51b677c 100644 --- a/src/components/PageHeader/demo/standard.md +++ b/src/components/PageHeader/demo/standard.md @@ -14,7 +14,7 @@ const { Description } = DescriptionList; const ButtonGroup = Button.Group; const description = ( - + 曲丽丽 XX 服务 2017-07-07 diff --git a/src/components/Result/demo/classic.md b/src/components/Result/demo/classic.md index 3988d958..81e6a2eb 100644 --- a/src/components/Result/demo/classic.md +++ b/src/components/Result/demo/classic.md @@ -12,20 +12,22 @@ import { Button, Row, Col, Icon, Steps } from 'antd'; const { Step } = Steps; const desc1 = ( -
-
- 曲丽丽 +
+
+ 曲丽丽 +
-
2016-12-12 12:32
+
2016-12-12 12:32
); const desc2 = ( -
-
- 周毛毛 +
+
+ 周毛毛 +
- +
); diff --git a/src/components/TagSelect/index.md b/src/components/TagSelect/index.md index 31c2e025..337371ec 100644 --- a/src/components/TagSelect/index.md +++ b/src/components/TagSelect/index.md @@ -5,7 +5,7 @@ cols: 1 order: 13 --- -一组标签选择器，带全选/展开/收起功能。 +可进行多选，带折叠收起和展开更多功能，常用于对列表进行筛选。 ## API diff --git a/src/components/Trend/index.md b/src/components/Trend/index.md index ea861203..6b1dc442 100644 --- a/src/components/Trend/index.md +++ b/src/components/Trend/index.md @@ -5,7 +5,7 @@ cols: 1 order: 14 --- -趋势符号，标记上升和下降趋势。 +趋势符号，标记上升和下降趋势。通常用绿色代表“好”，红色代表“不好”，股票涨跌场景除外。 ## API -- GitLab