添加了相关测试文件，引入Tailwindcss
Change-Id: I12054143571bb688590af0357125a0ed26ff2050
diff --git a/src/App.jsx b/src/App.jsx
new file mode 100644
index 0000000..bb6db99
--- /dev/null
+++ b/src/App.jsx
@@ -0,0 +1,97 @@
+import React, { useState, useEffect } from 'react';
+import { Layout, Menu, Avatar, Dropdown, message, Button } from 'antd';
+import { UserOutlined, LogoutOutlined, HomeOutlined, AppstoreOutlined, SettingOutlined } from '@ant-design/icons';
+import { useNavigate, Link } from 'react-router-dom';
+// 删除 import './App.css';
+
+const { Header, Content, Footer } = Layout;
+
+function App() {
+ const [user, setUser] = useState(null);
+ const navigate = useNavigate();
+
+ useEffect(() => {
+ // 从localStorage获取用户信息
+ const storedUser = localStorage.getItem('user');
+ if (storedUser) {
+ setUser(JSON.parse(storedUser));
+ }
+ }, []);
+
+ const handleLogout = () => {
+ localStorage.removeItem('token');
+ localStorage.removeItem('user');
+ message.success('已成功退出登录');
+ navigate('/login');
+ };
+
+ const userMenu = (
+ <Menu>
+ <Menu.Item key="profile" icon={<UserOutlined />}>
+ 个人资料
+ </Menu.Item>
+ <Menu.Divider />
+ <Menu.Item key="logout" icon={<LogoutOutlined />} onClick={handleLogout}>
+ 退出登录
+ </Menu.Item>
+ </Menu>
+ );
+
+ return (
+ <Layout className="min-h-screen">
+ <Header className="flex items-center px-6">
+ <div className="text-white text-xl font-bold mr-6">PT网站</div>
+ <Menu theme="dark" mode="horizontal" defaultSelectedKeys={['1']}>
+ <Menu.Item key="1" icon={<HomeOutlined />}>
+ <Link to="/">首页</Link>
+ </Menu.Item>
+ <Menu.Item key="2" icon={<AppstoreOutlined />}>资源</Menu.Item>
+ {/* 只对管理员显示管理面板菜单项 */}
+ {user?.role === 'admin' && (
+ <Menu.Item key="3" icon={<SettingOutlined />}>
+ <Link to="/admin">管理面板</Link>
+ </Menu.Item>
+ )}
+ </Menu>
+ <div className="ml-auto">
+ <Dropdown menu={userMenu} placement="bottomRight">
+ <span className="flex items-center cursor-pointer text-white">
+ <Avatar src={user?.avatar} icon={<UserOutlined />} />
+ <span className="ml-2">{user?.username || '用户'}</span>
+ <span className="ml-1 text-xs opacity-80">({user?.role || '游客'})</span>
+ </span>
+ </Dropdown>
+ </div>
+ </Header>
+ <Content className="p-6">
+ <div className="bg-white p-6 min-h-[280px] rounded">
+ <h1>欢迎来到PT网站</h1>
+ <p>这里是网站的主要内容区域。您可以在这里展示各种资源和信息。</p>
+
+ {/* 根据用户角色显示不同内容 */}
+ {user?.role === 'admin' && (
+ <div className="mt-6 p-4 bg-gray-50 rounded border-l-4 border-blue-500">
+ <h2>管理员专区</h2>
+ <p>这部分内容只有管理员可以看到。</p>
+ <Button type="primary" onClick={() => navigate('/admin')}>
+ 进入管理面板
+ </Button>
+ </div>
+ )}
+
+ {user?.role === 'moderator' && (
+ <div className="mt-6 p-4 bg-gray-50 rounded border-l-4 border-green-500">
+ <h2>版主专区</h2>
+ <p>这部分内容只有版主可以看到。</p>
+ </div>
+ )}
+ </div>
+ </Content>
+ <Footer className="text-center">
+ PT网站 ©{new Date().getFullYear()} 版权所有
+ </Footer>
+ </Layout>
+ );
+}
+
+export default App;