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] =?UTF-8?q?=E9=80=9A=E7=9F=A5=E4=B8=AD=E5=BF=83=E9=9D=99?=
 =?UTF-8?q?=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 1dcfdbea..9197f691 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 7831788c..48de6c2a 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 edbd763f..550f6f65 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 94bac3d2..ea64a439 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 5a9bfff5..0989eb1e 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 d4773048..c784bc88 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