feat: implement RAG dashboard with MUI and react-router
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
This commit is contained in:
262
src/pages/Login.tsx
Normal file
262
src/pages/Login.tsx
Normal file
@@ -0,0 +1,262 @@
|
||||
import { useState } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Checkbox,
|
||||
Container,
|
||||
FormControlLabel,
|
||||
TextField,
|
||||
Typography,
|
||||
Link,
|
||||
styled
|
||||
} from '@mui/material';
|
||||
|
||||
const LoginContainer = styled(Box)({
|
||||
height: '100vh',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
backgroundColor: '#f5f7fa',
|
||||
});
|
||||
|
||||
const TopBar = styled(Box)({
|
||||
height: '60px',
|
||||
backgroundColor: '#1a1a2e',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
padding: '0 20px',
|
||||
});
|
||||
|
||||
const BrandLogo = styled(Box)({
|
||||
width: '40px',
|
||||
height: '40px',
|
||||
backgroundColor: '#fff',
|
||||
color: '#1a1a2e',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
borderRadius: '50%',
|
||||
fontWeight: 'bold',
|
||||
fontSize: '1.2rem',
|
||||
});
|
||||
|
||||
const LoginMain = styled(Box)({
|
||||
flex: 1,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
});
|
||||
|
||||
const LoginCard = styled(Box)({
|
||||
width: '400px',
|
||||
backgroundColor: '#fff',
|
||||
borderRadius: '8px',
|
||||
boxShadow: '0 4px 12px rgba(0,0,0,0.1)',
|
||||
padding: '30px',
|
||||
});
|
||||
|
||||
const ServiceName = styled(Typography)({
|
||||
fontSize: '0.75rem',
|
||||
color: '#666',
|
||||
marginBottom: '10px',
|
||||
});
|
||||
|
||||
const LoginTitle = styled(Typography)({
|
||||
fontSize: '1.5rem',
|
||||
fontWeight: 'bold',
|
||||
marginBottom: '20px',
|
||||
});
|
||||
|
||||
const LoginForm = styled('form')({
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: '20px',
|
||||
});
|
||||
|
||||
const RememberRow = styled(Box)({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
});
|
||||
|
||||
const ActionButtons = styled(Box)({
|
||||
display: 'flex',
|
||||
gap: '10px',
|
||||
marginTop: '10px',
|
||||
});
|
||||
|
||||
const PrimaryButton = styled(Button)({
|
||||
backgroundColor: '#e20074',
|
||||
'&:hover': {
|
||||
backgroundColor: '#c10062',
|
||||
},
|
||||
});
|
||||
|
||||
const SecondaryButton = styled(Button)({
|
||||
color: '#333',
|
||||
backgroundColor: '#f5f5f5',
|
||||
'&:hover': {
|
||||
backgroundColor: '#e0e0e0',
|
||||
},
|
||||
});
|
||||
|
||||
const HelpSection = styled(Box)({
|
||||
marginTop: '20px',
|
||||
textAlign: 'center',
|
||||
fontSize: '0.875rem',
|
||||
});
|
||||
|
||||
const SocialLogin = styled(Box)({
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
gap: '10px',
|
||||
marginTop: '15px',
|
||||
});
|
||||
|
||||
const SocialButton = styled(Box)({
|
||||
width: '30px',
|
||||
height: '30px',
|
||||
borderRadius: '50%',
|
||||
backgroundColor: '#e0e0e0',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
cursor: 'pointer',
|
||||
});
|
||||
|
||||
const Footer = styled(Box)({
|
||||
height: '50px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
padding: '0 20px',
|
||||
borderTop: '1px solid #eee',
|
||||
fontSize: '0.75rem',
|
||||
color: '#666',
|
||||
});
|
||||
|
||||
const LegalLinks = styled(Box)({
|
||||
display: 'flex',
|
||||
gap: '15px',
|
||||
});
|
||||
|
||||
const Login = () => {
|
||||
const [username, setUsername] = useState('');
|
||||
const [rememberUser, setRememberUser] = useState(false);
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
const [error, setError] = useState(false);
|
||||
const navigate = useNavigate();
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
|
||||
if (!username.trim()) {
|
||||
setError(true);
|
||||
return;
|
||||
}
|
||||
|
||||
setIsSubmitting(true);
|
||||
setError(false);
|
||||
|
||||
// 模拟登录过程
|
||||
setTimeout(() => {
|
||||
navigate('/');
|
||||
}, 800);
|
||||
};
|
||||
|
||||
const handleCancel = () => {
|
||||
navigate('/');
|
||||
};
|
||||
|
||||
return (
|
||||
<LoginContainer>
|
||||
<TopBar>
|
||||
<BrandLogo>T</BrandLogo>
|
||||
</TopBar>
|
||||
|
||||
<LoginMain>
|
||||
<LoginCard>
|
||||
<ServiceName>Servicename</ServiceName>
|
||||
<LoginTitle>
|
||||
Enter Login <br/> Username
|
||||
</LoginTitle>
|
||||
|
||||
<LoginForm onSubmit={handleSubmit} noValidate>
|
||||
<TextField
|
||||
fullWidth
|
||||
id="username"
|
||||
name="username"
|
||||
placeholder="Username"
|
||||
autoComplete="username"
|
||||
value={username}
|
||||
onChange={(e) => setUsername(e.target.value)}
|
||||
error={error}
|
||||
required
|
||||
/>
|
||||
|
||||
<RememberRow>
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Checkbox
|
||||
checked={rememberUser}
|
||||
onChange={(e) => setRememberUser(e.target.checked)}
|
||||
id="rememberUser"
|
||||
/>
|
||||
}
|
||||
label="Remember username"
|
||||
/>
|
||||
<Link href="#" variant="caption">
|
||||
Forgot your username or password?
|
||||
</Link>
|
||||
</RememberRow>
|
||||
|
||||
<ActionButtons>
|
||||
<PrimaryButton
|
||||
type="submit"
|
||||
variant="contained"
|
||||
fullWidth
|
||||
disabled={isSubmitting}
|
||||
>
|
||||
{isSubmitting ? 'Processing...' : 'Next'}
|
||||
</PrimaryButton>
|
||||
<SecondaryButton
|
||||
type="button"
|
||||
variant="contained"
|
||||
fullWidth
|
||||
onClick={handleCancel}
|
||||
>
|
||||
Cancel
|
||||
</SecondaryButton>
|
||||
</ActionButtons>
|
||||
</LoginForm>
|
||||
|
||||
<HelpSection>
|
||||
<Link href="#">Do you need help?</Link>
|
||||
<Box mt={1}>
|
||||
No account? <Link href="#">Sign up</Link> or log in with your social network account.
|
||||
</Box>
|
||||
</HelpSection>
|
||||
|
||||
<SocialLogin>
|
||||
<SocialButton aria-label="Login with Facebook">
|
||||
<Link href="#" underline="none" color="inherit">f</Link>
|
||||
</SocialButton>
|
||||
<SocialButton aria-label="Login with Twitter">
|
||||
<Link href="#" underline="none" color="inherit">t</Link>
|
||||
</SocialButton>
|
||||
</SocialLogin>
|
||||
</LoginCard>
|
||||
</LoginMain>
|
||||
|
||||
<Footer>
|
||||
<Box>© Deutsche Telekom AG</Box>
|
||||
<LegalLinks>
|
||||
<Link href="#" color="inherit">Imprint</Link>
|
||||
<Link href="#" color="inherit">Data privacy</Link>
|
||||
</LegalLinks>
|
||||
</Footer>
|
||||
</LoginContainer>
|
||||
);
|
||||
};
|
||||
|
||||
export default Login;
|
||||
Reference in New Issue
Block a user