36 lines
964 B
JavaScript
36 lines
964 B
JavaScript
import React, { useState, Suspense } from 'react';
|
|
import { Layout, Spin } from 'antd';
|
|
import { Outlet } from 'react-router-dom';
|
|
import Header from './Header';
|
|
import Sidebar from './Sidebar';
|
|
import { useTheme } from '@/contexts/ThemeContext';
|
|
|
|
const { Content } = Layout;
|
|
|
|
const MainLayout = () => {
|
|
const [collapsed, setCollapsed] = useState(false);
|
|
const { isDarkMode } = useTheme();
|
|
|
|
return (
|
|
<Layout style={{ minHeight: '100vh' }}>
|
|
<Sidebar collapsed={collapsed} />
|
|
<Layout>
|
|
<Header collapsed={collapsed} setCollapsed={setCollapsed} />
|
|
<Content
|
|
style={{
|
|
margin: '24px 16px',
|
|
padding: 24,
|
|
background: isDarkMode ? '#141414' : '#fff',
|
|
borderRadius: '4px',
|
|
}}
|
|
>
|
|
<Suspense fallback={<Spin size="large" />}>
|
|
<Outlet />
|
|
</Suspense>
|
|
</Content>
|
|
</Layout>
|
|
</Layout>
|
|
);
|
|
};
|
|
|
|
export default MainLayout; |