518 lines
17 KiB
JavaScript
518 lines
17 KiB
JavaScript
import React, { Component } from 'react';
|
||
import AccountProfile from "../../modules/user/AccountProfile";
|
||
import { getImageUrl } from 'educoder'
|
||
import axios from 'axios';
|
||
import cookie from 'react-cookies';
|
||
import { notification , Dropdown ,Popover, Menu,Badge } from 'antd';
|
||
import { Link } from 'react-router-dom';
|
||
|
||
import LoginDialog from '../../modules/login/LoginDialog';
|
||
// import HeadSearch from '../Component/HeadSearch';
|
||
|
||
import AddProjectModal from './AddProjectModal';
|
||
import '../../modules/tpm/TPMIndex.css';
|
||
import CheckProfile from '../Component/ProfileModal/Profile';
|
||
|
||
import './header.scss';
|
||
import NoticeContent from './NoticeContent';
|
||
import MainLogo from './img/logo.png';
|
||
// TODO 这部分脚本从公共脚本中直接调用
|
||
|
||
window._header_componentHandler = null;
|
||
// 非trustie链接则新开页跳转
|
||
const str = ['www.trustie.net','forgeplus.trustie.net','forum.trustie.net','testforgeplus.trustie.net']
|
||
class NewHeader extends Component {
|
||
constructor(props) {
|
||
super(props)
|
||
this.state = {
|
||
Addcoursestypes: false,
|
||
tojoinitemtype: false,
|
||
tojoinclasstitle: undefined,
|
||
rolearr: ["", ""],
|
||
Checkboxteacherchecked: false,
|
||
Checkboxstudentchecked: false,
|
||
Checkboxteachingchecked: false,
|
||
Checkboxteachertype: false,
|
||
Checkboxteachingtype: false,
|
||
code_notice: false,
|
||
RadioGroupvalue: undefined,
|
||
submitapplications: false,
|
||
isRender: false,
|
||
showTrial: false,
|
||
occupation: 0,
|
||
mydisplay: false,
|
||
settings: null,
|
||
visiblemyss: false,
|
||
openSearch:false,
|
||
visible:false, //浮动消息框展示控制
|
||
showSubMenu: false,
|
||
zoneList: [], // 专区列表
|
||
isHome: true, // 是否首页
|
||
}
|
||
}
|
||
componentDidMount() {
|
||
if (this.props.match.path !== '/' && this.props.match.path !== '/sf') {
|
||
this.setState({
|
||
isHome: false
|
||
})
|
||
}
|
||
const header = document.querySelector('.homeHeader');
|
||
|
||
window.addEventListener('scroll', () => {
|
||
const threshold = window.innerWidth * 0.25;
|
||
|
||
if (window.scrollY > threshold) {
|
||
header.classList.add('active');
|
||
} else {
|
||
header.classList.remove('active');
|
||
}
|
||
});
|
||
|
||
|
||
// 用personal判断是否需要再次请求settings接口，解决登录注册之后无设置按钮的情况
|
||
let settings = localStorage.chromesetting && localStorage.chromesetting !=="undefined" &&JSON.parse(localStorage.chromesetting);
|
||
if(settings){
|
||
this.setState({
|
||
settings
|
||
})
|
||
}
|
||
window._header_componentHandler = this;
|
||
|
||
this.getZoneList(settings && settings.common.zone +'/zoneAdmin/api')
|
||
|
||
try {
|
||
window.sessionStorage.setItem("yslgeturls", JSON.stringify(window.location.href))
|
||
} catch (e) {}
|
||
}
|
||
|
||
|
||
openNotification = (messge) => {
|
||
notification.open({
|
||
message: "提示",
|
||
description:
|
||
messge,
|
||
});
|
||
};
|
||
|
||
componentWillReceiveProps(newProps, oldProps) {
|
||
this.setState({
|
||
user: newProps.user
|
||
})
|
||
// if(!newProps.user ||(newProps.user && !newProps.user.login)){
|
||
// cookie.remove("login");
|
||
// }
|
||
}
|
||
|
||
educoderlogin = () => {
|
||
//登录账号
|
||
if(window.location.pathname === "/"){
|
||
window.location.href="/login";
|
||
}else{
|
||
this.setState({
|
||
isRender: true
|
||
})
|
||
}
|
||
}
|
||
educoderloginysl = () => {
|
||
//退出账号时清除登录页面的下次自动登录（用户再次打开登录页面时下次自动登录框不勾选）
|
||
cookie.remove("autologin");
|
||
cookie.remove("login");
|
||
//退出账号
|
||
var url = `/accounts/logout.json`;
|
||
axios.get((url)).then((result) => {
|
||
if (result !== undefined) {
|
||
window.location.href = "/";
|
||
}
|
||
}).catch((error) => {
|
||
console.log(error);
|
||
})
|
||
}
|
||
|
||
hideAddcoursestypes = () => {
|
||
this.setState({
|
||
Addcoursestypes: false
|
||
})
|
||
};
|
||
HideAddcoursestypess = (i) => {
|
||
this.setState({
|
||
Addcoursestypes: false,
|
||
mydisplay: true,
|
||
occupation: i,
|
||
})
|
||
};
|
||
ModalCancelsy = () => {
|
||
this.setState({
|
||
mydisplay: false,
|
||
})
|
||
};
|
||
|
||
// 关闭
|
||
cancelModulationModels = () => {
|
||
this.setState({ isRenders: false })
|
||
}
|
||
|
||
//修改登录方法
|
||
Modifyloginvalue = () => {
|
||
this.setState({
|
||
isRender: false,
|
||
})
|
||
}
|
||
|
||
hideAccountProfile = () => {
|
||
this.setState({
|
||
AccountProfiletype: false
|
||
})
|
||
};
|
||
//获取数据为空的时候
|
||
gettablogourlnull = () => {
|
||
this.setState({
|
||
settings: undefined
|
||
});
|
||
var link = document.createElement('link'),
|
||
oldLink = document.getElementById('dynamic-favicon');
|
||
link.id = 'dynamic-favicon';
|
||
link.rel = 'shortcut icon';
|
||
link.href = "/react/build/./favicon.ico";
|
||
if (oldLink) {
|
||
document.head.removeChild(oldLink);
|
||
}
|
||
document.head.appendChild(link);
|
||
};
|
||
|
||
//获取数据的时候
|
||
gettablogourldata = (response) => {
|
||
document.title = response.data.setting.name;
|
||
var link = document.createElement('link'),
|
||
oldLink = document.getElementById('dynamic-favicon');
|
||
link.id = 'dynamic-favicon';
|
||
link.rel = 'shortcut icon';
|
||
link.href = '/' + response.data.setting.tab_logo_url;
|
||
if (oldLink) {
|
||
document.head.removeChild(oldLink);
|
||
}
|
||
document.head.appendChild(link);
|
||
}
|
||
|
||
handleVisibleChanges = (boll) => {
|
||
this.setState({
|
||
visiblemyss: boll,
|
||
})
|
||
}
|
||
|
||
geturlsdata = () => {
|
||
let url = "/setting.json";
|
||
axios.get(url).then((response) => {
|
||
if (response && response.data) {
|
||
this.setState({ settings: response.data.setting });
|
||
localStorage.setItem('chromesetting', JSON.stringify(response.data.setting));
|
||
localStorage.setItem('chromesettingresponse', JSON.stringify(response));
|
||
} else {
|
||
this.gettablogourlnull();
|
||
}
|
||
}).catch((error) => {
|
||
this.gettablogourlnull();
|
||
});
|
||
}
|
||
|
||
getZoneList = (httpUrl) =>{
|
||
const url = `${httpUrl}/zone/open/list`
|
||
axios.get(url).then((response) => {
|
||
if (response && response.data && response.data.data && response.data.data.length > 0) {
|
||
let newArray = [];
|
||
response.data.data.forEach((e, i) => {
|
||
newArray[i] = {
|
||
name: e.name,
|
||
link: `/zone/${e.key}`
|
||
}
|
||
});
|
||
this.setState({ zoneList: newArray })
|
||
} else {
|
||
}
|
||
}).catch((error) => {
|
||
});
|
||
}
|
||
|
||
matchpaths = (url) => {
|
||
const { match } = this.props;
|
||
const isDev = window.location.port == 3007;
|
||
const isdev2= isDev ?'https://testforgeplus.trustie.net':`https://${window.location.hostname}`;
|
||
let str = "";
|
||
if(url.indexOf("http")>-1){
|
||
str = isdev2+match.url;
|
||
}else{
|
||
str = match.path;
|
||
}
|
||
if (url && (str === url || (str === url+'/'))) {
|
||
return true
|
||
}else {
|
||
return false
|
||
}
|
||
}
|
||
|
||
matchZone = () => {
|
||
return window.location.href.includes('/zone/')
|
||
}
|
||
|
||
checkProfile=(url)=>{
|
||
const { showCompeleteDialog , completeProfile } = this.props;
|
||
if(!completeProfile){
|
||
showCompeleteDialog && showCompeleteDialog();
|
||
}else{
|
||
window.location.href(url);
|
||
}
|
||
}
|
||
|
||
addMenu=(list)=>{
|
||
return(
|
||
list && list.length >0 &&
|
||
<div className="dropdownFlex">
|
||
<Menu>
|
||
{
|
||
list.map((item,key)=>{
|
||
return(
|
||
(item.name !=="加入课堂" && item.name !=="加入开发项目") &&
|
||
<Menu.Item key={item.name+key}>
|
||
<CheckProfile {...this.props} sureFunc={()=>{window.location.href=item.url}}>{item.name}</CheckProfile>
|
||
</Menu.Item>
|
||
)
|
||
})
|
||
}
|
||
<Menu.Item>
|
||
<AddProjectModal {...this.props} showNotification={this.props.showNotification}/>
|
||
</Menu.Item>
|
||
</Menu>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
renderMenu=(personal)=>{
|
||
const { current_user } = this.props;
|
||
return(
|
||
<Menu className="currentMenu">
|
||
<Menu.Item>
|
||
<span className="currentName" title={current_user && current_user.username}>{current_user && current_user.username}</span>
|
||
</Menu.Item>
|
||
{
|
||
personal && personal.length > 0 && personal.map((item,key)=>{
|
||
return(
|
||
<li key={key}><a href={item.url} target="_blank">{item.name}</a></li>
|
||
)
|
||
})
|
||
}
|
||
{/* <li><Link to={`/settings/profile`}>设置</Link></li> */}
|
||
<Menu.Item><a onClick={() => this.educoderloginysl()}>退出</a></Menu.Item>
|
||
</Menu>
|
||
)
|
||
}
|
||
|
||
handleVisibleChange = visible => {
|
||
this.setState({ visible });
|
||
};
|
||
|
||
render() {
|
||
const { resetUserInfo ,showNotification,publicNav,mygetHelmetapi} = this.props;
|
||
let settings = mygetHelmetapi;
|
||
let current_user = this.props.user;
|
||
let {
|
||
AccountProfiletype,
|
||
user,
|
||
isRender,
|
||
visible,
|
||
showSubMenu,
|
||
zoneList,
|
||
isHome
|
||
} = this.state;
|
||
const navbarlist = [
|
||
{
|
||
"name": "菌用可控开源社区",
|
||
"link": "/factory",
|
||
"index": "1",
|
||
"hidden": false
|
||
},
|
||
{
|
||
"name": "社区动态",
|
||
"link": "/news",
|
||
"index": "5",
|
||
"hidden": false
|
||
},
|
||
{
|
||
"name": "软件工厂专区",
|
||
"link": "/sf",
|
||
"index": "4",
|
||
"hidden": false
|
||
},
|
||
{
|
||
"name": "开源软件仓库",
|
||
"link": "/explore",
|
||
"index": "2",
|
||
"hidden": false
|
||
},
|
||
{
|
||
"name": "供应链治理",
|
||
"link": "/governance",
|
||
"index": "3",
|
||
"hidden": false
|
||
},
|
||
{
|
||
"name": "协作开发",
|
||
"link": "/projects",
|
||
"index": "3",
|
||
"hidden": false
|
||
},
|
||
{
|
||
"name": "论坛交流",
|
||
"link": "/forums",
|
||
"index": "6",
|
||
"hidden": false
|
||
}
|
||
]
|
||
const navbarByRoute = settings ? settings.navbar : [];
|
||
// const navbarByRoute = ["/factory", "/explore", "/projects", "/sf", "/news", "/forums"].includes(this.props.match.path) ? navbarlist : settings ? settings.navbar : []
|
||
// let search_url = settings && settings.common && settings.common.search;
|
||
return (
|
||
<div className={`${ publicNav ? 'newHeaders publicNav':'newHeaders'} ${ isHome && 'homeHeader' }`} id="nHeader">
|
||
<div className="headerContent">
|
||
{isRender === true ?
|
||
<LoginDialog
|
||
{...this.props}
|
||
{...this.state}
|
||
Modifyloginvalue={() => this.Modifyloginvalue()}
|
||
/> : ""}
|
||
|
||
{AccountProfiletype === true ?
|
||
<AccountProfile
|
||
hideAccountProfile={() => this.hideAccountProfile()}
|
||
{...this.props}
|
||
{...this.state}
|
||
/> : ""}
|
||
{/* <div style={{width:"78px"}}>
|
||
{
|
||
publicNav &&
|
||
<a href={'https://www.ccf.org.cn/'} className={"fl"}>
|
||
<img src={MainLogo} alt="ccf" width="63px"/>
|
||
</a>
|
||
}
|
||
</div> */}
|
||
{
|
||
settings && settings.nav_logo_url ?
|
||
<a href={settings && settings.new_course.default_url} className={"fl mr30"}>
|
||
<img alt="菌用可控开源社区" className="logoimg" src={getImageUrl(`/${settings.nav_logo_url}`)}></img>
|
||
</a>
|
||
:
|
||
""
|
||
}
|
||
{/* <div className="head-nav pr"> */}
|
||
{
|
||
navbarByRoute && navbarByRoute.length > 0 ?
|
||
<ul id="header-nav" className="head-nav pr">
|
||
{
|
||
navbarByRoute.map((item, key) => {
|
||
if (item.hidden) return
|
||
var new_link = item.link;
|
||
var is_hidden = item.hidden;
|
||
var waiLian = (new_link && str.filter(item=>new_link.indexOf(item)>-1) );
|
||
// var wl = waiLian && waiLian.length>0;
|
||
var wl = new_link && new_link.startsWith("http");
|
||
if (item.name === '特色专区') {
|
||
// 特色专区下拉菜单
|
||
return zoneList && zoneList.length > 0 ? <li
|
||
className={`${this.matchZone() === true ? 'active drop-li' : 'drop-li'}`}
|
||
onMouseOver={ () => { this.setState( {showSubMenu: true }) } }
|
||
onMouseOut={ () => { this.setState( {showSubMenu: false }) } }
|
||
>
|
||
<a onClick={ () => { this.setState( {showSubMenu: true }) } }>特色专区</a>
|
||
<ul className={ `drop-down ${ showSubMenu ? 'drop-down-show' : '' }` } style={{ height : showSubMenu ? `${ current_user && current_user.login ? ((zoneList.length+1) * 46) : (zoneList.length * 46)}px` : 0 }}>
|
||
{
|
||
zoneList.map((e, k) => {
|
||
return <li className="drop-down-item" key={ k }><a href={ e.link } className="task-hide" title={ e.name } target="_blank">{ e.name }</a></li>
|
||
})
|
||
}
|
||
{current_user && current_user.login && <li className="drop-down-item"><Link to="/zone/apply" target="_blank">+申请创建</Link></li> }
|
||
</ul>
|
||
</li> : ''
|
||
}else if(item.name.includes("供应链")){
|
||
return (
|
||
<li key={key}
|
||
className={`${this.matchpaths(new_link) === true ? 'pr active' : 'pr'}`}
|
||
style={{display:!is_hidden ? 'flex' : 'none'} }
|
||
>
|
||
<a onClick={()=>{
|
||
if(current_user && !current_user.login){
|
||
this.props.showLoginDialog();
|
||
}else{
|
||
// current_user && window.open(`${item.link}?token=${current_user.admin ? "admin123" : current_user.user_id}`)
|
||
current_user && window.open(`${item.link}`)
|
||
}
|
||
}}>{item.name}</a>
|
||
</li>
|
||
)
|
||
} else {
|
||
return (
|
||
<li key={key}
|
||
className={`${this.matchpaths(new_link) === true ? 'pr active' : 'pr'}`}
|
||
style={{display:!is_hidden ? 'flex' : 'none'} }
|
||
>
|
||
<a href={new_link} target={wl ? "_blank":"_self"}>{item.name}</a>
|
||
</li>
|
||
)
|
||
}
|
||
})
|
||
}
|
||
</ul>
|
||
: ""
|
||
}
|
||
{/* </div> */}
|
||
<div className="head-right">
|
||
{/* { search_url && <HeadSearch {...this.props}/>} */}
|
||
{
|
||
!isHome && current_user && (current_user.main_site || current_user.login) && (settings && settings.add && settings.add.length>0)?
|
||
<Dropdown overlay={this.addMenu(settings && settings.add)} placement="bottomRight">
|
||
<img src={require(`./img/add.png`)} alt="" width="16px" className="mr15 ml30"/>
|
||
</Dropdown>:""
|
||
}
|
||
|
||
{/* { (settings && settings.common && settings.common.notice) && (current_user && current_user.login)?
|
||
<Popover
|
||
overlayClassName="notice-popover"
|
||
placement={`bottomRight`}
|
||
content={<NoticeContent visible={visible} current_user={current_user} showNotification={showNotification} resetUserInfo={resetUserInfo}/>}
|
||
visible={visible}
|
||
onVisibleChange={this.handleVisibleChange}
|
||
destroyTooltipOnHide
|
||
>
|
||
<Link to={"/settings/notice"} className="message-icon">
|
||
{current_user && <Badge count={current_user.message_unread_total}>
|
||
<img src={require(`./img/ring.png`)} alt="" width="16px" className="ml15 mr15"/>
|
||
</Badge>}
|
||
</Link>
|
||
</Popover>
|
||
: ""
|
||
} */}
|
||
</div>
|
||
{!user || (user && !user.login) ?
|
||
<span className="font-15 ml30">
|
||
<a onClick={() => this.educoderlogin()} className="mr5 color-white">登录</a>
|
||
{
|
||
(settings && settings.common && settings.common.register) ?
|
||
publicNav ?
|
||
<a href='/register' className="regBtn">立即注册</a>
|
||
:
|
||
<span><em className="vertical-line"></em><a className="ml5 color-white" href='/register'>注册</a></span>
|
||
:""
|
||
}
|
||
</span>
|
||
:
|
||
<Dropdown placement={`bottomRight`} overlay={this.renderMenu(settings && settings.personal)}>
|
||
<a href={`/${this.props.current_user && this.props.current_user.login}`}>
|
||
<img alt="头像" src={getImageUrl(`/${user.image_url}`)} className="currentImg"></img>
|
||
</a>
|
||
</Dropdown>
|
||
}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
}
|
||
|
||
export default NewHeader;
|