Gitlink
/
forgeplus-react
32
0
Fork 29
Code Issues Pull Requests 1 Releases 1 Wiki Activity

通知中心-我的通知

This commit is contained in:
谢思 2021-09-07 11:14:53 +08:00
parent cb58481daf
commit b6cf496efa
4 changed files with 406 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
src/forge/SecuritySetting/notice/manager/Index.jsx Normal file
View File

@ -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;

29
src/forge/SecuritySetting/notice/manager/Index.scss Normal file
View File

@ -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;
}
}

167
src/forge/SecuritySetting/notice/myNotice/Index.jsx Normal file
View File

@ -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;

160
src/forge/SecuritySetting/notice/myNotice/Index.scss Normal file
View File

@ -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;
}