⚡ 优化门户端登录样式

eiam-portal/src/main/portal-fe/src/components/Footer/index.tsx

@@ -24,7 +24,7 @@ const currentYear = new Date().getFullYear();
 export default (props: FooterProps) => (
   <DefaultFooter
     style={{ backgroundColor: 'transparent' }}
-    copyright={`2020-${currentYear} TopIAM 版权所有`}
+    copyright={`2022-${currentYear} TOPIAM 版权所有`}
     links={[
       {
         key: 'website',

eiam-portal/src/main/portal-fe/src/pages/Login/Login.tsx

@@ -20,9 +20,9 @@ import { ICON_LIST } from '@/components/IconFont/constant';
 import { IDP_TYPE, RESULT_STATE, SESSION_STATUS } from '@/constants';
 import { getCurrentStatus, getLoginEncryptSecret } from '@/services';
 import { aesEcbEncrypt } from '@/utils/aes';
-import { ProCard, ProForm, ProFormCheckbox, ProFormInstance } from '@ant-design/pro-components';
+import { ProForm, ProFormCheckbox, ProFormInstance } from '@ant-design/pro-components';
 import { useAsyncEffect, useRequest, useSafeState } from 'ahooks';
-import { Alert, App, Avatar, Skeleton, Space, Spin, Tabs, Tooltip } from 'antd';
+import { Alert, App, Avatar, Space, Spin, Tabs, Tooltip } from 'antd';
 import { nanoid } from 'nanoid';
 import { useRef, useState } from 'react';
 import { FormattedMessage, Helmet, history, useIntl } from '@umijs/max';
@@ -36,12 +36,11 @@ import { accountLogin, getLoginConfig, otpLogin } from './service';
 import useStyle from './style';
 import { goto } from './utils';
 import queryString from 'query-string';
-import Banner from '@/components/Banner';
 import { omit } from 'lodash';
 import { emailValidator } from '@/utils/utils';
+import PageLoading from '@/components/PageLoading';
 
 const prefixCls = 'topiam-login';
-const showBanner = process.env.PREVIEW_ENV || process.env.NODE_ENV === 'development';
 
 /**
  * 错误消息
@@ -313,20 +312,12 @@ const Login = () => {
       <Helmet>
         <link rel="icon" href={'/favicon.ico'} />
       </Helmet>
-      {showBanner && (
+      {statusLoading || loginConfigLoading ? (
-        <div className={`${prefixCls}-banner`}>
+        <PageLoading />
-          <Banner />
+      ) : (
-        </div>
-      )}
         <div className={`${prefixCls}-container`}>
           <div className={`${prefixCls}-content`}>
             <div className={`${prefixCls}-card`}>
-            {statusLoading ? (
-              <ProCard>
-                <Skeleton loading={statusLoading} paragraph={{ rows: 5 }}></Skeleton>
-              </ProCard>
-            ) : (
-              <>
               {/*登录*/}
               {!status && !forgetPassword && (
                 <>
@@ -340,9 +331,7 @@ const Login = () => {
                     {/*登录错误*/}
                     {userLoginState?.status !== RESULT_STATE.SUCCESS &&
                       currentProvider?.type === IDP_TYPE.ACCOUNT &&
-                        userLoginState?.message && (
+                      userLoginState?.message && <LoginMessage content={userLoginState?.message} />}
-                          <LoginMessage content={userLoginState?.message} />
-                        )}
                     {/*其他登录方式*/}
                     {loginConfig?.idps?.map((value) => {
                       if (
@@ -395,7 +384,7 @@ const Login = () => {
                             },
                           }}
                           onFinish={async (values) => {
-                              await run(values);
+                            run(values);
                             return data;
                           }}
                         >
@@ -584,13 +573,12 @@ const Login = () => {
                   }}
                 />
               )}
-              </>
-            )}
             </div>
           </div>
           {/**Footer*/}
           <Footer className={`${prefixCls}-footer`} />
         </div>
+      )}
     </div>
   );
 };

eiam-portal/src/main/portal-fe/src/pages/Login/components/ForgetPassword/style.ts

@@ -21,8 +21,7 @@ const useStyle = createStyles((_, props) => {
   const prefixCls = `${props}`;
   return {
     main: {
-      width: '320px',
+      width: '328px',
-      marginTop: '24px',
       [`.${prefixCls}`]: {
         ['&-success-box']: {
           padding: '40px',
@@ -51,7 +50,6 @@ const useStyle = createStyles((_, props) => {
         ['&-back']: {
           width: '100%',
           marginBottom: '24px',
-          marginTop: '24px',
         },
         ['&-back-time']: {
           display: 'flex',

eiam-portal/src/main/portal-fe/src/pages/Login/style.ts

@@ -38,12 +38,11 @@ const useStyle = createStyles(({ prefixCls, token }, props) => {
           display: 'flex',
           flex: 'none !important',
           flexDirection: 'column',
-          width: '430px',
+          padding: '32px',
           maxWidth: '100%',
-          minHeight: '475px',
           backgroundColor: '#fff',
           borderRadius: token.borderRadius,
-          boxShadow: '0 2px 10px 0 rgb(57 106 255 / 5%)',
+          boxShadow: '0px 0px 24px 0px rgba(0,0,0,0.1)',
           [`${antCls}-tabs-nav-list`]: {
             margin: 'auto',
             fontSize: '16px',
@@ -57,7 +56,6 @@ const useStyle = createStyles(({ prefixCls, token }, props) => {
         },
         ['&-top']: {
           textAlign: 'center',
-          padding: '39px 0 0',
         },
         ['&-logo']: {
           width: '200px',
@@ -68,7 +66,7 @@ const useStyle = createStyles(({ prefixCls, token }, props) => {
           verticalAlign: 'top',
         },
         ['&-desc']: {
-          marginTop: '12px',
+          marginTop: '25px',
           marginBottom: '15px',
           color: token.colorTextSecondary,
           fontSize: token.fontSize,