1. Add 登陆功能

2. 调整字体大小
3. 新增部分功能

frontend/src/components/layout/Sidebar.tsx

@@ -1,9 +1,10 @@
 import { NavLink } from 'react-router-dom';
 import {
   LayoutDashboard, Radio, Monitor, FileText,
-  Shield, MessageSquare, Sun, Moon
+  Shield, MessageSquare, Sun, Moon, LogOut
 } from 'lucide-react';
 import { useTheme } from '../../contexts/ThemeContext';
+import { useAuth } from '../../contexts/AuthContext';
 
 interface NavItem {
   to: string;
@@ -49,8 +50,17 @@ function NavGroup({ title, items }: { title: string; items: NavItem[] }) {
   );
 }
 
+/** Avatar initials from username (up to 2 chars). */
+function initials(name: string): string {
+  const parts = name.trim().split(/[\s_-]+/);
+  if (parts.length >= 2) return (parts[0][0] + parts[1][0]).toUpperCase();
+  return name.slice(0, 2).toUpperCase();
+}
+
 export function Sidebar() {
   const { theme, toggleTheme } = useTheme();
+  const { user, logout } = useAuth();
+
   return (
     <aside className="sidebar">
       <div className="sidebar-brand">
@@ -69,15 +79,28 @@ export function Sidebar() {
 
       <div className="sidebar-footer">
         <div className="sidebar-user">
-          <div className="user-avatar">TS</div>
+          <div className="user-avatar">{user ? initials(user.username) : 'TS'}</div>
           <div className="user-info">
-            <div className="user-name">Analyst</div>
-            <div className="user-role">T-Systems</div>
+            <div className="user-name">{user?.username ?? 'Analyst'}</div>
+            <div className="user-role">
+              {user ? (
+                <span className="user-badge">{user.role}</span>
+              ) : (
+                'T-Systems'
+              )}
+            </div>
           </div>
         </div>
-        <button className="theme-btn" onClick={toggleTheme} title="Toggle theme">
-          {theme === 'dark' ? <Sun size={14} /> : <Moon size={14} />}
-        </button>
+        <div style={{ display: 'flex', gap: 4 }}>
+          <button className="theme-btn" onClick={toggleTheme} title="Toggle theme">
+            {theme === 'dark' ? <Sun size={14} /> : <Moon size={14} />}
+          </button>
+          {user && (
+            <button className="logout-btn" onClick={logout} title="Sign out">
+              <LogOut size={14} />
+            </button>
+          )}
+        </div>
       </div>
     </aside>
   );