import { useEffect, useMemo, useState } from 'react';
|
import {
|
BellOutlined,
|
DownOutlined,
|
LogoutOutlined,
|
MenuFoldOutlined,
|
MenuUnfoldOutlined,
|
UserOutlined,
|
} from '@ant-design/icons';
|
import {
|
App as AntdApp,
|
Avatar,
|
Breadcrumb,
|
Button,
|
Dropdown,
|
Layout,
|
Menu,
|
Space,
|
Tag,
|
Tooltip,
|
} from 'antd';
|
import { Outlet, useLocation, useNavigate } from 'react-router-dom';
|
import { buildMenuItems, getOpenKeys } from '@/router/menu';
|
import { appRoutes, findBreadcrumb } from '@/router/routeConfig';
|
import { useAuthStore } from '@/store/auth';
|
import './BasicLayout.scss';
|
|
const { Header, Sider, Content, Footer } = Layout;
|
|
const BasicLayout = () => {
|
const location = useLocation();
|
const navigate = useNavigate();
|
const [collapsed, setCollapsed] = useState(false);
|
const [openKeys, setOpenKeys] = useState<string[]>(() => getOpenKeys(location.pathname));
|
const user = useAuthStore((state) => state.user);
|
const logout = useAuthStore((state) => state.logout);
|
const { modal, message } = AntdApp.useApp();
|
|
const menuItems = useMemo(() => buildMenuItems(appRoutes), []);
|
|
const breadcrumbItems = useMemo(() => {
|
const trail = findBreadcrumb(location.pathname) ?? [];
|
return [{ title: '首页' }, ...trail.map((item) => ({ title: item.title }))];
|
}, [location.pathname]);
|
|
useEffect(() => {
|
const keys = getOpenKeys(location.pathname);
|
setOpenKeys((prev) => Array.from(new Set([...prev, ...keys])));
|
}, [location.pathname]);
|
|
useEffect(() => {
|
const trail = findBreadcrumb(location.pathname);
|
const current = trail?.[trail.length - 1]?.title;
|
document.title = current ? `${current} - CRM 后台管理平台` : 'CRM 后台管理平台';
|
}, [location.pathname]);
|
|
const handleLogout = () => {
|
modal.confirm({
|
title: '确认退出登录？',
|
content: '退出后需要重新登录才能继续访问系统。',
|
okText: '退出登录',
|
cancelText: '取消',
|
okButtonProps: { danger: true },
|
onOk: () => {
|
logout();
|
message.success('已安全退出');
|
navigate('/login', { replace: true });
|
},
|
});
|
};
|
|
const userMenuItems = [
|
{
|
key: 'profile',
|
icon: <UserOutlined />,
|
label: '个人中心',
|
disabled: true,
|
},
|
{ type: 'divider' as const },
|
{
|
key: 'logout',
|
icon: <LogoutOutlined />,
|
label: '退出登录',
|
danger: true,
|
},
|
];
|
|
return (
|
<Layout className="app-layout">
|
<Sider
|
className="app-sider"
|
theme="light"
|
width={240}
|
collapsedWidth={72}
|
trigger={null}
|
collapsible
|
collapsed={collapsed}
|
>
|
<div className="app-logo">
|
<div className="app-logo__mark">C</div>
|
{!collapsed && (
|
<div className="app-logo__text">
|
<span>CRM Admin</span>
|
<small>企业管理平台</small>
|
</div>
|
)}
|
</div>
|
|
<Menu
|
className="app-menu"
|
mode="inline"
|
theme="light"
|
items={menuItems}
|
selectedKeys={[location.pathname]}
|
openKeys={collapsed ? undefined : openKeys}
|
onOpenChange={(keys) => setOpenKeys(keys)}
|
onClick={({ key }) => {
|
if (key !== location.pathname) navigate(key);
|
}}
|
/>
|
|
{!collapsed && (
|
<div className="app-sider__footer">
|
<span>CRM Admin</span>
|
<span>v0.1.0</span>
|
</div>
|
)}
|
</Sider>
|
|
<Layout className="app-main">
|
<Header className="app-header">
|
<div className="app-header__left">
|
<Button
|
className="app-header__trigger"
|
type="text"
|
aria-label={collapsed ? '展开菜单' : '收起菜单'}
|
icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
|
onClick={() => setCollapsed((value) => !value)}
|
/>
|
<Breadcrumb className="app-header__breadcrumb" items={breadcrumbItems} />
|
</div>
|
|
<Space size={16} className="app-header__right">
|
<Tooltip title="消息通知">
|
<Button
|
className="app-header__icon-btn"
|
type="text"
|
shape="circle"
|
icon={<BellOutlined />}
|
onClick={() => message.info('暂无新消息')}
|
/>
|
</Tooltip>
|
|
<Dropdown
|
trigger={['click']}
|
menu={{
|
items: userMenuItems,
|
onClick: ({ key }) => {
|
if (key === 'logout') handleLogout();
|
},
|
}}
|
>
|
<div className="app-header__user">
|
<Avatar className="app-header__avatar" size={34}>
|
{user?.nickname?.charAt(0) ?? 'U'}
|
</Avatar>
|
<div className="app-header__user-info">
|
<span className="app-header__nickname">{user?.nickname}</span>
|
<Tag
|
className="app-header__role"
|
color={user?.role === 'admin' ? 'purple' : 'blue'}
|
bordered={false}
|
>
|
{user?.role === 'admin' ? '管理员' : '普通用户'}
|
</Tag>
|
</div>
|
<DownOutlined className="app-header__user-arrow" />
|
</div>
|
</Dropdown>
|
</Space>
|
</Header>
|
|
<Content className="app-content">
|
<Outlet />
|
</Content>
|
|
<Footer className="app-footer">
|
CRM Admin ©2026 · Vite + React + Ant Design
|
</Footer>
|
</Layout>
|
</Layout>
|
);
|
};
|
|
export default BasicLayout;
|
