Merge pull request '通知中心' (#11) from durian/forgeplus-react:feature_notification_xiesi into feature_notification

2021-09-09 14:36:52 +08:00 · 2021-09-09 14:36:52 +08:00 · 495e11fb4c
parent 22b5859b62 c477fbe89a
commit 495e11fb4c
16 changed files with 695 additions and 170 deletions
--- a/src/forge/Head/Header.js
+++ b/src/forge/Head/Header.js
@ -13,6 +13,8 @@ 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 这部分脚本从公共脚本中直接调用
 const { Search } = Input;
@ -47,6 +49,7 @@ class NewHeader extends Component {
      settings: null,
      visiblemyss: false,
      openSearch:false,
+      noticeType:"0",
    }
  }
  componentDidMount() {
@ -256,20 +259,38 @@ class NewHeader extends Component {
    )
  }

+  click = (e) =>{
+    this.setState({
+      noticeType: e.key,
+    })
+  }
+
  messageList=()=>{
+    let { noticeType } = this.state;
    return(
      <div className="messageHoverDiv">
-        <Menu mode="horizontal">
-          <Menu.Item key="0"><Badge count={5}>系统通知</Badge></Menu.Item>
-          <Menu.Item key="1"><Badge count={10}>私信</Badge></Menu.Item>
-          <Menu.Item key="2"><Badge count={99}>@我</Badge></Menu.Item>
-        </Menu>
-        <div className="content">
-          aaa
+        <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 = "buttom">
+        <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>标记为已读</a>
+          <a>所有{noticeType==="0"?"系统消息":noticeType==="1"?"私信":"@我"}一键已读</a>
        </div>
      </div>
    )
@ -457,14 +478,14 @@ 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)}>
-                    <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" }}>
-                      </span>
-                    </a>
-                  </Popover>
-              :""
+              <Popover placement={`bottomRight`} content={this.messageList(settings && settings.personal)}>
+                <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" }}>
+                  </span>
+                </a>
+              </Popover>
+              : ""
            }
          </div>
          {!user || (user && !user.login)  ?
--- a/src/forge/Head/NoticeContent.jsx
+++ b/src/forge/Head/NoticeContent.jsx
@ -0,0 +1,19 @@
+import React, { useEffect, useState } from 'react';
+import { Badge} from 'antd';
+import './header.scss';
+
+function NoticeContent(props) {
+  const noticeType = props.noticeType;
+  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>
+    </div>
+  )
+}
+export default NoticeContent;
--- a/src/forge/Head/header.scss
+++ b/src/forge/Head/header.scss
@ -27,21 +27,6 @@
  margin-left: 15px;
 }

-.messageHoverDiv{
-  padding: 20px 17px 13px; 
-  width: 386px;
-  min-height: 294px;
-  background: #FFFFFF;
-  box-shadow: 0px 4px 8px 2px rgba(212,212,212,0.5);
-  border-radius: 4px;
-  border: 1px solid red;
-
-  .buttom{
-    display: flex;
-    justify-content: space-between;
-  }
-}
-
 .currentMenu{
  width: 120px;
  text-align: center;
@ -142,4 +127,80 @@
    width: 110px;
    text-align: right;
  }
-}
+}
+
+//popover小尖尖
+.ant-popover-arrow{
+  display: none;
+}
+
+//popover框
+.ant-popover-inner-content {
+  width: 386px;
+  height: 446px;
+  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;
+}
+
+.hoverNotice-head .ant-badge{
+  font-size: 14px !important;
+}
+
+.hoverNotice-body{
+  height: 342px;
+  overflow-y: scroll;
+}
+
+.hoverNotice-buttom{
+  display: flex;
+  justify-content: space-between;
+  margin-top: 12px;
+  
+  a{
+    color: #466AFF;
+  }
+}
+
+.noticeCont{
+  display: flex;
+  padding:12px 10px 10px 0;
+
+  i{
+    font-size: 16px !important;
+    margin-right: 5px;
+  }
+
+  .text{
+    position: relative;
+    max-height: 48px;
+    color:#333333;
+    .boldSpan{
+      font-weight: 600;
+    }
+
+    .timeSpan{
+      position: absolute;
+      right: 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;
+}
--- a/src/forge/SecuritySetting/Index.jsx
+++ b/src/forge/SecuritySetting/Index.jsx
@ -36,6 +36,12 @@ const SSHIndex = Loadable({
  loader: () => import("./sub/SSH"),
  loading: Loading,
 });
+
+const PrivateLetter = Loadable({
+  loader: () => import("./notice/privateLetter/Index"),
+  loading: Loading,
+});
+
 function Index(props){
  const { current_user } = props;
  const { pathname } = props.location;
@ -49,15 +55,15 @@ function Index(props){
              <img src={getImageUrl(`/${current_user && current_user.image_url}`)} alt=""/>
              <span>{current_user && current_user.username}</span>
            </div>
-            <ul className="securityUl" style={{'border-bottom':'1px solid rgba(153, 153, 153, 0.22)','padding-bottom':'5px'}}>
-              <li>消息通知</li>
-              <li className={pathname.indexOf("/settings/notice/myNotice")>-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>
-            </ul>
-            <ul className="securityUl">
+            <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>
            </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>
+            </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>
@ -96,12 +102,17 @@ function Index(props){
                    <SSHIndex {...props} {...p}/>
                  )}
                ></Route>
+                <Route
+                  path="/settings/notice/privateLetter"
+                  render={(p)=>(
+                    <PrivateLetter{...props} {...p}/>
+                  )}
+                ></Route>
              </Switch>
            </Gap>
          </LongWidth>
        </Box>
      </div>
-      
    </div>
  )
 }
--- a/src/forge/SecuritySetting/Index.scss
+++ b/src/forge/SecuritySetting/Index.scss
@ -36,10 +36,11 @@
        color: #333;
        margin-bottom: 0px;
        padding-bottom: 0px;
+        padding-top: 5px;
        li{
          font-size: 14px;
-          margin-top: 8px;
-          margin-bottom: 8px;
+          margin-top: 10px;
+          margin-bottom: 10px;
          height: 27px;
          line-height: 27px;
          position: relative;
@ -66,7 +67,7 @@
            width: 3px;
            border-radius: 2px;
            content: "";
-            background-color: #2A61FF;
+            background-color: #466AFF;
          }

          i{
@ -75,6 +76,10 @@
          }
        }
      }
+      .ul-border-buttom{
+        border-bottom: 1px solid rgba(153, 153, 153, 0.22);
+        padding-bottom: 5px;
+      }
    }
    .sshHead{
      display: flex;
@ -86,6 +91,11 @@
      &>span{
        font-size: 18px;
        font-weight: 600;
+        color: #333333;
+      }
+      & .add-ssh-but{
+        padding:0 12px;
+        margin-bottom: 5px;
      }
    }
    .ant-list-item{
--- a/src/forge/SecuritySetting/notice/manager/Index.jsx
+++ b/src/forge/SecuritySetting/notice/manager/Index.jsx
@ -1,3 +1,4 @@
+import { Button, Checkbox } from "antd";
 import React from "react";

 import './Index.scss';
@ -5,44 +6,93 @@ import './Index.scss';
 function NoticeManager(props){

  return(
-    <div>
+    <div className="notice01">
      <div className="sshHead">
        <span>通知管理</span>
      </div>
-      <div className="body">
-          <span className="tip" style={{fontSize:'16px',fontWeight:'400'}}>您可以通过通知管理来选择接受通知的方式</span>
-          <div className="cont-top">
-            我创建或负责的
-          </div>
-          <div className="cont">
-            <div className="title">易修状态变更</div>
-            <input type="checkbox" value="1" checked disabled></input><label>站内信</label>
-            <input type="checkbox" value="1"></input><label>邮件</label>
-          </div>
-          <div className="cont">
-            <div className="title">易修截止日期到达最后一天</div>
-            <input type="checkbox" value="1"></input><label>站内信</label>
-            <input type="checkbox" value="1"></input><label>邮件</label>
-          </div>
-          <div className="cont">
-            <div className="title">合并请求状态变更</div>
-            <input type="checkbox" value="1"></input><label>站内信</label>
-            <input type="checkbox" value="1"></input><label>邮件</label>
-          </div>
+      <div>
+        <span className="notice-manager-tip">您可以通过通知管理来选择接受通知的方式</span>
+        <div className="manager-cont-top">
+          我创建或负责的
+        </div>
+        <div className="manager-cont">
+          <div className="manager-cont-title">易修状态变更</div>
+          <Checkbox defaultChecked='true' disabled>站内信</Checkbox>
+          <Checkbox >邮件</Checkbox>
+        </div>
+        <div className="manager-cont">
+          <div className="manager-cont-title">易修截止日期到达最后一天</div>
+          <Checkbox defaultChecked='true' disabled>站内信</Checkbox>
+          <Checkbox >邮件</Checkbox>
+        </div>
+        <div className="manager-cont">
+          <div className="manager-cont-title">合并请求状态变更</div>
+          <Checkbox defaultChecked='true' disabled>站内信</Checkbox>
+          <Checkbox >邮件</Checkbox>
+        </div>
+        <div className="manager-cont">
+          <div className="manager-cont-title">易修有新的评论</div>
+          <Checkbox defaultChecked='true'>站内信</Checkbox>
+          <Checkbox >邮件</Checkbox>
+        </div>
+        <div className="manager-cont">
+          <div className="manager-cont-title">合并请求有新的评论</div>
+          <Checkbox defaultChecked='true'>站内信</Checkbox>
+          <Checkbox >邮件</Checkbox>
+        </div>

-          <div className="cont-top">
-            我管理的仓库
-          </div>
-          <div className="cont">
-            <div className="title">被关注</div>
-            <input type="checkbox" value="1" checked></input><label>站内信</label>
-            <input type="checkbox" value="1"></input><label>邮件</label>
-          </div>
-          <div className="cont">
-            <div className="title">被点赞</div>
-            <input type="checkbox" value="1"></input><label>站内信</label>
-            <input type="checkbox" value="1"></input><label>邮件</label>
-          </div>
+        <div className="manager-cont-top">
+          我管理的仓库
+        </div>
+        <div className="manager-cont">
+          <div className="manager-cont-title">被关注</div>
+          <Checkbox defaultChecked='true'>站内信</Checkbox>
+          <Checkbox >邮件</Checkbox>
+        </div>
+        <div className="manager-cont">
+          <div className="manager-cont-title">被点赞</div>
+          <Checkbox defaultChecked='true'>站内信</Checkbox>
+          <Checkbox >邮件</Checkbox>
+        </div>
+        <div className="manager-cont">
+          <div className="manager-cont-title">被复刻</div>
+          <Checkbox defaultChecked='true'>站内信</Checkbox>
+          <Checkbox >邮件</Checkbox>
+        </div>
+        <div className="manager-cont">
+          <div className="manager-cont-title">有新的里程碑</div>
+          <Checkbox defaultChecked='true'>站内信</Checkbox>
+          <Checkbox >邮件</Checkbox>
+        </div>
+
+        <div className="manager-cont-top">
+          我关注的仓库
+        </div>
+        <div className="manager-cont">
+          <div className="manager-cont-title">被删除</div>
+          <Checkbox defaultChecked='true'>站内信</Checkbox>
+          <Checkbox >邮件</Checkbox>
+        </div>
+        <div className="manager-cont">
+          <div className="manager-cont-title">被转移</div>
+          <Checkbox defaultChecked='true'>站内信</Checkbox>
+          <Checkbox >邮件</Checkbox>
+        </div>
+        <div className="manager-cont">
+          <div className="manager-cont-title">有新的易修</div>
+          <Checkbox defaultChecked='true'>站内信</Checkbox>
+          <Checkbox >邮件</Checkbox>
+        </div>
+        <div className="manager-cont">
+          <div className="manager-cont-title">有新的合并请求</div>
+          <Checkbox defaultChecked='true'>站内信</Checkbox>
+          <Checkbox >邮件</Checkbox>
+        </div>
+        <div className="manager-cont">
+          <div className="manager-cont-title">有新的版本发布</div>
+          <Checkbox defaultChecked='true'>站内信</Checkbox>
+          <Checkbox >邮件</Checkbox>
+        </div>
      </div>
    </div>
  )
--- a/src/forge/SecuritySetting/notice/manager/Index.scss
+++ b/src/forge/SecuritySetting/notice/manager/Index.scss
@ -1,5 +1,8 @@
-
-.cont-top{
+.notice-manager-tip{
+    font-size:16px;
+    font-weight:400;
+}
+.manager-cont-top{
    font-size: 14px;
    font-weight: 600;
    height: 44px;
@ -12,18 +15,63 @@
    margin-top: 25px;
 }

-.cont{
+.manager-cont{
    padding: 8px 20px 6px;
    display: flex;
    align-items: center;
    font-size: 14px;

-    .title{
+    .manager-cont-title{
        width: 320px;
    }

-    label{
-        margin-left: 6px;
-        margin-right: 34px;
+    
+}
+
+.notice01{
+    .ant-checkbox-disabled.ant-checkbox-checked .ant-checkbox-inner::after {
+        border-color: white;
+    }
+    .ant-checkbox-disabled .ant-checkbox-inner {
+        background-color: #999999 !important;
+        border-color: #999999 !important;
+    }
+
+    .ant-checkbox-checked .ant-checkbox-inner {
+        background-color: #466AFF;
+        border: #466AFF;
+    }
+
+    .ant-checkbox-checked::after{
+        border: 1px solid #466AFF;
+    }
+    .ant-checkbox-wrapper:hover .ant-checkbox-inner, .ant-checkbox:hover .ant-checkbox-inner, .ant-checkbox-input:focus + .ant-checkbox-inner,.ant-radio-checked .ant-radio-inner,.ant-radio-wrapper:hover .ant-radio, .ant-radio:hover .ant-radio-inner, .ant-radio-input:focus + .ant-radio-inner {
+        border-color: #466AFF;
+    }
+
+    .ant-checkbox + span,.manager-cont-title {
+        color: #000000;
+    }
+
+    .ant-radio-inner::after{
+        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;
+        }
+        &:active{
+            background-color: #466AFF;
+            border-color: #466AFF;
+        }
    }
 }
--- a/src/forge/SecuritySetting/notice/myNotice/Index.jsx
+++ b/src/forge/SecuritySetting/notice/myNotice/Index.jsx
@ -1,10 +1,12 @@
 import React, { useState, useEffect } from 'react';
-import { Badge, Button, Menu } from 'antd';
+import { Badge, Button, Checkbox, Menu } from 'antd';
 import './Index.scss';
+import '../manager/Index.scss'
+import DelModal from '../../../Wiki/components/ModalFun';

 function MyNotice(props) {

-  const [noticeType, setNoticeType] = useState("2");
+  const [noticeType, setNoticeType] = useState("1");
  const [selectedNum, setSelectedNum] = React.useState(0);
  const [isBatchDelete, setIsBatchDelete] = useState(false);

@ -13,17 +15,6 @@ function MyNotice(props) {
    if (e.key != "2") {
      setIsBatchDelete(false);
    }
-    // if(e.key==="0"){
-    //   const contentDiv = document.getElementsByClassName("content");
-    //   for (var i = 0; i < contentDiv.length; i++) {
-    //     contentDiv[i].className="content baselineDiv";
-    //   }
-    // }else{
-    //   const contentDiv = document.getElementsByClassName("content");
-    //   for (var i = 0; i < contentDiv.length; i++) {
-    //     contentDiv[i].className="content";
-    //   }
-    // }
  }

  function onChange() {
@ -45,120 +36,134 @@ function MyNotice(props) {
    setSelectedNum(e.target.checked ? checkbox.length : 0);
  }

+  function deleteNotice() {
+    DelModal({
+      title: noticeType === "1" ? '删除私信' : '删除与我相关',
+      contentTitle: noticeType === "1" ? '您确定要删除与 xxx 的聊天吗？' : selectedNum === 0 ? '您确定要删除这条@我消息吗？' : '您确定要删除选中的' + selectedNum + '条消息吗？',
+      content: noticeType === "1" ? '此操作将删除与xxx的聊天框和xxx的所有聊天记录，请进行确认以防数据的丢失' : selectedNum === 0 ? '此操作将删除这条消息，请进行确认以防数据的丢失' : '此操作将删除选中的' + selectedNum + '条消息，请进行确认以防数据的丢失',
+      onOk: () => {
+
+      }
+    });
+  }

  return (
-    <div>
+    <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"><Badge count={10}>私信</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>
-        <button>所有消息一键已读</button>
+        <button>所有{noticeType==="0"?"系统通知":noticeType==="1"?"私信":"@我"}一键已读</button>
      </div>

      <div className={isBatchDelete ? "invisible " : "visible"}>
-        <span className="alignCenter">
-          <input type="checkbox"></input>&nbsp;
-          仅看未读{noticeType === "1" ? "私信" : "消息"}（12）
-        </span>
+        <div className="vertical-center-style">
+          {/* <input type="checkbox"></input>&nbsp;
+          仅看未读{noticeType === "1" ? "私信" : "消息"}（12） */}
+          <Checkbox >仅看未读{noticeType === "1" ? "私信" : "消息"}（12）</Checkbox>
+        </div>
        {noticeType === "2" ? <button onClick={() => { setIsBatchDelete(true); }}>批量删除</button> : ""}
      </div>

      <div className={isBatchDelete ? 'visible' : 'invisible'}>
-        <span>
+        <div className="vertical-center-style">
          <input type="checkbox" id="checkAll" onChange={onCheckAllChange} />&nbsp;
-          全选&nbsp;&nbsp;&nbsp;已选择<span id="numberSpan">{selectedNum}</span>项
-        </span>
+          全选&nbsp;&nbsp;&nbsp;已选择&nbsp;<span id="numberSpan">{selectedNum}</span>&nbsp;项
+        </div>
        <div>
          <button onClick={() => { setIsBatchDelete(false); }}>取消</button>&nbsp;&nbsp;&nbsp;&nbsp;
-          <button className="deleteBut">删除</button>
+          <button className="deleteBut" onClick={selectedNum === 0 ? "" : deleteNotice}>删除</button>
        </div>
      </div>
+
      {noticeType === "1" ?
-        <div className="content">
+        <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="right">
-            <div className="content_top">
+          <div className="private-letter-right">
+            <div>
              <span>蒋宇航</span>
              <span className="timeSpan">4分钟前</span>
-              <a>删除</a>
+              <a onClick={deleteNotice}>删除</a>
            </div>
            <div>
-              <span className="highlightSpan">最好的OpenStack控制台，对标OpenStack社区Horizon项目，在易用性、页面性能等方面进行深度优化，提供简单控制台。</span>
+              <span className="highlightSpan letter-length-limit">最好的OpenStack控制台，对标OpenStack社区Horizon项目,最好的OpenStack控制台，对标OpenStack社区Horizon项目，在易用性、页面性能等方面进行深度优化，提供简单控制台。</span>
            </div>
          </div>
        </div>
-        : <div className="content">
-          <div className="cont">
+        : <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" ? <Badge count={5}><img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" /></Badge> : ""}
-            <span className="highlightSpan">蒋宇航在<span className="boldSpan">Gitlink/Gitlink</span>新建易修:<span className="boldSpan">【Bug】链接地址错误</span></span>
+            {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="cont">
+          <div className="mynotice-cont vertical-center-style">
            <span className="timeSpan">4分钟前</span>
-            <a>标记为已读</a>&nbsp;&nbsp;&nbsp;{noticeType==="0"?"":<a style={{marginRight:'10px'}}>删除</a>}
+            <a>标记为已读</a>&nbsp;&nbsp;&nbsp;{noticeType === "0" ? "" : <a className="float-left-little" onClick={deleteNotice}>删除</a>}
          </div>
        </div>}

      {noticeType === "1" ?
-        <div className="content">
+        <div className="mynotice-content vertical-center-style">
          <Badge count={5}><img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" /></Badge>
-          <div className="right">
-            <div className="content_top">
+          <div className="private-letter-right">
+            <div>
              <span>段甲生</span>
              <span className="timeSpan">5分钟前</span>
-              <a>删除</a>
+              <a onClick={deleteNotice}>删除</a>
            </div>
            <div>
-              <span className="highlightSpan">gitlink平台 react 前端代码</span>
+              <span className="highlightSpan letter-length-limit">gitlink平台 react 前端代码</span>
            </div>
          </div>
        </div>
-        : <div className="content">
-          <div className="cont">
+        : <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" ? <Badge count={5}><img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" /></Badge> : ""}
-            <span className="highlightSpan">蒋宇航在<span className="boldSpan">蒋宇航/软件工程课程协同开发案例</span>指派给你一个合并请求：<span className="boldSpan">请进行合并请求test</span></span>
+            {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="cont">
+          <div className="mynotice-cont vertical-center-style">
            <span className="timeSpan">10分钟前</span>
-            <a>标记为已读</a>&nbsp;&nbsp;&nbsp;{noticeType==="0"?"":<a style={{marginRight:'10px'}}>删除</a>}
+            <a>标记为已读</a>&nbsp;&nbsp;&nbsp;{noticeType === "0" ? "" : <a className="float-left-little" onClick={deleteNotice}>删除</a>}
          </div>
        </div>}

      {noticeType === "1" ?
-        <div className="content">
+        <div className="mynotice-content vertical-center-style">
          <Badge count={5}><img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" /></Badge>
-          <div className="right">
-            <div className="content_top">
+          <div className="private-letter-right">
+            <div>
              <span>巴拉迪维</span>
              <span className="timeSpan">7分钟前</span>
-              <a>删除</a>
+              <a onClick={deleteNotice}>删除</a>
            </div>
            <div>
-              <span className="highlightSpan">构建卷积神经网络，训练模型，预测模型效果。</span>
+              <span className="highlightSpan letter-length-limit">构建卷积神经网络，训练模型，预测模型效果。</span>
            </div>
          </div>
        </div>
-        : <div className="content">
-          <div className="cont">
+        : <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="highlightSpan">你关注的仓库<span className="boldSpan">王涛/协同案例分析</span>已被删除</span>
+            <span className={noticeType==="0"?"sysNotice-length highlightSpan":"at-length highlightSpan"}>你关注的仓库<span className="boldSpan">王涛/协同案例分析</span>已被删除</span>
          </div>
-          <div className="cont">
+          <div className="mynotice-cont vertical-center-style">
            <span className="timeSpan">1小时前</span>
-            <a>标记为已读</a>&nbsp;&nbsp;&nbsp;{noticeType==="0"?"":<a style={{marginRight:'10px'}}>删除</a>}
+            <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
@ -2,23 +2,29 @@
  padding:0 10px 0px 0px !important;
  .ant-badge{
    font-size: 16px;
-    font-weight: 500;
+    color: #333333;
  }
  .ant-menu-item{
    padding:0px;
-    margin-right:50px!important;
+    // margin-right:34px!important;
    height: 34px;
+    width: 64px;
+    text-align: center;
    line-height: 0px;
    position: relative;
  }

+  #item{
+    margin: 0 34px !important;
+  }
+
  li.ant-menu-item, .ant-menu-horizontal > .ant-menu-item {
    border-bottom: 0px;
  }

  .ant-menu-item-selected{
    color: #333333 !important;
-    font-weight: 700;
+    font-weight: 600;
    border-bottom: 2px solid #2A61FF !important;
  }

@ -43,6 +49,7 @@ button {
  background: #FAFBFC;
  border: 1px solid #D0D0D0;
  border-radius: 4px;
+  height: 32px;
 }
 button:hover {
  background: #F3F4F6;
@ -57,17 +64,17 @@ button:active {

 .deleteBut:hover{
  background: #DF0002;
+  border: 1px solid #DF0002;
  color:#FFFFFF;
 }

 .deleteBut:active{
  background: #CE0002;
+  border: 1px solid #CE0002;
  color:#FFFFFF;
 }

-.content {
-  display: flex;
-  align-items: center;
+.mynotice-content {
  justify-content: space-between;
  padding: 15px 0 15px 10px;
  border-bottom: 1px solid #EEEEEE;
@ -104,9 +111,8 @@ button:active {
    // margin-right: 10px;
  }

-  .cont{
-    display: flex;
-    align-items: center;
+  .mynotice-cont{
+    padding:0;
  }
 }

@ -137,24 +143,45 @@ button:active {
  line-height: 16px;
 }

-.right {
+.private-letter-right {
  flex: auto;
  margin: 0px 10px;
-}
-
-.right div {
-  display: flex;
-  justify-content: space-between;
-
-  span{
-    max-width: 640px;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
+  & div{
+    display: flex;
+    justify-content: space-between;
  }
 }

-.highlightSpan:hover{
+.highlightSpan{
+  &:hover{
+    color: #466AFF;
+    cursor: pointer;
+  }
+}
+
+.letter-length-limit{
+  max-width: 50rem;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.sysNotice-length{
+  max-width: 52rem;
+}
+
+.at-length{
+  max-width: 48rem;
+}
+#numberSpan{
  color: #466AFF;
 }

+.vertical-center-style{
+  display: flex;
+  align-items: center;
+}
+
+.float-left-little{
+  margin-right: 10px;
+}
--- a/src/forge/SecuritySetting/notice/privateLetter/Index.jsx
+++ b/src/forge/SecuritySetting/notice/privateLetter/Index.jsx
@ -0,0 +1,82 @@
+import React, { useState, useEffect } from 'react';
+import './Index.scss'
+import '../manager/Index.scss'
+import { Button, Input, Icon, Badge } from 'antd';
+
+function PrivateLetter(props){
+
+  const { TextArea,Search } = Input;
+
+  function deleteNotice(){
+    alert("删除消息");
+  }
+
+  return(
+    <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>
+          <span>蒋宇航</span>
+        </div>
+        <div className="plcontent-list">
+          <div className="vertical-center-style plclo">
+            <img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
+            <div className="message-bubble mb-other"></div>
+            <div className="notice-content vertical-center-style">
+              嗨在吗？哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
+              <a className="pld01">删除</a>
+            </div>
+            <span>2021-08-29 11:59</span>
+          </div>
+
+          <div className="notice-my vertical-center-style plclo">
+            <img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
+            <div className="message-bubble"></div>
+            <div className="notice-content vertical-center-style">
+              哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
+              <a className="pld01">删除</a>
+            </div>
+            <span>2021-08-29 11:59</span>
+          </div>
+          
+        </div>
+        <div className="private-letter-present">
+          <div>
+            <img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
+            <TextArea className="private-letter-cont" rows="2" />
+          </div>
+          <div className="presentNotice">
+            <Button className="private-letter-cont-mt25 but25" type="primary">发送</Button>
+          </div>
+        </div>
+      </div>
+      <div className="pl-list">
+        <div className="list-sort vertical-center-style">
+          <Search
+            className=""
+            placeholder="搜索用户"
+            enterButton={<i className="iconfont icon-sousuo"></i>}
+            onSearch={value => console.log(value)}
+            style={{ width: 265 }}
+          />
+        </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>
+            <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>
+      </div>
+    </div>
+  )
+}
+export default PrivateLetter;
--- a/src/forge/SecuritySetting/notice/privateLetter/Index.scss
+++ b/src/forge/SecuritySetting/notice/privateLetter/Index.scss
@ -0,0 +1,181 @@
+.private-letter{
+  border-radius: 4px 4px 0px 0px;
+  border: 1px solid rgba(151, 151, 151, 0.24);
+  display: flex;
+}
+
+.pl-content{
+  flex: auto;
+  .pl-name{
+    height: 3rem;
+    // padding-left: 26px;
+    border-bottom: 1px solid #EEEEEE;
+
+    &>a{
+      position: relative;
+      left: 26px;
+    }
+    span{
+      font-size: 16px;
+      font-weight: 600;
+      color: #333333;
+      flex: auto;
+      text-align: center;
+    }
+  }
+  .plcontent-list{
+    height: 24rem;
+    padding:25px;
+    overflow-y: scroll;
+
+    .plclo{
+      margin-bottom: 30px;
+    }
+
+    .notice-my{
+      flex-direction: row-reverse;
+
+      & .pld01{
+        left: 0;
+      }
+    }
+
+    & .notice-content{
+      padding:8px 10px;
+      background: #F4F4F4;
+      border-radius:5px;
+      position: relative;
+      max-width: 20rem;
+
+      .pld01{
+        display: none;
+        
+      }
+      &:hover .pld01{
+        display: block;
+        position: absolute;
+        right: 0;
+        bottom: -2em;
+        color: #999999;
+        font-size: 12px;
+        &:hover{
+          color: #666666;
+        }
+      }
+    }
+
+    & .message-bubble{
+      position:relative;
+      width:0;
+      height:0;
+      font-size:0;
+      border:solid 8px;
+      border-color:#FFFFFF #FFFFFF #FFFFFF #F4F4F4;
+    }
+
+    & .mb-other{
+      border-color:#FFFFFF #F4F4F4 #FFFFFF #FFFFFF;
+    }
+
+    & span{
+      margin: 0 10px;
+      font-size: 12px;
+      color: #999999;
+      line-height: 17px;
+    }
+  }
+  .private-letter-present{
+    padding:20px 28px;
+    & div{
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      flex: auto;
+    }
+    .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;
+      margin-left: 17px;
+    }
+    .private-letter-cont:hover,.private-letter-cont:focus {
+      background-color: #F4F4F4 !important;
+    }
+  }
+}
+
+.pl-list{
+  width: 30%;
+  border-left: 1px solid #EEEEEE;
+  .list-sort{
+    justify-content: center;
+    height: 3rem;
+    border-bottom: 1px solid #EEEEEE;
+    & .ant-btn-primary{
+      width: 2.3rem;
+      color: #466AFF;
+      background: #eff2ff;
+      border: 1px solid rgba(151, 151, 151, 0.24);
+    }
+
+    & .ant-btn{
+      padding: 0;
+    }
+  }
+
+  .list-scroll{
+    height: 32.4rem;
+    overflow-y: scroll;
+  }
+
+  .list-scroll-content{
+    padding: 10px 10px 15px 15px;
+    border-bottom: 1px solid #EEEEEE;
+    // &:last-child{
+    //   border-bottom: 0px;
+    // }
+    &:hover{
+      background: #F3F4F6;
+    }
+    & a{
+      display: none;
+    }
+    &:hover a{
+      display: block;
+      color: #466AFF;
+    }
+  }
+
+  .ls-cont{
+    width: 13rem;
+    // flex: auto;
+    margin-left: 6px;
+    justify-content: space-between;
+    & .ls-content-span{
+      max-width: 11rem;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+  }
+}
+
+.vertical-center-style{
+  display: flex;
+  align-items: center;
+}
+
+img{
+  width: 45x;
+  height: 45px;
+}
--- a/src/forge/SecuritySetting/sub/SSH.jsx
+++ b/src/forge/SecuritySetting/sub/SSH.jsx
@ -56,7 +56,7 @@ function SSH(props) {
      <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')}>添加SSH密钥</Button>
+        <Button type="primary" size="large" onClick={()=>props.history.push('/settings/SSH/new')} className="add-ssh-but">添加SSH密钥</Button>
      </div>
      {
        list && list.length > 0 &&
--- a/src/forge/users/Material/Base.jsx
+++ b/src/forge/users/Material/Base.jsx
@ -125,7 +125,7 @@ export default Form.create()(
        </Form.Item>
        <AlignCenter>
          <span className="ant-form-item-label"></span>
-          <Button type={"primary"} onClick={submit}>提交</Button>
+          <Button className="but25" type={"primary"} onClick={submit}>提交</Button>
          {/* <Button type={"default"} onClick={()=>props.history.push(`/${current_user && current_user.login}`)} className="ml20">取消</Button> */}
        </AlignCenter>
      </Form>
--- a/src/forge/users/Material/Index.jsx
+++ b/src/forge/users/Material/Index.jsx
@ -1,5 +1,6 @@
 import React , { useEffect , useState } from 'react';
 import './Index.scss';
+import '../../SecuritySetting/notice/manager/Index.scss'
 import { Menu } from 'antd';
 import { Link } from 'react-router-dom';
 import Base from './Base';
@ -25,11 +26,14 @@ function Index(props){


  return(
-    <div>
-      <Menu selectedKeys={[key]} mode={'horizontal'} className="infosRightMenu">
-        <Menu.Item key="0"><Link to={`/settings/profile`}>基本资料</Link></Menu.Item>
-        {/* <Menu.Item key="1"><Link to={`/${username}/password`}>密码管理</Link></Menu.Item> */}
-      </Menu>
+    <div className="notice01">
+      <div className="sshHead">
+        <Menu selectedKeys={[key]} mode={'horizontal'} className="infosRightMenu">
+          <Menu.Item key="0"><Link to={`/settings/profile`}>基本资料</Link></Menu.Item>
+          {/* <Menu.Item key="0"><Link to={`/settings/profile`}>基本资料</Link></Menu.Item> */}
+          {/* <Menu.Item key="1"><Link to={`/${username}/password`}>密码管理</Link></Menu.Item> */}
+        </Menu>
+      </div>
      <div style={{padding:"20px"}}>
        {
          key === "0" ?
--- a/src/forge/users/Material/Index.scss
+++ b/src/forge/users/Material/Index.scss
@ -19,6 +19,12 @@
  .ant-menu-item{
    a{
      font-size: 16px;
+      color: #333333;
+      position: relative;
+      bottom: -10px;
+    }
+    a:hover{
+      color: #333333;
    }
  }
 }
--- a/src/forge/users/Material/Password.jsx
+++ b/src/forge/users/Material/Password.jsx
@ -89,7 +89,7 @@ export default Form.create()(
        </Form.Item>
        <AlignCenter style={{marginTop:"20px"}}>
          <span className="ant-form-item-label"></span>
-          <Button type={"primary"} onClick={submit}>提交</Button>
+          <Button className="but25" type={"primary"} onClick={submit}>提交</Button>
          <Button type={"default"} onClick={()=>props.history.push(`/${username}`)} className="ml20">取消</Button>
        </AlignCenter>
      </Form>