95 lines
2.8 KiB
JavaScript
Executable File
95 lines
2.8 KiB
JavaScript
Executable File
import React, { useState } from 'react';
|
|
import { useNavigate, Link } from 'react-router-dom';
|
|
import { useAuth } from '../context/AuthContext';
|
|
import './Navbar.css';
|
|
|
|
const Navbar = () => {
|
|
const navigate = useNavigate();
|
|
const { user, logout } = useAuth();
|
|
const [search, setSearch] = useState('');
|
|
|
|
const handleLoginClick = () => {
|
|
navigate('/login');
|
|
};
|
|
|
|
const handleLogoutClick = () => {
|
|
logout();
|
|
navigate('/');
|
|
};
|
|
|
|
const handleSearchKeyDown = (e) => {
|
|
if (e.key === 'Enter') {
|
|
if (user) {
|
|
navigate('/aircraft', { state: { searchTerm: search } });
|
|
} else {
|
|
navigate('/login');
|
|
}
|
|
}
|
|
};
|
|
|
|
return (
|
|
<nav className="navbar">
|
|
<div className="navbar-inner">
|
|
<div className="navbar-left">
|
|
<Link to="/" className="logo">
|
|
<img
|
|
src="http://localhost:3001/uploads/logo.svg"
|
|
alt="Logo"
|
|
className="logo-img"
|
|
/>
|
|
</Link>
|
|
|
|
<div className="nav-item">
|
|
<span className="nav-label">产品</span>
|
|
<div className="dropdown">
|
|
<Link to="/" className="dropdown-item">产品一</Link>
|
|
<Link to="/" className="dropdown-item">产品二</Link>
|
|
<Link to="/" className="dropdown-item">产品三</Link>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="nav-item">
|
|
<span className="nav-label">解决方案</span>
|
|
<div className="dropdown">
|
|
<Link to="/" className="dropdown-item">解决方案A</Link>
|
|
<Link to="/" className="dropdown-item">解决方案B</Link>
|
|
<Link to="/" className="dropdown-item">解决方案C</Link>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="nav-item">
|
|
<span className="nav-label">行业</span>
|
|
<div className="dropdown">
|
|
<Link to="/" className="dropdown-item">民航</Link>
|
|
<Link to="/" className="dropdown-item">通航</Link>
|
|
<Link to="/" className="dropdown-item">研发制造</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="navbar-right">
|
|
<input
|
|
type="text"
|
|
className="search-input"
|
|
placeholder="搜索..."
|
|
value={search}
|
|
onChange={(e) => setSearch(e.target.value)}
|
|
onKeyDown={handleSearchKeyDown}
|
|
/>
|
|
|
|
{user ? (
|
|
<div className="user-area">
|
|
<span className="username">{user.name || user.username}</span>
|
|
<button className="btn btn-secondary" onClick={handleLogoutClick}>退出</button>
|
|
</div>
|
|
) : (
|
|
<button className="btn btn-primary" onClick={handleLoginClick}>登录</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
);
|
|
};
|
|
|
|
export default Navbar;
|