60 lines
1.5 KiB
TypeScript
60 lines
1.5 KiB
TypeScript
import { useState, useEffect, useCallback } from 'react'
|
|
import type { NavTab } from '@/components/layout/app-sidebar'
|
|
|
|
const VALID_TABS: NavTab[] = [
|
|
'overview',
|
|
'connections',
|
|
'routes',
|
|
'topology',
|
|
'interfaces',
|
|
'settings',
|
|
]
|
|
|
|
function getTabFromHash(hash: string): NavTab {
|
|
const cleanHash = hash.replace(/^#\/?/, '').trim().toLowerCase()
|
|
if (!cleanHash || cleanHash === '') {
|
|
return 'overview'
|
|
}
|
|
// 向后兼容旧的 dashboard hash
|
|
if (cleanHash === 'dashboard') {
|
|
return 'overview'
|
|
}
|
|
const matchingTab = VALID_TABS.find((tab) => tab === cleanHash)
|
|
return matchingTab || 'overview'
|
|
}
|
|
|
|
export function useHashRoute() {
|
|
const [currentTab, setCurrentTabState] = useState<NavTab>(() =>
|
|
getTabFromHash(window.location.hash)
|
|
)
|
|
|
|
useEffect(() => {
|
|
const handleHashChange = () => {
|
|
const newTab = getTabFromHash(window.location.hash)
|
|
setCurrentTabState(newTab)
|
|
}
|
|
|
|
// If current hash is empty, initialize with #/overview
|
|
if (!window.location.hash || window.location.hash === '#' || window.location.hash === '#/') {
|
|
window.location.hash = '#/overview'
|
|
} else if (window.location.hash === '#/dashboard') {
|
|
window.location.hash = '#/overview'
|
|
}
|
|
|
|
window.addEventListener('hashchange', handleHashChange)
|
|
return () => {
|
|
window.removeEventListener('hashchange', handleHashChange)
|
|
}
|
|
}, [])
|
|
|
|
const navigate = useCallback((tab: NavTab) => {
|
|
window.location.hash = `#/${tab}`
|
|
setCurrentTabState(tab)
|
|
}, [])
|
|
|
|
return {
|
|
currentTab,
|
|
navigate,
|
|
}
|
|
}
|