From eab76cd34bff799686f68e6b70f86c9001e4913f Mon Sep 17 00:00:00 2001
From: zjj <3272660260@qq.com>
Date: 星期五, 23 五月 2025 09:41:21 +0800
Subject: [PATCH] Merge remote-tracking branch 'origin/devlop' into devlop
---
rsf-admin/src/page/login/index.jsx | 259 ++++++++++++++++++---------------------------------
1 files changed, 94 insertions(+), 165 deletions(-)
diff --git a/rsf-admin/src/page/login/index.jsx b/rsf-admin/src/page/login/index.jsx
index 634211a..877a367 100644
--- a/rsf-admin/src/page/login/index.jsx
+++ b/rsf-admin/src/page/login/index.jsx
@@ -1,195 +1,124 @@
-import * as React from 'react';
-import { useState } from 'react';
-import { useLocation } from 'react-router-dom';
+import React, { useState, useRef, useEffect, useMemo } from "react";
import {
- Avatar,
Box,
- Button,
+ AppBar,
Card,
- CardActions,
+ Toolbar,
CircularProgress,
+ Typography,
+ Tabs,
+ Tab,
+ useTheme,
+ useMediaQuery,
} 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';
+import { getSystemInfo, tenants } from '@/api/auth';
+import Login from "./Login";
+import Register from "./Register";
-const Login = () => {
- const [loading, setLoading] = useState(false);
+const Index = () => {
const translate = useTranslate();
+ const theme = useTheme();
+ const isSmallScreen = useMediaQuery(theme.breakpoints.down('md'));
- const notify = useNotify();
- const login = useLogin();
- const location = useLocation();
+ const [tab, setTab] = useState(0)
+ const [systemInfo, setSystemInfo] = useState({});
+ const [tenantList, setTenantList] = useState([]);
- const [tenantList, setTenantList] = React.useState([]);
- const [tenantId, setTenantId] = React.useState(null);
+ const formPosition = isSmallScreen ? 'middle' : 'right'
- React.useEffect(() => {
+ useEffect(() => {
+ getSystemInfo().then(data => {
+ setSystemInfo(data);
+ })
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',
+ <Box
+ sx={{
+ display: 'flex',
+ flexDirection: 'column',
+ minHeight: '100vh',
+ 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
+ loop
+ muted
+ style={{
+ position: 'fixed',
+ top: 0,
+ left: 0,
+ width: '100%',
+ height: '100%',
+ // objectFit: 'cover',
+ // objectFit: 'contain',
+ objectFit: 'fill',
+ // objectFit: 'scale-down',
+ zIndex: 0,
}}
>
- <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>
+ {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
+ <Card sx={{
+ width: 400,
+ marginTop: formPosition === 'middle' ? '6em' : 0,
+ zIndex: 1
+ }}>
+ <div>
+ <AppBar position="static" sx={{ backgroundColor: '#3D4BA7' }}>
+ <Toolbar>
+ <Typography variant="h6" color="inherit">{translate("page.login.title")}</Typography>
+ </Toolbar>
+ </AppBar>
+ </div>
+
+ {systemInfo.mode === 'ONLINE' ? (
+ <>
+ <Tabs
+ value={tab}
+ onChange={(event, value) => {
+ setTab(value);
+ }}
+ indicatorColor="primary"
+ textColor="primary"
+ variant="fullWidth"
>
- {loading && (
- <CircularProgress size={25} thickness={2} />
- )}
- {translate('ra.auth.sign_in')}
- </Button>
- </CardActions>
- </Card>
- </Box>
- </Form>
+ <Tab label={translate('page.login.tab.login')} sx={{ fontSize: '.8em' }} />
+ <Tab label={translate('page.login.tab.register')} sx={{ fontSize: '.8em' }} />
+ </Tabs>
+
+ {tab === 0 && <Login systemInfo={systemInfo} tenantList={tenantList} />}
+ {tab === 1 && <Register systemInfo={systemInfo} tenantList={tenantList} />}
+ </>
+ ) : (
+ <Login systemInfo={systemInfo} tenantList={tenantList} />
+ )}
+
+ {/* <Box mb={1} sx={{ textAlign: 'center' }}>
+ <Typography variant="caption" align="center">{translate("page.login.footer")}</Typography>
+ </Box> */}
+ </Card>
+ </Box >
);
};
-export default Login;
+export default Index;
--
Gitblit v1.9.1