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