update notification

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>
     );
   }

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;
   }
 }
 

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);

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)}

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}>

src/layouts/BasicLayout.less

@@ -45,7 +45,7 @@
   transition: all .3s;
   padding: 0 24px;
   &:hover {
-    background: rgba(0, 0, 0, .04);
+    background: @primary-1;
   }
 }