通知中心优化

src/forge/Head/NoticeContent.jsx

@@ -246,7 +246,7 @@ function NoticeContent({ visible, showNotification, resetUserInfo, current_user:
       <div className="hoverNotice-buttom">
         <Link to="/settings/notice">全部消息</Link>
         {noticeUnreadCount > 0 && noticeType === "notification" && <a onClick={readAll}>所有系统消息一键已读</a>}
-        {atUnreadCount > 0 && noticeType === "atme" && <a onClick={readAll}>所有"@我"一键已读</a>}
+        {atUnreadCount > 0 && noticeType === "atme" && <a onClick={readAll}>所有@我一键已读</a>}
       </div>
     </div>
 

src/forge/SecuritySetting/notice/myNotice/Index.jsx

@@ -27,12 +27,6 @@ function MyNotice(props) {
   const [onlyUnread, setOnlyUnread] = useState();
 
   useEffect(() => {
-    // const params = {
-    //   type: noticeType === "0" ? "notification" : noticeType === "2" ? "atme" : "",
-    //   status: onlyUnread ? onlyUnread : "",
-    //   limit: pageSize,
-    //   page: currentPage,
-    // }
     getMessageList();
   }, [noticeType, onlyUnread, currentPage])
 
@@ -125,8 +119,7 @@ function MyNotice(props) {
         }).then((response)=>{
           response.status === 200 && getMessageList();
         });
-      },
-      onCancel: cancelBatchDelete
+      }
     });
   }
 
@@ -142,8 +135,11 @@ function MyNotice(props) {
     setBatchDeleteCheckAll(false);
   }
 
-  function turnToPersonalCenter(){
-    window.open(`/${current_user  && current_user.login}`);
+  function turnToMess(item){
+    if(item.notification_url){
+      window.open(`${item.notification_url}`);
+      readNotice([item.id]);
+    }
   }
 
   return (
@@ -199,21 +195,19 @@ function MyNotice(props) {
           console.log(item);
           //@我
           return (
-            <div className="mynotice-content vertical-center-style" key={item.id}>
+            <div className={`mynotice-content vertical-center-style ${isBatchDelete?'batchDel':''}`} key={item.id}>
               <div className="mynotice-cont vertical-center-style">
-                {/* <input type="checkbox" className={isBatchDelete ? 'atme-checkbox' : 'invisible'} onChange={onChange} /> */}
                 <Checkbox value={item.id} className={isBatchDelete ? 'visible-checkbox' : 'invisible-checkbox'} onChange={onChange} checked={item.checkedBatch}></Checkbox>
-                {item.sender && <img src={`https://testforgeplus.trustie.net//${item.sender.image_url}`} className="currentImg" onClick={turnToPersonalCenter}/>}
-                <div className="atme-notice-text">
-                  <div className="at-badge">{item.status === 1 ? <Badge color="#FA2020" /> : <span className="system-notice-blank"></span>}</div>
-                  {/* {item.sender && <div className="atme-sender-name boldSpan">{item.sender.name}</div>} */}
-                  {item.sender && <div className={item.notification_url?"highlightSpan atme-cont":"atme-cont"} onClick={() => {item.notification_url && window.open("https://"+`${item.notification_url}`);readNotice([item.id])}} dangerouslySetInnerHTML={{__html: "<b onClick = {turnToPersonalCenter}>" + item.sender.name +"</b>&nbsp;&nbsp;&nbsp;" + item.content +"  中@我"}}></div>}
+                {item.sender && <img src={`https://testforgeplus.trustie.net//${item.sender.image_url}`} className="currentImg" onClick={()=>{window.open(`/${item.sender && item.sender.login}`);}}/>}
+                {item.status === 1 ? <Badge color="#FA2020" className="atme-umread-redDot"/> : <span className="system-notice-blank"></span>}
+                <div className={`atme-notice-text ${item.notification_url && 'highlightSpan'}`} onClick={() => {turnToMess(item)}}>
+                  {item.sender && <span dangerouslySetInnerHTML={{__html: "<b>" + item.sender.name+ "</b>    "+ item.content +"  中@我"}}></span>}
                 </div>
               </div>
               <div className="mynotice-cont vertical-center-style">
-                <span className={item.status === 1?"timeSpan":""}>{item.time_ago}</span>
-                {item.status === 1 && <span className="invisable-read" onClick={()=>readNotice([item.id])}>标记为已读</span>}&nbsp;&nbsp;&nbsp;
-                <span className="invisable-read float-left-little" onClick={()=>deleteNotice([item.id])}>删除</span>
+                <span className={!isBatchDelete && item.status === 1?"timeSpan":""}>{item.time_ago}</span>
+                {!isBatchDelete && item.status === 1 && <span className="invisable-read" onClick={()=>readNotice([item.id])}>标记为已读</span>}&nbsp;&nbsp;&nbsp;
+                {!isBatchDelete && <span className="invisable-read float-left-little" onClick={()=>deleteNotice([item.id])}>删除</span>}
               </div>
             </div>
           )

src/forge/SecuritySetting/notice/myNotice/Index.scss

@@ -88,6 +88,16 @@ button:active {
     background: #F3F4F6;
   }
 
+  & img{
+    cursor: pointer;
+  }
+
+  & .atme-umread-redDot{
+    position: relative;
+    top: -13px;
+    right: -5px;
+  }
+
   & b{
     font-weight: 400;
     text-shadow: 0.5px 0 #333;
@@ -139,7 +149,7 @@ button:active {
 
   .mynotice-cont{
     padding:0;
-
+    cursor: default;
     & .visible-checkbox{
       margin-right: 10px;
     }
@@ -147,18 +157,9 @@ button:active {
       display: none;
     }
     .atme-notice-text{
-      display: flex;
-      position: relative;
-      margin-left: 12px;
+      margin-left: 6px;
+      max-width: 48rem;
       word-break: break-all;
-      & .at-badge{
-        position:absolute;
-      }
-
-      & .atme-cont{
-        max-width: 48rem;
-        margin-left: 12px;
-      }
     }
   }
 
@@ -176,6 +177,12 @@ button:active {
   }
 }
 
+.batchDel{
+  & .currentImg, & .atme-notice-text{
+    pointer-events: none;
+  }
+}
+
 .baselineDiv{
   align-items: baseline;
 }