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
73 lines
1.7 KiB
TypeScript
73 lines
1.7 KiB
TypeScript
import { Box, InputBase, styled } from '@mui/material';
|
|
import SearchIcon from '@mui/icons-material/Search';
|
|
import AccountCircleIcon from '@mui/icons-material/AccountCircle';
|
|
|
|
const HeaderContainer = styled(Box)(({ theme }) => ({
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
padding: '0 20px',
|
|
height: '60px',
|
|
backgroundColor: '#FFFFFF',
|
|
color: '#333',
|
|
boxShadow: '0 1px 3px rgba(0,0,0,0.1)',
|
|
borderBottom: '1px solid #E5E5E5',
|
|
}));
|
|
|
|
const BrandTitle = styled(Box)(({ theme }) => ({
|
|
fontSize: '1.2rem',
|
|
fontWeight: 'bold',
|
|
color: '#333',
|
|
}));
|
|
|
|
const SearchBox = styled(Box)(({ theme }) => ({
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
backgroundColor: '#F8F9FA',
|
|
borderRadius: '6px',
|
|
padding: '6px 12px',
|
|
width: '320px',
|
|
border: '1px solid #E5E5E5',
|
|
marginLeft: 'auto',
|
|
marginRight: '20px',
|
|
'&:focus-within': {
|
|
borderColor: theme.palette.primary.main,
|
|
boxShadow: `0 0 0 2px rgba(226,0,116,0.1)`,
|
|
},
|
|
'& .MuiInputBase-input': {
|
|
border: 'none',
|
|
outline: 'none',
|
|
backgroundColor: 'transparent',
|
|
fontSize: '14px',
|
|
color: '#333',
|
|
'&::placeholder': {
|
|
color: '#999',
|
|
},
|
|
},
|
|
}));
|
|
|
|
const SearchInput = styled(InputBase)(({ theme }) => ({
|
|
marginLeft: '8px',
|
|
flex: 1,
|
|
fontSize: '0.875rem',
|
|
}));
|
|
|
|
const UserAvatar = styled(AccountCircleIcon)(({ theme }) => ({
|
|
color: '#666',
|
|
cursor: 'pointer',
|
|
fontSize: '2rem',
|
|
}));
|
|
|
|
const Header = () => {
|
|
return (
|
|
<HeaderContainer>
|
|
<BrandTitle>RAG Dashboard</BrandTitle>
|
|
<SearchBox>
|
|
<SearchIcon sx={{ color: '#999', fontSize: '1.2rem' }} />
|
|
<SearchInput placeholder="Search queries, KB names..." />
|
|
</SearchBox>
|
|
<UserAvatar titleAccess="User Profile" />
|
|
</HeaderContainer>
|
|
);
|
|
};
|
|
|
|
export default Header; |