Merge pull request '我的通知' (#18) from durian/forgeplus-react:feature_notification_xiesi into feature_notification

src/forge/Head/Header.js

@@ -448,7 +448,7 @@ class NewHeader extends Component {
                 visible={visible}
                 onVisibleChange={this.handleVisibleChange}
               >
-                <a className="message-icon" href={`/settings/notice/myNotice`}>
+                <a className="message-icon" href={`/settings/notice/Notice`}>
                   <Badge count={current_user.message_unread_total}>
                     <i className="iconfont icon-xiaoxilingdang color-grey-6 ml15 mr15"></i>
                   </Badge>

src/forge/Head/NoticeContent.jsx

@@ -163,16 +163,15 @@ function NoticeContent({ visible, showNotification, resetUserInfo, current_user:
       >
         {
           noticeUnreadList.map(item => {
-            let contentStr = item.content.endsWith("</b>") && item.content.length >= 50 && item.content.replace("</b>", "").substr(0, 40) + "...";
             return (
               <div key={item.id + Math.random()} className="noticeCont-back" onClick={() => { readItem(item) }}>
-                <div className="noticeCont" style={{ height: item.content.length > 30 && item.content.length <= 34 ? '65px' : "" }}>
+                <div className="noticeCont">
                   <span style={{ visibility: item.status === 1 ? 'visible' : 'hidden' }}>
                     <Badge color="#FA2020" />
                   </span>
                   <i className={"iconfont "+noticeSourceType[item.source]}></i>
                   <div className="noticeCont-text">
-                    <span dangerouslySetInnerHTML={{ __html: contentStr ? contentStr : item.content.length >= 48 ? item.content.substr(0, 48) + "..." : item.content }}></span>
+                    <span className="content-span notice-cont-span" dangerouslySetInnerHTML={{ __html: item.content }}></span>
                     <span className="timeSpan">{item.time_ago}</span>
                   </div>
                 </div>
@@ -194,12 +193,12 @@ function NoticeContent({ visible, showNotification, resetUserInfo, current_user:
         {atUnreadList.map(item => {
           return (
             <div key={item.id + Math.random()} className="noticeCont-back" onClick={() => { readItem(item) }}>
-              <div className="noticeCont" style={{ height: item.content.length > 30 && item.content.length <= 42 ? '65px' : "" }}>
+              <div className="noticeCont">
                 <span style={{ visibility: item.status === 1 ? 'visible' : 'hidden' }}>
                   <Badge color="#FA2020" />
                 </span>
                 <div className="noticeCont-text">
-                  <span dangerouslySetInnerHTML={{ __html: item.content.length >= 50 ? item.content.substr(0, 50) + "...@我" : item.content }}></span>
+                  <span className="content-span atme-cont-span" dangerouslySetInnerHTML={{ __html: item.content }}></span>
                   <span className="timeSpan">{item.time_ago}</span>
                 </div>
               </div>
@@ -226,7 +225,7 @@ function NoticeContent({ visible, showNotification, resetUserInfo, current_user:
           )
         }) : "暂无数据" : ""} */}
       <div className="hoverNotice-buttom">
-        <Link to="/settings/mynotice">全部消息</Link>
+        <Link to="/settings/notice">全部消息</Link>
         <a onClick={readAll}>所有{noticeType === "notification" ? "系统消息" : noticeType === "letter" ? "私信" : "@我"}一键已读</a>
       </div>
     </div>

src/forge/Head/header.scss

@@ -224,17 +224,30 @@
   }
 
   .noticeCont-text{
-    flex: auto;
+    display: flex;
-    position: relative;
-    max-height: 48px;
     color:#333333;
 
+    & .content-span{
+      word-break: break-all;
+      text-overflow: ellipsis;
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 2; /* 这里是超出几行省略 */
+      overflow: hidden;
+    }
+
+    & .atme-cont-span{
+      width: 275px;
+    }
+
+    & .notice-cont-span{
+       width: 255px;
+    }
+
     .timeSpan{
-      position: absolute;
-      right: 3px;
-      bottom: 0px;
       font-size: 12px;
       color: #666666;
+      margin-left: 5px;
     }
 
     .at-name{

src/forge/SecuritySetting/Index.jsx

@@ -61,7 +61,7 @@ function Index(props){
             </ul>
             <ul className="securityUl ul-border-buttom">
               <li>消息通知</li>
-              <li className={pathname.indexOf("/settings/mynotice")>-1 || pathname.indexOf("/settings/notice/privateLetter")>-1 ?"active":""}><Link to={`/settings/mynotice`}><i className="iconfont icon-wodetongzhi"></i><span className="text-shodow-bold">我的通知</span></Link></li>
+              <li className={pathname.indexOf("/settings/notice")>-1 || pathname.indexOf("/settings/notice/privateLetter")>-1 ?"active":""}><Link to={`/settings/notice`}><i className="iconfont icon-wodetongzhi"></i><span className="text-shodow-bold">我的通知</span></Link></li>
               {/* <li className={pathname.indexOf("/settings/notice/noticeManager")>-1 ?"active":""}><Link to={`/settings/notice/noticeManager`}><i className="iconfont icon-tongzhiguanli"></i><span className="text-shodow-bold">通知管理</span></Link></li> */}
             </ul>
             <ul className="securityUl">
@@ -73,7 +73,7 @@ function Index(props){
             <Gap>
               <Switch>
                 <Route
-                  path="/settings/mynotice"
+                  path="/settings/notice"
                   render={(p) => (
                     <MyNoticeIndex {...props} {...p}/>
                   )}

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

@@ -1,5 +1,7 @@
+.whiteBack .boies .sshHead{
+  padding:0 10px 0px 0px;
+}
 .sshHead{
-  padding:0 10px 0px 0px !important;
   .ant-badge{
     font-size: 16px;
     color: #333333;
@@ -14,16 +16,16 @@
     position: relative;
   }
 
-  #item-private{
+  // #item-private{
-    margin: 0 24px 0 34px !important;
+  //   margin: 0 24px 0 34px !important;
-  }
+  // }
 
   li.ant-menu-item, .ant-menu-horizontal > .ant-menu-item {
     border-bottom: 0px;
   }
 
-  .ant-menu-item-selected{
+  & .ant-menu-item-selected{
-    color: #333333 !important;
+    color: #333333;
     font-weight: 400;
     text-shadow: 0.5px 0 #333;
     border-bottom: 2px solid #2A61FF !important;
@@ -86,6 +88,11 @@ button:active {
     background: #F3F4F6;
   }
 
+  & b{
+    font-weight: 400;
+    text-shadow: 0.5px 0 #333;
+  }
+
   & .invisable-read{
     display: none;
   }