xufuhan/asset-homepage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

打磨细节

Browse Source
This commit is contained in:
xufuhan
2026-01-28 17:55:01 +08:00
parent 08af95116e
commit 0a1bd07492
36 changed files with 1649 additions and 466 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
components/Navbar.tsx
View File

@@ -4,13 +4,15 @@ import { useState, useEffect } from 'react';
import Image from 'next/image';
import ProductMenu from './ProductMenu';
import ResourceMenu from './ResourceMenu';
import { useLanguage } from '@/contexts/LanguageContext';
export default function Navbar() {
const [scrolled, setScrolled] = useState(false);
const [language, setLanguage] = useState<'zh' | 'en'>('zh');
const { language, setLanguage, t } = useLanguage();
const [showLangMenu, setShowLangMenu] = useState(false);
const [showProductMenu, setShowProductMenu] = useState(false);
const [showResourceMenu, setShowResourceMenu] = useState(false);
const [animate, setAnimate] = useState(false);
useEffect(() => {
const handleScroll = () => {
@@ -21,6 +23,15 @@ export default function Navbar() {
return () => window.removeEventListener('scroll', handleScroll);
}, []);
useEffect(() => {
// 页面加载后触发动画
requestAnimationFrame(() => {
requestAnimationFrame(() => {
setAnimate(true);
});
});
}, []);
useEffect(() => {
const handleClickOutside = (e: MouseEvent) => {
const target = e.target as Element;
@@ -52,7 +63,14 @@ export default function Navbar() {
: 'bg-white/90 backdrop-blur-[50px]'
}`}>
{/* Logo Section */}
<div className="flex-1">
<div
className="flex-1 transition-all duration-1000 ease-out"
style={{
transform: animate ? 'translateY(0)' : 'translateY(-3rem)',
opacity: animate ? 1 : 0
}}
suppressHydrationWarning
>
<Image
src="/logo0.svg"
alt="Logo"
@@ -68,7 +86,7 @@ export default function Navbar() {
{/* Product - Active */}
<div className="product-menu-container">
<div
className={`rounded-lg px-4 py-2 h-9 flex items-center justify-center cursor-pointer transition-colors ${
className={`rounded-lg px-4 py-2 h-9 flex items-center justify-center cursor-pointer transition-colors select-none ${
showProductMenu ? 'bg-[#f3f4f6]' : 'bg-transparent hover:bg-[#f3f4f6]'
}`}
onClick={() => {
@@ -79,22 +97,22 @@ export default function Navbar() {
<span className={`font-bold text-sm leading-[150%] font-inter ${
showProductMenu ? 'text-[#111827]' : 'text-[#4b5563]'
}`}>
{language === 'zh' ? '产品' : 'Product'}
{t('nav.product')}
</span>
</div>
</div>
{/* Ecosystem */}
<div className="bg-transparent rounded-lg px-4 py-2 h-9 flex items-center justify-center hover:bg-[#f3f4f6] transition-colors cursor-pointer">
{/* Community */}
<div className="bg-transparent rounded-lg px-4 py-2 h-9 flex items-center justify-center hover:bg-[#f3f4f6] transition-colors cursor-pointer select-none">
<span className="text-[#4b5563] font-bold text-sm leading-[150%] font-inter">
{language === 'zh' ? '生态' : 'Ecosystem'}
{t('nav.community')}
</span>
</div>
{/* Resource */}
<div className="resource-menu-container">
<div
className={`rounded-lg px-4 py-2 h-9 flex items-center justify-center cursor-pointer transition-colors ${
className={`rounded-lg px-4 py-2 h-9 flex items-center justify-center cursor-pointer transition-colors select-none ${
showResourceMenu ? 'bg-[#f3f4f6]' : 'bg-transparent hover:bg-[#f3f4f6]'
}`}
onClick={() => {
@@ -105,7 +123,7 @@ export default function Navbar() {
<span className={`font-bold text-sm leading-[150%] font-inter ${
showResourceMenu ? 'text-[#111827]' : 'text-[#4b5563]'
}`}>
{language === 'zh' ? '资源' : 'Resource'}
{t('nav.resource')}
</span>
</div>
</div>
@@ -114,16 +132,25 @@ export default function Navbar() {
{/* Launch App Button & Language Selector */}
<div className="flex-1 flex justify-end items-center gap-4">
<div className="bg-[#111827] rounded-lg px-5 py-2.5 h-10 flex items-center justify-center overflow-hidden cursor-pointer hover:opacity-90 transition-opacity">
<div
className="bg-[#111827] rounded-lg px-5 py-2.5 h-10 flex items-center justify-center overflow-hidden cursor-pointer hover:opacity-90 select-none"
style={{
transform: animate ? 'translateY(0)' : 'translateY(-3rem)',
opacity: animate ? 1 : 0,
transition: 'all 1s ease-out',
transitionDelay: '200ms'
}}
suppressHydrationWarning
>
<span className="text-[#fcfcfd] font-bold text-sm leading-[150%] font-inter">
{language === 'zh' ? '启动应用' : 'Launch App'}
{t('nav.launchApp')}
</span>
</div>
{/* Language Selector */}
<div className="relative language-selector">
<div
className="flex items-center gap-2 px-3 py-2 rounded-lg hover:bg-[#f3f4f6] transition-colors cursor-pointer"
className="flex items-center gap-2 px-3 py-2 rounded-lg hover:bg-[#f3f4f6] transition-colors cursor-pointer select-none"
onClick={() => setShowLangMenu(!showLangMenu)}
>
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -143,7 +170,7 @@ export default function Navbar() {
{showLangMenu && (
<div className="absolute right-0 mt-2 w-32 bg-white rounded-lg shadow-lg border border-[#e5e7eb] overflow-hidden z-50">
<div
className={`px-4 py-2.5 hover:bg-[#f3f4f6] cursor-pointer transition-colors ${
className={`px-4 py-2.5 hover:bg-[#f3f4f6] cursor-pointer transition-colors select-none ${
language === 'zh' ? 'bg-[#f3f4f6]' : ''
}`}
onClick={() => toggleLanguage('zh')}
@@ -151,7 +178,7 @@ export default function Navbar() {
<span className="text-[#111827] font-inter text-sm font-medium">中文</span>
</div>
<div
className={`px-4 py-2.5 hover:bg-[#f3f4f6] cursor-pointer transition-colors ${
className={`px-4 py-2.5 hover:bg-[#f3f4f6] cursor-pointer transition-colors select-none ${
language === 'en' ? 'bg-[#f3f4f6]' : ''
}`}
onClick={() => toggleLanguage('en')}