From 8e17efb9c6e1b460906bc0066901f232e2d6e8c9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B0=A2=E6=80=9D?= <2897217417@qq.com>
Date: Thu, 9 Sep 2021 09:34:51 +0800
Subject: [PATCH 1/3] =?UTF-8?q?=E9=80=9A=E7=9F=A5=E4=B8=AD=E5=BF=83?=
 =?UTF-8?q?=E9=9D=99=E6=80=81=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/forge/Head/Header.js                      | 55 +++++++----
 src/forge/Head/header.scss                    | 93 +++++++++++++++----
 src/forge/SecuritySetting/Index.jsx           | 13 ++-
 .../SecuritySetting/notice/manager/Index.jsx  | 21 +++--
 .../SecuritySetting/notice/myNotice/Index.jsx | 75 ++++++++-------
 .../notice/myNotice/Index.scss                | 47 ++++++----
 6 files changed, 206 insertions(+), 98 deletions(-)

diff --git a/src/forge/Head/Header.js b/src/forge/Head/Header.js
index 1dcfdbeae..9197f6915 100644
--- 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)  ?
diff --git a/src/forge/Head/header.scss b/src/forge/Head/header.scss
index 7831788c8..48de6c2ac 100644
--- 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;
   }
-}
\ No newline at end of file
+}
+
+//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;
+}
diff --git a/src/forge/SecuritySetting/Index.jsx b/src/forge/SecuritySetting/Index.jsx
index edbd763f3..550f6f65e 100644
--- 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;
@@ -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>
   )
 }
diff --git a/src/forge/SecuritySetting/notice/manager/Index.jsx b/src/forge/SecuritySetting/notice/manager/Index.jsx
index 94bac3d22..ea64a4393 100644
--- 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';
@@ -16,18 +17,18 @@ function NoticeManager(props){
           </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>
+            <Checkbox defaultChecked='true' disabled>站内信</Checkbox>
+            <Checkbox >邮件</Checkbox>
           </div>
           <div className="cont">
             <div className="title">易修截止日期到达最后一天</div>
-            <input type="checkbox" value="1"></input><label>站内信</label>
-            <input type="checkbox" value="1"></input><label>邮件</label>
+            <Checkbox>站内信</Checkbox>
+            <Checkbox>邮件</Checkbox>
           </div>
           <div className="cont">
             <div className="title">合并请求状态变更</div>
-            <input type="checkbox" value="1"></input><label>站内信</label>
-            <input type="checkbox" value="1"></input><label>邮件</label>
+            <Checkbox>站内信</Checkbox>
+            <Checkbox>邮件</Checkbox>
           </div>
 
           <div className="cont-top">
@@ -35,13 +36,13 @@ function NoticeManager(props){
           </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>
+            <Checkbox defaultChecked='true'>站内信</Checkbox>
+            <Checkbox >邮件</Checkbox>
           </div>
           <div className="cont">
             <div className="title">被点赞</div>
-            <input type="checkbox" value="1"></input><label>站内信</label>
-            <input type="checkbox" value="1"></input><label>邮件</label>
+            <Checkbox>站内信</Checkbox>
+            <Checkbox>邮件</Checkbox>
           </div>
       </div>
     </div>
diff --git a/src/forge/SecuritySetting/notice/myNotice/Index.jsx b/src/forge/SecuritySetting/notice/myNotice/Index.jsx
index 5a9bfff5d..0989eb1e3 100644
--- a/src/forge/SecuritySetting/notice/myNotice/Index.jsx
+++ b/src/forge/SecuritySetting/notice/myNotice/Index.jsx
@@ -1,10 +1,11 @@
 import React, { useState, useEffect } from 'react';
 import { Badge, Button, Menu } from 'antd';
 import './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 +14,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,13 +35,23 @@ 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="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>
@@ -68,86 +68,89 @@ function MyNotice(props) {
       <div className={isBatchDelete ? 'visible' : 'invisible'}>
         <span>
           <input type="checkbox" id="checkAll" onChange={onCheckAllChange} />&nbsp;
-          全选&nbsp;&nbsp;&nbsp;已选择<span id="numberSpan">{selectedNum}</span>项
+          全选&nbsp;&nbsp;&nbsp;已选择&nbsp;<span id="numberSpan">{selectedNum}</span>&nbsp;项
         </span>
         <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" 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>
             </div>
           </div>
         </div>
-        : <div className="content">
+        : <div className="mynotice-content">
           <div className="cont">
             <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> : ""}
+            {noticeType === "2" ? <img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" /> : ""}
+            {noticeType === "2" ? <Badge color="#FA2020" /> : ""}
             <span className="highlightSpan">蒋宇航在<span className="boldSpan">Gitlink/Gitlink</span>新建易修:<span className="boldSpan">【Bug】链接地址错误</span></span>
           </div>
           <div className="cont">
             <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 style={{ marginRight: '10px' }} onClick={deleteNotice}>删除</a>}
           </div>
         </div>}
 
       {noticeType === "1" ?
-        <div className="content">
+        <div className="mynotice-content">
           <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>
             </div>
           </div>
         </div>
-        : <div className="content">
+        : <div className="mynotice-content">
           <div className="cont">
             <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="highlightSpan">蒋宇航在<span className="boldSpan">蒋宇航/软件工程课程协同开发案例</span>指派给你一个合并请求：<span className="boldSpan">请进行合并请求test</span>请进行合并请求test请进行合并请求test请进行合并请求test请进行合并请求test请进行合并请求test</span>
           </div>
           <div className="cont">
             <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 style={{ marginRight: '10px' }} onClick={deleteNotice}>删除</a>}
           </div>
         </div>}
 
       {noticeType === "1" ?
-        <div className="content">
+        <div className="mynotice-content">
           <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>
             </div>
           </div>
         </div>
-        : <div className="content">
+        : <div className="mynotice-content">
           <div className="cont">
             <input type="checkbox" className={isBatchDelete ? 'checkbox' : 'invisible'} onChange={onChange} />
             {/* 系统通知 */}
@@ -158,7 +161,7 @@ function MyNotice(props) {
           </div>
           <div className="cont">
             <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 style={{ marginRight: '10px' }} onClick={deleteNotice}>删除</a>}
           </div>
         </div>}
     </div>
diff --git a/src/forge/SecuritySetting/notice/myNotice/Index.scss b/src/forge/SecuritySetting/notice/myNotice/Index.scss
index d4773048f..c784bc88c 100644
--- 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;
   }
 
@@ -57,15 +63,17 @@ button:active {
 
 .deleteBut:hover{
   background: #DF0002;
+  border: 1px solid #DF0002;
   color:#FFFFFF;
 }
 
 .deleteBut:active{
   background: #CE0002;
+  border: 1px solid #CE0002;
   color:#FFFFFF;
 }
 
-.content {
+.mynotice-content {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -107,6 +115,7 @@ button:active {
   .cont{
     display: flex;
     align-items: center;
+    padding:0;
   }
 }
 
@@ -137,24 +146,26 @@ 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{
-  color: #466AFF;
+.highlightSpan{
+  max-width: 40rem;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  &:hover{
+    color: #466AFF;
+    cursor: pointer;
+  }
 }
 
+#numberSpan{
+  color: #466AFF;
+}
\ No newline at end of file

From e07e4355570e77ffc3e3c129d64e58053dfbd63a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B0=A2=E6=80=9D?= <2897217417@qq.com>
Date: Thu, 9 Sep 2021 14:25:04 +0800
Subject: [PATCH 2/3] =?UTF-8?q?=E9=80=9A=E7=9F=A5=E4=B8=AD=E5=BF=83?=
 =?UTF-8?q?=E9=9D=99=E6=80=81=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/forge/SecuritySetting/Index.jsx           |  12 +-
 src/forge/SecuritySetting/Index.scss          |  16 ++-
 .../SecuritySetting/notice/manager/Index.jsx  | 117 +++++++++++++-----
 .../SecuritySetting/notice/manager/Index.scss |  62 ++++++++--
 .../SecuritySetting/notice/myNotice/Index.jsx |  62 +++++-----
 .../notice/myNotice/Index.scss                |  34 +++--
 src/forge/SecuritySetting/sub/SSH.jsx         |   2 +-
 src/forge/users/Material/Base.jsx             |   2 +-
 src/forge/users/Material/Index.jsx            |  14 ++-
 src/forge/users/Material/Index.scss           |   6 +
 src/forge/users/Material/Password.jsx         |   2 +-
 11 files changed, 232 insertions(+), 97 deletions(-)

diff --git a/src/forge/SecuritySetting/Index.jsx b/src/forge/SecuritySetting/Index.jsx
index 550f6f65e..ab50dc720 100644
--- a/src/forge/SecuritySetting/Index.jsx
+++ b/src/forge/SecuritySetting/Index.jsx
@@ -55,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>
diff --git a/src/forge/SecuritySetting/Index.scss b/src/forge/SecuritySetting/Index.scss
index 06dadb4d8..5dbb77f9e 100644
--- 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{
diff --git a/src/forge/SecuritySetting/notice/manager/Index.jsx b/src/forge/SecuritySetting/notice/manager/Index.jsx
index ea64a4393..5950f156c 100644
--- a/src/forge/SecuritySetting/notice/manager/Index.jsx
+++ b/src/forge/SecuritySetting/notice/manager/Index.jsx
@@ -6,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>
-            <Checkbox defaultChecked='true' disabled>站内信</Checkbox>
-            <Checkbox >邮件</Checkbox>
-          </div>
-          <div className="cont">
-            <div className="title">易修截止日期到达最后一天</div>
-            <Checkbox>站内信</Checkbox>
-            <Checkbox>邮件</Checkbox>
-          </div>
-          <div className="cont">
-            <div className="title">合并请求状态变更</div>
-            <Checkbox>站内信</Checkbox>
-            <Checkbox>邮件</Checkbox>
-          </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>
-            <Checkbox defaultChecked='true'>站内信</Checkbox>
-            <Checkbox >邮件</Checkbox>
-          </div>
-          <div className="cont">
-            <div className="title">被点赞</div>
-            <Checkbox>站内信</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-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>
   )
diff --git a/src/forge/SecuritySetting/notice/manager/Index.scss b/src/forge/SecuritySetting/notice/manager/Index.scss
index 987e81118..1b5729ae6 100644
--- 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;
+        }
     }
 }
\ No newline at end of file
diff --git a/src/forge/SecuritySetting/notice/myNotice/Index.jsx b/src/forge/SecuritySetting/notice/myNotice/Index.jsx
index 0989eb1e3..3a5eb1751 100644
--- a/src/forge/SecuritySetting/notice/myNotice/Index.jsx
+++ b/src/forge/SecuritySetting/notice/myNotice/Index.jsx
@@ -1,6 +1,7 @@
 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) {
@@ -47,29 +48,30 @@ function MyNotice(props) {
   }
 
   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" 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;已选择&nbsp;<span id="numberSpan">{selectedNum}</span>&nbsp;项
-        </span>
+        </div>
         <div>
           <button onClick={() => { setIsBatchDelete(false); }}>取消</button>&nbsp;&nbsp;&nbsp;&nbsp;
           <button className="deleteBut" onClick={selectedNum === 0 ? "" : deleteNotice}>删除</button>
@@ -77,7 +79,7 @@ function MyNotice(props) {
       </div>
 
       {noticeType === "1" ?
-        <div className="mynotice-content" onClick={() => props.history.push('/settings/notice/privateLetter')}>
+        <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>
@@ -86,28 +88,28 @@ function MyNotice(props) {
               <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="mynotice-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" ? <img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" /> : ""}
             {noticeType === "2" ? <Badge color="#FA2020" /> : ""}
-            <span className="highlightSpan">蒋宇航在<span className="boldSpan">Gitlink/Gitlink</span>新建易修:<span className="boldSpan">【Bug】链接地址错误</span></span>
+            <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' }} onClick={deleteNotice}>删除</a>}
+            <a>标记为已读</a>&nbsp;&nbsp;&nbsp;{noticeType === "0" ? "" : <a className="float-left-little" onClick={deleteNotice}>删除</a>}
           </div>
         </div>}
 
       {noticeType === "1" ?
-        <div className="mynotice-content">
+        <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>
@@ -116,28 +118,28 @@ function MyNotice(props) {
               <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="mynotice-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" ? <img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" /> : ""}
             {noticeType === "2" ? <Badge color="#FA2020" /> : ""}
-            <span className="highlightSpan">蒋宇航在<span className="boldSpan">蒋宇航/软件工程课程协同开发案例</span>指派给你一个合并请求：<span className="boldSpan">请进行合并请求test</span>请进行合并请求test请进行合并请求test请进行合并请求test请进行合并请求test请进行合并请求test</span>
+            <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' }} onClick={deleteNotice}>删除</a>}
+            <a>标记为已读</a>&nbsp;&nbsp;&nbsp;{noticeType === "0" ? "" : <a className="float-left-little" onClick={deleteNotice}>删除</a>}
           </div>
         </div>}
 
       {noticeType === "1" ?
-        <div className="mynotice-content">
+        <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>
@@ -146,22 +148,22 @@ function MyNotice(props) {
               <a onClick={deleteNotice}>删除</a>
             </div>
             <div>
-              <span className="highlightSpan">构建卷积神经网络，训练模型，预测模型效果。</span>
+              <span className="highlightSpan letter-length-limit">构建卷积神经网络，训练模型，预测模型效果。</span>
             </div>
           </div>
         </div>
-        : <div className="mynotice-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' }} onClick={deleteNotice}>删除</a>}
+            <a>标记为已读</a>&nbsp;&nbsp;&nbsp;{noticeType === "0" ? "" : <a className="float-left-little" onClick={deleteNotice}>删除</a>}
           </div>
         </div>}
     </div>
diff --git a/src/forge/SecuritySetting/notice/myNotice/Index.scss b/src/forge/SecuritySetting/notice/myNotice/Index.scss
index c784bc88c..6b8afdd87 100644
--- a/src/forge/SecuritySetting/notice/myNotice/Index.scss
+++ b/src/forge/SecuritySetting/notice/myNotice/Index.scss
@@ -49,6 +49,7 @@ button {
   background: #FAFBFC;
   border: 1px solid #D0D0D0;
   border-radius: 4px;
+  height: 32px;
 }
 button:hover {
   background: #F3F4F6;
@@ -74,8 +75,6 @@ button:active {
 }
 
 .mynotice-content {
-  display: flex;
-  align-items: center;
   justify-content: space-between;
   padding: 15px 0 15px 10px;
   border-bottom: 1px solid #EEEEEE;
@@ -112,9 +111,7 @@ button:active {
     // margin-right: 10px;
   }
 
-  .cont{
-    display: flex;
-    align-items: center;
+  .mynotice-cont{
     padding:0;
   }
 }
@@ -156,16 +153,35 @@ button:active {
 }
 
 .highlightSpan{
-  max-width: 40rem;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
   &: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;
 }
\ No newline at end of file
diff --git a/src/forge/SecuritySetting/sub/SSH.jsx b/src/forge/SecuritySetting/sub/SSH.jsx
index bc004e119..80294b398 100644
--- 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 &&
diff --git a/src/forge/users/Material/Base.jsx b/src/forge/users/Material/Base.jsx
index 5f776f8db..f9707ab0d 100644
--- 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>
diff --git a/src/forge/users/Material/Index.jsx b/src/forge/users/Material/Index.jsx
index 2ea0ecc17..869c1877f 100644
--- 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" ?
diff --git a/src/forge/users/Material/Index.scss b/src/forge/users/Material/Index.scss
index b24d3eb19..f4e79a52b 100644
--- 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;
     }
   }
 }
\ No newline at end of file
diff --git a/src/forge/users/Material/Password.jsx b/src/forge/users/Material/Password.jsx
index 12b31ac53..d7a2abc6a 100644
--- 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>

From c477fbe89a7cd6b816418879a8566970b6e674db Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B0=A2=E6=80=9D?= <2897217417@qq.com>
Date: Thu, 9 Sep 2021 14:31:31 +0800
Subject: [PATCH 3/3] =?UTF-8?q?=E9=80=9A=E7=9F=A5=E4=B8=AD=E5=BF=83?=
 =?UTF-8?q?=E6=96=B0=E5=A2=9E=E7=9A=84=E4=B8=89=E4=B8=AA=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/forge/Head/NoticeContent.jsx              |  19 ++
 .../notice/privateLetter/Index.jsx            |  82 ++++++++
 .../notice/privateLetter/Index.scss           | 181 ++++++++++++++++++
 3 files changed, 282 insertions(+)
 create mode 100644 src/forge/Head/NoticeContent.jsx
 create mode 100644 src/forge/SecuritySetting/notice/privateLetter/Index.jsx
 create mode 100644 src/forge/SecuritySetting/notice/privateLetter/Index.scss

diff --git a/src/forge/Head/NoticeContent.jsx b/src/forge/Head/NoticeContent.jsx
new file mode 100644
index 000000000..ab637f96e
--- /dev/null
+++ 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;
diff --git a/src/forge/SecuritySetting/notice/privateLetter/Index.jsx b/src/forge/SecuritySetting/notice/privateLetter/Index.jsx
new file mode 100644
index 000000000..be5b1bb36
--- /dev/null
+++ 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;
\ No newline at end of file
diff --git a/src/forge/SecuritySetting/notice/privateLetter/Index.scss b/src/forge/SecuritySetting/notice/privateLetter/Index.scss
new file mode 100644
index 000000000..0ac006bd9
--- /dev/null
+++ 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;
+}