上传种子以及接管求助帖
Change-Id: Icba99400a2dc4f706c9e184b16fc47cde5ebf12a
diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
new file mode 100644
index 0000000..a381989
--- /dev/null
+++ b/src/components/Navbar.jsx
@@ -0,0 +1,98 @@
+import React from 'react';
+import { Link, useNavigate, useLocation } from 'react-router-dom';
+import { Layout, Menu, Avatar } from 'antd';
+import {
+ HomeOutlined,
+ CloudUploadOutlined,
+ ThunderboltOutlined,
+ UsergroupAddOutlined
+} from '@ant-design/icons';
+
+const { Header } = Layout;
+
+const Navbar = () => {
+ const navigate = useNavigate();
+ const location = useLocation();
+
+ // 从localStorage获取用户数据
+ const userData = JSON.parse(localStorage.getItem('user')) || {};
+ const { username, image } = userData;
+
+ // 点击头像或用户名跳转到首页
+ const handleUserClick = () => {
+ navigate('/usercenter');
+ };
+
+ return (
+ <Header
+ style={{
+ backgroundColor: '#f5be42',
+ boxShadow: '0 2px 8px rgba(0,0,0,0.15)',
+ padding: '0 40px',
+ width: '100%', // 确保宽度扩展到100%
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'space-between'
+ }}
+ >
+ {/* Logo */}
+ <div style={{ color: '#fff', fontSize: '20px', fontWeight: 'bold' }}>
+ <Link to="/" style={{ color: '#fff', textDecoration: 'none' }}>
+ 社交互动平台
+ </Link>
+ </div>
+
+ {/* Menu */}
+ <Menu
+ mode="horizontal"
+ theme="dark"
+ selectedKeys={[location.pathname]}
+ style={{
+ backgroundColor: 'transparent',
+ flex: 1,
+ justifyContent: 'center',
+ borderBottom: 'none'
+ }}
+ >
+ <Menu.Item key="/mainpage" icon={<HomeOutlined />}>
+ <Link to="/home" style={{ color: '#fff' }}>首页</Link>
+ </Menu.Item>
+ <Menu.Item key="/" icon={<HomeOutlined />}>
+ <Link to="/community" style={{ color: '#fff' }}>社区</Link>
+ </Menu.Item>
+ <Menu.Item key="/torrents" icon={<ThunderboltOutlined />}>
+ <Link to="/torrents" style={{ color: '#fff' }}>种子</Link>
+ </Menu.Item>
+ <Menu.Item key="/upload" icon={<CloudUploadOutlined />}>
+ <Link to="/upload" style={{ color: '#fff' }}>上传种子</Link>
+ </Menu.Item>
+ <Menu.Item key="/friend" icon={<UsergroupAddOutlined />}>
+ <Link to="/friend" style={{ color: '#fff' }}>好友</Link>
+ </Menu.Item>
+ <Menu.Item key="/shop" icon={<UsergroupAddOutlined />}>
+ <Link to="/shop" style={{ color: '#fff' }}>商城</Link>
+ </Menu.Item>
+ </Menu>
+
+ {/* 用户名和头像 - 添加点击事件 */}
+ <div
+ style={{
+ display: 'flex',
+ alignItems: 'center',
+ gap: '8px',
+ cursor: 'pointer' // 添加指针样式表示可点击
+ }}
+ onClick={handleUserClick}
+ >
+ <Avatar
+ src={image}
+ size="default"
+ style={{ backgroundColor: '#f56a00' }}
+ />
+ <span style={{ color: '#fff' }}>{username}</span>
+ </div>
+ </Header>
+ );
+};
+
+export default Navbar;
\ No newline at end of file