From b2620715a093e5074cc0e18c874b8f708cbc968c Mon Sep 17 00:00:00 2001
From: luxiaotao1123 <t1341870251@163.com>
Date: 星期一, 26 二月 2024 17:04:37 +0800
Subject: [PATCH] #
---
/dev/null | 261 --------------
zy-asrs-flow/config/routes.ts | 2
zy-asrs-flow/src/pages/User/Login/index.jsx | 450 +++++++++---------------
zy-asrs-flow/src/pages/User/Login/index0.jsx | 359 +++++++++++++++++++
4 files changed, 536 insertions(+), 536 deletions(-)
diff --git a/zy-asrs-flow/config/routes.ts b/zy-asrs-flow/config/routes.ts
index 3197a0d..914e4f3 100644
--- a/zy-asrs-flow/config/routes.ts
+++ b/zy-asrs-flow/config/routes.ts
@@ -22,7 +22,7 @@
{
name: 'login',
path: '/user/login',
- component: './User/Login/index2',
+ component: './User/Login/index',
},
],
},
diff --git a/zy-asrs-flow/src/pages/User/Login/index.jsx b/zy-asrs-flow/src/pages/User/Login/index.jsx
index 632355e..f9e5ff1 100644
--- a/zy-asrs-flow/src/pages/User/Login/index.jsx
+++ b/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>
+ );
+};
\ No newline at end of file
diff --git a/zy-asrs-flow/src/pages/User/Login/index0.jsx b/zy-asrs-flow/src/pages/User/Login/index0.jsx
new file mode 100644
index 0000000..632355e
--- /dev/null
+++ b/zy-asrs-flow/src/pages/User/Login/index0.jsx
@@ -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;
diff --git a/zy-asrs-flow/src/pages/User/Login/index1.jsx b/zy-asrs-flow/src/pages/User/Login/index1.jsx
deleted file mode 100644
index 608c085..0000000
--- a/zy-asrs-flow/src/pages/User/Login/index1.jsx
+++ /dev/null
@@ -1,362 +0,0 @@
-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,
- 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 Settings from '../../../../config/defaultSettings';
-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'
-
-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: '鐧诲綍椤�',
- })}
- - {Settings.title}
- </title>
- </Helmet>
- <Lang />
- <div style={{ flex: '1', padding: '32px 0', }} >
- <LoginFormPage
- // backgroundVideoUrl="https://gw.alipayobjects.com/v/huamei_gcee1x/afts/video/jXRBRK_VAwoAAAAAAAAAAAAAK4eUAQBr"
- 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>
- </LoginFormPage>
- </div>
- <Footer />
- </div>
- );
-};
-
-export default Login;
diff --git a/zy-asrs-flow/src/pages/User/Login/index2.jsx b/zy-asrs-flow/src/pages/User/Login/index2.jsx
deleted file mode 100644
index f9e5ff1..0000000
--- a/zy-asrs-flow/src/pages/User/Login/index2.jsx
+++ /dev/null
@@ -1,261 +0,0 @@
-import {
- LockOutlined,
- MobileOutlined,
- UserOutlined,
-} from '@ant-design/icons';
-import {
- 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 { flushSync } from 'react-dom';
-import { request } from '@umijs/max';
-import { setToken } from '@/utils/token-util'
-import { PROJECT_NAME } from '@/config/setting'
-
-import logo from './logo.png'
-
-const LoginMessage = ({ content }) => {
- return (
- <Alert
- style={{
- marginBottom: 24,
- }}
- message={content}
- type="error"
- showIcon
- />
- );
-};
-
-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);
-
- 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,
- })
- } catch (error) {
- console.log(error);
- message.error(intl.formatMessage({
- id: 'pages.login.failure',
- defaultMessage: '鐧诲綍澶辫触锛岃閲嶈瘯锛�',
- }));
- }
- }
-
- return (
- <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,
- }}
- >
- <ProFormCheckbox noStyle name="autoLogin">
- 鑷姩鐧诲綍
- </ProFormCheckbox>
- </div>
- </LoginFormPage>
- </div>
- );
-};
-
-export default () => {
- return (
- <ProConfigProvider dark>
- <Page />
- </ProConfigProvider>
- );
-};
\ No newline at end of file
--
Gitblit v1.9.1