111 lines
3.7 KiB
TypeScript
111 lines
3.7 KiB
TypeScript
import { Search } from 'lucide-react';
|
||
import React, { useState, useEffect } from 'react';
|
||
import { Button } from '@/ui/button';
|
||
interface MenuItem {
|
||
label: string;
|
||
key: string;
|
||
sectionId:string;
|
||
}
|
||
|
||
interface TopNavProps {
|
||
menuItems?: MenuItem[];
|
||
activeKey?: string;
|
||
onSearch?: (keyword: string) => void;
|
||
onItemClick?: (key: string) => void;
|
||
}
|
||
|
||
export function TopNav({
|
||
menuItems = [
|
||
{ label: '首页', key: 'home', sectionId:'home' },
|
||
{ label: '烽火动态', key: 'news', sectionId:'fireNews' },
|
||
{ label: '烽火铸魂', key: 'soul', sectionId:'soul' },
|
||
{ label: '烽火训练', key: 'training', sectionId:'training' },
|
||
{ label: '联系热线', key: 'hotline', sectionId:'hotline' },
|
||
{ label: '综合服务', key: 'service', sectionId:'service' },
|
||
],
|
||
activeKey: externalActiveKey,
|
||
onSearch,
|
||
onItemClick,
|
||
}: TopNavProps) {
|
||
const [internalActiveKey, setInternalActiveKey] = useState('home');
|
||
const currentActiveKey = externalActiveKey !== undefined ? externalActiveKey : internalActiveKey;
|
||
const [searchKeyword, setSearchKeyword] = useState('');
|
||
|
||
|
||
const handleSearchSubmit = (e: React.FormEvent) => {
|
||
e.preventDefault();
|
||
onSearch?.(searchKeyword);
|
||
|
||
};
|
||
|
||
const handleItemClick = (item: MenuItem) => {
|
||
if (externalActiveKey === undefined) {
|
||
setInternalActiveKey(item.key);
|
||
}
|
||
|
||
// 如果有对应的 sectionId，则滚动到该区域
|
||
// if (item.sectionId) {
|
||
// const element = document.getElementById(item.sectionId);
|
||
// if (element) {
|
||
// element.scrollIntoView({
|
||
// behavior: 'smooth', // 平滑滚动
|
||
// block: 'start' // 滚动到顶部对齐
|
||
// });
|
||
// }
|
||
// }
|
||
|
||
onItemClick?.(item.key);
|
||
};
|
||
|
||
return (
|
||
// 将组件宽度调整为1514px，并保持居中
|
||
<div className="h-full w-full mx-auto flex items-center px-8 bg-white border-t-16 border-b-16 border-[#1f79bf]">
|
||
{/* 搜索框与导航菜单组合 */}
|
||
<div className="flex items-center justify-start gap-30 ml-45 ">
|
||
{/* 导航菜单 */}
|
||
<ul className="flex space-x-20 relative mr-10">
|
||
{menuItems.map((item) => {
|
||
const isActive = currentActiveKey === item.key;
|
||
return (
|
||
<li key={item.key} className="relative">
|
||
<button
|
||
onClick={() => handleItemClick(item)}
|
||
className={`px-4 py-2 text-2xl transition-all duration-500 relative z-10 ${isActive ? 'text-white font-bold' : 'text-gray-600 hover:font-bold cursor-pointer'
|
||
}`}
|
||
>
|
||
{/* 激活状态背景层 */}
|
||
{isActive && (
|
||
<span className="absolute inset-0 bg-gradient-to-br from-blue-500 to-blue-700 transform skew-x-12 rounded-none z-0"></span>
|
||
)}
|
||
<span className="relative z-20">{item.label}</span>
|
||
</button>
|
||
</li>
|
||
);
|
||
})}
|
||
</ul>
|
||
{/* 搜索框 */}
|
||
|
||
<div className="relative overflow-hidden bg-gray-100 ">
|
||
<Button variant="default" className="absolute rounded-none right-0 top-1/2 transform -translate-y-1/2 bg-[#1f79bf] hover:bg-[#1a68a0] text-white border-0 "
|
||
onClick={handleSearchSubmit}
|
||
|
||
>
|
||
<Search className="w-5 h-5" />
|
||
</Button>
|
||
|
||
<input type="text"
|
||
placeholder='请输入关键词'
|
||
value={searchKeyword}
|
||
onChange={(e) => setSearchKeyword(e.target.value)}
|
||
className="pl-5 pr-4 py-2 text-sm h-full w-10 border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent w-64 transition-all duration-200 hover:shadow-sm" />
|
||
</div>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
</div>
|
||
</div>
|
||
);
|
||
}; |