From 4f2f9e572cde6b9b3960a14893234568efac1c99 Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Thu, 19 Oct 2017 18:19:05 +0800
Subject: [PATCH] update notification

---
 src/components/NoticeIcon/NoticeList.js   | 12 ++++++++----
 src/components/NoticeIcon/NoticeList.less | 13 +++++--------
 src/components/NoticeIcon/demo/popover.md | 21 ++++++++++++++++++---
 src/components/NoticeIcon/index.js        |  2 ++
 src/layouts/BasicLayout.js                | 21 ++++++++++++++++++---
 src/layouts/BasicLayout.less              |  2 +-
 6 files changed, 52 insertions(+), 19 deletions(-)

diff --git a/src/components/NoticeIcon/NoticeList.js b/src/components/NoticeIcon/NoticeList.js
index a6a56354..ed6fa79d 100644
--- a/src/components/NoticeIcon/NoticeList.js
+++ b/src/components/NoticeIcon/NoticeList.js
@@ -1,14 +1,18 @@
 import React from 'react';
-import { Avatar, Icon, List } from 'antd';
+import { Avatar, List } from 'antd';
 import classNames from 'classnames';
 import styles from './NoticeList.less';
 
-export default function NoticeList({ data = [], onClick, onClear, title, locale }) {
+export default function NoticeList({
+  data = [], onClick, onClear, title, locale, emptyText, emptyImage,
+}) {
   if (data.length === 0) {
     return (
       <div className={styles.notFound}>
-        <Icon type="frown-o" />
-        {locale.emptyText}
+        {emptyImage ? (
+          <img src={emptyImage} alt="not found" />
+        ) : null}
+        <div>{emptyText || locale.emptyText}</div>
       </div>
     );
   }
diff --git a/src/components/NoticeIcon/NoticeList.less b/src/components/NoticeIcon/NoticeList.less
index a6be1d67..1dcfad44 100644
--- a/src/components/NoticeIcon/NoticeList.less
+++ b/src/components/NoticeIcon/NoticeList.less
@@ -54,15 +54,12 @@
 
 .notFound {
   text-align: center;
-  height: 120px;
-  line-height: 120px;
-  font-size: 14px;
+  padding: 73px 0 88px 0;
   color: @text-color-secondary;
-  > i {
-    font-size: 16px;
-    margin-right: 8px;
-    vertical-align: middle;
-    margin-top: -1px;
+  img {
+    display: inline-block;
+    margin-bottom: 16px;
+    height: 76px;
   }
 }
 
diff --git a/src/components/NoticeIcon/demo/popover.md b/src/components/NoticeIcon/demo/popover.md
index 379e59c7..eff2edbf 100644
--- a/src/components/NoticeIcon/demo/popover.md
+++ b/src/components/NoticeIcon/demo/popover.md
@@ -51,9 +51,24 @@ ReactDOM.render(
     }}
   >
     <NoticeIcon count={5} onItemClick={onItemClick} onClear={onClear}>
-      <NoticeIcon.Tab list={data} title="通知" />
-      <NoticeIcon.Tab list={data} title="消息" />
-      <NoticeIcon.Tab list={[]} title="待办" />
+      <NoticeIcon.Tab
+        list={noticeData['通知']}
+        title="通知"
+        emptyText="你已查看所有通知"
+        emptyImage="https://gw.alipayobjects.com/zos/rmsportal/sAuJeJzSKbUmHfBQRzmZ.svg"
+      />
+      <NoticeIcon.Tab
+        list={noticeData['消息']}
+        title="消息"
+        emptyText="您已读完所有消息"
+        emptyImage="https://gw.alipayobjects.com/zos/rmsportal/wAhyIChODzsoKIOBHcBk.svg"
+      />
+      <NoticeIcon.Tab
+        list={noticeData['待办']}
+        title="待办"
+        emptyText="你已完成所有待办"
+        emptyImage="https://gw.alipayobjects.com/zos/rmsportal/HsIsxMZiWKrNUavQUXqx.svg"
+      />
     </NoticeIcon>
   </div>
 , mountNode);
diff --git a/src/components/NoticeIcon/index.js b/src/components/NoticeIcon/index.js
index ac7a51bd..80ac2c16 100644
--- a/src/components/NoticeIcon/index.js
+++ b/src/components/NoticeIcon/index.js
@@ -17,6 +17,7 @@ export default class NoticeIcon extends PureComponent {
       emptyText: '暂无数据',
       clear: '清空',
     },
+    emptyImage: 'https://gw.alipayobjects.com/zos/rmsportal/wAhyIChODzsoKIOBHcBk.svg',
   };
   static Tab = TabPane;
   constructor(props) {
@@ -45,6 +46,7 @@ export default class NoticeIcon extends PureComponent {
       return (
         <TabPane tab={title} key={child.props.title}>
           <List
+            {...child.props}
             data={child.props.list}
             onClick={item => this.onItemClick(item, child.props)}
             onClear={() => this.props.onClear(child.props.title)}
diff --git a/src/layouts/BasicLayout.js b/src/layouts/BasicLayout.js
index f560947f..c8d9e79a 100644
--- a/src/layouts/BasicLayout.js
+++ b/src/layouts/BasicLayout.js
@@ -239,9 +239,24 @@ class BasicLayout extends React.PureComponent {
                   loading={fetchingNotices}
                   popupAlign={{ offset: [20, -16] }}
                 >
-                  <NoticeIcon.Tab list={noticeData['通知']} title="通知" />
-                  <NoticeIcon.Tab list={noticeData['消息']} title="消息" />
-                  <NoticeIcon.Tab list={noticeData['待办']} title="待办" />
+                  <NoticeIcon.Tab
+                    list={noticeData['通知']}
+                    title="通知"
+                    emptyText="你已查看所有通知"
+                    emptyImage="https://gw.alipayobjects.com/zos/rmsportal/sAuJeJzSKbUmHfBQRzmZ.svg"
+                  />
+                  <NoticeIcon.Tab
+                    list={noticeData['消息']}
+                    title="消息"
+                    emptyText="您已读完所有消息"
+                    emptyImage="https://gw.alipayobjects.com/zos/rmsportal/wAhyIChODzsoKIOBHcBk.svg"
+                  />
+                  <NoticeIcon.Tab
+                    list={noticeData['待办']}
+                    title="待办"
+                    emptyText="你已完成所有待办"
+                    emptyImage="https://gw.alipayobjects.com/zos/rmsportal/HsIsxMZiWKrNUavQUXqx.svg"
+                  />
                 </NoticeIcon>
                 {currentUser.name ? (
                   <Dropdown overlay={menu}>
diff --git a/src/layouts/BasicLayout.less b/src/layouts/BasicLayout.less
index 6c19f16c..1921e73b 100644
--- a/src/layouts/BasicLayout.less
+++ b/src/layouts/BasicLayout.less
@@ -45,7 +45,7 @@
   transition: all .3s;
   padding: 0 24px;
   &:hover {
-    background: rgba(0, 0, 0, .04);
+    background: @primary-1;
   }
 }
 
-- 
GitLab