U 系统通知将显示已读的历史记录

spug_api/apps/notify/views.py

@@ -8,7 +8,7 @@ from libs import json_response, JsonParser, Argument
 
 class NotifyView(View):
     def get(self, request):
-        notifies = Notify.objects.filter(unread=True)
+        notifies = Notify.objects.all()
         return json_response(notifies)
 
     def patch(self, request):

spug_web/src/layout/Notification.js

@@ -56,8 +56,8 @@ export default function () {
     setLoading(true);
     http.get('/api/notify/')
       .then(res => {
+        setReads(res.filter(x => !x.unread).map(x => x.id))
         setNotifies(res);
-        setReads([])
       })
       .finally(() => setLoading(false))
   }
@@ -68,8 +68,7 @@ export default function () {
     ws = new WebSocket(`${protocol}//${window.location.host}/api/ws/notify/?x-token=${X_TOKEN}`);
     ws.onopen = () => ws.send('ok');
     ws.onmessage = e => {
-      if (e.data === 'pong') {
-      } else {
+      if (e.data !== 'pong') {
         fetch();
         const {title, content} = JSON.parse(e.data);
         const key = `open${Date.now()}`;
@@ -80,6 +79,12 @@ export default function () {
     }
   }
 
+  function handleVisible(visible) {
+    if (visible) {
+      fetch()
+    }
+  }
+
   function handleRead(e, item) {
     e.stopPropagation();
     if (reads.indexOf(item.id) === -1) {
@@ -95,9 +100,10 @@ export default function () {
     http.patch('/api/notify/', {ids})
   }
 
+  const count = notifies.length - reads.length;
   return (
     <div className={styles.right}>
-      <Dropdown trigger={['click']} overlay={(
+      <Dropdown trigger={['click']} onVisibleChange={handleVisible} overlay={(
         <Menu className={styles.notify}>
           <Menu.Item style={{padding: 0, whiteSpace: 'unset'}}>
             <List
@@ -112,7 +118,7 @@ export default function () {
                     avatar={<Icon type={item.source}/>}
                     title={<span style={{fontWeight: 400, color: '#404040'}}>{item.title}</span>}
                     description={[
-                      <div key="1" style={{fontSize: 12}}>{item.content}</div>,
+                      <div key="1" style={{fontSize: 12, overflowWrap: 'anywhere'}}>{item.content}</div>,
                       <div key="2" style={{fontSize: 12}}>{moment(item['created_at']).fromNow()}</div>
                     ]}/>
                 </List.Item>
@@ -124,7 +130,7 @@ export default function () {
         </Menu>
       )}>
         <span className={styles.trigger}>
-          <Badge count={notifies.length - reads.length}>
+          <Badge count={count > 0 ? count : 0}>
             <NotificationOutlined style={{fontSize: 16}}/>
           </Badge>
         </span>