From d61db13c22ff3781cdb13c8f1f085cd8547c73ad Mon Sep 17 00:00:00 2001
From: hongjli <3117313295@qq.com>
Date: 星期三, 16 四月 2025 11:12:36 +0800
Subject: [PATCH] 首页优化
---
src/components/layout/Navbar.tsx | 118 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++-
1 files changed, 115 insertions(+), 3 deletions(-)
diff --git a/src/components/layout/Navbar.tsx b/src/components/layout/Navbar.tsx
index 6b083af..b38d121 100644
--- a/src/components/layout/Navbar.tsx
+++ b/src/components/layout/Navbar.tsx
@@ -2,10 +2,11 @@
import Link from 'next/link';
import Image from 'next/image';
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useRef } from 'react';
import { useUserStore } from '@/store/userStore';
import { getUserInfo } from '@/services/userService';
import { useRouter } from 'next/navigation';
+import ApiService from '@/utils/api';
const Navbar = () => {
const [isMenuOpen, setIsMenuOpen] = useState(false);
@@ -13,8 +14,10 @@
const [activeMenu, setActiveMenu] = useState('');
const [isLoading, setIsLoading] = useState(false);
const [error, setError] = useState<string | null>(null);
+ const [showUserDropdown, setShowUserDropdown] = useState(false);
const { userInfo, token, setUserInfo } = useUserStore();
const router = useRouter();
+ const dropdownRef = useRef<HTMLDivElement>(null);
// 鐩戝惉婊氬姩浜嬩欢锛屼负瀵艰埅鏍忔坊鍔犳粴鍔ㄦ晥鏋�
useEffect(() => {
@@ -70,6 +73,20 @@
fetchUserInfo();
}, []); // 缁勪欢鎸傝浇鏃舵墽琛屼竴娆�
+ // 鐐瑰嚮澶栭儴鍏抽棴涓嬫媺鑿滃崟
+ useEffect(() => {
+ const handleClickOutside = (event: MouseEvent) => {
+ if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+ setShowUserDropdown(false);
+ }
+ };
+
+ document.addEventListener('mousedown', handleClickOutside);
+ return () => {
+ document.removeEventListener('mousedown', handleClickOutside);
+ };
+ }, []);
+
const handleNavigation = async (path: string, e: React.MouseEvent) => {
e.preventDefault();
@@ -97,6 +114,22 @@
localStorage.removeItem('token');
useUserStore.getState().clearUserInfo();
window.location.href = '/login';
+ }
+ };
+
+ const handleLogout = async () => {
+ try {
+ const response = await ApiService.post('/users/logout', {});
+ if (response.code === 200) {
+ // 娓呴櫎鏈湴瀛樺偍鐨則oken鍜岀敤鎴蜂俊鎭�
+ localStorage.removeItem('token');
+ useUserStore.getState().clearUserInfo();
+ window.location.href = '/'; // 鏀逛负璺宠浆鍒伴椤�
+ } else {
+ console.error('閫�鍑虹櫥褰曞け璐�:', response.message);
+ }
+ } catch (err) {
+ console.error('閫�鍑虹櫥褰曞嚭閿�:', err);
}
};
@@ -272,12 +305,91 @@
{userInfo ? (
// 鐢ㄦ埛淇℃伅鏄剧ず
- <div className="relative">
- <div className="relative overflow-hidden flex items-center justify-center px-4 lg:px-7 py-2">
+ <div className="relative" ref={dropdownRef}>
+ <div
+ className="relative overflow-hidden flex items-center justify-center px-4 lg:px-7 py-2 cursor-pointer group"
+ onClick={() => setShowUserDropdown(!showUserDropdown)}
+ >
+ {/* 娣诲姞鎮仠鑳屾櫙鏁堟灉 */}
+ <div className="absolute inset-0 bg-[#1E2B63]/0 group-hover:bg-[#1E2B63]/30 rounded-full transition-all duration-300"></div>
+
+ {/* 鐢ㄦ埛鍥炬爣 */}
+ <svg
+ className="w-5 h-5 text-[#6ADBFF] group-hover:text-[#FF6A88] transition-colors duration-300 mr-2"
+ fill="none"
+ stroke="currentColor"
+ viewBox="0 0 24 24"
+ >
+ <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
+ </svg>
+
<span className="relative z-10 bg-gradient-to-r from-[#6ADBFF] via-[#FF6A88] to-[#F5A800] bg-clip-text text-transparent font-medium">
{isLoading ? '鍔犺浇涓�...' : userInfo.nickname}
</span>
+
+ {/* 绠ご鍥炬爣 */}
+ <svg
+ className={`ml-2 h-4 w-4 text-[#6ADBFF] transition-all duration-300 transform ${
+ showUserDropdown ? 'rotate-180 text-[#FF6A88]' : ''
+ } group-hover:text-[#FF6A88]`}
+ fill="none"
+ stroke="currentColor"
+ viewBox="0 0 24 24"
+ >
+ <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+ </svg>
+
+ {/* 娣诲姞鍏夋檿鏁堟灉 */}
+ <div className="absolute inset-0 -z-10">
+ <div className="absolute inset-0 bg-gradient-to-r from-[#6ADBFF]/0 via-[#6ADBFF]/5 to-[#6ADBFF]/0 opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-full"></div>
+ </div>
</div>
+
+ {/* 涓嬫媺鑿滃崟 */}
+ {showUserDropdown && (
+ <div className="absolute right-0 mt-2 w-48 rounded-xl shadow-lg overflow-hidden animate-fadeIn">
+ {/* 鑿滃崟鑳屾櫙 */}
+ <div className="backdrop-blur-xl bg-gradient-to-b from-[#1E2B63]/95 to-[#0A1033]/95 border border-[#6ADBFF]/20">
+ {/* 椤堕儴瑁呴グ */}
+ <div className="h-[1px] w-full bg-gradient-to-r from-transparent via-[#6ADBFF]/50 to-transparent"></div>
+
+ <div className="py-2">
+ <button
+ onClick={handleLogout}
+ className="w-full text-left px-5 py-3 text-sm text-white hover:bg-[#6ADBFF]/10 transition-all duration-300 flex items-center group relative overflow-hidden cursor-pointer"
+ >
+ {/* 鎮仠鑳屾櫙鍔ㄧ敾 */}
+ <div className="absolute inset-0 bg-gradient-to-r from-[#6ADBFF]/0 via-[#6ADBFF]/5 to-[#6ADBFF]/0 translate-x-[-100%] group-hover:translate-x-[100%] transition-transform duration-1000"></div>
+
+ {/* 鍥炬爣瀹瑰櫒 */}
+ <div className="relative">
+ <div className="absolute -inset-1 bg-gradient-to-r from-[#6ADBFF]/0 via-[#6ADBFF]/10 to-[#6ADBFF]/0 rounded-full blur-sm opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
+ <svg
+ className="relative z-10 mr-3 h-5 w-5 text-[#6ADBFF] group-hover:text-[#FF6A88] transition-colors duration-300"
+ fill="none"
+ stroke="currentColor"
+ viewBox="0 0 24 24"
+ >
+ <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
+ </svg>
+ </div>
+
+ {/* 鏂囧瓧 */}
+ <span className="relative z-10 font-medium group-hover:text-[#FF6A88] transition-colors duration-300">
+ 閫�鍑虹櫥褰�
+ </span>
+
+ {/* 鍙充晶鎸囩ず鍣� */}
+ <div className="absolute right-0 top-[10%] bottom-[10%] w-[2px] bg-gradient-to-b from-[#6ADBFF] to-[#FF6A88] transform scale-y-0 group-hover:scale-y-100 transition-transform duration-300"></div>
+ </button>
+ </div>
+
+ {/* 搴曢儴瑁呴グ */}
+ <div className="h-[1px] w-full bg-gradient-to-r from-transparent via-[#6ADBFF]/50 to-transparent"></div>
+ </div>
+ </div>
+ )}
+
{error && (
<div className="absolute top-full mt-2 left-0 right-0 px-4 py-2 bg-red-500/90 text-white text-sm rounded-md">
{error}
--
Gitblit v1.9.3