From d38a3ae95ce1ca3d736ec0f88f17973fa0d5a914 Mon Sep 17 00:00:00 2001
From: hongjli <3117313295@qq.com>
Date: 星期四, 05 六月 2025 13:10:08 +0800
Subject: [PATCH] 页面调整优化
---
src/components/layout/Navbar.tsx | 461 ++++++++++++++++++++++++++++++++++++++++++++++++---------
1 files changed, 387 insertions(+), 74 deletions(-)
diff --git a/src/components/layout/Navbar.tsx b/src/components/layout/Navbar.tsx
index b3cae67..b38d121 100644
--- a/src/components/layout/Navbar.tsx
+++ b/src/components/layout/Navbar.tsx
@@ -2,12 +2,22 @@
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);
const [scrolled, setScrolled] = useState(false);
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(() => {
@@ -23,24 +33,178 @@
return () => window.removeEventListener('scroll', handleScroll);
}, []);
+ // 鑾峰彇鐢ㄦ埛淇℃伅
+ useEffect(() => {
+ const fetchUserInfo = async () => {
+ // 妫�鏌ocalStorage涓槸鍚︽湁token
+ const storedToken = localStorage.getItem('token');
+ if (!storedToken) {
+ useUserStore.getState().clearUserInfo();
+ return;
+ }
+
+ setIsLoading(true);
+ setError(null);
+
+ try {
+ const response = await getUserInfo();
+ if (response.code === 200 && response.data) {
+ setUserInfo(response.data);
+ } 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();
+ }, []); // 缁勪欢鎸傝浇鏃舵墽琛屼竴娆�
+
+ // 鐐瑰嚮澶栭儴鍏抽棴涓嬫媺鑿滃崟
+ 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();
+
+ // 妫�鏌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';
+ }
+ };
+
+ 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);
+ }
+ };
+
return (
<nav
- className={`fixed top-0 left-0 w-full z-50 transition-all duration-300 ${
+ className={`fixed top-0 z-50 transition-all duration-700 h-16 w-full lg:w-[1260px] ${
scrolled
? 'bg-gradient-to-r from-[#1E2B63]/95 to-[#0A1033]/95 backdrop-blur-md shadow-lg py-2'
: 'bg-gradient-to-r from-[#1E2B63] to-[#0A1033] py-2'
}`}
+ style={{
+ left: '50%',
+ transform: 'translateX(-50%)'
+ }}
>
- <div className="absolute top-0 left-0 w-full h-full overflow-hidden opacity-15">
- <div className="absolute top-0 left-0 w-[60%] h-[1px] bg-gradient-to-r from-transparent via-[#6ADBFF] to-transparent"></div>
- <div className="absolute top-0 right-0 w-[30%] h-[1px] bg-gradient-to-r from-transparent via-[#FF6A88] to-transparent"></div>
+ {/* AI绉戞妧鎰熻儗鏅晥鏋滃眰 - 璋冩暣涓烘洿鏄庢樉浣嗕笉骞叉壈浜や簰 */}
+ <div className="absolute inset-0 overflow-hidden pointer-events-none">
+ {/* 绁炵粡缃戠粶杩炴帴灞� - 鎻愰珮瀵规瘮搴﹀拰鍙鎬� */}
+ <div className="absolute inset-0">
+ {/* 姘村钩杩炴帴 - 灏嗕綅缃洿楂樹互閬垮厤涓庤彍鍗曟枃瀛楀お闈犺繎 */}
+ <div className="absolute top-[25%] left-0 right-0 h-[1.5px] bg-gradient-to-r from-transparent via-[#6ADBFF]/70 to-transparent animate-neural-pulse"></div>
+
+ {/* 鍨傜洿杩炴帴 - 浠呬繚鐣欏乏渚т絾澧炲己 */}
+ <div className="absolute top-0 bottom-0 left-[15%] w-[1.5px] bg-gradient-to-b from-transparent via-[#6ADBFF]/60 to-transparent animate-neural-pulse-delay-2"></div>
+ </div>
+
+ {/* 閲忓瓙娉㈠姩灞� - 澧炲己娉㈠舰鏁堟灉 */}
+ <div className="absolute inset-x-0 bottom-0 h-full flex items-end justify-center overflow-hidden">
+ <div className="w-[800px] h-[40px] relative">
+ <svg className="absolute inset-0 w-full h-full animate-quantum-wave" viewBox="0 0 800 40" xmlns="http://www.w3.org/2000/svg">
+ <path d="M0,20 Q100,40 200,20 T400,20 T600,20 T800,20" fill="none" stroke="url(#gradient1)" strokeWidth="1.5" opacity="0.25" />
+ <path d="M0,20 Q100,0 200,20 T400,20 T600,20 T800,20" fill="none" stroke="url(#gradient2)" strokeWidth="1.5" opacity="0.25" />
+ <defs>
+ <linearGradient id="gradient1" x1="0%" y1="0%" x2="100%" y2="0%">
+ <stop offset="0%" stopColor="#6ADBFF" stopOpacity="0" />
+ <stop offset="50%" stopColor="#6ADBFF" stopOpacity="1" />
+ <stop offset="100%" stopColor="#6ADBFF" stopOpacity="0" />
+ </linearGradient>
+ <linearGradient id="gradient2" x1="0%" y1="0%" x2="100%" y2="0%">
+ <stop offset="0%" stopColor="#FF6A88" stopOpacity="0" />
+ <stop offset="50%" stopColor="#FF6A88" stopOpacity="1" />
+ <stop offset="100%" stopColor="#FF6A88" stopOpacity="0" />
+ </linearGradient>
+ </defs>
+ </svg>
+ </div>
+ </div>
+
+ {/* 澧炲姞绁炵绉戞妧鎰熺殑鏁版嵁娴佹晥鏋� */}
+ <div className="absolute inset-0 overflow-hidden pointer-events-none opacity-85">
+ {/* 鏁版嵁鏍肩偣鑳屾櫙 */}
+ <div className="absolute inset-0" style={{ backgroundImage: 'radial-gradient(circle, rgba(106, 219, 255, 0.15) 1px, transparent 1px)', backgroundSize: '20px 20px' }}></div>
+
+ {/* 鍨傜洿鏁版嵁娴佺嚎鏉� */}
+ <div className="absolute h-full w-[1px] left-[25%] bg-gradient-to-b from-transparent via-[#6ADBFF]/40 to-transparent animate-dataflowY"></div>
+ <div className="absolute h-full w-[1px] left-[75%] bg-gradient-to-b from-transparent via-[#FF6A88]/40 to-transparent animate-dataflowY" style={{ animationDelay: '2s' }}></div>
+
+ {/* 鎵弿绾挎晥鏋� */}
+ <div className="absolute top-0 left-0 w-full h-[150%] bg-gradient-to-b from-transparent via-[#6ADBFF]/10 to-transparent animate-scanline" style={{ animationDuration: '8s' }}></div>
+ </div>
+
+ {/* AI鏁版嵁鎵弿灞� - 澧炲己鍙搴� */}
+ <div className="absolute inset-0 pointer-events-none">
+ <div className="absolute top-0 bottom-0 left-0 right-0 bg-gradient-to-r from-[#6ADBFF]/0 via-[#6ADBFF]/15 to-[#6ADBFF]/0 animate-data-scan"></div>
+ </div>
+
+ {/* 杈规瑁呴グ - 鎻愰珮浜害 */}
+ <div className="absolute top-0 left-0 w-full h-[1.5px] bg-gradient-to-r from-transparent via-[#6ADBFF]/70 to-transparent"></div>
</div>
- <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative">
- <div className="flex items-center justify-between">
+ <div className="w-full px-4 md:px-6 lg:px-8 h-full mx-auto relative">
+ <div className="flex items-center justify-between h-full">
{/* Logo鍖哄煙 */}
<div className="flex-shrink-0 relative z-10 group">
- <Link href="/" className="flex items-center">
+ <a href="/" className="flex items-center">
{/* Logo涓讳綋 */}
<div className="flex items-center">
<div className="relative w-11 h-11">
@@ -70,73 +234,212 @@
</h1>
</div>
</div>
- </Link>
+ </a>
</div>
- {/* 涓ぎ瑁呴グ鍏冪礌 */}
- <div className="hidden lg:flex absolute left-1/2 transform -translate-x-1/2 top-1/2 -translate-y-1/2">
- <div className="relative h-4 w-32">
- <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
- <span className="block w-1 h-1 rounded-full bg-gradient-to-r from-[#FF6A88] to-[#6ADBFF] opacity-80 animate-ping"></span>
+ {/* 绾㈡涓殑鍔ㄦ�佺鎶�鎰熷渾鍦� - 鏇存煍鍜岀殑棰滆壊 */}
+ <div className="absolute left-[120px] md:left-[180px] lg:left-[230px] top-1/2 -translate-y-1/2 z-10 pointer-events-none">
+ <div className="relative w-8 h-8">
+ {/* 澶栧湀 - 鑴夊姩鏁堟灉锛岄檷浣庝笉閫忔槑搴� */}
+ <div className="absolute inset-0 rounded-full border-[1.5px] border-[#6ADBFF]/50 bg-[#1E2B63]/30 animate-tech-circle-pulse"></div>
+
+ {/* 鍐呭湀 - 鏃嬭浆娓愬彉鏁堟灉锛岄檷浣庝笉閫忔槑搴� */}
+ <div className="absolute inset-[3px] rounded-full border border-[#6ADBFF]/30 bg-[#131C41]/40 animate-tech-circle-rotate"></div>
+
+ {/* 涓績鐐� - 闂儊鏁堟灉锛岄檷浣庝寒搴� */}
+ <div className="absolute inset-0 flex items-center justify-center">
+ <div className="w-1 h-1 rounded-full bg-[#6ADBFF]/60 animate-tech-center-blink"></div>
</div>
+
+ {/* 鍏夋檿鏁堟灉锛屾洿鍔犲井濡� */}
+ <div className="absolute -inset-1 rounded-full bg-[#6ADBFF]/3 blur-sm animate-tech-glow-pulse"></div>
+ </div>
+ </div>
+
+ {/* 涓ぎ瑁呴グ鍏冪礌 - 绉婚櫎涓ぎ闂儊鐐� */}
+ <div className="hidden lg:flex absolute left-1/2 transform -translate-x-1/2 top-1/2 -translate-y-1/2 pointer-events-none">
+ <div className="relative h-4 w-32">
<div className="absolute top-1/2 left-0 right-0 h-[1px]">
<div className="h-full w-full bg-gradient-to-r from-transparent via-[#6ADBFF]/30 to-transparent"></div>
</div>
</div>
</div>
- {/* 瀵艰埅鑿滃崟 */}
- <div className="hidden md:flex items-center space-x-8">
- <Link
- href="/platform"
- className="relative px-3 py-2 text-gray-100 text-sm font-medium"
- onMouseEnter={() => setActiveMenu('platform')}
+ {/* 瀵艰埅鑿滃崟 - 澧炲姞z-index纭繚鍦ㄥ姩鏁堜箣涓� */}
+ <div className="hidden md:flex items-center space-x-4 lg:space-x-8 relative z-20">
+ <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('')}
>
- <span className="relative z-10">鏁板瓧鍛樺伐骞冲彴</span>
+ <span className={`relative z-10 transition-colors duration-300 ${activeMenu === 'ai-scene' ? 'text-[#6ADBFF]' : 'text-gray-100'}`}>AI鍦烘櫙妯℃嫙</span>
<span className={`absolute bottom-0 left-0 h-[2px] bg-gradient-to-r from-[#6ADBFF] to-transparent
- transition-all duration-300 ${activeMenu === 'platform' ? 'w-full' : 'w-0'}`}></span>
- </Link>
+ transition-all duration-300 ${activeMenu === 'ai-scene' ? 'w-full' : 'w-0'}`}></span>
+ </a>
- <Link
- href="/chat"
- className="relative px-3 py-2 text-gray-100 text-sm font-medium"
- onMouseEnter={() => setActiveMenu('chat')}
+ <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('')}
>
- <span className="relative z-10">鑱婂ぉ瀹�</span>
+ <span className={`relative z-10 transition-colors duration-300 ${activeMenu === 'chatroom' ? 'text-[#6ADBFF]' : 'text-gray-100'}`}>鑱婂ぉ瀹�</span>
<span className={`absolute bottom-0 left-0 h-[2px] bg-gradient-to-r from-[#6ADBFF] to-transparent
- transition-all duration-300 ${activeMenu === 'chat' ? 'w-full' : 'w-0'}`}></span>
- </Link>
-
- <Link
+ transition-all duration-300 ${activeMenu === 'chatroom' ? 'w-full' : 'w-0'}`}></span>
+ </a>
+
+ <a
href="/training"
- className="relative px-3 py-2 text-gray-100 text-sm font-medium"
+ className="relative px-2 lg:px-3 py-2 text-sm font-medium"
+ onClick={(e) => handleNavigation('/training', e)}
onMouseEnter={() => setActiveMenu('training')}
onMouseLeave={() => setActiveMenu('')}
>
- <span className="relative z-10">璁粌鍦�</span>
+ <span className={`relative z-10 transition-colors duration-300 ${activeMenu === 'training' ? 'text-[#6ADBFF]' : 'text-gray-100'}`}>璁粌鍦�</span>
<span className={`absolute bottom-0 left-0 h-[2px] bg-gradient-to-r from-[#6ADBFF] to-transparent
transition-all duration-300 ${activeMenu === 'training' ? 'w-full' : 'w-0'}`}></span>
- </Link>
+ </a>
- {/* 鐧诲綍鎸夐挳 */}
- <div className="relative group ml-6">
- <button className="relative bg-gradient-to-r from-[#5E72EB] to-[#FF9190] px-7 py-2
- rounded-full text-white font-medium overflow-hidden shadow-[0_2px_10px_rgba(94,114,235,0.3)]
- hover:shadow-[0_5px_15px_rgba(94,114,235,0.5)] transition-shadow duration-300">
- <span className="relative z-10">鐧诲綍</span>
- <div className="absolute inset-0 bg-gradient-to-r from-[#FF9190] to-[#5E72EB] opacity-0
- group-hover:opacity-100 transition-opacity duration-500"></div>
- </button>
- </div>
+ {userInfo ? (
+ // 鐢ㄦ埛淇℃伅鏄剧ず
+ <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}
+ </div>
+ )}
+ </div>
+ ) : (
+ <>
+ {/* 鐧诲綍鎸夐挳 */}
+ <div className="relative group">
+ <a href="/login" className="relative overflow-hidden flex items-center justify-center px-4 lg:px-7 py-2 rounded-full border border-[#6ADBFF]/40 bg-gradient-to-r from-[#131C41] to-[#1E2B63] hover:border-[#6ADBFF]/70 transition-all duration-300 group quantum-button">
+ <span className="relative z-10 text-white group-hover:text-[#6ADBFF] transition-colors duration-300 quantum-pulse">鐧诲綍</span>
+
+ {/* 閲忓瓙鍏夌嚎鏁堟灉 */}
+ <div className="absolute inset-0 overflow-hidden">
+ <div className="absolute inset-0 opacity-0 group-hover:opacity-30 transition-opacity duration-500 bg-gradient-to-r from-[#6ADBFF]/20 to-[#6ADBFF]/40"></div>
+ <div className="absolute top-[45%] -left-10 h-[1px] w-[120%] bg-gradient-to-r from-transparent via-[#6ADBFF] to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 quantum-scan-line"></div>
+ <div className="absolute top-0 h-full w-full">
+ <div className="absolute left-[50%] top-0 bottom-0 w-[1px] bg-gradient-to-b from-transparent via-[#6ADBFF]/30 to-transparent transform scale-y-0 group-hover:scale-y-100 transition-transform duration-700 ease-out"></div>
+ </div>
+ <div className="absolute bottom-0 left-0 right-0 h-[1px] bg-gradient-to-r from-transparent via-[#6ADBFF] to-transparent transform scale-x-0 group-hover:scale-x-100 transition-transform duration-700 ease-out"></div>
+ </div>
+ </a>
+ </div>
+
+ {/* 娉ㄥ唽鎸夐挳 */}
+ <div className="relative group -ml-2">
+ <a href="/register" className="relative overflow-hidden flex items-center justify-center px-4 lg:px-7 py-2 rounded-full border border-[#FF6A88]/40 bg-gradient-to-r from-[#131C41] via-[#1E2B63] to-[#2A1B48] hover:border-[#FF6A88]/70 transition-all duration-300 group quantum-button">
+ <span className="relative z-10 text-white group-hover:text-[#FF6A88] transition-colors duration-300 quantum-pulse">娉ㄥ唽</span>
+
+ {/* 閲忓瓙鍏夌嚎鏁堟灉 */}
+ <div className="absolute inset-0 overflow-hidden">
+ <div className="absolute inset-0 opacity-0 group-hover:opacity-30 transition-opacity duration-500 bg-gradient-to-r from-[#FF6A88]/20 to-[#FF6A88]/40"></div>
+ <div className="absolute top-[45%] -left-10 h-[1px] w-[120%] bg-gradient-to-r from-transparent via-[#FF6A88] to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 quantum-scan-line"></div>
+ <div className="absolute top-0 h-full w-full">
+ <div className="absolute left-[50%] top-0 bottom-0 w-[1px] bg-gradient-to-b from-transparent via-[#FF6A88]/30 to-transparent transform scale-y-0 group-hover:scale-y-100 transition-transform duration-700 ease-out"></div>
+ </div>
+ <div className="absolute bottom-0 left-0 right-0 h-[1px] bg-gradient-to-r from-transparent via-[#FF6A88] to-transparent transform scale-x-0 group-hover:scale-x-100 transition-transform duration-700 ease-out"></div>
+ </div>
+ </a>
+ </div>
+ </>
+ )}
</div>
{/* 绉诲姩绔彍鍗曟寜閽� */}
- <div className="md:hidden">
+ <div className="md:hidden relative z-20">
<button
onClick={() => setIsMenuOpen(!isMenuOpen)}
- className="relative w-10 h-10 flex items-center justify-center focus:outline-none"
+ className="relative w-10 h-10 flex items-center justify-center focus:outline-none cursor-pointer"
aria-label="Toggle navigation menu"
>
<div className="relative">
@@ -154,41 +457,56 @@
{/* 绉诲姩绔彍鍗� */}
<div
- className={`md:hidden transition-all duration-300 ease-in-out overflow-hidden ${
+ className={`md:hidden transition-all duration-300 ease-in-out overflow-hidden relative z-20 ${
isMenuOpen ? 'max-h-80 opacity-100' : 'max-h-0 opacity-0'
}`}
>
<div className="p-3 space-y-1 bg-gradient-to-b from-[#1E2B63] to-[#0A1033]
border-t border-[#6ADBFF]/10">
- <Link
- href="/platform"
- 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"
+ <a
+ href="/ai-scene"
+ 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"
>
- 鏁板瓧鍛樺伐骞冲彴
- </Link>
+ AI鍦烘櫙妯℃嫙
+ </a>
- <Link
- href="/chat"
- 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"
+ <a
+ href="/chatroom"
+ 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"
>
鑱婂ぉ瀹�
- </Link>
+ </a>
- <Link
+ <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"
+ 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"
>
璁粌鍦�
- </Link>
+ </a>
- <div className="pt-3 pb-1">
- <button className="w-full bg-gradient-to-r from-[#5E72EB] to-[#FF9190]
- text-white font-medium px-6 py-2 rounded-md">
- 鐧诲綍
- </button>
+ <div className="flex space-x-2 px-4 py-3">
+ <Link href="/login" className="relative overflow-hidden flex items-center justify-center w-full px-6 py-2 rounded-full border border-[#6ADBFF]/40 bg-gradient-to-r from-[#131C41] to-[#1E2B63] text-white font-medium group cursor-pointer">
+ <span className="relative z-10 text-white group-hover:text-[#6ADBFF] transition-colors duration-300">鐧诲綍</span>
+
+ {/* 绠�鍖栫増閲忓瓙鏁堟灉 - 閫傚悎绉诲姩绔� */}
+ <div className="absolute inset-0 overflow-hidden">
+ <div className="absolute inset-0 opacity-0 group-hover:opacity-30 transition-opacity duration-500 bg-gradient-to-r from-[#6ADBFF]/20 to-[#6ADBFF]/40"></div>
+ <div className="absolute bottom-0 left-0 right-0 h-[2px] bg-gradient-to-r from-transparent via-[#6ADBFF] to-transparent transform scale-x-0 group-hover:scale-x-100 transition-transform duration-700 ease-out"></div>
+ </div>
+ </Link>
+
+ <Link href="/register" className="relative overflow-hidden flex items-center justify-center w-full px-6 py-2 rounded-full border border-[#FF6A88]/40 bg-gradient-to-r from-[#131C41] via-[#1E2B63] to-[#2A1B48] text-white font-medium group cursor-pointer">
+ <span className="relative z-10 text-white group-hover:text-[#FF6A88] transition-colors duration-300">娉ㄥ唽</span>
+
+ {/* 绠�鍖栫増閲忓瓙鏁堟灉 - 閫傚悎绉诲姩绔� */}
+ <div className="absolute inset-0 overflow-hidden">
+ <div className="absolute inset-0 opacity-0 group-hover:opacity-30 transition-opacity duration-500 bg-gradient-to-r from-[#FF6A88]/20 to-[#FF6A88]/40"></div>
+ <div className="absolute bottom-0 left-0 right-0 h-[2px] bg-gradient-to-r from-transparent via-[#FF6A88] to-transparent transform scale-x-0 group-hover:scale-x-100 transition-transform duration-700 ease-out"></div>
+ </div>
+ </Link>
</div>
</div>
</div>
@@ -196,9 +514,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