AI_POC/TERES_web_frontend
11
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(layout): migrate styled components to sx prop in Header and Sidebar

Browse Source 
feat(pages): add new KnowledgeBaseList and Login pages with complete functionality

feat(services): implement knowledge service with comprehensive API methods

feat(hooks): add login hooks for authentication and form management
This commit is contained in:
guangfei.zhao
2025-10-11 11:31:24 +08:00
parent d6ff547f20
commit 650c41dc41
7 changed files with 450 additions and 125 deletions
Download Patch File Download Diff File Expand all files Collapse all files

240
src/pages/login/Login.tsx Normal file
View File

@@ -0,0 +1,240 @@
import { useTranslation } from 'react-i18next';
import {
Box,
Button,
Checkbox,
Container,
FormControlLabel,
TextField,
Typography,
Link,
AppBar,
Toolbar,
Card,
CardContent,
Alert,
Tabs,
Tab
} from '@mui/material';
import LanguageSwitcher from '../../components/LanguageSwitcher';
import { useLoginPage } from '../../hooks/login_hooks';
const Login = () => {
const { t } = useTranslation();
const {
// 表单状态
tabValue,
setTabValue,
error,
loginForm,
registerForm,
// 表单操作
handleTabChange,
// 提交处理
handleLogin,
handleRegister,
isSubmitting,
// 验证规则
loginValidation,
registerValidation
} = useLoginPage();
return (
<Box sx={{ minHeight: '100vh', width: '100vw', bgcolor: 'background.default', display: 'flex', flexDirection: 'column' }}>
{/* 顶部栏使用主题主色 */}
<AppBar position="static" color="primary" enableColorOnDark>
<Toolbar sx={{ minHeight: 60, justifyContent: 'space-between' }}>
<Box
sx={{
width: 40,
height: 40,
bgcolor: 'common.white',
color: 'primary.main',
borderRadius: '50%',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
fontWeight: 700,
fontSize: '1.1rem',
}}
aria-label="Brand"
>
T
</Box>
<LanguageSwitcher />
</Toolbar>
</AppBar>
{/* 主体卡片 */}
<Container maxWidth="sm" sx={{ flex: 1, display: 'flex', alignItems: 'center' }}>
<Card sx={{ width: '100%' }}>
<CardContent sx={{ p: 4 }}>
<Typography variant="subtitle1" color="text.secondary" sx={{ mb: 1, display: 'block' }}>
T-Systems Enterprise RAG Empowerment System
</Typography>
{/* 标签页 */}
<Tabs value={tabValue} onChange={handleTabChange} sx={{ mb: 3 }}>
<Tab label={t('login.login')} />
<Tab label={t('login.signUp')} />
</Tabs>
{error && (
<Alert severity="error" sx={{ mb: 2 }}>
{error}
</Alert>
)}
{/* 登录表单 */}
{tabValue === 0 && (
<Box component="form" onSubmit={loginForm.handleSubmit(handleLogin)} noValidate>
<Typography variant="h5" fontWeight={700} sx={{ mb: 2 }}>
{t('login.loginDescription')}
</Typography>
<TextField
fullWidth
id="login-email"
type="email"
placeholder={t('login.emailPlaceholder')}
autoComplete="email"
{...loginForm.register('email', loginValidation.email)}
error={!!loginForm.formState.errors.email}
helperText={loginForm.formState.errors.email?.message}
sx={{ mb: 2 }}
/>
<TextField
fullWidth
id="login-password"
type="password"
placeholder={t('login.passwordPlaceholder')}
autoComplete="current-password"
{...loginForm.register('password', loginValidation.password)}
error={!!loginForm.formState.errors.password}
helperText={loginForm.formState.errors.password?.message}
sx={{ mb: 2 }}
/>
<Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 2 }}>
<FormControlLabel
control={
<Checkbox
{...loginForm.register('rememberEmail')}
id="rememberEmail"
/>
}
label={t('login.rememberMe')}
/>
</Box>
<Button
type="submit"
variant="contained"
fullWidth
disabled={isSubmitting}
sx={{ mb: 2 }}
>
{isSubmitting ? 'Processing...' : t('login.login')}
</Button>
</Box>
)}
{/* 注册表单 */}
{tabValue === 1 && (
<Box component="form" onSubmit={registerForm.handleSubmit(handleRegister)} noValidate>
<Typography variant="h5" fontWeight={700} sx={{ mb: 2 }}>
{t('login.registerDescription')}
</Typography>
<TextField
fullWidth
id="register-nickname"
placeholder={t('login.nicknamePlaceholder')}
{...registerForm.register('nickname', registerValidation.nickname)}
error={!!registerForm.formState.errors.nickname}
helperText={registerForm.formState.errors.nickname?.message}
sx={{ mb: 2 }}
/>
<TextField
fullWidth
id="register-email"
type="email"
placeholder={t('login.emailPlaceholder')}
autoComplete="email"
{...registerForm.register('email', registerValidation.email)}
error={!!registerForm.formState.errors.email}
helperText={registerForm.formState.errors.email?.message}
sx={{ mb: 2 }}
/>
<TextField
fullWidth
id="register-password"
type="password"
placeholder={t('login.passwordPlaceholder')}
autoComplete="new-password"
{...registerForm.register('password', registerValidation.password)}
error={!!registerForm.formState.errors.password}
helperText={registerForm.formState.errors.password?.message}
sx={{ mb: 2 }}
/>
<Button
type="submit"
variant="contained"
fullWidth
disabled={isSubmitting}
sx={{ mb: 2 }}
>
{isSubmitting ? 'Processing...' : t('login.register')}
</Button>
</Box>
)}
<Box sx={{ mt: 2, textAlign: 'center' }}>
<Box mt={0.5}>
{tabValue === 0 ? (
<>
{t('login.signInTip')} <Link href="#" onClick={() => setTabValue(1)}>{t('login.signUp')}</Link>.
</>
) : (
<>
{t('login.signUpTip')} <Link href="#" onClick={() => setTabValue(0)}>{t('login.login')}</Link>.
</>
)}
</Box>
</Box>
</CardContent>
</Card>
</Container>
{/* 页脚 */}
<Box
sx={{
borderTop: '1px solid',
borderColor: 'divider',
height: 50,
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
px: 2,
color: 'text.secondary',
bgcolor: 'background.paper',
}}
>
<Box>© Deutsche Telekom AG</Box>
<Box sx={{ display: 'flex', gap: 2 }}>
<Link href="#" color="inherit">Imprint</Link>
<Link href="#" color="inherit">Data privacy</Link>
</Box>
</Box>
</Box>
);
};
export default Login;