门户定制案例-自定义登录页样式

运行效果

登录框居中显示（默认居右），账号密码登录的登录按钮，文字改为测试登录按钮

实现方法

定制企业门户应用，参考《门户定制》
在登录页 /entry/pcxapp/pcx/user/login.w 中，登录框渲染方法 loginRender 的 before 扩展点，修改 loginForm 组件的 submitter 属性设置“登录”按钮文字
重定义 login-form 样式，居中显示登录框
关于 loginForm 组件，参考：https://github.com/ant-design/pro-components/blob/master/packages/form/src/layouts/LoginForm/index.tsx

添加扩展点

桌面端门户的扩展点方法写在 /UI2/comp/portalConfig/components/portalConfig/portalConfig.config.pc.js 文件的 onConfigContextInit 方法中，如果没有 portalConfig.config.pc.js 文件，将 portalConfig.config.js 文件复制为 portalConfig.config.pc.js 文件

添加登录页 /entry/pcxapp/pcx/user/login.w 登录框渲染方法 loginRender 的 before 扩展点，代码如下

    async onConfigContextInit(configContextProcessor) {
        let _this = configContextProcessor.page;
        let portalConfig = {
            "config": {
                "/entry": {
                    "/pcxapp": {
                        "/pcx": {
                            "/user":{
                                "/login.w": {
                                    "loginRender":{
                                        "@before":()=>{
                                        }                              
                                    }
                                }
                            }                  
                        }
                    }
                }
            }
        };
        merge(_this.configContext, portalConfig);
        ConfigContextProcessor.enhancePageAdvice(_this);
    }

设置按钮文字

登录框中有多种登录类型：账号密码登录 account、手机验证码登录 phone、扫码登录 scanLogin、忘记密码 forgetPassword、用户注册 registerUser 。根据登录类型 loginType 设置对应的 submitter 按钮文字，示例代码如下

    if(_this.state.loginType=="account"){
        //修改组件 LoginForm 的 submitter 属性
        _this.state.submitter={searchConfig:{submitText:"测试登录按钮"}};
    }

设置样式

在 /UI2/comp/portalConfig/components/portalConfig 目录下，增加 login.css 文件，设置登录框居中显示，代码如下

.login-form{justify-content: center !important;}

在 /UI2/comp/portalConfig/components/portalConfig/portalConfig.config.pc.js 文件中引用，代码如下

import "./login.css";

完整代码

/UI2/comp/portalConfig/components/portalConfig/portalConfig.config.pc.js 文件的完整代码如下

import { merge } from "lodash";
import ConfigContextProcessor from 'core/framework/ConfigContextProcessor';
//登录页自定义样式
import "./login.css";

export default {

    processConfigContext(configContext) {
    },

    async onConfigContextInit(configContextProcessor) {
        //获取当前页面
        let _this = configContextProcessor.page;
        let portalConfig = {
            "config": {
                "/entry": {
                    "/pcxapp": {
                        "/pcx": {
                            "/user":{
                                "/login.w": {
                                    "loginRender":{
                                        "@before":()=>{
                                            //企业门户登录页操作动作有多种，例如账号密码、手机验证码、扫码、忘记密码、用户注册等动作，需要根据动作类型loginType字段进行判断
                                            if(_this.state.loginType=="account"){
                                                /**
                                                    * 修改组件 LoginForm 的 submitter 属性
                                                    * 详细参考:https://github.com/ant-design/pro-components/blob/master/packages/form/src/layouts/LoginForm/index.tsx
                                                    */
                                                _this.state.submitter={searchConfig:{submitText:"测试登录按钮"}};
                                            }
                                        }                              
                                    }
                                }
                            }                  
                        }
                    }
                }
            }
        };
        merge(_this.configContext, portalConfig);
        ConfigContextProcessor.enhancePageAdvice(_this);
    }
}

对应登录页样式 /UI2/comp/portalConfig/components/portalConfig/login.css 文件，代码如下：

.login-form{justify-content: center !important;}

案例-自定义登录页样式