88 lines
2.0 KiB
JavaScript
88 lines
2.0 KiB
JavaScript
import { message } from 'antd'
|
|
import React, { memo, useEffect, useState } from 'react'
|
|
import { useLocation, useNavigate } from 'react-router-dom'
|
|
import './index.less'
|
|
// 顶部tab
|
|
const MENULIST = [
|
|
{
|
|
key: 'questionBank',
|
|
title: '刷题',
|
|
route: '/question-bank'
|
|
},
|
|
{
|
|
key: 'prictiseQuestion',
|
|
title: '练题',
|
|
route: '/brush-question'
|
|
},
|
|
{
|
|
key: 'practiceQuestions',
|
|
title: '鸡圈',
|
|
route: '/practice-questions'
|
|
},
|
|
{
|
|
key: 'interList',
|
|
title: '模拟面试',
|
|
route: '/inter-list'
|
|
}
|
|
]
|
|
|
|
// 顶部tab映射
|
|
const mapMenu = {
|
|
'/question-bank': 'questionBank'
|
|
}
|
|
|
|
const TopMenu = () => {
|
|
const [currentKey, setCurrentKey] = useState('questionBank')
|
|
const location = useLocation()
|
|
const navigate = useNavigate()
|
|
|
|
useEffect(() => {
|
|
const cur = MENULIST.filter(t => t.route === location.pathname)
|
|
if (cur.length) {
|
|
setCurrentKey(cur[0].key)
|
|
} else {
|
|
setCurrentKey('')
|
|
}
|
|
}, [location.pathname])
|
|
|
|
/**
|
|
* 切换item
|
|
* @param {*} item
|
|
* @returns
|
|
*/
|
|
const changeMenu = item => () => {
|
|
const userInfoStorage = localStorage.getItem('userInfo')
|
|
if (!userInfoStorage) {
|
|
return message.info('请登录')
|
|
}
|
|
if (item.key === 'questionBank') {
|
|
if (location.pathname === '/question-bank') return
|
|
navigate('/question-bank')
|
|
setCurrentKey(item.key)
|
|
} else {
|
|
return message.info('敬请期待')
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className='top-menu-list'>
|
|
{MENULIST.map((item, index) => {
|
|
return (
|
|
<div
|
|
className={`top-menu-item ${currentKey === item.key ? 'top-menu-item-active' : ''}`}
|
|
key={item.key + index}
|
|
onClick={changeMenu(item)}
|
|
>
|
|
<div className='top-menu-text'>{item.title}</div>
|
|
<div
|
|
className={`top-menu-line ${currentKey === item.key ? 'top-menu-line-active' : ''}`}
|
|
></div>
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default memo(TopMenu)
|