TopBar.tsx
2.44 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
import { useLocation, useNavigate } from 'react-router-dom'
import { useAppDispatch, useAppSelector } from '@/store'
import { closeTab, type TabItem } from '@/store/tabs'
import { loggedOut } from '@/store/auth'
import { IconAntler, IconBell, IconHome, IconMenu, IconSearch, IconUser } from './icons'
interface Props {
navOpen: boolean
onToggleNav: () => void
}
export default function TopBar({ navOpen, onToggleNav }: Props) {
const navigate = useNavigate()
const location = useLocation()
const dispatch = useAppDispatch()
const tabs = useAppSelector(s => s.tabs.items)
const user = useAppSelector(s => s.auth.user)
const isHome = location.pathname === '/'
const handleTabClick = (t: TabItem) => navigate(t.path)
const handleClose = (e: React.MouseEvent, t: TabItem) => {
e.stopPropagation()
const idx = tabs.findIndex(x => x.key === t.key)
dispatch(closeTab(t.key))
if (location.pathname === t.path) {
const next = tabs[idx + 1] || tabs[idx - 1]
navigate(next ? next.path : '/')
}
}
const handleLogout = () => {
dispatch(loggedOut())
navigate('/login', { replace: true })
}
return (
<div className="topbar">
<div className="logo" title="主页" onClick={() => navigate('/')}>
<IconAntler />
</div>
<div className="tabs">
<button className={`nav-btn ${navOpen ? 'active' : ''}`} onClick={onToggleNav}>
<IconMenu />
全部导航
</button>
<div className={`tab ${isHome ? 'active' : ''}`} onClick={() => navigate('/')}>
<span className="ic"><IconHome /></span>
主页
</div>
{tabs.map(t => (
<div
key={t.key}
className={`tab ${location.pathname === t.path ? 'active' : ''}`}
onClick={() => handleTabClick(t)}
>
{t.title}
<span className="close" onClick={e => handleClose(e, t)}>✕</span>
</div>
))}
</div>
<div className="right">
<span className="ic" title="搜索"><IconSearch /></span>
<span className="ic" title="通知"><IconBell /></span>
<div className="user" onClick={handleLogout} title="点击退出登录">
<span className="ic"><IconUser /></span>
{user ? `${user.sUserName}(${user.sUserType})` : '未登录'}
<span style={{ fontSize: 10 }}>▾</span>
</div>
<span className="more">⋯</span>
</div>
</div>
)
}