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;