guangfei.zhao
5f93573e57
Add new RAG dashboard feature including: - Main application layout with header and sidebar - Multiple pages (Home, KnowledgeBase, PipelineConfig, Dashboard, MCP) - Theme configuration and styling - Routing setup with protected routes - Login page and authentication flow - Various UI components and mock data for dashboard views
39 lines
733 B
TypeScript
39 lines
733 B
TypeScript
import { Box, styled } from '@mui/material';
|
|
import { Outlet } from 'react-router-dom';
|
|
import Header from './Header';
|
|
import Sidebar from './Sidebar';
|
|
|
|
const LayoutContainer = styled(Box)({
|
|
display: 'flex',
|
|
height: '100vh',
|
|
});
|
|
|
|
const MainContent = styled(Box)({
|
|
flex: 1,
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
overflow: 'hidden',
|
|
});
|
|
|
|
const ContentArea = styled(Box)({
|
|
flex: 1,
|
|
padding: '20px',
|
|
overflow: 'auto',
|
|
backgroundColor: '#f5f7fa',
|
|
});
|
|
|
|
const MainLayout = () => {
|
|
return (
|
|
<LayoutContainer>
|
|
<Sidebar />
|
|
<MainContent>
|
|
<Header />
|
|
<ContentArea>
|
|
<Outlet />
|
|
</ContentArea>
|
|
</MainContent>
|
|
</LayoutContainer>
|
|
);
|
|
};
|
|
|
|
export default MainLayout; |