feat: allow public monitor route without login and add monitor page

src/components/Sidebar.tsx

@@ -1,7 +1,7 @@
-import { useState, useEffect } from 'react'
-import { Link, useLocation } from 'react-router-dom'
-import api from '@/services/api'
-import type { User } from '@/types'
+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
@@ -13,23 +13,30 @@ export default function Sidebar({ user, onLogout }: Props) {
   const [unreadCount, setUnreadCount] = useState(0)
 
   useEffect(() => {
-    api.get<{ count: number }>('/notifications/count')
+    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')
+      api.get<{ count: number }>(/notifications/count)
         .then(({ data }) => setUnreadCount(data.count))
         .catch(() => {})
     }, 30000)
     return () => clearInterval(timer)
-  }, [])
+  }, [user])
 
-  const links = [
-    { to: '/', icon: '📊', label: '仪表盘' },
-    { to: '/issues', icon: '📋', label: 'Issues' },
-    { to: '/projects', icon: '📁', label: '项目' },
-    { to: '/milestones', icon: '🏁', label: '里程碑' },
-    { to: '/notifications', icon: '🔔', label: `通知${unreadCount > 0 ? ` (${unreadCount})` : ''}` },
+  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 (
@@ -39,7 +46,7 @@ export default function Sidebar({ user, onLogout }: Props) {
       </div>
       <ul className="nav-links">
         {links.map((l) => (
-          <li key={l.to} className={pathname === l.to || (l.to !== '/' && pathname.startsWith(l.to)) ? 'active' : ''}>
+          <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>
         ))}