From c24796b17ad8d027822a5590c42a2f61f98b460c Mon Sep 17 00:00:00 2001
From: hongjli <3117313295@qq.com>
Date: 星期三, 16 四月 2025 10:51:21 +0800
Subject: [PATCH] 首页优化
---
src/components/layout/Navbar.tsx | 73 ++++++++++++++++++++++++++++--------
1 files changed, 56 insertions(+), 17 deletions(-)
diff --git a/src/components/layout/Navbar.tsx b/src/components/layout/Navbar.tsx
index a9b0d02..6b083af 100644
--- a/src/components/layout/Navbar.tsx
+++ b/src/components/layout/Navbar.tsx
@@ -5,6 +5,7 @@
import { useState, useEffect } from 'react';
import { useUserStore } from '@/store/userStore';
import { getUserInfo } from '@/services/userService';
+import { useRouter } from 'next/navigation';
const Navbar = () => {
const [isMenuOpen, setIsMenuOpen] = useState(false);
@@ -13,6 +14,7 @@
const [isLoading, setIsLoading] = useState(false);
const [error, setError] = useState<string | null>(null);
const { userInfo, token, setUserInfo } = useUserStore();
+ const router = useRouter();
// 鐩戝惉婊氬姩浜嬩欢锛屼负瀵艰埅鏍忔坊鍔犳粴鍔ㄦ晥鏋�
useEffect(() => {
@@ -31,8 +33,13 @@
// 鑾峰彇鐢ㄦ埛淇℃伅
useEffect(() => {
const fetchUserInfo = async () => {
- if (!token) return;
-
+ // 妫�鏌ocalStorage涓槸鍚︽湁token
+ const storedToken = localStorage.getItem('token');
+ if (!storedToken) {
+ useUserStore.getState().clearUserInfo();
+ return;
+ }
+
setIsLoading(true);
setError(null);
@@ -43,21 +50,55 @@
} else {
console.error('鑾峰彇鐢ㄦ埛淇℃伅澶辫触:', response.message);
setError(response.message || '鑾峰彇鐢ㄦ埛淇℃伅澶辫触');
- // 濡傛灉鏄璇佺浉鍏抽敊璇紝娓呴櫎鐢ㄦ埛淇℃伅
+ // 濡傛灉鏄璇佺浉鍏抽敊璇紝娓呴櫎鐢ㄦ埛淇℃伅鍜宼oken
if (response.code === 401) {
useUserStore.getState().clearUserInfo();
+ localStorage.removeItem('token');
}
}
} catch (err) {
console.error('鑾峰彇鐢ㄦ埛淇℃伅鍑洪敊:', err);
setError('鑾峰彇鐢ㄦ埛淇℃伅澶辫触');
+ // 鍙戠敓閿欒鏃朵篃娓呴櫎token鍜岀敤鎴蜂俊鎭�
+ localStorage.removeItem('token');
+ useUserStore.getState().clearUserInfo();
} finally {
setIsLoading(false);
}
};
fetchUserInfo();
- }, [token, setUserInfo]);
+ }, []); // 缁勪欢鎸傝浇鏃舵墽琛屼竴娆�
+
+ const handleNavigation = async (path: string, e: React.MouseEvent) => {
+ e.preventDefault();
+
+ // 妫�鏌ocalStorage涓槸鍚︽湁token
+ const storedToken = localStorage.getItem('token');
+ if (!storedToken) {
+ window.location.href = '/login';
+ return;
+ }
+
+ try {
+ const response = await getUserInfo();
+ if (response.code === 200 && response.data) {
+ setUserInfo(response.data);
+ window.location.href = path;
+ } else {
+ if (response.code === 401) {
+ localStorage.removeItem('token');
+ useUserStore.getState().clearUserInfo();
+ }
+ window.location.href = '/login';
+ }
+ } catch (err) {
+ console.error('楠岃瘉鐢ㄦ埛淇℃伅澶辫触:', err);
+ localStorage.removeItem('token');
+ useUserStore.getState().clearUserInfo();
+ window.location.href = '/login';
+ }
+ };
return (
<nav
@@ -196,6 +237,7 @@
<a
href="/ai-scene"
className="relative px-2 lg:px-3 py-2 text-sm font-medium"
+ onClick={(e) => handleNavigation('/ai-scene', e)}
onMouseEnter={() => setActiveMenu('ai-scene')}
onMouseLeave={() => setActiveMenu('')}
>
@@ -207,6 +249,7 @@
<a
href="/chatroom"
className="relative px-2 lg:px-3 py-2 text-sm font-medium"
+ onClick={(e) => handleNavigation('/chatroom', e)}
onMouseEnter={() => setActiveMenu('chatroom')}
onMouseLeave={() => setActiveMenu('')}
>
@@ -214,10 +257,11 @@
<span className={`absolute bottom-0 left-0 h-[2px] bg-gradient-to-r from-[#6ADBFF] to-transparent
transition-all duration-300 ${activeMenu === 'chatroom' ? 'w-full' : 'w-0'}`}></span>
</a>
-
+
<a
href="/training"
className="relative px-2 lg:px-3 py-2 text-sm font-medium"
+ onClick={(e) => handleNavigation('/training', e)}
onMouseEnter={() => setActiveMenu('training')}
onMouseLeave={() => setActiveMenu('')}
>
@@ -309,24 +353,24 @@
border-t border-[#6ADBFF]/10">
<a
href="/ai-scene"
- className="block px-4 py-3 text-white border-l-2 border-transparent hover:border-[#6ADBFF]
- hover:bg-[#3B4888]/20 rounded-r-md transition-all duration-200 cursor-pointer"
+ onClick={(e) => handleNavigation('/ai-scene', e)}
+ className="block px-4 py-3 text-white border-l-2 border-transparent hover:border-[#6ADBFF] hover:bg-[#3B4888]/20 rounded-r-md transition-all duration-200 cursor-pointer"
>
AI鍦烘櫙妯℃嫙
</a>
<a
href="/chatroom"
- className="block px-4 py-3 text-white border-l-2 border-transparent hover:border-[#6ADBFF]
- hover:bg-[#3B4888]/20 rounded-r-md transition-all duration-200 cursor-pointer"
+ onClick={(e) => handleNavigation('/chatroom', e)}
+ className="block px-4 py-3 text-white border-l-2 border-transparent hover:border-[#6ADBFF] hover:bg-[#3B4888]/20 rounded-r-md transition-all duration-200 cursor-pointer"
>
鑱婂ぉ瀹�
</a>
<a
href="/training"
- className="block px-4 py-3 text-white border-l-2 border-transparent hover:border-[#6ADBFF]
- hover:bg-[#3B4888]/20 rounded-r-md transition-all duration-200 cursor-pointer"
+ onClick={(e) => handleNavigation('/training', e)}
+ className="block px-4 py-3 text-white border-l-2 border-transparent hover:border-[#6ADBFF] hover:bg-[#3B4888]/20 rounded-r-md transition-all duration-200 cursor-pointer"
>
璁粌鍦�
</a>
@@ -358,9 +402,4 @@
);
};
-export default Navbar;
-
-// 娣诲姞鍒癈SS鏂囦欢涓殑鍏ㄥ眬鏍峰紡
-// .hover:shadow-glow:hover {
-// box-shadow: 0 0 15px rgba(255, 65, 108, 0.5);
-// }
\ No newline at end of file
+export default Navbar;
\ No newline at end of file
--
Gitblit v1.9.3