106 lines
4.2 KiB
TypeScript
106 lines
4.2 KiB
TypeScript
|
import { Search } from 'lucide-react';
|
|||
|
|
import React, { useState } from 'react';
|
|||
|
|
|
|||
|
|
interface MenuItem {
|
|||
|
|
label: string;
|
|||
|
|
key: string;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 定义 TopNavProps 接口，描述组件的 props 类型
|
|||
|
|
// menuItems? 菜单项数组
|
|||
|
|
// activeKey: 当前激活的菜单项
|
|||
|
|
// onSearch: 搜索回调函数
|
|||
|
|
// onItemClick: 菜单点击回调函数
|
|||
|
|
interface TopNavProps {
|
|||
|
|
menuItems?: MenuItem[];
|
|||
|
|
activeKey?: string;
|
|||
|
|
onSearch?: (keyword: string) => void;
|
|||
|
|
onItemClick?: (key: string) => void;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
//定义 TopNav 组件，类型为 React 函数组件，接收 TopNavProps 类型的 props
|
|||
|
|
//解构并设置 menuItems 默认值，如果父组件没有传入则使用默认的6个菜单项
|
|||
|
|
// activeKey: 当前激活的菜单项
|
|||
|
|
// onSearch: 搜索回调函数
|
|||
|
|
// onItemClick: 菜单点击回调函数
|
|||
|
|
export function TopNav({
|
|||
|
|
menuItems = [
|
|||
|
|
{ label: '首页', key: 'home' },
|
|||
|
|
{ label: '烽火动态', key: 'news' },
|
|||
|
|
{ label: '烽火铸魂', key: 'soul' },
|
|||
|
|
{ label: '烽火训练', key: 'training' },
|
|||
|
|
{ label: '联系热线', key: 'hotline' },
|
|||
|
|
{ label: '综合服务', key: 'service' },
|
|||
|
|
],
|
|||
|
|
activeKey: externalActiveKey, // 从外部传入的 activeKey
|
|||
|
|
onSearch,
|
|||
|
|
onItemClick,
|
|||
|
|
}: TopNavProps){
|
|||
|
|
// 使用外部传入的 activeKey，如果没有则使用内部状态
|
|||
|
|
// 创建内部状态 internalActiveKey，默认值为 'home'，用于内部管理激活状态
|
|||
|
|
const [internalActiveKey, setInternalActiveKey] = useState('home');
|
|||
|
|
// 如果外部传入了 activeKey 则使用外部的，否则使用内部状态（支持受控和非受控模式）
|
|||
|
|
const currentActiveKey = externalActiveKey !== undefined ? externalActiveKey : internalActiveKey;
|
|||
|
|
// 创建搜索关键词状态，初始为空字符串
|
|||
|
|
const [searchKeyword, setSearchKeyword] = useState('');
|
|||
|
|
// 处理搜索提交事件, 阻止默认表单提交行为，调用搜索回调函数
|
|||
|
|
const handleSearchSubmit = (e: React.FormEvent) => {
|
|||
|
|
e.preventDefault();
|
|||
|
|
onSearch?.(searchKeyword); // .? 可选链操作符，确保 onSearch 存在时才调用
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 定义菜单项点击处理函数，如果外部没有传入 activeKey 则更新内部状态，调用点击回调函数
|
|||
|
|
const handleItemClick = (item: MenuItem) => {
|
|||
|
|
// 更新内部状态（如果使用内部状态）
|
|||
|
|
if (externalActiveKey === undefined) {
|
|||
|
|
setInternalActiveKey(item.key);
|
|||
|
|
}
|
|||
|
|
// 调用外部回调函数
|
|||
|
|
onItemClick?.(item.key); // .? 可选链操作符，确保 onItemClick 存在时才调用
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div className="h-14 flex items-center justify-center px-8 bg-white">
|
|||
|
|
{/* 搜索框与导航菜单组合 */}
|
|||
|
|
<div className="flex items-center space-x-4">
|
|||
|
|
{/* 搜索框 */}
|
|||
|
|
<form onSubmit={handleSearchSubmit} className="relative">
|
|||
|
|
<div className="relative">
|
|||
|
|
<input
|
|||
|
|
type="text"
|
|||
|
|
value={searchKeyword}
|
|||
|
|
onChange={(e) => setSearchKeyword(e.target.value)}
|
|||
|
|
placeholder="搜索..."
|
|||
|
|
className="pl-10 pr-4 py-2 text-sm rounded-lg 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"
|
|||
|
|
/>
|
|||
|
|
<span className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400">
|
|||
|
|
<Search className="w-5 h-5" />
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
</form>
|
|||
|
|
|
|||
|
|
{/* 导航菜单 */}
|
|||
|
|
<ul className="flex space-x-2">
|
|||
|
|
{menuItems.map((item) => {
|
|||
|
|
const isActive = currentActiveKey === item.key; // 判断当前项是否激活
|
|||
|
|
return (
|
|||
|
|
<li key={item.key}>
|
|||
|
|
<button
|
|||
|
|
onClick={() => handleItemClick(item)}
|
|||
|
|
className={`px-4 py-2 text-sm font-medium rounded-lg transition-all duration-200 ${
|
|||
|
|
isActive
|
|||
|
|
? 'bg-blue-600 text-white shadow-md' // 激活状态样式
|
|||
|
|
: 'text-gray-600 hover:bg-blue-100 hover:text-blue-700' // 非激活状态样式
|
|||
|
|
}`}
|
|||
|
|
>
|
|||
|
|
{item.label}
|
|||
|
|
</button>
|
|||
|
|
</li>
|
|||
|
|
);
|
|||
|
|
})}
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
};
|