优化代码

pull/59/head
awenes 1 year ago
parent 834cc3cc26
commit 32d5c5f50a

@ -47,7 +47,7 @@
"@ant-design/charts": "^1.4.2", "@ant-design/charts": "^1.4.2",
"@ant-design/icons": "^5.2.6", "@ant-design/icons": "^5.2.6",
"@ant-design/maps": "^1.0.7", "@ant-design/maps": "^1.0.7",
"@ant-design/pro-components": "^2.6.25", "@ant-design/pro-components": "^2.6.27",
"ahooks": "^3.7.8", "ahooks": "^3.7.8",
"antd": "^5.9.3", "antd": "^5.9.3",
"antd-img-crop": "^4.13.0", "antd-img-crop": "^4.13.0",

@ -28,11 +28,9 @@ import queryString from 'query-string';
import { flushSync } from 'react-dom'; import { flushSync } from 'react-dom';
import classnames from 'classnames'; import classnames from 'classnames';
import useStyle from './style'; import useStyle from './style';
import Banner from '@/components/Banner';
import PageLoading from '@/components/PageLoading'; import PageLoading from '@/components/PageLoading';
const prefixCls = 'login'; const prefixCls = 'login';
const showBanner = process.env.PREVIEW_ENV || process.env.NODE_ENV === 'development';
/** /**
* *
@ -152,116 +150,107 @@ const Login: React.FC = () => {
<link rel="icon" href={'/favicon.ico'} /> <link rel="icon" href={'/favicon.ico'} />
</Helmet> </Helmet>
<div className={classnames(`${prefixCls}`)}> <div className={classnames(`${prefixCls}`)}>
{showBanner && <Banner />} <LoginFormPage
<div backgroundImageUrl={'/login-background.png'}
style={{ logo={'/full-logo.svg'}
backgroundColor: 'white', subTitle={intl.formatMessage({
height: 'calc(100vh - 48px)', id: 'pages.layout.title',
border: '1px solid rgb(240, 240, 240)', })}
initialValues={{
'remember-me': false,
}} }}
> form={form}
<LoginFormPage scrollToFirstError
backgroundImageUrl={'/login-background.png'} submitter={{
logo={'/full-logo.svg'} searchConfig: {
subTitle={intl.formatMessage({ submitText: intl.formatMessage({
id: 'pages.layout.title', id: 'pages.login.submit',
})} }),
initialValues={{ },
'remember-me': false, render: (_, dom) => dom.pop(),
}} submitButtonProps: {
form={form} loading,
scrollToFirstError size: 'large',
submitter={{ style: {
searchConfig: { width: '100%',
submitText: intl.formatMessage({
id: 'pages.login.submit',
}),
}, },
render: (_, dom) => dom.pop(), },
submitButtonProps: { }}
loading, onFinish={async (values) => {
run(values);
return data;
}}
>
{userLoginState?.status !== RESULT_STATE.SUCCESS && userLoginState?.message && (
<>
<LoginMessage content={userLoginState?.message} />
<br />
</>
)}
<>
<ProFormText
name="username"
fieldProps={{
size: 'large',
prefix: (
<UserOutlined className={classnames(`${prefixCls}-form-prefix-icon`)} />
),
autoComplete: 'off',
}}
placeholder={intl.formatMessage({
id: 'pages.login.username.placeholder',
})}
rules={[
{
required: true,
message: <FormattedMessage id="pages.login.username.required" />,
},
]}
/>
<ProFormText.Password
name="password"
fieldProps={{
size: 'large', size: 'large',
style: { autoComplete: 'new-password',
width: '100%', prefix: (
<LockOutlined className={classnames(`${prefixCls}-form-prefix-icon`)} />
),
}}
placeholder={intl.formatMessage({
id: 'pages.login.password.placeholder',
})}
rules={[
{
required: true,
message: <FormattedMessage id="pages.login.password.required" />,
}, },
}, ]}
}} />
onFinish={async (values) => { </>
run(values); <div
return data; style={{
marginBottom: 24,
}} }}
> >
{userLoginState?.status !== RESULT_STATE.SUCCESS && userLoginState?.message && ( <ProFormCheckbox noStyle name="remember-me">
<> <FormattedMessage id="pages.login.remember-me" />
<LoginMessage content={userLoginState?.message} /> </ProFormCheckbox>
<br /> <a
</>
)}
<>
<ProFormText
name="username"
fieldProps={{
size: 'large',
prefix: (
<UserOutlined className={classnames(`${prefixCls}-form-prefix-icon`)} />
),
autoComplete: 'off',
}}
placeholder={intl.formatMessage({
id: 'pages.login.username.placeholder',
})}
rules={[
{
required: true,
message: <FormattedMessage id="pages.login.username.required" />,
},
]}
/>
<ProFormText.Password
name="password"
fieldProps={{
size: 'large',
autoComplete: 'new-password',
prefix: (
<LockOutlined className={classnames(`${prefixCls}-form-prefix-icon`)} />
),
}}
placeholder={intl.formatMessage({
id: 'pages.login.password.placeholder',
})}
rules={[
{
required: true,
message: <FormattedMessage id="pages.login.password.required" />,
},
]}
/>
</>
<div
style={{ style={{
marginBottom: 24, float: 'right',
}}
onClick={async () => {
message.info(
intl.formatMessage({
id: 'app.not_yet_realized',
}),
);
}} }}
> >
<ProFormCheckbox noStyle name="remember-me"> <FormattedMessage id="pages.login.forgot-password" />
<FormattedMessage id="pages.login.remember-me" /> </a>
</ProFormCheckbox> </div>
<a </LoginFormPage>
style={{
float: 'right',
}}
onClick={async () => {
message.info(
intl.formatMessage({
id: 'app.not_yet_realized',
}),
);
}}
>
<FormattedMessage id="pages.login.forgot-password" />
</a>
</div>
</LoginFormPage>
</div>
</div> </div>
</> </>
) : ( ) : (

@ -23,6 +23,9 @@ const useStyle = createStyles(({ token, prefixCls }, prefix) => {
return { return {
main: { main: {
[`${prefixClassName}`]: { [`${prefixClassName}`]: {
backgroundColor: 'white',
height: '100vh',
border: '1px solid rgb(240, 240, 240)',
[`${prefixClassName}-form-prefix-icon`]: { [`${prefixClassName}-form-prefix-icon`]: {
color: token.colorPrimary, color: token.colorPrimary,
fontSize: token.fontSize, fontSize: token.fontSize,

@ -48,7 +48,7 @@
"@ant-design/charts": "^1.4.2", "@ant-design/charts": "^1.4.2",
"@ant-design/icons": "^5.2.6", "@ant-design/icons": "^5.2.6",
"@ant-design/maps": "^1.0.7", "@ant-design/maps": "^1.0.7",
"@ant-design/pro-components": "^2.6.25", "@ant-design/pro-components": "^2.6.27",
"ahooks": "^3.7.8", "ahooks": "^3.7.8",
"antd": "^5.9.3", "antd": "^5.9.3",
"antd-img-crop": "^4.13.0", "antd-img-crop": "^4.13.0",

Loading…
Cancel
Save