悠山
16bb5afaa7
All checks were successful
Auto Deploy / build-and-deploy (push) Successful in 34s
- 将"其他登录方式"修改为"其他登录方式1111"
355 lines
10 KiB
TypeScript
355 lines
10 KiB
TypeScript
import {
|
||
AlipayOutlined,
|
||
LockOutlined,
|
||
MobileOutlined,
|
||
TaobaoOutlined,
|
||
UserOutlined,
|
||
WeiboOutlined,
|
||
} from '@ant-design/icons';
|
||
import {
|
||
LoginFormPage,
|
||
ProConfigProvider,
|
||
ProFormCaptcha,
|
||
ProFormCheckbox,
|
||
ProFormText,
|
||
} from '@ant-design/pro-components';
|
||
import { history, useModel, useNavigate } from '@umijs/max';
|
||
import { Button, Divider, message, Space, Tabs, theme } from 'antd';
|
||
import type { CSSProperties } from 'react';
|
||
import { useState } from 'react';
|
||
import { flushSync } from 'react-dom';
|
||
import { getTenantIdByName, login } from '@/services/login';
|
||
import * as authUtil from '@/utils/auth';
|
||
|
||
type LoginType = 'phone' | 'account';
|
||
|
||
const iconStyles: CSSProperties = {
|
||
color: 'rgba(0, 0, 0, 0.2)',
|
||
fontSize: '18px',
|
||
verticalAlign: 'middle',
|
||
cursor: 'pointer',
|
||
};
|
||
|
||
const Page = () => {
|
||
const [loginType, setLoginType] = useState<LoginType>('account');
|
||
const { token } = theme.useToken();
|
||
const [messageApi, contextHolder] = message.useMessage();
|
||
const { initialState, setInitialState } = useModel('@@initialState');
|
||
const navigate = useNavigate();
|
||
// 获取租户 ID
|
||
const getTenantId = async (name: string) => {
|
||
const data = await getTenantIdByName({ name });
|
||
authUtil.setTenantId(data);
|
||
};
|
||
|
||
const fetchUserInfo = async () => {
|
||
const userInfo = await initialState?.fetchUserInfo?.();
|
||
if (userInfo) {
|
||
flushSync(() => {
|
||
setInitialState((s) => ({
|
||
...s,
|
||
currentUser: userInfo,
|
||
}));
|
||
});
|
||
}
|
||
};
|
||
// 添加登录处理函数
|
||
const handleSubmit = async (values: any) => {
|
||
try {
|
||
// 根据登录类型处理不同的参数
|
||
const params = {
|
||
tenantName: '芋道源码',
|
||
...values,
|
||
};
|
||
|
||
await getTenantId(params.tenantName);
|
||
if (params.rememberMe) {
|
||
authUtil.setLoginForm(params);
|
||
} else {
|
||
authUtil.removeLoginForm();
|
||
}
|
||
|
||
// 调用登录接口
|
||
const data = await login(params);
|
||
// 登录成功
|
||
messageApi.success('登录成功！');
|
||
// 跳转到首页
|
||
authUtil.setToken(data);
|
||
await fetchUserInfo();
|
||
const urlParams = new URL(window.location.href).searchParams;
|
||
// navigate(urlParams.get("redirect") || "/");
|
||
window.location.href = urlParams.get('redirect') || '/';
|
||
} catch (error) {
|
||
messageApi.error('登录失败，请检查网络或稍后重试！');
|
||
}
|
||
};
|
||
return (
|
||
<div
|
||
style={{
|
||
backgroundColor: 'white',
|
||
height: '100vh',
|
||
}}
|
||
>
|
||
{contextHolder}
|
||
<LoginFormPage
|
||
backgroundImageUrl="https://mdn.alipayobjects.com/huamei_gcee1x/afts/img/A*y0ZTS6WLwvgAAAAAAAAAAAAADml6AQ/fmt.webp"
|
||
logo="/logo.svg"
|
||
backgroundVideoUrl="https://gw.alipayobjects.com/v/huamei_gcee1x/afts/video/jXRBRK_VAwoAAAAAAAAAAAAAK4eUAQBr"
|
||
// title="BY"
|
||
containerStyle={{
|
||
backgroundColor: 'rgb(0 0 0 / 51%)',
|
||
backdropFilter: 'blur(4px)',
|
||
}}
|
||
onFinish={handleSubmit}
|
||
subTitle="百业到家云控台"
|
||
// activityConfig={{
|
||
// style: {
|
||
// boxShadow: "0px 0px 8px rgba(0, 0, 0, 0.2)",
|
||
// color: token.colorTextHeading,
|
||
// borderRadius: 8,
|
||
// backgroundColor: "rgba(255,255,255,0.25)",
|
||
// backdropFilter: "blur(4px)",
|
||
// },
|
||
// title: "活动标题，可配置图片",
|
||
// subTitle: "活动介绍说明文字",
|
||
// action: (
|
||
// <Button
|
||
// size="large"
|
||
// style={{
|
||
// borderRadius: 20,
|
||
// background: token.colorBgElevated,
|
||
// color: token.colorPrimary,
|
||
// width: 120,
|
||
// }}
|
||
// >
|
||
// 去看看
|
||
// </Button>
|
||
// ),
|
||
// }}
|
||
actions={
|
||
<div
|
||
style={{
|
||
display: 'flex',
|
||
justifyContent: 'center',
|
||
alignItems: 'center',
|
||
flexDirection: 'column',
|
||
}}
|
||
>
|
||
<Divider plain>
|
||
<span
|
||
style={{
|
||
color: token.colorTextPlaceholder,
|
||
fontWeight: 'normal',
|
||
fontSize: 14,
|
||
}}
|
||
>
|
||
其他登录方式
|
||
</span>
|
||
</Divider>
|
||
<Space align="center" size={24}>
|
||
<div
|
||
style={{
|
||
display: 'flex',
|
||
justifyContent: 'center',
|
||
alignItems: 'center',
|
||
flexDirection: 'column',
|
||
height: 40,
|
||
width: 40,
|
||
border: '1px solid ' + token.colorPrimaryBorder,
|
||
background: token.colorBgContainer,
|
||
borderRadius: '50%',
|
||
}}
|
||
>
|
||
<AlipayOutlined style={{ ...iconStyles, color: '#1677FF' }} />
|
||
</div>
|
||
<div
|
||
style={{
|
||
display: 'flex',
|
||
justifyContent: 'center',
|
||
alignItems: 'center',
|
||
flexDirection: 'column',
|
||
height: 40,
|
||
width: 40,
|
||
border: '1px solid ' + token.colorPrimaryBorder,
|
||
background: token.colorBgContainer,
|
||
borderRadius: '50%',
|
||
}}
|
||
>
|
||
<TaobaoOutlined style={{ ...iconStyles, color: '#FF6A10' }} />
|
||
</div>
|
||
<div
|
||
style={{
|
||
display: 'flex',
|
||
justifyContent: 'center',
|
||
alignItems: 'center',
|
||
flexDirection: 'column',
|
||
height: 40,
|
||
width: 40,
|
||
background: token.colorBgContainer,
|
||
border: '1px solid ' + token.colorPrimaryBorder,
|
||
borderRadius: '50%',
|
||
}}
|
||
>
|
||
<WeiboOutlined style={{ ...iconStyles, color: '#1890ff' }} />
|
||
</div>
|
||
</Space>
|
||
</div>
|
||
}
|
||
>
|
||
<Tabs
|
||
centered
|
||
activeKey={loginType}
|
||
onChange={(activeKey) => setLoginType(activeKey as LoginType)}
|
||
>
|
||
<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'}
|
||
/>
|
||
),
|
||
style: {
|
||
backgroundColor: 'rgb(0 0 0 / 77%)',
|
||
color: 'white',
|
||
},
|
||
}}
|
||
placeholder={'用户名: admin or user'}
|
||
rules={[
|
||
{
|
||
required: true,
|
||
message: '请输入用户名!',
|
||
},
|
||
]}
|
||
/>
|
||
<ProFormText.Password
|
||
name="password"
|
||
fieldProps={{
|
||
size: 'large',
|
||
prefix: (
|
||
<LockOutlined
|
||
style={{
|
||
color: token.colorText,
|
||
}}
|
||
className={'prefixIcon'}
|
||
/>
|
||
),
|
||
style: {
|
||
backgroundColor: 'rgb(0 0 0 / 77%)',
|
||
color: 'white',
|
||
},
|
||
}}
|
||
placeholder={'密码: ant.design'}
|
||
rules={[
|
||
{
|
||
required: true,
|
||
message: '请输入密码！',
|
||
},
|
||
]}
|
||
/>
|
||
</>
|
||
)}
|
||
{loginType === 'phone' && (
|
||
<>
|
||
<ProFormText
|
||
fieldProps={{
|
||
size: 'large',
|
||
prefix: (
|
||
<MobileOutlined
|
||
style={{
|
||
color: token.colorText,
|
||
}}
|
||
className={'prefixIcon'}
|
||
/>
|
||
),
|
||
style: {
|
||
backgroundColor: 'rgb(0 0 0 / 77%)',
|
||
color: 'white',
|
||
},
|
||
}}
|
||
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');
|
||
}}
|
||
/>
|
||
</>
|
||
)}
|
||
<div
|
||
style={{
|
||
marginBlockEnd: 24,
|
||
}}
|
||
>
|
||
<ProFormCheckbox noStyle name="rememberMe">
|
||
记住我
|
||
</ProFormCheckbox>
|
||
<a
|
||
style={{
|
||
float: 'right',
|
||
}}
|
||
>
|
||
忘记密码
|
||
</a>
|
||
</div>
|
||
</LoginFormPage>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default () => {
|
||
return (
|
||
<ProConfigProvider dark>
|
||
<Page />
|
||
</ProConfigProvider>
|
||
);
|
||
};
|