diff --git a/src/forge/Head/Header.js b/src/forge/Head/Header.js index 9197f6915..6232439e1 100644 --- a/src/forge/Head/Header.js +++ b/src/forge/Head/Header.js @@ -13,7 +13,6 @@ 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 这部分脚本从公共脚本中直接调用 @@ -49,7 +48,6 @@ class NewHeader extends Component { settings: null, visiblemyss: false, openSearch:false, - noticeType:"0", } } componentDidMount() { @@ -259,43 +257,6 @@ class NewHeader extends Component { ) } - click = (e) =>{ - this.setState({ - noticeType: e.key, - }) - } - - messageList=()=>{ - let { noticeType } = this.state; - return( -
-
- - 系统通知 - 私信 - @我 - -
-
- - - - - - - - - - -
-
- 全部消息 - 所有{noticeType==="0"?"系统消息":noticeType==="1"?"私信":"@我"}一键已读 -
-
- ) - } - renderMenu=(personal)=>{ const { current_user } = this.props; return( @@ -478,7 +439,7 @@ class NewHeader extends Component { {/* {current_user && current_user.login && notice_url ? */} {current_user && current_user.login ? - + }> diff --git a/src/forge/Head/NoticeContent.jsx b/src/forge/Head/NoticeContent.jsx index ab637f96e..970b4eb37 100644 --- a/src/forge/Head/NoticeContent.jsx +++ b/src/forge/Head/NoticeContent.jsx @@ -1,19 +1,157 @@ import React, { useEffect, useState } from 'react'; -import { Badge} from 'antd'; +import { Badge, Menu} from 'antd'; import './header.scss'; +import '../SecuritySetting/notice/manager/Index.scss'; +import '../SecuritySetting/Index.scss'; +import '../SecuritySetting/notice/myNotice/Index.scss' +import { timeAgo } from '../../common/DateUtil'; +import { Link } from 'react-router-dom'; +import Axios from 'axios'; function NoticeContent(props) { - const noticeType = props.noticeType; + const[noticeType,setNoticeType] = useState("0"); + const[notice_unread_count,setNotice_unread_count]=useState();//未读系统通知数量 + const[letter_unread_count,setLetter_unread_count]=useState(10);//未读私信数量 + const[at_unread_count,setAt_unread_count]=useState();//未读@我数量 + const [message_list, setMessage_list] = useState([]); + + useEffect(() => { + const params = { + type:noticeType==="0"?"notification":noticeType==="2"?"atme":"", + limit: 20, + page: 0, + } + getMessageList(params); + }, [noticeType]) + + function getMessageList(params) { + console.log(params); + Axios.get(`/users/yystopf/messages.json`, { + params: params, + }).then((response) => { + setNotice_unread_count(response.data.unread_notification); + setAt_unread_count(response.data.unread_atme); + setMessage_list(response.data.messages); + console.log(message_list); + }) + } + const[letter_unread_list,setLetter_unread_list]=useState([ + { + id: 122, + read: 0, //是否已读，0未读，1已读 + send_name: "蒋宇航", //消息发送人 + send_login: "jiangYuHang", //消息发送人的login，前端根据这个跳转到消息内页 + content: "私信内容", //最近一条未读消息的内容 + create_time: "2019-03-04 18:08", //发送时间 + }, + { + id: 122, + read: 0, //是否已读，0未读，1已读 + send_name: "景霞", //消息发送人 + send_login: "jiangYuHang", //消息发送人的login，前端根据这个跳转到消息内页 + content: "最好的OpenStack控制台，对标OpenStack社区Horizon项目，在易用性、页面性能等方面进行深度优化，提供简单控制台。", //最近一条未读消息的内容 + create_time: "2019-03-04 18:08", //发送时间 + }, + { + id: 122, + read: 0, //是否已读，0未读，1已读 + send_name: "陈银花", //消息发送人 + send_login: "jiangYuHang", //消息发送人的login，前端根据这个跳转到消息内页 + content: "A Vue 3 Component Library. Fairly Complete. Customizable Themes. Uses TypeScript. Not too Slow.", //最近一条未读消息的内容 + create_time: "2019-03-04 18:08", //发送时间 + }, + { + id: 122, + read: 0, //是否已读，0未读，1已读 + send_name: "蒋宇航", //消息发送人 + send_login: "jiangYuHang", //消息发送人的login，前端根据这个跳转到消息内页 + content: "您好？", //最近一条未读消息的内容 + create_time: "2019-03-04 18:08", //发送时间 + }, + { + id: 122, + read: 0, //是否已读，0未读，1已读 + send_name: "蒋宇航", //消息发送人 + send_login: "jiangYuHang", //消息发送人的login，前端根据这个跳转到消息内页 + content: "Open-source high-performance RISC-V processor", //最近一条未读消息的内容 + create_time: "2019-03-04 18:08", //发送时间 + }, + { + id: 122, + read: 0, //是否已读，0未读，1已读 + send_name: "蒋宇航", //消息发送人 + send_login: "jiangYuHang", //消息发送人的login，前端根据这个跳转到消息内页 + content: "构建卷积神经网络，训练模型，预测模型效果。", //最近一条未读消息的内容 + create_time: "2019-03-04 18:08", //发送时间 + } + ]); + return( -
- - {noticeType === "0" ? : ""} -
- 蒋宇航： - 最好的OpenStack控制台，对标Open社区项目Horizon，在易... - 4分钟前 +
+
+ setNoticeType(e.key)}> + 系统通知 + 私信 + @我 + +
+
+ + {message_list.map(item=>{ + // 系统消息 + if(noticeType ==="0" && item.type === "notification" && item.status===1){ + let contentStr = item.content.endsWith("") && item.content.length>=50 && item.content.replace("","").substr(0,40)+"..."; + // let iconName = item.type===1?"icon-xitongtongzhiicon":item.type===2?"icon-xiaoxi2":item.type===3?"icon-yixiuicon1":item.type===4?"icon-hebingqingqiuicon":item.type===5?"icon-lichengbeiicon":"icon-daimakuicon1"; + return( +
+
30 && item.content.length<=34?'65px':""}}> + + +
+ =48?item.content.substr(0,48)+"...":item.content}}> + {item.time_ago} +
+
+
+ ) + }else if(noticeType ==="2" && item.type === "atme" && item.status===1){ + // @我 + return( +
+
30 && item.content.length<=42?'65px':""}}> + +
+ =56?item.content.substr(0,56)+"...@我":item.content}}> + {item.time_ago} +
+
+
+ ) + } + })} + + {/* 私信 */} + {noticeType==="1"?letter_unread_list.length>0?letter_unread_list.map(item=>{ + return( +
+
=30 && item.content.length<=34?'65px':""}}> + +
+ {item.send_name}： + =50?item.content.substr(0,50)+"...":item.content}}> + {item.create_time?timeAgo(item.create_time):"刚刚"} +
+
+
+ ) + }):"暂无数据":""} +
+
-
+ ) } export default NoticeContent; diff --git a/src/forge/Head/header.scss b/src/forge/Head/header.scss index 48de6c2ac..2dc5a657b 100644 --- a/src/forge/Head/header.scss +++ b/src/forge/Head/header.scss @@ -141,66 +141,84 @@ 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; + padding: 12px 1px 12px 0; } -.hoverNotice-head .ant-badge{ - font-size: 14px !important; -} +.hoverNotice-head{ + margin-left: 18px; + + & .ant-badge{ + font-size: 14px !important; + } + + &>.ant-menu-horizontal { + border-bottom: 1px solid #e8e8e8 !important; + } +} .hoverNotice-body{ height: 342px; overflow-y: scroll; + + & b{ + font-weight: 400; + text-shadow: 0.5px 0 0 #333; + } } .hoverNotice-buttom{ display: flex; justify-content: space-between; - margin-top: 12px; - + padding: 12px 18px; a{ color: #466AFF; } + a:hover{ + opacity:0.85; + } +} + +.noticeCont-back{ + &:hover{ + background: #F3F4F6; + } } .noticeCont{ display: flex; - padding:12px 10px 10px 0; + margin: 0 16px 0 18px; + padding: 12px 0 10px 0; + line-height: 24px; + border-bottom: 1px solid #EEEEEE; i{ - font-size: 16px !important; - margin-right: 5px; + font-size: 14px !important; + margin-right: 6px; + color: #333333; } - .text{ + .boldSpan{ + font-weight: 400; + text-shadow: 0.5px 0 0 #333; + } + + .noticeCont-text{ + + flex: auto; position: relative; max-height: 48px; color:#333333; - .boldSpan{ - font-weight: 600; - } .timeSpan{ position: absolute; - right: 0px; + right: 3px; + bottom: 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; -} + .at-name{ + margin-right: 12px; + } + } +} \ No newline at end of file diff --git a/src/forge/SecuritySetting/Index.jsx b/src/forge/SecuritySetting/Index.jsx index ab50dc720..50f1bb39b 100644 --- a/src/forge/SecuritySetting/Index.jsx +++ b/src/forge/SecuritySetting/Index.jsx @@ -57,16 +57,16 @@ function Index(props){
diff --git a/src/forge/SecuritySetting/Index.scss b/src/forge/SecuritySetting/Index.scss index 5dbb77f9e..57c8b88d3 100644 --- a/src/forge/SecuritySetting/Index.scss +++ b/src/forge/SecuritySetting/Index.scss @@ -55,8 +55,9 @@ } &.active a{ color: #333; - span{ - font-weight: 600; + .text-shodow-bold{ + font-weight: 400; + text-shadow: 0.5px 0 #333; } } &.active::before{ @@ -88,16 +89,23 @@ margin-bottom: 15px; justify-content: space-between; border-bottom: 1px solid #EEEEEE; - &>span{ + &>.text-shadow07{ font-size: 18px; - font-weight: 600; + font-weight: 400; color: #333333; + text-shadow: 0.5px 0 #333; } - & .add-ssh-but{ + &>.add-SSH-title{ + font-size: 16px; + font-weight: 400; + color: #333333; + text-shadow: 0.5px 0 #333; + } + & .but25{ padding:0 12px; - margin-bottom: 5px; } } + .ant-list-item{ padding:20px; border-bottom: 1px solid #eee!important; @@ -129,7 +137,7 @@ .questionLink{ padding:15px 20px; a{ - color: #4B7AFF; + color: #466AFF; &:hover{ text-decoration: underline; } @@ -167,4 +175,23 @@ flex:1; } } +} +.but25{ + margin-bottom: 5px; + background-color: #466AFF; + color: #fff; + border-color: #466AFF; + &:hover{ + opacity: 0.8; + background-color: #466AFF; + border-color: #466AFF; + } + &:active{ + opacity: 1; + background-color: #466AFF; + border-color: #466AFF; + } +} +.blue-Purple{ + color: #466AFF !important; } \ No newline at end of file diff --git a/src/forge/SecuritySetting/notice/manager/Index.jsx b/src/forge/SecuritySetting/notice/manager/Index.jsx index 5950f156c..ebe84beac 100644 --- a/src/forge/SecuritySetting/notice/manager/Index.jsx +++ b/src/forge/SecuritySetting/notice/manager/Index.jsx @@ -8,7 +8,7 @@ function NoticeManager(props){ return(
- 通知管理 + 通知管理
您可以通过通知管理来选择接受通知的方式 diff --git a/src/forge/SecuritySetting/notice/manager/Index.scss b/src/forge/SecuritySetting/notice/manager/Index.scss index 1b5729ae6..87a77a758 100644 --- a/src/forge/SecuritySetting/notice/manager/Index.scss +++ b/src/forge/SecuritySetting/notice/manager/Index.scss @@ -24,8 +24,6 @@ .manager-cont-title{ width: 320px; } - - } .notice01{ @@ -57,21 +55,33 @@ 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; + opacity: 0.8; + background-color: #466AFF; + border-color: #466AFF; } &:active{ + opacity: 1; background-color: #466AFF; border-color: #466AFF; } } + + ::-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; + } } \ 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 3a5eb1751..a2d5631b9 100644 --- a/src/forge/SecuritySetting/notice/myNotice/Index.jsx +++ b/src/forge/SecuritySetting/notice/myNotice/Index.jsx @@ -3,23 +3,51 @@ import { Badge, Button, Checkbox, Menu } from 'antd'; import './Index.scss'; import '../manager/Index.scss' import DelModal from '../../../Wiki/components/ModalFun'; +import Axios from 'axios'; +import { Link } from 'react-router-dom'; function MyNotice(props) { - const [noticeType, setNoticeType] = useState("1"); - const [selectedNum, setSelectedNum] = React.useState(0); + const [noticeType, setNoticeType] = useState("0"); + const [selectedNum, setSelectedNum] = useState(0); const [isBatchDelete, setIsBatchDelete] = useState(false); + const [notice_unread_count, setNotice_unread_count] = useState();//未读系统通知数量 + const [letter_unread_count, setLetter_unread_count] = useState(0);//未读私信数量 + const [at_unread_count, setAt_unread_count] = useState();//未读@我数量 + const [message_list, setMessage_list] = useState([]); + const [onlyUnread,setOnlyUnread] = useState(); + + useEffect(() => { + const params = { + type:noticeType==="0"?"notification":noticeType==="2"?"atme":"", + status:onlyUnread?onlyUnread:"", + limit: 20, + page: 0, + } + getMessageList(params); + }, [noticeType,onlyUnread]) + + function getMessageList(params) { + Axios.get(`/users/yystopf/messages.json`, { + params: params, + }).then((response) => { + setNotice_unread_count(response.data.unread_notification); + setAt_unread_count(response.data.unread_atme); + setMessage_list(response.data.messages); + }) + } function handleClick(e) { setNoticeType(e.key); if (e.key != "2") { setIsBatchDelete(false); } + } function onChange() { var selectedNum = 0; - const checkbox = document.getElementsByClassName("checkbox"); + const checkbox = document.getElementsByClassName("atme-checkbox"); for (var i = 0; i < checkbox.length; i++) { checkbox[i].checked ? selectedNum++ : ""; } @@ -29,7 +57,7 @@ function MyNotice(props) { function onCheckAllChange(e) { - const checkbox = document.getElementsByClassName("checkbox"); + const checkbox = document.getElementsByClassName("atme-checkbox"); for (var i = 0; i < checkbox.length; i++) { checkbox[i].checked = e.target.checked; } @@ -51,18 +79,16 @@ function MyNotice(props) {
- 系统通知 - 私信 - @我 + 系统通知 + 私信 + @我 - +
- {/*   - 仅看未读{noticeType === "1" ? "私信" : "消息"}（12） */} - 仅看未读{noticeType === "1" ? "私信" : "消息"}（12） + e.target.checked?setOnlyUnread(1):setOnlyUnread(2)}>仅看未读{noticeType === "1" ? `私信（12）` : noticeType==="0"?`消息（${notice_unread_count}）`:`消息（${at_unread_count}）`}
{noticeType === "2" ? : ""}
@@ -73,99 +99,49 @@ function MyNotice(props) { 全选   已选择 {selectedNum} 项
-      - +      +
- {noticeType === "1" ? -
props.history.push('/settings/notice/privateLetter')}> - -
-
- 蒋宇航 - 4分钟前 - 删除 + {message_list.map(item => { + // 系统消息 + // 消息类别 + // const iconName = item.source.startsWith("Issue")?"icon-yixiuicon1":item.source.startsWith("Project")?"icon-daimakuicon1":item.source.startsWith("Project")?"icon-daimakuicon1": + if(noticeType ==="0" && item.type === "notification"){ + return( +
+
+ {item.status === 1? :} + + window.location.href=(`${item.notification_url}`)}>{item.content} +
+
+ {item.time_ago} + 标记为已读 +
-
- 最好的OpenStack控制台，对标OpenStack社区Horizon项目,最好的OpenStack控制台，对标OpenStack社区Horizon项目，在易用性、页面性能等方面进行深度优化，提供简单控制台。 + ) + } else if(noticeType ==="2" && item.type === "atme"){ + //@我 + return( +
+
+ + + + {item.status === 1? :} + {item.content} + +
+
+ {item.time_ago} + 标记为已读   删除 +
-
-
- :
-
- - {/* 系统通知 */} - {noticeType === "0" ? : ""} - {noticeType === "0" ? : ""} - {noticeType === "2" ? : ""} - {noticeType === "2" ? : ""} - 蒋宇航在Gitlink/Gitlink新建易修:【Bug】链接地址错误 -
-
- 4分钟前 - 标记为已读   {noticeType === "0" ? "" : 删除} -
-
} - - {noticeType === "1" ? -
- -
-
- 段甲生 - 5分钟前 - 删除 -
-
- gitlink平台 react 前端代码 -
-
-
- :
-
- - {/* 系统通知 */} - {noticeType === "0" ? : ""} - {noticeType === "0" ? : ""} - {noticeType === "2" ? : ""} - {noticeType === "2" ? : ""} - 蒋宇航在蒋宇航/软件工程课程协同开发案例指派给你一个合并请求：请进行合并请求test请进行合并请求test请进行合并请求test请进行合并请求test请进行合并请求test请进行合并请求test -
-
- 10分钟前 - 标记为已读   {noticeType === "0" ? "" : 删除} -
-
} - - {noticeType === "1" ? -
- -
-
- 巴拉迪维 - 7分钟前 - 删除 -
-
- 构建卷积神经网络，训练模型，预测模型效果。 -
-
-
- :
-
- - {/* 系统通知 */} - {noticeType === "0" ?     : ""} - {noticeType === "0" ? : ""} - {noticeType === "2" ? : ""} - 你关注的仓库王涛/协同案例分析已被删除 -
-
- 1小时前 - 标记为已读   {noticeType === "0" ? "" : 删除} -
-
} + ) + } + })}
) } diff --git a/src/forge/SecuritySetting/notice/myNotice/Index.scss b/src/forge/SecuritySetting/notice/myNotice/Index.scss index 6b8afdd87..1a5ee3fb7 100644 --- a/src/forge/SecuritySetting/notice/myNotice/Index.scss +++ b/src/forge/SecuritySetting/notice/myNotice/Index.scss @@ -14,8 +14,8 @@ position: relative; } - #item{ - margin: 0 34px !important; + #item-private{ + margin: 0 24px 0 34px !important; } li.ant-menu-item, .ant-menu-horizontal > .ant-menu-item { @@ -24,12 +24,15 @@ .ant-menu-item-selected{ color: #333333 !important; - font-weight: 600; + font-weight: 400; + text-shadow: 0.5px 0 #333; border-bottom: 2px solid #2A61FF !important; } .ant-badge-count, .ant-badge-dot, .ant-badge .ant-scroll-number-custom-component { - right: -4px; + right: -6px; + -webkit-box-shadow: 0 0 0 0; + box-shadow: 0 0 0 0; } .ant-badge-multiple-words { padding: 0 0px; @@ -78,6 +81,7 @@ button:active { justify-content: space-between; padding: 15px 0 15px 10px; border-bottom: 1px solid #EEEEEE; + color: #333333; &:hover{ background: #F3F4F6; @@ -102,17 +106,44 @@ button:active { } .boldSpan{ - font-weight: 600; + font-weight: 400; + text-shadow: 0.5px 0 0 #333; margin: 0 8px; } - - img{ + & .currentImg{ width: 40px; - // margin-right: 10px; + height: 40px; + margin-left: 0px; + } + + & .private-letter-img + .ant-badge-count{ + top: 2px; + right: 5px; + height: 18px; + min-width: 18px; + line-height: 18px; + padding: 0 0; } .mynotice-cont{ padding:0; + + & .atme-checkbox{ + margin-right: 10px; + } + } + + & .ant-badge-count, .ant-badge-dot, .ant-badge .ant-scroll-number-custom-component { + -webkit-box-shadow: 0 0 0 0; + box-shadow: 0 0 0 0; + top: 3px; + right: 4px; + min-width: 8px; + height: 8px; + } + + & .system-notice-blank{ + margin-right: 14px; } } @@ -130,22 +161,15 @@ button:active { height: 30px; padding: 0 10px; color: #333333; + margin-bottom: 5px; button{ padding:0px 12px; } } -.ant-badge-count { - min-width: 16px; - height: 16px; - padding: 0 0; - font-size: 8px; - line-height: 16px; -} - .private-letter-right { flex: auto; - margin: 0px 10px; + margin: 0px 10px 0 16px; & div{ display: flex; justify-content: space-between; @@ -172,6 +196,7 @@ button:active { .at-length{ max-width: 48rem; + margin-left: 18px; } #numberSpan{ color: #466AFF; diff --git a/src/forge/SecuritySetting/notice/privateLetter/Index.jsx b/src/forge/SecuritySetting/notice/privateLetter/Index.jsx index be5b1bb36..517583770 100644 --- a/src/forge/SecuritySetting/notice/privateLetter/Index.jsx +++ b/src/forge/SecuritySetting/notice/privateLetter/Index.jsx @@ -2,6 +2,7 @@ import React, { useState, useEffect } from 'react'; import './Index.scss' import '../manager/Index.scss' import { Button, Input, Icon, Badge } from 'antd'; +import { Link } from 'react-router-dom'; function PrivateLetter(props){ @@ -15,12 +16,12 @@ function PrivateLetter(props){
- + 蒋宇航
- +
嗨在吗？哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈 @@ -30,7 +31,7 @@ function PrivateLetter(props){
- +
哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈 @@ -42,7 +43,7 @@ function PrivateLetter(props){
- +