增强Header导航栏用户交互功能

- 集成用户状态管理，实现登录状态展示
- 添加用户头像和昵称显示，支持下拉菜单操作
- 新增登录/注册入口按钮，优化未登录用户引导
- 完善移动端响应式布局，适配小屏幕设备
- 添加退出登录功能，支持用户账户切换

src/layout/Header.css

@@ -117,6 +117,38 @@
   color: #c8363d;
 }
 
+/* 用户信息区域 */
+.header-actions {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-left: 24px;
+}
+
+.user-info {
+  padding: 4px 12px;
+  border-radius: 20px;
+  transition: background-color 0.3s ease;
+}
+
+.user-info:hover {
+  background-color: rgba(200, 54, 61, 0.08);
+}
+
+.user-nickname {
+  font-size: 14px;
+  font-weight: 500;
+  color: #2c2c2c;
+  max-width: 120px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.auth-buttons .ant-btn {
+  font-weight: 500;
+}
+
 /* 移动端菜单按钮 */
 .mobile-menu-btn {
   display: none;
@@ -146,6 +178,10 @@
   .mobile-menu-btn {
     display: flex;
   }
+
+  .user-nickname {
+    max-width: 80px;
+  }
 }
 
 @media (max-width: 576px) {
@@ -166,4 +202,21 @@
   .logo-subtitle {
     font-size: 10px;
   }
+
+  .header-actions {
+    margin-left: 8px;
+  }
+
+  .user-nickname {
+    display: none;
+  }
+
+  .auth-buttons {
+    gap: 4px;
+  }
+
+  .auth-buttons .ant-btn {
+    padding: 4px 12px;
+    font-size: 13px;
+  }
 }

src/layout/Header.tsx

@@ -3,8 +3,8 @@
  */
 
 import React, { useState, useEffect } from 'react'
-import { Link, useLocation } from 'react-router-dom'
-import { Menu, Drawer, Button, Space } from 'antd'
+import { Link, useLocation, useNavigate } from 'react-router-dom'
+import { Menu, Drawer, Button, Space, Avatar, Dropdown } from 'antd'
 import {
   MenuOutlined,
   HomeOutlined,
@@ -13,17 +13,25 @@ import {
   ExperimentOutlined,
   FileTextOutlined,
   InfoCircleOutlined,
+  UserOutlined,
+  LoginOutlined,
+  LogoutOutlined,
 } from '@ant-design/icons'
 import type { MenuProps } from 'antd'
+import { useUserStore } from '@store/useUserStore'
 import './Header.css'
 
 type MenuItem = Required<MenuProps>['items'][number]
 
 const Header: React.FC = () => {
   const location = useLocation()
+  const navigate = useNavigate()
   const [scrolled, setScrolled] = useState(false)
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
 
+  // 获取用户状态
+  const { user, isAuthenticated, logout } = useUserStore()
+
   // 监听滚动事件，添加导航栏背景效果
   useEffect(() => {
     const handleScroll = () => {
@@ -63,6 +71,30 @@ const Header: React.FC = () => {
     },
   ]
 
+  // 处理退出登录
+  const handleLogout = () => {
+    logout()
+    navigate('/')
+  }
+
+  // 用户下拉菜单
+  const userMenuItems: MenuItem[] = [
+    {
+      key: 'user-center',
+      icon: <UserOutlined />,
+      label: <Link to="/user/center">个人中心</Link>,
+    },
+    {
+      type: 'divider',
+    },
+    {
+      key: 'logout',
+      icon: <LogoutOutlined />,
+      label: '退出登录',
+      onClick: handleLogout,
+    },
+  ]
+
   // 获取当前选中的菜单项
   const getSelectedKeys = () => {
     const path = location.pathname
@@ -108,6 +140,29 @@ const Header: React.FC = () => {
             />
           </nav>
 
+          {/* 用户信息区域 */}
+          <div className="header-actions">
+            {isAuthenticated && user ? (
+              <Dropdown menu={{ items: userMenuItems }} placement="bottomRight">
+                <Space className="user-info" style={{ cursor: 'pointer' }}>
+                  <Avatar src={user.avatar} icon={<UserOutlined />} />
+                  <span className="user-nickname">{user.nickname}</span>
+                </Space>
+              </Dropdown>
+            ) : (
+              <Space className="auth-buttons">
+                <Link to="/login">
+                  <Button type="text" icon={<LoginOutlined />}>
+                    登录
+                  </Button>
+                </Link>
+                <Link to="/register">
+                  <Button type="primary">注册</Button>
+                </Link>
+              </Space>
+            )}
+          </div>
+
           {/* 移动端菜单按钮 */}
           <Button
             type="text"