forgeplus-react/src/forge/Head/NoticeContent.jsx

import React, { useEffect, useState } from 'react';
import { Badge, Menu} from 'antd';
import './header.scss';
import '../SecuritySetting/notice/manager/Index.scss';
import '../SecuritySetting/Index.scss';
import '../SecuritySetting/notice/myNotice/Index.scss'
import { timeAgo } from '../../common/DateUtil';
import { Link } from 'react-router-dom';

function NoticeContent(props) {
  const[noticeType,setNoticeType] = useState("0");
  const[notice_unread_count,setNotice_unread_count]=useState(221);//未读系统通知数量
  const[letter_unread_count,setLetter_unread_count]=useState(10);//未读私信数量
  const[at_unread_count,setAt_unread_count]=useState(2);//未读@我数量
  const[notice_unread_list,setNotice_unread_list]=useState([
    {
      id: 11,
      type: 1,                //12345，用于展示不同的图标等，对应： 平台消息推送； 异常登录提示； 被拉入或移出项目，被拉入或移出组织；我负责的ISSUE发生改变； 我管理的仓库：有新的易修，有新的合并请求，有成员变更，仓库设置被更改，有新的易修指派给我，有新的合并请求指派给我等；
      read: 0,                //是否已读，0未读，1已读
      url: "/jasder/courselist",  //跳转路径，跳转到对应的项目/issue等；单条通知只要一个跳转路径，点击该条通知任意位置都会跳到对应issue/项目
      content: "蒋宇航在 Gitlink/Gitlink 新建易修：<b>测试环境链接地址错误</b>",  //要加粗的内容，在两侧加<b></b>标签
      create_time: "2019-03-04 18:08",    //通知发送时间
    },
    {
      id: 12,
      type: 2,
      read: 0,
      url: "/jasder/courselist",
      content: "你关注的仓库 <b>王涛/协同分析</b> 已被删除",
      create_time: "2019-03-04 18:08",
    },
    {
      id: 12,
      type: 3,
      read: 0,
      url: "/jasder/courselist",
      content: "蔡世新建易修<b> 【镜像项目-Github】私有项目 用户新建仓库，仓库转移到本地仓库的哈哈哈哈哈</b>",
      create_time: "2019-03-04 18:08",
    },
    {
      id: 12,
      type: 4,
      read: 0,
      url: "/jasder/courselist",
      content: "您的帐号<b> 小霞子1999 </b>于2021-08-11 10:52:29在非常用的IP地址113.218.1.188(湖南)",
      create_time: "2019-03-04 18:08",
    },
    {
      id: 12,
      type: 5,
      read: 0,
      url: "/jasder/courselist",
      content: "蔡世新建易修<b> 【镜像项目-Github】私有项目</b> 用户新建仓库，仓库转移到本地仓库的哈哈哈哈哈",
      create_time: "2019-03-04 18:08",
    },
    {
      id: 12,
      type: 6,
      read: 0,
      url: "/jasder/courselist",
      content: "蔡世新建易修<b> 【镜像项目-Github】私有项目 用户新建仓库，仓库转移到本地仓库的哈哈哈</b>",
      create_time: "2019-03-04 18:08",
    }
  ]);
  const[letter_unread_list,setLetter_unread_list]=useState([
    {
      id: 122,
      read: 0,                         //是否已读，0未读，1已读
      send_name: "蒋宇航",              //消息发送人
      send_login: "jiangYuHang",       //消息发送人的login，前端根据这个跳转到消息内页
      content: "私信内容",              //最近一条未读消息的内容
      create_time: "2019-03-04 18:08", //发送时间
    },
    {
      id: 122,
      read: 0,                         //是否已读，0未读，1已读
      send_name: "景霞",              //消息发送人
      send_login: "jiangYuHang",       //消息发送人的login，前端根据这个跳转到消息内页
      content: "最好的OpenStack控制台，对标OpenStack社区Horizon项目，在易用性、页面性能等方面进行深度优化，提供简单控制台。",              //最近一条未读消息的内容
      create_time: "2019-03-04 18:08", //发送时间
    },
    {
      id: 122,
      read: 0,                         //是否已读，0未读，1已读
      send_name: "陈银花",              //消息发送人
      send_login: "jiangYuHang",       //消息发送人的login，前端根据这个跳转到消息内页
      content: "A Vue 3 Component Library. Fairly Complete. Customizable Themes. Uses TypeScript. Not too Slow.",              //最近一条未读消息的内容
      create_time: "2019-03-04 18:08", //发送时间
    },
    {
      id: 122,
      read: 0,                         //是否已读，0未读，1已读
      send_name: "蒋宇航",              //消息发送人
      send_login: "jiangYuHang",       //消息发送人的login，前端根据这个跳转到消息内页
      content: "您好？",              //最近一条未读消息的内容
      create_time: "2019-03-04 18:08", //发送时间
    },
    {
      id: 122,
      read: 0,                         //是否已读，0未读，1已读
      send_name: "蒋宇航",              //消息发送人
      send_login: "jiangYuHang",       //消息发送人的login，前端根据这个跳转到消息内页
      content: "Open-source high-performance RISC-V processor",              //最近一条未读消息的内容
      create_time: "2019-03-04 18:08", //发送时间
    },
    {
      id: 122,
      read: 0,                         //是否已读，0未读，1已读
      send_name: "蒋宇航",              //消息发送人
      send_login: "jiangYuHang",       //消息发送人的login，前端根据这个跳转到消息内页
      content: "构建卷积神经网络，训练模型，预测模型效果。",              //最近一条未读消息的内容
      create_time: "2019-03-04 18:08", //发送时间
    }
  ]);
  const[at_unread_list,setAt_unread_list]=useState([
    {
      id: 122,
      read: 0,                     //是否已读，0未读，1已读
      name: "蒋宇航",               //@我的人
      content: "<b>钟景霞</b>  在易修 <b>【UI设计】用户public key添加功能</b> 中@我",           //什么情况下@我，要加粗的内容，在两侧加<b></b>标签
      create_time: "2019-03-04 18:08",    //@我的时间
      url: "/jasder/courselist",    //跳转路径，跳转到对应的项目/issue等，只要一个跳转路径
    },
    {
      id: 122,
      read: 0,                     //是否已读，0未读，1已读
      name: "阿吧",               //@我的人
      content: "<b>钟景霞</b>  在易修 <b>【UI设计】用户public key添加功能</b> 中@我【后端】代码库没有任何文件的情况下镜像项目创建/代码库页面一直处于loading状态需优化 ",           //什么情况下@我，要加粗的内容，在两侧加<b></b>标签
      create_time: "2019-03-04 18:08",    //@我的时间
      url: "/jasder/courselist",    //跳转路径，跳转到对应的项目/issue等，只要一个跳转路径
    }
    ,
    {
      id: 122,
      read: 0,                     //是否已读，0未读，1已读
      name: "蒋宇航",               //@我的人
      content: "<b>钟景霞</b>  在易修 <b>【UI设计】用s@我",           //什么情况下@我，要加粗的内容，在两侧加<b></b>标签
      create_time: "2019-03-04 18:08",    //@我的时间
      url: "/jasder/courselist",    //跳转路径，跳转到对应的项目/issue等，只要一个跳转路径
    }
    ,
    {
      id: 122,
      read: 0,                     //是否已读，0未读，1已读
      name: "蒋宇航",               //@我的人
      content: "<b>钟景霞</b>  key添加功能</b> 中@我",           //什么情况下@我，要加粗的内容，在两侧加<b></b>标签
      create_time: "2019-03-04 18:08",    //@我的时间
      url: "/jasder/courselist",    //跳转路径，跳转到对应的项目/issue等，只要一个跳转路径
    }
    ,
    {
      id: 122,
      read: 0,                     //是否已读，0未读，1已读
      name: "蒋宇航",               //@我的人
      content: "<b>钟景霞</b>  在易修 <b>【UI设计】用户public key添加功能</b> 中@我axdsadasd",           //什么情况下@我，要加粗的内容，在两侧加<b></b>标签
      create_time: "2019-03-04 18:08",    //@我的时间
      url: "/jasder/courselist",    //跳转路径，跳转到对应的项目/issue等，只要一个跳转路径
    }
    ,
    {
      id: 122,
      read: 0,                     //是否已读，0未读，1已读
      name: "蒋宇航",               //@我的人
      content: "<b>钟景霞</b>  在易修 <b>【UI设计】用户public key添加功sdasd能</b> 中@我",           //什么情况下@我，要加粗的内容，在两侧加<b></b>标签
      create_time: "2019-03-04 18:08",    //@我的时间
      url: "/jasder/courselist",    //跳转路径，跳转到对应的项目/issue等，只要一个跳转路径
    }
    ,
    {
      id: 122,
      read: 0,                     //是否已读，0未读，1已读
      name: "蒋宇航",               //@我的人
      content: "<b>钟景霞</b>  在易修 <b>【UI设计】用户public key添加功能</b> 中@我",           //什么情况下@我，要加粗的内容，在两侧加<b></b>标签
      create_time: "2019-03-04 18:08",    //@我的时间
      url: "/jasder/courselist",    //跳转路径，跳转到对应的项目/issue等，只要一个跳转路径
    }
  ]);

  return(
    <div className="messageHoverDiv notice01">
        <div className="sshHead hoverNotice-head">
          <Menu mode="horizontal" selectedKeys={noticeType}  onClick={(e)=>setNoticeType(e.key)}>
            <Menu.Item key="0"><Badge count={notice_unread_count}>系统通知</Badge></Menu.Item>
            <Menu.Item key="1" id="item-private"><Badge count={letter_unread_count}>私信</Badge></Menu.Item>
            <Menu.Item key="2"><Badge count={at_unread_count}>@我</Badge></Menu.Item>
          </Menu>
        </div>
        <div className="hoverNotice-body">
          
          {/* 系统消息 */}
          {noticeType==="0"?notice_unread_list.length>0?notice_unread_list.map(item=>{
            let contentStr = item.content.endsWith("</b>") && item.content.length>=50 && item.content.replace("</b>","").substr(0,40)+"...";
            let iconName = item.type===1?"icon-xitongtongzhiicon":item.type===2?"icon-xiaoxi2":item.type===3?"icon-yixiuicon1":item.type===4?"icon-hebingqingqiuicon":item.type===5?"icon-lichengbeiicon":"icon-daimakuicon1";
            return(
              <div className="noticeCont-back">
              <div className="noticeCont" style={{height:item.content.length>=30 && item.content.length<=34?'65px':""}}>
                <Badge color="#FA2020" />
                <i className={"iconfont "+iconName}></i>
                <div className="noticeCont-text">
                  <span dangerouslySetInnerHTML={{__html:contentStr?contentStr: item.content.length>=48?item.content.substr(0,48)+"...":item.content}}></span>
                  <span className="timeSpan">{item.create_time?timeAgo(item.create_time):"刚刚"}</span>
                </div>
              </div>
              </div>
            )
          }):"暂无数据":""}

          {/* 私信 */}
          {noticeType==="1"?letter_unread_list.length>0?letter_unread_list.map(item=>{
            return(
              <div className="noticeCont-back">
              <div className="noticeCont" style={{height:item.content.length>=30 && item.content.length<=34?'65px':""}}>
                <Badge color="#FA2020" />
                <div className="noticeCont-text">
                  <span>{item.send_name}：</span>
                  <span className="boldSpan" dangerouslySetInnerHTML={{__html:item.content.length>=50?item.content.substr(0,50)+"...":item.content}}></span>
                  <span className="timeSpan">{item.create_time?timeAgo(item.create_time):"刚刚"}</span>
                </div>
              </div>
              </div>
            )
          }):"暂无数据":""}

          {/* @我 */}
          {noticeType==="2"?at_unread_list.length>0?at_unread_list.map(item=>{
            return(
              <div className="noticeCont-back">
              <div className="noticeCont" style={{height:item.content.length>=30 && item.content.length<=42?'65px':""}}>
                <Badge color="#FA2020" />
                <div className="noticeCont-text">
                  {/* <span className="at-name">{item.name}</span> */}
                  <span dangerouslySetInnerHTML={{__html:item.content.length>=56?item.content.substr(0,56)+"...@我":item.content}}></span>
                  <span className="timeSpan">{item.create_time?timeAgo(item.create_time):"刚刚"}</span>
                </div>
              </div>
              </div>
            )
          }):"暂无数据":""}

          {/* <div className="noticeCont">
            <Badge color="#FA2020" />
            {noticeType === "0" ? <i className="iconfont icon-yixiuicon1"></i> : ""}
            <div className="text">
              <span>蒋宇航：</span>
              <span className="boldSpan">最好的OpenStack控制台，对标Open社区项目Horizon，在易...</span>
              <span className="timeSpan">4分钟前</span>
            </div>
          </div>
          <div className="noticeCont">
            <Badge color="#FA2020" />
            {noticeType === "0" ? <i className="iconfont icon-yixiuicon1"></i> : ""}
            <div className="text">
              <span>蒋宇航：</span>
              <span className="boldSpan">最好的OpenStack控制台，对标Open社区项目Horizon，在易...</span>
              <span className="timeSpan">4分钟前</span>
            </div>
          </div>
          <div className="noticeCont">
            <Badge color="#FA2020" />
            {noticeType === "0" ? <i className="iconfont icon-yixiuicon1"></i> : ""}
            <div className="text">
              <span>蒋宇航：</span>
              <span className="boldSpan">最好的OpenStack控制台，对标Open社区项目Horizon，在易...</span>
              <span className="timeSpan">4分钟前</span>
            </div>
          </div>
          <div className="noticeCont">
            <Badge color="#FA2020" />
            {noticeType === "0" ? <i className="iconfont icon-yixiuicon1"></i> : ""}
            <div className="text">
              <span>蒋宇航：</span>
              <span className="boldSpan">最好的OpenStack控制台，对标Open社区项目Horizon，在易...</span>
              <span className="timeSpan">4分钟前</span>
            </div>
          </div> */}
        </div>
        <div className="hoverNotice-buttom">
          <Link to="/settings/notice/myNotice">全部消息</Link>
          <a>所有{noticeType==="0"?"系统消息":noticeType==="1"?"私信":"@我"}一键已读</a>
        </div>
      </div>
    
  )
}
export default NoticeContent;