Merge pull request '通知中心静态页面0910' (#12) from durian/forgeplus-react:feature_notification_xiesi into feature_notification

2021-09-12 15:29:31 +08:00 · 2021-09-12 15:29:31 +08:00 · 3598225cac
parent 495e11fb4c 1b21d9e3fb
commit 3598225cac
13 changed files with 524 additions and 240 deletions
--- a/src/forge/Head/Header.js
+++ b/src/forge/Head/Header.js
@ -13,7 +13,6 @@ import '../../modules/tpm/TPMIndex.css';
 import CheckProfile from '../Component/ProfileModal/Profile';

 import './header.scss';
-import '../SecuritySetting/notice/myNotice/Index.scss'
 import NoticeContent from './NoticeContent';
 const $ = window.$
 // TODO 这部分脚本从公共脚本中直接调用
@ -49,7 +48,6 @@ class NewHeader extends Component {
      settings: null,
      visiblemyss: false,
      openSearch:false,
-      noticeType:"0",
    }
  }
  componentDidMount() {
@ -259,43 +257,6 @@ class NewHeader extends Component {
    )
  }

-  click = (e) =>{
-    this.setState({
-      noticeType: e.key,
-    })
-  }
-
-  messageList=()=>{
-    let { noticeType } = this.state;
-    return(
-      <div className="messageHoverDiv">
-        <div className="sshHead hoverNotice-head">
-          <Menu mode="horizontal" selectedKeys={noticeType}  onClick={this.click}>
-            <Menu.Item key="0"><Badge count={5}>系统通知</Badge></Menu.Item>
-            <Menu.Item key="1" id="item"><Badge count={10}>私信</Badge></Menu.Item>
-            <Menu.Item key="2"><Badge count={99}>@我</Badge></Menu.Item>
-          </Menu>
-        </div>
-        <div className="hoverNotice-body">
-          <NoticeContent noticeType={noticeType}></NoticeContent>
-          <NoticeContent noticeType={noticeType}></NoticeContent>
-          <NoticeContent noticeType={noticeType}></NoticeContent>
-          <NoticeContent noticeType={noticeType}></NoticeContent>
-          <NoticeContent noticeType={noticeType}></NoticeContent>
-          <NoticeContent noticeType={noticeType}></NoticeContent>
-          <NoticeContent noticeType={noticeType}></NoticeContent>
-          <NoticeContent noticeType={noticeType}></NoticeContent>
-          <NoticeContent noticeType={noticeType}></NoticeContent>
-          <NoticeContent noticeType={noticeType}></NoticeContent>
-        </div>
-        <div className="hoverNotice-buttom">
-          <a>全部消息</a>
-          <a>所有{noticeType==="0"?"系统消息":noticeType==="1"?"私信":"@我"}一键已读</a>
-        </div>
-      </div>
-    )
-  }
-
  renderMenu=(personal)=>{
    const { current_user } = this.props;
    return(
@ -478,7 +439,7 @@ class NewHeader extends Component {
            
            {/* {current_user && current_user.login && notice_url ? */}
            {current_user && current_user.login ?
-              <Popover placement={`bottomRight`} content={this.messageList(settings && settings.personal)}>
+              <Popover placement={`bottomRight`} content={<NoticeContent/>}>
                <a href={`/settings/notice/myNotice`} >
                  <i className="iconfont icon-xiaoxilingdang color-grey-6 ml15 mr15"></i>
                  <span className="newslight" style={{ display: this.props.Headertop === undefined ? "none" : this.props.Headertop.new_message === true ? "block" : "none" }}>
--- a/src/forge/Head/NoticeContent.jsx
+++ b/src/forge/Head/NoticeContent.jsx
@ -1,19 +1,157 @@
 import React, { useEffect, useState } from 'react';
-import { Badge} from 'antd';
+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';
+import Axios from 'axios';

 function NoticeContent(props) {
-  const noticeType = props.noticeType;
+  const[noticeType,setNoticeType] = useState("0");
+  const[notice_unread_count,setNotice_unread_count]=useState();//未读系统通知数量
+  const[letter_unread_count,setLetter_unread_count]=useState(10);//未读私信数量
+  const[at_unread_count,setAt_unread_count]=useState();//未读@我数量
+  const [message_list, setMessage_list] = useState([]);
+
+  useEffect(() => {
+    const params = {
+      type:noticeType==="0"?"notification":noticeType==="2"?"atme":"",
+      limit: 20,
+      page: 0,
+    }
+    getMessageList(params);
+  }, [noticeType])
+
+  function getMessageList(params) {
+    console.log(params);
+    Axios.get(`/users/yystopf/messages.json`, {
+      params: params,
+    }).then((response) => {
+      setNotice_unread_count(response.data.unread_notification);
+      setAt_unread_count(response.data.unread_atme);
+      setMessage_list(response.data.messages);
+      console.log(message_list);
+    })
+  }
+  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", //发送时间
+    }
+  ]);
+
  return(
-    <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 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">
+          
+          {message_list.map(item=>{
+            // 系统消息
+            if(noticeType ==="0" && item.type === "notification" && item.status===1){
+              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 icon-yixiuicon1"></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.time_ago}</span>
+                    </div>
+                  </div>
+                </div>
+              )
+            }else if(noticeType ==="2" && item.type === "atme" && item.status===1){
+              // @我
+              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 dangerouslySetInnerHTML={{__html:item.content.length>=56?item.content.substr(0,56)+"...@我":item.content}}></span>
+                      <span className="timeSpan">{item.time_ago}</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>
+            )
+          }):"暂无数据":""}
+        </div>
+        <div className="hoverNotice-buttom">
+          <Link to="/settings/notice/myNotice">全部消息</Link>
+          <a>所有{noticeType==="0"?"系统消息":noticeType==="1"?"私信":"@我"}一键已读</a>
+        </div>
      </div>
-    </div>
+    
  )
 }
 export default NoticeContent;
--- a/src/forge/Head/header.scss
+++ b/src/forge/Head/header.scss
@ -141,66 +141,84 @@
  box-shadow: 0px 4px 8px 2px rgba(212, 212, 212, 0.5);
  border-radius: 4px;
  margin-top: -10px;
-}
-.hoverNotice-head>.ant-menu-horizontal {
-  border-bottom: 1px solid #e8e8e8 !important;
+  padding: 12px 1px 12px 0;
 }

-.hoverNotice-head .ant-badge{
-  font-size: 14px !important;
-}
+.hoverNotice-head{
+  margin-left: 18px;
+
+  & .ant-badge{
+    font-size: 14px !important;
+  }
+
+  &>.ant-menu-horizontal {
+    border-bottom: 1px solid #e8e8e8 !important;
+  }
+} 

 .hoverNotice-body{
  height: 342px;
  overflow-y: scroll;
+
+  & b{
+    font-weight: 400;
+    text-shadow: 0.5px 0 0 #333;
+  }
 }

 .hoverNotice-buttom{
  display: flex;
  justify-content: space-between;
-  margin-top: 12px;
-  
+  padding: 12px 18px;
  a{
    color: #466AFF;
  }
+  a:hover{
+    opacity:0.85;
+  }
+}
+
+.noticeCont-back{
+  &:hover{
+    background: #F3F4F6;
+  }
 }

 .noticeCont{
  display: flex;
-  padding:12px 10px 10px 0;
+  margin: 0 16px 0 18px;
+  padding: 12px 0 10px 0;
+  line-height: 24px;
+  border-bottom: 1px solid #EEEEEE;

  i{
-    font-size: 16px !important;
-    margin-right: 5px;
+    font-size: 14px !important;
+    margin-right: 6px;
+    color: #333333;
  }

-  .text{
+  .boldSpan{
+    font-weight: 400;
+    text-shadow: 0.5px 0 0 #333;
+  }
+
+  .noticeCont-text{
+    
+    flex: auto;
    position: relative;
    max-height: 48px;
    color:#333333;
-    .boldSpan{
-      font-weight: 600;
-    }

    .timeSpan{
      position: absolute;
-      right: 0px;
+      right: 3px;
+      bottom: 0px;
      font-size: 12px;
      color: #666666;
    }
-  }
-}

-::-webkit-scrollbar {
-  width: 5px; /*对垂直流动条有效*/
-}
-/*定义滑块颜色、内阴影及圆角*/
-::-webkit-scrollbar-thumb {
-  border-radius: 6px;
-  box-shadow: inset 0 0 6px #FFF;
-  background-color: #D4D4D4;
-}
-::-webkit-scrollbar-track {
-  box-shadow: inset 0 0 6px #fff;
-  background-color: #FFF;
-}
+    .at-name{
+      margin-right: 12px;
+    }
+  }
+}
--- a/src/forge/SecuritySetting/Index.jsx
+++ b/src/forge/SecuritySetting/Index.jsx
@ -57,16 +57,16 @@ function Index(props){
            </div>
            <ul className="securityUl ul-border-buttom">
              <li>个人信息</li>
-              <li className={pathname.indexOf("/settings/profile")>-1 ?"active":""}><Link to={`/settings/profile`}><i className="iconfont icon-gerenziliao mr5 font-14"></i>基本资料</Link></li>
+              <li className={pathname.indexOf("/settings/profile")>-1 ?"active":""}><Link to={`/settings/profile`}><i className="iconfont icon-gerenziliao mr5 font-14"></i><span className="text-shodow-bold">基本资料</span></Link></li>
            </ul>
            <ul className="securityUl ul-border-buttom">
              <li>消息通知</li>
-              <li className={pathname.indexOf("/settings/notice/myNotice")>-1 || pathname.indexOf("/settings/notice/privateLetter")>-1 ?"active":""}><Link to={`/settings/notice/myNotice`}><i className="iconfont icon-wodetongzhi"></i><span>我的通知</span></Link></li>
-              <li className={pathname.indexOf("/settings/notice/noticeManager")>-1 ?"active":""}><Link to={`/settings/notice/noticeManager`}><i className="iconfont icon-tongzhiguanli"></i><span>通知管理</span></Link></li>
+              <li className={pathname.indexOf("/settings/notice/myNotice")>-1 || pathname.indexOf("/settings/notice/privateLetter")>-1 ?"active":""}><Link to={`/settings/notice/myNotice`}><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">
              <li>安全设置</li>
-              <li className={pathname.indexOf("/settings/SSH")>-1 ?"active":""}><Link to={`/settings/SSH`}><i className="iconfont icon-xuanzhongssh_icon mr5 font-14"></i><span>SSH密钥</span></Link></li>
+              <li className={pathname.indexOf("/settings/SSH")>-1 ?"active":""}><Link to={`/settings/SSH`}><i className="iconfont icon-xuanzhongssh_icon mr5 font-14"></i><span className="text-shodow-bold">SSH密钥</span></Link></li>
            </ul>
          </div>
          <LongWidth>
--- a/src/forge/SecuritySetting/Index.scss
+++ b/src/forge/SecuritySetting/Index.scss
@ -55,8 +55,9 @@
          }
          &.active a{
            color: #333;
-            span{
-              font-weight: 600;
+            .text-shodow-bold{
+              font-weight: 400;
+              text-shadow: 0.5px 0 #333;
            }
          }
          &.active::before{
@ -88,16 +89,23 @@
      margin-bottom: 15px;
      justify-content: space-between;
      border-bottom: 1px solid #EEEEEE;
-      &>span{
+      &>.text-shadow07{
        font-size: 18px;
-        font-weight: 600;
+        font-weight: 400;
        color: #333333;
+        text-shadow: 0.5px 0 #333;
      }
-      & .add-ssh-but{
+      &>.add-SSH-title{
+        font-size: 16px;
+        font-weight: 400;
+        color: #333333;
+        text-shadow: 0.5px 0 #333;
+      }
+      & .but25{
        padding:0 12px;
-        margin-bottom: 5px;
      }
    }
+    
    .ant-list-item{
      padding:20px;
      border-bottom: 1px solid #eee!important;
@ -129,7 +137,7 @@
    .questionLink{
      padding:15px 20px;
      a{
-        color: #4B7AFF;
+        color: #466AFF;
        &:hover{
          text-decoration: underline;
        }
@ -167,4 +175,23 @@
      flex:1;
    }
  }
+}
+.but25{
+  margin-bottom: 5px;
+  background-color: #466AFF;
+  color: #fff;
+  border-color: #466AFF;
+  &:hover{
+      opacity: 0.8;
+      background-color: #466AFF;
+      border-color: #466AFF;
+  }
+  &:active{
+      opacity: 1;
+      background-color: #466AFF;
+      border-color: #466AFF;
+  }
+}
+.blue-Purple{
+  color: #466AFF !important;
 }
--- a/src/forge/SecuritySetting/notice/manager/Index.jsx
+++ b/src/forge/SecuritySetting/notice/manager/Index.jsx
@ -8,7 +8,7 @@ function NoticeManager(props){
  return(
    <div className="notice01">
      <div className="sshHead">
-        <span>通知管理</span>
+        <span className="text-shadow07">通知管理</span>
      </div>
      <div>
        <span className="notice-manager-tip">您可以通过通知管理来选择接受通知的方式</span>
--- a/src/forge/SecuritySetting/notice/manager/Index.scss
+++ b/src/forge/SecuritySetting/notice/manager/Index.scss
@ -24,8 +24,6 @@
    .manager-cont-title{
        width: 320px;
    }
-
-    
 }

 .notice01{
@ -57,21 +55,33 @@
        background-color:#466AFF;
    }

-    // .ant-radio-checked .ant-radio-inner {
-    //     border-color: #466AFF;
-    // }
-
    .but25{
        background-color: #466AFF;
        color: #fff;
        border-color: #466AFF;
        &:hover{
-            background-color: #4a76f8;
-            border-color: #4a76f8;
+            opacity: 0.8;
+            background-color: #466AFF;
+            border-color: #466AFF;
        }
        &:active{
+            opacity: 1;
            background-color: #466AFF;
            border-color: #466AFF;
        }
    }
+
+    ::-webkit-scrollbar {
+        width: 5px; /*对垂直流动条有效*/
+    }
+    /*定义滑块颜色、内阴影及圆角*/
+    ::-webkit-scrollbar-thumb {
+        border-radius: 6px;
+        box-shadow: inset 0 0 6px #FFF;
+        background-color: #D4D4D4;
+    }
+    ::-webkit-scrollbar-track {
+        box-shadow: inset 0 0 6px #fff;
+        background-color: #FFF;
+    }
 }
--- a/src/forge/SecuritySetting/notice/myNotice/Index.jsx
+++ b/src/forge/SecuritySetting/notice/myNotice/Index.jsx
@ -3,23 +3,51 @@ import { Badge, Button, Checkbox, Menu } from 'antd';
 import './Index.scss';
 import '../manager/Index.scss'
 import DelModal from '../../../Wiki/components/ModalFun';
+import Axios from 'axios';
+import { Link } from 'react-router-dom';

 function MyNotice(props) {

-  const [noticeType, setNoticeType] = useState("1");
-  const [selectedNum, setSelectedNum] = React.useState(0);
+  const [noticeType, setNoticeType] = useState("0");
+  const [selectedNum, setSelectedNum] = useState(0);
  const [isBatchDelete, setIsBatchDelete] = useState(false);
+  const [notice_unread_count, setNotice_unread_count] = useState();//未读系统通知数量
+  const [letter_unread_count, setLetter_unread_count] = useState(0);//未读私信数量
+  const [at_unread_count, setAt_unread_count] = useState();//未读@我数量
+  const [message_list, setMessage_list] = useState([]);
+  const [onlyUnread,setOnlyUnread] = useState();
+
+  useEffect(() => {
+    const params = {
+      type:noticeType==="0"?"notification":noticeType==="2"?"atme":"",
+      status:onlyUnread?onlyUnread:"",
+      limit: 20,
+      page: 0,
+    }
+    getMessageList(params);
+  }, [noticeType,onlyUnread])
+
+  function getMessageList(params) {
+    Axios.get(`/users/yystopf/messages.json`, {
+      params: params,
+    }).then((response) => {
+      setNotice_unread_count(response.data.unread_notification);
+      setAt_unread_count(response.data.unread_atme);
+      setMessage_list(response.data.messages);
+    })
+  }

  function handleClick(e) {
    setNoticeType(e.key);
    if (e.key != "2") {
      setIsBatchDelete(false);
    }
+    
  }

  function onChange() {
    var selectedNum = 0;
-    const checkbox = document.getElementsByClassName("checkbox");
+    const checkbox = document.getElementsByClassName("atme-checkbox");
    for (var i = 0; i < checkbox.length; i++) {
      checkbox[i].checked ? selectedNum++ : "";
    }
@ -29,7 +57,7 @@ function MyNotice(props) {


  function onCheckAllChange(e) {
-    const checkbox = document.getElementsByClassName("checkbox");
+    const checkbox = document.getElementsByClassName("atme-checkbox");
    for (var i = 0; i < checkbox.length; i++) {
      checkbox[i].checked = e.target.checked;
    }
@ -51,18 +79,16 @@ function MyNotice(props) {
    <div className="notice01">
      <div className="sshHead">
        <Menu mode="horizontal" selectedKeys={noticeType} onClick={handleClick}>
-          <Menu.Item key="0"><Badge count={5}>系统通知</Badge></Menu.Item>
-          <Menu.Item key="1" id="item"><Badge count={10}>私信</Badge></Menu.Item>
-          <Menu.Item key="2"><Badge count={99}>@我</Badge></Menu.Item>
+          <Menu.Item key="0"><Badge count={notice_unread_count} title="">系统通知</Badge></Menu.Item>
+          <Menu.Item key="1" id="item-private"><Badge count={0}>私信</Badge></Menu.Item>
+          <Menu.Item key="2"><Badge count={at_unread_count}>@我</Badge></Menu.Item>
        </Menu>
-        <button>所有{noticeType==="0"?"系统通知":noticeType==="1"?"私信":"@我"}一键已读</button>
+        <button>所有{noticeType === "0" ? "系统通知" : noticeType === "1" ? "私信" : "@我"}一键已读</button>
      </div>

      <div className={isBatchDelete ? "invisible " : "visible"}>
        <div className="vertical-center-style">
-          {/* <input type="checkbox"></input>&nbsp;
-          仅看未读{noticeType === "1" ? "私信" : "消息"}（12） */}
-          <Checkbox >仅看未读{noticeType === "1" ? "私信" : "消息"}（12）</Checkbox>
+          <Checkbox onChange={(e)=>e.target.checked?setOnlyUnread(1):setOnlyUnread(2)}>仅看未读{noticeType === "1" ? `私信（12）` : noticeType==="0"?`消息（${notice_unread_count}）`:`消息（${at_unread_count}）`}</Checkbox>
        </div>
        {noticeType === "2" ? <button onClick={() => { setIsBatchDelete(true); }}>批量删除</button> : ""}
      </div>
@ -73,99 +99,49 @@ function MyNotice(props) {
          全选&nbsp;&nbsp;&nbsp;已选择&nbsp;<span id="numberSpan">{selectedNum}</span>&nbsp;项
        </div>
        <div>
-          <button onClick={() => { setIsBatchDelete(false); }}>取消</button>&nbsp;&nbsp;&nbsp;&nbsp;
-          <button className="deleteBut" onClick={selectedNum === 0 ? "" : deleteNotice}>删除</button>
+          <button onClick={() => { setIsBatchDelete(false); setSelectedNum(0); }}>取消</button>&nbsp;&nbsp;&nbsp;&nbsp;
+          <button className="deleteBut" onClick={selectedNum > 0 ? deleteNotice : () => { }}>删除</button>
        </div>
      </div>

-      {noticeType === "1" ?
-        <div className="mynotice-content vertical-center-style" onClick={() => props.history.push('/settings/notice/privateLetter')}>
-          <Badge count={5}><img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" /></Badge>
-          <div className="private-letter-right">
-            <div>
-              <span>蒋宇航</span>
-              <span className="timeSpan">4分钟前</span>
-              <a onClick={deleteNotice}>删除</a>
+      {message_list.map(item => {
+        // 系统消息
+        // 消息类别
+        // const iconName = item.source.startsWith("Issue")?"icon-yixiuicon1":item.source.startsWith("Project")?"icon-daimakuicon1":item.source.startsWith("Project")?"icon-daimakuicon1":
+        if(noticeType ==="0" && item.type === "notification"){
+          return(
+            <div className="mynotice-content vertical-center-style" key={item.id}>
+              <div className="mynotice-cont vertical-center-style">
+                {item.status === 1? <Badge color="#FA2020" />:<span className="system-notice-blank"></span>}
+                <i className="iconfont icon-yixiuicon1"></i>
+                <span className="sysNotice-length highlightSpan" onClick={()=>window.location.href=(`${item.notification_url}`)}>{item.content}</span>
+              </div>
+              <div className="mynotice-cont vertical-center-style float-left-little">
+                <span className="timeSpan">{item.time_ago}</span>
+                <a>标记为已读</a>
+              </div>
            </div>
-            <div>
-              <span className="highlightSpan letter-length-limit">最好的OpenStack控制台，对标OpenStack社区Horizon项目,最好的OpenStack控制台，对标OpenStack社区Horizon项目，在易用性、页面性能等方面进行深度优化，提供简单控制台。</span>
+          )
+        } else if(noticeType ==="2" && item.type === "atme"){
+          //@我
+          return(
+            <div className="mynotice-content vertical-center-style" key={item.id}>
+              <div className="mynotice-cont vertical-center-style">
+                <input type="checkbox" className={isBatchDelete ? 'atme-checkbox' : 'invisible'} onChange={onChange} />
+                <img src={`https://testforgeplus.trustie.net//${item.sender.image_url}`} className="currentImg" />
+                <span className="at-length highlightSpan">
+                  {item.status === 1? <Badge color="#FA2020" className="at-badge"/>:<span className="system-notice-blank"></span>}
+                  {item.content}
+                </span>
+              </div>
+              <div className="mynotice-cont vertical-center-style">
+                <span className="timeSpan">{item.time_ago}</span>
+                <a>标记为已读</a>&nbsp;&nbsp;&nbsp;<a className="float-left-little" onClick={deleteNotice}>删除</a>
+              </div>
            </div>
-          </div>
-        </div>
-        : <div className="mynotice-content vertical-center-style">
-          <div className="mynotice-cont vertical-center-style">
-            <input type="checkbox" className={isBatchDelete ? 'checkbox' : 'invisible'} onChange={onChange} />
-            {/* 系统通知 */}
-            {noticeType === "0" ? <Badge color="#FA2020" /> : ""}
-            {noticeType === "0" ? <i className="iconfont icon-yixiuicon1"></i> : ""}
-            {noticeType === "2" ? <img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" /> : ""}
-            {noticeType === "2" ? <Badge color="#FA2020" /> : ""}
-            <span className={noticeType==="0"?"sysNotice-length highlightSpan":"at-length highlightSpan"}>蒋宇航在<span className="boldSpan">Gitlink/Gitlink</span>新建易修:<span className="boldSpan">【Bug】链接地址错误</span></span>
-          </div>
-          <div className="mynotice-cont vertical-center-style">
-            <span className="timeSpan">4分钟前</span>
-            <a>标记为已读</a>&nbsp;&nbsp;&nbsp;{noticeType === "0" ? "" : <a className="float-left-little" onClick={deleteNotice}>删除</a>}
-          </div>
-        </div>}
-
-      {noticeType === "1" ?
-        <div className="mynotice-content vertical-center-style">
-          <Badge count={5}><img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" /></Badge>
-          <div className="private-letter-right">
-            <div>
-              <span>段甲生</span>
-              <span className="timeSpan">5分钟前</span>
-              <a onClick={deleteNotice}>删除</a>
-            </div>
-            <div>
-              <span className="highlightSpan letter-length-limit">gitlink平台 react 前端代码</span>
-            </div>
-          </div>
-        </div>
-        : <div className="mynotice-content vertical-center-style">
-          <div className="mynotice-cont vertical-center-style">
-            <input type="checkbox" className={isBatchDelete ? 'checkbox' : 'invisible'} onChange={onChange} />
-            {/* 系统通知 */}
-            {noticeType === "0" ? <Badge color="#FA2020" /> : ""}
-            {noticeType === "0" ? <i className="iconfont icon-hebingqingqiuicon"></i> : ""}
-            {noticeType === "2" ? <img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" /> : ""}
-            {noticeType === "2" ? <Badge color="#FA2020" /> : ""}
-            <span className={noticeType==="0"?"sysNotice-length highlightSpan":"at-length highlightSpan"}>蒋宇航在<span className="boldSpan">蒋宇航/软件工程课程协同开发案例</span>指派给你一个合并请求：<span className="boldSpan">请进行合并请求test</span>请进行合并请求test请进行合并请求test请进行合并请求test请进行合并请求test请进行合并请求test</span>
-          </div>
-          <div className="mynotice-cont vertical-center-style">
-            <span className="timeSpan">10分钟前</span>
-            <a>标记为已读</a>&nbsp;&nbsp;&nbsp;{noticeType === "0" ? "" : <a className="float-left-little" onClick={deleteNotice}>删除</a>}
-          </div>
-        </div>}
-
-      {noticeType === "1" ?
-        <div className="mynotice-content vertical-center-style">
-          <Badge count={5}><img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" /></Badge>
-          <div className="private-letter-right">
-            <div>
-              <span>巴拉迪维</span>
-              <span className="timeSpan">7分钟前</span>
-              <a onClick={deleteNotice}>删除</a>
-            </div>
-            <div>
-              <span className="highlightSpan letter-length-limit">构建卷积神经网络，训练模型，预测模型效果。</span>
-            </div>
-          </div>
-        </div>
-        : <div className="mynotice-content vertical-center-style">
-          <div className="mynotice-cont vertical-center-style">
-            <input type="checkbox" className={isBatchDelete ? 'checkbox' : 'invisible'} onChange={onChange} />
-            {/* 系统通知 */}
-            {noticeType === "0" ? <span>&nbsp;&nbsp;&nbsp;</span> : ""}
-            {noticeType === "0" ? <i className="iconfont icon-lichengbeiicon"></i> : ""}
-            {noticeType === "2" ? <img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" /> : ""}
-            <span className={noticeType==="0"?"sysNotice-length highlightSpan":"at-length highlightSpan"}>你关注的仓库<span className="boldSpan">王涛/协同案例分析</span>已被删除</span>
-          </div>
-          <div className="mynotice-cont vertical-center-style">
-            <span className="timeSpan">1小时前</span>
-            <a>标记为已读</a>&nbsp;&nbsp;&nbsp;{noticeType === "0" ? "" : <a className="float-left-little" onClick={deleteNotice}>删除</a>}
-          </div>
-        </div>}
+          )
+        }
+      })}
    </div>
  )
 }
--- a/src/forge/SecuritySetting/notice/myNotice/Index.scss
+++ b/src/forge/SecuritySetting/notice/myNotice/Index.scss
@ -14,8 +14,8 @@
    position: relative;
  }

-  #item{
-    margin: 0 34px !important;
+  #item-private{
+    margin: 0 24px 0 34px !important;
  }

  li.ant-menu-item, .ant-menu-horizontal > .ant-menu-item {
@ -24,12 +24,15 @@

  .ant-menu-item-selected{
    color: #333333 !important;
-    font-weight: 600;
+    font-weight: 400;
+    text-shadow: 0.5px 0 #333;
    border-bottom: 2px solid #2A61FF !important;
  }

  .ant-badge-count, .ant-badge-dot, .ant-badge .ant-scroll-number-custom-component {
-    right: -4px;
+    right: -6px;
+    -webkit-box-shadow: 0 0 0 0;
+    box-shadow: 0 0 0 0;
  }
  .ant-badge-multiple-words {
    padding: 0 0px;
@ -78,6 +81,7 @@ button:active {
  justify-content: space-between;
  padding: 15px 0 15px 10px;
  border-bottom: 1px solid #EEEEEE;
+  color: #333333;

  &:hover{
    background: #F3F4F6;
@ -102,17 +106,44 @@ button:active {
  }

  .boldSpan{
-    font-weight: 600;
+    font-weight: 400;
+    text-shadow: 0.5px 0 0 #333;
    margin: 0 8px;
  }
-
-  img{
+  & .currentImg{
    width: 40px;
-    // margin-right: 10px;
+    height: 40px;
+    margin-left: 0px;
+  }
+
+  & .private-letter-img + .ant-badge-count{
+    top: 2px;
+    right: 5px;
+    height: 18px;
+    min-width: 18px;
+    line-height: 18px;
+    padding: 0 0;
  }

  .mynotice-cont{
    padding:0;
+
+    & .atme-checkbox{
+      margin-right: 10px;
+    }
+  }
+
+  & .ant-badge-count, .ant-badge-dot, .ant-badge .ant-scroll-number-custom-component {
+    -webkit-box-shadow: 0 0 0 0;
+    box-shadow: 0 0 0 0;
+    top: 3px;
+    right: 4px;
+    min-width: 8px;
+    height: 8px;
+  }
+
+  & .system-notice-blank{
+    margin-right: 14px;
  }
 }

@ -130,22 +161,15 @@ button:active {
  height: 30px;
  padding: 0 10px;
  color: #333333;
+  margin-bottom: 5px;
  button{
    padding:0px 12px;
  }
 }

-.ant-badge-count {
-  min-width: 16px;
-  height: 16px;
-  padding: 0 0;
-  font-size: 8px;
-  line-height: 16px;
-}
-
 .private-letter-right {
  flex: auto;
-  margin: 0px 10px;
+  margin: 0px 10px 0 16px;
  & div{
    display: flex;
    justify-content: space-between;
@ -172,6 +196,7 @@ button:active {

 .at-length{
  max-width: 48rem;
+  margin-left: 18px;
 }
 #numberSpan{
  color: #466AFF;
--- a/src/forge/SecuritySetting/notice/privateLetter/Index.jsx
+++ b/src/forge/SecuritySetting/notice/privateLetter/Index.jsx
@ -2,6 +2,7 @@ import React, { useState, useEffect } from 'react';
 import './Index.scss'
 import '../manager/Index.scss'
 import { Button, Input, Icon, Badge } from 'antd';
+import { Link } from 'react-router-dom';

 function PrivateLetter(props){

@ -15,12 +16,12 @@ function PrivateLetter(props){
    <div className="private-letter notice01">
      <div className="pl-content">
        <div className="pl-name vertical-center-style">
-          <a href="/settings/notice/myNotice"><i className="iconfont icon-zuojiantou"></i></a>
+          <Link to="/settings/notice/myNotice"><i className="iconfont icon-zuojiantou"></i></Link>
          <span>蒋宇航</span>
        </div>
        <div className="plcontent-list">
          <div className="vertical-center-style plclo">
-            <img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
+            <img src="https://testforgeplus.trustie.net//system/lets/letter_avatars/2/D/208_124_118/120.png" className="currentImg"/>
            <div className="message-bubble mb-other"></div>
            <div className="notice-content vertical-center-style">
              嗨在吗？哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
@ -30,7 +31,7 @@ function PrivateLetter(props){
          </div>

          <div className="notice-my vertical-center-style plclo">
-            <img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
+            <img src="https://testforgeplus.trustie.net//system/lets/letter_avatars/2/D/208_124_118/120.png" className="currentImg"/>
            <div className="message-bubble"></div>
            <div className="notice-content vertical-center-style">
              哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
@ -42,7 +43,7 @@ function PrivateLetter(props){
        </div>
        <div className="private-letter-present">
          <div>
-            <img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
+            <img src="https://testforgeplus.trustie.net//system/lets/letter_avatars/2/D/208_124_118/120.png" className="currentImg"/>
            <TextArea className="private-letter-cont" rows="2" />
          </div>
          <div className="presentNotice">
@ -62,7 +63,124 @@ function PrivateLetter(props){
        </div>
        <div className="list-scroll">
          <div className="list-scroll-content vertical-center-style">
-            <Badge count={5}><img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" /></Badge>
+            <Badge count={5}><img src="https://testforgeplus.trustie.net//system/lets/letter_avatars/2/D/208_124_118/120.png" className="currentImg private-letter-img"/></Badge>
+            <div className="private-letter-list-content-right">
+              <div className="ls-cont vertical-center-style">
+                <span>蒋宇航</span>
+                <span className="private-letter-list-content-right-content-top-timeSpan">4分钟前</span>
+              </div>
+              <div className="ls-cont vertical-center-style">
+                <span className="ls-content-span">最好的OpenStack控制台，对标OpenStack社区Horizon项目，在易用性、页面性能等方面进行深度优化，提供简单控制台。</span>
+                <a onClick={deleteNotice}>删除</a>
+              </div>
+            </div>
+          </div>
+          <div className="list-scroll-content vertical-center-style">
+            <Badge count={5}><img src="https://testforgeplus.trustie.net//system/lets/letter_avatars/2/D/208_124_118/120.png" className="currentImg private-letter-img"/></Badge>
+            <div className="private-letter-list-content-right">
+              <div className="ls-cont vertical-center-style">
+                <span>蒋宇航</span>
+                <span className="private-letter-list-content-right-content-top-timeSpan">4分钟前</span>
+              </div>
+              <div className="ls-cont vertical-center-style">
+                <span className="ls-content-span">最好的OpenStack控制台，对标OpenStack社区Horizon项目，在易用性、页面性能等方面进行深度优化，提供简单控制台。</span>
+                <a onClick={deleteNotice}>删除</a>
+              </div>
+            </div>
+          </div>
+          <div className="list-scroll-content vertical-center-style">
+            <Badge count={5}><img src="https://testforgeplus.trustie.net//system/lets/letter_avatars/2/D/208_124_118/120.png" className="currentImg private-letter-img"/></Badge>
+            <div className="private-letter-list-content-right">
+              <div className="ls-cont vertical-center-style">
+                <span>蒋宇航</span>
+                <span className="private-letter-list-content-right-content-top-timeSpan">4分钟前</span>
+              </div>
+              <div className="ls-cont vertical-center-style">
+                <span className="ls-content-span">最好的OpenStack控制台，对标OpenStack社区Horizon项目，在易用性、页面性能等方面进行深度优化，提供简单控制台。</span>
+                <a onClick={deleteNotice}>删除</a>
+              </div>
+            </div>
+          </div>
+          <div className="list-scroll-content vertical-center-style">
+            <Badge count={5}><img src="https://testforgeplus.trustie.net//system/lets/letter_avatars/2/D/208_124_118/120.png" className="currentImg private-letter-img"/></Badge>
+            <div className="private-letter-list-content-right">
+              <div className="ls-cont vertical-center-style">
+                <span>蒋宇航</span>
+                <span className="private-letter-list-content-right-content-top-timeSpan">4分钟前</span>
+              </div>
+              <div className="ls-cont vertical-center-style">
+                <span className="ls-content-span">最好的OpenStack控制台，对标OpenStack社区Horizon项目，在易用性、页面性能等方面进行深度优化，提供简单控制台。</span>
+                <a onClick={deleteNotice}>删除</a>
+              </div>
+            </div>
+          </div>
+          <div className="list-scroll-content vertical-center-style">
+            <Badge count={5}><img src="https://testforgeplus.trustie.net//system/lets/letter_avatars/2/D/208_124_118/120.png" className="currentImg private-letter-img"/></Badge>
+            <div className="private-letter-list-content-right">
+              <div className="ls-cont vertical-center-style">
+                <span>蒋宇航</span>
+                <span className="private-letter-list-content-right-content-top-timeSpan">4分钟前</span>
+              </div>
+              <div className="ls-cont vertical-center-style">
+                <span className="ls-content-span">最好的OpenStack控制台，对标OpenStack社区Horizon项目，在易用性、页面性能等方面进行深度优化，提供简单控制台。</span>
+                <a onClick={deleteNotice}>删除</a>
+              </div>
+            </div>
+          </div>
+          <div className="list-scroll-content vertical-center-style">
+            <Badge count={5}><img src="https://testforgeplus.trustie.net//system/lets/letter_avatars/2/D/208_124_118/120.png" className="currentImg private-letter-img"/></Badge>
+            <div className="private-letter-list-content-right">
+              <div className="ls-cont vertical-center-style">
+                <span>蒋宇航</span>
+                <span className="private-letter-list-content-right-content-top-timeSpan">4分钟前</span>
+              </div>
+              <div className="ls-cont vertical-center-style">
+                <span className="ls-content-span">最好的OpenStack控制台，对标OpenStack社区Horizon项目，在易用性、页面性能等方面进行深度优化，提供简单控制台。</span>
+                <a onClick={deleteNotice}>删除</a>
+              </div>
+            </div>
+          </div>
+          <div className="list-scroll-content vertical-center-style">
+            <Badge count={5}><img src="https://testforgeplus.trustie.net//system/lets/letter_avatars/2/D/208_124_118/120.png" className="currentImg private-letter-img"/></Badge>
+            <div className="private-letter-list-content-right">
+              <div className="ls-cont vertical-center-style">
+                <span>蒋宇航</span>
+                <span className="private-letter-list-content-right-content-top-timeSpan">4分钟前</span>
+              </div>
+              <div className="ls-cont vertical-center-style">
+                <span className="ls-content-span">最好的OpenStack控制台，对标OpenStack社区Horizon项目，在易用性、页面性能等方面进行深度优化，提供简单控制台。</span>
+                <a onClick={deleteNotice}>删除</a>
+              </div>
+            </div>
+          </div>
+          <div className="list-scroll-content vertical-center-style">
+            <Badge count={5}><img src="https://testforgeplus.trustie.net//system/lets/letter_avatars/2/D/208_124_118/120.png" className="currentImg private-letter-img"/></Badge>
+            <div className="private-letter-list-content-right">
+              <div className="ls-cont vertical-center-style">
+                <span>蒋宇航</span>
+                <span className="private-letter-list-content-right-content-top-timeSpan">4分钟前</span>
+              </div>
+              <div className="ls-cont vertical-center-style">
+                <span className="ls-content-span">最好的OpenStack控制台，对标OpenStack社区Horizon项目，在易用性、页面性能等方面进行深度优化，提供简单控制台。</span>
+                <a onClick={deleteNotice}>删除</a>
+              </div>
+            </div>
+          </div>
+          <div className="list-scroll-content vertical-center-style">
+            <Badge count={5}><img src="https://testforgeplus.trustie.net//system/lets/letter_avatars/2/D/208_124_118/120.png" className="currentImg private-letter-img"/></Badge>
+            <div className="private-letter-list-content-right">
+              <div className="ls-cont vertical-center-style">
+                <span>蒋宇航</span>
+                <span className="private-letter-list-content-right-content-top-timeSpan">4分钟前</span>
+              </div>
+              <div className="ls-cont vertical-center-style">
+                <span className="ls-content-span">最好的OpenStack控制台，对标OpenStack社区Horizon项目，在易用性、页面性能等方面进行深度优化，提供简单控制台。</span>
+                <a onClick={deleteNotice}>删除</a>
+              </div>
+            </div>
+          </div>
+          <div className="list-scroll-content vertical-center-style">
+            <Badge count={5}><img src="https://testforgeplus.trustie.net//system/lets/letter_avatars/2/D/208_124_118/120.png" className="currentImg private-letter-img"/></Badge>
            <div className="private-letter-list-content-right">
              <div className="ls-cont vertical-center-style">
                <span>蒋宇航</span>
--- a/src/forge/SecuritySetting/notice/privateLetter/Index.scss
+++ b/src/forge/SecuritySetting/notice/privateLetter/Index.scss
@ -2,18 +2,28 @@
  border-radius: 4px 4px 0px 0px;
  border: 1px solid rgba(151, 151, 151, 0.24);
  display: flex;
+
+  .currentImg{
+    width: 40px;
+    height: 40px;
+    margin-left: 0px;
+  }
+  & .private-letter-img + .ant-badge-count{
+    top: 2px;
+    right: 5px;
+  }
 }

 .pl-content{
  flex: auto;
  .pl-name{
    height: 3rem;
-    // padding-left: 26px;
    border-bottom: 1px solid #EEEEEE;

    &>a{
      position: relative;
      left: 26px;
+      color:#999999;
    }
    span{
      font-size: 16px;
@ -25,7 +35,7 @@
  }
  .plcontent-list{
    height: 24rem;
-    padding:25px;
+    padding:20px;
    overflow-y: scroll;

    .plclo{
@ -85,7 +95,7 @@
    }
  }
  .private-letter-present{
-    padding:20px 28px;
+    padding:20px 20px;
    & div{
      display: flex;
      align-items: center;
@ -95,21 +105,18 @@
    .private-letter-cont-mt25{
      margin-top: 8px;
      padding:0 22px;
-      // background-color: #2A61FF;
-      // color: #fff;
-      // border-color: #2A61FF;
-      // &:hover,&:focus,&:active{
-      //   background-color: #4a76f8;
-      //   border-color: #4a76f8;
-      // }
    }
    
    .private-letter-cont, .private-letter-cont .ant-input-suffix{
-      background-color: #F4F4F4 !important;
+      background-color: #fafafa !important;
      margin-left: 17px;
    }
-    .private-letter-cont:hover,.private-letter-cont:focus {
-      background-color: #F4F4F4 !important;
+
+    .private-letter-cont{
+      resize:none;
+      &:hover,&:focus{
+        background-color: #fafafa !important;
+      }
    }
  }
 }
@ -131,6 +138,10 @@
    & .ant-btn{
      padding: 0;
    }
+
+    // & .ant-input:hover{
+    //   border: 1px solid red !important;
+    // }
  }

  .list-scroll{
@ -159,7 +170,7 @@
  .ls-cont{
    width: 13rem;
    // flex: auto;
-    margin-left: 6px;
+    margin-left: 15px;
    justify-content: space-between;
    & .ls-content-span{
      max-width: 11rem;
--- a/src/forge/SecuritySetting/sub/New.jsx
+++ b/src/forge/SecuritySetting/sub/New.jsx
@ -34,7 +34,7 @@ function New({ form , showNotification , history }) {
  return(
    <div>
      <div className="sshHead">
-        <span><Link to={`/settings/SSH`} className="color-blue">SSH密钥</Link><i className="iconfont icon-youjiantou ml5 mr5 font-12"></i>添加SSH密钥</span>
+        <span className="add-SSH-title"><Link to={`/settings/SSH`} className="blue-Purple">SSH密钥</Link><i className="iconfont icon-youjiantou ml5 mr5 font-12"></i>添加SSH密钥</span>
      </div>
      <Form className="sshForm">
        <Form.Item label="标题" validateStatus={msg && msg.status === 10001 ? "error":undefined} help={msg && msg.status === 10001 ? msg.message:undefined}>
@ -51,7 +51,7 @@ function New({ form , showNotification , history }) {
            <TextArea placeholder="支持以'ssh-rsa','ssh-dss','ssh-ed25519','ecdsa-sha2-nistp256','ecdsa-sha2-nistp384','ecdsa-sha2-nistp521'开头" autoSize={{ minRows: 6, maxRows: 6 }}/>
          )}
        </Form.Item>
-        <Button type="primary" style={{width:"100px"}} onClick={submit}>确定</Button>
+        <button style={{width:"100px"}} onClick={submit} className="but25">确定</button>
      </Form>
    </div>
  )
--- a/src/forge/SecuritySetting/sub/SSH.jsx
+++ b/src/forge/SecuritySetting/sub/SSH.jsx
@ -55,8 +55,8 @@ function SSH(props) {
      <DeleteBox visible={visible} onCancel={()=>setVisible(false)} onSuccess={onSuccess}/>
      <SSHDetail visible={visibleDesc} onCancel={()=>setVisibleDesc(false)} desc={content}/>
      <div className="sshHead">
-        <span>SSH密钥</span>
-        <Button type="primary" size="large" onClick={()=>props.history.push('/settings/SSH/new')} className="add-ssh-but">添加SSH密钥</Button>
+        <span className="text-shadow07">SSH密钥</span>
+        <button type="primary" size="large" onClick={()=>props.history.push('/settings/SSH/new')} className="but25">添加SSH密钥</button>
      </div>
      {
        list && list.length > 0 &&