门户V2定制-登陆页

场景描述

定制企业门户V2登录页样式及登录框按钮文字等

实现思路

1. 新增“ 门户自定义 ”组件
2. 使用“@before”在登录框渲染前修改相关属性

实现步骤

1. 使用租户管理员登录系统，在“应用/服务管理”企业门户V2，开启门户定制（详细操作步骤可参考 门户V2调试）

2. 进入云端开发后，打开市场组件“门户自定义”，并开启组件定制

3. 在“\UI2\comp\portalConfig\components\portalConfig”组件目录下，定制文件“portalConfig.config.js”（文件命名：组件名+“.config.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);
        }
    }
   

   对应登陆页样式login.css,如下所示：

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

4. “门户自定义”组件定制完成之后，重新发布即可