124 lines
4.0 KiB
TypeScript
124 lines
4.0 KiB
TypeScript
import React, { useState, useEffect } from 'react';
|
||
import { Layout, Menu, Button, Avatar, Dropdown, message } from 'antd';
|
||
import {
|
||
AppstoreOutlined,
|
||
UserOutlined,
|
||
LogoutOutlined,
|
||
MenuFoldOutlined,
|
||
MenuUnfoldOutlined,
|
||
} from '@ant-design/icons';
|
||
import { history, useLocation, Outlet } from 'umi';
|
||
import './index.less';
|
||
|
||
const { Header, Sider, Content } = Layout;
|
||
|
||
const MainLayout: React.FC = () => {
|
||
const [collapsed, setCollapsed] = useState(false);
|
||
const [username, setUsername] = useState('');
|
||
const location = useLocation();
|
||
|
||
useEffect(() => {
|
||
// 检查登录状态
|
||
const isLoggedIn = localStorage.getItem('isLoggedIn');
|
||
const currentUsername = localStorage.getItem('username');
|
||
|
||
if (!isLoggedIn) {
|
||
message.error('请先登录！');
|
||
history.push('/login');
|
||
return;
|
||
}
|
||
|
||
setUsername(currentUsername || '');
|
||
}, []);
|
||
|
||
const handleMenuClick = (key: string) => {
|
||
// 使用路由导航
|
||
history.push(`/${key}`);
|
||
};
|
||
|
||
const handleLogout = () => {
|
||
localStorage.removeItem('isLoggedIn');
|
||
localStorage.removeItem('username');
|
||
message.success('已退出登录');
|
||
history.push('/login');
|
||
};
|
||
|
||
const userMenu = (
|
||
<Menu>
|
||
<Menu.Item key="profile" icon={<UserOutlined />} onClick={() => history.push('/profile')}>
|
||
个人资料
|
||
</Menu.Item>
|
||
<Menu.Divider />
|
||
<Menu.Item key="logout" icon={<LogoutOutlined />} onClick={handleLogout}>
|
||
退出登录
|
||
</Menu.Item>
|
||
</Menu>
|
||
);
|
||
|
||
// 根据当前路径确定选中的菜单项
|
||
const getSelectedKey = () => {
|
||
const path = location.pathname;
|
||
if (path === '/images') return 'images';
|
||
if (path === '/profile') return 'profile';
|
||
return 'images'; // 默认选中镜像列表
|
||
};
|
||
|
||
return (
|
||
<Layout className="main-layout">
|
||
<Sider
|
||
trigger={null}
|
||
collapsible
|
||
collapsed={collapsed}
|
||
className="main-sider"
|
||
>
|
||
<div className="logo">
|
||
{!collapsed && <span>VDI 系统</span>}
|
||
</div>
|
||
<Menu
|
||
theme="dark"
|
||
mode="inline"
|
||
selectedKeys={[getSelectedKey()]}
|
||
onClick={({ key }) => handleMenuClick(key)}
|
||
>
|
||
<Menu.Item key="images" icon={<AppstoreOutlined />}>
|
||
镜像列表
|
||
</Menu.Item>
|
||
<Menu.Item key="userList" icon={<AppstoreOutlined />}>
|
||
用户
|
||
</Menu.Item>
|
||
<Menu.Item key="terminal" icon={<AppstoreOutlined />}>
|
||
终端
|
||
</Menu.Item>
|
||
<Menu.Item key="profile" icon={<UserOutlined />}>
|
||
我的
|
||
</Menu.Item>
|
||
</Menu>
|
||
</Sider>
|
||
|
||
<Layout>
|
||
<Header className="main-header">
|
||
<Button
|
||
type="text"
|
||
icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
|
||
onClick={() => setCollapsed(!collapsed)}
|
||
className="trigger"
|
||
/>
|
||
|
||
<div className="header-right">
|
||
<span className="welcome-text">欢迎，{username}</span>
|
||
<Dropdown overlay={userMenu} placement="bottomRight">
|
||
<Avatar icon={<UserOutlined />} className="user-avatar" />
|
||
</Dropdown>
|
||
</div>
|
||
</Header>
|
||
|
||
<Content className="main-content">
|
||
<Outlet />
|
||
</Content>
|
||
</Layout>
|
||
</Layout>
|
||
);
|
||
};
|
||
|
||
export default MainLayout;
|