import React , { useEffect , useCallback , useRef , MouseEvent , memo } from 'react' ; import { useSelector , commitMutation } from '@/store' ; import { useLocation , useHistory } from 'react-router-dom' ; import { CloseOutlined } from '@ant-design/icons' ; import DynamicIcon from '@/components/base/dynamic-icon/DynamicIcon' ; import Swiper from '@/components/base/swiper/Swiper' ; import Utils from '@/lin/utils/util' ; import { changeReuseTab } from '@/store/mutations/app.mutations' ; import { getStageByName , getStageByRoute , getStageList , } from '@/store/getters/app.getters' ; import { IHistoryItem } from '@/types/store' ; import { IRouterItem } from '@/types/project' ; import './reuse-tab.scss' ; const swiperParameters = { slidesPerView : 'auto' , initialSlide : 0 , effect : 'slide' , spaceBetween : 1 , preventClicks : false , freeMode : true , mousewheel : { sensitivity : 1.5 } , observer : true } ; export default memo ( function ReuseTab ( ) { const logined = useSelector ( state => state . app . logined ) ; const histories = useSelector ( state => state . app . histories ) ; const defaultRoute = useSelector ( state => state . app . defaultRoute ) ; const stageConfig = useSelector ( state => state . app . currentRoute . config ) ; const { pathname } = useLocation ( ) ; const history = useHistory ( ) ; const stageList = getStageList ( ) ; const historiesRef = useRef < IHistoryItem [ ] > ( ) ; const changeRoute = useCallback ( async ( config ) => { if ( ! config ) { return ; } let findResult ; if ( config . stageId ) { findResult = getStageByName ( config . stageId ) ; } else { findResult = getStageByRoute ( config . route ) ; } if ( ! findResult ) { return ; } if ( histories . some ( item => item . routePath === config . route ) ) { return ; } const ele = { } as IHistoryItem ; ele . stageId = config . name ; ele . routePath = config . route ; ele . title = config . title ; ele . icon = config . icon ; commitMutation ( changeReuseTab ( [ ele , ... histories ] ) ) ; } , [ histories ] ) ; useEffect ( ( ) => { historiesRef . current = histories ; } , [ histories ] ) ; useEffect ( ( ) => { function saveHistories ( ) { if ( logined ) { localStorage . setItem ( 'history' , JSON . stringify ( historiesRef . current ) ) ; } } window . onbeforeunload = ( ) => { saveHistories ( ) ; } ; return ( ) => saveHistories ( ) ; } , [ logined , historiesRef ] ) ; useEffect ( ( ) => { function init ( ) { const histories = [ ] ; const localHistoryStr = localStorage . getItem ( 'history' ) || '[]' ; const localHistory = JSON . parse ( localHistoryStr ) ; localHistory . forEach ( item => { let findResult ; if ( item . stageId ) { findResult = getStageByName ( item . stageId ) ; } else { findResult = getStageByRoute ( item . routePath ) ; } if ( ! findResult ) { return ; } histories . push ( { ... item , stageId : findResult . name } ) ; } ) ; if ( histories . length === 0 || ! histories . some ( item => item . routePath === pathname ) ) { changeRoute ( stageConfig ) ; } else { commitMutation ( changeReuseTab ( histories ) ) ; } } init ( ) ; } , [ ] ) ; useEffect ( ( ) => { if ( stageConfig && stageConfig . route === pathname ) { changeRoute ( stageConfig ) ; } } , [ changeRoute , stageConfig , pathname ] ) ; function close ( ev , index ) { ev . stopPropagation ( ) ; if ( pathname === histories [ index ] . routePath ) { if ( index > 0 ) { const { routePath } = histories [ index - 1 ] ; routePath && history . push ( routePath ) ; } else if ( histories . length > 1 ) { const { routePath } = histories [ 1 ] ; routePath && history . push ( routePath ) ; } else { history . push ( defaultRoute ) ; } } const _histories = [ ... histories ] ; _histories . splice ( index , 1 ) ; commitMutation ( changeReuseTab ( _histories ) ) ; } function onLinkClick ( route ) { if ( pathname !== route ) { history . push ( route ) ; } } const visible = histories . length > 1 ; return ( < div className = 'reuse-tab-container' r - if = { visible } > < Swiper parameters = { swiperParameters } > { histories . map ( ( item , index ) => { const { stageId , icon , title } = item ; const stageItem = stageId && stageList [ stageId ] ? stageList [ stageId ] : { } ; const { route } = stageItem ; return route ? ( < div className = 'swiper-slide reuse-tab-item' key = { index } > { } < div className = { `link ${ pathname === route && 'active' }` } onClick = { ( ) => onLinkClick ( route ) } > < DynamicIcon type = { icon } style = { { fontSize : '16px' } } / > < span style = { { padding : '0 5px' } } > { Utils . cutString ( title , 8 ) } < /span> < span className = 'icon-close' onClick = { ev => close ( ev , index ) } > < CloseOutlined className = 'icon-close-icon' / > < /span> < /div> < /div>) : (<div key={index}></div > ) ; } ) } < /Swiper> < /div>); } ) ;