通知中心优化

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

@@ -59,6 +59,9 @@ function MyNotice(props) {
         if(response.status === 200){
           getMessageList();
           resetUserInfo();
+          //已读当前页码最后一条数据时跳转到前一页
+          let totlaPage = Math.ceil((messTotalCount-1)/pageSize);
+          setCurrentPage(currentPage>=totlaPage? totlaPage : currentPage);
         }
       });
     }
@@ -117,10 +120,17 @@ function MyNotice(props) {
         axios.delete(`/users/${current_user.login}/messages.json`,{
           data:params,
         }).then((response)=>{
-          response.status === 200 && getMessageList();
+          if(response.status === 200){
+            getMessageList();
+            //删除当前页码最后一条数据时跳转到前一页
+            let totlaPage = Math.ceil((messTotalCount-1)/pageSize);
+            setCurrentPage(currentPage>=totlaPage? totlaPage : currentPage);
+            setSelectedNum(0);
+          }
         });
       }
     });
+    
   }
 
   function cancelBatchDelete(){
@@ -135,6 +145,7 @@ function MyNotice(props) {
     setBatchDeleteCheckAll(false);
   }
 
+  //跳转到消息详情页面
   function turnToMess(item){
     if(item.notification_url){
       window.open(`${item.notification_url}`);
@@ -147,7 +158,6 @@ function MyNotice(props) {
       <div className="sshHead">
         <Menu mode="horizontal" selectedKeys={noticeType} onClick={handleClick}>
           <Menu.Item key="0"><Badge count={noticeUnreadCount} title="">系统通知</Badge></Menu.Item>
-          {/* <Menu.Item key="1" id="item-private"><Badge count={0}>私信</Badge></Menu.Item> */}
           <Menu.Item key="2"><Badge count={atUnreadCount}>@我</Badge></Menu.Item>
         </Menu>
         {(noticeType==="0" && noticeUnreadCount>0) || (noticeType==="2"&& atUnreadCount>0) ? <button className="but25" onClick={()=>{readNotice([-1])}}>所有{noticeType === "0" ? "系统通知" : noticeType === "1" ? "私信" : "@我"}一键已读</button>:""}
@@ -164,9 +174,8 @@ function MyNotice(props) {
 
       {messageList && messageList.length>0 && <div className={isBatchDelete ? 'visible' : 'invisible'}>
         <div className="vertical-center-style">
-          {/* <input type="checkbox" id="checkAll" onChange={onChangeAll} />&nbsp; */}
           <Checkbox onChange={onChangeAll} checked={batchDeleteCheckedAll}>全选</Checkbox>
-          &nbsp;&nbsp;&nbsp;已选择&nbsp;<span id="numberSpan">{selectedNum}</span>&nbsp;项
+          &nbsp;&nbsp;&nbsp;已选择&nbsp;<span className="numberSpan">{selectedNum}</span>&nbsp;项
         </div>
         <div>
           <button onClick={cancelBatchDelete}>取消</button>&nbsp;&nbsp;&nbsp;&nbsp;
@@ -183,7 +192,7 @@ function MyNotice(props) {
               <div className="mynotice-cont stretch-style">
                 {item.status === 1 ? <Badge color="#FA2020" /> : <span className="system-notice-blank"></span>}
                 <i className={"iconfont "+noticeSourceType[item.source]}></i>
-                <span className={item.notification_url?"sysNotice-length highlightSpan":"sysNotice-length"} onClick={() => {item.notification_url && window.open("https://"+`${item.notification_url}`);readNotice([item.id])}} dangerouslySetInnerHTML={{__html: item.content}}></span>
+                <span className={`sysNotice-length ${item.notification_url?'highlightSpan':''}`} onClick={() => {turnToMess(item)}} dangerouslySetInnerHTML={{__html: item.content}}></span>
               </div>
               <div className="mynotice-cont vertical-center-style float-left-little">
                 <span className={item.status === 1?"timeSpan":""}>{item.time_ago}</span>
@@ -192,16 +201,15 @@ function MyNotice(props) {
             </div>
           )
         } else if (noticeType === "2") {
-          console.log(item);
           //@我
           return (
             <div className={`mynotice-content vertical-center-style ${isBatchDelete?'batchDel':''}`} key={item.id}>
               <div className="mynotice-cont vertical-center-style">
                 <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={()=>{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 stretch-style ${item.notification_url && 'highlightSpan'}`} onClick={() => {turnToMess(item)}}>
-                <div className={`atme-notice-text ${item.notification_url && 'highlightSpan'}`} onClick={() => {turnToMess(item)}}>
+                  {item.status === 1 ? <Badge color="#FA2020"/> : <span className="system-notice-blank"></span>}
-                  {item.sender && <span dangerouslySetInnerHTML={{__html: "<b>" + item.sender.name+ "</b>    "+ item.content +"  中@我"}}></span>}
+                  {item.sender && <span className="atme-length" dangerouslySetInnerHTML={{__html: "<b class = 'atme-notice-name'>" + item.sender.name+ "</b>    "+ item.content +"  中@我"}}></span>}
                 </div>
               </div>
               <div className="mynotice-cont vertical-center-style">

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

@@ -16,10 +16,6 @@
     position: relative;
   }
 
-  // #item-private{
-  //   margin: 0 24px 0 34px !important;
-  // }
-
   li.ant-menu-item, .ant-menu-horizontal > .ant-menu-item {
     border-bottom: 0px;
   }
@@ -92,15 +88,10 @@ button:active {
     cursor: pointer;
   }
 
-  & .atme-umread-redDot{
-    position: relative;
-    top: -13px;
-    right: -5px;
-  }
-
   & b{
     font-weight: 400;
     text-shadow: 0.5px 0 #333;
+    margin: 0 6px;
   }
 
   & .invisable-read{
@@ -158,8 +149,15 @@ button:active {
     }
     .atme-notice-text{
       margin-left: 6px;
-      max-width: 48rem;
+
-      word-break: break-all;
+      & .atme-notice-name{
+        margin: 0 0 ;
+      }
+
+      & .atme-length{
+        max-width: 48rem;
+        word-break: break-all;
+      }
     }
   }
 
@@ -229,7 +227,7 @@ button:active {
 }
 
 
-#numberSpan{
+.numberSpan{
   color: #466AFF;
 }