zy-asrs-master.git

parent: a9230ddf | 补丁 | 提交 | ignore whitespace

luxiaotao1123

2024-02-26 b2620715a093e5074cc0e18c874b8f708cbc968c

2个文件已修改

1个文件已添加

2个文件已删除

	zy-asrs-flow/config/routes.ts	2 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	zy-asrs-flow/src/pages/User/Login/index.jsx	450 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	zy-asrs-flow/src/pages/User/Login/index0.jsx	359 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	zy-asrs-flow/src/pages/User/Login/index1.jsx	362 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	zy-asrs-flow/src/pages/User/Login/index2.jsx	261 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史

 zy-asrs-flow/config/routes.ts

@@ -22,7 +22,7 @@
      {
        name: 'login',
        path: '/user/login',
        component: './User/Login/index2',
        component: './User/Login/index',
      },
    ],
  },

 zy-asrs-flow/src/pages/User/Login/index.jsx

@@ -1,71 +1,24 @@
import { Footer } from '@/components';
import { login } from '@/services/ant-design-pro/api';
import { getFakeCaptcha } from '@/services/ant-design-pro/login';
import {
    LockOutlined,
    MobileOutlined,
    UserOutlined,
} from '@ant-design/icons';
import {
    LoginForm,
    LoginFormPage,
    ProConfigProvider,
    ProFormCaptcha,
    ProFormCheckbox,
    ProFormText,
} from '@ant-design/pro-components';
import { Button, Divider, Alert, Tabs, message, theme } from 'antd';
import { useState } from 'react';
import { FormattedMessage, history, SelectLang, useIntl, useModel, Helmet } from '@umijs/max';
import { Alert, message, Tabs } from 'antd';
import React, { useState } from 'react';
import { flushSync } from 'react-dom';
import { createStyles } from 'antd-style';
import { request } from '@umijs/max';
import { setToken } from '@/utils/token-util'
import { PROJECT_NAME } from '@/config/setting'

const useStyles = createStyles(({ token }) => {
    return {
        action: {
            marginLeft: '8px',
            color: 'rgba(0, 0, 0, 0.2)',
            fontSize: '24px',
            verticalAlign: 'middle',
            cursor: 'pointer',
            transition: 'color 0.3s',
            '&:hover': {
                color: token.colorPrimaryActive,
            },
        },
        lang: {
            width: 42,
            height: 42,
            lineHeight: '42px',
            position: 'fixed',
            right: 16,
            borderRadius: token.borderRadius,
            ':hover': {
                backgroundColor: token.colorBgTextHover,
            },
        },
        container: {
            display: 'flex',
            flexDirection: 'column',
            height: '100vh',
            overflow: 'auto',
            backgroundImage:
                "url('https://mdn.alipayobjects.com/yuyan_qk0oxh/afts/img/V-_oS6r-i7wAAAAAAAAAAAAAFl94AQBr')",
            backgroundSize: '100% 100%',
        },
    };
});

const Lang = () => {
    const { styles } = useStyles();

    return (
        <div className={styles.lang} data-lang>
            {SelectLang && <SelectLang />}
        </div>
    );
};
import logo from './logo.png'

const LoginMessage = ({ content }) => {
    return (
@@ -80,12 +33,14 @@
    );
};

const Login = () => {
    const [userLoginState, setUserLoginState] = useState({});
    const [type, setType] = useState('account');
    const { initialState, setInitialState } = useModel('@@initialState');
    const { styles } = useStyles();
const Page = () => {
    const intl = useIntl();
    const { initialState, setInitialState } = useModel('@@initialState');
    const { token } = theme.useToken();

    const [loginType, setLoginType] = useState('account');
    const [userLoginState, setUserLoginState] = useState({});
    const [status, setStatus] = useState(200);

    console.log(initialState.memo);

@@ -126,22 +81,6 @@
                status: r.code,
                type: type,
            })

            // 登录
            // const msg = await login({ ...values, type });
            // if (msg.status === 'ok') {
            //   const defaultLoginSuccessMessage = intl.formatMessage({
            //     id: 'pages.login.success',
            //     defaultMessage: '登录成功！',
            //   });
            //   message.success(defaultLoginSuccessMessage);
            //   await fetchUserInfo();
            //   const urlParams = new URL(window.location.href).searchParams;
            //   history.push(urlParams.get('redirect') || '/');
            //   return;
            // }
            // // 如果失败去设置用户错误信息
            // setUserLoginState(msg);
        } catch (error) {
            console.log(error);
            message.error(intl.formatMessage({
@@ -149,211 +88,174 @@
                defaultMessage: '登录失败，请重试！',
            }));
        }
    };
    const { status, type: loginType } = userLoginState;
    }

    return (
        <div className={styles.container}>
            <Helmet>
                <title>
                    {intl.formatMessage({
                        id: 'menu.login',
                        defaultMessage: '登录页',
                    })}
                    - {PROJECT_NAME}
                </title>
            </Helmet>
            <Lang />
            <div style={{ flex: '1', padding: '32px 0', }} >
                <LoginForm
                    contentStyle={{
                        minWidth: 280,
                        maxWidth: '75vw',
                    }}
                    logo={<img alt="logo" src="/logo.svg" />}
                    title="Ant Design"
                    subTitle={intl.formatMessage({ id: 'pages.layouts.userLayout.title' })}
                    initialValues={{
                        autoLogin: true,
                    }}
                    onFinish={async (values) => {
                        await handleSubmit(values);
        <div
            style={{
                backgroundColor: 'white',
                height: '100vh',
            }}
        >
            <LoginFormPage
                backgroundImageUrl="https://mdn.alipayobjects.com/huamei_gcee1x/afts/img/A*y0ZTS6WLwvgAAAAAAAAAAAAADml6AQ/fmt.webp"
                logo={logo}
                backgroundVideoUrl="https://gw.alipayobjects.com/v/huamei_gcee1x/afts/video/jXRBRK_VAwoAAAAAAAAAAAAAK4eUAQBr"
                // title="陆晓涛"
                // subTitle="陆晓涛..."
                containerStyle={{
                    backgroundColor: 'rgba(0, 0, 0,0.65)',
                    backdropFilter: 'blur(4px)',
                }}
                initialValues={{
                    username: 'root',
                    password: '123456',
                    autoLogin: true,
                }}
                onFinish={async (values) => {
                    await handleSubmit(values);
                }}
            >
                <Tabs
                    centered
                    activeKey={loginType}
                    onChange={(activeKey) => setLoginType(activeKey)}
                >
                    <Tabs.TabPane key={'account'} tab={'账号密码登录'} />
                    <Tabs.TabPane key={'phone'} tab={'手机号登录'} />
                </Tabs>
                {loginType === 'account' && (
                    <>
                        <ProFormText
                            name="username"
                            fieldProps={{
                                size: 'large',
                                prefix: (
                                    <UserOutlined
                                        style={{
                                            color: token.colorText,
                                        }}
                                        className={'prefixIcon'}
                                    />
                                ),
                            }}
                            placeholder={'用户名: root'}
                            rules={[
                                {
                                    required: true,
                                    message: '请输入用户名!',
                                },
                            ]}
                        />
                        <ProFormText.Password
                            name="password"
                            fieldProps={{
                                size: 'large',
                                prefix: (
                                    <LockOutlined
                                        style={{
                                            color: token.colorText,
                                        }}
                                        className={'prefixIcon'}
                                    />
                                ),
                            }}
                            placeholder={'密码: 123456'}
                            rules={[
                                {
                                    required: true,
                                    message: '请输入密码！',
                                },
                            ]}
                        />
                    </>
                )}
                {status !== 200 && loginType === 'account' && (
                    <LoginMessage
                        content={'账户或密码错误'}
                    />
                )}
                {loginType === 'phone' && (
                    <>
                        <ProFormText
                            fieldProps={{
                                size: 'large',
                                prefix: (
                                    <MobileOutlined
                                        style={{
                                            color: token.colorText,
                                        }}
                                        className={'prefixIcon'}
                                    />
                                ),
                            }}
                            name="mobile"
                            placeholder={'手机号'}
                            rules={[
                                {
                                    required: true,
                                    message: '请输入手机号！',
                                },
                                {
                                    pattern: /^1\d{10}$/,
                                    message: '手机号格式错误！',
                                },
                            ]}
                        />
                        <ProFormCaptcha
                            fieldProps={{
                                size: 'large',
                                prefix: (
                                    <LockOutlined
                                        style={{
                                            color: token.colorText,
                                        }}
                                        className={'prefixIcon'}
                                    />
                                ),
                            }}
                            captchaProps={{
                                size: 'large',
                            }}
                            placeholder={'请输入验证码'}
                            captchaTextRender={(timing, count) => {
                                if (timing) {
                                    return `${count} ${'获取验证码'}`;
                                }
                                return '获取验证码';
                            }}
                            name="captcha"
                            rules={[
                                {
                                    required: true,
                                    message: '请输入验证码！',
                                },
                            ]}
                            onGetCaptcha={async () => {
                                // message.success('获取验证码成功！验证码为：1234');
                                message.warning('未开启手机号登录! ');
                            }}
                        />
                    </>
                )}
                <div
                    style={{
                        marginBlockEnd: 24,
                    }}
                >
                    <Tabs
                        activeKey={type}
                        onChange={setType}
                        centered
                        items={[
                            {
                                key: 'account',
                                label: intl.formatMessage({
                                    id: 'pages.login.accountLogin.tab',
                                    defaultMessage: '账户密码登录',
                                }),
                            },
                            {
                                key: 'mobile',
                                label: intl.formatMessage({
                                    id: 'pages.login.phoneLogin.tab',
                                    defaultMessage: '手机号登录',
                                }),
                            },
                        ]}
                    />

                    {status !== 200 && loginType === 'account' && (
                        <LoginMessage
                            content={intl.formatMessage({
                                id: 'pages.login.accountLogin.errorMessage',
                                defaultMessage: '账户或密码错误',
                            })}
                        />
                    )}
                    {type === 'account' && (
                        <>
                            <ProFormText
                                name="username"
                                fieldProps={{
                                    size: 'large',
                                    prefix: <UserOutlined />,
                                }}
                                placeholder={intl.formatMessage({
                                    id: 'pages.login.username.placeholder',
                                    defaultMessage: '用户名:',
                                })}
                                rules={[
                                    {
                                        required: true,
                                        message: (
                                            <FormattedMessage
                                                id="pages.login.username.required"
                                                defaultMessage="请输入用户名!"
                                            />
                                        ),
                                    },
                                ]}
                            />
                            <ProFormText.Password
                                name="password"
                                fieldProps={{
                                    size: 'large',
                                    prefix: <LockOutlined />,
                                }}
                                placeholder={intl.formatMessage({
                                    id: 'pages.login.password.placeholder',
                                    defaultMessage: '密码:',
                                })}
                                rules={[
                                    {
                                        required: true,
                                        message: (
                                            <FormattedMessage
                                                id="pages.login.password.required"
                                                defaultMessage="请输入密码！"
                                            />
                                        ),
                                    },
                                ]}
                            />
                        </>
                    )}

                    {status !== 200 && loginType === 'mobile' && <LoginMessage content="验证码错误" />}
                    {type === 'mobile' && (
                        <>
                            <ProFormText
                                fieldProps={{
                                    size: 'large',
                                    prefix: <MobileOutlined />,
                                }}
                                name="mobile"
                                placeholder={intl.formatMessage({
                                    id: 'pages.login.phoneNumber.placeholder',
                                    defaultMessage: '手机号',
                                })}
                                rules={[
                                    {
                                        required: true,
                                        message: (
                                            <FormattedMessage
                                                id="pages.login.phoneNumber.required"
                                                defaultMessage="请输入手机号！"
                                            />
                                        ),
                                    },
                                    {
                                        pattern: /^1\d{10}$/,
                                        message: (
                                            <FormattedMessage
                                                id="pages.login.phoneNumber.invalid"
                                                defaultMessage="手机号格式错误！"
                                            />
                                        ),
                                    },
                                ]}
                            />
                            <ProFormCaptcha
                                fieldProps={{
                                    size: 'large',
                                    prefix: <LockOutlined />,
                                }}
                                captchaProps={{
                                    size: 'large',
                                }}
                                placeholder={intl.formatMessage({
                                    id: 'pages.login.captcha.placeholder',
                                    defaultMessage: '请输入验证码',
                                })}
                                captchaTextRender={(timing, count) => {
                                    if (timing) {
                                        return `${count} ${intl.formatMessage({
                                            id: 'pages.getCaptchaSecondText',
                                            defaultMessage: '获取验证码',
                                        })}`;
                                    }
                                    return intl.formatMessage({
                                        id: 'pages.login.phoneLogin.getVerificationCode',
                                        defaultMessage: '获取验证码',
                                    });
                                }}
                                name="captcha"
                                rules={[
                                    {
                                        required: true,
                                        message: (
                                            <FormattedMessage
                                                id="pages.login.captcha.required"
                                                defaultMessage="请输入验证码！"
                                            />
                                        ),
                                    },
                                ]}
                                onGetCaptcha={async (phone) => {
                                    const result = await getFakeCaptcha({
                                        phone,
                                    });
                                    if (!result) {
                                        return;
                                    }
                                    message.success('获取验证码成功！验证码为：1234');
                                }}
                            />
                        </>
                    )}
                    <div
                        style={{
                            marginBottom: 24,
                        }}
                    >
                        <ProFormCheckbox noStyle name="autoLogin">
                            <FormattedMessage id="pages.login.rememberMe" defaultMessage="自动登录" />
                        </ProFormCheckbox>
                    </div>
                </LoginForm>
            </div>
            <Footer />
                    <ProFormCheckbox noStyle name="autoLogin">
                        自动登录
                    </ProFormCheckbox>
                </div>
            </LoginFormPage>
        </div>
    );
};

export default Login;
export default () => {
    return (
        <ProConfigProvider dark>
            <Page />
        </ProConfigProvider>
    );
};

 zy-asrs-flow/src/pages/User/Login/index0.jsx

New file
@@ -0,0 +1,359 @@
import { Footer } from '@/components';
import { login } from '@/services/ant-design-pro/api';
import { getFakeCaptcha } from '@/services/ant-design-pro/login';
import {
    LockOutlined,
    MobileOutlined,
    UserOutlined,
} from '@ant-design/icons';
import {
    LoginForm,
    ProFormCaptcha,
    ProFormCheckbox,
    ProFormText,
} from '@ant-design/pro-components';
import { FormattedMessage, history, SelectLang, useIntl, useModel, Helmet } from '@umijs/max';
import { Alert, message, Tabs } from 'antd';
import React, { useState } from 'react';
import { flushSync } from 'react-dom';
import { createStyles } from 'antd-style';
import { request } from '@umijs/max';
import { setToken } from '@/utils/token-util'
import { PROJECT_NAME } from '@/config/setting'

const useStyles = createStyles(({ token }) => {
    return {
        action: {
            marginLeft: '8px',
            color: 'rgba(0, 0, 0, 0.2)',
            fontSize: '24px',
            verticalAlign: 'middle',
            cursor: 'pointer',
            transition: 'color 0.3s',
            '&:hover': {
                color: token.colorPrimaryActive,
            },
        },
        lang: {
            width: 42,
            height: 42,
            lineHeight: '42px',
            position: 'fixed',
            right: 16,
            borderRadius: token.borderRadius,
            ':hover': {
                backgroundColor: token.colorBgTextHover,
            },
        },
        container: {
            display: 'flex',
            flexDirection: 'column',
            height: '100vh',
            overflow: 'auto',
            backgroundImage:
                "url('https://mdn.alipayobjects.com/yuyan_qk0oxh/afts/img/V-_oS6r-i7wAAAAAAAAAAAAAFl94AQBr')",
            backgroundSize: '100% 100%',
        },
    };
});

const Lang = () => {
    const { styles } = useStyles();

    return (
        <div className={styles.lang} data-lang>
            {SelectLang && <SelectLang />}
        </div>
    );
};

const LoginMessage = ({ content }) => {
    return (
        <Alert
            style={{
                marginBottom: 24,
            }}
            message={content}
            type="error"
            showIcon
        />
    );
};

const Login = () => {
    const [userLoginState, setUserLoginState] = useState({});
    const [type, setType] = useState('account');
    const { initialState, setInitialState } = useModel('@@initialState');
    const { styles } = useStyles();
    const intl = useIntl();

    console.log(initialState.memo);

    const fetchUserInfo = async () => {
        const userInfo = await initialState?.fetchUserInfo?.();
        if (userInfo) {
            flushSync(() => {
                setInitialState((s) => ({
                    ...s,
                    currentUser: userInfo,
                }));
            });
        }
    };

    const handleSubmit = async (values) => {
        try {
            const r = await request('/api/login', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                data: values
            })

            if (r.code === 200) {
                message.success(intl.formatMessage({
                    id: 'pages.login.success',
                    defaultMessage: '登录成功！',
                }));
                setToken(r.data.accessToken, values.autoLogin);
                await fetchUserInfo();
                const urlParams = new URL(window.location.href).searchParams;
                history.push(urlParams.get('redirect') || '/');
                return;
            }
            setUserLoginState({
                status: r.code,
                type: type,
            })

            // 登录
            // const msg = await login({ ...values, type });
            // if (msg.status === 'ok') {
            //   const defaultLoginSuccessMessage = intl.formatMessage({
            //     id: 'pages.login.success',
            //     defaultMessage: '登录成功！',
            //   });
            //   message.success(defaultLoginSuccessMessage);
            //   await fetchUserInfo();
            //   const urlParams = new URL(window.location.href).searchParams;
            //   history.push(urlParams.get('redirect') || '/');
            //   return;
            // }
            // // 如果失败去设置用户错误信息
            // setUserLoginState(msg);
        } catch (error) {
            console.log(error);
            message.error(intl.formatMessage({
                id: 'pages.login.failure',
                defaultMessage: '登录失败，请重试！',
            }));
        }
    };
    const { status, type: loginType } = userLoginState;
    return (
        <div className={styles.container}>
            <Helmet>
                <title>
                    {intl.formatMessage({
                        id: 'menu.login',
                        defaultMessage: '登录页',
                    })}
                    - {PROJECT_NAME}
                </title>
            </Helmet>
            <Lang />
            <div style={{ flex: '1', padding: '32px 0', }} >
                <LoginForm
                    contentStyle={{
                        minWidth: 280,
                        maxWidth: '75vw',
                    }}
                    logo={<img alt="logo" src="/logo.svg" />}
                    title="Ant Design"
                    subTitle={intl.formatMessage({ id: 'pages.layouts.userLayout.title' })}
                    initialValues={{
                        autoLogin: true,
                    }}
                    onFinish={async (values) => {
                        await handleSubmit(values);
                    }}
                >
                    <Tabs
                        activeKey={type}
                        onChange={setType}
                        centered
                        items={[
                            {
                                key: 'account',
                                label: intl.formatMessage({
                                    id: 'pages.login.accountLogin.tab',
                                    defaultMessage: '账户密码登录',
                                }),
                            },
                            {
                                key: 'mobile',
                                label: intl.formatMessage({
                                    id: 'pages.login.phoneLogin.tab',
                                    defaultMessage: '手机号登录',
                                }),
                            },
                        ]}
                    />

                    {status !== 200 && loginType === 'account' && (
                        <LoginMessage
                            content={intl.formatMessage({
                                id: 'pages.login.accountLogin.errorMessage',
                                defaultMessage: '账户或密码错误',
                            })}
                        />
                    )}
                    {type === 'account' && (
                        <>
                            <ProFormText
                                name="username"
                                fieldProps={{
                                    size: 'large',
                                    prefix: <UserOutlined />,
                                }}
                                placeholder={intl.formatMessage({
                                    id: 'pages.login.username.placeholder',
                                    defaultMessage: '用户名:',
                                })}
                                rules={[
                                    {
                                        required: true,
                                        message: (
                                            <FormattedMessage
                                                id="pages.login.username.required"
                                                defaultMessage="请输入用户名!"
                                            />
                                        ),
                                    },
                                ]}
                            />
                            <ProFormText.Password
                                name="password"
                                fieldProps={{
                                    size: 'large',
                                    prefix: <LockOutlined />,
                                }}
                                placeholder={intl.formatMessage({
                                    id: 'pages.login.password.placeholder',
                                    defaultMessage: '密码:',
                                })}
                                rules={[
                                    {
                                        required: true,
                                        message: (
                                            <FormattedMessage
                                                id="pages.login.password.required"
                                                defaultMessage="请输入密码！"
                                            />
                                        ),
                                    },
                                ]}
                            />
                        </>
                    )}

                    {status !== 200 && loginType === 'mobile' && <LoginMessage content="验证码错误" />}
                    {type === 'mobile' && (
                        <>
                            <ProFormText
                                fieldProps={{
                                    size: 'large',
                                    prefix: <MobileOutlined />,
                                }}
                                name="mobile"
                                placeholder={intl.formatMessage({
                                    id: 'pages.login.phoneNumber.placeholder',
                                    defaultMessage: '手机号',
                                })}
                                rules={[
                                    {
                                        required: true,
                                        message: (
                                            <FormattedMessage
                                                id="pages.login.phoneNumber.required"
                                                defaultMessage="请输入手机号！"
                                            />
                                        ),
                                    },
                                    {
                                        pattern: /^1\d{10}$/,
                                        message: (
                                            <FormattedMessage
                                                id="pages.login.phoneNumber.invalid"
                                                defaultMessage="手机号格式错误！"
                                            />
                                        ),
                                    },
                                ]}
                            />
                            <ProFormCaptcha
                                fieldProps={{
                                    size: 'large',
                                    prefix: <LockOutlined />,
                                }}
                                captchaProps={{
                                    size: 'large',
                                }}
                                placeholder={intl.formatMessage({
                                    id: 'pages.login.captcha.placeholder',
                                    defaultMessage: '请输入验证码',
                                })}
                                captchaTextRender={(timing, count) => {
                                    if (timing) {
                                        return `${count} ${intl.formatMessage({
                                            id: 'pages.getCaptchaSecondText',
                                            defaultMessage: '获取验证码',
                                        })}`;
                                    }
                                    return intl.formatMessage({
                                        id: 'pages.login.phoneLogin.getVerificationCode',
                                        defaultMessage: '获取验证码',
                                    });
                                }}
                                name="captcha"
                                rules={[
                                    {
                                        required: true,
                                        message: (
                                            <FormattedMessage
                                                id="pages.login.captcha.required"
                                                defaultMessage="请输入验证码！"
                                            />
                                        ),
                                    },
                                ]}
                                onGetCaptcha={async (phone) => {
                                    const result = await getFakeCaptcha({
                                        phone,
                                    });
                                    if (!result) {
                                        return;
                                    }
                                    message.success('获取验证码成功！验证码为：1234');
                                }}
                            />
                        </>
                    )}
                    <div
                        style={{
                            marginBottom: 24,
                        }}
                    >
                        <ProFormCheckbox noStyle name="autoLogin">
                            <FormattedMessage id="pages.login.rememberMe" defaultMessage="自动登录" />
                        </ProFormCheckbox>
                    </div>
                </LoginForm>
            </div>
            <Footer />
        </div>
    );
};

export default Login;

 zy-asrs-flow/src/pages/User/Login/index1.jsx

File was deleted

 zy-asrs-flow/src/pages/User/Login/index2.jsx

File was deleted

			@@ -22,7 +22,7 @@
			{
			name: 'login',
			path: '/user/login',
			component: './User/Login/index2',
			component: './User/Login/index',
			},
			],
			},

			@@ -1,71 +1,24 @@
			import { Footer } from '@/components';
			import { login } from '@/services/ant-design-pro/api';
			import { getFakeCaptcha } from '@/services/ant-design-pro/login';
			import {
			LockOutlined,
			MobileOutlined,
			UserOutlined,
			} from '@ant-design/icons';
			import {
			LoginForm,
			LoginFormPage,
			ProConfigProvider,
			ProFormCaptcha,
			ProFormCheckbox,
			ProFormText,
			} from '@ant-design/pro-components';
			import { Button, Divider, Alert, Tabs, message, theme } from 'antd';
			import { useState } from 'react';
			import { FormattedMessage, history, SelectLang, useIntl, useModel, Helmet } from '@umijs/max';
			import { Alert, message, Tabs } from 'antd';
			import React, { useState } from 'react';
			import { flushSync } from 'react-dom';
			import { createStyles } from 'antd-style';
			import { request } from '@umijs/max';
			import { setToken } from '@/utils/token-util'
			import { PROJECT_NAME } from '@/config/setting'

			const useStyles = createStyles(({ token }) => {
			return {
			action: {
			marginLeft: '8px',
			color: 'rgba(0, 0, 0, 0.2)',
			fontSize: '24px',
			verticalAlign: 'middle',
			cursor: 'pointer',
			transition: 'color 0.3s',
			'&:hover': {
			color: token.colorPrimaryActive,
			},
			},
			lang: {
			width: 42,
			height: 42,
			lineHeight: '42px',
			position: 'fixed',
			right: 16,
			borderRadius: token.borderRadius,
			':hover': {
			backgroundColor: token.colorBgTextHover,
			},
			},
			container: {
			display: 'flex',
			flexDirection: 'column',
			height: '100vh',
			overflow: 'auto',
			backgroundImage:
			"url('https://mdn.alipayobjects.com/yuyan_qk0oxh/afts/img/V-_oS6r-i7wAAAAAAAAAAAAAFl94AQBr')",
			backgroundSize: '100% 100%',
			},
			};
			});

			const Lang = () => {
			const { styles } = useStyles();

			return (
			<div className={styles.lang} data-lang>
			{SelectLang && <SelectLang />}
			</div>
			);
			};
			import logo from './logo.png'

			const LoginMessage = ({ content }) => {
			return (
			@@ -80,12 +33,14 @@
			);
			};

			const Login = () => {
			const [userLoginState, setUserLoginState] = useState({});
			const [type, setType] = useState('account');
			const { initialState, setInitialState } = useModel('@@initialState');
			const { styles } = useStyles();
			const Page = () => {
			const intl = useIntl();
			const { initialState, setInitialState } = useModel('@@initialState');
			const { token } = theme.useToken();

			const [loginType, setLoginType] = useState('account');
			const [userLoginState, setUserLoginState] = useState({});
			const [status, setStatus] = useState(200);

			console.log(initialState.memo);

			@@ -126,22 +81,6 @@
			status: r.code,
			type: type,
			})

			// 登录
			// const msg = await login({ ...values, type });
			// if (msg.status === 'ok') {
			// const defaultLoginSuccessMessage = intl.formatMessage({
			// id: 'pages.login.success',
			// defaultMessage: '登录成功！',
			// });
			// message.success(defaultLoginSuccessMessage);
			// await fetchUserInfo();
			// const urlParams = new URL(window.location.href).searchParams;
			// history.push(urlParams.get('redirect') \|\| '/');
			// return;
			// }
			// // 如果失败去设置用户错误信息
			// setUserLoginState(msg);
			} catch (error) {
			console.log(error);
			message.error(intl.formatMessage({
			@@ -149,211 +88,174 @@
			defaultMessage: '登录失败，请重试！',
			}));
			}
			};
			const { status, type: loginType } = userLoginState;
			}

			return (
			<div className={styles.container}>
			<Helmet>
			<title>
			{intl.formatMessage({
			id: 'menu.login',
			defaultMessage: '登录页',
			})}
			- {PROJECT_NAME}
			</title>
			</Helmet>
			<Lang />
			<div style={{ flex: '1', padding: '32px 0', }} >
			<LoginForm
			contentStyle={{
			minWidth: 280,
			maxWidth: '75vw',
			}}
			logo={<img alt="logo" src="/logo.svg" />}
			title="Ant Design"
			subTitle={intl.formatMessage({ id: 'pages.layouts.userLayout.title' })}
			initialValues={{
			autoLogin: true,
			}}
			onFinish={async (values) => {
			await handleSubmit(values);
			<div
			style={{
			backgroundColor: 'white',
			height: '100vh',
			}}
			>
			<LoginFormPage
			backgroundImageUrl="https://mdn.alipayobjects.com/huamei_gcee1x/afts/img/A*y0ZTS6WLwvgAAAAAAAAAAAAADml6AQ/fmt.webp"
			logo={logo}
			backgroundVideoUrl="https://gw.alipayobjects.com/v/huamei_gcee1x/afts/video/jXRBRK_VAwoAAAAAAAAAAAAAK4eUAQBr"
			// title="陆晓涛"
			// subTitle="陆晓涛..."
			containerStyle={{
			backgroundColor: 'rgba(0, 0, 0,0.65)',
			backdropFilter: 'blur(4px)',
			}}
			initialValues={{
			username: 'root',
			password: '123456',
			autoLogin: true,
			}}
			onFinish={async (values) => {
			await handleSubmit(values);
			}}
			>
			<Tabs
			centered
			activeKey={loginType}
			onChange={(activeKey) => setLoginType(activeKey)}
			>
			<Tabs.TabPane key={'account'} tab={'账号密码登录'} />
			<Tabs.TabPane key={'phone'} tab={'手机号登录'} />
			</Tabs>
			{loginType === 'account' && (
			<>
			<ProFormText
			name="username"
			fieldProps={{
			size: 'large',
			prefix: (
			<UserOutlined
			style={{
			color: token.colorText,
			}}
			className={'prefixIcon'}
			/>
			),
			}}
			placeholder={'用户名: root'}
			rules={[
			{
			required: true,
			message: '请输入用户名!',
			},
			]}
			/>
			<ProFormText.Password
			name="password"
			fieldProps={{
			size: 'large',
			prefix: (
			<LockOutlined
			style={{
			color: token.colorText,
			}}
			className={'prefixIcon'}
			/>
			),
			}}
			placeholder={'密码: 123456'}
			rules={[
			{
			required: true,
			message: '请输入密码！',
			},
			]}
			/>
			</>
			)}
			{status !== 200 && loginType === 'account' && (
			<LoginMessage
			content={'账户或密码错误'}
			/>
			)}
			{loginType === 'phone' && (
			<>
			<ProFormText
			fieldProps={{
			size: 'large',
			prefix: (
			<MobileOutlined
			style={{
			color: token.colorText,
			}}
			className={'prefixIcon'}
			/>
			),
			}}
			name="mobile"
			placeholder={'手机号'}
			rules={[
			{
			required: true,
			message: '请输入手机号！',
			},
			{
			pattern: /^1\d{10}$/,
			message: '手机号格式错误！',
			},
			]}
			/>
			<ProFormCaptcha
			fieldProps={{
			size: 'large',
			prefix: (
			<LockOutlined
			style={{
			color: token.colorText,
			}}
			className={'prefixIcon'}
			/>
			),
			}}
			captchaProps={{
			size: 'large',
			}}
			placeholder={'请输入验证码'}
			captchaTextRender={(timing, count) => {
			if (timing) {
			return `${count} ${'获取验证码'}`;
			}
			return '获取验证码';
			}}
			name="captcha"
			rules={[
			{
			required: true,
			message: '请输入验证码！',
			},
			]}
			onGetCaptcha={async () => {
			// message.success('获取验证码成功！验证码为：1234');
			message.warning('未开启手机号登录! ');
			}}
			/>
			</>
			)}
			<div
			style={{
			marginBlockEnd: 24,
			}}
			>
			<Tabs
			activeKey={type}
			onChange={setType}
			centered
			items={[
			{
			key: 'account',
			label: intl.formatMessage({
			id: 'pages.login.accountLogin.tab',
			defaultMessage: '账户密码登录',
			}),
			},
			{
			key: 'mobile',
			label: intl.formatMessage({
			id: 'pages.login.phoneLogin.tab',
			defaultMessage: '手机号登录',
			}),
			},
			]}
			/>

			{status !== 200 && loginType === 'account' && (
			<LoginMessage
			content={intl.formatMessage({
			id: 'pages.login.accountLogin.errorMessage',
			defaultMessage: '账户或密码错误',
			})}
			/>
			)}
			{type === 'account' && (
			<>
			<ProFormText
			name="username"
			fieldProps={{
			size: 'large',
			prefix: <UserOutlined />,
			}}
			placeholder={intl.formatMessage({
			id: 'pages.login.username.placeholder',
			defaultMessage: '用户名:',
			})}
			rules={[
			{
			required: true,
			message: (
			<FormattedMessage
			id="pages.login.username.required"
			defaultMessage="请输入用户名!"
			/>
			),
			},
			]}
			/>
			<ProFormText.Password
			name="password"
			fieldProps={{
			size: 'large',
			prefix: <LockOutlined />,
			}}
			placeholder={intl.formatMessage({
			id: 'pages.login.password.placeholder',
			defaultMessage: '密码:',
			})}
			rules={[
			{
			required: true,
			message: (
			<FormattedMessage
			id="pages.login.password.required"
			defaultMessage="请输入密码！"
			/>
			),
			},
			]}
			/>
			</>
			)}

			{status !== 200 && loginType === 'mobile' && <LoginMessage content="验证码错误" />}
			{type === 'mobile' && (
			<>
			<ProFormText
			fieldProps={{
			size: 'large',
			prefix: <MobileOutlined />,
			}}
			name="mobile"
			placeholder={intl.formatMessage({
			id: 'pages.login.phoneNumber.placeholder',
			defaultMessage: '手机号',
			})}
			rules={[
			{
			required: true,
			message: (
			<FormattedMessage
			id="pages.login.phoneNumber.required"
			defaultMessage="请输入手机号！"
			/>
			),
			},
			{
			pattern: /^1\d{10}$/,
			message: (
			<FormattedMessage
			id="pages.login.phoneNumber.invalid"
			defaultMessage="手机号格式错误！"
			/>
			),
			},
			]}
			/>
			<ProFormCaptcha
			fieldProps={{
			size: 'large',
			prefix: <LockOutlined />,
			}}
			captchaProps={{
			size: 'large',
			}}
			placeholder={intl.formatMessage({
			id: 'pages.login.captcha.placeholder',
			defaultMessage: '请输入验证码',
			})}
			captchaTextRender={(timing, count) => {
			if (timing) {
			return `${count} ${intl.formatMessage({
			id: 'pages.getCaptchaSecondText',
			defaultMessage: '获取验证码',
			})}`;
			}
			return intl.formatMessage({
			id: 'pages.login.phoneLogin.getVerificationCode',
			defaultMessage: '获取验证码',
			});
			}}
			name="captcha"
			rules={[
			{
			required: true,
			message: (
			<FormattedMessage
			id="pages.login.captcha.required"
			defaultMessage="请输入验证码！"
			/>
			),
			},
			]}
			onGetCaptcha={async (phone) => {
			const result = await getFakeCaptcha({
			phone,
			});
			if (!result) {
			return;
			}
			message.success('获取验证码成功！验证码为：1234');
			}}
			/>
			</>
			)}
			<div
			style={{
			marginBottom: 24,
			}}
			>
			<ProFormCheckbox noStyle name="autoLogin">
			<FormattedMessage id="pages.login.rememberMe" defaultMessage="自动登录" />
			</ProFormCheckbox>
			</div>
			</LoginForm>
			</div>
			<Footer />
			<ProFormCheckbox noStyle name="autoLogin">
			自动登录
			</ProFormCheckbox>
			</div>
			</LoginFormPage>
			</div>
			);
			};

			export default Login;
			export default () => {
			return (
			<ProConfigProvider dark>
			<Page />
			</ProConfigProvider>
			);
			};

New file
			@@ -0,0 +1,359 @@
			import { Footer } from '@/components';
			import { login } from '@/services/ant-design-pro/api';
			import { getFakeCaptcha } from '@/services/ant-design-pro/login';
			import {
			LockOutlined,
			MobileOutlined,
			UserOutlined,
			} from '@ant-design/icons';
			import {
			LoginForm,
			ProFormCaptcha,
			ProFormCheckbox,
			ProFormText,
			} from '@ant-design/pro-components';
			import { FormattedMessage, history, SelectLang, useIntl, useModel, Helmet } from '@umijs/max';
			import { Alert, message, Tabs } from 'antd';
			import React, { useState } from 'react';
			import { flushSync } from 'react-dom';
			import { createStyles } from 'antd-style';
			import { request } from '@umijs/max';
			import { setToken } from '@/utils/token-util'
			import { PROJECT_NAME } from '@/config/setting'

			const useStyles = createStyles(({ token }) => {
			return {
			action: {
			marginLeft: '8px',
			color: 'rgba(0, 0, 0, 0.2)',
			fontSize: '24px',
			verticalAlign: 'middle',
			cursor: 'pointer',
			transition: 'color 0.3s',
			'&:hover': {
			color: token.colorPrimaryActive,
			},
			},
			lang: {
			width: 42,
			height: 42,
			lineHeight: '42px',
			position: 'fixed',
			right: 16,
			borderRadius: token.borderRadius,
			':hover': {
			backgroundColor: token.colorBgTextHover,
			},
			},
			container: {
			display: 'flex',
			flexDirection: 'column',
			height: '100vh',
			overflow: 'auto',
			backgroundImage:
			"url('https://mdn.alipayobjects.com/yuyan_qk0oxh/afts/img/V-_oS6r-i7wAAAAAAAAAAAAAFl94AQBr')",
			backgroundSize: '100% 100%',
			},
			};
			});

			const Lang = () => {
			const { styles } = useStyles();

			return (
			<div className={styles.lang} data-lang>
			{SelectLang && <SelectLang />}
			</div>
			);
			};

			const LoginMessage = ({ content }) => {
			return (
			<Alert
			style={{
			marginBottom: 24,
			}}
			message={content}
			type="error"
			showIcon
			/>
			);
			};

			const Login = () => {
			const [userLoginState, setUserLoginState] = useState({});
			const [type, setType] = useState('account');
			const { initialState, setInitialState } = useModel('@@initialState');
			const { styles } = useStyles();
			const intl = useIntl();

			console.log(initialState.memo);

			const fetchUserInfo = async () => {
			const userInfo = await initialState?.fetchUserInfo?.();
			if (userInfo) {
			flushSync(() => {
			setInitialState((s) => ({
			...s,
			currentUser: userInfo,
			}));
			});
			}
			};

			const handleSubmit = async (values) => {
			try {
			const r = await request('/api/login', {
			method: 'POST',
			headers: {
			'Content-Type': 'application/json'
			},
			data: values
			})

			if (r.code === 200) {
			message.success(intl.formatMessage({
			id: 'pages.login.success',
			defaultMessage: '登录成功！',
			}));
			setToken(r.data.accessToken, values.autoLogin);
			await fetchUserInfo();
			const urlParams = new URL(window.location.href).searchParams;
			history.push(urlParams.get('redirect') \|\| '/');
			return;
			}
			setUserLoginState({
			status: r.code,
			type: type,
			})

			// 登录
			// const msg = await login({ ...values, type });
			// if (msg.status === 'ok') {
			// const defaultLoginSuccessMessage = intl.formatMessage({
			// id: 'pages.login.success',
			// defaultMessage: '登录成功！',
			// });
			// message.success(defaultLoginSuccessMessage);
			// await fetchUserInfo();
			// const urlParams = new URL(window.location.href).searchParams;
			// history.push(urlParams.get('redirect') \|\| '/');
			// return;
			// }
			// // 如果失败去设置用户错误信息
			// setUserLoginState(msg);
			} catch (error) {
			console.log(error);
			message.error(intl.formatMessage({
			id: 'pages.login.failure',
			defaultMessage: '登录失败，请重试！',
			}));
			}
			};
			const { status, type: loginType } = userLoginState;
			return (
			<div className={styles.container}>
			<Helmet>
			<title>
			{intl.formatMessage({
			id: 'menu.login',
			defaultMessage: '登录页',
			})}
			- {PROJECT_NAME}
			</title>
			</Helmet>
			<Lang />
			<div style={{ flex: '1', padding: '32px 0', }} >
			<LoginForm
			contentStyle={{
			minWidth: 280,
			maxWidth: '75vw',
			}}
			logo={<img alt="logo" src="/logo.svg" />}
			title="Ant Design"
			subTitle={intl.formatMessage({ id: 'pages.layouts.userLayout.title' })}
			initialValues={{
			autoLogin: true,
			}}
			onFinish={async (values) => {
			await handleSubmit(values);
			}}
			>
			<Tabs
			activeKey={type}
			onChange={setType}
			centered
			items={[
			{
			key: 'account',
			label: intl.formatMessage({
			id: 'pages.login.accountLogin.tab',
			defaultMessage: '账户密码登录',
			}),
			},
			{
			key: 'mobile',
			label: intl.formatMessage({
			id: 'pages.login.phoneLogin.tab',
			defaultMessage: '手机号登录',
			}),
			},
			]}
			/>

			{status !== 200 && loginType === 'account' && (
			<LoginMessage
			content={intl.formatMessage({
			id: 'pages.login.accountLogin.errorMessage',
			defaultMessage: '账户或密码错误',
			})}
			/>
			)}
			{type === 'account' && (
			<>
			<ProFormText
			name="username"
			fieldProps={{
			size: 'large',
			prefix: <UserOutlined />,
			}}
			placeholder={intl.formatMessage({
			id: 'pages.login.username.placeholder',
			defaultMessage: '用户名:',
			})}
			rules={[
			{
			required: true,
			message: (
			<FormattedMessage
			id="pages.login.username.required"
			defaultMessage="请输入用户名!"
			/>
			),
			},
			]}
			/>
			<ProFormText.Password
			name="password"
			fieldProps={{
			size: 'large',
			prefix: <LockOutlined />,
			}}
			placeholder={intl.formatMessage({
			id: 'pages.login.password.placeholder',
			defaultMessage: '密码:',
			})}
			rules={[
			{
			required: true,
			message: (
			<FormattedMessage
			id="pages.login.password.required"
			defaultMessage="请输入密码！"
			/>
			),
			},
			]}
			/>
			</>
			)}

			{status !== 200 && loginType === 'mobile' && <LoginMessage content="验证码错误" />}
			{type === 'mobile' && (
			<>
			<ProFormText
			fieldProps={{
			size: 'large',
			prefix: <MobileOutlined />,
			}}
			name="mobile"
			placeholder={intl.formatMessage({
			id: 'pages.login.phoneNumber.placeholder',
			defaultMessage: '手机号',
			})}
			rules={[
			{
			required: true,
			message: (
			<FormattedMessage
			id="pages.login.phoneNumber.required"
			defaultMessage="请输入手机号！"
			/>
			),
			},
			{
			pattern: /^1\d{10}$/,
			message: (
			<FormattedMessage
			id="pages.login.phoneNumber.invalid"
			defaultMessage="手机号格式错误！"
			/>
			),
			},
			]}
			/>
			<ProFormCaptcha
			fieldProps={{
			size: 'large',
			prefix: <LockOutlined />,
			}}
			captchaProps={{
			size: 'large',
			}}
			placeholder={intl.formatMessage({
			id: 'pages.login.captcha.placeholder',
			defaultMessage: '请输入验证码',
			})}
			captchaTextRender={(timing, count) => {
			if (timing) {
			return `${count} ${intl.formatMessage({
			id: 'pages.getCaptchaSecondText',
			defaultMessage: '获取验证码',
			})}`;
			}
			return intl.formatMessage({
			id: 'pages.login.phoneLogin.getVerificationCode',
			defaultMessage: '获取验证码',
			});
			}}
			name="captcha"
			rules={[
			{
			required: true,
			message: (
			<FormattedMessage
			id="pages.login.captcha.required"
			defaultMessage="请输入验证码！"
			/>
			),
			},
			]}
			onGetCaptcha={async (phone) => {
			const result = await getFakeCaptcha({
			phone,
			});
			if (!result) {
			return;
			}
			message.success('获取验证码成功！验证码为：1234');
			}}
			/>
			</>
			)}
			<div
			style={{
			marginBottom: 24,
			}}
			>
			<ProFormCheckbox noStyle name="autoLogin">
			<FormattedMessage id="pages.login.rememberMe" defaultMessage="自动登录" />
			</ProFormCheckbox>
			</div>
			</LoginForm>
			</div>
			<Footer />
			</div>
			);
			};

			export default Login;