From 5db7ca2bfe4b3093121a2dca4a9366a75015961f Mon Sep 17 00:00:00 2001 From: vincentlu <t1341870251@gmail.com> Date: 星期五, 07 二月 2025 15:58:22 +0800 Subject: [PATCH] # --- /dev/null | 195 ------------------------------------------------ rsf-admin/src/page/login/index.jsx | 18 +++- rsf-admin/src/config/setting.js | 2 3 files changed, 13 insertions(+), 202 deletions(-) diff --git a/rsf-admin/src/config/setting.js b/rsf-admin/src/config/setting.js index 8a8f2a8..e82fd01 100644 --- a/rsf-admin/src/config/setting.js +++ b/rsf-admin/src/config/setting.js @@ -35,6 +35,6 @@ export const EDIT_MODE = 'pessimistic'; // pessimistic | undoable -export const LOGIN_BACKGROUND = 'image'; // image | media +export const LOGIN_BACKGROUND = 'media'; // image | media export const CUSTOM_PAGES_DATA_INTERVAL = 1000; \ No newline at end of file diff --git a/rsf-admin/src/page/login/index.jsx b/rsf-admin/src/page/login/index.jsx index 6a70e7a..49f801c 100644 --- a/rsf-admin/src/page/login/index.jsx +++ b/rsf-admin/src/page/login/index.jsx @@ -8,6 +8,8 @@ Typography, Tabs, Tab, + useTheme, + useMediaQuery, } from '@mui/material'; import { useTranslate, @@ -21,9 +23,13 @@ const Index = () => { const translate = useTranslate(); + const theme = useTheme(); + const isSmallScreen = useMediaQuery(theme.breakpoints.down('md')); const [tab, setTab] = useState(0) const [tenantList, setTenantList] = useState([]); + + const formPosition = isSmallScreen ? 'middle' : 'right' useEffect(() => { tenants().then(data => { @@ -31,20 +37,20 @@ }) }, []); + return ( <Box sx={{ display: 'flex', flexDirection: 'column', minHeight: '100vh', - alignItems: 'center', - justifyContent: 'flex-start', - // justifyContent: 'center', + alignItems: formPosition === 'middle' ? 'center' : 'flex-end', + paddingRight: formPosition === 'middle' ? 0 : '6em', + justifyContent: formPosition === 'middle' ? 'flex-start' : 'center', background: `url(/login_bg.jpg)`, // https://unsplash.com/ backgroundRepeat: 'no-repeat', backgroundSize: 'cover', - } - } + }} > <video autoPlay @@ -70,7 +76,7 @@ <Card sx={{ width: 400, - marginTop: '6em', + marginTop: formPosition === 'middle' ? '6em' : 0, zIndex: 1 }}> <div> diff --git a/rsf-admin/src/page/login/index2.jsx b/rsf-admin/src/page/login/index2.jsx deleted file mode 100644 index 634211a..0000000 --- a/rsf-admin/src/page/login/index2.jsx +++ /dev/null @@ -1,195 +0,0 @@ -import * as React from 'react'; -import { useState } from 'react'; -import { useLocation } from 'react-router-dom'; -import { - Avatar, - Box, - Button, - Card, - CardActions, - CircularProgress, -} from '@mui/material'; -import LockIcon from '@mui/icons-material/Lock'; -import { - Form, - required, - TextInput, - useTranslate, - useLogin, - useNotify, - SelectInput, -} from 'react-admin'; -import { LOGIN_BACKGROUND } from '@/config/setting'; -import { tenants } from '@/api/auth'; - -const Login = () => { - const [loading, setLoading] = useState(false); - const translate = useTranslate(); - - const notify = useNotify(); - const login = useLogin(); - const location = useLocation(); - - const [tenantList, setTenantList] = React.useState([]); - const [tenantId, setTenantId] = React.useState(null); - - React.useEffect(() => { - tenants().then(data => { - setTenantList(data); - if (data.length > 0) { - setTenantId(data[0].id); - } - }) - }, []); - - React.useEffect(() => { - console.log(tenantId); - }, [tenantId]); - - const handleSubmit = (auth) => { - setLoading(true); - // js native confirm && root - login( - auth, - location.state ? (location.state).nextPathname : '/' - ).catch((error) => { - setLoading(false); - notify( - typeof error === 'string' - ? error - : typeof error === 'undefined' || !error.message - ? 'ra.auth.sign_in_error' - : error.message, - { - type: 'error', - messageArgs: { - _: - typeof error === 'string' - ? error - : error && error.message - ? error.message - : undefined, - }, - } - ); - }); - }; - - return ( - <Form onSubmit={handleSubmit} noValidate> - {/* https://unsplash.com/ */} - <Box - sx={{ - display: 'flex', - flexDirection: 'column', - minHeight: '100vh', - alignItems: 'center', - justifyContent: 'flex-start', - // justifyContent: 'center', - background: `url(/login_bg.jpg)`, - backgroundRepeat: 'no-repeat', - backgroundSize: 'cover', - }} - > - <video - autoPlay - loop - muted - style={{ - position: 'fixed', - top: 0, - left: 0, - width: '100%', - height: '100%', - // objectFit: 'cover', - // objectFit: 'contain', - objectFit: 'fill', - // objectFit: 'scale-down', - zIndex: 0, - }} - > - {LOGIN_BACKGROUND === 'media' && ( - <source src="/login_bg.mp4" type="video/mp4" /> - )} - </video> - - <Card sx={{ - minWidth: 300, - marginTop: '6em', - zIndex: 1 - }}> - <Box - sx={{ - margin: '1em', - display: 'flex', - justifyContent: 'center', - }} - > - <Avatar sx={{ bgcolor: 'secondary.main' }}> - <LockIcon /> - </Avatar> - </Box> - <Box - sx={{ - marginTop: '1em', - display: 'flex', - justifyContent: 'center', - color: theme => theme.palette.grey[500], - }} - > - Hint: root / 123456 - </Box> - <Box sx={{ padding: '0 1em 1em 1em' }}> - <Box sx={{ marginTop: '1em' }}> - <SelectInput - label="page.login.tenant" - source="tenantId" - choices={tenantList.map(item => ({ - id: item.id, - name: item.name - }))} - validate={required()} - value={tenantId} - onChange={e => setTenantId(e.target.value)} - /> - </Box> - <Box sx={{ marginTop: '.1em' }}> - <TextInput - autoFocus - source="username" - label={translate('ra.auth.username')} - disabled={loading} - validate={required()} - /> - </Box> - <Box sx={{ marginTop: '.1em' }}> - <TextInput - source="password" - label={translate('ra.auth.password')} - type="password" - disabled={loading} - validate={required()} - /> - </Box> - </Box> - <CardActions sx={{ padding: '0 1em 1em 1em' }}> - <Button - variant="contained" - type="submit" - color="primary" - disabled={loading} - fullWidth - > - {loading && ( - <CircularProgress size={25} thickness={2} /> - )} - {translate('ra.auth.sign_in')} - </Button> - </CardActions> - </Card> - </Box> - </Form> - ); -}; - -export default Login; -- Gitblit v1.9.1