43 lines
1.2 KiB
TypeScript
43 lines
1.2 KiB
TypeScript
import React, { useState, useEffect } from 'react';
|
|
import { Sidebar } from './Sidebar';
|
|
import { Header } from './Header';
|
|
import { Breadcrumb } from './Breadcrumb';
|
|
|
|
interface LayoutProps {
|
|
children: React.ReactNode;
|
|
}
|
|
|
|
export function Layout({ children }: LayoutProps) {
|
|
const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
|
|
|
|
// 从本地存储中获取侧边栏状态
|
|
useEffect(() => {
|
|
const savedState = localStorage.getItem('sidebarCollapsed');
|
|
if (savedState) {
|
|
setSidebarCollapsed(savedState === 'true');
|
|
}
|
|
}, []);
|
|
|
|
const toggleSidebar = () => {
|
|
const newState = !sidebarCollapsed;
|
|
setSidebarCollapsed(newState);
|
|
localStorage.setItem('sidebarCollapsed', String(newState));
|
|
};
|
|
|
|
return (
|
|
<div className="layout-container">
|
|
<Sidebar
|
|
collapsed={sidebarCollapsed}
|
|
onToggle={toggleSidebar}
|
|
/>
|
|
|
|
<div className={`main-content ${sidebarCollapsed ? 'sidebar-collapsed' : ''}`}>
|
|
{/* <Header username="系统管理员" /> */}
|
|
<div className="content-container">
|
|
<Breadcrumb className="px-6 pt-4" />
|
|
{children}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|