feat(auth): 实现登录注册功能并重构 App 组件
- 新增登录和注册页面组件
- 实现用户认证和权限管理逻辑
- 重构 App 组件，使用 Router 和 AuthProvider
- 添加管理员面板和论坛页面组件
Change-Id: Iaa4502616970e75e3268537f73c75dac8f60e24d
diff --git a/src/App.jsx b/src/App.jsx
index bb6db99..84658a6 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,96 +1,22 @@
-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;
+import React from "react";
+import { BrowserRouter as Router } from "react-router-dom";
+import { AuthProvider } from "./features/auth/contexts/AuthContext";
+import AppRoutes from "./routes"; // 您的主路由组件
+// 如果您在 main.jsx 中没有使用 Antd 的 App 组件，且需要ConfigProvider
+// import { ConfigProvider, App as AntApp } from 'antd';
+// import antdThemeConfig from './config/antdTheme'; // 假设有主题配置
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>
+ // <ConfigProvider theme={antdThemeConfig}> {/* 如果有主题配置 */}
+ // <AntApp> {/* 如果在 main.jsx 中未使用，可以在这里包裹 */}
+ <Router>
+ <AuthProvider>
+ <AppRoutes />
+ </AuthProvider>
+ </Router>
+ // </AntApp>
+ // </ConfigProvider>
);
}