forked from Gitlink/forgeplus-react
372 lines
12 KiB
TypeScript
Executable File
372 lines
12 KiB
TypeScript
Executable File
import React, { FC, useEffect, useState, useMemo } from 'react'
|
||
import {
|
||
UserModelState,
|
||
HomePageModelState,
|
||
GlobalSettingModelState,
|
||
ConnectProps,
|
||
Loading,
|
||
connect,
|
||
Dispatch,
|
||
Link,
|
||
useHistory,
|
||
ShixunHomeworksModelState
|
||
} from 'umi'
|
||
import { Layout, Modal, Row, Col, Input, Dropdown, message } from 'antd'
|
||
import { teacherQQIcon } from '@/components/ImagesIcon';
|
||
import {
|
||
SearchOutlined,
|
||
} from '@ant-design/icons'
|
||
const { Header } = Layout
|
||
import styles from './index.less'
|
||
import './search-input.less'
|
||
import Join from './components/Join'
|
||
import User from './components/User'
|
||
import ENV from '@/utils/env'
|
||
import { getEngineerUrl } from '@/service/user';
|
||
import { userInfo } from '@/utils/authority'
|
||
import { openNewWindow, checkIsClientExam, setDocumentTitle } from '@/utils/util'
|
||
import BeginnerBottom from '@/components/HomeModal/Beginnerbottom'
|
||
|
||
const { Search } = Input
|
||
|
||
interface PageProps extends Partial<ConnectProps> {
|
||
homePage: HomePageModelState
|
||
user: UserModelState
|
||
globalSetting: GlobalSettingModelState
|
||
shixunHomeworks: ShixunHomeworksModelState
|
||
loading: boolean
|
||
isLogin?: boolean
|
||
dispatch: Dispatch
|
||
}
|
||
|
||
interface RouterLink {
|
||
[key: string]: any
|
||
}
|
||
|
||
export function getCourseParam() {
|
||
let query = window.location.pathname
|
||
const type = query.split('/')
|
||
const params = {} as any
|
||
if (type[1] == 'classrooms' && type.length > 3 && !type[4]?.includes('newgold') && !type[5]?.includes('newgold') && type[2] !== 'coursesId') {
|
||
params.course_id = type[2]
|
||
}
|
||
if (type[1] === 'shixuns' && type.length > 3) {
|
||
params.objective_type = 'shixun'
|
||
params.objective_id = type[2]
|
||
}
|
||
if (type[1] === 'paths' && type.length > 3) {
|
||
params.objective_type = 'path'
|
||
params.objective_id = type[2]
|
||
}
|
||
|
||
return {
|
||
...params,
|
||
...{ school: 1 }
|
||
}
|
||
}
|
||
|
||
const routerLinks: RouterLink = {
|
||
首页: `/`,
|
||
'/paths': { link: `/paths`, key: 1 },
|
||
'/shixuns': { link: `/shixuns`, key: 2 },
|
||
'/classrooms': { link: `/classrooms`, key: 3 },
|
||
'/competitions': { link: `/competitions`, key: 4 },
|
||
'/moop_cases': { link: `/moop_cases`, key: 5 },
|
||
'/forums': { link: `/forums`, key: 6 },
|
||
'/recruitment': { link: `/competitions/index`, key: 7 },
|
||
'/three': { link: `/three`, key: 7 },
|
||
|
||
}
|
||
|
||
const showLinks = [
|
||
'/', '/classrooms', '/account/profile', '/account/profile/edit', '/classrooms/new'
|
||
]
|
||
|
||
const HeaderComponents: FC<PageProps> = ({
|
||
homePage,
|
||
user,
|
||
globalSetting,
|
||
loading,
|
||
dispatch,
|
||
location,
|
||
isLogin = false,
|
||
shixunHomeworks,
|
||
...props
|
||
}) => {
|
||
const history = useHistory()
|
||
const [openSearch, setOpenSearch] = useState(false)
|
||
const [activeKey, setActiveKey] = useState(-1)
|
||
const [QQVisible, setQQVisible] = useState<boolean>(false)
|
||
const payload = getCourseParam()
|
||
let pathname = location.pathname;
|
||
useEffect(() => {
|
||
dispatch({
|
||
type: 'user/getNavigationInfo',
|
||
payload: {
|
||
...payload,
|
||
},
|
||
})
|
||
}, [globalSetting.name])
|
||
|
||
// console.log('-----------',location.pathname==='/classrooms'?'1':'2');
|
||
|
||
|
||
useEffect(() => {
|
||
// if(parseInt(localStorage.getItem('Noviceguide'))===1){
|
||
// if(location.pathname.indexOf('/account/profile')===0){
|
||
|
||
// }else if(location.pathname.indexOf('/classrooms')!=0){
|
||
// dispatch({
|
||
// type: 'shixunHomeworks/setActionTabs',
|
||
// payload: {
|
||
// key: '隐藏',
|
||
// },
|
||
// })
|
||
// }
|
||
// }
|
||
|
||
if (shixunHomeworks.actionTabs.key === '底部弹窗') {
|
||
|
||
if (showLinks?.includes(location?.pathname) || location?.pathname.indexOf('/classrooms') === 0) {
|
||
|
||
} else {
|
||
dispatch({
|
||
type: 'shixunHomeworks/setActionTabs',
|
||
payload: {
|
||
key: '隐藏',
|
||
},
|
||
})
|
||
}
|
||
}
|
||
|
||
// const key: string = Object.keys(routerLinks).filter(item => location.pathname.indexOf(item) > -1)[0]
|
||
// setActiveKey(routerLinks?.[key]?.['key'])
|
||
}, [location.pathname])
|
||
|
||
useEffect(() => {
|
||
//判断 如果刷新了 直接吧状态赋空 防止点击埋点出现问题
|
||
if (shixunHomeworks.actionTabs.key === '底部弹窗') {
|
||
|
||
} else if (shixunHomeworks.actionTabs.key) {
|
||
|
||
} else {
|
||
localStorage.setItem('Noviceguide', '0')
|
||
}
|
||
}, [shixunHomeworks.actionTabs.key])
|
||
|
||
|
||
|
||
|
||
useEffect(() => {
|
||
if (globalSetting?.setting) {
|
||
globalSetting?.setting?.navbar?.map(function (val: any, key: number) {
|
||
if (location.pathname.indexOf(val.link) > -1) {
|
||
setActiveKey(key)
|
||
}
|
||
})
|
||
if (activeKey === -1) {
|
||
setDocumentTitle(globalSetting.setting.name)
|
||
} else {
|
||
setDocumentTitle(globalSetting.setting.navbar[activeKey]?.name || globalSetting.setting.name)
|
||
}
|
||
|
||
}
|
||
}, [globalSetting?.setting])
|
||
|
||
const logoUrl = useMemo(() => {
|
||
if (!!globalSetting?.setting?.nav_logo_url) {
|
||
return `${ENV.IMG_SERVER}/${globalSetting?.setting?.nav_logo_url}`
|
||
} else {
|
||
return `${ENV.IMG_SERVER}/images/avatars/LaboratorySetting/1nav?t=${new Date().getTime()}`
|
||
}
|
||
}, [globalSetting?.setting?.nav_logo_url])
|
||
|
||
function onGlobalSearch(value: string) {
|
||
history.push('/search?value=' + value)
|
||
}
|
||
|
||
const SearchInput = () => {
|
||
if (openSearch) {
|
||
return (
|
||
<div
|
||
onBlur={() => {
|
||
setTimeout(() => {
|
||
setOpenSearch(false)
|
||
}, 300)
|
||
}}
|
||
>
|
||
<Search placeholder="请输入搜索关键字"
|
||
className={`search-input mr20`}
|
||
onSearch={onGlobalSearch}
|
||
autoFocus={true}
|
||
/>
|
||
</div>
|
||
)
|
||
} else {
|
||
return (
|
||
<span className="iconfont icon-sousuo font18 current ml15 mr15" onClick={() => {
|
||
setOpenSearch(true)
|
||
// history.push('/search?value=')
|
||
}} />
|
||
)
|
||
}
|
||
}
|
||
|
||
const handleCert = async (e: React.MouseEvent) => {
|
||
e.preventDefault();
|
||
const res = await getEngineerUrl();
|
||
if (res?.data?.engineer_url) {
|
||
document.location.href = res?.data?.engineer_url
|
||
} else if (res?.status != 401) {
|
||
setQQVisible(true)
|
||
}
|
||
}
|
||
|
||
if (globalSetting.showHeader && globalSetting.showHeaderFooter) {
|
||
return (
|
||
<Layout className={`${styles.header} ${styles.headerFixed}`}>
|
||
<Header className="header">
|
||
<section className={styles['edu-menu']}>
|
||
{/* <Link onClick={() => {
|
||
dispatch({
|
||
type: 'shixunHomeworks/setActionTabs',
|
||
payload: {
|
||
key: '',
|
||
},
|
||
})
|
||
}} to="/">
|
||
<img
|
||
className={styles.logo}
|
||
title={globalSetting.setting?.name}
|
||
src={logoUrl}
|
||
/>
|
||
</Link> */}
|
||
|
||
<ul className={`${styles.menu} ${checkIsClientExam() && "ml0"}`}>
|
||
{
|
||
checkIsClientExam() && <li>
|
||
<a href="/">考试系统</a>
|
||
</li>
|
||
}
|
||
{
|
||
globalSetting.setting?.nav_logo_url &&
|
||
<a style={{marginLeft:"78px"}} href={globalSetting.setting?.common?.main_site_url}><img width="155px" src={ENV.FORGE_SERVER+'/'+ globalSetting.setting?.nav_logo_url} className="mr50"/></a>
|
||
}
|
||
{!checkIsClientExam() && globalSetting.setting &&
|
||
globalSetting.setting.navbar.map(function (
|
||
v: { name: string, link: string, hidden: boolean },
|
||
k: number,
|
||
) {
|
||
if (!v.hidden) {
|
||
return (
|
||
<li
|
||
key={k}
|
||
className={
|
||
v.link === (`${ENV.FORGE_SERVER}/competitions`)
|
||
? styles.actived
|
||
: ''
|
||
}
|
||
>
|
||
{v?.name === '教学课堂' && <Link onClick={() => {
|
||
if (localStorage.getItem('Noviceguide') === '0') {
|
||
|
||
} else {
|
||
dispatch({
|
||
type: 'shixunHomeworks/setActionTabs',
|
||
payload: {
|
||
key: '底部弹窗',
|
||
type: 5,
|
||
text: <div>
|
||
非常棒，咱们已经到达【教学课堂】，平台上已经有几千位老师创建了自己的教学课堂，你也可以轻松完成哟！现在请您点击页面上 “新建课堂”按钮开始新建自己的课堂~
|
||
</div>
|
||
},
|
||
})
|
||
}
|
||
|
||
}} className={shixunHomeworks.actionTabs.type === 4 ? styles.classromediv : ''} dangerouslySetInnerHTML={{ __html: v.name }} to={v.link}></Link>}
|
||
{v?.name != '教学课堂' && v.link.indexOf("http") < 0 && <Link onClick={() => {
|
||
dispatch({
|
||
type: 'shixunHomeworks/setActionTabs',
|
||
payload: {
|
||
key: '',
|
||
},
|
||
})
|
||
}} dangerouslySetInnerHTML={{ __html: v.name }} to={v.link}></Link>}
|
||
{v?.name != '教学课堂' && v.link.indexOf("http") > -1 && <a
|
||
dangerouslySetInnerHTML={{ __html: v.name }} href={v.link}></a>}
|
||
</li>
|
||
)
|
||
}
|
||
})}
|
||
{/* {(!checkIsClientExam() && !isLogin && globalSetting.setting?.main_site) && <li
|
||
key={'999'}
|
||
>
|
||
<a href={``} onClick={handleCert}>工程认证</a>
|
||
</li>} */}
|
||
</ul>
|
||
<div className='search-bar'>
|
||
{
|
||
!checkIsClientExam() && <>
|
||
<SearchInput />
|
||
{!isLogin && !!user?.userInfo?.login && <Join />}
|
||
{
|
||
!!user?.userInfo?.login &&
|
||
<a className="iconfont icon-xiaoxilingdang c-white ml15 mr15 font18 relative" href ={`${ENV.FORGE_SERVER}/settings/notice`}>{user?.userInfo?.message_unread_total > 0 ? <span className={styles.newslight}></span>:""}</a>
|
||
}
|
||
</>
|
||
}
|
||
|
||
{!isLogin && <User payload={payload} />}
|
||
</div>
|
||
</section>
|
||
<Modal
|
||
centered
|
||
destroyOnClose={true}
|
||
visible={QQVisible}
|
||
title="提示"
|
||
width="500px"
|
||
// footer={null}
|
||
okText="立即联系"
|
||
cancelText="取消"
|
||
onOk={() => {
|
||
openNewWindow("https://qm.qq.com/cgi-bin/qm/qr?k=DWdqQHAbbfw7_rqm0d-Q_vDn5H6bMp91&jump_from=webapi")
|
||
}}
|
||
onCancel={() => setQQVisible(false)}
|
||
>
|
||
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
|
||
<p>您可以在QQ服务群向管理员申请，获得继续操作的权限</p>
|
||
<img src={teacherQQIcon} width={200} height={200} />
|
||
<p>群号：693542422 </p>
|
||
</div>
|
||
</Modal >
|
||
</Header>
|
||
<BeginnerBottom />
|
||
</Layout>
|
||
)
|
||
} else {
|
||
return <></>
|
||
}
|
||
|
||
}
|
||
export default connect(
|
||
({
|
||
homePage,
|
||
loading,
|
||
user,
|
||
globalSetting,
|
||
shixunHomeworks
|
||
}: {
|
||
homePage: HomePageModelState
|
||
user: UserModelState
|
||
globalSetting: GlobalSettingModelState
|
||
shixunHomeworks: ShixunHomeworksModelState
|
||
loading: Loading
|
||
}) => ({
|
||
homePage,
|
||
user,
|
||
globalSetting,
|
||
loading: loading.models.index,
|
||
shixunHomeworks
|
||
}),
|
||
)(HeaderComponents)
|