63 lines
1.9 KiB
TypeScript
63 lines
1.9 KiB
TypeScript
import { useState, useEffect } from 'react'
|
|
import { Link, useLocation } from 'react-router-dom'
|
|
import api from '@/services/api'
|
|
import type { User } from '@/types'
|
|
|
|
interface Props {
|
|
user: User | null
|
|
onLogout: () => void
|
|
}
|
|
|
|
export default function Sidebar({ user, onLogout }: Props) {
|
|
const { pathname } = useLocation()
|
|
const [unreadCount, setUnreadCount] = useState(0)
|
|
|
|
useEffect(() => {
|
|
if (!user) {
|
|
setUnreadCount(0)
|
|
return
|
|
}
|
|
api.get<{ count: number }>('/notifications/count')
|
|
.then(({ data }) => setUnreadCount(data.count))
|
|
.catch(() => {})
|
|
const timer = setInterval(() => {
|
|
api.get<{ count: number }>('/notifications/count')
|
|
.then(({ data }) => setUnreadCount(data.count))
|
|
.catch(() => {})
|
|
}, 30000)
|
|
return () => clearInterval(timer)
|
|
}, [user])
|
|
|
|
const links = user ? [
|
|
{ to: '/', icon: '📊', label: '仪表盘' },
|
|
{ to: '/issues', icon: '📋', label: 'Issues' },
|
|
{ to: '/projects', icon: '📁', label: '项目' },
|
|
{ to: '/milestones', icon: '🏁', label: '里程碑' },
|
|
{ to: '/notifications', icon: '🔔', label: '通知' + (unreadCount > 0 ? ' (' + unreadCount + ')' : '') },
|
|
{ to: '/monitor', icon: '📡', label: 'Monitor' },
|
|
] : [
|
|
{ to: '/monitor', icon: '📡', label: 'Monitor' },
|
|
]
|
|
|
|
return (
|
|
<nav className="sidebar">
|
|
<div className="sidebar-header">
|
|
<h1>⚓ HarborForge</h1>
|
|
</div>
|
|
<ul className="nav-links">
|
|
{links.map((l) => (
|
|
<li key={l.to} className={pathname === l.to || (l.to !== '/' && pathname.startsWith(l.to)) ? 'active' : ''}>
|
|
<Link to={l.to}>{l.icon} {l.label}</Link>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
{user && (
|
|
<div className="sidebar-footer">
|
|
<span>👤 {user.username}</span>
|
|
<button onClick={onLogout}>退出</button>
|
|
</div>
|
|
)}
|
|
</nav>
|
|
)
|
|
}
|