From b6cf496efa86ab98c158fda16c1c4e566eed2fa4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B0=A2=E6=80=9D?= <2897217417@qq.com>
Date: Tue, 7 Sep 2021 11:14:53 +0800
Subject: [PATCH] =?UTF-8?q?=E9=80=9A=E7=9F=A5=E4=B8=AD=E5=BF=83-=E6=88=91?=
 =?UTF-8?q?=E7=9A=84=E9=80=9A=E7=9F=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../SecuritySetting/notice/manager/Index.jsx  |  50 ++++++
 .../SecuritySetting/notice/manager/Index.scss |  29 +++
 .../SecuritySetting/notice/myNotice/Index.jsx | 167 ++++++++++++++++++
 .../notice/myNotice/Index.scss                | 160 +++++++++++++++++
 4 files changed, 406 insertions(+)
 create mode 100644 src/forge/SecuritySetting/notice/manager/Index.jsx
 create mode 100644 src/forge/SecuritySetting/notice/manager/Index.scss
 create mode 100644 src/forge/SecuritySetting/notice/myNotice/Index.jsx
 create mode 100644 src/forge/SecuritySetting/notice/myNotice/Index.scss

diff --git a/src/forge/SecuritySetting/notice/manager/Index.jsx b/src/forge/SecuritySetting/notice/manager/Index.jsx
new file mode 100644
index 000000000..94bac3d22
--- /dev/null
+++ b/src/forge/SecuritySetting/notice/manager/Index.jsx
@@ -0,0 +1,50 @@
+import React from "react";
+
+import './Index.scss';
+
+function NoticeManager(props){
+
+  return(
+    <div>
+      <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 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>
+    </div>
+  )
+}
+export default NoticeManager;
\ No newline at end of file
diff --git a/src/forge/SecuritySetting/notice/manager/Index.scss b/src/forge/SecuritySetting/notice/manager/Index.scss
new file mode 100644
index 000000000..987e81118
--- /dev/null
+++ b/src/forge/SecuritySetting/notice/manager/Index.scss
@@ -0,0 +1,29 @@
+
+.cont-top{
+    font-size: 14px;
+    font-weight: 600;
+    height: 44px;
+    padding-left: 20px;
+    background: #FAFCFF;
+    border: 1px solid #89a4f7;
+    line-height: 44px;
+    border-top-left-radius: 3px;
+    border-top-right-radius: 3px;
+    margin-top: 25px;
+}
+
+.cont{
+    padding: 8px 20px 6px;
+    display: flex;
+    align-items: center;
+    font-size: 14px;
+
+    .title{
+        width: 320px;
+    }
+
+    label{
+        margin-left: 6px;
+        margin-right: 34px;
+    }
+}
\ No newline at end of file
diff --git a/src/forge/SecuritySetting/notice/myNotice/Index.jsx b/src/forge/SecuritySetting/notice/myNotice/Index.jsx
new file mode 100644
index 000000000..5a9bfff5d
--- /dev/null
+++ b/src/forge/SecuritySetting/notice/myNotice/Index.jsx
@@ -0,0 +1,167 @@
+import React, { useState, useEffect } from 'react';
+import { Badge, Button, Menu } from 'antd';
+import './Index.scss';
+
+function MyNotice(props) {
+
+  const [noticeType, setNoticeType] = useState("2");
+  const [selectedNum, setSelectedNum] = React.useState(0);
+  const [isBatchDelete, setIsBatchDelete] = useState(false);
+
+  function handleClick(e) {
+    setNoticeType(e.key);
+    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() {
+    var selectedNum = 0;
+    const checkbox = document.getElementsByClassName("checkbox");
+    for (var i = 0; i < checkbox.length; i++) {
+      checkbox[i].checked ? selectedNum++ : "";
+    }
+    document.getElementById("checkAll").checked = selectedNum === checkbox.length;
+    setSelectedNum(selectedNum === checkbox.length ? checkbox.length : selectedNum);
+  }
+
+
+  function onCheckAllChange(e) {
+    const checkbox = document.getElementsByClassName("checkbox");
+    for (var i = 0; i < checkbox.length; i++) {
+      checkbox[i].checked = e.target.checked;
+    }
+    setSelectedNum(e.target.checked ? checkbox.length : 0);
+  }
+
+
+  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="2"><Badge count={99}>@我</Badge></Menu.Item>
+        </Menu>
+        <button>所有消息一键已读</button>
+      </div>
+
+      <div className={isBatchDelete ? "invisible " : "visible"}>
+        <span className="alignCenter">
+          <input type="checkbox"></input>&nbsp;
+          仅看未读{noticeType === "1" ? "私信" : "消息"}（12）
+        </span>
+        {noticeType === "2" ? <button onClick={() => { setIsBatchDelete(true); }}>批量删除</button> : ""}
+      </div>
+
+      <div className={isBatchDelete ? 'visible' : 'invisible'}>
+        <span>
+          <input type="checkbox" id="checkAll" onChange={onCheckAllChange} />&nbsp;
+          全选&nbsp;&nbsp;&nbsp;已选择<span id="numberSpan">{selectedNum}</span>项
+        </span>
+        <div>
+          <button onClick={() => { setIsBatchDelete(false); }}>取消</button>&nbsp;&nbsp;&nbsp;&nbsp;
+          <button className="deleteBut">删除</button>
+        </div>
+      </div>
+      {noticeType === "1" ?
+        <div className="content">
+          <Badge count={5}><img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" /></Badge>
+          <div className="right">
+            <div className="content_top">
+              <span>蒋宇航</span>
+              <span className="timeSpan">4分钟前</span>
+              <a>删除</a>
+            </div>
+            <div>
+              <span className="highlightSpan">最好的OpenStack控制台，对标OpenStack社区Horizon项目，在易用性、页面性能等方面进行深度优化，提供简单控制台。</span>
+            </div>
+          </div>
+        </div>
+        : <div className="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> : ""}
+            <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>}
+          </div>
+        </div>}
+
+      {noticeType === "1" ?
+        <div className="content">
+          <Badge count={5}><img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" /></Badge>
+          <div className="right">
+            <div className="content_top">
+              <span>段甲生</span>
+              <span className="timeSpan">5分钟前</span>
+              <a>删除</a>
+            </div>
+            <div>
+              <span className="highlightSpan">gitlink平台 react 前端代码</span>
+            </div>
+          </div>
+        </div>
+        : <div className="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>
+          </div>
+          <div className="cont">
+            <span className="timeSpan">10分钟前</span>
+            <a>标记为已读</a>&nbsp;&nbsp;&nbsp;{noticeType==="0"?"":<a style={{marginRight:'10px'}}>删除</a>}
+          </div>
+        </div>}
+
+      {noticeType === "1" ?
+        <div className="content">
+          <Badge count={5}><img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" /></Badge>
+          <div className="right">
+            <div className="content_top">
+              <span>巴拉迪维</span>
+              <span className="timeSpan">7分钟前</span>
+              <a>删除</a>
+            </div>
+            <div>
+              <span className="highlightSpan">构建卷积神经网络，训练模型，预测模型效果。</span>
+            </div>
+          </div>
+        </div>
+        : <div className="content">
+          <div className="cont">
+            <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>
+          </div>
+          <div className="cont">
+            <span className="timeSpan">1小时前</span>
+            <a>标记为已读</a>&nbsp;&nbsp;&nbsp;{noticeType==="0"?"":<a style={{marginRight:'10px'}}>删除</a>}
+          </div>
+        </div>}
+    </div>
+  )
+}
+export default MyNotice;
\ No newline at end of file
diff --git a/src/forge/SecuritySetting/notice/myNotice/Index.scss b/src/forge/SecuritySetting/notice/myNotice/Index.scss
new file mode 100644
index 000000000..d4773048f
--- /dev/null
+++ b/src/forge/SecuritySetting/notice/myNotice/Index.scss
@@ -0,0 +1,160 @@
+.sshHead{
+  padding:0 10px 0px 0px !important;
+  .ant-badge{
+    font-size: 16px;
+    font-weight: 500;
+  }
+  .ant-menu-item{
+    padding:0px;
+    margin-right:50px!important;
+    height: 34px;
+    line-height: 0px;
+    position: relative;
+  }
+
+  li.ant-menu-item, .ant-menu-horizontal > .ant-menu-item {
+    border-bottom: 0px;
+  }
+
+  .ant-menu-item-selected{
+    color: #333333 !important;
+    font-weight: 700;
+    border-bottom: 2px solid #2A61FF !important;
+  }
+
+  .ant-badge-count, .ant-badge-dot, .ant-badge .ant-scroll-number-custom-component {
+    right: -4px;
+  }
+  .ant-badge-multiple-words {
+    padding: 0 0px;
+  }
+
+  .ant-menu-horizontal {
+    border-bottom: 0px solid #e8e8e8;
+  }
+
+  button{
+    padding:0 5px;
+  }
+}
+
+button {
+  color: #333333;
+  background: #FAFBFC;
+  border: 1px solid #D0D0D0;
+  border-radius: 4px;
+}
+button:hover {
+  background: #F3F4F6;
+}
+button:active {
+  background: #EBECF0;
+}
+
+.deleteBut{
+  color: #DF0002;
+}
+
+.deleteBut:hover{
+  background: #DF0002;
+  color:#FFFFFF;
+}
+
+.deleteBut:active{
+  background: #CE0002;
+  color:#FFFFFF;
+}
+
+.content {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 15px 0 15px 10px;
+  border-bottom: 1px solid #EEEEEE;
+
+  &:hover{
+    background: #F3F4F6;
+  }
+
+  & a{
+    display: none;
+  }
+
+  &:hover a{
+    display: block;
+    color: #466AFF;
+  }
+
+  &:hover .timeSpan{
+    display: none;
+  }
+  
+  i{
+    font-size: 16px !important;
+    margin-right: 5px;
+  }
+
+  .boldSpan{
+    font-weight: 600;
+    margin: 0 8px;
+  }
+
+  img{
+    width: 40px;
+    // margin-right: 10px;
+  }
+
+  .cont{
+    display: flex;
+    align-items: center;
+  }
+}
+
+.baselineDiv{
+  align-items: baseline;
+}
+
+.invisible {
+  display: none;
+}
+
+.visible {
+  display: flex;
+  justify-content: space-between;
+  height: 30px;
+  padding: 0 10px;
+  color: #333333;
+  button{
+    padding:0px 12px;
+  }
+}
+
+.ant-badge-count {
+  min-width: 16px;
+  height: 16px;
+  padding: 0 0;
+  font-size: 8px;
+  line-height: 16px;
+}
+
+.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;
+  }
+}
+
+.highlightSpan:hover{
+  color: #466AFF;
+}
+