330 lines
9.0 KiB
TypeScript
330 lines
9.0 KiB
TypeScript
|
/**
|
|||
|
|
* AdminLayout - 管理后台布局
|
|||
|
|
*
|
|||
|
|
* 布局：侧栏 248px + 顶栏 64px + 内容区
|
|||
|
|
*/
|
|||
|
|
|
|||
|
|
import { useState, useEffect } from 'react'
|
|||
|
|
import { Layout, Menu, Avatar, Dropdown, Spin, Drawer, Button, type MenuProps } from 'antd'
|
|||
|
|
import {
|
|||
|
|
DashboardOutlined,
|
|||
|
|
SafetyOutlined,
|
|||
|
|
FileTextOutlined,
|
|||
|
|
ApiOutlined,
|
|||
|
|
UserOutlined,
|
|||
|
|
MenuFoldOutlined,
|
|||
|
|
MenuUnfoldOutlined,
|
|||
|
|
MenuOutlined,
|
|||
|
|
LogoutOutlined,
|
|||
|
|
SettingOutlined,
|
|||
|
|
} from '@ant-design/icons'
|
|||
|
|
import type { ReactNode } from 'react'
|
|||
|
|
import { Outlet, useLocation, useNavigate } from 'react-router-dom'
|
|||
|
|
import { useAuth } from '@/app/providers/auth-context'
|
|||
|
|
import { useBreadcrumbs } from '@/lib/hooks/useBreadcrumbs'
|
|||
|
|
import styles from './AdminLayout.module.css'
|
|||
|
|
|
|||
|
|
const { Sider, Header, Content } = Layout
|
|||
|
|
|
|||
|
|
// 管理员菜单配置
|
|||
|
|
const adminMenuItems: MenuProps['items'] = [
|
|||
|
|
{
|
|||
|
|
key: '/dashboard',
|
|||
|
|
icon: <DashboardOutlined />,
|
|||
|
|
label: '总览',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
key: 'access-control',
|
|||
|
|
icon: <SafetyOutlined />,
|
|||
|
|
label: '访问控制',
|
|||
|
|
children: [
|
|||
|
|
{ key: '/users', label: '用户管理' },
|
|||
|
|
{ key: '/roles', label: '角色管理' },
|
|||
|
|
{ key: '/permissions', label: '权限管理' },
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
key: 'logs',
|
|||
|
|
icon: <FileTextOutlined />,
|
|||
|
|
label: '审计日志',
|
|||
|
|
children: [
|
|||
|
|
{ key: '/logs/login', label: '登录日志' },
|
|||
|
|
{ key: '/logs/operation', label: '操作日志' },
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
key: 'integration',
|
|||
|
|
icon: <ApiOutlined />,
|
|||
|
|
label: '集成能力',
|
|||
|
|
children: [
|
|||
|
|
{ key: '/webhooks', label: 'Webhooks' },
|
|||
|
|
{ key: '/import-export', label: '导入导出' },
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
key: 'profile',
|
|||
|
|
icon: <UserOutlined />,
|
|||
|
|
label: '我的账户',
|
|||
|
|
children: [
|
|||
|
|
{ key: '/profile', label: '个人资料' },
|
|||
|
|
{ key: '/profile/security', label: '安全设置' },
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
]
|
|||
|
|
|
|||
|
|
// 非管理员菜单配置（只有 Webhooks 和个人中心）
|
|||
|
|
const userMenuItems: MenuProps['items'] = [
|
|||
|
|
{
|
|||
|
|
key: '/webhooks',
|
|||
|
|
icon: <ApiOutlined />,
|
|||
|
|
label: 'Webhooks',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
key: 'profile',
|
|||
|
|
icon: <UserOutlined />,
|
|||
|
|
label: '我的账户',
|
|||
|
|
children: [
|
|||
|
|
{ key: '/profile', label: '个人资料' },
|
|||
|
|
{ key: '/profile/security', label: '安全设置' },
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
]
|
|||
|
|
|
|||
|
|
interface AdminLayoutProps {
|
|||
|
|
children?: ReactNode
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export function AdminLayout({ children }: AdminLayoutProps) {
|
|||
|
|
const [collapsed, setCollapsed] = useState(false)
|
|||
|
|
const [mobileDrawerOpen, setMobileDrawerOpen] = useState(false)
|
|||
|
|
const [isMobile, setIsMobile] = useState(false)
|
|||
|
|
const location = useLocation()
|
|||
|
|
const navigate = useNavigate()
|
|||
|
|
const { user, isAdmin, logout, isLoading } = useAuth()
|
|||
|
|
const breadcrumbItems = useBreadcrumbs()
|
|||
|
|
|
|||
|
|
// 检测移动端
|
|||
|
|
useEffect(() => {
|
|||
|
|
const checkMobile = () => {
|
|||
|
|
setIsMobile(window.innerWidth < 768)
|
|||
|
|
}
|
|||
|
|
checkMobile()
|
|||
|
|
window.addEventListener('resize', checkMobile)
|
|||
|
|
return () => window.removeEventListener('resize', checkMobile)
|
|||
|
|
}, [])
|
|||
|
|
|
|||
|
|
// 移动端切换侧边栏
|
|||
|
|
const toggleMobileDrawer = () => {
|
|||
|
|
setMobileDrawerOpen(!mobileDrawerOpen)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 移动端菜单点击后关闭抽屉
|
|||
|
|
const handleMobileMenuClick: MenuProps['onClick'] = (info) => {
|
|||
|
|
navigate(info.key)
|
|||
|
|
setMobileDrawerOpen(false)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 根据是否为管理员选择菜单
|
|||
|
|
const menuItems = isAdmin ? adminMenuItems : userMenuItems
|
|||
|
|
|
|||
|
|
// 当前选中的菜单
|
|||
|
|
const selectedKeys = [location.pathname]
|
|||
|
|
|
|||
|
|
// 当前展开的菜单组（根据路径决定哪个分组展开）
|
|||
|
|
const openKeys = collapsed
|
|||
|
|
? []
|
|||
|
|
: [
|
|||
|
|
...(location.pathname.startsWith('/users') ||
|
|||
|
|
location.pathname.startsWith('/roles') ||
|
|||
|
|
location.pathname.startsWith('/permissions')
|
|||
|
|
? ['access-control']
|
|||
|
|
: []),
|
|||
|
|
...(location.pathname.startsWith('/logs') ? ['logs'] : []),
|
|||
|
|
...(location.pathname.startsWith('/webhooks') ||
|
|||
|
|
location.pathname.startsWith('/import-export')
|
|||
|
|
? ['integration']
|
|||
|
|
: []),
|
|||
|
|
...(location.pathname.startsWith('/profile') ? ['profile'] : []),
|
|||
|
|
]
|
|||
|
|
|
|||
|
|
const handleMenuClick: MenuProps['onClick'] = (info) => {
|
|||
|
|
navigate(info.key)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 处理面包屑点击
|
|||
|
|
const handleBreadcrumbClick = (path: string) => {
|
|||
|
|
navigate(path)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 处理登出
|
|||
|
|
const handleLogout = () => {
|
|||
|
|
void logout()
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 用户下拉菜单
|
|||
|
|
const userDropdownItems: MenuProps['items'] = [
|
|||
|
|
{
|
|||
|
|
key: 'profile',
|
|||
|
|
icon: <UserOutlined />,
|
|||
|
|
label: '个人资料',
|
|||
|
|
onClick: () => navigate('/profile'),
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
key: 'security',
|
|||
|
|
icon: <SettingOutlined />,
|
|||
|
|
label: '安全设置',
|
|||
|
|
onClick: () => navigate('/profile/security'),
|
|||
|
|
},
|
|||
|
|
{ type: 'divider' },
|
|||
|
|
{
|
|||
|
|
key: 'logout',
|
|||
|
|
icon: <LogoutOutlined />,
|
|||
|
|
label: '退出登录',
|
|||
|
|
danger: true,
|
|||
|
|
onClick: handleLogout,
|
|||
|
|
},
|
|||
|
|
]
|
|||
|
|
|
|||
|
|
// 加载中状态
|
|||
|
|
if (isLoading) {
|
|||
|
|
return (
|
|||
|
|
<div className={styles.loadingContainer}>
|
|||
|
|
<Spin size="large" tip="正在恢复会话..." />
|
|||
|
|
</div>
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<Layout className={styles.layout}>
|
|||
|
|
{/* 跳过链接 - 便于键盘用户快速跳转到主要内容 */}
|
|||
|
|
<a href="#main-content" className={styles.skipLink}>
|
|||
|
|
跳转到主要内容
|
|||
|
|
</a>
|
|||
|
|
|
|||
|
|
{/* 侧边栏 */}
|
|||
|
|
<Sider
|
|||
|
|
collapsible
|
|||
|
|
collapsed={collapsed}
|
|||
|
|
onCollapse={setCollapsed}
|
|||
|
|
width={248}
|
|||
|
|
collapsedWidth={84}
|
|||
|
|
className={styles.sider}
|
|||
|
|
trigger={null}
|
|||
|
|
>
|
|||
|
|
{/* Logo 区域 */}
|
|||
|
|
<div className={styles.logo}>
|
|||
|
|
{collapsed ? 'UMS' : '用户管理系统'}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* 导航菜单 */}
|
|||
|
|
<Menu
|
|||
|
|
mode="inline"
|
|||
|
|
selectedKeys={selectedKeys}
|
|||
|
|
defaultOpenKeys={openKeys}
|
|||
|
|
items={menuItems}
|
|||
|
|
onClick={handleMenuClick}
|
|||
|
|
className={styles.menu}
|
|||
|
|
style={{ pointerEvents: 'auto' }}
|
|||
|
|
/>
|
|||
|
|
</Sider>
|
|||
|
|
|
|||
|
|
{/* 右侧主体 */}
|
|||
|
|
<Layout>
|
|||
|
|
{/* 顶栏 */}
|
|||
|
|
<Header className={styles.header}>
|
|||
|
|
<div className={styles.headerLeft}>
|
|||
|
|
{/* 折叠/菜单按钮 - 移动端显示菜单图标，桌面端显示折叠图标 */}
|
|||
|
|
{isMobile ? (
|
|||
|
|
<Button
|
|||
|
|
type="text"
|
|||
|
|
icon={<MenuOutlined />}
|
|||
|
|
onClick={toggleMobileDrawer}
|
|||
|
|
className={styles.collapseBtn}
|
|||
|
|
/>
|
|||
|
|
) : (
|
|||
|
|
<button
|
|||
|
|
className={styles.collapseBtn}
|
|||
|
|
onClick={() => setCollapsed(!collapsed)}
|
|||
|
|
>
|
|||
|
|
{collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
|
|||
|
|
</button>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{/* 面包屑 */}
|
|||
|
|
{breadcrumbItems && breadcrumbItems.length > 0 && (
|
|||
|
|
<div className={styles.breadcrumb}>
|
|||
|
|
{breadcrumbItems.map((item, index) => (
|
|||
|
|
<span key={index}>
|
|||
|
|
{item.path ? (
|
|||
|
|
<a
|
|||
|
|
className={styles.breadcrumbLink}
|
|||
|
|
onClick={() => handleBreadcrumbClick(item.path as string)}
|
|||
|
|
>
|
|||
|
|
{item.title}
|
|||
|
|
</a>
|
|||
|
|
) : (
|
|||
|
|
<span className={styles.breadcrumbCurrent}>
|
|||
|
|
{item.title}
|
|||
|
|
</span>
|
|||
|
|
)}
|
|||
|
|
{index < breadcrumbItems.length - 1 && (
|
|||
|
|
<span className={styles.breadcrumbSeparator}>/</span>
|
|||
|
|
)}
|
|||
|
|
</span>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className={styles.headerRight}>
|
|||
|
|
{/* 用户信息 */}
|
|||
|
|
<Dropdown menu={{ items: userDropdownItems }} placement="bottomRight">
|
|||
|
|
<div className={styles.userTrigger}>
|
|||
|
|
<Avatar
|
|||
|
|
size={32}
|
|||
|
|
icon={<UserOutlined />}
|
|||
|
|
src={user?.avatar || null}
|
|||
|
|
style={{ backgroundColor: user?.avatar ? undefined : 'var(--color-primary)' }}
|
|||
|
|
/>
|
|||
|
|
<span className={styles.userName}>
|
|||
|
|
{user?.nickname || user?.username || '用户'}
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
</Dropdown>
|
|||
|
|
</div>
|
|||
|
|
</Header>
|
|||
|
|
|
|||
|
|
{/* 内容区 */}
|
|||
|
|
<Content id="main-content" className={styles.content}>
|
|||
|
|
{children || <Outlet />}
|
|||
|
|
</Content>
|
|||
|
|
</Layout>
|
|||
|
|
|
|||
|
|
{/* 移动端抽屉式导航 */}
|
|||
|
|
<Drawer
|
|||
|
|
title={
|
|||
|
|
<div className={styles.logo}>
|
|||
|
|
{collapsed ? 'UMS' : '用户管理系统'}
|
|||
|
|
</div>
|
|||
|
|
}
|
|||
|
|
placement="left"
|
|||
|
|
onClose={toggleMobileDrawer}
|
|||
|
|
open={mobileDrawerOpen}
|
|||
|
|
size="default"
|
|||
|
|
className={styles.mobileDrawer}
|
|||
|
|
styles={{ body: { padding: 0 } }}
|
|||
|
|
>
|
|||
|
|
<Menu
|
|||
|
|
mode="inline"
|
|||
|
|
selectedKeys={selectedKeys}
|
|||
|
|
defaultOpenKeys={openKeys}
|
|||
|
|
items={menuItems}
|
|||
|
|
onClick={handleMobileMenuClick}
|
|||
|
|
className={styles.menu}
|
|||
|
|
style={{ pointerEvents: 'auto' }}
|
|||
|
|
/>
|
|||
|
|
</Drawer>
|
|||
|
|
</Layout>
|
|||
|
|
)
|
|||
|
|
}
|